feat(cart): integrate confirmation modals for item removal in cart component

- Implemented ConfirmModalComponent and ConfirmDeleteModalComponent for confirmation dialogs.
- Added modal service methods to open confirm and confirm delete modals.
- Created corresponding HTML and SCSS files for both modal components.
- Updated ReutilizablesTestPageComponent to utilize new modals.
- Enhanced modal service tests to cover new functionality.
- Refactored existing tests to accommodate changes in modal behavior and structure.

angular.json

@@ -2,7 +2,8 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "npm"
+    "packageManager": "npm",
+    "analytics": false
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -35,7 +36,10 @@
             "server": "src/main.server.ts",
             "outputMode": "server",
             "security": {
-              "allowedHosts": ["localhost", "127.0.0.1"]
+              "allowedHosts": [
+                "localhost",
+                "127.0.0.1"
+              ]
             },
             "ssr": {
               "entry": "src/server.ts"
@@ -58,6 +62,11 @@
               "outputHashing": "all"
             },
             "development": {
+              "optimization": true,
+              "extractLicenses": false,
+              "sourceMap": true
+            },
+            "local": {
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true
@@ -73,6 +82,9 @@
             },
             "development": {
               "buildTarget": "shopit-front:build:development"
+            },
+            "local": {
+              "buildTarget": "shopit-front:build:local"
             }
           },
           "defaultConfiguration": "development"
@@ -83,4 +95,4 @@
       }
     }
   }
-}
+}

src/app/app.config.ts

@@ -1,4 +1,4 @@
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withFetch } from '@angular/common/http';
 import { ApplicationConfig, provideAppInitializer, provideBrowserGlobalErrorListeners } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideClientHydration } from '@angular/platform-browser';
@@ -11,7 +11,7 @@ export const appConfig: ApplicationConfig = {
     provideBrowserGlobalErrorListeners(),
     provideRouter(routes),
     provideClientHydration(),
-    provideHttpClient(),
+    provideHttpClient(withFetch()),
     provideAppInitializer(tenantBootstrap)
   ]
 };

src/app/app.html

@@ -1 +1,19 @@
-<router-outlet />
+@if (status() === 'ready') {
+  <router-outlet />
+  <app-toast-container />
+  <app-modal-host />
+} @else if (status() === 'not-found') {
+  <section class="tenant-status">
+    <div class="tenant-status__card">
+      <span class="tenant-status__code">404</span>
+      <h1 class="tenant-status__title">No encontramos una tienda para este dominio</h1>
+      <p class="tenant-status__description">
+        Verifica la configuracion del tenant o intenta nuevamente con un dominio valido.
+      </p>
+    </div>
+  </section>
+} @else {
+  <section class="tenant-status tenant-status--loading" aria-hidden="true">
+    <div class="tenant-status__spinner"></div>
+  </section>
+}

src/app/app.routes.server.ts

@@ -3,6 +3,6 @@ import { RenderMode, ServerRoute } from '@angular/ssr';
 export const serverRoutes: ServerRoute[] = [
   {
     path: '**',
-    renderMode: RenderMode.Prerender
+    renderMode: RenderMode.Server
   }
 ];

src/app/app.routes.spec.ts

@@ -1,15 +1,74 @@
+import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { provideRouter, Router } from '@angular/router';
 
+import { of } from 'rxjs';
+
 import { App } from './app';
 import { routes } from './app.routes';
+import { Tenant } from './core/services/tenant.interface';
+import { TenantService } from './core/services/tenant.service';
+import { CartService } from './core/services/cart/cart.service';
 
