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.

src/app/app.html

@@ -1,6 +1,7 @@
 @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">

src/app/app.routes.spec.ts

@@ -2,10 +2,13 @@ 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';
 
 const tenant: Tenant = {
   id: 1,
@@ -57,6 +60,13 @@ async function renderAppAt(
       {
         provide: TenantService,
         useValue: tenantService
+      },
+      {
+        provide: CartService,
+        useValue: {
+          cart: signal(null).asReadonly(),
+          loadCart: () => of({ id: 1, items: [], subtotal: '0' })
+        }
       }
     ]
   }).compileComponents();

src/app/app.spec.ts

@@ -1,6 +1,12 @@
+import '@angular/compiler';
 import { signal } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
+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';
@@ -34,6 +40,21 @@ function createTenantServiceStub(status: 'ready' | 'not-found', currentTenant: T
 }
 
 describe('App', () => {
+  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],

src/app/app.ts

@@ -3,6 +3,7 @@ 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 {
@@ -22,7 +23,7 @@ function hexToRgb(hex: string): string {
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, ToastContainerComponent],
+  imports: [RouterOutlet, ToastContainerComponent, ModalHostComponent],
   templateUrl: './app.html',
   styleUrl: './app.scss',
   host: {

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

@@ -6,8 +6,8 @@
         data-testid="store-header-brand-slot"
         aria-label="Logo del comercio"
       >
-        @if (logoUrl) {
-          <img class="store-layout__brand-logo" [src]="logoUrl" alt="Logo del comercio" />
+        @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>
@@ -34,16 +34,17 @@
         </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) {
-            <button
-              type="button"
-              class="btn btn-link store-layout__action-button p-2 text-decoration-none"
-              [attr.aria-label]="action.label"
-              [attr.title]="action.label"
-            >
-              <i [class]="action.iconClass" aria-hidden="true"></i>
-            </button>
-          }
+          <app-cart-icon
+            [quantity]="cartQuantity()"
+            ariaLabel="Carrito de compras"
+            title="Carrito"
+            (click)="cartClick.emit()"
+          />
+          <app-icon-button
+            variant="user"
+            ariaLabel="Mi cuenta"
+            title="Mi cuenta"
+          />
         </div>
       </div>
     </div>

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

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

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

@@ -10,3 +10,53 @@
     #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

@@ -2,8 +2,12 @@ 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 = {
@@ -37,6 +41,25 @@ describe('StoreLayoutComponent', () => {
             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();

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[] = [
-    {
-      label: 'Carrito',
-      iconClass: 'fa-solid fa-cart-shopping'
-    },
-    {
-      label: 'Mi cuenta',
-      iconClass: 'fa-solid fa-circle-user'
-    }
-  ];
+  protected readonly cartQuantity = computed(() => {
+    const cart = this.cartService.cart();
+    if (!cart || !cart.items) return 0;
+    return cart.items.reduce((total, item) => total + item.cantidad, 0);
+  });
+
+  ngOnInit(): void {
+    this.cartService.loadCart().subscribe({
+      error: (err) => console.error('Error loading cart', err)
+    });
+  }
+
 
   protected readonly footerSections: StoreFooterSection[] = [
     {

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

@@ -75,8 +75,8 @@ describe('CartService', () => {
   });
 
   it('should add item and update signal', () => {
-    service.addItem(10, 2).subscribe((cart) => {
-      expect(cart).toEqual(mockCart);
+    service.addItem(10, 2).subscribe((res) => {
+      expect(res.data).toEqual(mockCart);
       expect(service.cart()).toEqual(mockCart);
     });
 
@@ -91,8 +91,8 @@ describe('CartService', () => {
     const updatedCart = { ...mockCart, subtotal: '30.00' };
     updatedCart.items[0].cantidad = 3;
 
-    service.updateItemQuantity(10, 3).subscribe((cart) => {
-      expect(cart).toEqual(updatedCart);
+    service.updateItemQuantity(10, 3).subscribe((res) => {
+      expect(res.data).toEqual(updatedCart);
       expect(service.cart()).toEqual(updatedCart);
     });
 
@@ -112,8 +112,8 @@ describe('CartService', () => {
       subtotal: '0.00'
     };
 
-    service.removeItem(10).subscribe((cart) => {
-      expect(cart).toEqual(emptyCart);
+    service.removeItem(10).subscribe((res) => {
+      expect(res.data).toEqual(emptyCart);
       expect(service.cart()).toEqual(emptyCart);
     });
 

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

@@ -31,7 +31,7 @@ export class CartService {
       );
   }
 
-  addItem(productVariantId: number, cantidad: number): Observable<Cart> {
+  addItem(productVariantId: number, cantidad: number): Observable<ApiResponse<Cart>> {
     return this.http
       .post<ApiResponse<Cart>>(
         `${this.tenantApiUrl}/cart/items`,
@@ -39,12 +39,11 @@ export class CartService {
         { withCredentials: true }
       )
       .pipe(
-        map((response) => response.data),
-        tap((cart) => this.cartState.set(cart))
+        tap((response) => this.cartState.set(response.data))
       );
   }
 
-  updateItemQuantity(productVariantId: number, cantidad: number): Observable<Cart> {
+  updateItemQuantity(productVariantId: number, cantidad: number): Observable<ApiResponse<Cart>> {
     return this.http
       .patch<ApiResponse<Cart>>(
         `${this.tenantApiUrl}/cart/items/${productVariantId}`,
@@ -52,20 +51,18 @@ export class CartService {
         { withCredentials: true }
       )
       .pipe(
-        map((response) => response.data),
-        tap((cart) => this.cartState.set(cart))
+        tap((response) => this.cartState.set(response.data))
       );
   }
 
-  removeItem(productVariantId: number): Observable<Cart> {
+  removeItem(productVariantId: number): Observable<ApiResponse<Cart>> {
     return this.http
       .delete<ApiResponse<Cart>>(
         `${this.tenantApiUrl}/cart/items/${productVariantId}`,
         { withCredentials: true }
       )
       .pipe(
-        map((response) => response.data),
-        tap((cart) => this.cartState.set(cart))
+        tap((response) => this.cartState.set(response.data))
       );
   }
 }

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

@@ -31,14 +31,14 @@ export interface ProductAttribute {
 
 export interface ProductVariant {
   id: number;
-  stock: number;
+  cantidad_maxima: number;
   definitions: Record<string, string>;
   images: string[];
 }
 
 export interface ProductVariantMap {
   variant_id: number;
-  stock: number;
+  cantidad_maxima: number;
   attributes: Record<string, string>;
 }
 

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/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -26,7 +26,9 @@
             <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>
@@ -46,23 +48,141 @@
           <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>
+            <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>
+            <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>
@@ -190,7 +310,9 @@
             />
           </div>
 
-          <app-button variant="secondary" (click)="clearFile()">Limpiar archivo</app-button>
+          <app-button variant="secondary" (click)="clearFile()">
+            Limpiar archivo
+          </app-button>
         </div>
       </div>
 
@@ -199,7 +321,8 @@
       <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.
+          Componente shared para navegar por paginas con primera, anterior,
+          siguiente y ultima.
         </p>
         <app-paginator
           [page]="currentPage"
@@ -220,7 +343,9 @@
           </div>
 
           @if (!cartVisible) {
-            <app-button variant="secondary" (click)="showCart()">Volver a mostrar carrito</app-button>
+            <app-button variant="secondary" (click)="showCart()">
+              Volver a mostrar carrito
+            </app-button>
           }
         </div>
 
@@ -244,16 +369,19 @@
   <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">Configuración Tenant</h2>
+      <h2 class="mb-4">Configuracion Tenant</h2>
 
-      <!-- Logos section -->
       <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" />
+                <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>
@@ -269,7 +397,11 @@
             <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" />
+                <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>
@@ -283,66 +415,95 @@
 
       <hr class="section-divider" />
 
-      <!-- Colors section -->
       <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__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>
+                <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__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>
+                <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__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>
+                <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__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>
+                <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__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>
+                <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__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>
+                <code class="color-swatch-card__value">
+                  {{ tenant()?.footer_bg_color || 'Default' }}
+                </code>
               </div>
             </div>
           </div>
@@ -355,9 +516,10 @@
     <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 tamaño del contenedor padre. A continuación se presentan dentro de una grilla de Bootstrap.
+        Las tarjetas se adaptan al tamano del contenedor padre. A continuacion se
+        presentan dentro de una grilla de Bootstrap.
       </p>
 
       <div class="row">
@@ -377,10 +539,15 @@
     </div>
   </section>
 
-  <app-store-section title="PRODUCTOS" class="component-demo store-section-demo mt-5">
+  <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">
+        <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"
@@ -394,4 +561,3 @@
     </div>
   </app-store-section>
 </main>
-

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

@@ -49,6 +49,49 @@ 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;
@@ -133,6 +176,10 @@ h1 {
     align-items: start;
     flex-direction: column;
   }
+
+  .modal-showcase__result {
+    font-size: 0.875rem;
+  }
 }
 
 .configuracion-tennant {
@@ -244,3 +291,44 @@ h1 {
     }
   }
 }
+
+.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

@@ -1,9 +1,17 @@
 import { signal } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, expect, it, vi } from 'vitest';
-import { ReutilizablesTestPageComponent } from './reutilizables-test-page.component';
+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,
@@ -32,14 +40,54 @@ function createTenantServiceStub(currentTenant: Tenant | null) {
   };
 }
 
+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();
@@ -48,20 +96,20 @@ describe('ReutilizablesTestPageComponent', () => {
     fixture.detectChanges();
 
     const element = fixture.nativeElement as HTMLElement;
-    
-    // Check section title
     const sectionTitle = element.querySelector('.configuracion-tennant h2');
-    expect(sectionTitle?.textContent).toContain('Configuración Tenant');
 
-    // Check header logo source
-    const headerImg = element.querySelector('.tenant-logo-card img[alt="Header Logo"]') as HTMLImageElement;
+    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);
 
-    // Check footer logo source
-    const footerImg = element.querySelector('.tenant-logo-card img[alt="Footer Logo"]') as HTMLImageElement;
+    const footerImg = element.querySelector(
+      '.tenant-logo-card img[alt="Footer Logo"]'
+    ) as HTMLImageElement;
     expect(footerImg?.src).toBe(tenant.footer_logo);
 
-    // Check color hex values
     expect(element.textContent).toContain(tenant.primary_color);
     expect(element.textContent).toContain(tenant.secondary_color);
     expect(element.textContent).toContain(tenant.danger_color);
@@ -69,12 +117,21 @@ describe('ReutilizablesTestPageComponent', () => {
   });
 
   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();
@@ -85,6 +142,53 @@ describe('ReutilizablesTestPageComponent', () => {
     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');
+    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,22 +1,38 @@
 import { Component, inject } from '@angular/core';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
-import { CartComponent, CartItemMock } from '../../../../shared/components/cart/cart.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, CartComponent, InputComponent, PaginatorComponent, ProductCardComponent, StoreSectionComponent],
+  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';
@@ -35,12 +51,13 @@ export class ReutilizablesTestPageComponent {
   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: 'Pantalón recto de scuba negro',
+      title: 'Pantalon recto de scuba negro',
       originalPrice: 95000,
       discount: 20,
       transferPrice: 74800,
@@ -54,7 +71,7 @@ export class ReutilizablesTestPageComponent {
       imageUrl: '/images/zapatillas-running.png'
     },
     {
-      title: 'Remera básica blanca (Sin Descuento)',
+      title: 'Remera basica blanca (Sin Descuento)',
       originalPrice: 32000,
       discount: null,
       transferPrice: 30000,
@@ -65,7 +82,7 @@ export class ReutilizablesTestPageComponent {
   protected readonly cartMockItems: CartItemMock[] = [
     {
       imageUrl: null,
-      product: 'Calza térmica unisex con proceso sense y cintura con mayor agarre',
+      product: 'Calza termica unisex con proceso sense y cintura con mayor agarre',
       originalPrice: 95000,
       discountedPrice: 76000,
       discountPercentage: 20,
@@ -77,7 +94,7 @@ export class ReutilizablesTestPageComponent {
     },
     {
       imageUrl: null,
-      product: 'Pantalón recto de scuba negro',
+      product: 'Pantalon recto de scuba negro',
       originalPrice: null,
       discountedPrice: 89000,
       discountPercentage: null,
@@ -133,26 +150,88 @@ export class ReutilizablesTestPageComponent {
 
   protected hideCart(): void {
     this.cartVisible = false;
-    this.toastService.info('Se disparó el evento de cerrado del carrito mock.');
+    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('¡Operación exitosa! El producto se ha guardado correctamente.');
+      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.');
+      this.toastService.danger(
+        'Alerta de error. Hubo un problema al procesar la solicitud.'
+      );
     } else if (type === 'info') {
-      this.toastService.info('Información del sistema: Hay una nueva actualización disponible.');
+      this.toastService.info(
+        'Informacion del sistema: Hay una nueva actualizacion disponible.'
+      );
     }
   }
 
   protected triggerPersistentToast(type: 'success' | 'danger' | 'info'): void {
     if (type === 'success') {
-      this.toastService.success('¡Éxito persistente! Esta alerta no se cerrará sola.', 0);
+      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 ciérrelo manualmente.', 0);
+      this.toastService.danger(
+        'Error persistente. Por favor, atienda este problema y cierrelo manualmente.',
+        0
+      );
     } else if (type === 'info') {
-      this.toastService.info('Información persistente: Mantendremos este aviso en pantalla.', 0);
+      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.ts

@@ -46,7 +46,7 @@ export class ProductAttributeSelectorComponent {
         const optionNormalized = this.normalizeText(option.value || option.label);
         
         const isAvailable = variants.some(variant => {
-          if (variant.stock <= 0) return false;
+          if (variant.cantidad_maxima <= 0) return false;
 
           const variantAttrValue = this.getDefaultVariantAttributeValue(attribute, variant.attributes);
           if (!variantAttrValue || this.normalizeText(variantAttrValue) !== optionNormalized) {

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

@@ -54,11 +54,8 @@
             <section class="product-detail__section">
               <div class="product-detail__purchase">
                 <app-quantity-selector
-                  [quantity]="quantity()"
-                  [max]="selectedVariant()?.stock ?? 1"
-                  (increase)="increaseQuantity()"
-                  (decrease)="decreaseQuantity()"
-                  (quantityChange)="quantity.set($event)"
+                  [(quantity)]="quantity"
+                  [max]="selectedVariant()?.cantidad_maxima ?? 1"
                 />
 
                 <div class="product-detail__actions">

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

@@ -59,7 +59,7 @@ describe('ProductDetailPageComponent', () => {
       navigate: vi.fn()
     };
     cartServiceStub = {
-      addItem: vi.fn().mockReturnValue(of({}))
+      addItem: vi.fn().mockReturnValue(of({ message: 'Producto agregado al carrito' }))
     };
     toastServiceStub = {
       success: vi.fn(),
@@ -132,7 +132,7 @@ describe('ProductDetailPageComponent', () => {
       images: ['https://example.com/product.png'],
       variant: {
         id: 123,
-        stock: 10,
+        cantidad_maxima: 10,
         images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'],
         definitions: {}
       }
@@ -234,7 +234,7 @@ describe('ProductDetailPageComponent', () => {
       ],
       variant: {
         id: 123,
-        stock: 10,
+        cantidad_maxima: 10,
         images: ['https://example.com/variant1.png'],
         definitions: {
           color: 'beige',
@@ -277,9 +277,11 @@ describe('ProductDetailPageComponent', () => {
   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,
-      stock: 10,
+      cantidad_maxima: 10,
       attributes: {}
     });
     fixture.detectChanges();
@@ -355,14 +357,14 @@ describe('ProductDetailPageComponent', () => {
       ...mockProduct,
       variant: {
         id: 123,
-        stock: 5,
+        cantidad_maxima: 5,
         images: [],
         definitions: {}
       },
       variants_map: [
         {
           variant_id: 123,
-          stock: 5,
+          cantidad_maxima: 5,
           attributes: {}
         }
       ]
@@ -396,14 +398,14 @@ describe('ProductDetailPageComponent', () => {
       ...mockProduct,
       variant: {
         id: 123,
-        stock: 5,
+        cantidad_maxima: 5,
         images: [],
         definitions: {}
       },
       variants_map: [
         {
           variant_id: 123,
-          stock: 5,
+          cantidad_maxima: 5,
           attributes: {}
         }
       ]

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

@@ -140,6 +140,8 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     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);
@@ -159,6 +161,8 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     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) => {
@@ -170,7 +174,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
           if (!currentProduct) return null;
           const updatedVariantsMap = currentProduct.variants_map.map((v) => {
             if (v.variant_id === variantId) {
-              return { ...v, stock: 0 };
+              return { ...v, cantidad_maxima: 0 };
             }
             return v;
           });
@@ -205,8 +209,8 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     }
 
     this.selectedVariant.set(variant);
-    if (variant && this.quantity() > variant.stock) {
-      this.quantity.set(Math.max(1, variant.stock));
+    if (variant && this.quantity() > variant.cantidad_maxima) {
+      this.quantity.set(Math.max(1, variant.cantidad_maxima));
     }
 
     const currentProduct = this.product();
@@ -215,14 +219,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     }
   }
 
-  protected increaseQuantity(): void {
-    const currentStock = this.selectedVariant()?.stock ?? 1;
-    this.quantity.update((current) => current < currentStock ? current + 1 : current);
-  }
 
-  protected decreaseQuantity(): void {
-    this.quantity.update((current) => Math.max(1, current - 1));
-  }
 
   protected addToCart(): void {
     const variant = this.selectedVariant();
@@ -233,8 +230,9 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
 
     this.addingToCart.set(true);
     this.cartService.addItem(variant.variant_id, this.quantity()).subscribe({
-      next: () => {
-        this.toastService.success('Producto agregado al carrito');
+      next: (res) => {
+        const msg = res.message || 'Producto agregado al carrito';
+        this.toastService.success(msg);
         this.addingToCart.set(false);
       },
       error: (err: HttpErrorResponse) => {

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

@@ -33,13 +33,19 @@
       }
     </div>
 
-    <div class="d-flex justify-content-end align-items-center mt-auto cart-item-actions" aria-hidden="true">
-      <button class="border d-inline-flex align-items-center justify-content-center bg-white rounded-0 cart-item-qty-btn" type="button">-</button>
-      <span class="border d-inline-flex align-items-center justify-content-center bg-white rounded-0 cart-item-qty-value" >{{ quantity() }}</span>
-      <button class="border d-inline-flex align-items-center justify-content-center bg-white rounded-0 cart-item-qty-btn" type="button">+</button>
-      <button class="border-0 bg-transparent d-inline-flex align-items-center justify-content-center cart-item-remove-btn" type="button">
-        <i class="fa-solid fa-trash"></i>
-      </button>
+    <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

@@ -22,8 +22,16 @@
 .cart-item-media {
   width: var(--item-media-width);
   height: var(--item-media-height);
-  border-radius: 6px 0 0 6px;
-  background-color: #d9d9d9;
+  border-radius: 6px;
+  background-color: #ffffff;
+  border: 1px solid #eaeaea;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
 }
 
 .cart-item-discount-badge {
@@ -92,25 +100,9 @@
   gap: 0.125rem;
 }
 
-.cart-item-qty-btn,
-.cart-item-qty-value {
-  width: 18px;
-  height: 18px;
-  border-color: #cfcfcf !important;
-  color: #666666;
-  font-size: 10px;
-  line-height: 1;
-}
 
-.cart-item-qty-btn {
-  padding: 0;
-}
+
 
 .cart-item-remove-btn {
-  width: 18px;
-  height: 18px;
   margin-left: 0.35rem;
-  padding: 0;
-  color: #b3b3b3;
-  font-size: 12px;
 }

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

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+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;
@@ -8,6 +10,7 @@ export interface CartItemAttribute {
 @Component({
   selector: 'app-cart-item',
   standalone: true,
+  imports: [QuantitySelectorComponent, IconButtonComponent],
   templateUrl: './cart-item.component.html',
   styleUrl: './cart-item.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -21,6 +24,27 @@ export class CartItemComponent {
   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);

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

@@ -10,7 +10,7 @@
   </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) {
+    @for (item of items(); track item.product + item.discountedPrice + resetKey(); let idx = $index) {
       <app-cart-item
         [imageUrl]="item.imageUrl"
         [product]="item.product"
@@ -19,6 +19,8 @@
         [discountPercentage]="item.discountPercentage"
         [attributes]="item.attributes"
         [quantity]="item.quantity"
+        (quantityChange)="onItemQuantityChange(idx, $event)"
+        (remove)="onItemRemove(idx)"
       />
     }
   </div>
@@ -38,6 +40,10 @@
       <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

@@ -1,7 +1,6 @@
 :host {
   display: block;
   width: 100%;
-  max-width: 370px;
   height: 100%;
 }
 
@@ -59,3 +58,8 @@
   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

@@ -1,7 +1,15 @@
-import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+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;
@@ -20,6 +28,11 @@ export interface CartItemMock {
   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[]>([]);
@@ -30,6 +43,71 @@ export class CartComponent {
 
   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()));
@@ -40,4 +118,44 @@ export class CartComponent {
     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/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/quantity-selector/quantity-selector.component.html

@@ -1,7 +1,7 @@
-<div class="quantity-selector" aria-label="Selector de cantidad">
+<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"
+    class="quantity-selector__button border-0 p-0 fw-bold lh-1"
     aria-label="Disminuir cantidad"
     [disabled]="quantity() <= min()"
     (click)="onDecrease()"
@@ -9,11 +9,11 @@
     -
   </button>
 
-  <span class="quantity-selector__value">{{ quantity() }}</span>
+  <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"
+    class="quantity-selector__button border-0 p-0 fw-bold lh-1"
     aria-label="Aumentar cantidad"
     [disabled]="quantity() >= max()"
     (click)="onIncrease()"

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

@@ -3,24 +3,19 @@
 }
 
 .quantity-selector {
-  display: inline-flex;
-  align-items: center;
   border: 1px solid #d8d8d8;
-  border-radius: 6px;
-  overflow: hidden;
-  min-height: 44px;
+  width: 78px;
+  height: 40px;
+  min-height: 40px;
   background: #f6f6f6;
+  box-sizing: border-box;
 
   &__button {
-    width: 25px;
-    height: 44px;
-    padding: 0;
+    width: 24px;
+    height: 100%;
     font-size: 20px;
-    font-weight: 700;
-    line-height: 1;
     color: #6f6f6f;
     background: #f6f6f6;
-    border: 0;
     transition: background-color 0.2s ease, color 0.2s ease;
     cursor: pointer;
 
@@ -30,18 +25,38 @@
     }
 
     &:disabled {
-      opacity: 0.4;
+      color: #A0A0A0;
+      opacity: 1;
       cursor: not-allowed;
     }
   }
 
   &__value {
-    min-width: 35px;
-    text-align: center;
     font-size: 16px;
-    font-weight: 700;
-    line-height: 1;
     color: #6f6f6f;
-    user-select: none;
+  }
+
+  &--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;
+    }
   }
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
 
 @Component({
   selector: 'app-quantity-selector',
@@ -9,27 +9,25 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class QuantitySelectorComponent {
-  readonly quantity = input<number>(1);
+  readonly quantity = model<number>(1);
   readonly min = input<number>(1);
   readonly max = input<number>(100);
+  readonly size = input<'small' | 'medium'>('medium');
 
   readonly increase = output<void>();
   readonly decrease = output<void>();
-  readonly quantityChange = output<number>();
 
   protected onDecrease(): void {
     if (this.quantity() > this.min()) {
-      const newValue = this.quantity() - 1;
+      this.quantity.set(this.quantity() - 1);
       this.decrease.emit();
-      this.quantityChange.emit(newValue);
     }
   }
 
   protected onIncrease(): void {
     if (this.quantity() < this.max()) {
-      const newValue = this.quantity() + 1;
+      this.quantity.set(this.quantity() + 1);
       this.increase.emit();
-      this.quantityChange.emit(newValue);
     }
   }
 }