-async function renderAppAt(url: string) {
+const tenant: Tenant = {
+  id: 1,
+  codigo: 'test',
+  nombre: 'Test Tenant',
+  dominio: 'localhost',
+  primary_color: '#6376F3',
+  secondary_color: '#A0A0A0',
+  danger_color: '#FF8888',
+  success_color: '#198754',
+  header_bg_color: '#313131',
+  footer_bg_color: '#313131',
+  header_logo: 'https://example.com/header.png',
+  footer_logo: 'https://example.com/footer.png'
+};
+
+function createTenantServiceStub(
+  status: 'ready' | 'not-found' = 'ready',
+  currentTenant: Tenant | null = tenant
+) {
+  const tenantState = signal(currentTenant);
+  const statusState = signal(status);
+
+  return {
+    tenant: tenantState.asReadonly(),
+    status: statusState.asReadonly(),
+    getTenant: () => tenantState(),
+    getTenantApiUrl: () => {
+      const tenantVal = tenantState();
+      if (!tenantVal) {
+        throw new Error('No se pudo resolver el tenant activo.');
+      }
+      return `http://localhost:8000/api/tenants/${tenantVal.codigo}`;
+    },
+    bootstrap: vi.fn().mockResolvedValue(undefined)
+  };
+}
+
+async function renderAppAt(
+  url: string,
+  tenantService: ReturnType<typeof createTenantServiceStub> = createTenantServiceStub()
+) {
   TestBed.resetTestingModule();
 
   await TestBed.configureTestingModule({
     imports: [App],
-    providers: [provideRouter(routes)]
+    providers: [
+      provideRouter(routes),
+      {
+        provide: TenantService,
+        useValue: tenantService
+      },
+      {
+        provide: CartService,
+        useValue: {
+          cart: signal(null).asReadonly(),
+          loadCart: () => of({ id: 1, items: [], subtotal: '0' })
+        }
+      }
+    ]
   }).compileComponents();
 
   const router = TestBed.inject(Router);
@@ -24,21 +83,37 @@ async function renderAppAt(url: string) {
 }
 
 describe('app routes', () => {
-  it('loads the store layout at /store', async () => {
+  it('loads the store layout at /', async () => {
-    const { fixture, router } = await renderAppAt('/store');
+    const { fixture, router } = await renderAppAt('/');
     const compiled = fixture.nativeElement as HTMLElement;
 
-    expect(router.url).toBe('/store');
+    expect(router.url).toBe('/');
     expect(compiled.querySelector('.store-layout')).not.toBeNull();
-    expect(compiled.querySelector('.store-home')).not.toBeNull();
+    expect(compiled.querySelector('app-store-home-page')).not.toBeNull();
-    expect(compiled.textContent).toContain('Tienda en construccion');
+    expect(compiled.textContent).toContain('Productos');
+    expect(compiled.style.getPropertyValue('--tenant-primary')).toBe(tenant.primary_color);
   });
 
-  it('keeps the root redirect under componentes-test', async () => {
+  it('loads componentes-test under a valid tenant', async () => {
     const { fixture, router } = await renderAppAt('/');
+    await router.navigateByUrl('/componentes-test/reutilizables');
+    await fixture.whenStable();
+    fixture.detectChanges();
+
     const compiled = fixture.nativeElement as HTMLElement;
 
     expect(router.url).toBe('/componentes-test/reutilizables');
     expect(compiled.textContent).toContain('Componentes reutilizables');
   });
+
+  it('renders the tenant not found screen for any route when the tenant is missing', async () => {
+    const { fixture } = await renderAppAt(
+      '/componentes-test/reutilizables',
+      createTenantServiceStub('not-found', null)
+    );
+    const compiled = fixture.nativeElement as HTMLElement;
+
+    expect(compiled.querySelector('.tenant-status')).not.toBeNull();
+    expect(compiled.textContent).toContain('No encontramos una tienda para este dominio');
+  });
 });

src/app/app.routes.ts

@@ -8,11 +8,11 @@ export const routes: Routes = [
   },
   {
     path: 'store',
-    loadChildren: () => import('./features/store/store.routes').then((m) => m.routes)
+    pathMatch: 'full',
+    redirectTo: ''
   },
   {
     path: '',
-    pathMatch: 'full',
+    loadChildren: () => import('./features/store/store.routes').then((m) => m.routes)
-    redirectTo: 'componentes-test'
   }
 ];

src/app/app.scss

@@ -1,3 +1,68 @@
 :host {
   display: block;
+  min-height: 100dvh;
+}
+
+.tenant-status {
+  min-height: 100dvh;
+  display: grid;
+  place-items: center;
+  padding: 2rem;
+  background:
+    radial-gradient(circle at top, color-mix(in srgb, white 82%, var(--tenant-primary)) 0%, transparent 55%),
+    linear-gradient(180deg, #f8f8f8 0%, #efefef 100%);
+  color: #202020;
+}
+
+.tenant-status__card {
+  width: min(100%, 34rem);
+  padding: 2rem;
+  border: 1px solid rgba(32, 32, 32, 0.1);
+  border-radius: 1.5rem;
+  background-color: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.1);
+}
+
+.tenant-status__code {
+  display: inline-block;
+  margin-bottom: 1rem;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: var(--tenant-primary);
+}
+
+.tenant-status__title {
+  margin: 0 0 0.75rem;
+  font-size: clamp(2rem, 4vw, 2.75rem);
+  line-height: 1.05;
+}
+
+.tenant-status__description {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: rgba(32, 32, 32, 0.72);
+}
+
+.tenant-status--loading {
+  background:
+    radial-gradient(circle at center, color-mix(in srgb, white 88%, var(--tenant-primary)) 0%, transparent 60%),
+    #f5f5f5;
+}
+
+.tenant-status__spinner {
+  width: 3rem;
+  height: 3rem;
+  border: 0.25rem solid rgba(32, 32, 32, 0.08);
+  border-top-color: var(--tenant-primary);
+  border-radius: 999px;
+  animation: tenant-status-spin 0.8s linear infinite;
+}
+
+@keyframes tenant-status-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }

src/app/app.spec.ts

@@ -1,23 +1,111 @@
-import { TestBed } from '@angular/core/testing';
+import '@angular/compiler';
+import { signal } from '@angular/core';
+import { TestBed, getTestBed } from '@angular/core/testing';
+import {
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing';
+import { provideRouter } from '@angular/router';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
 import { App } from './app';
+import { Tenant } from './core/services/tenant.interface';
+import { TenantService } from './core/services/tenant.service';
+
+const tenant: Tenant = {
+  id: 1,
+  codigo: 'test',
+  nombre: 'Test Tenant',
+  dominio: 'localhost',
+  primary_color: '#6376F3',
+  secondary_color: '#A0A0A0',
+  danger_color: '#FF8888',
+  success_color: '#198754',
+  header_bg_color: '#313131',
+  footer_bg_color: '#313131',
+  header_logo: 'https://example.com/header.png',
+  footer_logo: 'https://example.com/footer.png'
+};
+
+function createTenantServiceStub(status: 'ready' | 'not-found', currentTenant: Tenant | null) {
+  const tenantState = signal(currentTenant);
+  const statusState = signal(status);
+
+  return {
+    tenant: tenantState.asReadonly(),
+    status: statusState.asReadonly(),
+    getTenant: () => tenantState(),
+    bootstrap: vi.fn().mockResolvedValue(undefined)
+  };
+}
 
 describe('App', () => {
-  beforeEach(async () => {
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(
+        BrowserTestingModule,
+        platformBrowserTesting()
+      );
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  it('creates the app when the tenant is ready', async () => {
     await TestBed.configureTestingModule({
       imports: [App],
+      providers: [
+        provideRouter([]),
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub('ready', tenant)
+        }
+      ]
     }).compileComponents();
+
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance).toBeTruthy();
+    expect(fixture.nativeElement.style.getPropertyValue('--tenant-primary')).toBe(
+      tenant.primary_color
+    );
+    expect(fixture.nativeElement.style.getPropertyValue('--tenant-secondary')).toBe(
+      tenant.secondary_color
+    );
+    expect(fixture.nativeElement.style.getPropertyValue('--tenant-danger')).toBe(
+      tenant.danger_color
+    );
+    expect(fixture.nativeElement.style.getPropertyValue('--tenant-primary-rgb')).toBe(
+      '99, 118, 243'
+    );
+    expect(fixture.nativeElement.style.getPropertyValue('--tenant-secondary-rgb')).toBe(
+      '160, 160, 160'
+    );
+    expect(fixture.nativeElement.style.getPropertyValue('--tenant-danger-rgb')).toBe(
+      '255, 136, 136'
+    );
   });
 
-  it('should create the app', () => {
+  it('renders the tenant not found screen when the tenant is missing', async () => {
-    const fixture = TestBed.createComponent(App);
+    await TestBed.configureTestingModule({
-    const app = fixture.componentInstance;
+      imports: [App],
-    expect(app).toBeTruthy();
+      providers: [
-  });
+        provideRouter([]),
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub('not-found', null)
+        }
+      ]
+    }).compileComponents();
 
-  it('should render title', async () => {
     const fixture = TestBed.createComponent(App);
-    await fixture.whenStable();
+    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
+
-    expect(compiled.querySelector('router-outlet')).not.toBeNull();
+    expect(fixture.nativeElement.textContent).toContain('No encontramos una tienda para este dominio');
   });
 });

src/app/app.ts

@@ -1,10 +1,82 @@
-import { Component } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
+import { TenantService } from './core/services/tenant.service';
+import { DEFAULT_TENANT_BRANDING } from './core/services/tenant-ssr-cache.store';
+import { ModalHostComponent } from './shared/components/modal-host/modal-host.component';
+import { ToastContainerComponent } from './shared/components/toast-container/toast-container.component';
+
+function hexToRgb(hex: string): string {
+  const cleanHex = hex.replace('#', '').trim();
+  let r = 0, g = 0, b = 0;
+  if (cleanHex.length === 3) {
+    r = parseInt(cleanHex[0] + cleanHex[0], 16);
+    g = parseInt(cleanHex[1] + cleanHex[1], 16);
+    b = parseInt(cleanHex[2] + cleanHex[2], 16);
+  } else if (cleanHex.length >= 6) {
+    r = parseInt(cleanHex.slice(0, 2), 16);
+    g = parseInt(cleanHex.slice(2, 4), 16);
+    b = parseInt(cleanHex.slice(4, 6), 16);
+  }
+  return `${r}, ${g}, ${b}`;
+}
+
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, ToastContainerComponent, ModalHostComponent],
   templateUrl: './app.html',
-  styleUrl: './app.scss'
+  styleUrl: './app.scss',
+  host: {
+    '[style.--tenant-primary]': 'tenantPrimaryColor()',
+    '[style.--tenant-secondary]': 'tenantSecondaryColor()',
+    '[style.--tenant-danger]': 'tenantDangerColor()',
+    '[style.--tenant-success]': 'tenantSuccessColor()',
+    '[style.--tenant-primary-rgb]': 'tenantPrimaryColorRgb()',
+    '[style.--tenant-secondary-rgb]': 'tenantSecondaryColorRgb()',
+    '[style.--tenant-danger-rgb]': 'tenantDangerColorRgb()',
+    '[style.--tenant-success-rgb]': 'tenantSuccessColorRgb()',
+    '[style.--tenant-header-bg]': 'tenantHeaderBgColor()',
+    '[style.--tenant-footer-bg]': 'tenantFooterBgColor()'
+  }
 })
-export class App {}
+export class App {
+  private readonly tenantService = inject(TenantService);
+
+  protected readonly status = this.tenantService.status;
+
+  protected readonly tenantPrimaryColor = computed(
+    () => this.tenantService.tenant()?.primary_color ?? DEFAULT_TENANT_BRANDING.primaryColor
+  );
+  protected readonly tenantSecondaryColor = computed(
+    () => this.tenantService.tenant()?.secondary_color ?? DEFAULT_TENANT_BRANDING.secondaryColor
+  );
+  protected readonly tenantDangerColor = computed(
+    () => this.tenantService.tenant()?.danger_color ?? DEFAULT_TENANT_BRANDING.dangerColor
+  );
+  protected readonly tenantSuccessColor = computed(
+    () => this.tenantService.tenant()?.success_color ?? DEFAULT_TENANT_BRANDING.successColor
+  );
+  protected readonly tenantPrimaryColorRgb = computed(() =>
+    hexToRgb(this.tenantPrimaryColor())
+  );
+  protected readonly tenantSecondaryColorRgb = computed(() =>
+    hexToRgb(this.tenantSecondaryColor())
+  );
+  protected readonly tenantDangerColorRgb = computed(() =>
+    hexToRgb(this.tenantDangerColor())
+  );
+  protected readonly tenantSuccessColorRgb = computed(() =>
+    hexToRgb(this.tenantSuccessColor())
+  );
+  protected readonly tenantHeaderBgColor = computed(
+    () =>
+      this.tenantService.tenant()?.header_bg_color ??
+      DEFAULT_TENANT_BRANDING.headerBgColor
+  );
+  protected readonly tenantFooterBgColor = computed(
+    () =>
+      this.tenantService.tenant()?.footer_bg_color ??
+      DEFAULT_TENANT_BRANDING.footerBgColor
+  );
+}
+

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

@@ -7,15 +7,11 @@
           data-testid="store-footer-brand-slot"
           aria-label="Logo del comercio"
         >
-          @if (logoUrl && logoLoaded) {
+          @if (logoUrl) {
             <img class="store-layout__brand-logo" [src]="logoUrl" alt="Logo del comercio" />
           } @else {
             <div class="store-layout__brand-logo-shell" aria-hidden="true">
               <span class="store-layout__brand-logo-skeleton"></span>
-
-              @if (logoUrl && !logoLoaded) {
-                <img class="store-layout__brand-logo store-layout__brand-logo--preload" [src]="logoUrl" alt="" (load)="onLogoLoad()" />
-              }
             </div>
           }
         </div>
@@ -31,7 +27,7 @@
           </div>
         </div>
 
-        <p class="mb-0 small text-white-50">Copyright &copy; {{ currentYear }} - Sonder</p>
+        <p class="mb-0 small store-layout__muted-text">Copyright &copy; {{ currentYear }} - Sonder</p>
       </div>
 
       @for (section of footerSections; track section.heading) {
@@ -39,7 +35,7 @@
           <h2 class="store-layout__footer-heading">{{ section.heading }}</h2>
           <div class="d-grid gap-2">
             @for (link of section.links; track link) {
-              <span class="text-light-emphasis">{{ link }}</span>
+              <span class="store-layout__muted-text">{{ link }}</span>
             }
           </div>
         </div>

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

@@ -1,5 +1,5 @@
 .store-layout__footer {
-  background-color: #323232;
+  background-color: var(--tenant-footer-bg);
 }
 
 .store-layout__brand-slot {
@@ -20,13 +20,6 @@
   object-fit: contain;
 }
 
-.store-layout__brand-logo--preload {
-  opacity: 0;
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
 .store-layout__brand-logo-skeleton {
   display: block;
   width: 100%;
@@ -69,6 +62,10 @@
   color: #f8f8f8;
 }
 
+.store-layout__muted-text {
+  color: rgba(255, 255, 255, 0.72);
+}
+
 @keyframes store-footer-logo-skeleton {
   from {
     background-position: 200% 0;

src/app/core/layout/store-layout/store-footer/store-footer.component.ts

@@ -17,25 +17,8 @@ export type StoreSocialLink = {
   styleUrl: './store-footer.component.scss'
 })
 export class StoreFooterComponent {
-  private logoUrlValue: string | null = null;
-
   @Input({ required: true }) currentYear = new Date().getFullYear();
   @Input({ required: true }) footerSections: StoreFooterSection[] = [];
   @Input({ required: true }) socialLinks: StoreSocialLink[] = [];
-
+  @Input() logoUrl: string | null = null;
-  @Input()
-  set logoUrl(value: string | null) {
-    this.logoUrlValue = value;
-    this.logoLoaded = false;
-  }
-
-  get logoUrl(): string | null {
-    return this.logoUrlValue;
-  }
-
-  protected logoLoaded = false;
-
-  protected onLogoLoad(): void {
-    this.logoLoaded = true;
-  }
 }

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

@@ -1,49 +1,50 @@
-<header class="store-layout__header bg-white border-bottom">
+<header class="store-layout__header">
-  <div class="border-bottom">
+  <div class="store-layout__header-main">
-    <div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-wrap align-items-center justify-content-between gap-3">
+    <div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-row flex-wrap align-items-center justify-content-between gap-3">
       <div
         class="store-layout__brand-slot d-inline-flex align-items-center gap-3 flex-shrink-0"
         data-testid="store-header-brand-slot"
         aria-label="Logo del comercio"
       >
-        @if (logoUrl && logoLoaded) {
+        @if (logoUrl()) {
-          <img class="store-layout__brand-logo" [src]="logoUrl" alt="Logo del comercio" />
+          <img class="store-layout__brand-logo" [src]="logoUrl()" alt="Logo del comercio" />
         } @else {
           <div class="store-layout__brand-logo-shell" aria-hidden="true">
             <span class="store-layout__brand-logo-skeleton"></span>
-
-            @if (logoUrl && !logoLoaded) {
-              <img class="store-layout__brand-logo store-layout__brand-logo--preload" [src]="logoUrl" alt="" (load)="onLogoLoad()" />
-            }
           </div>
         }
       </div>
 
-      <div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-3 ms-auto w-100 w-lg-auto">
+      <div class="d-flex flex-row align-items-center gap-3 ms-auto flex-nowrap w-100 justify-content-between justify-content-md-end">
-        <div class="input-group store-layout__search" role="search">
+        <div class="input-group store-layout__search flex-grow-1" role="search">
           <label class="visually-hidden" for="store-search-input">Buscar productos</label>
           <input
             id="store-search-input"
             type="search"
-            class="form-control border-dark border-end-0 rounded-start"
+            class="form-control store-layout__search-input border-end-0 rounded-start"
             placeholder="Buscar productos"
           />
-          <button type="button" class="btn btn-outline-dark border-start-0 rounded-end px-3" aria-label="Buscar">
+          <button
+            type="button"
+            class="btn store-layout__search-button border-start-0 rounded-end px-3"
+            aria-label="Buscar"
+          >
             <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
           </button>
         </div>
 
         <div class="d-flex align-items-center justify-content-end gap-1" aria-label="Acciones de usuario">
-          @for (action of headerActions; track action.label) {
+          <app-cart-icon
-            <button
+            [quantity]="cartQuantity()"
-              type="button"
+            ariaLabel="Carrito de compras"
-              class="btn btn-link text-dark p-2 text-decoration-none"
+            title="Carrito"
-              [attr.aria-label]="action.label"
+            (click)="cartClick.emit()"
-              [attr.title]="action.label"
+          />
-            >
+          <app-icon-button
-              <i [class]="action.iconClass" aria-hidden="true"></i>
+            variant="user"
-            </button>
+            ariaLabel="Mi cuenta"
-          }
+            title="Mi cuenta"
+          />
         </div>
       </div>
     </div>
@@ -53,7 +54,7 @@
     <div class="container-xl px-3 px-md-4">
       <button
         type="button"
-        class="btn btn-link d-inline-flex align-items-center gap-2 px-0 py-2 text-dark text-uppercase fw-bold text-decoration-none store-layout__category-trigger"
+        class="btn btn-link d-inline-flex align-items-center gap-2 px-0 py-2 text-uppercase fw-bold text-decoration-none store-layout__category-trigger"
         aria-label="Categorias"
       >
         <span>Categorias</span>

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

@@ -1,3 +1,13 @@
+.store-layout__header {
+  color: #ffffff;
+  background-color: var(--tenant-header-bg);
+  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.store-layout__header-main {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
 .store-layout__brand-slot {
   min-width: 10rem;
 }
@@ -15,31 +25,72 @@
   object-fit: contain;
 }
 
-.store-layout__brand-logo--preload {
-  opacity: 0;
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
 .store-layout__brand-logo-skeleton {
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 0.75rem;
-  background: linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.14) 50%, rgba(0, 0, 0, 0.08) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.12) 0%,
+    rgba(255, 255, 255, 0.22) 50%,
+    rgba(255, 255, 255, 0.12) 100%
+  );
   background-size: 200% 100%;
   animation: store-header-logo-skeleton 1.2s ease-in-out infinite;
 }
 
 .store-layout__search {
   width: min(100%, 24rem);
-  min-width: 18rem;
+  min-width: 0;
+}
+
+.store-layout__search-input {
+  color: #666666;
+  border-color: #cccccc;
+  background-color: rgba(255, 255, 255, 0.96);
+}
+
+.store-layout__search-input::placeholder {
+  color: #666666;
+}
+
+.store-layout__search-input:focus {
+  border-color: var(--tenant-primary);
+  box-shadow: 0 0 0 0.25rem color-mix(in srgb, white 70%, var(--tenant-primary));
+}
+
+.store-layout__search-button {
+  color: #a0a0a0;
+  border-color: #cccccc;
+  background-color: rgba(255, 255, 255, 0.96);
+}
+
+.store-layout__search-button:hover,
+.store-layout__search-button:focus-visible {
+  color: #8a8a8a;
+  border-color: #cccccc;
+  background-color: #ffffff;
+}
+
+.store-layout__action-button {
+  color: #a0a0a0;
+}
+
+.store-layout__action-button:hover,
+.store-layout__action-button:focus-visible {
+  color: #8a8a8a;
 }
 
 .store-layout__category-trigger {
   font-size: 0.8rem;
   letter-spacing: 0.02em;
+  color: #a0a0a0;
+}
+
+.store-layout__category-trigger:hover,
+.store-layout__category-trigger:focus-visible {
+  color: #8a8a8a;
 }
 
 @keyframes store-header-logo-skeleton {
@@ -56,8 +107,4 @@
   .store-layout__brand-slot {
     min-width: 0;
   }
-
-  .store-layout__search {
-    min-width: 0;
-  }
 }

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

@@ -1,34 +1,15 @@
-import { Component, Input } from '@angular/core';
+import { Component, input, output } from '@angular/core';
-
+import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
-export type StoreHeaderAction = {
+import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
-  label: string;
-  iconClass: string;
-};
 
 @Component({
   selector: 'app-store-header',
-  imports: [],
+  imports: [CartIconComponent, IconButtonComponent],
   templateUrl: './store-header.component.html',
   styleUrl: './store-header.component.scss'
 })
 export class StoreHeaderComponent {
-  private logoUrlValue: string | null = null;
+  readonly logoUrl = input<string | null>(null);
-
+  readonly cartQuantity = input<number>(0);
-  @Input({ required: true }) headerActions: StoreHeaderAction[] = [];
+  readonly cartClick = output<void>();
-
-  @Input()
-  set logoUrl(value: string | null) {
-    this.logoUrlValue = value;
-    this.logoLoaded = false;
-  }
-
-  get logoUrl(): string | null {
-    return this.logoUrlValue;
-  }
-
-  protected logoLoaded = false;
-
-  protected onLogoLoad(): void {
-    this.logoLoaded = true;
-  }
 }

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

@@ -1,5 +1,27 @@
 <div class="store-layout d-flex flex-column flex-grow-1">
-  <app-store-header [headerActions]="headerActions" [logoUrl]="tenant()?.header_logo ?? null" />
+  <app-store-header
+    [cartQuantity]="cartQuantity()"
+    [logoUrl]="tenant()?.header_logo ?? null"
+    (cartClick)="isCartOpen.set(!isCartOpen())"
+  />
+
+  @if (isCartOpen()) {
+    <div class="store-layout__cart-overlay" (click)="isCartOpen.set(false)"></div>
+    <div class="store-layout__cart-dropdown card border-0 shadow-lg">
+      <app-cart
+        [showClose]="true"
+        [items]="mappedCartItems()"
+        [subtotal]="cartSubtotal()"
+        [discount]="cartDiscount()"
+        [total]="cartTotal()"
+        [backgroundColor]="'#ffffff'"
+        (closed)="isCartOpen.set(false)"
+      >
+        <app-button variant="secondary" class="flex-grow-1">Seguir comprando</app-button>
+        <app-button variant="primary" class="flex-grow-1">Comprar</app-button>
+      </app-cart>
+    </div>
+  }
 
   <main class="flex-grow-1 d-block">
     <router-outlet />

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

@@ -1,6 +1,62 @@
 :host {
   display: flex;
   min-height: 100dvh;
-  background-color: #f6f6f6;
+  background:
+    radial-gradient(
+      circle at top,
+      color-mix(in srgb, white 88%, var(--tenant-primary)) 0%,
+      transparent 58%
+    ),
+    #f6f6f6;
   color: #202020;
 }
+
+.store-layout {
+  position: relative;
+}
+
+.store-layout__cart-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1040;
+  background: transparent;
+}
+
+.store-layout__cart-dropdown {
+  position: absolute;
+  top: 76px;
+  right: calc((100% - 1320px) / 2 + 1.5rem);
+ 
+  height: 520px;
+  max-height: calc(100vh - 120px);
+  z-index: 1050;
+  background-color: #ffffff;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  animation: store-layout-slide-down 0.2s ease-out;
+
+  @media (max-width: 1400px) {
+    right: 1.5rem;
+  }
+  @media (max-width: 576px) {
+    right: 1rem;
+    left: 1rem;
+    width: auto;
+  }
+}
+
+@keyframes store-layout-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/app/core/layout/store-layout/store-layout.component.spec.ts

@@ -1,13 +1,67 @@
+import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 
+import { of } from 'rxjs';
+
+import { Tenant } from '../../services/tenant.interface';
+import { TenantService } from '../../services/tenant.service';
+import { CartService } from '../../services/cart/cart.service';
+import { ToastService } from '../../services/toast.service';
 import { StoreLayoutComponent } from './store-layout.component';
 
+const tenant: Tenant = {
+  id: 1,
+  codigo: 'test',
+  nombre: 'Test Tenant',
+  dominio: 'localhost',
+  primary_color: '#6376F3',
+  secondary_color: '#A0A0A0',
+  danger_color: '#FF8888',
+  success_color: '#198754',
+  header_bg_color: '#313131',
+  footer_bg_color: '#313131',
+  header_logo: 'https://example.com/header.png',
+  footer_logo: 'https://example.com/footer.png'
+};
+
 describe('StoreLayoutComponent', () => {
   beforeEach(async () => {
+    const tenantState = signal(tenant);
+
     await TestBed.configureTestingModule({
       imports: [StoreLayoutComponent],
-      providers: [provideRouter([])]
+      providers: [
+        provideRouter([]),
+        {
+          provide: TenantService,
+          useValue: {
+            tenant: tenantState.asReadonly(),
+            status: signal<'ready'>('ready').asReadonly(),
+            getTenant: () => tenantState(),
+            bootstrap: vi.fn().mockResolvedValue(undefined)
+          }
+        },
+        {
+          provide: CartService,
+          useValue: {
+            cart: signal(null).asReadonly(),
+            loadCart: () => of({ id: 1, items: [], subtotal: '0' }),
+            updateItemQuantity: vi.fn().mockReturnValue(of({ data: { id: 1, items: [], subtotal: '0' } })),
+            removeItem: vi.fn().mockReturnValue(of({ data: { id: 1, items: [], subtotal: '0' } }))
+          }
+        },
+        {
+          provide: ToastService,
+          useValue: {
+            show: vi.fn(),
+            info: vi.fn(),
+            danger: vi.fn(),
+            success: vi.fn(),
+            dismiss: vi.fn()
+          }
+        }
+      ]
     }).compileComponents();
   });
 
@@ -23,7 +77,7 @@ describe('StoreLayoutComponent', () => {
     expect(compiled.querySelector('app-store-footer .store-layout__footer')).not.toBeNull();
   });
 
-  it('renders the placeholder branding and action icons', () => {
+  it('renders the tenant branding and action icons', () => {
     const fixture = TestBed.createComponent(StoreLayoutComponent);
     fixture.detectChanges();
 
@@ -31,6 +85,12 @@ describe('StoreLayoutComponent', () => {
 
     expect(compiled.querySelector('[data-testid="store-header-brand-slot"]')).not.toBeNull();
     expect(compiled.querySelector('[data-testid="store-footer-brand-slot"]')).not.toBeNull();
+    expect(
+      compiled.querySelector(`app-store-header img.store-layout__brand-logo[src="${tenant.header_logo}"]`)
+    ).not.toBeNull();
+    expect(
+      compiled.querySelector(`app-store-footer img.store-layout__brand-logo[src="${tenant.footer_logo}"]`)
+    ).not.toBeNull();
     expect(compiled.querySelector('.fa-cart-shopping')).not.toBeNull();
     expect(compiled.querySelector('.fa-circle-user')).not.toBeNull();
     expect(compiled.querySelector('.fa-instagram')).not.toBeNull();

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

@@ -1,31 +1,85 @@
-import { Component, inject } from '@angular/core';
+import { Component, computed, inject, OnInit, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { TenantService } from '../../services/tenant.service';
+import { CartService } from '../../services/cart/cart.service';
 import { StoreFooterComponent, StoreFooterSection, StoreSocialLink } from './store-footer/store-footer.component';
-import { StoreHeaderComponent, StoreHeaderAction } from './store-header/store-header.component';
+import { StoreHeaderComponent } from './store-header/store-header.component';
+import { CartComponent, CartItemMock } from '../../../shared/components/cart/cart.component';
+import { ButtonComponent } from '../../../shared/components/button/button.component';
+import { CartItem } from '../../services/cart/cart.interface';
 
 @Component({
   selector: 'app-store-layout',
-  imports: [RouterOutlet, StoreHeaderComponent, StoreFooterComponent],
+  imports: [RouterOutlet, StoreHeaderComponent, StoreFooterComponent, CartComponent, ButtonComponent],
   templateUrl: './store-layout.component.html',
   styleUrl: './store-layout.component.scss'
 })
-export class StoreLayoutComponent {
+export class StoreLayoutComponent implements OnInit {
   private readonly tenantService = inject(TenantService);
+  private readonly cartService = inject(CartService);
+
+  protected readonly isCartOpen = signal(false);
+
+  protected readonly cartSubtotal = computed(() => {
+    const cart = this.cartService.cart();
+    return cart ? parseFloat(cart.subtotal) : 0;
+  });
+
+  protected readonly cartDiscount = computed(() => 0);
+
+  protected readonly cartTotal = computed(() => this.cartSubtotal() - this.cartDiscount());
+
+  protected readonly mappedCartItems = computed<CartItemMock[]>(() => {
+    const cart = this.cartService.cart();
+    if (!cart || !cart.items) return [];
+    return cart.items.map((item) => this.mapCartItemToMock(item));
+  });
+
+  private mapCartItemToMock(item: CartItem): CartItemMock {
+    const fullName = item.product?.nombre ?? '';
+    let product = fullName;
+    let attributes: { label: string; value: string }[] = [];
+
+    const match = fullName.match(/^(.*?)\s*\((.*?)\)$/);
+    if (match) {
+      product = match[1];
+      const attributesString = match[2];
+      attributes = attributesString.split(',').map((attr) => {
+        const parts = attr.split(':');
+        if (parts.length === 2) {
+          return { label: parts[0].trim(), value: parts[1].trim() };
+        }
+        return { label: '', value: attr.trim() };
+      });
+    }
+
+    return {
+      productVariantId: item.product_variant_id,
+      imageUrl: item.product?.imagen ?? null,
+      product,
+      originalPrice: null,
+      discountedPrice: parseFloat(item.precio_unitario),
+      discountPercentage: null,
+      attributes,
+      quantity: item.cantidad
+    };
+  }
 
   protected readonly currentYear = new Date().getFullYear();
   protected readonly tenant = this.tenantService.tenant;
 
-  protected readonly headerActions: StoreHeaderAction[] = [
+  protected readonly cartQuantity = computed(() => {
-    {
+    const cart = this.cartService.cart();
-      label: 'Carrito',
+    if (!cart || !cart.items) return 0;
-      iconClass: 'fa-solid fa-cart-shopping'
+    return cart.items.reduce((total, item) => total + item.cantidad, 0);
-    },
+  });
-    {
+
-      label: 'Mi cuenta',
+  ngOnInit(): void {
-      iconClass: 'fa-solid fa-circle-user'
+    this.cartService.loadCart().subscribe({
-    }
+      error: (err) => console.error('Error loading cart', err)
-  ];
+    });
+  }
+
 
   protected readonly footerSections: StoreFooterSection[] = [
     {

src/app/core/services/api-paginated-response.interface.ts

@@ -0,0 +1,30 @@
+import { ApiResponse } from './api-response.interface';
+
+export interface ApiPaginationMetaLink {
+  url: string | null;
+  label: string;
+  active: boolean;
+}
+
+export interface ApiPaginationMeta {
+  current_page: number;
+  from: number | null;
+  last_page: number;
+  links: ApiPaginationMetaLink[];
+  path: string;
+  per_page: number;
+  to: number | null;
+  total: number;
+}
+
+export interface ApiPaginationLinks {
+  first: string;
+  last: string;
+  prev: string | null;
+  next: string | null;
+}
+
+export interface ApiPaginatedResponse<T> extends ApiResponse<T> {
+  meta: ApiPaginationMeta;
+  links: ApiPaginationLinks;
+}

src/app/core/services/api-pagination-query-params.interface.ts

@@ -0,0 +1,4 @@
+export interface ApiPaginationQueryParams {
+  page?: number;
+  per_page?: number;
+}

src/app/core/services/api-response.interface.ts

@@ -0,0 +1,5 @@
+export interface ApiResponse<T> {
+  data: T;
+  message?: string;
+  errors?: Record<string, string[]>;
+}

src/app/core/services/cart/cart.interface.ts

@@ -0,0 +1,21 @@
+export interface CartItemProduct {
+  nombre: string;
+  imagen: string | null;
+}
+
+export interface CartItem {
+  id: number;
+  cantidad: number;
+  precio_unitario: string;
+  product_id: number;
+  product_variant_id: number;
+  product: CartItemProduct | null;
+}
+
+export interface Cart {
+  id: number | null;
+  tenant_codigo: string;
+  status: string;
+  items: CartItem[];
+  subtotal: string;
+}

src/app/core/services/cart/cart.service.spec.ts

@@ -0,0 +1,125 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+
+import { CartService } from './cart.service';
+import { TenantService } from '../tenant.service';
+import { Cart } from './cart.interface';
+
+describe('CartService', () => {
+  let service: CartService;
+  let httpMock: HttpTestingController;
+  let tenantServiceMock: any;
+
+  const mockCart: Cart = {
+    id: 123,
+    tenant_codigo: 'acme',
+    status: 'active',
+    items: [
+      {
+        id: 1,
+        cantidad: 2,
+        precio_unitario: '10.00',
+        product_id: 5,
+        product_variant_id: 10,
+        product: {
+          nombre: 'Test Product (Size: M)',
+          imagen: null
+        }
+      }
+    ],
+    subtotal: '20.00'
+  };
+
+  beforeEach(() => {
+    tenantServiceMock = {
+      getTenantApiUrl: vi.fn().mockReturnValue('http://api.test/tenants/acme')
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        CartService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        { provide: TenantService, useValue: tenantServiceMock }
+      ]
+    });
+
+    service = TestBed.inject(CartService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should initialize with null cart signal', () => {
+    expect(service.cart()).toBeNull();
+  });
+
+  it('should load cart and update signal', () => {
+    service.loadCart().subscribe((cart) => {
+      expect(cart).toEqual(mockCart);
+      expect(service.cart()).toEqual(mockCart);
+    });
+
+    const req = httpMock.expectOne('http://api.test/tenants/acme/cart');
+    expect(req.request.method).toBe('GET');
+    expect(req.request.withCredentials).toBe(true);
+    req.flush({ data: mockCart });
+  });
+
+  it('should add item and update signal', () => {
+    service.addItem(10, 2).subscribe((res) => {
+      expect(res.data).toEqual(mockCart);
+      expect(service.cart()).toEqual(mockCart);
+    });
+
+    const req = httpMock.expectOne('http://api.test/tenants/acme/cart/items');
+    expect(req.request.method).toBe('POST');
+    expect(req.request.body).toEqual({ product_variant_id: 10, cantidad: 2 });
+    expect(req.request.withCredentials).toBe(true);
+    req.flush({ data: mockCart });
+  });
+
+  it('should update item quantity and update signal', () => {
+    const updatedCart = { ...mockCart, subtotal: '30.00' };
+    updatedCart.items[0].cantidad = 3;
+
+    service.updateItemQuantity(10, 3).subscribe((res) => {
+      expect(res.data).toEqual(updatedCart);
+      expect(service.cart()).toEqual(updatedCart);
+    });
+
+    const req = httpMock.expectOne('http://api.test/tenants/acme/cart/items/10');
+    expect(req.request.method).toBe('PATCH');
+    expect(req.request.body).toEqual({ cantidad: 3 });
+    expect(req.request.withCredentials).toBe(true);
+    req.flush({ data: updatedCart });
+  });
+
+  it('should remove item and update signal', () => {
+    const emptyCart: Cart = {
+      id: 123,
+      tenant_codigo: 'acme',
+      status: 'active',
+      items: [],
+      subtotal: '0.00'
+    };
+
+    service.removeItem(10).subscribe((res) => {
+      expect(res.data).toEqual(emptyCart);
+      expect(service.cart()).toEqual(emptyCart);
+    });
+
+    const req = httpMock.expectOne('http://api.test/tenants/acme/cart/items/10');
+    expect(req.request.method).toBe('DELETE');
+    expect(req.request.withCredentials).toBe(true);
+    req.flush({ data: emptyCart });
+  });
+});

src/app/core/services/cart/cart.service.ts

@@ -0,0 +1,68 @@
+import { inject, Injectable, signal } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { map, Observable, tap } from 'rxjs';
+
+import { ApiResponse } from '../api-response.interface';
+import { TenantService } from '../tenant.service';
+import { Cart } from './cart.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CartService {
+  private readonly http = inject(HttpClient);
+  private readonly tenantService = inject(TenantService);
+
+  private readonly cartState = signal<Cart | null>(null);
+  readonly cart = this.cartState.asReadonly();
+
+  private get tenantApiUrl(): string {
+    return this.tenantService.getTenantApiUrl();
+  }
+
+  loadCart(): Observable<Cart> {
+    return this.http
+      .get<ApiResponse<Cart>>(`${this.tenantApiUrl}/cart`, {
+        withCredentials: true
+      })
+      .pipe(
+        map((response) => response.data),
+        tap((cart) => this.cartState.set(cart))
+      );
+  }
+
+  addItem(productVariantId: number, cantidad: number): Observable<ApiResponse<Cart>> {
+    return this.http
+      .post<ApiResponse<Cart>>(
+        `${this.tenantApiUrl}/cart/items`,
+        { product_variant_id: productVariantId, cantidad },
+        { withCredentials: true }
+      )
+      .pipe(
+        tap((response) => this.cartState.set(response.data))
+      );
+  }
+
+  updateItemQuantity(productVariantId: number, cantidad: number): Observable<ApiResponse<Cart>> {
+    return this.http
+      .patch<ApiResponse<Cart>>(
+        `${this.tenantApiUrl}/cart/items/${productVariantId}`,
+        { cantidad },
+        { withCredentials: true }
+      )
+      .pipe(
+        tap((response) => this.cartState.set(response.data))
+      );
+  }
+
+  removeItem(productVariantId: number): Observable<ApiResponse<Cart>> {
+    return this.http
+      .delete<ApiResponse<Cart>>(
+        `${this.tenantApiUrl}/cart/items/${productVariantId}`,
+        { withCredentials: true }
+      )
+      .pipe(
+        tap((response) => this.cartState.set(response.data))
+      );
+  }
+}

src/app/core/services/catalog/catalog.interface.ts

@@ -0,0 +1,50 @@
+export interface Product {
+  id: number;
+  category_id: number;
+  brand_id: number | null;
+  slug: string;
+  nombre: string;
+  descripcion: string;
+  precio: string;
+  category: string;
+  brand: string | null;
+  images: string[];
+}
+
+export interface ProductAttributeOption {
+  id: number;
+  value: string;
+  label: string;
+  sort_order: number;
+  metadata: Record<string, unknown> | null;
+}
+
+export interface ProductAttribute {
+  id: number;
+  codigo: string;
+  nombre: string;
+  is_required: boolean;
+  metadata_schema: Record<string, unknown> | null;
+  type: string;
+  options: ProductAttributeOption[];
+}
+
+export interface ProductVariant {
+  id: number;
+  cantidad_maxima: number;
+  definitions: Record<string, string>;
+  images: string[];
+}
+
+export interface ProductVariantMap {
+  variant_id: number;
+  cantidad_maxima: number;
+  attributes: Record<string, string>;
+}
+
+export interface ProductDetail extends Product {
+  attributes: ProductAttribute[];
+  variants_map: ProductVariantMap[];
+  variant: ProductVariant | null;
+}
+

src/app/core/services/catalog/catalog.service.ts

@@ -0,0 +1,67 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { map, Observable } from 'rxjs';
+
+import { ApiPaginationQueryParams } from '../api-pagination-query-params.interface';
+import { ApiPaginatedResponse } from '../api-paginated-response.interface';
+import { ApiResponse } from '../api-response.interface';
+import { TenantService } from '../tenant.service';
+import { Product, ProductDetail } from './catalog.interface';
+
+type HttpParamValue =
+  | string
+  | number
+  | boolean
+  | readonly (string | number | boolean)[];
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CatalogService {
+  private readonly http = inject(HttpClient);
+  private readonly tenantService = inject(TenantService);
+
+  private get tenantApiUrl(): string {
+    return this.tenantService.getTenantApiUrl();
+  }
+
+
+  getProductos(
+    params?: ApiPaginationQueryParams
+  ): Observable<ApiPaginatedResponse<Product[]>> {
+    return this.http.get<ApiPaginatedResponse<Product[]>>(
+      `${this.tenantApiUrl}/productos`,
+      { params: this.buildHttpParams(params) }
+    );
+  }
+
+  getProducto(id: number, variantId?: number): Observable<ProductDetail> {
+    let params = new HttpParams();
+    if (variantId) {
+      params = params.set('variant_id', variantId);
+    }
+    
+    return this.http
+      .get<ApiResponse<ProductDetail>>(`${this.tenantApiUrl}/productos/${id}`, { params })
+      .pipe(map((response) => response.data));
+  }
+
+  private buildHttpParams(params?: ApiPaginationQueryParams): HttpParams {
+    if (!params) {
+      return new HttpParams();
+    }
+
+    const fromObject = Object.entries(params).reduce<Record<string, HttpParamValue>>(
+      (acc, [key, value]) => {
+        if (value !== undefined) {
+          acc[key] = value;
+        }
+
+        return acc;
+      },
+      {}
+    );
+
+    return new HttpParams({ fromObject });
+  }
+}

src/app/core/services/modal.service.spec.ts

@@ -0,0 +1,223 @@
+import '@angular/compiler';
+import { Component, inject } from '@angular/core';
+import { TestBed, getTestBed } from '@angular/core/testing';
+import {
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing';
+import {
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi
+} from 'vitest';
+import { firstValueFrom } from 'rxjs';
+
+import { ConfirmDeleteModalComponent } from '../../shared/components/confirm-delete-modal/confirm-delete-modal.component';
+import { ConfirmModalComponent } from '../../shared/components/confirm-modal/confirm-modal.component';
+import {
+  MODAL_DATA,
+  ModalRef,
+  ModalService
+} from './modal.service';
+
+@Component({
+  template: ''
+})
+class FirstTestModalComponent {}
+
+@Component({
+  template: ''
+})
+class SecondTestModalComponent {}
+
+describe('ModalService', () => {
+  let service: ModalService;
+
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(
+        BrowserTestingModule,
+        platformBrowserTesting()
+      );
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ModalService]
+    });
+
+    service = TestBed.inject(ModalService);
+  });
+
+  it('opens a modal and stores the normalized config', () => {
+    const ref = service.open(FirstTestModalComponent, {
+      title: 'Confirmar compra',
+      data: { productId: 10 },
+      size: 'lg',
+      closeOnBackdrop: false
+    });
+
+    const activeModal = service.activeModal();
+
+    expect(activeModal).not.toBeNull();
+    expect(activeModal?.component).toBe(FirstTestModalComponent);
+    expect(activeModal?.ref).toBe(ref);
+    expect(activeModal?.config).toEqual({
+      title: 'Confirmar compra',
+      data: { productId: 10 },
+      size: 'lg',
+      closeOnBackdrop: false,
+      closeOnEscape: true,
+      showCloseButton: true
+    });
+  });
+
+  it('emits the close result and clears the active modal', () => {
+    const ref = service.open(FirstTestModalComponent);
+    const closedSpy = vi.fn();
+
+    ref.afterClosed$.subscribe(closedSpy);
+    ref.close({ confirmed: true });
+
+    expect(closedSpy).toHaveBeenCalledWith({ confirmed: true });
+    expect(service.activeModal()).toBeNull();
+    expect(ref.dismissReason()).toBeNull();
+  });
+
+  it('tracks dismiss reasons when closing programmatically', () => {
+    const ref = service.open(FirstTestModalComponent);
+    const closedSpy = vi.fn();
+
+    ref.afterClosed$.subscribe(closedSpy);
+    ref.dismiss();
+
+    expect(closedSpy).toHaveBeenCalledWith(undefined);
+    expect(ref.dismissReason()).toBe('programmatic');
+    expect(service.activeModal()).toBeNull();
+  });
+
+  it('dismisses the current modal as replaced when another one opens', () => {
+    const firstRef = service.open(FirstTestModalComponent);
+    const firstClosedSpy = vi.fn();
+
+    firstRef.afterClosed$.subscribe(firstClosedSpy);
+
+    const secondRef = service.open(SecondTestModalComponent, {
+      title: 'Segundo modal'
+    });
+
+    expect(firstClosedSpy).toHaveBeenCalledWith(undefined);
+    expect(firstRef.dismissReason()).toBe('replaced');
+    expect(service.activeModal()?.ref).toBe(secondRef);
+    expect(service.activeModal()?.component).toBe(SecondTestModalComponent);
+  });
+
+  it('injects MODAL_DATA and ModalRef into opened components through the host injector contract', () => {
+    const ref = service.open(DataTestModalComponent, {
+      data: { amount: 3 }
+    });
+
+    const activeModal = service.activeModal();
+
+    expect(activeModal?.config.data).toEqual({ amount: 3 });
+    expect(activeModal?.ref).toBe(ref);
+  });
+
+  it('opens the standard confirm modal with default labels', () => {
+    const result$ = service.openConfirm({
+      title: 'Confirmar compra',
+      content: 'Esto confirmara la compra actual.'
+    });
+
+    const activeModal = service.activeModal();
+
+    expect(activeModal?.component).toBe(ConfirmModalComponent);
+    expect(result$).toBeDefined();
+    expect(activeModal?.config).toEqual({
+      title: 'Confirmar compra',
+      data: {
+        content: 'Esto confirmara la compra actual.',
+        confirmLabel: 'Confirmar',
+        cancelLabel: 'Cancelar'
+      },
+      size: 'md',
+      closeOnBackdrop: true,
+      closeOnEscape: true,
+      showCloseButton: true
+    });
+  });
+
+  it('maps the confirm modal close result to true', async () => {
+    const result$ = service.openConfirm({
+      title: 'Confirmar compra',
+      content: 'Esto confirmara la compra actual.'
+    });
+    const activeModal = service.activeModal();
+    const resultPromise = firstValueFrom(result$);
+
+    activeModal?.ref.close(true);
+
+    await expect(resultPromise).resolves.toBe(true);
+  });
+
+  it('maps dismissing a confirm modal to false', async () => {
+    const result$ = service.openConfirmDelete({
+      title: 'Eliminar producto',
+      content: 'Se eliminara el producto.'
+    });
+    const activeModal = service.activeModal();
+    const resultPromise = firstValueFrom(result$);
+
+    activeModal?.ref.dismiss('escape');
+
+    await expect(resultPromise).resolves.toBe(false);
+  });
+
+  it('opens the delete confirm modal preserving modal overrides', () => {
+    service.openConfirmDelete({
+      title: 'Eliminar producto',
+      content: 'Se eliminara el producto.',
+      confirmLabel: 'Eliminar',
+      cancelLabel: 'Conservar',
+      size: 'lg',
+      closeOnBackdrop: false,
+      closeOnEscape: false,
+      showCloseButton: false
+    });
+
+    const activeModal = service.activeModal();
+
+    expect(activeModal?.component).toBe(ConfirmDeleteModalComponent);
+    expect(activeModal?.config).toEqual({
+      title: 'Eliminar producto',
+      data: {
+        content: 'Se eliminara el producto.',
+        confirmLabel: 'Eliminar',
+        cancelLabel: 'Conservar'
+      },
+      size: 'lg',
+      closeOnBackdrop: false,
+      closeOnEscape: false,
+      showCloseButton: false
+    });
+  });
+});
+
+@Component({
+  template: ''
+})
+class DataTestModalComponent {
+  readonly data = inject(MODAL_DATA);
+  readonly modalRef = inject(ModalRef);
+}

src/app/core/services/modal.service.ts

@@ -0,0 +1,210 @@
+import { InjectionToken, Injectable, Type, signal } from '@angular/core';
+import { Observable, Subject, map } from 'rxjs';
+import { ConfirmDeleteModalComponent } from '../../shared/components/confirm-delete-modal/confirm-delete-modal.component';
+import { ConfirmModalComponent } from '../../shared/components/confirm-modal/confirm-modal.component';
+
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type ModalDismissReason =
+  | 'backdrop'
+  | 'escape'
+  | 'programmatic'
+  | 'replaced';
+
+export interface ModalConfig<TData = unknown> {
+  title?: string;
+  data?: TData;
+  size?: ModalSize;
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+  showCloseButton?: boolean;
+}
+
+export interface NormalizedModalConfig<TData = unknown>
+  extends Omit<
+    ModalConfig<TData>,
+    'size' | 'closeOnBackdrop' | 'closeOnEscape' | 'showCloseButton'
+  > {
+  size: ModalSize;
+  closeOnBackdrop: boolean;
+  closeOnEscape: boolean;
+  showCloseButton: boolean;
+}
+
+export interface ConfirmModalData {
+  content: string;
+  confirmLabel: string;
+  cancelLabel: string;
+}
+
+export interface ConfirmModalConfig
+  extends Omit<ModalConfig<ConfirmModalData>, 'data'> {
+  content: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+}
+
+export interface ActiveModalState<TResult = unknown, TData = unknown> {
+  component: Type<unknown>;
+  config: NormalizedModalConfig<TData>;
+  ref: ModalRef<unknown>;
+}
+
+export const MODAL_DATA = new InjectionToken<unknown>('MODAL_DATA');
+
+const DEFAULT_MODAL_CONFIG: Pick<
+  NormalizedModalConfig,
+  'size' | 'closeOnBackdrop' | 'closeOnEscape' | 'showCloseButton'
+> = {
+  size: 'md',
+  closeOnBackdrop: true,
+  closeOnEscape: true,
+  showCloseButton: true
+};
+
+const DEFAULT_CONFIRM_MODAL_LABELS = {
+  confirmLabel: 'Confirmar',
+  cancelLabel: 'Cancelar'
+} satisfies Pick<ConfirmModalData, 'confirmLabel' | 'cancelLabel'>;
+
+export class ModalRef<TResult = unknown> {
+  private readonly afterClosedSubject = new Subject<TResult | undefined>();
+  private closed = false;
+
+  readonly afterClosed$: Observable<TResult | undefined> =
+    this.afterClosedSubject.asObservable();
+  readonly dismissReason = signal<ModalDismissReason | null>(null);
+
+  constructor(
+    private readonly closeHandler: (result?: TResult) => void,
+    private readonly dismissHandler: (reason: ModalDismissReason) => void
+  ) {}
+
+  close(result?: TResult): void {
+    if (this.closed) {
+      return;
+    }
+
+    this.closeHandler(result);
+  }
+
+  dismiss(reason: ModalDismissReason = 'programmatic'): void {
+    if (this.closed) {
+      return;
+    }
+
+    this.dismissHandler(reason);
+  }
+
+  finalize(result?: TResult, dismissReason?: ModalDismissReason): void {
+    if (this.closed) {
+      return;
+    }
+
+    this.closed = true;
+    this.dismissReason.set(dismissReason ?? null);
+    this.afterClosedSubject.next(result);
+    this.afterClosedSubject.complete();
+  }
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModalService {
+  private readonly activeModalState = signal<ActiveModalState | null>(null);
+  readonly activeModal = this.activeModalState.asReadonly();
+
+  open<TComponent, TResult = unknown, TData = unknown>(
+    component: Type<TComponent>,
+    config: ModalConfig<TData> = {}
+  ): ModalRef<TResult> {
+    this.activeModalState()?.ref.dismiss('replaced');
+
+    let ref!: ModalRef<TResult>;
+    ref = new ModalRef<TResult>(
+      (result) => this.close(ref, result),
+      (reason) => this.dismiss(ref, reason)
+    );
+
+    this.activeModalState.set({
+      component,
+      config: this.normalizeConfig(config),
+      ref: ref as ModalRef<unknown>
+    });
+
+    return ref;
+  }
+
+  openConfirm(config: ConfirmModalConfig): Observable<boolean> {
+    return this.openConfirmRef(config).afterClosed$.pipe(
+      map((result) => result === true)
+    );
+  }
+
+  openConfirmDelete(config: ConfirmModalConfig): Observable<boolean> {
+    return this.openConfirmDeleteRef(config).afterClosed$.pipe(
+      map((result) => result === true)
+    );
+  }
+
+  openConfirmRef(config: ConfirmModalConfig): ModalRef<boolean> {
+    return this.open(ConfirmModalComponent, this.buildConfirmModalConfig(config));
+  }
+
+  openConfirmDeleteRef(config: ConfirmModalConfig): ModalRef<boolean> {
+    return this.open(
+      ConfirmDeleteModalComponent,
+      this.buildConfirmModalConfig(config)
+    );
+  }
+
+  private close<TResult>(ref: ModalRef<TResult>, result?: TResult): void {
+    if (this.activeModalState()?.ref !== ref) {
+      return;
+    }
+
+    ref.finalize(result);
+    this.activeModalState.set(null);
+  }
+
+  private dismiss<TResult>(
+    ref: ModalRef<TResult>,
+    reason: ModalDismissReason = 'programmatic'
+  ): void {
+    if (this.activeModalState()?.ref !== ref) {
+      return;
+    }
+
+    ref.finalize(undefined, reason);
+    this.activeModalState.set(null);
+  }
+
+  private normalizeConfig<TData>(
+    config: ModalConfig<TData>
+  ): NormalizedModalConfig<TData> {
+    return {
+      ...DEFAULT_MODAL_CONFIG,
+      ...config
+    };
+  }
+
+  private buildConfirmModalConfig(
+    config: ConfirmModalConfig
+  ): ModalConfig<ConfirmModalData> {
+    const {
+      content,
+      confirmLabel = DEFAULT_CONFIRM_MODAL_LABELS.confirmLabel,
+      cancelLabel = DEFAULT_CONFIRM_MODAL_LABELS.cancelLabel,
+      ...modalConfig
+    } = config;
+
+    return {
+      ...modalConfig,
+      data: {
+        content,
+        confirmLabel,
+        cancelLabel
+      }
+    };
+  }
+}

src/app/core/services/tenant-bootstrap.spec.ts

@@ -5,18 +5,7 @@ import { TenantService } from './tenant.service';
 
 describe('tenantBootstrap', () => {
   it('waits for TenantService.bootstrap to resolve', async () => {
-    const bootstrapSpy = vi.fn().mockResolvedValue({
+    const bootstrapSpy = vi.fn().mockResolvedValue(undefined);
-      id: 1,
-      codigo: 'test',
-      nombre: 'Test Tennant',
-      dominio: 'localhost',
-      primary_color: '#6376F3',
-      secondary_color: '#A0A0A0',
-      danger_color: '#FF8888',
-      header_footer_bg_color: '#313131',
-      header_logo: 'https://example.com/header.png',
-      footer_logo: 'https://example.com/footer.png'
-    });
 
     TestBed.configureTestingModule({
       providers: [

src/app/core/services/tenant-bootstrap.ts

@@ -5,5 +5,5 @@ import { TenantService } from './tenant.service';
 export function tenantBootstrap(): Promise<void> {
   const tenantService = inject(TenantService);
 
-  return tenantService.bootstrap().then(() => undefined);
+  return tenantService.bootstrap();
 }

src/app/core/services/tenant-ssr-cache.store.ts

@@ -0,0 +1,25 @@
+import { makeStateKey } from '@angular/core';
+
+import { Tenant } from './tenant.interface';
+
+export type TenantBootstrapStatus = 'idle' | 'ready' | 'not-found';
+
+export type TenantSsrState =
+  | {
+      status: 'ready';
+      tenant: Tenant;
+    }
+  | {
+      status: 'not-found';
+    };
+
+export const DEFAULT_TENANT_BRANDING = {
+  primaryColor: '#102bda',
+  secondaryColor: '#9e9e9e',
+  dangerColor: '#fd4c4c',
+  successColor: '#198754',
+  headerBgColor: '#313131',
+  footerBgColor: '#313131'
+} as const;
+
+export const TENANT_SSR_STATE_KEY = makeStateKey<TenantSsrState | null>('tenant-ssr-state');

src/app/core/services/tenant.interface.ts

@@ -1,3 +1,5 @@
+import { ApiResponse } from './api-response.interface';
+
 export interface Tenant {
   id: number;
   codigo: string;
@@ -6,11 +8,12 @@ export interface Tenant {
   primary_color: string;
   secondary_color: string;
   danger_color: string;
-  header_footer_bg_color: string;
+  success_color: string;
+  header_bg_color: string;
+  footer_bg_color: string;
   header_logo: string;
   footer_logo: string;
 }
 
-export interface TenantBootstrapResponse {
+export type TenantBootstrapResponse = ApiResponse<Tenant>;
-  data: Tenant;
+
-}

src/app/core/services/tenant.service.spec.ts

@@ -1,15 +1,39 @@
-import { PLATFORM_ID } from '@angular/core';
+import { PLATFORM_ID, REQUEST, RESPONSE_INIT, TransferState } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { provideHttpClient } from '@angular/common/http';
 import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 
 import { environment } from '../../../environments/environment';
-import { TenantBootstrapResponse } from './tenant.interface';
+import { Tenant, TenantBootstrapResponse } from './tenant.interface';
+import { TENANT_SSR_STATE_KEY } from './tenant-ssr-cache.store';
 import { TenantService } from './tenant.service';
 
+const tenant: Tenant = {
+  id: 1,
+  codigo: 'test',
+  nombre: 'Test Tenant',
+  dominio: 'localhost',
+  primary_color: '#6376F3',
+  secondary_color: '#A0A0A0',
+  danger_color: '#FF8888',
+  success_color: '#198754',
+  header_bg_color: '#313131',
+  footer_bg_color: '#313131',
+  header_logo: 'https://example.com/header.png',
+  footer_logo: 'https://example.com/footer.png'
+};
+
+const tenantResponse: TenantBootstrapResponse = {
+  data: tenant
+};
+
 describe('TenantService', () => {
   beforeEach(() => {
-    window.history.replaceState({}, '', 'http://localhost:4200/store');
+    try {
+      window.history.replaceState({}, '', 'http://localhost:4200/');
+    } catch (e) {
+      // Ignore SecurityError under test environments
+    }
   });
 
   it('requests the tenant bootstrap endpoint using the current hostname and stores the response', async () => {
@@ -21,30 +45,124 @@ describe('TenantService', () => {
     const httpController = TestBed.inject(HttpTestingController);
 
     const bootstrapPromise = service.bootstrap();
-    const request = httpController.expectOne(`${environment.url}tennatns/bootstrap/localhost`);
+    const request = httpController.expectOne(`${environment.url}tenants/bootstrap/localhost`);
 
     expect(request.request.method).toBe('GET');
 
-    const response: TenantBootstrapResponse = {
+    request.flush(tenantResponse);
-      data: {
-        id: 1,
-        codigo: 'test',
-        nombre: 'Test Tennant',
-        dominio: 'localhost',
-        primary_color: '#6376F3',
-        secondary_color: '#A0A0A0',
-        danger_color: '#FF8888',
-        header_footer_bg_color: '#313131',
-        header_logo: 'https://example.com/header.png',
-        footer_logo: 'https://example.com/footer.png'
-      }
-    };
 
-    request.flush(response);
+    await expect(bootstrapPromise).resolves.toBeUndefined();
+    expect(service.status()).toBe('ready');
+    expect(service.tenant()).toEqual(tenant);
+    expect(service.getTenant()).toEqual(tenant);
 
-    await expect(bootstrapPromise).resolves.toEqual(response.data);
+    httpController.verify();
-    expect(service.tenant()).toEqual(response.data);
+  });
-    expect(service.getTenant()).toEqual(response.data);
+
+  it('hydrates the tenant from TransferState without performing HTTP on the browser', async () => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), provideHttpClientTesting(), TenantService]
+    });
+
+    const service = TestBed.inject(TenantService);
+    const transferState = TestBed.inject(TransferState);
+    const httpController = TestBed.inject(HttpTestingController);
+
+    transferState.set(TENANT_SSR_STATE_KEY, {
+      status: 'ready',
+      tenant
+    });
+
+    await expect(service.bootstrap()).resolves.toBeUndefined();
+    expect(service.status()).toBe('ready');
+    expect(service.tenant()).toEqual(tenant);
+    expect(transferState.get(TENANT_SSR_STATE_KEY, null)).toBeNull();
+
+    httpController.expectNone(() => true);
+    httpController.verify();
+  });
+
+  it('uses the forwarded host during SSR and stores the resolved tenant in TransferState', async () => {
+    const responseInit: ResponseInit = {};
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        TenantService,
+        { provide: PLATFORM_ID, useValue: 'server' },
+        {
+          provide: REQUEST,
+          useValue: new Request('https://internal.example/render', {
+            headers: {
+              'x-forwarded-host': 'STORE.EXAMPLE.COM:443, proxy.internal',
+              host: 'ignored.example.com'
+            }
+          })
+        },
+        { provide: RESPONSE_INIT, useValue: responseInit }
+      ]
+    });
+
+    const service = TestBed.inject(TenantService);
+    const transferState = TestBed.inject(TransferState);
+    const httpController = TestBed.inject(HttpTestingController);
+
+    const bootstrapPromise = service.bootstrap();
+    const request = httpController.expectOne(`${environment.url}tenants/bootstrap/store.example.com`);
+
+    request.flush(tenantResponse);
+
+    await expect(bootstrapPromise).resolves.toBeUndefined();
+    expect(service.status()).toBe('ready');
+    expect(service.tenant()).toEqual(tenant);
+    expect(transferState.get(TENANT_SSR_STATE_KEY, null)).toEqual({
+      status: 'ready',
+      tenant
+    });
+    expect(responseInit.status).toBeUndefined();
+
+    httpController.verify();
+  });
+
+  it('stores a not-found state and sets the SSR response status to 404 when the tenant does not exist', async () => {
+    const responseInit: ResponseInit = {};
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        TenantService,
+        { provide: PLATFORM_ID, useValue: 'server' },
+        {
+          provide: REQUEST,
+          useValue: new Request('https://internal.example/render', {
+            headers: {
+              host: 'missing.example.com:8443'
+            }
+          })
+        },
+        { provide: RESPONSE_INIT, useValue: responseInit }
+      ]
+    });
+
+    const service = TestBed.inject(TenantService);
+    const transferState = TestBed.inject(TransferState);
+    const httpController = TestBed.inject(HttpTestingController);
+
+    const bootstrapPromise = service.bootstrap();
+    const request = httpController.expectOne(`${environment.url}tenants/bootstrap/missing.example.com`);
+
+    request.flush({ message: 'Not Found' }, { status: 404, statusText: 'Not Found' });
+
+    await expect(bootstrapPromise).resolves.toBeUndefined();
+    expect(service.status()).toBe('not-found');
+    expect(service.tenant()).toBeNull();
+    expect(service.getTenant()).toBeNull();
+    expect(transferState.get(TENANT_SSR_STATE_KEY, null)).toEqual({
+      status: 'not-found'
+    });
+    expect(responseInit.status).toBe(404);
 
     httpController.verify();
   });
@@ -58,33 +176,50 @@ describe('TenantService', () => {
     const httpController = TestBed.inject(HttpTestingController);
 
     const bootstrapPromise = service.bootstrap();
-    const request = httpController.expectOne(`${environment.url}tennatns/bootstrap/localhost`);
+    const request = httpController.expectOne(`${environment.url}tenants/bootstrap/localhost`);
 
     request.flush({});
 
     await expect(bootstrapPromise).rejects.toThrow('Tenant bootstrap returned no data');
+    expect(service.status()).toBe('idle');
+    expect(service.tenant()).toBeNull();
 
     httpController.verify();
   });
 
-  it('skips the HTTP bootstrap on the server platform', async () => {
+  it('propagates non-404 backend failures', async () => {
+    const responseInit: ResponseInit = {};
+
     TestBed.configureTestingModule({
       providers: [
         provideHttpClient(),
         provideHttpClientTesting(),
         TenantService,
-        { provide: PLATFORM_ID, useValue: 'server' }
+        { provide: PLATFORM_ID, useValue: 'server' },
+        {
+          provide: REQUEST,
+          useValue: new Request('https://internal.example/render', {
+            headers: {
+              host: 'broken.example.com'
+            }
+          })
+        },
+        { provide: RESPONSE_INIT, useValue: responseInit }
       ]
     });
 
     const service = TestBed.inject(TenantService);
     const httpController = TestBed.inject(HttpTestingController);
 
-    await expect(service.bootstrap()).resolves.toBeNull();
+    const bootstrapPromise = service.bootstrap();
-    expect(service.tenant()).toBeNull();
+    const request = httpController.expectOne(`${environment.url}tenants/bootstrap/broken.example.com`);
-    expect(service.getTenant()).toBeNull();
+
+    request.flush({ message: 'Boom' }, { status: 500, statusText: 'Server Error' });
+
+    await expect(bootstrapPromise).rejects.toThrow('Http failure response');
+    expect(service.status()).toBe('idle');
+    expect(responseInit.status).toBeUndefined();
 
-    httpController.expectNone(() => true);
     httpController.verify();
   });
 });

src/app/core/services/tenant.service.ts

@@ -1,10 +1,24 @@
-import { HttpClient } from '@angular/common/http';
+import { isPlatformBrowser, isPlatformServer } from '@angular/common';
-import { inject, Injectable, PLATFORM_ID, signal } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { isPlatformBrowser } from '@angular/common';
+import {
+  inject,
+  Injectable,
+  PLATFORM_ID,
+  REQUEST,
+  RESPONSE_INIT,
+  signal,
+  TransferState
+} from '@angular/core';
+import { IS_DISCOVERING_ROUTES } from '@angular/ssr';
 import { firstValueFrom } from 'rxjs';
 
 import { environment } from '../../../environments/environment';
 import { Tenant, TenantBootstrapResponse } from './tenant.interface';
+import {
+  TENANT_SSR_STATE_KEY,
+  TenantBootstrapStatus,
+  TenantSsrState
+} from './tenant-ssr-cache.store';
 
 @Injectable({
   providedIn: 'root'
@@ -12,40 +26,150 @@ import { Tenant, TenantBootstrapResponse } from './tenant.interface';
 export class TenantService {
   private readonly http = inject(HttpClient);
   private readonly platformId = inject(PLATFORM_ID);
+  private readonly request = inject(REQUEST, { optional: true });
+  private readonly responseInit = inject(RESPONSE_INIT, { optional: true });
+  private readonly transferState = inject(TransferState);
+  private readonly isDiscoveringRoutes = inject(IS_DISCOVERING_ROUTES, { optional: true }) ?? false;
   private readonly tenantState = signal<Tenant | null>(null);
+  private readonly statusState = signal<TenantBootstrapStatus>('idle');
 
   readonly tenant = this.tenantState.asReadonly();
+  readonly status = this.statusState.asReadonly();
 
   getTenant(): Tenant | null {
     return this.tenantState();
   }
 
-  async bootstrap(): Promise<Tenant | null> {
+  getTenantApiUrl(): string {
-    if (!isPlatformBrowser(this.platformId)) {
+    const tenant = this.tenantState();
-      return null;
+    if (!tenant) {
+      throw new Error('No se pudo resolver el tenant activo.');
+    }
+    return `${environment.url}tenants/${tenant.codigo}`;
+  }
+
+
+  async bootstrap(): Promise<void> {
+    if (this.statusState() !== 'idle') {
+      return;
+    }
+
+    if (this.isDiscoveringRoutes) {
+      this.statusState.set('ready');
+
+      return;
+    }
+
+    const transferredState = this.transferState.get(TENANT_SSR_STATE_KEY, null);
+
+    if (transferredState) {
+      this.transferState.remove(TENANT_SSR_STATE_KEY);
+      this.applyState(transferredState);
+
+      return;
     }
 
     const domain = this.resolveDomain();
-    const response = await firstValueFrom(
-      this.http.get<TenantBootstrapResponse>(`${environment.url}tenants/bootstrap/${domain}`)
-    );
 
-    if (!response?.data) {
+    try {
-      throw new Error(`Tenant bootstrap returned no data for domain "${domain}".`);
+      const response = await firstValueFrom(
+        this.http.get<TenantBootstrapResponse>(`${environment.url}tenants/bootstrap/${domain}`)
+      );
+
+      if (!response?.data) {
+        throw new Error(`Tenant bootstrap returned no data for domain "${domain}".`);
+      }
+
+      this.setReady(response.data);
+      this.persistSsrState({
+        status: 'ready',
+        tenant: response.data
+      });
+    } catch (error) {
+      if (this.isNotFoundError(error)) {
+        this.setNotFound();
+        this.persistSsrState({ status: 'not-found' });
+
+        if (this.responseInit) {
+          this.responseInit.status = 404;
+        }
+
+        return;
+      }
+
+      throw error;
     }
-
-    this.tenantState.set(response.data);
-
-    return response.data;
   }
 
   private resolveDomain(): string {
-    const domain = window.location.hostname;
+    if (isPlatformBrowser(this.platformId)) {
+      const domain = window.location.hostname;
 
-    if (!domain) {
+      if (!domain) {
+        throw new Error('Tenant bootstrap could not resolve the current domain.');
+      }
+
+      return this.normalizeHost(domain);
+    }
+
+    const requestHost =
+      this.request?.headers.get('x-forwarded-host') ??
+      this.request?.headers.get('host') ??
+      (this.request ? new URL(this.request.url).host : null);
+
+    if (!requestHost) {
       throw new Error('Tenant bootstrap could not resolve the current domain.');
     }
 
-    return domain;
+    return this.normalizeHost(requestHost);
+  }
+
+  private normalizeHost(host: string): string {
+    const [firstHost = ''] = host.split(',');
+    const normalizedHost = firstHost.trim().toLowerCase();
+
+    if (!normalizedHost) {
+      throw new Error('Tenant bootstrap could not resolve the current domain.');
+    }
+
+    if (normalizedHost.startsWith('[')) {
+      const closingBracketIndex = normalizedHost.indexOf(']');
+
+      if (closingBracketIndex >= 0) {
+        return normalizedHost.slice(1, closingBracketIndex);
+      }
+    }
+
+    return normalizedHost.replace(/:\d+$/, '');
+  }
+
+  private applyState(state: TenantSsrState): void {
+    if (state.status === 'ready') {
+      this.setReady(state.tenant);
+
+      return;
+    }
+
+    this.setNotFound();
+  }
+
+  private setReady(tenant: Tenant): void {
+    this.tenantState.set(tenant);
+    this.statusState.set('ready');
+  }
+
+  private setNotFound(): void {
+    this.tenantState.set(null);
+    this.statusState.set('not-found');
+  }
+
+  private persistSsrState(state: TenantSsrState): void {
+    if (isPlatformServer(this.platformId)) {
+      this.transferState.set(TENANT_SSR_STATE_KEY, state);
+    }
+  }
+
+  private isNotFoundError(error: unknown): error is HttpErrorResponse {
+    return error instanceof HttpErrorResponse && error.status === 404;
   }
 }

src/app/core/services/toast.service.spec.ts

@@ -0,0 +1,101 @@
+import { TestBed } from '@angular/core/testing';
+import { vi } from 'vitest';
+import { ToastService } from './toast.service';
+
+describe('ToastService', () => {
+  let service: ToastService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ToastService]
+    });
+    service = TestBed.inject(ToastService);
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should initialize with an empty list of toasts', () => {
+    expect(service.toasts()).toEqual([]);
+  });
+
+  it('should show a toast and assign an id', () => {
+    const id = service.show('Hello world', 'info');
+    expect(id).toBeTruthy();
+    expect(service.toasts().length).toBe(1);
+    expect(service.toasts()[0]).toEqual({
+      id,
+      message: 'Hello world',
+      type: 'info',
+      duration: 3000
+    });
+  });
+
+  it('should add specific variant toasts via helper methods', () => {
+    const infoId = service.info('Info message');
+    const dangerId = service.danger('Danger message', 5000);
+    const successId = service.success('Success message', 0);
+
+    const toasts = service.toasts();
+    expect(toasts.length).toBe(3);
+
+    expect(toasts.find((t) => t.id === infoId)).toEqual({
+      id: infoId,
+      message: 'Info message',
+      type: 'info',
+      duration: 3000
+    });
+
+    expect(toasts.find((t) => t.id === dangerId)).toEqual({
+      id: dangerId,
+      message: 'Danger message',
+      type: 'danger',
+      duration: 5000
+    });
+
+    expect(toasts.find((t) => t.id === successId)).toEqual({
+      id: successId,
+      message: 'Success message',
+      type: 'success',
+      duration: 0
+    });
+  });
+
+  it('should dismiss a toast manually by id', () => {
+    const id1 = service.show('Toast 1');
+    const id2 = service.show('Toast 2');
+
+    expect(service.toasts().length).toBe(2);
+
+    service.dismiss(id1);
+
+    expect(service.toasts().length).toBe(1);
+    expect(service.toasts()[0].id).toBe(id2);
+  });
+
+  it('should automatically dismiss a toast after the duration', () => {
+    service.show('Auto dismiss toast', 'info', 2000);
+
+    expect(service.toasts().length).toBe(1);
+
+    vi.advanceTimersByTime(2000);
+
+    expect(service.toasts().length).toBe(0);
+  });
+
+  it('should not dismiss a toast automatically if duration is 0', () => {
+    service.show('Persistent toast', 'info', 0);
+
+    expect(service.toasts().length).toBe(1);
+
+    vi.advanceTimersByTime(10000);
+
+    expect(service.toasts().length).toBe(1);
+  });
+});

src/app/core/services/toast.service.ts

@@ -0,0 +1,47 @@
+import { Injectable, signal } from '@angular/core';
+
+export interface Toast {
+  id: string;
+  message: string;
+  type: 'success' | 'danger' | 'info';
+  duration?: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ToastService {
+  private readonly toastsSignal = signal<Toast[]>([]);
+  readonly toasts = this.toastsSignal.asReadonly();
+
+  show(message: string, type: 'success' | 'danger' | 'info' = 'info', duration = 3000): string {
+    const id = Math.random().toString(36).substring(2, 9);
+    const newToast: Toast = { id, message, type, duration };
+
+    this.toastsSignal.update((toasts) => [...toasts, newToast]);
+
+    if (duration > 0) {
+      setTimeout(() => {
+        this.dismiss(id);
+      }, duration);
+    }
+
+    return id;
+  }
+
+  info(message: string, duration = 3000): string {
+    return this.show(message, 'info', duration);
+  }
+
+  danger(message: string, duration = 3000): string {
+    return this.show(message, 'danger', duration);
+  }
+
+  success(message: string, duration = 3000): string {
+    return this.show(message, 'success', duration);
+  }
+
+  dismiss(id: string): void {
+    this.toastsSignal.update((toasts) => toasts.filter((t) => t.id !== id));
+  }
+}

src/app/core/utils/use-mutation.spec.ts

@@ -1,31 +0,0 @@
-import { of, throwError } from 'rxjs';
-import { describe, expect, it, vi } from 'vitest';
-
-import { useMutation } from './use-mutation';
-
-describe('useMutation', () => {
-  it('stores the resolved value and clears loading after a successful execution', async () => {
-    const mutation = useMutation<{ id: number }, { ok: boolean; id: number }>();
-    const factory = vi.fn((payload: { id: number }) => of({ ok: true, id: payload.id }));
-
-    await expect(mutation.execute(factory, { id: 7 })).resolves.toEqual({ ok: true, id: 7 });
-
-    expect(factory).toHaveBeenCalledWith({ id: 7 });
-    expect(mutation.loading()).toBe(false);
-    expect(mutation.error()).toBeNull();
-    expect(mutation.data()).toEqual({ ok: true, id: 7 });
-  });
-
-  it('stores the thrown error and clears loading after a failed execution', async () => {
-    const mutation = useMutation<{ id: number }, { ok: boolean }>();
-    const failure = new Error('request failed');
-    const factory = vi.fn(() => throwError(() => failure));
-
-    await expect(mutation.execute(factory, { id: 7 })).rejects.toThrow('request failed');
-
-    expect(factory).toHaveBeenCalledWith({ id: 7 });
-    expect(mutation.loading()).toBe(false);
-    expect(mutation.error()).toBe(failure);
-    expect(mutation.data()).toBeNull();
-  });
-});

src/app/core/utils/use-mutation.ts

@@ -1,42 +0,0 @@
-import { signal, WritableSignal } from '@angular/core';
-import { Observable, firstValueFrom } from 'rxjs';
-
-export interface UseMutationResult<TData, TResult> {
-  loading: WritableSignal<boolean>;
-  error: WritableSignal<unknown | null>;
-  data: WritableSignal<TResult | null>;
-  execute: (factory: (payload: TData) => Observable<TResult>, payload: TData) => Promise<TResult>;
-}
-
-export function useMutation<TData, TResult>(): UseMutationResult<TData, TResult> {
-  const loading = signal(false);
-  const error = signal<unknown | null>(null);
-  const data = signal<TResult | null>(null);
-
-  async function execute(
-    factory: (payload: TData) => Observable<TResult>,
-    payload: TData
-  ): Promise<TResult> {
-    loading.set(true);
-    error.set(null);
-
-    try {
-      const result = await firstValueFrom(factory(payload));
-      data.set(result);
-
-      return result;
-    } catch (err) {
-      error.set(err);
-      throw err;
-    } finally {
-      loading.set(false);
-    }
-  }
-
-  return {
-    loading,
-    error,
-    data,
-    execute
-  };
-}

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -24,8 +24,11 @@
           <div class="button-grid">
             <app-button [disabled]="true">Primary</app-button>
             <app-button variant="secondary" [disabled]="true">Secondary</app-button>
+
             <app-button variant="danger" [disabled]="true">Danger</app-button>
-            <app-button variant="danger-secondary" [disabled]="true">Danger secondary</app-button>
+            <app-button variant="danger-secondary" [disabled]="true">
+              Danger secondary
+            </app-button>
             <app-button variant="cancel" [disabled]="true">Cancel</app-button>
           </div>
         </div>
@@ -40,10 +43,146 @@
             <app-button variant="cancel">E</app-button>
           </div>
         </div>
+
+        <div class="button-group">
+          <h2>Toasts</h2>
+          <div class="button-grid">
+            <app-button (click)="triggerToast('info')">Trigger Info</app-button>
+            <app-button variant="secondary" (click)="triggerToast('success')">
+              Trigger Success
+            </app-button>
+            <app-button variant="danger" (click)="triggerToast('danger')">
+              Trigger Danger
+            </app-button>
+          </div>
+        </div>
+
+        <div class="button-group">
+          <h2>Toasts Persistentes (No se van)</h2>
+          <div class="button-grid">
+            <app-button (click)="triggerPersistentToast('info')">
+              Info Persistente
+            </app-button>
+            <app-button
+              variant="secondary"
+              (click)="triggerPersistentToast('success')"
+            >
+              Success Persistente
+            </app-button>
+            <app-button variant="danger" (click)="triggerPersistentToast('danger')">
+              Danger Persistente
+            </app-button>
+          </div>
+        </div>
+
+        <div class="button-group">
+          <h2>Modal</h2>
+          <p class="text-muted mb-0">
+            Demo del modal global con servicio, host y devolucion de resultado.
+          </p>
+          <div class="button-grid">
+            <app-button (click)="openBasicModal()">Abrir confirm modal</app-button>
+            <app-button variant="danger" (click)="openConfirmDeleteModal()">
+              Abrir confirm delete
+            </app-button>
+            <app-button variant="secondary" (click)="openLockedModal()">
+              Abrir modal bloqueado
+            </app-button>
+            <app-button variant="danger-secondary" (click)="openWideModal()">
+              Abrir modal ancho
+            </app-button>
+          </div>
+          <div class="modal-showcase__result" data-testid="modal-last-result">
+            {{ lastModalResult }}
+          </div>
+        </div>
       </div>
 
       <hr class="section-divider" />
 
+      <div class="icon-button-showcase">
+        <h2>Icon Buttons</h2>
+        <p class="text-muted mb-4">
+          Botones de icono pequenos con color base <code>#666666</code>,
+          deshabilitados con <code>#A0A0A0</code> y estados hover/active con color
+          de marca (a excepcion de trash que usa danger).
+        </p>
+
+        <div class="icon-button-showcase__grid">
+          <div class="icon-button-showcase__row">
+            <span class="icon-button-showcase__label">Disabled</span>
+            <div class="icon-button-showcase__items">
+              <app-icon-button variant="user" [disabled]="true" />
+              <app-icon-button variant="trash" [disabled]="true" />
+              <app-icon-button variant="angle-left" [disabled]="true" />
+              <app-icon-button variant="angle-right" [disabled]="true" />
+              <app-icon-button variant="angle-up" [disabled]="true" />
+              <app-icon-button variant="angle-down" [disabled]="true" />
+              <app-icon-button variant="copy" [disabled]="true" />
+            </div>
+          </div>
+
+          <div class="icon-button-showcase__row">
+            <span class="icon-button-showcase__label">Normal</span>
+            <div class="icon-button-showcase__items">
+              <app-icon-button variant="user" />
+              <app-icon-button variant="trash" />
+              <app-icon-button variant="angle-left" />
+              <app-icon-button variant="angle-right" />
+              <app-icon-button variant="angle-up" />
+              <app-icon-button variant="angle-down" />
+              <app-icon-button variant="copy" />
+            </div>
+          </div>
+
+          <div class="icon-button-showcase__row">
+            <span class="icon-button-showcase__label">Active / Hover</span>
+            <div class="icon-button-showcase__items">
+              <app-icon-button variant="user" class="hover-preview" />
+              <app-icon-button variant="trash" class="hover-preview" />
+              <app-icon-button variant="angle-left" class="hover-preview" />
+              <app-icon-button variant="angle-right" class="hover-preview" />
+              <app-icon-button variant="angle-up" class="hover-preview" />
+              <app-icon-button variant="angle-down" class="hover-preview" />
+              <app-icon-button variant="copy" class="hover-preview" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="icon-button-showcase mt-4">
+        <h2>Cart Icons</h2>
+        <p class="text-muted mb-4">
+          Icono de carrito con badge opcional indicando cantidad.
+        </p>
+
+        <div class="icon-button-showcase__grid">
+          <div class="icon-button-showcase__row">
+            <span class="icon-button-showcase__label">Disabled</span>
+            <div class="icon-button-showcase__items">
+              <app-cart-icon [disabled]="true" [quantity]="3" />
+              <app-cart-icon [disabled]="true" />
+            </div>
+          </div>
+
+          <div class="icon-button-showcase__row">
+            <span class="icon-button-showcase__label">Normal</span>
+            <div class="icon-button-showcase__items">
+              <app-cart-icon [quantity]="3" />
+              <app-cart-icon />
+            </div>
+          </div>
+
+          <div class="icon-button-showcase__row">
+            <span class="icon-button-showcase__label">Active / Hover</span>
+            <div class="icon-button-showcase__items">
+              <app-cart-icon [quantity]="3" class="hover-preview" />
+              <app-cart-icon class="hover-preview" />
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="input-grid">
         <div class="input-field">
           <label for="search-input">Texto</label>
@@ -171,9 +310,254 @@
             />
           </div>
 
-          <app-button variant="secondary" (click)="clearFile()">Limpiar archivo</app-button>
+          <app-button variant="secondary" (click)="clearFile()">
+            Limpiar archivo
+          </app-button>
+        </div>
+      </div>
+
+      <hr class="section-divider" />
+
+      <div class="paginator-showcase">
+        <h2>Paginator</h2>
+        <p class="text-muted mb-0">
+          Componente shared para navegar por paginas con primera, anterior,
+          siguiente y ultima.
+        </p>
+        <app-paginator
+          [page]="currentPage"
+          [totalPages]="paginatorTotalPages"
+          (pageChange)="currentPage = $event"
+        />
+      </div>
+
+      <hr class="section-divider" />
+
+      <div class="cart-showcase">
+        <div class="cart-showcase__header">
+          <div>
+            <h2>Carrito mock</h2>
+            <p class="text-muted mb-0">
+              Demo visual aislada del carrito con scroll a partir del cuarto item.
+            </p>
+          </div>
+
+          @if (!cartVisible) {
+            <app-button variant="secondary" (click)="showCart()">
+              Volver a mostrar carrito
+            </app-button>
+          }
+        </div>
+
+        @if (cartVisible) {
+          <div class="cart-showcase__viewport">
+            <app-cart
+              [showClose]="true"
+              [items]="cartMockItems"
+              [subtotal]="366000"
+              [discount]="66000"
+              [total]="300000"
+              [backgroundColor]="cartBackgroundColor"
+              (closed)="hideCart()"
+            />
+          </div>
+        }
+      </div>
+    </div>
+  </section>
+
+  <section class="component-demo card shadow-sm mt-4 configuracion-tennant">
+    <div class="card-body">
+      <span class="eyebrow">Tenant Configuration</span>
+      <h2 class="mb-4">Configuracion Tenant</h2>
+
+      <div class="row mb-4">
+        <div class="col-md-6 mb-3 mb-md-0">
+          <div class="tenant-logo-card">
+            <div class="tenant-logo-card__label">Logo del Header</div>
+            <div class="tenant-logo-card__container header-bg">
+              @if (tenant()?.header_logo) {
+                <img
+                  [src]="tenant()?.header_logo"
+                  alt="Header Logo"
+                  class="tenant-logo-card__img"
+                />
+              } @else {
+                <div class="tenant-logo-card__placeholder">
+                  <i class="fa-solid fa-image mb-2"></i>
+                  <span>Sin Logo de Header</span>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+
+        <div class="col-md-6">
+          <div class="tenant-logo-card">
+            <div class="tenant-logo-card__label">Logo del Footer</div>
+            <div class="tenant-logo-card__container footer-bg">
+              @if (tenant()?.footer_logo) {
+                <img
+                  [src]="tenant()?.footer_logo"
+                  alt="Footer Logo"
+                  class="tenant-logo-card__img"
+                />
+              } @else {
+                <div class="tenant-logo-card__placeholder">
+                  <i class="fa-solid fa-image mb-2"></i>
+                  <span>Sin Logo de Footer</span>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <hr class="section-divider" />
+
+      <div class="colors-section">
+        <h3 class="mb-3">Colores de Marca</h3>
+        <div class="row">
+          <div class="col-md-3 mb-3">
+            <div class="color-swatch-card shadow-sm">
+              <div
+                class="color-swatch-card__preview"
+                [style.background-color]="'var(--tenant-primary)'"
+              ></div>
+              <div class="color-swatch-card__body">
+                <span class="color-swatch-card__title">Primario</span>
+                <code class="color-swatch-card__value">
+                  {{ tenant()?.primary_color || 'Default' }}
+                </code>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-3 mb-3">
+            <div class="color-swatch-card shadow-sm">
+              <div
+                class="color-swatch-card__preview"
+                [style.background-color]="'var(--tenant-secondary)'"
+              ></div>
+              <div class="color-swatch-card__body">
+                <span class="color-swatch-card__title">Secundario</span>
+                <code class="color-swatch-card__value">
+                  {{ tenant()?.secondary_color || 'Default' }}
+                </code>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-3 mb-3">
+            <div class="color-swatch-card shadow-sm">
+              <div
+                class="color-swatch-card__preview"
+                [style.background-color]="'var(--tenant-danger)'"
+              ></div>
+              <div class="color-swatch-card__body">
+                <span class="color-swatch-card__title">Danger</span>
+                <code class="color-swatch-card__value">
+                  {{ tenant()?.danger_color || 'Default' }}
+                </code>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-3 mb-3">
+            <div class="color-swatch-card shadow-sm">
+              <div
+                class="color-swatch-card__preview"
+                [style.background-color]="'var(--tenant-success)'"
+              ></div>
+              <div class="color-swatch-card__body">
+                <span class="color-swatch-card__title">Success</span>
+                <code class="color-swatch-card__value">
+                  {{ tenant()?.success_color || 'Default' }}
+                </code>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-3 mb-3">
+            <div class="color-swatch-card shadow-sm">
+              <div
+                class="color-swatch-card__preview"
+                [style.background-color]="'var(--tenant-header-bg)'"
+              ></div>
+              <div class="color-swatch-card__body">
+                <span class="color-swatch-card__title">Header BG</span>
+                <code class="color-swatch-card__value">
+                  {{ tenant()?.header_bg_color || 'Default' }}
+                </code>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-3 mb-3">
+            <div class="color-swatch-card shadow-sm">
+              <div
+                class="color-swatch-card__preview"
+                [style.background-color]="'var(--tenant-footer-bg)'"
+              ></div>
+              <div class="color-swatch-card__body">
+                <span class="color-swatch-card__title">Footer BG</span>
+                <code class="color-swatch-card__value">
+                  {{ tenant()?.footer_bg_color || 'Default' }}
+                </code>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   </section>
+
+  <section class="component-demo card shadow-sm mt-4">
+    <div class="card-body">
+      <span class="eyebrow">Reusable Component</span>
+      <h2 class="mb-4">Tarjetas de Producto (ProductCard)</h2>
+
+      <p class="text-muted mb-4">
+        Las tarjetas se adaptan al tamano del contenedor padre. A continuacion se
+        presentan dentro de una grilla de Bootstrap.
+      </p>
+
+      <div class="row">
+        @for (product of testProducts; track product.title) {
+          <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch">
+            <app-product-card
+              [imageUrl]="product.imageUrl"
+              [title]="product.title"
+              [originalPrice]="product.originalPrice"
+              [discount]="product.discount"
+              [transferPrice]="product.transferPrice"
+              (buy)="onProductBuy(product.title)"
+            />
+          </div>
+        }
+      </div>
+    </div>
+  </section>
+
+  <app-store-section
+    title="PRODUCTOS"
+    class="component-demo store-section-demo mt-5"
+  >
+    <div class="row">
+      @for (product of testProducts; track product.title) {
+        <div
+          class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch store-section-demo__item"
+        >
+          <app-product-card
+            [imageUrl]="product.imageUrl"
+            [title]="product.title"
+            [originalPrice]="product.originalPrice"
+            [discount]="product.discount"
+            [transferPrice]="product.transferPrice"
+            (buy)="onProductBuy(product.title)"
+          />
+        </div>
+      }
+    </div>
+  </app-store-section>
 </main>

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss

@@ -15,6 +15,10 @@
   border: 0;
 }
 
+.store-section-demo {
+  width: min(100%, 64rem);
+}
+
 .eyebrow {
   display: inline-block;
   margin-bottom: 0.75rem;
@@ -45,16 +49,92 @@ h1 {
   gap: 0.75rem;
 }
 
+.modal-showcase__result {
+  padding: 0.875rem 1rem;
+  border: 1px dashed rgba(32, 32, 32, 0.14);
+  border-radius: 0.875rem;
+  background: linear-gradient(180deg, rgba(248, 248, 248, 0.92), rgba(255, 255, 255, 0.98));
+  color: #495057;
+  font-size: 0.95rem;
+}
+
+:host ::ng-deep .modal-demo-content {
+  display: grid;
+  gap: 1rem;
+}
+
+:host ::ng-deep .modal-demo-content__eyebrow {
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #6c757d;
+}
+
+:host ::ng-deep .modal-demo-content__title {
+  margin: 0;
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: #202020;
+}
+
+:host ::ng-deep .modal-demo-content__description {
+  margin: 0;
+  color: #505050;
+  line-height: 1.6;
+}
+
+:host ::ng-deep .modal-demo-content__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
 .button-group h2 {
   margin: 0;
   font-size: 1rem;
   font-weight: 700;
 }
 
+.paginator-showcase {
+  display: grid;
+  justify-items: center;
+  gap: 0.75rem;
+  text-align: center;
+}
+
+.cart-showcase {
+  display: grid;
+  gap: 1rem;
+  justify-items: start;
+}
+
+.cart-showcase__viewport {
+  width: 100%;
+  max-width: 370px;
+  height: 360px;
+}
+
+.cart-showcase__header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
 .button-grid--single-char app-button {
   min-width: 3rem;
 }
 
+.store-section-demo__item {
+  app-product-card {
+    width: 100%;
+  }
+}
+
 .section-divider {
   margin: 2rem 0;
 }
@@ -70,6 +150,12 @@ h1 {
   gap: 0;
 }
 
+.file-field {
+  display: grid;
+  gap: 0.75rem;
+}
+
+
 .file-field {
   display: grid;
   gap: 0.75rem;
@@ -85,4 +171,164 @@ h1 {
   .input-grid {
     grid-template-columns: minmax(0, 1fr);
   }
+
+  .cart-showcase__header {
+    align-items: start;
+    flex-direction: column;
+  }
+
+  .modal-showcase__result {
+    font-size: 0.875rem;
+  }
+}
+
+.configuracion-tennant {
+  margin-top: 2rem;
+
+  .tenant-logo-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    &__label {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: #495057;
+    }
+
+    &__container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 120px;
+      border-radius: 8px;
+      border: 1px solid #dee2e6;
+      padding: 1rem;
+      overflow: hidden;
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08);
+      }
+    }
+
+    &__img {
+      max-height: 100%;
+      max-width: 100%;
+      object-fit: contain;
+      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+    }
+
+    &__placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #6c757d;
+      font-size: 0.875rem;
+
+      i {
+        font-size: 2rem;
+        opacity: 0.6;
+      }
+    }
+  }
+
+  .header-bg {
+    background-color: var(--tenant-header-bg, #f8f9fa);
+  }
+
+  .footer-bg {
+    background-color: var(--tenant-footer-bg, #f8f9fa);
+  }
+
+  .color-swatch-card {
+    display: flex;
+    flex-direction: column;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+    overflow: hidden;
+    background-color: #ffffff;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
+    }
+
+    &__preview {
+      height: 80px;
+      width: 100%;
+      border-bottom: 1px solid #dee2e6;
+      transition: opacity 0.2s ease;
+
+      &:hover {
+        opacity: 0.95;
+      }
+    }
+
+    &__body {
+      padding: 0.75rem 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    &__title {
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      font-weight: 700;
+      color: #6c757d;
+    }
+
+    &__value {
+      font-size: 0.875rem;
+      color: #212529;
+      font-family: var(--bs-font-monospace);
+    }
+  }
+}
+
+.icon-button-showcase {
+  display: grid;
+  gap: 1.5rem;
+
+  &__grid {
+    display: grid;
+    gap: 1.5rem;
+    background-color: #eaeaea;
+    padding: 1.5rem;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+  }
+
+  &__row {
+    display: grid;
+    grid-template-columns: 160px 1fr;
+    align-items: center;
+    gap: 1.5rem;
+
+    @media (max-width: 575.98px) {
+      grid-template-columns: minmax(0, 1fr);
+      gap: 0.5rem;
+    }
+  }
+
+  &__label {
+    font-size: 0.875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #495057;
+    letter-spacing: 0.05em;
+  }
+
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1.5rem;
+  }
 }

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts

@@ -0,0 +1,194 @@
+import { signal } from '@angular/core';
+import { TestBed, getTestBed } from '@angular/core/testing';
+import {
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing';
+import { of } from 'rxjs';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
+import { ModalService } from '../../../../core/services/modal.service';
+import { Tenant } from '../../../../core/services/tenant.interface';
+import { TenantService } from '../../../../core/services/tenant.service';
+import { ToastService } from '../../../../core/services/toast.service';
+import { ReutilizablesTestPageComponent } from './reutilizables-test-page.component';
+
+const tenant: Tenant = {
+  id: 1,
+  codigo: 'test',
+  nombre: 'Test Tenant',
+  dominio: 'localhost',
+  primary_color: '#6376F3',
+  secondary_color: '#A0A0A0',
+  danger_color: '#FF8888',
+  success_color: '#198754',
+  header_bg_color: '#313131',
+  footer_bg_color: '#313131',
+  header_logo: 'https://example.com/header.png',
+  footer_logo: 'https://example.com/footer.png'
+};
+
+function createTenantServiceStub(currentTenant: Tenant | null) {
+  const tenantState = signal(currentTenant);
+  const statusState = signal<'ready' | 'not-found'>('ready');
+
+  return {
+    tenant: tenantState.asReadonly(),
+    status: statusState.asReadonly(),
+    getTenant: () => tenantState(),
+    bootstrap: vi.fn().mockResolvedValue(undefined)
+  };
+}
+
+function createToastServiceStub() {
+  return {
+    success: vi.fn(),
+    danger: vi.fn(),
+    info: vi.fn()
+  };
+}
+
+function createModalServiceStub() {
+  return {
+    open: vi.fn(),
+    openConfirm: vi.fn().mockReturnValue(of(true)),
+    openConfirmDelete: vi.fn().mockReturnValue(of(false))
+  };
+}
+
+describe('ReutilizablesTestPageComponent', () => {
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(
+        BrowserTestingModule,
+        platformBrowserTesting()
+      );
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  it('renders the tenant configuration section with logo sources and swatch colors', async () => {
+    const modalServiceStub = createModalServiceStub();
+    await TestBed.configureTestingModule({
+      imports: [ReutilizablesTestPageComponent],
+      providers: [
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub(tenant)
+        },
+        {
+          provide: ToastService,
+          useValue: createToastServiceStub()
+        },
+        {
+          provide: ModalService,
+          useValue: modalServiceStub
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ReutilizablesTestPageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const sectionTitle = element.querySelector('.configuracion-tennant h2');
+
+    expect(sectionTitle?.textContent).toContain('Configuracion Tenant');
+
+    const headerImg = element.querySelector(
+      '.tenant-logo-card img[alt="Header Logo"]'
+    ) as HTMLImageElement;
+    expect(headerImg?.src).toBe(tenant.header_logo);
+
+    const footerImg = element.querySelector(
+      '.tenant-logo-card img[alt="Footer Logo"]'
+    ) as HTMLImageElement;
+    expect(footerImg?.src).toBe(tenant.footer_logo);
+
+    expect(element.textContent).toContain(tenant.primary_color);
+    expect(element.textContent).toContain(tenant.secondary_color);
+    expect(element.textContent).toContain(tenant.danger_color);
+    expect(element.textContent).toContain(tenant.success_color);
+  });
+
+  it('renders the paginator demo with the initial page status', async () => {
+    const modalServiceStub = createModalServiceStub();
+    await TestBed.configureTestingModule({
+      imports: [ReutilizablesTestPageComponent],
+      providers: [
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub(tenant)
+        },
+        {
+          provide: ToastService,
+          useValue: createToastServiceStub()
+        },
+        {
+          provide: ModalService,
+          useValue: modalServiceStub
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ReutilizablesTestPageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.querySelector('app-paginator')).not.toBeNull();
+    expect(
+      element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()
+    ).toBe('1/8');
+  });
+
+  it('renders the modal showcase and opens the confirm demos from the buttons', async () => {
+    const modalServiceStub = createModalServiceStub();
+    await TestBed.configureTestingModule({
+      imports: [ReutilizablesTestPageComponent],
+      providers: [
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub(tenant)
+        },
+        {
+          provide: ToastService,
+          useValue: createToastServiceStub()
+        },
+        {
+          provide: ModalService,
+          useValue: modalServiceStub
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ReutilizablesTestPageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const buttons = Array.from(
+      element.querySelectorAll('.button-group app-button button')
+    );
+    const confirmButton = buttons.find((button) =>
+      button.textContent?.includes('Abrir confirm modal')
+    ) as HTMLButtonElement;
+    const deleteButton = buttons.find((button) =>
+      button.textContent?.includes('Abrir confirm delete')
+    ) as HTMLButtonElement;
+
+    expect(
+      element.querySelector('[data-testid="modal-last-result"]')?.textContent
+    ).toContain('Todavia no se abrio ningun modal.');
+
+    confirmButton.click();
+    deleteButton.click();
+
+    expect(modalServiceStub.openConfirm).toHaveBeenCalled();
+    expect(modalServiceStub.openConfirmDelete).toHaveBeenCalled();
+  });
+});

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts

@@ -1,14 +1,39 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
+import {
+  CartComponent,
+  CartItemMock
+} from '../../../../shared/components/cart/cart.component';
+import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
+import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
 import { InputComponent } from '../../../../shared/components/input/input.component';
+import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
+import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
+import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
+import { ModalService } from '../../../../core/services/modal.service';
+import { TenantService } from '../../../../core/services/tenant.service';
+import { ToastService } from '../../../../core/services/toast.service';
 
 @Component({
   selector: 'app-reutilizables-test-page',
-  imports: [ButtonComponent, InputComponent],
+  imports: [
+    ButtonComponent,
+    CartComponent,
+    InputComponent,
+    PaginatorComponent,
+    ProductCardComponent,
+    StoreSectionComponent,
+    IconButtonComponent,
+    CartIconComponent
+  ],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss'
 })
 export class ReutilizablesTestPageComponent {
+  private readonly tenantService = inject(TenantService);
+  private readonly toastService = inject(ToastService);
+  private readonly modalService = inject(ModalService);
+  protected readonly tenant = this.tenantService.tenant;
   protected textValue = 'Auriculares';
   protected numberValue = '24';
   protected email = 'usuario@empresa.com';
@@ -24,6 +49,91 @@ export class ReutilizablesTestPageComponent {
   protected fileName = '';
   protected clearTrigger = 0;
   protected editableDisabled = true;
+  protected currentPage = 1;
+  protected cartVisible = true;
+  protected lastModalResult = 'Todavia no se abrio ningun modal.';
+  protected readonly paginatorTotalPages = 8;
+  protected readonly cartBackgroundColor = '#ffffff';
+
+  protected readonly testProducts = [
+    {
+      title: 'Pantalon recto de scuba negro',
+      originalPrice: 95000,
+      discount: 20,
+      transferPrice: 74800,
+      imageUrl: '/images/pantalon-scuba.png'
+    },
+    {
+      title: 'Zapatillas de running azul',
+      originalPrice: 120000,
+      discount: 15,
+      transferPrice: 98000,
+      imageUrl: '/images/zapatillas-running.png'
+    },
+    {
+      title: 'Remera basica blanca (Sin Descuento)',
+      originalPrice: 32000,
+      discount: null,
+      transferPrice: 30000,
+      imageUrl: null
+    }
+  ];
+
+  protected readonly cartMockItems: CartItemMock[] = [
+    {
+      imageUrl: null,
+      product: 'Calza termica unisex con proceso sense y cintura con mayor agarre',
+      originalPrice: 95000,
+      discountedPrice: 76000,
+      discountPercentage: 20,
+      quantity: 1,
+      attributes: [
+        { label: 'Color', value: 'Beige' },
+        { label: 'Talle', value: 'S' }
+      ]
+    },
+    {
+      imageUrl: null,
+      product: 'Pantalon recto de scuba negro',
+      originalPrice: null,
+      discountedPrice: 89000,
+      discountPercentage: null,
+      quantity: 1,
+      attributes: [
+        { label: 'Color', value: 'Beige' },
+        { label: 'Talle', value: 'S' }
+      ]
+    },
+    {
+      imageUrl: null,
+      product: 'Top de supplex color habano',
+      originalPrice: 98000,
+      discountedPrice: 85000,
+      discountPercentage: 20,
+      quantity: 1,
+      attributes: [
+        { label: 'Color', value: 'Negro' },
+        { label: 'Talle', value: 'XL' }
+      ]
+    },
+    {
+      imageUrl: null,
+      product: 'Buzo oversize canguro gris',
+      originalPrice: 72000,
+      discountedPrice: 69000,
+      discountPercentage: 5,
+      quantity: 2,
+      attributes: [
+        { label: 'Color', value: 'Gris' },
+        { label: 'Talle', value: 'M' }
+      ]
+    }
+  ];
+
+  protected onProductBuy(productTitle: string): void {
+    console.log(`Comprando: ${productTitle}`);
+    alert(`Comprando: ${productTitle}`);
+  }
 
   protected onFileChange(file: File | null): void {
     this.fileName = file?.name ?? '';
@@ -33,4 +143,95 @@ export class ReutilizablesTestPageComponent {
     this.fileName = '';
     this.clearTrigger += 1;
   }
+
+  protected showCart(): void {
+    this.cartVisible = true;
+  }
+
+  protected hideCart(): void {
+    this.cartVisible = false;
+    this.toastService.info('Se disparo el evento de cerrado del carrito mock.');
+  }
+
+  protected triggerToast(type: 'success' | 'danger' | 'info'): void {
+    if (type === 'success') {
+      this.toastService.success(
+        'Operacion exitosa. El producto se ha guardado correctamente.'
+      );
+    } else if (type === 'danger') {
+      this.toastService.danger(
+        'Alerta de error. Hubo un problema al procesar la solicitud.'
+      );
+    } else if (type === 'info') {
+      this.toastService.info(
+        'Informacion del sistema: Hay una nueva actualizacion disponible.'
+      );
+    }
+  }
+
+  protected triggerPersistentToast(type: 'success' | 'danger' | 'info'): void {
+    if (type === 'success') {
+      this.toastService.success(
+        'Exito persistente. Esta alerta no se cerrara sola.',
+        0
+      );
+    } else if (type === 'danger') {
+      this.toastService.danger(
+        'Error persistente. Por favor, atienda este problema y cierrelo manualmente.',
+        0
+      );
+    } else if (type === 'info') {
+      this.toastService.info(
+        'Informacion persistente: Mantendremos este aviso en pantalla.',
+        0
+      );
+    }
+  }
+
+  protected openBasicModal(): void {
+    this.openConfirmModal({
+      title: 'Confirmar accion',
+      content:
+        'Caso base para verificar apertura, cierre y devolucion de resultado.',
+      confirmLabel: 'Confirmar'
+    });
+  }
+
+  protected openConfirmDeleteModal(): void {
+    this.modalService.openConfirmDelete({
+      title: 'Eliminar producto',
+      content:
+        'Esta accion eliminara el producto del catalogo. Podras volver a crearlo manualmente.',
+      confirmLabel: 'Eliminar',
+      cancelLabel: 'Conservar'
+    }).subscribe((confirmed) => {
+      this.lastModalResult = `Resultado: ${confirmed}`;
+    });
+  }
+
+  protected openLockedModal(): void {
+    this.openConfirmModal({
+      title: 'Modal bloqueado',
+      content:
+        'Este modal no se cierra tocando el backdrop ni con la tecla Escape.',
+      confirmLabel: 'Entendido',
+      closeOnBackdrop: false,
+      closeOnEscape: false
+    });
+  }
+
+  protected openWideModal(): void {
+    this.openConfirmModal({
+      title: 'Modal ancho',
+      content: 'Demuestra una variante visual mas amplia para contenido mas pesado.',
+      confirmLabel: 'Seguir',
+      size: 'xl'
+    });
+  }
+
+  private openConfirmModal(config: Parameters<ModalService['openConfirm']>[0]): void {
+    this.modalService.openConfirm(config).subscribe((confirmed) => {
+      this.lastModalResult = `Resultado: ${confirmed}`;
+    });
+  }
 }

src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.html

@@ -0,0 +1,40 @@
+<div class="attribute-selector">
+  @for (attribute of attributes(); track attribute.id) {
+    <div class="attribute-selector__row">
+      <span class="attribute-selector__label">{{ attribute.nombre }}:</span>
+
+      <div class="attribute-selector__options">
+        @for (option of attribute.options; track option.id) {
+          @if (isColorOption(option)) {
+            <button
+              type="button"
+              class="attribute-selector__swatch"
+              [class.attribute-selector__swatch--selected]="hasSelectedOption(attribute, option)"
+              [class.attribute-selector__swatch--disabled]="!availableOptions()[attribute.id][option.id]"
+              [style.background-color]="getOptionSwatchColor(option)"
+              [attr.aria-label]="option.label"
+              [attr.aria-pressed]="hasSelectedOption(attribute, option)"
+              [title]="option.label"
+              [disabled]="!availableOptions()[attribute.id][option.id]"
+              (click)="selectAttributeOption(attribute, option)"
+            >
+              <span class="visually-hidden">{{ option.label }}</span>
+            </button>
+          } @else {
+            <button
+              type="button"
+              class="attribute-selector__text-option"
+              [class.attribute-selector__text-option--selected]="hasSelectedOption(attribute, option)"
+              [class.attribute-selector__text-option--disabled]="!availableOptions()[attribute.id][option.id]"
+              [attr.aria-pressed]="hasSelectedOption(attribute, option)"
+              [disabled]="!availableOptions()[attribute.id][option.id]"
+              (click)="selectAttributeOption(attribute, option)"
+            >
+              {{ option.label }}
+            </button>
+          }
+        }
+      </div>
+    </div>
+  }
+</div>

src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.scss

@@ -0,0 +1,83 @@
+.attribute-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    flex-wrap: wrap;
+  }
+
+  &__label {
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.2;
+    color: #A0A0A0;
+    min-width: 44px;
+  }
+
+  &__options {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  &__swatch {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    border: 1px solid transparent;
+    padding: 0;
+    cursor: pointer;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+
+    &--selected {
+      border-color: var(--tenant-primary);
+      box-shadow:
+        0 0 0 2px rgba(255, 255, 255, 1),
+        0 0 0 3px var(--tenant-primary);
+    }
+
+    &--disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &__text-option {
+    border: 1px solid #dcdcdc;
+    background: #ffffff;
+    color: #666666;
+    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
+    min-width: 34px;
+    min-height: 34px;
+    border-radius: 4px;
+    padding: 0.35rem 0.6rem;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1;
+
+    &--selected {
+      background: var(--tenant-primary);
+      border-color: var(--tenant-primary);
+      color: #ffffff;
+    }
+
+    &--disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+      background-color: #f9f9f9;
+      color: #b0b0b0;
+      pointer-events: none;
+    }
+  }
+}

src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.ts

@@ -0,0 +1,263 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  input,
+  output,
+  signal,
+  untracked
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  ProductAttribute,
+  ProductAttributeOption,
+  ProductVariant,
+  ProductVariantMap
+} from '../../../../core/services/catalog/catalog.interface';
+
+@Component({
+  selector: 'app-product-attribute-selector',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './product-attribute-selector.component.html',
+  styleUrl: './product-attribute-selector.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProductAttributeSelectorComponent {
+  public attributes = input<ProductAttribute[]>([]);
+  public variantsMap = input<ProductVariantMap[]>([]);
+  public defaultVariant = input<ProductVariant | null>(null);
+
+  public variantChange = output<ProductVariantMap | null>();
+
+  protected readonly selectedAttributeOptions = signal<Record<number, number>>({});
+
+  protected readonly availableOptions = computed(() => {
+    const selections = this.selectedAttributeOptions();
+    const variants = this.variantsMap();
+    const attributes = this.attributes();
+
+    const availability: Record<number, Record<number, boolean>> = {};
+
+    for (const attribute of attributes) {
+      availability[attribute.id] = {};
+      for (const option of attribute.options) {
+        const optionNormalized = this.normalizeText(option.value || option.label);
+        
+        const isAvailable = variants.some(variant => {
+          if (variant.cantidad_maxima <= 0) return false;
+
+          const variantAttrValue = this.getDefaultVariantAttributeValue(attribute, variant.attributes);
+          if (!variantAttrValue || this.normalizeText(variantAttrValue) !== optionNormalized) {
+             return false;
+          }
+
+          for (const otherAttr of attributes) {
+             if (otherAttr.id === attribute.id) continue;
+             const selectedOptionId = selections[otherAttr.id];
+             if (selectedOptionId !== undefined) {
+                const selectedOption = otherAttr.options.find(o => o.id === selectedOptionId);
+                if (selectedOption) {
+                   const selectedNormalized = this.normalizeText(selectedOption.value || selectedOption.label);
+                   const vAttrValue = this.getDefaultVariantAttributeValue(otherAttr, variant.attributes);
+                   if (!vAttrValue || this.normalizeText(vAttrValue) !== selectedNormalized) {
+                      return false;
+                   }
+                }
+             }
+          }
+          return true;
+        });
+
+        availability[attribute.id][option.id] = isAvailable;
+      }
+    }
+
+    return availability;
+  });
+
+  public reset(): void {
+    this.initializeSelections(this.attributes(), this.defaultVariant());
+  }
+
+  constructor() {
+    effect(() => {
+      const attributes = this.attributes();
+      const defaultVariant = this.defaultVariant();
+      
+      untracked(() => {
+        this.initializeSelections(attributes, defaultVariant);
+      });
+    });
+
+    effect(() => {
+      const selections = this.selectedAttributeOptions();
+      const variantsMap = this.variantsMap();
+      const attributes = this.attributes();
+      
+      untracked(() => {
+         this.emitMatchingVariant(selections, variantsMap, attributes);
+      });
+    });
+  }
+
+  protected hasSelectedOption(attribute: ProductAttribute, option: ProductAttributeOption): boolean {
+    return this.selectedAttributeOptions()[attribute.id] === option.id;
+  }
+
+  protected selectAttributeOption(
+    attribute: ProductAttribute,
+    option: ProductAttributeOption
+  ): void {
+    this.selectedAttributeOptions.update((current) => ({
+      ...current,
+      [attribute.id]: option.id
+    }));
+  }
+
+  protected isColorOption(option: ProductAttributeOption): boolean {
+    return this.findFirstHexValue(option.metadata) !== null;
+  }
+
+  protected getOptionSwatchColor(option: ProductAttributeOption): string {
+    return this.findFirstHexValue(option.metadata) ?? '#D9D9D9';
+  }
+
+  private initializeSelections(attributes: ProductAttribute[], defaultVariant: ProductVariant | null): void {
+    const selections: Record<number, number> = {};
+
+    for (const attribute of attributes) {
+      const optionId = this.findDefaultOptionId(attribute, defaultVariant);
+      if (optionId !== null) {
+        selections[attribute.id] = optionId;
+      }
+    }
+
+    this.selectedAttributeOptions.set(selections);
+  }
+
+  private findDefaultOptionId(
+    attribute: ProductAttribute,
+    variant: ProductVariant | null
+  ): number | null {
+    if (!variant) {
+      return null;
+    }
+
+    const defaultValue = this.getDefaultVariantAttributeValue(attribute, variant.definitions);
+    if (!defaultValue) {
+      return null;
+    }
+
+    const normalizedValue = this.normalizeText(defaultValue);
+    const matchByValue = attribute.options.find(
+      (option) => this.normalizeText(option.value) === normalizedValue
+    );
+
+    if (matchByValue) {
+      return matchByValue.id;
+    }
+
+    const matchByLabel = attribute.options.find(
+      (option) => this.normalizeText(option.label) === normalizedValue
+    );
+
+    return matchByLabel?.id ?? null;
+  }
+
+  private getDefaultVariantAttributeValue(
+    attribute: ProductAttribute,
+    variantAttributes: Record<string, string>
+  ): string | null {
+    const normalizedCodigo = this.normalizeText(attribute.codigo);
+    const normalizedNombre = this.normalizeText(attribute.nombre);
+
+    for (const [key, value] of Object.entries(variantAttributes)) {
+      const normalizedKey = this.normalizeText(key);
+
+      if (normalizedKey === normalizedCodigo || normalizedKey === normalizedNombre) {
+        return value;
+      }
+    }
+
+    return null;
+  }
+
+  private normalizeText(value: string | null | undefined): string {
+    return (value ?? '')
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .trim()
+      .toLowerCase();
+  }
+
+  private findFirstHexValue(value: unknown): string | null {
+    if (typeof value === 'string') {
+      const match = value.match(/#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/);
+      return match ? match[0] : null;
+    }
+
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        const found = this.findFirstHexValue(item);
+        if (found) {
+          return found;
+        }
+      }
+      return null;
+    }
+
+    if (value && typeof value === 'object') {
+      for (const item of Object.values(value)) {
+        const found = this.findFirstHexValue(item);
+        if (found) {
+          return found;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  private emitMatchingVariant(
+    selections: Record<number, number>,
+    variantsMap: ProductVariantMap[],
+    attributes: ProductAttribute[]
+  ): void {
+    if (attributes.length === 0 || variantsMap.length === 0) {
+      this.variantChange.emit(null);
+      return;
+    }
+
+    const selectedValuesById: Record<number, string> = {};
+    let allSelected = true;
+    for (const attr of attributes) {
+      const selectedOptionId = selections[attr.id];
+      if (selectedOptionId === undefined) {
+         allSelected = false;
+         break;
+      }
+      const option = attr.options.find(o => o.id === selectedOptionId);
+      if (option) {
+         selectedValuesById[attr.id] = this.normalizeText(option.value || option.label);
+      }
+    }
+
+    if (!allSelected) {
+      this.variantChange.emit(null);
+      return;
+    }
+
+    const matchingVariant = variantsMap.find(vMap => {
+      return attributes.every(attr => {
+         const selectedValue = selectedValuesById[attr.id];
+         const vMapValue = this.getDefaultVariantAttributeValue(attr, vMap.attributes);
+         if (!vMapValue) return false;
+         return this.normalizeText(vMapValue) === selectedValue;
+      });
+    });
+
+    this.variantChange.emit(matchingVariant || null);
+  }
+}

src/app/features/store/components/product-carousel/product-carousel.component.html

@@ -0,0 +1,51 @@
+<div class="product-carousel d-flex flex-column gap-4">
+  <!-- Active/Main Image Area -->
+  <div class="product-carousel__main position-relative bg-light  overflow-hidden">
+    <!-- Main Image -->
+    @if (images().length > 0) {
+    <img [src]="images()[activeIndex()]" alt="Product active image"
+      class="product-carousel__main-image w-100 h-100 object-fit-cover" />
+    } @else {
+    <!-- Placeholder -->
+    <div class="product-carousel__placeholder w-100 h-100 d-flex align-items-center justify-content-center text-muted">
+      <i class="fa-solid fa-image fa-3x"></i>
+    </div>
+    }
+
+    <!-- Discount Badge -->
+    @if (discount() && discount()! > 0) {
+    <span
+      class="product-carousel__discount-badge position-absolute top-0 end-0 bg-primary text-white px-3 py-2 fw-semibold">
+      -{{ discount() }}%
+    </span>
+    }
+
+    <!-- Navigation Arrows -->
+    @if (images().length > 1) {
+    <button type="button"
+      class="product-carousel__nav-btn product-carousel__nav-btn--prev position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
+      (click)="prevImage()" aria-label="Previous image">
+      <i class="fa-solid fa-chevron-left"></i>
+    </button>
+
+    <button type="button"
+      class="product-carousel__nav-btn product-carousel__nav-btn--next position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
+      (click)="nextImage()" aria-label="Next image">
+      <i class="fa-solid fa-chevron-right"></i>
+    </button>
+    }
+  </div>
+
+  <!-- Thumbnails Row -->
+  @if (images().length > 1) {
+  <div class="product-carousel__thumbnails">
+    @for (image of images(); track image; let idx = $index) {
+    <button type="button" class="product-carousel__thumbnail border-0 p-0  overflow-hidden bg-light"
+      [class.product-carousel__thumbnail--active]="idx === activeIndex()" (click)="selectImage(idx)"
+      [attr.aria-label]="'Select image ' + (idx + 1)">
+      <img [src]="image" alt="Product thumbnail" class="w-100 h-100 object-fit-cover" />
+    </button>
+    }
+  </div>
+  }
+</div>

src/app/features/store/components/product-carousel/product-carousel.component.scss

@@ -0,0 +1,92 @@
+.product-carousel {
+  width: 100%;
+
+  &__main {
+    aspect-ratio: 1 / 1;
+    width: 100%;
+    background-color: #e0e0e0 !important;
+    /* Matches grey placeholder in mock */
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__main-image {
+    display: block;
+    padding: 0;
+    transition: transform 0.3s ease;
+  }
+
+  &__placeholder {
+    height: 100%;
+    background-color: #e0e0e0;
+  }
+
+  &__discount-badge {
+    top: 0 !important;
+    right: 0 !important;
+    background-color: var(--tenant-primary, #6376F3) !important;
+    border-bottom-left-radius: 4px;
+    font-size: 0.9rem;
+    letter-spacing: 0.5px;
+    padding: 0.5rem 1rem !important;
+  }
+
+  &__nav-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.2) !important;
+    color: #ffffff !important;
+    font-size: 0.9rem;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+    z-index: 10;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.4) !important;
+      transform: translateY(-50%) scale(1.05);
+    }
+
+    &--prev {
+      left: 16px !important;
+    }
+
+    &--next {
+      right: 16px !important;
+    }
+  }
+
+  &__thumbnails {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  &__thumbnail {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    background-color: #e0e0e0 !important;
+    /* Matches mock layout */
+    padding: 0;
+    transition: opacity 0.2s ease, border-color 0.2s ease;
+    border: 3px solid transparent !important;
+    cursor: pointer;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    &:hover {
+      opacity: 0.9;
+    }
+
+    &--active {
+      border-color: var(--tenant-primary, #6376F3) !important;
+      opacity: 1;
+    }
+  }
+}

src/app/features/store/components/product-carousel/product-carousel.component.spec.ts

@@ -0,0 +1,90 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { ProductCarouselComponent } from './product-carousel.component';
+
+describe('ProductCarouselComponent', () => {
+  const mockImages = [
+    'https://example.com/img1.png',
+    'https://example.com/img2.png',
+    'https://example.com/img3.png'
+  ];
+
+  beforeEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  async function createComponent(images: string[] = [], discount: number | null = null) {
+    await TestBed.configureTestingModule({
+      imports: [ProductCarouselComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ProductCarouselComponent);
+    const component = fixture.componentInstance;
+
+    // Set signals input values
+    fixture.componentRef.setInput('images', images);
+    fixture.componentRef.setInput('discount', discount);
+
+    fixture.detectChanges();
+
+    return { fixture, component };
+  }
+
+  it('should create and start at activeIndex 0', async () => {
+    const { component } = await createComponent(mockImages);
+    expect(component).toBeTruthy();
+    expect(component.activeIndex()).toBe(0);
+  });
+
+  it('should cycle through images on nextImage', async () => {
+    const { component } = await createComponent(mockImages);
+    expect(component.activeIndex()).toBe(0);
+
+    component.nextImage();
+    expect(component.activeIndex()).toBe(1);
+
+    component.nextImage();
+    expect(component.activeIndex()).toBe(2);
+
+    component.nextImage(); // Should wrap around to 0
+    expect(component.activeIndex()).toBe(0);
+  });
+
+  it('should cycle backwards on prevImage', async () => {
+    const { component } = await createComponent(mockImages);
+    expect(component.activeIndex()).toBe(0);
+
+    component.prevImage(); // Should wrap around to end (2)
+    expect(component.activeIndex()).toBe(2);
+
+    component.prevImage();
+    expect(component.activeIndex()).toBe(1);
+  });
+
+  it('should set activeIndex on selectImage', async () => {
+    const { component } = await createComponent(mockImages);
+    expect(component.activeIndex()).toBe(0);
+
+    component.selectImage(2);
+    expect(component.activeIndex()).toBe(2);
+
+    // If out of bounds, should not change
+    component.selectImage(5);
+    expect(component.activeIndex()).toBe(2);
+  });
+
+  it('should render discount badge if provided', async () => {
+    const { fixture } = await createComponent(mockImages, 20);
+    const element = fixture.nativeElement as HTMLElement;
+    const badge = element.querySelector('.product-carousel__discount-badge');
+    expect(badge).not.toBeNull();
+    expect(badge?.textContent?.trim()).toBe('-20%');
+  });
+
+  it('should not render discount badge if not provided', async () => {
+    const { fixture } = await createComponent(mockImages);
+    const element = fixture.nativeElement as HTMLElement;
+    const badge = element.querySelector('.product-carousel__discount-badge');
+    expect(badge).toBeNull();
+  });
+});

src/app/features/store/components/product-carousel/product-carousel.component.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-product-carousel',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './product-carousel.component.html',
+  styleUrl: './product-carousel.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProductCarouselComponent {
+  readonly images = input<string[]>([]);
+  readonly discount = input<number | null>(null);
+
+  readonly activeIndex = signal(0);
+
+  nextImage(): void {
+    const total = this.images().length;
+    if (total > 0) {
+      this.activeIndex.set((this.activeIndex() + 1) % total);
+    }
+  }
+
+  prevImage(): void {
+    const total = this.images().length;
+    if (total > 0) {
+      this.activeIndex.set((this.activeIndex() - 1 + total) % total);
+    }
+  }
+
+  selectImage(index: number): void {
+    const total = this.images().length;
+    if (index >= 0 && index < total) {
+      this.activeIndex.set(index);
+    }
+  }
+}

src/app/features/store/pages/product-detail-page/product-detail-page.component.html

@@ -0,0 +1,120 @@
+<section class="product-detail py-5">
+  <div class="container-xl px-3 px-md-4">
+    @if (loading()) {
+      <div class="text-center py-5">
+        <div class="spinner-border text-primary" role="status">
+          <span class="visually-hidden">Cargando...</span>
+        </div>
+      </div>
+    } @else if (error()) {
+      <div class="alert alert-danger text-center mb-0" role="alert">
+        {{ error() }}
+      </div>
+    } @else if (product(); as prod) {
+      <div class="row g-4 g-xl-5 align-items-start">
+        <div class="col-12 col-lg-5">
+          <div #carouselHost class="product-detail__carousel">
+            <app-product-carousel [images]="carouselImages()" />
+          </div>
+        </div>
+
+        <div class="col-12 col-lg-7">
+          <div class="product-detail__panel">
+            <section class="product-detail__section">
+              <h1 class="product-detail__title mb-0">{{ prod.nombre }}</h1>
+
+              <div class="product-detail__title-price-divider"></div>
+
+              <div class="product-detail__price-group">
+                <span class="product-detail__price-current">
+                  {{ getFormattedPrice(prod.precio) }}
+                </span>
+
+                @if (oldPrice(); as oldPrice) {
+                  <span class="product-detail__price-previous">{{ oldPrice }}</span>
+                }
+              </div>
+            </section>
+
+            @if (hasRenderableAttributes()) {
+              <div class="product-detail__divider"></div>
+
+              <section class="product-detail__section product-detail__section--attributes">
+                <app-product-attribute-selector
+                  [attributes]="renderableAttributes()"
+                  [variantsMap]="prod.variants_map"
+                  [defaultVariant]="prod.variant"
+                  (variantChange)="onVariantChange($event)"
+                />
+              </section>
+            }
+
+            <div class="product-detail__divider"></div>
+
+            <section class="product-detail__section">
+              <div class="product-detail__purchase">
+                <app-quantity-selector
+                  [(quantity)]="quantity"
+                  [max]="selectedVariant()?.cantidad_maxima ?? 1"
+                />
+
+                <div class="product-detail__actions">
+                  <app-button
+                    class="product-detail__cta"
+                    variant="secondary"
+                    type="button"
+                    [disabled]="!selectedVariant() || variantLoading() || addingToCart()"
+                    (click)="addToCart()"
+                  >
+                    @if (variantLoading() || addingToCart()) {
+                      <div class="spinner-border spinner-border-sm" role="status"></div>
+                    } @else {
+                      Agregar al carrito
+                    }
+                  </app-button>
+
+                  <app-button class="product-detail__cta" type="button" [disabled]="!selectedVariant() || variantLoading()">
+                    @if (variantLoading()) {
+                      <div class="spinner-border spinner-border-sm" role="status"></div>
+                    } @else {
+                      Comprar
+                    }
+                  </app-button>
+                </div>
+              </div>
+            </section>
+
+            <div class="product-detail__divider"></div>
+
+            <section class="product-detail__section product-detail__section--description">
+              <h2 class="product-detail__description-heading">DESCRIPCIÓN</h2>
+
+              <div
+                #descriptionBody
+                class="product-detail__description-body"
+                [class.product-detail__description-body--expanded]="descriptionExpanded()"
+                [style.max-height.px]="descriptionExpanded() ? descriptionMaxHeight() || null : null"
+              >
+                {{ prod.descripcion }}
+              </div>
+
+              @if (showDescriptionToggle()) {
+                <button
+                  type="button"
+                  class="product-detail__description-toggle"
+                  (click)="toggleDescription()"
+                >
+                  {{ descriptionExpanded() ? 'Mostrar menos' : 'Mostrar más' }}
+                </button>
+              }
+            </section>
+          </div>
+        </div>
+      </div>
+    } @else {
+      <div class="alert alert-warning text-center mb-0" role="alert">
+        No se encontró el producto especificado.
+      </div>
+    }
+  </div>
+</section>

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

@@ -0,0 +1,138 @@
+.product-detail {
+  color: #000000;
+
+  &__panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  &__section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  &__divider {
+    border-top: 1px solid #e6e6e6;
+  }
+
+  &__title {
+    font-size: 28px;
+    font-weight: 400;
+    line-height: 1.35;
+    color: #000000;
+  }
+
+  &__title-price-divider {
+    border-top: 1px solid #e6e6e6;
+  }
+
+  &__price-group {
+    display: flex;
+    align-items: baseline;
+    gap: 0.875rem;
+    flex-wrap: wrap;
+  }
+
+  &__price-current {
+    font-size: 42px;
+    font-weight: 700;
+    line-height: 1.1;
+    color: var(--tenant-primary);
+  }
+
+  &__price-previous {
+    font-size: 19px;
+    font-weight: 325;
+    line-height: 1.2;
+    color: #a0a0a0;
+    text-decoration: line-through;
+  }
+
+  &__section--attributes {
+    gap: 1.25rem;
+  }
+
+  &__attribute-options,
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+
+  &__purchase {
+    display: flex;
+    align-items: stretch;
+    gap: 0.875rem;
+    flex-wrap: wrap;
+  }
+
+
+  &__actions {
+    flex: 1 1 0;
+  }
+
+  &__description-heading {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.2;
+    letter-spacing: 0.04em;
+    color: #666666;
+  }
+
+  &__description-body {
+    font-size: 14px;
+    font-weight: 325;
+    line-height: 1.45;
+    color: #666666;
+    white-space: pre-line;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+
+    &--expanded {
+      display: block;
+      -webkit-line-clamp: unset;
+      max-height: none;
+      overflow-y: auto;
+      padding-right: 0.35rem;
+    }
+  }
+
+  &__description-toggle {
+    align-self: center;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--tenant-primary);
+  }
+}
+
+app-button.product-detail__cta {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+@media (max-width: 991.98px) {
+  .product-detail {
+    &__panel {
+      gap: 1.25rem;
+    }
+
+    &__purchase {
+      flex-direction: column;
+    }
+
+    &__actions {
+      width: 100%;
+      flex-direction: column;
+    }
+  }
+}

src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts

@@ -0,0 +1,434 @@
+import { TestBed, getTestBed } from '@angular/core/testing';
+import {
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing';
+import { ActivatedRoute, Router } from '@angular/router';
+import { By } from '@angular/platform-browser';
+import { BehaviorSubject, of, throwError } from 'rxjs';
+import { convertToParamMap } from '@angular/router';
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ProductDetail } from '../../../../core/services/catalog/catalog.interface';
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { CartService } from '../../../../core/services/cart/cart.service';
+import { ToastService } from '../../../../core/services/toast.service';
+import { ProductDetailPageComponent } from './product-detail-page.component';
+
+describe('ProductDetailPageComponent', () => {
+  const mockProduct: ProductDetail = {
+    id: 1,
+    category_id: 10,
+    brand_id: null,
+    slug: 'auriculares-bluetooth',
+    nombre: 'Auriculares Bluetooth',
+    descripcion: 'Auriculares bluetooth de prueba',
+    precio: '24999',
+    category: 'Tecnología',
+    brand: 'Sony',
+    images: ['https://example.com/image.png'],
+    attributes: [],
+    variants_map: [],
+    variant: null
+  };
+
+  let paramMapSubject: BehaviorSubject<any>;
+  let catalogServiceStub: any;
+  let routerStub: any;
+  let cartServiceStub: any;
+  let toastServiceStub: any;
+
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(
+        BrowserTestingModule,
+        platformBrowserTesting()
+      );
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    paramMapSubject = new BehaviorSubject(convertToParamMap({ id: '1' }));
+    catalogServiceStub = {
+      getProducto: vi.fn().mockReturnValue(of(mockProduct))
+    };
+    routerStub = {
+      navigate: vi.fn()
+    };
+    cartServiceStub = {
+      addItem: vi.fn().mockReturnValue(of({ message: 'Producto agregado al carrito' }))
+    };
+    toastServiceStub = {
+      success: vi.fn(),
+      danger: vi.fn(),
+      info: vi.fn()
+    };
+  });
+
+  async function configureTestingModule() {
+    await TestBed.configureTestingModule({
+      imports: [ProductDetailPageComponent],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            paramMap: paramMapSubject.asObservable()
+          }
+        },
+        {
+          provide: CatalogService,
+          useValue: catalogServiceStub
+        },
+        {
+          provide: Router,
+          useValue: routerStub
+        },
+        {
+          provide: CartService,
+          useValue: cartServiceStub
+        },
+        {
+          provide: ToastService,
+          useValue: toastServiceStub
+        }
+      ]
+    }).compileComponents();
+  }
+
+  it('loads the product on init and embeds the carousel', async () => {
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(catalogServiceStub.getProducto).toHaveBeenCalledWith(1);
+
+    expect(element.querySelector('app-product-carousel')).not.toBeNull();
+    expect(element.querySelector('.product-detail__title')?.textContent).toContain('Auriculares Bluetooth');
+    expect(element.querySelector('.product-detail__price-current')?.textContent).toContain('$24.999');
+    expect(element.querySelector('.product-detail__price-previous')).toBeNull();
+    expect(element.querySelector('.product-carousel__discount-badge')).toBeNull();
+  });
+
+  it('shows error message if load fails', async () => {
+    catalogServiceStub.getProducto.mockReturnValue(throwError(() => new Error('load failed')));
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.textContent).toContain('No pudimos cargar los detalles del producto.');
+  });
+
+
+  it('should use default variant images if present', async () => {
+    const detailProduct: ProductDetail = {
+      ...mockProduct,
+      images: ['https://example.com/product.png'],
+      variant: {
+        id: 123,
+        cantidad_maxima: 10,
+        images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'],
+        definitions: {}
+      }
+    };
+    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const carousel = fixture.debugElement.query(By.css('app-product-carousel')).componentInstance;
+    expect(carousel.images()).toEqual(['https://example.com/variant1.png', 'https://example.com/variant2.png']);
+  });
+
+  it('should fallback to product images if default variant images are not present', async () => {
+    const detailProduct: ProductDetail = {
+      ...mockProduct,
+      images: ['https://example.com/product.png'],
+      variant: null
+    };
+    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const carousel = fixture.debugElement.query(By.css('app-product-carousel')).componentInstance;
+    expect(carousel.images()).toEqual(['https://example.com/product.png']);
+  });
+
+  it('should fallback to empty array if no images are present at all', async () => {
+    const detailProduct: ProductDetail = {
+      ...mockProduct,
+      images: [],
+      variant: null
+    };
+    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const carousel = fixture.debugElement.query(By.css('app-product-carousel')).componentInstance;
+    expect(carousel.images()).toEqual([]);
+  });
+
+  it('renders generic attributes and preselects default variant options', async () => {
+    const detailProduct: ProductDetail = {
+      ...mockProduct,
+      attributes: [
+        {
+          id: 1,
+          codigo: 'color',
+          nombre: 'Color',
+          is_required: true,
+          metadata_schema: null,
+          type: 'select',
+          options: [
+            {
+              id: 10,
+              value: 'beige',
+              label: 'Beige',
+              sort_order: 1,
+              metadata: { hex: '#D8D1C7' }
+            },
+            {
+              id: 11,
+              value: 'brown',
+              label: 'Marrón',
+              sort_order: 2,
+              metadata: { palette: { primary: '#7E6460' } }
+            }
+          ]
+        },
+        {
+          id: 2,
+          codigo: 'material',
+          nombre: 'Material',
+          is_required: true,
+          metadata_schema: null,
+          type: 'select',
+          options: [
+            {
+              id: 20,
+              value: 'mesh',
+              label: 'Mesh',
+              sort_order: 1,
+              metadata: null
+            },
+            {
+              id: 21,
+              value: 'cuero',
+              label: 'Cuero',
+              sort_order: 2,
+              metadata: null
+            }
+          ]
+        }
+      ],
+      variant: {
+        id: 123,
+        cantidad_maxima: 10,
+        images: ['https://example.com/variant1.png'],
+        definitions: {
+          color: 'beige',
+          material: 'Cuero'
+        }
+      }
+    };
+    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const swatches = element.querySelectorAll('.attribute-selector__swatch');
+    const textOptions = element.querySelectorAll('.attribute-selector__text-option');
+    const labels = Array.from(element.querySelectorAll('.attribute-selector__label')).map((label) =>
+      label.textContent?.trim()
+    );
+
+    expect(labels).toEqual(['Color:', 'Material:']);
+    expect(swatches).toHaveLength(2);
+    expect(textOptions).toHaveLength(2);
+    expect(swatches[0].classList.contains('attribute-selector__swatch--selected')).toBe(true);
+    expect(textOptions[1].classList.contains('attribute-selector__text-option--selected')).toBe(true);
+    expect((swatches[0] as HTMLElement).style.backgroundColor).not.toBe('');
+  });
+
+  it('hides the attributes block and its extra divider when no attributes are present', async () => {
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.querySelector('.product-detail__section--attributes')).toBeNull();
+    expect(element.querySelectorAll('.product-detail__divider')).toHaveLength(2);
+  });
+
+  it('keeps quantity at a minimum of one and increments locally', async () => {
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    fixture.componentInstance['selectedVariant'].set({
+      variant_id: 1,
+      cantidad_maxima: 10,
+      attributes: {}
+    });
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const decreaseButton = element.querySelector(
+      '[aria-label="Disminuir cantidad"]'
+    ) as HTMLButtonElement;
+    const increaseButton = element.querySelector(
+      '[aria-label="Aumentar cantidad"]'
+    ) as HTMLButtonElement;
+
+    decreaseButton.click();
+    fixture.detectChanges();
+
+    expect(element.querySelector('.quantity-selector__value')?.textContent?.trim()).toBe('1');
+
+    increaseButton.click();
+    increaseButton.click();
+    fixture.detectChanges();
+
+    expect(element.querySelector('.quantity-selector__value')?.textContent?.trim()).toBe('3');
+  });
+
+  it('toggles the full description state when overflow is available', async () => {
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    (fixture.componentInstance as any).descriptionHasOverflow.set(true);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const toggleButton = element.querySelector(
+      '.product-detail__description-toggle'
+    ) as HTMLButtonElement;
+
+    expect(toggleButton.textContent?.trim()).toBe('Mostrar más');
+
+    toggleButton.click();
+    fixture.detectChanges();
+
+    expect(
+      element
+        .querySelector('.product-detail__description-body')
+        ?.classList.contains('product-detail__description-body--expanded')
+    ).toBe(true);
+    expect(toggleButton.textContent?.trim()).toBe('Mostrar menos');
+  });
+
+  it('renders purchase actions without side effects', async () => {
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const buttons = Array.from(
+      fixture.nativeElement.querySelectorAll('app-button button')
+    ) as HTMLButtonElement[];
+
+    expect(buttons.map((button) => button.textContent?.trim())).toEqual([
+      'Agregar al carrito',
+      'Comprar'
+    ]);
+
+    buttons[0].click();
+    buttons[1].click();
+
+    expect(routerStub.navigate).not.toHaveBeenCalled();
+  });
+
+  it('calls CartService.addItem when variant is selected and Add to Cart is clicked', async () => {
+    const detailProduct: ProductDetail = {
+      ...mockProduct,
+      variant: {
+        id: 123,
+        cantidad_maxima: 5,
+        images: [],
+        definitions: {}
+      },
+      variants_map: [
+        {
+          variant_id: 123,
+          cantidad_maxima: 5,
+          attributes: {}
+        }
+      ]
+    };
+    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    // Select the variant
+    fixture.componentInstance['selectedVariant'].set(detailProduct.variants_map[0]);
+    fixture.componentInstance['quantity'].set(3);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const addToCartButton = Array.from(element.querySelectorAll('app-button button')).find(
+      (btn) => btn.textContent?.trim() === 'Agregar al carrito'
+    ) as HTMLButtonElement;
+
+    expect(addToCartButton).toBeDefined();
+    addToCartButton.click();
+    fixture.detectChanges();
+
+    expect(cartServiceStub.addItem).toHaveBeenCalledWith(123, 3);
+    expect(toastServiceStub.success).toHaveBeenCalledWith('Producto agregado al carrito');
+  });
+
+  it('shows error toast when CartService.addItem fails', async () => {
+    const detailProduct: ProductDetail = {
+      ...mockProduct,
+      variant: {
+        id: 123,
+        cantidad_maxima: 5,
+        images: [],
+        definitions: {}
+      },
+      variants_map: [
+        {
+          variant_id: 123,
+          cantidad_maxima: 5,
+          attributes: {}
+        }
+      ]
+    };
+    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    cartServiceStub.addItem.mockReturnValue(throwError(() => new Error('Failed to add')));
+
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    fixture.componentInstance['selectedVariant'].set(detailProduct.variants_map[0]);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const addToCartButton = Array.from(element.querySelectorAll('app-button button')).find(
+      (btn) => btn.textContent?.trim() === 'Agregar al carrito'
+    ) as HTMLButtonElement;
+
+    addToCartButton.click();
+    fixture.detectChanges();
+
+    expect(cartServiceStub.addItem).toHaveBeenCalled();
+    expect(toastServiceStub.danger).toHaveBeenCalledWith('No se pudo agregar el producto al carrito.');
+  });
+});

src/app/features/store/pages/product-detail-page/product-detail-page.component.ts

@@ -0,0 +1,328 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  computed,
+  effect,
+  inject,
+  signal,
+  viewChild,
+  PLATFORM_ID
+} from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { Subscription } from 'rxjs';
+
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { ToastService } from '../../../../core/services/toast.service';
+import { CartService } from '../../../../core/services/cart/cart.service';
+import {
+  ProductAttribute,
+  ProductAttributeOption,
+  ProductDetail,
+  ProductVariant,
+  ProductVariantMap
+} from '../../../../core/services/catalog/catalog.interface';
+import { ProductCarouselComponent } from '../../components/product-carousel/product-carousel.component';
+import { ButtonComponent } from '../../../../shared/components/button/button.component';
+import { ProductAttributeSelectorComponent } from '../../components/product-attribute-selector/product-attribute-selector.component';
+import { QuantitySelectorComponent } from '../../../../shared/components/quantity-selector/quantity-selector.component';
+
+@Component({
+  selector: 'app-product-detail-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    ProductCarouselComponent,
+    ButtonComponent,
+    ProductAttributeSelectorComponent,
+    QuantitySelectorComponent
+  ],
+  templateUrl: './product-detail-page.component.html',
+  styleUrl: './product-detail-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProductDetailPageComponent implements OnInit, OnDestroy {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly catalogService = inject(CatalogService);
+  private readonly toastService = inject(ToastService);
+  private readonly cartService = inject(CartService);
+  private readonly attributeSelector = viewChild(ProductAttributeSelectorComponent);
+  private readonly carouselHost = viewChild<ElementRef<HTMLElement>>('carouselHost');
+  private readonly descriptionBody = viewChild<ElementRef<HTMLElement>>('descriptionBody');
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly isBrowser = isPlatformBrowser(this.platformId);
+
+  private routeSub: Subscription | null = null;
+  private productSub: Subscription | null = null;
+  private carouselResizeObserver: ResizeObserver | null = null;
+  private observedCarouselPreview: HTMLElement | null = null;
+  private measurementTimer: ReturnType<typeof setTimeout> | null = null;
+
+  protected readonly product = signal<ProductDetail | null>(null);
+  protected readonly carouselImages = computed(() => {
+    const prod = this.product();
+    if (!prod) return [];
+    if (prod.variant?.images && prod.variant.images.length > 0) {
+      return prod.variant.images;
+    }
+    if (prod.images && prod.images.length > 0) {
+      return prod.images;
+    }
+    return [];
+  });
+  protected readonly loading = signal(false);
+  protected readonly variantLoading = signal(false);
+  protected readonly addingToCart = signal(false);
+  protected readonly error = signal<string | null>(null);
+  protected readonly selectedVariant = signal<ProductVariantMap | null>(null);
+  protected readonly quantity = signal(1);
+  protected readonly descriptionExpanded = signal(false);
+  protected readonly descriptionMaxHeight = signal(0);
+  protected readonly descriptionHasOverflow = signal(false);
+  protected readonly renderableAttributes = computed(() =>
+    (this.product()?.attributes ?? []).filter((attribute) => attribute.options.length > 0)
+  );
+  protected readonly hasRenderableAttributes = computed(
+    () => this.renderableAttributes().length > 0
+  );
+  protected readonly oldPrice = computed<string | null>(() => null);
+  protected readonly showDescriptionToggle = computed(
+    () => this.descriptionExpanded() || this.descriptionHasOverflow()
+  );
+
+  constructor() {
+    effect(() => {
+      this.carouselHost();
+      this.descriptionBody();
+      this.product();
+      this.descriptionExpanded();
+
+      if (this.isBrowser) {
+        queueMicrotask(() => {
+          this.bindCarouselResizeObserver();
+          this.refreshMeasurements();
+        });
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.routeSub = this.route.paramMap.subscribe((params) => {
+      const id = this.parseIntegerParam(params.get('id'));
+      if (id === null) {
+        this.error.set('ID de producto inválido');
+        return;
+      }
+
+      this.loadProduct(id);
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.routeSub?.unsubscribe();
+    this.productSub?.unsubscribe();
+    this.carouselResizeObserver?.disconnect();
+    this.clearMeasurementTimer();
+  }
+
+  private loadProduct(id: number): void {
+    this.loading.set(true);
+    this.error.set(null);
+    this.product.set(null);
+
+    this.productSub?.unsubscribe();
+    this.productSub = this.catalogService.getProducto(id).subscribe({
+      next: (prod) => {
+        this.product.set(prod);
+        const matchingVariant = prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null;
+        this.selectedVariant.set(matchingVariant);
+        this.quantity.set(1);
+        this.descriptionExpanded.set(false);
+        this.descriptionHasOverflow.set(false);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.error.set('No pudimos cargar los detalles del producto.');
+        this.loading.set(false);
+      }
+    });
+  }
+
+  private loadProductVariant(productId: number, variantId: number): void {
+    this.variantLoading.set(true);
+
+    this.productSub?.unsubscribe();
+    this.productSub = this.catalogService.getProducto(productId, variantId).subscribe({
+      next: (prod) => {
+        this.product.set(prod);
+        const matchingVariant = prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null;
+        this.selectedVariant.set(matchingVariant);
+        this.variantLoading.set(false);
+      },
+      error: (err: HttpErrorResponse) => {
+        const errorMessage = err.error?.message || 'No pudimos cargar la variante seleccionada.';
+        this.toastService.danger(errorMessage);
+        this.variantLoading.set(false);
+
+        this.product.update((currentProduct) => {
+          if (!currentProduct) return null;
+          const updatedVariantsMap = currentProduct.variants_map.map((v) => {
+            if (v.variant_id === variantId) {
+              return { ...v, cantidad_maxima: 0 };
+            }
+            return v;
+          });
+          return {
+            ...currentProduct,
+            variants_map: updatedVariantsMap
+          };
+        });
+
+        this.attributeSelector()?.reset();
+      }
+    });
+  }
+
+  protected goBack(): void {
+    this.router.navigate(['/']);
+  }
+
+  protected getFormattedPrice(priceStr: string | undefined): string {
+    if (!priceStr) return '$0';
+    const parsed = Number(priceStr);
+    const value = Number.isFinite(parsed) ? parsed : 0;
+    const rounded = Math.round(value);
+    const parts = rounded.toString().split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    return `$${parts.join(',')}`;
+  }
+
+  protected onVariantChange(variant: ProductVariantMap | null): void {
+    if (this.selectedVariant()?.variant_id === variant?.variant_id) {
+      return;
+    }
+
+    this.selectedVariant.set(variant);
+    if (variant && this.quantity() > variant.cantidad_maxima) {
+      this.quantity.set(Math.max(1, variant.cantidad_maxima));
+    }
+
+    const currentProduct = this.product();
+    if (variant && currentProduct && currentProduct.variant?.id !== variant.variant_id) {
+      this.loadProductVariant(currentProduct.id, variant.variant_id);
+    }
+  }
+
+
+
+  protected addToCart(): void {
+    const variant = this.selectedVariant();
+    if (!variant) {
+      this.toastService.danger('Por favor, selecciona una variante.');
+      return;
+    }
+
+    this.addingToCart.set(true);
+    this.cartService.addItem(variant.variant_id, this.quantity()).subscribe({
+      next: (res) => {
+        const msg = res.message || 'Producto agregado al carrito';
+        this.toastService.success(msg);
+        this.addingToCart.set(false);
+      },
+      error: (err: HttpErrorResponse) => {
+        const errorMessage = err.error?.message || 'No se pudo agregar el producto al carrito.';
+        this.toastService.danger(errorMessage);
+        this.addingToCart.set(false);
+      }
+    });
+  }
+
+  protected toggleDescription(): void {
+    this.descriptionExpanded.update((current) => !current);
+  }
+
+  private parseIntegerParam(value: string | null): number | null {
+    if (!value) {
+      return null;
+    }
+
+    const parsed = Number(value);
+    return Number.isInteger(parsed) ? parsed : null;
+  }
+
+  private bindCarouselResizeObserver(): void {
+    const previewElement = this.getCarouselPreviewElement();
+
+    if (!previewElement || previewElement === this.observedCarouselPreview) {
+      return;
+    }
+
+    this.carouselResizeObserver?.disconnect();
+    this.observedCarouselPreview = previewElement;
+
+    if (typeof ResizeObserver === 'undefined') {
+      this.updateDescriptionMaxHeight();
+      return;
+    }
+
+    this.carouselResizeObserver = new ResizeObserver(() => {
+      this.scheduleMeasurement();
+    });
+    this.carouselResizeObserver.observe(previewElement);
+    this.updateDescriptionMaxHeight();
+  }
+
+  private scheduleMeasurement(): void {
+    this.clearMeasurementTimer();
+    this.measurementTimer = setTimeout(() => {
+      this.measurementTimer = null;
+      this.refreshMeasurements();
+    }, 0);
+  }
+
+  private clearMeasurementTimer(): void {
+    if (this.measurementTimer) {
+      clearTimeout(this.measurementTimer);
+      this.measurementTimer = null;
+    }
+  }
+
+  private refreshMeasurements(): void {
+    this.updateDescriptionMaxHeight();
+    this.updateDescriptionOverflow();
+  }
+
+  private updateDescriptionMaxHeight(): void {
+    const previewElement = this.getCarouselPreviewElement();
+    const nextHeight = previewElement?.getBoundingClientRect().height ?? 0;
+
+    if (nextHeight > 0) {
+      this.descriptionMaxHeight.set(nextHeight);
+    }
+  }
+
+  private updateDescriptionOverflow(): void {
+    const descriptionElement = this.descriptionBody()?.nativeElement;
+
+    if (!descriptionElement || this.descriptionExpanded()) {
+      return;
+    }
+
+    this.descriptionHasOverflow.set(
+      descriptionElement.scrollHeight - descriptionElement.clientHeight > 1
+    );
+  }
+
+  private getCarouselPreviewElement(): HTMLElement | null {
+    return (
+      this.carouselHost()?.nativeElement.querySelector<HTMLElement>('.product-carousel__main') ??
+      null
+    );
+  }
+}

src/app/features/store/pages/store-home-page/store-home-page.component.html

@@ -1,21 +1,45 @@
-<section class="store-home">
+<section class="py-5">
-  <div class="store-home__inner">
+  <div class="container-xl px-3 px-md-4">
-    <div class="store-home__hero">
+    <app-store-section title="Productos">
-      <span class="store-home__eyebrow">Store Layout</span>
+      <div class="d-grid gap-4">
-      <h1>Tienda en construccion</h1>
+        @if (error()) {
-      <p class="store-home__lead">
+          <p class="alert text-center mb-0 store-home__alert-error">{{ error() }}</p>
-        Esta pagina placeholder deja visible el shell del store mientras se conectan categorias,
+        } @else if (loading() && !productCards().length) {
-        catalogo y acciones reales.
+          <p class="alert alert-light border text-center mb-0">Cargando productos...</p>
-      </p>
+        } @else if (!productCards().length) {
-    </div>
+          <p class="alert alert-light border text-center mb-0">No hay productos disponibles en este momento.</p>
+        } @else {
+          <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 g-4">
+            @for (product of productCards(); track product.id) {
+              <div class="col">
+                <app-product-card
+                  [title]="product.title"
+                  [originalPrice]="product.originalPrice"
+                  [discount]="product.discount"
+                  [transferPrice]="product.transferPrice"
+                  [imageUrl]="product.imageUrl"
+                  (buy)="onBuyProduct(product.id)"
+                />
+              </div>
+            }
+          </div>
+        }
 
-    <div class="store-home__highlights">
+        @if (loading() && productCards().length) {
-      @for (highlight of highlights; track highlight) {
+          <p class="alert alert-light border text-center mb-0 py-2">Actualizando productos...</p>
-        <article class="store-home__card">
+        }
-          <span class="store-home__card-index" aria-hidden="true">0{{ $index + 1 }}</span>
+
-          <p>{{ highlight }}</p>
+        @if (totalPages() > 1) {
-        </article>
+          <div class="d-flex justify-content-center">
-      }
+            <app-paginator
-    </div>
+              [page]="currentPage()"
+              [totalPages]="totalPages()"
+              [disabled]="loading()"
+              (pageChange)="onPageChange($event)"
+            />
+          </div>
+        }
+      </div>
+    </app-store-section>
   </div>
 </section>

src/app/features/store/pages/store-home-page/store-home-page.component.scss

@@ -2,95 +2,9 @@
   display: block;
 }
 
-.store-home {
+.store-home__alert-error {
-  padding: 3rem 0 4rem;
-}
-
-.store-home__inner {
-  width: min(100% - 3rem, 75rem);
-  margin: 0 auto;
-  display: grid;
-  gap: 1.5rem;
-}
-
-.store-home__hero {
-  padding: clamp(2rem, 4vw, 3rem);
-  border: 1px solid #e4e4e4;
-  border-radius: 1.5rem;
-  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
-  box-shadow: 0 1.2rem 2.2rem rgba(17, 17, 17, 0.06);
-}
-
-.store-home__eyebrow {
-  display: inline-block;
-  margin-bottom: 0.75rem;
-  font-size: 0.78rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: #666666;
-}
-
-h1 {
-  margin-bottom: 0.75rem;
-  font-size: clamp(2rem, 4vw, 3.25rem);
-  font-weight: 700;
-  letter-spacing: -0.05em;
-}
-
-.store-home__lead {
-  max-width: 42rem;
   margin: 0;
-  font-size: 1rem;
+  border-color: rgba(var(--tenant-danger-rgb, 220, 53, 69), 0.18);
-  line-height: 1.6;
+  background-color: rgba(var(--tenant-danger-rgb, 220, 53, 69), 0.08);
-  color: #4a4a4a;
+  color: var(--tenant-danger, #dc3545);
-}
-
-.store-home__highlights {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1rem;
-}
-
-.store-home__card {
-  display: grid;
-  gap: 0.9rem;
-  padding: 1.5rem;
-  border: 1px solid #e4e4e4;
-  border-radius: 1.25rem;
-  background-color: #ffffff;
-  box-shadow: 0 0.75rem 1.5rem rgba(17, 17, 17, 0.04);
-}
-
-.store-home__card-index {
-  font-size: 0.85rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  color: #707070;
-}
-
-.store-home__card p {
-  margin: 0;
-  line-height: 1.6;
-  color: #333333;
-}
-
-@media (max-width: 991.98px) {
-  .store-home__highlights {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 767.98px) {
-  .store-home {
-    padding: 2rem 0 3rem;
-  }
-
-  .store-home__inner {
-    width: min(100% - 1.5rem, 75rem);
-  }
-
-  .store-home__highlights {
-    grid-template-columns: minmax(0, 1fr);
-  }
 }

src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts

@@ -0,0 +1,239 @@
+import { TestBed } from '@angular/core/testing';
+import { Subject, of, throwError } from 'rxjs';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ApiPaginatedResponse } from '../../../../core/services/api-paginated-response.interface';
+import { Product } from '../../../../core/services/catalog/catalog.interface';
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { StoreHomePageComponent } from './store-home-page.component';
+
+function createPaginatedResponse(
+  products: Product[],
+  currentPage: number,
+  lastPage: number
+): ApiPaginatedResponse<Product[]> {
+  return {
+    data: products,
+    meta: {
+      current_page: currentPage,
+      from: products.length ? 1 : null,
+      last_page: lastPage,
+      links: [],
+      path: '/productos',
+      per_page: 12,
+      to: products.length || null,
+      total: products.length
+    },
+    links: {
+      first: '/productos?page=1',
+      last: `/productos?page=${lastPage}`,
+      prev: currentPage > 1 ? `/productos?page=${currentPage - 1}` : null,
+      next: currentPage < lastPage ? `/productos?page=${currentPage + 1}` : null
+    }
+  };
+}
+
+describe('StoreHomePageComponent', () => {
+  const pageOneProducts: Product[] = [
+    {
+      id: 1,
+      category_id: 10,
+      brand_id: null,
+      slug: 'auriculares-bluetooth',
+      nombre: 'Auriculares Bluetooth',
+      descripcion: 'Auriculares bluetooth de prueba',
+      precio: '24999',
+      category: 'Tecnología',
+      brand: null,
+      images: []
+    },
+    {
+      id: 2,
+      category_id: 11,
+      brand_id: null,
+      slug: 'teclado-mecanico',
+      nombre: 'Teclado Mecanico',
+      descripcion: 'Teclado mecánico de prueba',
+      precio: '18999',
+      category: 'Tecnología',
+      brand: null,
+      images: []
+    }
+  ];
+
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('loads page 1 on init, renders the products title and the fetched product cards', async () => {
+    const catalogServiceStub = {
+      getProductos: vi.fn().mockReturnValue(of(createPaginatedResponse(pageOneProducts, 1, 3)))
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [StoreHomePageComponent],
+      providers: [
+        {
+          provide: CatalogService,
+          useValue: catalogServiceStub
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(StoreHomePageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(catalogServiceStub.getProductos).toHaveBeenCalledWith({ page: 1 });
+    expect(element.querySelector('.store-section__title')?.textContent?.trim()).toBe('Productos');
+    expect(element.querySelectorAll('app-product-card')).toHaveLength(2);
+    expect(element.textContent).toContain('Auriculares Bluetooth');
+    expect(element.textContent).toContain('Teclado Mecanico');
+    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('1/3');
+  });
+
+  it('requests the next page when the paginator emits a page change', async () => {
+    const catalogServiceStub = {
+      getProductos: vi
+        .fn()
+        .mockReturnValueOnce(of(createPaginatedResponse(pageOneProducts, 1, 3)))
+        .mockReturnValueOnce(
+          of(
+            createPaginatedResponse(
+              [
+                {
+                  id: 3,
+                  category_id: 12,
+                  brand_id: null,
+                  slug: 'mouse-gamer',
+                  nombre: 'Mouse Gamer',
+                  descripcion: 'Mouse gamer de prueba',
+                  precio: '15999',
+                  category: 'Tecnología',
+                  brand: null,
+                  images: []
+                }
+              ],
+              2,
+              3
+            )
+          )
+        )
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [StoreHomePageComponent],
+      providers: [
+        {
+          provide: CatalogService,
+          useValue: catalogServiceStub
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(StoreHomePageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    (element.querySelector('[data-testid="paginator-next"]') as HTMLButtonElement).click();
+    fixture.detectChanges();
+
+    expect(catalogServiceStub.getProductos).toHaveBeenNthCalledWith(1, { page: 1 });
+    expect(catalogServiceStub.getProductos).toHaveBeenNthCalledWith(2, { page: 2 });
+    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('2/3');
+    expect(element.textContent).toContain('Mouse Gamer');
+  });
+
+  it('disables the paginator while a new page request is in flight', async () => {
+    const nextPageSubject = new Subject<ApiPaginatedResponse<Product[]>>();
+    const catalogServiceStub = {
+      getProductos: vi
+        .fn()
+        .mockReturnValueOnce(of(createPaginatedResponse(pageOneProducts, 1, 3)))
+        .mockReturnValueOnce(nextPageSubject.asObservable())
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [StoreHomePageComponent],
+      providers: [
+        {
+          provide: CatalogService,
+          useValue: catalogServiceStub
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(StoreHomePageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    (element.querySelector('[data-testid="paginator-next"]') as HTMLButtonElement).click();
+    fixture.detectChanges();
+
+    expect(
+      Array.from(element.querySelectorAll('app-paginator button')).every(
+        (button) => (button as HTMLButtonElement).disabled
+      )
+    ).toBe(true);
+    expect(element.textContent).toContain('Actualizando productos...');
+
+    nextPageSubject.next(createPaginatedResponse(pageOneProducts, 2, 3));
+    nextPageSubject.complete();
+    fixture.detectChanges();
+
+    expect(
+      Array.from(element.querySelectorAll('app-paginator button')).some(
+        (button) => !(button as HTMLButtonElement).disabled
+      )
+    ).toBe(true);
+  });
+
+  it('shows an empty-state message and hides the paginator when there are no products', async () => {
+    const catalogServiceStub = {
+      getProductos: vi.fn().mockReturnValue(of(createPaginatedResponse([], 1, 1)))
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [StoreHomePageComponent],
+      providers: [
+        {
+          provide: CatalogService,
+          useValue: catalogServiceStub
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(StoreHomePageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.textContent).toContain('No hay productos disponibles en este momento.');
+    expect(element.querySelector('app-paginator')).toBeNull();
+  });
+
+  it('shows an error message when the catalog request fails', async () => {
+    const catalogServiceStub = {
+      getProductos: vi.fn().mockReturnValue(throwError(() => new Error('boom')))
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [StoreHomePageComponent],
+      providers: [
+        {
+          provide: CatalogService,
+          useValue: catalogServiceStub
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(StoreHomePageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.textContent).toContain('No pudimos cargar los productos en este momento.');
+    expect(element.querySelectorAll('app-product-card')).toHaveLength(0);
+  });
+});

src/app/features/store/pages/store-home-page/store-home-page.component.ts

@@ -1,14 +1,114 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, computed, inject, signal } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { Product } from '../../../../core/services/catalog/catalog.interface';
+import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
+import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
+import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
+
+interface StoreHomeProductCardViewModel {
+  id: number;
+  title: string;
+  originalPrice: number;
+  discount: null;
+  transferPrice: null;
+  imageUrl: string | null;
+}
 
 @Component({
   selector: 'app-store-home-page',
+  imports: [StoreSectionComponent, ProductCardComponent, PaginatorComponent],
   templateUrl: './store-home-page.component.html',
-  styleUrl: './store-home-page.component.scss'
+  styleUrl: './store-home-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class StoreHomePageComponent {
+export class StoreHomePageComponent implements OnInit, OnDestroy {
-  protected readonly highlights = [
+  private readonly catalogService = inject(CatalogService);
-    'Header y footer listos para conectar con datos reales.',
+  private readonly router = inject(Router);
-    'Barra de categorias reservada para sumar dropdown despues.',
+
-    'Placeholder inicial para validar layout, espaciados y responsive.'
+  private activeRequestId = 0;
-  ];
+  private productsRequestSubscription: Subscription | null = null;
+
+  protected readonly currentPage = signal(1);
+  protected readonly products = signal<Product[]>([]);
+  protected readonly totalPages = signal(0);
+  protected readonly loading = signal(false);
+  protected readonly error = signal<string | null>(null);
+
+  protected readonly productCards = computed<StoreHomeProductCardViewModel[]>(() =>
+    this.products().map((product) => ({
+      id: product.id,
+      title: product.nombre,
+      originalPrice: this.parseProductPrice(product.precio),
+      discount: null,
+      transferPrice: null,
+      imageUrl: product.images?.[0] ?? null
+    }))
+  );
+
+  ngOnInit(): void {
+    this.loadProducts(1);
+  }
+
+  ngOnDestroy(): void {
+    this.productsRequestSubscription?.unsubscribe();
+  }
+
+  protected onPageChange(page: number): void {
+    if (page === this.currentPage() || page < 1) {
+      return;
+    }
+
+    this.loadProducts(page);
+  }
+
+  protected onBuyProduct(productId: number): void {
+    this.router.navigate(['/producto', productId]);
+  }
+
+  private loadProducts(page: number): void {
+    this.activeRequestId += 1;
+    const requestId = this.activeRequestId;
+
+    this.productsRequestSubscription?.unsubscribe();
+    this.loading.set(true);
+    this.error.set(null);
+
+    this.productsRequestSubscription = this.catalogService.getProductos({ page }).subscribe({
+      next: (response) => {
+        if (requestId !== this.activeRequestId) {
+          return;
+        }
+
+        this.products.set(response.data ?? []);
+        this.currentPage.set(response.meta.current_page);
+        this.totalPages.set(response.meta.last_page);
+      },
+      error: () => {
+        if (requestId !== this.activeRequestId) {
+          return;
+        }
+
+        this.products.set([]);
+        this.totalPages.set(0);
+        this.loading.set(false);
+        this.error.set('No pudimos cargar los productos en este momento.');
+      },
+      complete: () => {
+        if (requestId !== this.activeRequestId) {
+          return;
+        }
+
+        this.loading.set(false);
+      }
+    });
+  }
+
+  private parseProductPrice(price: string): number {
+    const parsedPrice = Number(price);
+
+    return Number.isFinite(parsedPrice) ? parsedPrice : 0;
+  }
 }

src/app/features/store/store.routes.ts

@@ -11,6 +11,13 @@ export const routes: Routes = [
       {
         path: '',
         component: StoreHomePageComponent
+      },
+      {
+        path: 'producto/:id',
+        loadComponent: () =>
+          import('./pages/product-detail-page/product-detail-page.component').then(
+            (m) => m.ProductDetailPageComponent
+          )
       }
     ]
   }

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

@@ -1,21 +1,28 @@
-@use "sass:color";
-
-@import "../../../../_theme";
-
 :host {
   display: inline-block;
 }
 
+:host(.product-detail__cta) {
+  display: block;
+  width: 100%;
+}
+
 .btn {
   min-height: 40px;
   font-weight: 700;
-  font-size:15px;
+  font-size: 15px;
-  min-width:216px;
+  min-width: 216px;
+}
+
+:host(.product-detail__cta) .btn {
+  width: 100%;
 }
 
 .btn-primary,
 .btn-secondary,
 .btn-danger {
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: transparent;
   --bs-btn-color: #fff;
   --bs-btn-hover-color: #fff;
   --bs-btn-active-color: #fff;
@@ -23,44 +30,68 @@
 
 .btn-outline-primary,
 .btn-outline-danger {
+  --bs-btn-bg: transparent;
   --bs-btn-hover-color: #fff;
   --bs-btn-active-color: #fff;
 }
 
 .btn-primary {
-  $primary-disabled-bg: color.mix(white, $primary, $weight: $primary-button-disabled-tint-amount);
+  --bs-btn-bg: var(--tenant-primary);
-
+  --bs-btn-border-color: var(--tenant-primary);
-  --bs-btn-hover-bg: #{color.mix(black, $primary, $weight: $primary-button-hover-shade-amount)};
+  --bs-btn-hover-bg: color-mix(in srgb, black 40%, var(--tenant-primary));
-  --bs-btn-hover-border-color: #{color.mix(black, $primary, $weight: $primary-button-hover-shade-amount)};
+  --bs-btn-hover-border-color: color-mix(in srgb, black 40%, var(--tenant-primary));
+  --bs-btn-active-bg: color-mix(in srgb, black 44%, var(--tenant-primary));
+  --bs-btn-active-border-color: color-mix(in srgb, black 44%, var(--tenant-primary));
   --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #{$primary-disabled-bg};
+  --bs-btn-disabled-bg: color-mix(in srgb, white 50%, var(--tenant-primary));
-  --bs-btn-disabled-border-color: #{$primary-disabled-bg};
+  --bs-btn-disabled-border-color: color-mix(in srgb, white 50%, var(--tenant-primary));
   --bs-btn-disabled-opacity: 1;
 }
 
 .btn-secondary {
-  $secondary-hover-active-bg: color.mix(black, $secondary, $weight: $secondary-button-hover-active-shade-amount);
+  --bs-btn-bg: var(--tenant-secondary);
-  $secondary-disabled-bg: color.change($secondary, $alpha: $secondary-button-disabled-alpha);
+  --bs-btn-border-color: var(--tenant-secondary);
-
+  --bs-btn-hover-bg: color-mix(in srgb, black 26%, var(--tenant-secondary));
-  --bs-btn-hover-bg: #{$secondary-hover-active-bg};
+  --bs-btn-hover-border-color: color-mix(in srgb, black 26%, var(--tenant-secondary));
-  --bs-btn-hover-border-color: #{$secondary-hover-active-bg};
+  --bs-btn-active-bg: color-mix(in srgb, black 30%, var(--tenant-secondary));
-  --bs-btn-active-bg: #{$secondary-hover-active-bg};
+  --bs-btn-active-border-color: color-mix(in srgb, black 30%, var(--tenant-secondary));
-  --bs-btn-active-border-color: #{$secondary-hover-active-bg};
   --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #{$secondary-disabled-bg};
+  --bs-btn-disabled-bg: color-mix(in srgb, transparent 50%, var(--tenant-secondary));
-  --bs-btn-disabled-border-color: #{$secondary-disabled-bg};
+  --bs-btn-disabled-border-color: color-mix(in srgb, transparent 50%, var(--tenant-secondary));
   --bs-btn-disabled-opacity: 1;
 }
 
 .btn-danger {
-  $danger-disabled-bg: color.change($danger, $alpha: $danger-button-disabled-alpha);
+  --bs-btn-bg: var(--tenant-danger);
-
+  --bs-btn-border-color: var(--tenant-danger);
-  --bs-btn-hover-bg: #{$danger-button-hover-active-bg};
+  --bs-btn-hover-bg: color-mix(in srgb, black 38%, var(--tenant-danger));
-  --bs-btn-hover-border-color: #{$danger-button-hover-active-bg};
+  --bs-btn-hover-border-color: color-mix(in srgb, black 38%, var(--tenant-danger));
-  --bs-btn-active-bg: #{$danger-button-hover-active-bg};
+  --bs-btn-active-bg: color-mix(in srgb, black 44%, var(--tenant-danger));
-  --bs-btn-active-border-color: #{$danger-button-hover-active-bg};
+  --bs-btn-active-border-color: color-mix(in srgb, black 44%, var(--tenant-danger));
   --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #{$danger-disabled-bg};
+  --bs-btn-disabled-bg: color-mix(in srgb, transparent 50%, var(--tenant-danger));
-  --bs-btn-disabled-border-color: #{$danger-disabled-bg};
+  --bs-btn-disabled-border-color: color-mix(in srgb, transparent 50%, var(--tenant-danger));
   --bs-btn-disabled-opacity: 1;
 }
+
+.btn-outline-primary {
+  --bs-btn-color: var(--tenant-primary);
+  --bs-btn-border-color: var(--tenant-primary);
+  --bs-btn-hover-bg: var(--tenant-primary);
+  --bs-btn-hover-border-color: var(--tenant-primary);
+  --bs-btn-active-bg: color-mix(in srgb, black 12%, var(--tenant-primary));
+  --bs-btn-active-border-color: color-mix(in srgb, black 12%, var(--tenant-primary));
+  --bs-btn-disabled-color: color-mix(in srgb, transparent 35%, var(--tenant-primary));
+  --bs-btn-disabled-border-color: color-mix(in srgb, transparent 35%, var(--tenant-primary));
+}
+
+.btn-outline-danger {
+  --bs-btn-color: var(--tenant-danger);
+  --bs-btn-border-color: var(--tenant-danger);
+  --bs-btn-hover-bg: var(--tenant-danger);
+  --bs-btn-hover-border-color: var(--tenant-danger);
+  --bs-btn-active-bg: color-mix(in srgb, black 12%, var(--tenant-danger));
+  --bs-btn-active-border-color: color-mix(in srgb, black 12%, var(--tenant-danger));
+  --bs-btn-disabled-color: color-mix(in srgb, transparent 35%, var(--tenant-danger));
+  --bs-btn-disabled-border-color: color-mix(in srgb, transparent 35%, var(--tenant-danger));
+}

src/app/shared/components/cart-icon/cart-icon.component.html

@@ -0,0 +1,13 @@
+<button
+  type="button"
+  [disabled]="disabled()"
+  [attr.aria-label]="ariaLabel()"
+  class="cart-icon"
+>
+  <div class="cart-icon__container">
+    <i class="fa-solid fa-cart-shopping cart-icon__glyph" aria-hidden="true"></i>
+    @if (hasQuantity()) {
+      <span class="cart-icon__badge" data-testid="cart-badge">{{ quantity() }}</span>
+    }
+  </div>
+</button>

src/app/shared/components/cart-icon/cart-icon.component.scss

@@ -0,0 +1,79 @@
+:host {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.cart-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 4px;
+  margin: 0;
+  color: #666666;
+  cursor: pointer;
+  outline: none;
+  transition: color 0.15s ease-in-out, transform 0.1s ease-in-out;
+  border-radius: 4px;
+
+  // Active state subtle scale down
+  &:active:not(:disabled) {
+    transform: scale(0.92);
+  }
+
+  // Focus ring for accessibility
+  &:focus-visible {
+    outline: 2px solid var(--tenant-primary);
+    outline-offset: 2px;
+  }
+
+  // Disabled state
+  &:disabled {
+    color: #A0A0A0;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// Hover/Active/Focus colors (non-disabled)
+.cart-icon:hover:not(:disabled),
+.cart-icon:focus-visible:not(:disabled),
+.cart-icon.hover-preview:not(:disabled),
+:host(.hover-preview) .cart-icon:not(:disabled) {
+  color: var(--tenant-primary);
+}
+
+.cart-icon__container {
+  position: relative;
+  display: inline-flex;
+}
+
+.cart-icon__glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 23px;
+  height: 23px;
+  font-size: 23px;
+  line-height: 1;
+}
+
+.cart-icon__badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background-color: var(--tenant-primary);
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  line-height: 1;
+  box-sizing: border-box;
+}

src/app/shared/components/cart-icon/cart-icon.component.spec.ts

@@ -0,0 +1,60 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { CartIconComponent } from './cart-icon.component';
+
+describe('CartIconComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CartIconComponent]
+    }).compileComponents();
+  });
+
+  function setup(quantity?: number | null, disabled = false) {
+    const fixture = TestBed.createComponent(CartIconComponent);
+    if (quantity !== undefined) {
+      fixture.componentRef.setInput('quantity', quantity);
+    }
+    fixture.componentRef.setInput('disabled', disabled);
+    fixture.detectChanges();
+
+    return {
+      fixture,
+      element: fixture.nativeElement as HTMLElement
+    };
+  }
+
+  it('renders the cart shopping icon', () => {
+    const { element } = setup();
+    expect(element.querySelector('.fa-cart-shopping')).not.toBeNull();
+  });
+
+  it('does not render the badge when quantity is undefined', () => {
+    const { element } = setup();
+    expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
+  });
+
+  it('does not render the badge when quantity is 0', () => {
+    const { element } = setup(0);
+    expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
+  });
+
+  it('renders the badge with correct quantity when positive', () => {
+    const { element } = setup(3);
+    const badge = element.querySelector('[data-testid="cart-badge"]');
+    expect(badge).not.toBeNull();
+    expect(badge?.textContent?.trim()).toBe('3');
+  });
+
+  it('disables the button when disabled is true', () => {
+    const { element } = setup(undefined, true);
+    const button = element.querySelector('button');
+    expect(button?.disabled).toBe(true);
+  });
+
+  it('enables the button when disabled is false', () => {
+    const { element } = setup(undefined, false);
+    const button = element.querySelector('button');
+    expect(button?.disabled).toBe(false);
+  });
+});

src/app/shared/components/cart-icon/cart-icon.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+@Component({
+  selector: 'app-cart-icon',
+  imports: [],
+  templateUrl: './cart-icon.component.html',
+  styleUrl: './cart-icon.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CartIconComponent {
+  readonly quantity = input<number | null | undefined>(undefined);
+  readonly disabled = input(false);
+  readonly ariaLabel = input<string>('Carrito de compras');
+
+  protected readonly hasQuantity = computed(() => {
+    const q = this.quantity();
+    return q !== null && q !== undefined && q > 0;
+  });
+}

src/app/shared/components/cart-item/cart-item.component.html

@@ -0,0 +1,53 @@
+<article class="w-100 rounded-0 cart-item">
+  <div class="position-relative overflow-hidden cart-item-media">
+    @if (discountPercentage() && discountPercentage()! > 0) {
+      <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ discountPercentage() }}%</span>
+    }
+
+    @if (imageUrl()) {
+      <img class="w-100 h-100 object-fit-cover d-block" [src]="imageUrl()" [alt]="product()" />
+    } @else {
+      <div class="w-100 h-100 cart-item-placeholder" aria-hidden="true"></div>
+    }
+  </div>
+
+  <div class="d-grid min-w-0 cart-item-content">
+    <div class="d-grid align-items-start cart-item-top-row">
+      <h3 class="m-0 text-uppercase fw-normal cart-item-product">{{ product() }}</h3>
+
+      <div class="text-nowrap cart-item-prices">
+        @if (formattedOriginalPrice(); as originalPrice) {
+          <span class="text-decoration-line-through fw-light cart-item-original-price">{{ originalPrice }}</span>
+        }
+
+        <span class="fw-normal cart-item-discounted-price">{{ formattedDiscountedPrice() }}</span>
+      </div>
+    </div>
+
+    <div class="d-grid cart-item-attributes">
+      @for (attribute of attributes(); track attribute.label + attribute.value) {
+        <div class="cart-item-attribute">
+          <span class="fw-normal cart-item-attribute-label">{{ attribute.label }}: </span>
+          <span class="fw-bold">{{ attribute.value }}</span>
+        </div>
+      }
+    </div>
+
+    <div class="d-flex justify-content-end align-items-center mt-auto cart-item-actions">
+      <app-quantity-selector
+        size="small"
+        [quantity]="quantity()"
+        (quantityChange)="onQuantityChange($event)"
+        (increase)="onIncrease()"
+        (decrease)="onDecrease()"
+      />
+      <app-icon-button
+        variant="trash"
+        class="cart-item-remove-btn"
+        (click)="onRemove()"
+      />
+    </div>
+  </div>
+</article>
+
+

src/app/shared/components/cart-item/cart-item.component.scss

@@ -0,0 +1,108 @@
+:host {
+  display: block;
+  --item-media-width: 64px;
+  --item-media-height: 72px;
+}
+
+@media (max-width: 420px) {
+  :host {
+    --item-media-width: 56px;
+    --item-media-height: 64px;
+  }
+}
+
+.cart-item {
+  display: grid;
+  grid-template-columns: var(--item-media-width) minmax(0, 1fr);
+  gap: 0.75rem;
+  padding: 10px 12px;
+  background-color: #f5f5f5;
+}
+
+.cart-item-media {
+  width: var(--item-media-width);
+  height: var(--item-media-height);
+  border-radius: 6px;
+  background-color: #ffffff;
+  border: 1px solid #eaeaea;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.cart-item-discount-badge {
+  padding: 2px 5px;
+  border-bottom-right-radius: 4px;
+  background-color: #6173ff;
+  color: #ffffff;
+  font-size: 8px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.cart-item-placeholder {
+  background: linear-gradient(135deg, #d2d2d2, #ececec);
+}
+
+.cart-item-content {
+  gap: 0.5rem;
+}
+
+.cart-item-top-row {
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+}
+
+.cart-item-product {
+  color: #666666;
+  font-size: 12px;
+  line-height: 1.25;
+  font-weight: 325;
+}
+
+.cart-item-prices {
+  display: grid;
+  justify-items: end;
+  line-height: 1.1;
+}
+
+.cart-item-original-price {
+  color: #a0a0a0;
+  font-size: 10px;
+  font-weight: 325;
+}
+
+.cart-item-discounted-price {
+  color: #a0a0a0;
+  font-size: 13px;
+  font-weight: 425;
+}
+
+.cart-item-attributes {
+  gap: 0.125rem;
+}
+
+.cart-item-attribute {
+  color: #666666;
+  font-size: 11px;
+  line-height: 1.2;
+}
+
+.cart-item-attribute-label {
+  font-weight: 325;
+}
+
+.cart-item-actions {
+  gap: 0.125rem;
+}
+
+
+
+
+.cart-item-remove-btn {
+  margin-left: 0.35rem;
+}

src/app/shared/components/cart-item/cart-item.component.ts

@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
+import { IconButtonComponent } from '../icon-button/icon-button.component';
+
+export interface CartItemAttribute {
+  label: string;
+  value: string;
+}
+
+@Component({
+  selector: 'app-cart-item',
+  standalone: true,
+  imports: [QuantitySelectorComponent, IconButtonComponent],
+  templateUrl: './cart-item.component.html',
+  styleUrl: './cart-item.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CartItemComponent {
+  readonly imageUrl = input<string | null>(null);
+  readonly product = input<string>('');
+  readonly originalPrice = input<number | null>(null);
+  readonly discountedPrice = input<number>(0);
+  readonly discountPercentage = input<number | null>(null);
+  readonly attributes = input<CartItemAttribute[]>([]);
+  readonly quantity = input<number>(1);
+
+  readonly quantityChange = output<number>();
+  readonly remove = output<void>();
+  readonly increase = output<void>();
+  readonly decrease = output<void>();
+
+  protected onQuantityChange(newQuantity: number): void {
+    this.quantityChange.emit(newQuantity);
+  }
+
+  protected onRemove(): void {
+    this.remove.emit();
+  }
+
+  protected onIncrease(): void {
+    this.increase.emit();
+  }
+
+  protected onDecrease(): void {
+    this.decrease.emit();
+  }
+
+  protected readonly formattedOriginalPrice = computed(() => {
+    const price = this.originalPrice();
+    return price === null ? null : this.formatCurrency(price);
+  });
+
+  protected readonly formattedDiscountedPrice = computed(() => this.formatCurrency(this.discountedPrice()));
+
+  private formatCurrency(value: number): string {
+    const rounded = Math.round(value);
+    const parts = rounded.toString().split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    return `$ ${parts.join(',')}`;
+  }
+}

src/app/shared/components/cart/cart.component.html

@@ -0,0 +1,50 @@
+<section class="d-flex flex-column h-100 overflow-hidden text-secondary" [style.background-color]="backgroundColor()">
+  <header class="d-flex align-items-center justify-content-between bg-transparent cart-header">
+    <h2 class="m-0 text-uppercase fw-bold cart-title">{{ title() }}</h2>
+
+    @if (showClose()) {
+      <button class="btn btn-link p-0 border-0 d-inline-flex align-items-center justify-content-center cart-close-btn" type="button" aria-label="Cerrar carrito" (click)="closed.emit()">
+        <i class="fa-solid fa-xmark"></i>
+      </button>
+    }
+  </header>
+
+  <div class="d-grid gap-2 flex-grow-1 overflow-y-auto cart-items-container">
+    @for (item of items(); track item.product + item.discountedPrice + resetKey(); let idx = $index) {
+      <app-cart-item
+        [imageUrl]="item.imageUrl"
+        [product]="item.product"
+        [originalPrice]="item.originalPrice"
+        [discountedPrice]="item.discountedPrice"
+        [discountPercentage]="item.discountPercentage"
+        [attributes]="item.attributes"
+        [quantity]="item.quantity"
+        (quantityChange)="onItemQuantityChange(idx, $event)"
+        (remove)="onItemRemove(idx)"
+      />
+    }
+  </div>
+
+  <footer class="d-grid gap-1 bg-transparent cart-footer">
+    <div class="d-flex align-items-baseline justify-content-between gap-3">
+      <span class="cart-summary-text-muted">Subtotal:</span>
+      <span class="cart-summary-text-muted-bold">{{ formattedSubtotal() }}</span>
+    </div>
+
+    <div class="d-flex align-items-baseline justify-content-between gap-3">
+      <span class="cart-summary-text-muted">Descuento:</span>
+      <span class="cart-summary-text-muted-bold">{{ formattedDiscount() }}</span>
+    </div>
+
+    <div class="d-flex align-items-baseline justify-content-between gap-3 mt-1">
+      <span class="cart-total-text">TOTAL:</span>
+      <span class="cart-total-text">{{ formattedTotal() }}</span>
+    </div>
+
+    <div class="cart-actions mt-3">
+      <ng-content />
+    </div>
+  </footer>
+</section>
+
+

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

@@ -0,0 +1,65 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.cart-header {
+  padding: 12px 8px 0 24px;
+}
+
+.cart-title {
+  color: #a0a0a0;
+  font-size: 13px;
+  letter-spacing: 0.04em;
+}
+
+.cart-close-btn {
+  width: 24px;
+  height: 24px;
+  font-size: 14px;
+  color: #a0a0a0;
+}
+
+.cart-items-container {
+  min-height: 0;
+  padding: 0 0 0 24px;
+  scrollbar-color: #d5d5d5 transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background-color: #d5d5d5;
+  }
+}
+
+.cart-footer {
+  padding: 8px 22px 14px 24px;
+}
+
+.cart-summary-text-muted {
+  color: #a0a0a0;
+  font-size: 13px;
+  font-weight: 325;
+}
+
+.cart-summary-text-muted-bold {
+  color: #a0a0a0;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.cart-total-text {
+  color: #666666;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.cart-actions {
+  display: flex;
+  gap: 12px;
+}

src/app/shared/components/cart/cart.component.spec.ts

@@ -0,0 +1,144 @@
+import '@angular/compiler';
+import { signal } from '@angular/core';
+import { TestBed, getTestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import {
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing';
+import { of } from 'rxjs';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
+import { CartService } from '../../../core/services/cart/cart.service';
+import { ModalService } from '../../../core/services/modal.service';
+import { ToastService } from '../../../core/services/toast.service';
+import { CartComponent } from './cart.component';
+
+describe('CartComponent', () => {
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(
+        BrowserTestingModule,
+        platformBrowserTesting()
+      );
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  it('opens a confirm delete modal before removing an item', async () => {
+    const removeItem = vi.fn().mockReturnValue(of({ message: 'Producto eliminado.' }));
+    const openConfirmDelete = vi.fn().mockReturnValue(of(true));
+
+    await TestBed.configureTestingModule({
+      imports: [CartComponent],
+      providers: [
+        {
+          provide: CartService,
+          useValue: {
+            cart: signal(null).asReadonly(),
+            updateItemQuantity: vi.fn(),
+            removeItem
+          }
+        },
+        {
+          provide: ModalService,
+          useValue: {
+            openConfirmDelete
+          }
+        },
+        {
+          provide: ToastService,
+          useValue: {
+            success: vi.fn(),
+            info: vi.fn(),
+            danger: vi.fn()
+          }
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(CartComponent);
+    fixture.componentRef.setInput('items', [
+      {
+        productVariantId: 10,
+        imageUrl: null,
+        product: 'Producto de prueba',
+        originalPrice: null,
+        discountedPrice: 1000,
+        discountPercentage: null,
+        attributes: [],
+        quantity: 1
+      }
+    ]);
+    fixture.detectChanges();
+
+    fixture.debugElement.query(By.css('app-cart-item')).triggerEventHandler('remove');
+
+    expect(openConfirmDelete).toHaveBeenCalledWith({
+      title: 'Eliminar producto',
+      content:
+        'Se eliminara "Producto de prueba" del carrito. Esta accion no se puede deshacer.',
+      confirmLabel: 'Eliminar',
+      cancelLabel: 'Cancelar'
+    });
+    expect(removeItem).toHaveBeenCalledWith(10);
+  });
+
+  it('does not remove the item when the delete confirmation is cancelled', async () => {
+    const removeItem = vi.fn().mockReturnValue(of({}));
+    const openConfirmDelete = vi.fn().mockReturnValue(of(false));
+
+    await TestBed.configureTestingModule({
+      imports: [CartComponent],
+      providers: [
+        {
+          provide: CartService,
+          useValue: {
+            cart: signal(null).asReadonly(),
+            updateItemQuantity: vi.fn(),
+            removeItem
+          }
+        },
+        {
+          provide: ModalService,
+          useValue: {
+            openConfirmDelete
+          }
+        },
+        {
+          provide: ToastService,
+          useValue: {
+            success: vi.fn(),
+            info: vi.fn(),
+            danger: vi.fn()
+          }
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(CartComponent);
+    fixture.componentRef.setInput('items', [
+      {
+        productVariantId: 10,
+        imageUrl: null,
+        product: 'Producto de prueba',
+        originalPrice: null,
+        discountedPrice: 1000,
+        discountPercentage: null,
+        attributes: [],
+        quantity: 1
+      }
+    ]);
+    fixture.detectChanges();
+
+    fixture.debugElement.query(By.css('app-cart-item')).triggerEventHandler('remove');
+
+    expect(openConfirmDelete).toHaveBeenCalled();
+    expect(removeItem).not.toHaveBeenCalled();
+  });
+});

src/app/shared/components/cart/cart.component.ts

@@ -0,0 +1,161 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, output, signal } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Subject, EMPTY } from 'rxjs';
+import { catchError, debounceTime, groupBy, mergeMap, switchMap, tap } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CartItemAttribute, CartItemComponent } from '../cart-item/cart-item.component';
+import { ModalService } from '../../../core/services/modal.service';
+import { CartService } from '../../../core/services/cart/cart.service';
+import { ToastService } from '../../../core/services/toast.service';
+
+export interface CartItemMock {
+  productVariantId?: number;
+  imageUrl: string | null;
+  product: string;
+  originalPrice: number | null;
+  discountedPrice: number;
+  discountPercentage: number | null;
+  attributes: CartItemAttribute[];
+  quantity: number;
+}
+
+@Component({
+  selector: 'app-cart',
+  standalone: true,
+  imports: [CartItemComponent],
+  templateUrl: './cart.component.html',
+  styleUrl: './cart.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CartComponent {
+  private readonly cartService = inject(CartService);
+  private readonly modalService = inject(ModalService);
+  private readonly toastService = inject(ToastService);
+  private readonly quantityUpdates$ = new Subject<{ productVariantId: number; quantity: number }>();
+
+  readonly title = input<string>('CARRITO');
+  readonly showClose = input<boolean>(false);
+  readonly items = input<CartItemMock[]>([]);
+  readonly subtotal = input<number>(0);
+  readonly discount = input<number>(0);
+  readonly total = input<number>(0);
+  readonly backgroundColor = input<string>('#ffffff');
+
+  readonly closed = output<void>();
+
+  protected readonly resetKey = signal(0);
+
+  constructor() {
+    this.quantityUpdates$.pipe(
+      groupBy(update => update.productVariantId),
+      mergeMap(group$ => group$.pipe(
+        debounceTime(1000),
+        switchMap(update => this.cartService.updateItemQuantity(update.productVariantId, update.quantity).pipe(
+          tap({
+            next: (res) => {
+              const msg = res.message || 'Cantidad de producto actualizada.';
+              this.toastService.success(msg);
+            },
+            error: (err: HttpErrorResponse) => {
+              console.error('Error updating cart quantity', err);
+              const msg = err.error?.message || 'Error al actualizar la cantidad del producto.';
+              this.toastService.danger(msg);
+              this.resetKey.update(k => k + 1);
+            }
+          }),
+          catchError(() => EMPTY)
+        ))
+      )),
+      takeUntilDestroyed()
+    ).subscribe();
+  }
+
+  protected onItemQuantityChange(index: number, newQuantity: number): void {
+    const mockItem = this.items()[index];
+    const productVariantId = mockItem?.productVariantId;
+    if (productVariantId) {
+      this.quantityUpdates$.next({
+        productVariantId,
+        quantity: newQuantity
+      });
+    } else {
+      const item = this.cartService.cart()?.items[index];
+      if (item) {
+        this.quantityUpdates$.next({
+          productVariantId: item.product_variant_id,
+          quantity: newQuantity
+        });
+      }
+    }
+  }
+
+  protected onItemRemove(index: number): void {
+    const target = this.resolveRemoveTarget(index);
+
+    if (!target) {
+      return;
+    }
+
+    this.modalService.openConfirmDelete({
+      title: 'Eliminar producto',
+      content: `Se eliminara "${target.productName}" del carrito. Esta accion no se puede deshacer.`,
+      confirmLabel: 'Eliminar',
+      cancelLabel: 'Cancelar'
+    }).subscribe((confirmed) => {
+      if (confirmed) {
+        this.removeItem(target.productVariantId);
+      }
+    });
+  }
+
+  protected readonly formattedSubtotal = computed(() => this.formatCurrency(this.subtotal()));
+  protected readonly formattedDiscount = computed(() => this.formatCurrency(this.discount()));
+  protected readonly formattedTotal = computed(() => this.formatCurrency(this.total()));
+
+  private formatCurrency(value: number): string {
+    const rounded = Math.round(value);
+    const parts = rounded.toString().split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    return `$ ${parts.join(',')}`;
+  }
+
+  private resolveRemoveTarget(
+    index: number
+  ): { productVariantId: number; productName: string } | null {
+    const mockItem = this.items()[index];
+    const productVariantId = mockItem?.productVariantId;
+
+    if (productVariantId) {
+      return {
+        productVariantId,
+        productName: mockItem.product
+      };
+    }
+
+    const item = this.cartService.cart()?.items[index];
+
+    if (!item) {
+      return null;
+    }
+
+    return {
+      productVariantId: item.product_variant_id,
+      productName: item.product?.nombre ?? 'este producto'
+    };
+  }
+
+  private removeItem(productVariantId: number): void {
+    this.cartService.removeItem(productVariantId).subscribe({
+      next: (res) => {
+        const msg = res.message || 'Producto eliminado del carrito.';
+        this.toastService.info(msg);
+      },
+      error: (err: HttpErrorResponse) => {
+        console.error('Error removing item from cart', err);
+        const msg = err.error?.message || 'Error al eliminar el producto del carrito.';
+        this.toastService.danger(msg);
+      }
+    });
+  }
+}
+

src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.html

@@ -0,0 +1,12 @@
+<div class="confirm-modal">
+  <p class="confirm-modal__content">{{ data.content }}</p>
+
+  <div class="confirm-modal__actions">
+    <app-button variant="danger-secondary" (click)="cancel()">
+      {{ data.cancelLabel }}
+    </app-button>
+    <app-button variant="danger" (click)="confirm()">
+      {{ data.confirmLabel }}
+    </app-button>
+  </div>
+</div>

src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.scss

@@ -0,0 +1,19 @@
+.confirm-modal {
+  display: grid;
+  gap: 1.5rem;
+  justify-items: center;
+  text-align: center;
+}
+
+.confirm-modal__content {
+  margin: 0;
+  color: #666666;
+  line-height: 1.5;
+}
+
+.confirm-modal__actions {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}

src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.spec.ts

@@ -0,0 +1,96 @@
+import '@angular/compiler';
+import { TestBed, getTestBed } from '@angular/core/testing';
+import {
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
+import {
+  ConfirmModalData,
+  MODAL_DATA,
+  ModalRef
+} from '../../../core/services/modal.service';
+import { ConfirmDeleteModalComponent } from './confirm-delete-modal.component';
+
+describe('ConfirmDeleteModalComponent', () => {
+  const data: ConfirmModalData = {
+    content: 'Se eliminara el elemento seleccionado.',
+    confirmLabel: 'Eliminar',
+    cancelLabel: 'Cancelar'
+  };
+
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(
+        BrowserTestingModule,
+        platformBrowserTesting()
+      );
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  it('renders the configured content and uses danger for the confirm action', async () => {
+    await TestBed.configureTestingModule({
+      imports: [ConfirmDeleteModalComponent],
+      providers: [
+        {
+          provide: MODAL_DATA,
+          useValue: data
+        },
+        {
+          provide: ModalRef,
+          useValue: {
+            close: vi.fn()
+          }
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ConfirmDeleteModalComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const buttons = element.querySelectorAll('button');
+
+    expect(element.textContent).toContain(data.content);
+    expect(element.textContent).toContain(data.confirmLabel);
+    expect(buttons[1].className).toContain('btn-danger');
+  });
+
+  it('closes with false on cancel and true on confirm', async () => {
+    const closeSpy = vi.fn();
+
+    await TestBed.configureTestingModule({
+      imports: [ConfirmDeleteModalComponent],
+      providers: [
+        {
+          provide: MODAL_DATA,
+          useValue: data
+        },
+        {
+          provide: ModalRef,
+          useValue: {
+            close: closeSpy
+          }
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ConfirmDeleteModalComponent);
+    fixture.detectChanges();
+
+    const buttons = fixture.nativeElement.querySelectorAll('button');
+
+    buttons[0].click();
+    buttons[1].click();
+
+    expect(closeSpy).toHaveBeenNthCalledWith(1, false);
+    expect(closeSpy).toHaveBeenNthCalledWith(2, true);
+  });
+});

src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+
+import {
+  ConfirmModalData,
+  MODAL_DATA,
+  ModalRef
+} from '../../../core/services/modal.service';
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'app-confirm-delete-modal',
+  imports: [ButtonComponent],
+  templateUrl: './confirm-delete-modal.component.html',
+  styleUrl: './confirm-delete-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ConfirmDeleteModalComponent {
+  protected readonly data = inject<ConfirmModalData>(MODAL_DATA);
+  private readonly modalRef = inject<ModalRef<boolean>>(ModalRef);
+
+  protected cancel(): void {
+    this.modalRef.close(false);
+  }
+
+  protected confirm(): void {
+    this.modalRef.close(true);
+  }
+}

src/app/shared/components/confirm-modal/confirm-modal.component.html

@@ -0,0 +1,12 @@
+<div class="confirm-modal">
+  <p class="confirm-modal__content">{{ data.content }}</p>
+
+  <div class="confirm-modal__actions">
+    <app-button variant="secondary" (click)="cancel()">
+      {{ data.cancelLabel }}
+    </app-button>
+    <app-button (click)="confirm()">
+      {{ data.confirmLabel }}
+    </app-button>
+  </div>
+</div>

src/app/shared/components/confirm-modal/confirm-modal.component.scss

@@ -0,0 +1,19 @@
+.confirm-modal {
+  display: grid;
+  gap: 1.5rem;
+  justify-items: center;
+  text-align: center;
+}
+
+.confirm-modal__content {
+  margin: 0;
+  color: #666666;
+  line-height: 1.5;
+}
+
+.confirm-modal__actions {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}

src/app/shared/components/confirm-modal/confirm-modal.component.spec.ts

@@ -0,0 +1,95 @@
+import '@angular/compiler';
+import { TestBed, getTestBed } from '@angular/core/testing';
+import {
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
+import {
+  ConfirmModalData,
+  MODAL_DATA,
+  ModalRef
+} from '../../../core/services/modal.service';
+import { ConfirmModalComponent } from './confirm-modal.component';
+
+describe('ConfirmModalComponent', () => {
+  const data: ConfirmModalData = {
+    content: 'Se confirmara la operacion seleccionada.',
+    confirmLabel: 'Aceptar',
+    cancelLabel: 'Volver'
+  };
+
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(
+        BrowserTestingModule,
+        platformBrowserTesting()
+      );
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  it('renders the configured content and labels', async () => {
+    await TestBed.configureTestingModule({
+      imports: [ConfirmModalComponent],
+      providers: [
+        {
+          provide: MODAL_DATA,
+          useValue: data
+        },
+        {
+          provide: ModalRef,
+          useValue: {
+            close: vi.fn()
+          }
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ConfirmModalComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.textContent).toContain(data.content);
+    expect(element.textContent).toContain(data.confirmLabel);
+    expect(element.textContent).toContain(data.cancelLabel);
+  });
+
+  it('closes with false on cancel and true on confirm', async () => {
+    const closeSpy = vi.fn();
+
+    await TestBed.configureTestingModule({
+      imports: [ConfirmModalComponent],
+      providers: [
+        {
+          provide: MODAL_DATA,
+          useValue: data
+        },
+        {
+          provide: ModalRef,
+          useValue: {
+            close: closeSpy
+          }
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ConfirmModalComponent);
+    fixture.detectChanges();
+
+    const buttons = fixture.nativeElement.querySelectorAll('button');
+
+    buttons[0].click();
+    buttons[1].click();
+
+    expect(closeSpy).toHaveBeenNthCalledWith(1, false);
+    expect(closeSpy).toHaveBeenNthCalledWith(2, true);
+  });
+});

src/app/shared/components/confirm-modal/confirm-modal.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+
+import {
+  ConfirmModalData,
+  MODAL_DATA,
+  ModalRef
+} from '../../../core/services/modal.service';
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'app-confirm-modal',
+  imports: [ButtonComponent],
+  templateUrl: './confirm-modal.component.html',
+  styleUrl: './confirm-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ConfirmModalComponent {
+  protected readonly data = inject<ConfirmModalData>(MODAL_DATA);
+  private readonly modalRef = inject<ModalRef<boolean>>(ModalRef);
+
+  protected cancel(): void {
+    this.modalRef.close(false);
+  }
+
+  protected confirm(): void {
+    this.modalRef.close(true);
+  }
+}

src/app/shared/components/icon-button/icon-button.component.html

@@ -0,0 +1,8 @@
+<button
+  type="button"
+  [disabled]="disabled()"
+  [ngClass]="buttonClasses()"
+  [attr.aria-label]="ariaLabel() || variant()"
+>
+  <i [ngClass]="iconClass()"></i>
+</button>

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

@@ -0,0 +1,76 @@
+:host {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 4px;
+  margin: 0;
+  color: #666666;
+  cursor: pointer;
+  outline: none;
+  transition: color 0.15s ease-in-out, transform 0.1s ease-in-out;
+  border-radius: 4px;
+
+  i {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 13px;
+    height: 13px;
+    font-size: 13px;
+    line-height: 1;
+  }
+
+  // Active state subtle scale down
+  &:active:not(:disabled) {
+    transform: scale(0.92);
+  }
+
+  // Focus ring for accessibility
+  &:focus-visible {
+    outline: 2px solid var(--tenant-primary);
+    outline-offset: 2px;
+  }
+
+  // Disabled state
+  &:disabled {
+    color: #A0A0A0;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// Hover/Active/Focus colors (non-disabled)
+.icon-btn:hover:not(:disabled),
+.icon-btn:focus-visible:not(:disabled),
+.icon-btn.hover-preview:not(:disabled),
+:host(.hover-preview) .icon-btn:not(:disabled) {
+  color: var(--tenant-primary);
+}
+
+// Trash is special (uses danger color for hover/active)
+.icon-btn--trash {
+  &:hover:not(:disabled),
+  &:focus-visible:not(:disabled),
+  &.hover-preview:not(:disabled) {
+    color: var(--tenant-danger);
+  }
+}
+
+:host(.hover-preview) .icon-btn--trash:not(:disabled) {
+  color: var(--tenant-danger);
+}
+
+.icon-btn--user {
+  i {
+    width: 23px;
+    height: 23px;
+    font-size: 23px;
+  }
+}

src/app/shared/components/icon-button/icon-button.component.ts

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { NgClass } from '@angular/common';
+
+export type IconButtonVariant =
+  | 'user'
+  | 'trash'
+  | 'angle-right'
+  | 'angle-left'
+  | 'angle-up'
+  | 'angle-down'
+  | 'copy';
+
+@Component({
+  selector: 'app-icon-button',
+  imports: [NgClass],
+  templateUrl: './icon-button.component.html',
+  styleUrl: './icon-button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IconButtonComponent {
+  readonly variant = input.required<IconButtonVariant>();
+  readonly disabled = input(false);
+  readonly ariaLabel = input<string>('');
+
+  protected readonly iconClass = computed(() => {
+    const classes: Record<IconButtonVariant, string> = {
+      user: 'fa-regular fa-circle-user',
+      trash: 'fa-solid fa-trash',
+      'angle-right': 'fa-solid fa-angle-right',
+      'angle-left': 'fa-solid fa-angle-left',
+      'angle-up': 'fa-solid fa-angle-up',
+      'angle-down': 'fa-solid fa-angle-down',
+      copy: 'fa-solid fa-copy'
+    };
+    return classes[this.variant()];
+  });
+
+  protected readonly buttonClasses = computed(() => {
+    return ['icon-btn', `icon-btn--${this.variant()}`];
+  });
+}

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

@@ -14,7 +14,7 @@
   right: 1rem;
   top: 50%;
   z-index: 1;
-  color: #495057;
+  color: #a0a0a0;
   transform: translateY(-50%);
   pointer-events: none;
 }
@@ -23,7 +23,8 @@
   min-height: 40px;
   padding: 0.625rem 1rem;
   border-radius: 0.5rem;
-  color: #212529;
+  border-color: #cccccc;
+  color: #666666;
   font-size: 15px;
   font-weight: 400;
 
@@ -34,6 +35,10 @@
   &:disabled {
     opacity: 1;
   }
+
+  &::placeholder {
+    color: #666666;
+  }
 }
 
 .input-with-search-icon {
@@ -116,7 +121,7 @@ input[type='file'].form-control {
     padding: 0;
     border: 0;
     background: transparent;
-    color: #495057;
+    color: #a0a0a0;
     transform: translateY(-50%);
     cursor: pointer;
     transition: color 0.2s ease;
@@ -127,10 +132,10 @@ input[type='file'].form-control {
   }
 
   .input-icon-active {
-    color: #adb5bd;
+    color: #a0a0a0;
 
     &:hover {
-      color: #495057;
+      color: #8a8a8a;
     }
   }
 
@@ -145,7 +150,7 @@ input[type='file'].form-control {
     right: 1rem;
     top: 50%;
     z-index: 1;
-    color: #495057;
+    color: #a0a0a0;
     transform: translateY(-50%);
     pointer-events: none;
   }

src/app/shared/components/modal-host/modal-host.component.html

@@ -0,0 +1,11 @@
+@if (activeModal(); as modal) {
+  <app-modal-shell
+    [title]="modal.config.title"
+    [size]="modal.config.size"
+    [showCloseButton]="modal.config.showCloseButton"
+    (backdropClick)="onBackdropClick()"
+    (closeRequested)="onCloseRequested()"
+  >
+    <ng-container *ngComponentOutlet="modal.component; injector: contentInjector()" />
+  </app-modal-shell>
+}

src/app/shared/components/modal-host/modal-host.component.spec.ts

@@ -0,0 +1,196 @@
+import '@angular/compiler';
+import { Component, inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { TestBed, getTestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import {
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing';
+import {
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi
+} from 'vitest';
+
+import {
+  MODAL_DATA,
+  ModalRef,
+  ModalService
+} from '../../../core/services/modal.service';
+import { ModalHostComponent } from './modal-host.component';
+
+@Component({
+  standalone: true,
+  template: `
+    <div class="modal-test-content">
+      <span class="modal-test-title">{{ data?.title }}</span>
+      <button type="button" class="modal-test-close" (click)="close()">Cerrar</button>
+    </div>
+  `
+})
+class ModalContentTestComponent {
+  readonly data = inject<{ title: string } | null>(MODAL_DATA);
+  readonly modalRef = inject<ModalRef<string>>(ModalRef);
+
+  close(): void {
+    this.modalRef.close('accepted');
+  }
+}
+
+describe('ModalHostComponent', () => {
+  let service: ModalService;
+  let doc: Document;
+
+  beforeAll(() => {
+    try {
+      getTestBed().initTestEnvironment(
+        BrowserTestingModule,
+        platformBrowserTesting()
+      );
+    } catch {
+      // Test environment may already be initialized by another setup entrypoint.
+    }
+  });
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ModalHostComponent]
+    }).compileComponents();
+
+    service = TestBed.inject(ModalService);
+    doc = TestBed.inject(DOCUMENT);
+  });
+
+  afterEach(() => {
+    doc.body.style.overflow = '';
+    TestBed.resetTestingModule();
+  });
+
+  it('renders nothing when no modal is active', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent?.trim()).toBe('');
+    expect(doc.body.style.overflow).toBe('');
+  });
+
+  it('opens and renders the requested component with its title and data', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+
+    service.open(ModalContentTestComponent, {
+      title: 'Editar producto',
+      data: { title: 'Contenido del modal' }
+    });
+    fixture.detectChanges();
+
+    const title = fixture.nativeElement.querySelector('.modal-shell__title');
+    const content = fixture.nativeElement.querySelector('.modal-test-title');
+
+    expect(title?.textContent).toContain('Editar producto');
+    expect(content?.textContent).toContain('Contenido del modal');
+    expect(doc.body.style.overflow).toBe('hidden');
+  });
+
+  it('closes with a result from the child component', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    const ref = service.open(ModalContentTestComponent, {
+      data: { title: 'Cerrar' }
+    });
+    const closedSpy = vi.fn();
+
+    ref.afterClosed$.subscribe(closedSpy);
+    fixture.detectChanges();
+
+    const closeButton = fixture.nativeElement.querySelector('.modal-test-close') as HTMLButtonElement;
+    closeButton.click();
+    fixture.detectChanges();
+
+    expect(closedSpy).toHaveBeenCalledWith('accepted');
+    expect(service.activeModal()).toBeNull();
+    expect(doc.body.style.overflow).toBe('');
+  });
+
+  it('closes on backdrop click when enabled', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    const ref = service.open(ModalContentTestComponent, {
+      data: { title: 'Backdrop' },
+      closeOnBackdrop: true
+    });
+
+    fixture.detectChanges();
+
+    const backdrop = fixture.nativeElement.querySelector('.modal-shell') as HTMLDivElement;
+    backdrop.click();
+    fixture.detectChanges();
+
+    expect(service.activeModal()).toBeNull();
+    expect(ref.dismissReason()).toBe('backdrop');
+  });
+
+  it('does not close on backdrop click when disabled', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    const ref = service.open(ModalContentTestComponent, {
+      data: { title: 'Persistente' },
+      closeOnBackdrop: false
+    });
+
+    fixture.detectChanges();
+
+    const backdrop = fixture.nativeElement.querySelector('.modal-shell') as HTMLDivElement;
+    backdrop.click();
+    fixture.detectChanges();
+
+    expect(service.activeModal()?.ref).toBe(ref);
+  });
+
+  it('closes on Escape when enabled', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    const ref = service.open(ModalContentTestComponent, {
+      data: { title: 'Escape' },
+      closeOnEscape: true
+    });
+
+    fixture.detectChanges();
+    doc.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    fixture.detectChanges();
+
+    expect(service.activeModal()).toBeNull();
+    expect(ref.dismissReason()).toBe('escape');
+  });
+
+  it('keeps the modal open on Escape when disabled', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    const ref = service.open(ModalContentTestComponent, {
+      data: { title: 'No Escape' },
+      closeOnEscape: false
+    });
+
+    fixture.detectChanges();
+    doc.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    fixture.detectChanges();
+
+    expect(service.activeModal()?.ref).toBe(ref);
+  });
+
+  it('closes from the shell close button with a programmatic dismiss reason', () => {
+    const fixture = TestBed.createComponent(ModalHostComponent);
+    const ref = service.open(ModalContentTestComponent, {
+      title: 'Con cierre',
+      data: { title: 'Boton' }
+    });
+
+    fixture.detectChanges();
+
+    const closeButton = fixture.debugElement.query(By.css('.btn-close')).nativeElement as HTMLButtonElement;
+    closeButton.click();
+    fixture.detectChanges();
+
+    expect(service.activeModal()).toBeNull();
+    expect(ref.dismissReason()).toBe('programmatic');
+  });
+});

src/app/shared/components/modal-host/modal-host.component.ts

@@ -0,0 +1,93 @@
+import { DOCUMENT, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Injector,
+  PLATFORM_ID,
+  computed,
+  effect,
+  inject,
+  viewChild
+} from '@angular/core';
+
+import {
+  MODAL_DATA,
+  ModalRef,
+  ModalService
+} from '../../../core/services/modal.service';
+import { ModalShellComponent } from '../modal-shell/modal-shell.component';
+
+@Component({
+  selector: 'app-modal-host',
+  imports: [NgComponentOutlet, ModalShellComponent],
+  templateUrl: './modal-host.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ModalHostComponent {
+  private readonly modalService = inject(ModalService);
+  private readonly injector = inject(Injector);
+  private readonly document = inject(DOCUMENT);
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly modalShell = viewChild(ModalShellComponent);
+  private readonly isBrowser = isPlatformBrowser(this.platformId);
+
+  readonly activeModal = this.modalService.activeModal;
+  protected readonly contentInjector = computed<Injector | undefined>(() => {
+    const modal = this.activeModal();
+
+    if (!modal) {
+      return undefined;
+    }
+
+    return Injector.create({
+      providers: [
+        { provide: ModalRef, useValue: modal.ref },
+        { provide: MODAL_DATA, useValue: modal.config.data ?? null }
+      ],
+      parent: this.injector
+    });
+  });
+
+  constructor() {
+    effect((onCleanup) => {
+      const modal = this.activeModal();
+
+      if (!this.isBrowser || !modal) {
+        return;
+      }
+
+      const body = this.document.body;
+      const previousOverflow = body.style.overflow;
+      body.style.overflow = 'hidden';
+
+      const onKeyDown = (event: KeyboardEvent) => {
+        if (event.key !== 'Escape' || !this.activeModal()?.config.closeOnEscape) {
+          return;
+        }
+
+        event.preventDefault();
+        this.activeModal()?.ref.dismiss('escape');
+      };
+
+      this.document.addEventListener('keydown', onKeyDown);
+      queueMicrotask(() => this.modalShell()?.focusInitialElement());
+
+      onCleanup(() => {
+        this.document.removeEventListener('keydown', onKeyDown);
+        body.style.overflow = previousOverflow;
+      });
+    });
+  }
+
+  protected onBackdropClick(): void {
+    const modal = this.activeModal();
+
+    if (modal?.config.closeOnBackdrop) {
+      modal.ref.dismiss('backdrop');
+    }
+  }
+
+  protected onCloseRequested(): void {
+    this.activeModal()?.ref.dismiss('programmatic');
+  }
+}

src/app/shared/components/modal-shell/modal-shell.component.html

@@ -0,0 +1,39 @@
+<div class="modal-shell" (click)="backdropClick.emit()">
+  <div
+    class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-shell__dialog"
+    [ngClass]="dialogClass()"
+    (click)="$event.stopPropagation()"
+  >
+    <div
+      #panel
+      class="modal-content border-0 shadow-lg modal-shell__content"
+      role="dialog"
+      aria-modal="true"
+      [attr.aria-labelledby]="ariaLabelledBy"
+      tabindex="-1"
+    >
+      @if (title() || showCloseButton()) {
+        <header class="modal-header border-0 modal-shell__header">
+          @if (title()) {
+            <h2 class="modal-title modal-shell__title" [id]="titleId">{{ title() }}</h2>
+          } @else {
+            <span></span>
+          }
+
+          @if (showCloseButton()) {
+            <button
+              type="button"
+              class="btn-close"
+              aria-label="Cerrar modal"
+              (click)="closeRequested.emit()"
+            ></button>
+          }
+        </header>
+      }
+
+      <div class="modal-body modal-shell__body">
+        <ng-content />
+      </div>
+    </div>
+  </div>
+</div>

src/app/shared/components/modal-shell/modal-shell.component.scss

@@ -0,0 +1,97 @@
+:host {
+  display: contents;
+}
+
+.modal-shell {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgba(16, 18, 22, 0.48);
+  backdrop-filter: blur(2px);
+}
+
+.modal-shell__dialog {
+  width: min(100%, 40rem);
+  margin: 0;
+}
+
+.modal-shell__dialog.modal-sm {
+  width: min(100%, 24rem);
+}
+
+.modal-shell__dialog.modal-lg {
+  width: min(100%, 52rem);
+}
+
+.modal-shell__dialog.modal-xl {
+  width: min(100%, 68rem);
+}
+
+.modal-shell__dialog--full {
+  width: min(100%, 92rem);
+  height: min(100%, calc(100dvh - 2rem));
+}
+
+.modal-shell__content {
+  max-height: calc(100dvh - 2rem);
+  border-radius: 1.25rem;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 248, 0.98));
+}
+
+.modal-shell__dialog--full .modal-shell__content {
+  height: 100%;
+  max-height: 100%;
+}
+
+.modal-shell__header {
+  position: relative;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 1.25rem 1.25rem 0.75rem;
+}
+
+.modal-shell__title {
+  margin: 0;
+  width: 100%;
+  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.5rem);
+  font-weight: 700;
+  line-height: 1.15;
+  color: #202020;
+  text-align: center;
+}
+
+.modal-shell__header .btn-close {
+  position: absolute;
+  top: 1.25rem;
+  right: 1.25rem;
+}
+
+.modal-shell__body {
+  padding: 0 1.25rem 1.25rem;
+  color: #303030;
+}
+
+@media (max-width: 576px) {
+  .modal-shell {
+    padding: 0.75rem;
+    align-items: flex-end;
+  }
+
+  .modal-shell__dialog,
+  .modal-shell__dialog.modal-sm,
+  .modal-shell__dialog.modal-lg,
+  .modal-shell__dialog.modal-xl,
+  .modal-shell__dialog--full {
+    width: 100%;
+  }
+
+  .modal-shell__content {
+    max-height: min(100dvh - 1.5rem, 48rem);
+    border-radius: 1.25rem 1.25rem 0.75rem 0.75rem;
+  }
+}

src/app/shared/components/modal-shell/modal-shell.component.ts

@@ -0,0 +1,64 @@
+import { NgClass } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  computed,
+  input,
+  output,
+  viewChild
+} from '@angular/core';
+
+import { ModalSize } from '../../../core/services/modal.service';
+
+@Component({
+  selector: 'app-modal-shell',
+  imports: [NgClass],
+  templateUrl: './modal-shell.component.html',
+  styleUrl: './modal-shell.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ModalShellComponent {
+  private readonly panel = viewChild.required<ElementRef<HTMLElement>>('panel');
+
+  readonly title = input<string | undefined>();
+  readonly size = input<ModalSize>('md');
+  readonly showCloseButton = input(true);
+
+  readonly backdropClick = output<void>();
+  readonly closeRequested = output<void>();
+
+  protected readonly dialogClass = computed(() => {
+    const size = this.size();
+
+    return {
+      'modal-sm': size === 'sm',
+      'modal-lg': size === 'lg',
+      'modal-xl': size === 'xl',
+      'modal-shell__dialog--full': size === 'full'
+    };
+  });
+
+  protected readonly titleId = `modal-title-${Math.random().toString(36).slice(2, 9)}`;
+
+  protected get ariaLabelledBy(): string | null {
+    return this.title() ? this.titleId : null;
+  }
+
+  focusInitialElement(): void {
+    const panel = this.panel().nativeElement;
+    const focusTarget = panel.querySelector<HTMLElement>(
+      [
+        '[autofocus]',
+        'button:not([disabled])',
+        '[href]',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])'
+      ].join(', ')
+    );
+
+    (focusTarget ?? panel).focus();
+  }
+}

src/app/shared/components/paginator/paginator.component.html

@@ -0,0 +1,56 @@
+<nav
+  class="d-inline-flex align-items-center justify-content-center gap-3 text-decoration-none"
+  aria-label="Paginacion"
+>
+  <button
+    type="button"
+    class="paginator__button btn btn-link d-inline-flex align-items-center justify-content-center rounded-circle p-0 text-decoration-none"
+    data-testid="paginator-first"
+    aria-label="Ir a la primera pagina"
+    [disabled]="isFirstStepDisabled()"
+    (click)="changePage('first')"
+  >
+    <i class="fa-solid fa-angles-left" aria-hidden="true"></i>
+  </button>
+
+  <button
+    type="button"
+    class="paginator__button btn btn-link d-inline-flex align-items-center justify-content-center rounded-circle p-0 text-decoration-none"
+    data-testid="paginator-previous"
+    aria-label="Ir a la pagina anterior"
+    [disabled]="isFirstStepDisabled()"
+    (click)="changePage('previous')"
+  >
+    <i class="fa-solid fa-angle-left" aria-hidden="true"></i>
+  </button>
+
+  <span
+    class="paginator__status d-inline-block text-center fw-semibold lh-1"
+    data-testid="paginator-status"
+    aria-live="polite"
+  >
+    {{ displayPage() }}/{{ displayTotalPages() }}
+  </span>
+
+  <button
+    type="button"
+    class="paginator__button btn btn-link d-inline-flex align-items-center justify-content-center rounded-circle p-0 text-decoration-none"
+    data-testid="paginator-next"
+    aria-label="Ir a la pagina siguiente"
+    [disabled]="isLastStepDisabled()"
+    (click)="changePage('next')"
+  >
+    <i class="fa-solid fa-angle-right" aria-hidden="true"></i>
+  </button>
+
+  <button
+    type="button"
+    class="paginator__button btn btn-link d-inline-flex align-items-center justify-content-center rounded-circle p-0 text-decoration-none"
+    data-testid="paginator-last"
+    aria-label="Ir a la ultima pagina"
+    [disabled]="isLastStepDisabled()"
+    (click)="changePage('last')"
+  >
+    <i class="fa-solid fa-angles-right" aria-hidden="true"></i>
+  </button>
+</nav>

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

@@ -0,0 +1,37 @@
+:host {
+  display: block;
+  width: fit-content;
+  color: var(--tenant-primary);
+}
+
+.paginator__button {
+  width: 2rem;
+  height: 2rem;
+  color: inherit;
+  font-size: 1rem;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    transform 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background-color: color-mix(in srgb, white 84%, var(--tenant-primary));
+    transform: translateY(-1px);
+  }
+
+  &:focus-visible {
+    outline: 2px solid color-mix(in srgb, white 55%, var(--tenant-primary));
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    color: color-mix(in srgb, white 45%, var(--tenant-primary));
+    cursor: default;
+  }
+}
+
+.paginator__status {
+  min-width: 3rem;
+  font-size: 1rem;
+  letter-spacing: 0.04em;
+}

src/app/shared/components/paginator/paginator.component.spec.ts

@@ -0,0 +1,93 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { PaginatorComponent } from './paginator.component';
+
+describe('PaginatorComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PaginatorComponent]
+    }).compileComponents();
+  });
+
+  function setup(page: number, totalPages: number, disabled = false) {
+    const fixture = TestBed.createComponent(PaginatorComponent);
+    fixture.componentRef.setInput('page', page);
+    fixture.componentRef.setInput('totalPages', totalPages);
+    fixture.componentRef.setInput('disabled', disabled);
+    fixture.detectChanges();
+
+    return {
+      fixture,
+      element: fixture.nativeElement as HTMLElement
+    };
+  }
+
+  it('renders the current page status', () => {
+    const { element } = setup(1, 8);
+
+    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('1/8');
+  });
+
+  it('emits the next page when clicking next', () => {
+    const { fixture, element } = setup(1, 8);
+    const pageChangeSpy = vi.fn();
+
+    fixture.componentInstance.pageChange.subscribe(pageChangeSpy);
+    (element.querySelector('[data-testid="paginator-next"]') as HTMLButtonElement).click();
+
+    expect(pageChangeSpy).toHaveBeenCalledWith(2);
+  });
+
+  it('emits the last page when clicking last', () => {
+    const { fixture, element } = setup(1, 8);
+    const pageChangeSpy = vi.fn();
+
+    fixture.componentInstance.pageChange.subscribe(pageChangeSpy);
+    (element.querySelector('[data-testid="paginator-last"]') as HTMLButtonElement).click();
+
+    expect(pageChangeSpy).toHaveBeenCalledWith(8);
+  });
+
+  it('emits the first page when clicking first from a middle page', () => {
+    const { fixture, element } = setup(4, 8);
+    const pageChangeSpy = vi.fn();
+
+    fixture.componentInstance.pageChange.subscribe(pageChangeSpy);
+    (element.querySelector('[data-testid="paginator-first"]') as HTMLButtonElement).click();
+
+    expect(pageChangeSpy).toHaveBeenCalledWith(1);
+  });
+
+  it('does not emit when trying to go before the first page', () => {
+    const { fixture, element } = setup(1, 8);
+    const pageChangeSpy = vi.fn();
+
+    fixture.componentInstance.pageChange.subscribe(pageChangeSpy);
+    (element.querySelector('[data-testid="paginator-previous"]') as HTMLButtonElement).click();
+
+    expect(pageChangeSpy).not.toHaveBeenCalled();
+  });
+
+  it('does not emit when trying to go after the last page', () => {
+    const { fixture, element } = setup(8, 8);
+    const pageChangeSpy = vi.fn();
+
+    fixture.componentInstance.pageChange.subscribe(pageChangeSpy);
+    (element.querySelector('[data-testid="paginator-next"]') as HTMLButtonElement).click();
+
+    expect(pageChangeSpy).not.toHaveBeenCalled();
+  });
+
+  it('disables all buttons when disabled is true', () => {
+    const { element } = setup(2, 8, true);
+
+    expect(Array.from(element.querySelectorAll('button')).every((button) => button.disabled)).toBe(true);
+  });
+
+  it('disables all buttons when there is only one page', () => {
+    const { element } = setup(1, 1);
+
+    expect(Array.from(element.querySelectorAll('button')).every((button) => button.disabled)).toBe(true);
+  });
+});

src/app/shared/components/paginator/paginator.component.ts

@@ -0,0 +1,76 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+
+type PaginatorAction = 'first' | 'previous' | 'next' | 'last';
+
+@Component({
+  selector: 'app-paginator',
+  standalone: true,
+  templateUrl: './paginator.component.html',
+  styleUrl: './paginator.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PaginatorComponent {
+  readonly page = input.required<number>();
+  readonly totalPages = input.required<number>();
+  readonly disabled = input(false);
+
+  readonly pageChange = output<number>();
+
+  protected readonly displayPage = computed(() => {
+    const totalPages = this.displayTotalPages();
+
+    if (totalPages < 1) {
+      return 0;
+    }
+
+    return Math.min(Math.max(this.page(), 1), totalPages);
+  });
+
+  protected readonly displayTotalPages = computed(() => Math.max(this.totalPages(), 0));
+
+  protected readonly isNavigationDisabled = computed(() => {
+    const page = this.page();
+    const totalPages = this.totalPages();
+
+    return (
+      this.disabled() ||
+      !Number.isInteger(page) ||
+      !Number.isInteger(totalPages) ||
+      totalPages <= 1 ||
+      page < 1 ||
+      page > totalPages
+    );
+  });
+
+  protected readonly isFirstStepDisabled = computed(
+    () => this.isNavigationDisabled() || this.displayPage() <= 1
+  );
+
+  protected readonly isLastStepDisabled = computed(
+    () => this.isNavigationDisabled() || this.displayPage() >= this.displayTotalPages()
+  );
+
+  protected changePage(action: PaginatorAction): void {
+    if (this.isNavigationDisabled()) {
+      return;
+    }
+
+    const currentPage = this.displayPage();
+    const totalPages = this.displayTotalPages();
+
+    const nextPageByAction: Record<PaginatorAction, number> = {
+      first: 1,
+      previous: currentPage - 1,
+      next: currentPage + 1,
+      last: totalPages
+    };
+
+    const nextPage = nextPageByAction[action];
+
+    if (nextPage === currentPage || nextPage < 1 || nextPage > totalPages) {
+      return;
+    }
+
+    this.pageChange.emit(nextPage);
+  }
+}

src/app/shared/components/product-card/product-card.component.html

@@ -0,0 +1,50 @@
+<div class="product-card border rounded shadow-sm bg-white overflow-hidden d-flex flex-column h-100">
+  <!-- Image section -->
+  <div class="product-card__image-container position-relative bg-light">
+    @if (imageUrl()) {
+    <img [src]="imageUrl()" [alt]="title()" class="product-card__image w-100 h-100 object-fit-cover" />
+    } @else {
+    <div
+      class="product-card__image-placeholder w-100 h-100 d-flex align-items-center justify-content-center bg-light text-muted">
+      <i class="fa-solid fa-image fa-2x"></i>
+    </div>
+    }
+
+    <!-- Discount badge in top right -->
+    @if (discount() && discount()! > 0) {
+    <span class="product-card__discount-badge position-absolute top-0 end-0 bg-primary text-white px-2 py-1">
+      -{{ discount() }}%
+    </span>
+    }
+  </div>
+
+  <!-- Content section -->
+  <div class="product-card__body p-3 d-flex flex-column align-items-center text-center flex-grow-1">
+    <!-- Product Title -->
+    <h3 class="product-card__title text-uppercase text-black mb-4">{{ title() }}</h3>
+
+    <!-- Prices Area -->
+    <div class="product-card__prices d-flex align-items-center justify-content-center gap-2">
+      <!-- Discounted (computado) Price -->
+      <span class="product-card__price-discounted text-primary">{{ formattedDiscountedPrice() }}</span>
+
+      <!-- Original strikethrough Price (only if discount exists) -->
+      @if (discount() && discount()! > 0) {
+      <span class="product-card__price-original text-decoration-line-through">{{ formattedOriginalPrice() }}</span>
+      }
+    </div>
+
+    <!-- Transfer Price Info -->
+    <div class="product-card__price-transfer mb-4">
+      <span class="product-card__price-transfer-value">{{ formattedTransferPrice() }}</span>
+      <span class="product-card__price-transfer-label"> con transferencia</span>
+    </div>
+
+    <!-- Purchase Action Button -->
+    <div class="product-card__action mt-auto w-100">
+      <app-button variant="primary" class="w-100" (click)="buy.emit()">
+        {{ buttonText() }}
+      </app-button>
+    </div>
+  </div>
+</div>

src/app/shared/components/product-card/product-card.component.scss

@@ -0,0 +1,76 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.product-card {
+  width: 100%;
+  max-height: 411px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
+  }
+
+  &__image-container {
+    width: 100%;
+    max-height: 50%;
+    aspect-ratio: 1 / 1;
+    overflow: hidden;
+  }
+
+  &__discount-badge {
+    background-color: var(--tenant-primary) !important;
+    font-size: 13px;
+    font-weight: 325;
+    z-index: 10;
+  }
+
+  &__title {
+    font-size: 12px;
+    font-weight: 325;
+    letter-spacing: 0.5px;
+    line-height: 1.4;
+  }
+
+  &__price-discounted {
+    color: var(--tenant-primary) !important;
+    font-size: 24px;
+    font-weight: 700;
+  }
+
+
+  &__price-original {
+    font-size: 11px;
+    font-weight: 325;
+    color: #DDDDDD;
+  }
+
+  &__price-transfer {
+    font-size: 12px;
+    color: #6c757d;
+  }
+
+  &__price-transfer-value {
+    font-weight: 700;
+  }
+
+  &__price-transfer-label {
+    font-weight: 300;
+  }
+
+  &__action {
+    app-button {
+      display: block;
+      width: 100%;
+
+      ::ng-deep .btn {
+        width: 100%;
+        min-width: 100%;
+        border-radius: 8px;
+      }
+    }
+  }
+}

src/app/shared/components/product-card/product-card.component.ts

@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'app-product-card',
+  standalone: true,
+  imports: [ButtonComponent],
+  templateUrl: './product-card.component.html',
+  styleUrl: './product-card.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProductCardComponent {
+  // Configurable inputs
+  readonly imageUrl = input<string | null>(null);
+  readonly title = input<string>('');
+  readonly originalPrice = input<number>(0);
+  readonly discount = input<number | null>(null);
+  readonly transferPrice = input<number | null>(null);
+  readonly buttonText = input<string>('Comprar');
+
+  // Interactive events
+  readonly buy = output<void>();
+
+  // Computed discounted price
+  readonly discountedPrice = computed(() => {
+    const original = this.originalPrice();
+    const disc = this.discount();
+    if (!disc || disc <= 0) {
+      return original;
+    }
+    return original * (1 - disc / 100);
+  });
+
+  // Computed transfer price
+  readonly computedTransferPrice = computed(() => {
+    const givenTransfer = this.transferPrice();
+    if (givenTransfer !== null) {
+      return givenTransfer;
+    }
+    // Fallback if not specified: use the discounted price
+    return this.discountedPrice();
+  });
+
+  // Formatted string for discounted price: "$ 76.000"
+  readonly formattedDiscountedPrice = computed(() => {
+    return this.formatCurrency(this.discountedPrice());
+  });
+
+  // Formatted string for original price (if has discount): "$ 95.000"
+  readonly formattedOriginalPrice = computed(() => {
+    return this.formatCurrency(this.originalPrice());
+  });
+
+  // Formatted string for transfer price: "$ 74.800"
+  readonly formattedTransferPrice = computed(() => {
+    return this.formatCurrency(this.computedTransferPrice());
+  });
+
+  /**
+   * Helper method to format currency numbers to Argentine Pesos style "$ XX.XXX".
+   * This manual implementation is safe from runtime/SSR locale variations.
+   */
+  private formatCurrency(value: number): string {
+    const rounded = Math.round(value);
+    const parts = rounded.toString().split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    return `$${parts.join(',')}`;
+  }
+}

src/app/shared/components/quantity-selector/quantity-selector.component.html

@@ -0,0 +1,23 @@
+<div class="quantity-selector d-inline-flex align-items-center overflow-hidden rounded" [class.quantity-selector--small]="size() === 'small'" aria-label="Selector de cantidad">
+  <button
+    type="button"
+    class="quantity-selector__button border-0 p-0 fw-bold lh-1"
+    aria-label="Disminuir cantidad"
+    [disabled]="quantity() <= min()"
+    (click)="onDecrease()"
+  >
+    -
+  </button>
+
+  <span class="quantity-selector__value flex-grow-1 min-w-0 text-center fw-bold lh-1 user-select-none">{{ quantity() }}</span>
+
+  <button
+    type="button"
+    class="quantity-selector__button border-0 p-0 fw-bold lh-1"
+    aria-label="Aumentar cantidad"
+    [disabled]="quantity() >= max()"
+    (click)="onIncrease()"
+  >
+    +
+  </button>
+</div>

src/app/shared/components/quantity-selector/quantity-selector.component.scss

@@ -0,0 +1,62 @@
+:host {
+  display: inline-block;
+}
+
+.quantity-selector {
+  border: 1px solid #d8d8d8;
+  width: 78px;
+  height: 40px;
+  min-height: 40px;
+  background: #f6f6f6;
+  box-sizing: border-box;
+
+  &__button {
+    width: 24px;
+    height: 100%;
+    font-size: 20px;
+    color: #6f6f6f;
+    background: #f6f6f6;
+    transition: background-color 0.2s ease, color 0.2s ease;
+    cursor: pointer;
+
+    &:not(:disabled):hover {
+      background-color: #e9e9e9;
+      color: #333333;
+    }
+
+    &:disabled {
+      color: #A0A0A0;
+      opacity: 1;
+      cursor: not-allowed;
+    }
+  }
+
+  &__value {
+    font-size: 16px;
+    color: #6f6f6f;
+  }
+
+  &--small {
+    width: 46px;
+    height: 21px;
+    min-height: 21px;
+    border: 1px solid #cfcfcf;
+    background: #ffffff;
+
+    .quantity-selector__button {
+      width: 15px;
+      font-size: 10px;
+      background: #ffffff;
+      color: #666666;
+
+      &:not(:disabled):hover {
+        background-color: #f0f0f0;
+      }
+    }
+
+    .quantity-selector__value {
+      font-size: 10px;
+      color: #666666;
+    }
+  }
+}