feat: add ReutilizablesTestPageComponent to showcase and validate shared button and input component variants

feat: implement tenant branding injection and SSR bootstrap logic with comprehensive testing
feat: refactor routing and enhance tenant service integration
2026-06-26 16:58:14 -03:00 · 2026-06-26 16:25:31 -03:00 · 2026-06-26 15:55:45 -03:00
155 changed files with 342 additions and 11641 deletions
--- a/angular.json
+++ b/angular.json
@@ -2,8 +2,7 @@
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "cli": {
-    "packageManager": "npm",
-    "analytics": false
+    "packageManager": "npm"
  },
  "newProjectRoot": "projects",
  "projects": {
@@ -36,10 +35,7 @@
            "server": "src/main.server.ts",
            "outputMode": "server",
            "security": {
-              "allowedHosts": [
-                "localhost",
-                "127.0.0.1"
-              ]
+              "allowedHosts": ["localhost", "127.0.0.1"]
            },
            "ssr": {
              "entry": "src/server.ts"
@@ -62,11 +58,6 @@
              "outputHashing": "all"
            },
            "development": {
-              "optimization": true,
-              "extractLicenses": false,
-              "sourceMap": true
-            },
-            "local": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
@@ -82,9 +73,6 @@
            },
            "development": {
              "buildTarget": "shopit-front:build:development"
-            },
-            "local": {
-              "buildTarget": "shopit-front:build:local"
            }
          },
          "defaultConfiguration": "development"
@@ -95,4 +83,4 @@
      }
    }
  }
-}
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,6 @@
        "@fortawesome/fontawesome-free": "^7.2.0",
        "bootstrap": "^5.3.8",
        "express": "^5.1.0",
-        "qrcode": "1.5.4",
        "rxjs": "~7.8.0",
        "tslib": "^2.3.0"
      },
@@ -4395,15 +4394,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001799",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
@@ -4588,24 +4578,6 @@
        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
      }
    },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "license": "MIT"
-    },
    "node_modules/content-disposition": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
@@ -4787,15 +4759,6 @@
        }
      }
    },
-    "node_modules/decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/decimal.js": {
      "version": "10.6.0",
      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
@@ -4823,12 +4786,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/dijkstrajs": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
-      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
-      "license": "MIT"
-    },
    "node_modules/dom-serializer": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -5280,19 +5237,6 @@
        "url": "https://opencollective.com/express"
      }
    },
-    "node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "license": "MIT",
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/forwarded": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -5362,6 +5306,7 @@
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
      "license": "ISC",
      "engines": {
        "node": "6.* || 8.* || >= 10.*"
@@ -5982,18 +5927,6 @@
        "@lmdb/lmdb-win32-x64": "3.5.4"
      }
    },
-    "node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "license": "MIT",
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/log-symbols": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-7.0.1.tgz",
@@ -6770,33 +6703,6 @@
      "license": "MIT",
      "optional": true
    },
-    "node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "license": "MIT",
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "license": "MIT",
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/p-map": {
      "version": "7.0.4",
      "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.4.tgz",
@@ -6810,15 +6716,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/pacote": {
      "version": "21.5.1",
      "resolved": "https://registry.npmjs.org/pacote/-/pacote-21.5.1.tgz",
@@ -6927,15 +6824,6 @@
        "node": ">= 0.8"
      }
    },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/path-key": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -7033,15 +6921,6 @@
        "node": ">=16.20.0"
      }
    },
-    "node_modules/pngjs": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
-      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
    "node_modules/postcss": {
      "version": "8.5.15",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
@@ -7154,154 +7033,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/qrcode": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
-      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
-      "license": "MIT",
-      "dependencies": {
-        "dijkstrajs": "^1.0.1",
-        "pngjs": "^5.0.0",
-        "yargs": "^15.3.1"
-      },
-      "bin": {
-        "qrcode": "bin/qrcode"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/qrcode/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/qrcode/node_modules/cliui": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^6.2.0"
-      }
-    },
-    "node_modules/qrcode/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT"
-    },
-    "node_modules/qrcode/node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/wrap-ansi": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/y18n": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-      "license": "ISC"
-    },
-    "node_modules/qrcode/node_modules/yargs": {
-      "version": "15.4.1",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
-      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
-      "license": "MIT",
-      "dependencies": {
-        "cliui": "^6.0.0",
-        "decamelize": "^1.2.0",
-        "find-up": "^4.1.0",
-        "get-caller-file": "^2.0.1",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^4.2.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^18.1.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/yargs-parser": {
-      "version": "18.1.3",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-      "license": "ISC",
-      "dependencies": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/qs": {
      "version": "6.15.2",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
@@ -7362,15 +7093,6 @@
      "dev": true,
      "license": "Apache-2.0"
    },
-    "node_modules/require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/require-from-string": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -7381,12 +7103,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/require-main-filename": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-      "license": "ISC"
-    },
    "node_modules/restore-cursor": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
@@ -7609,12 +7325,6 @@
        "url": "https://opencollective.com/express"
      }
    },
-    "node_modules/set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "license": "ISC"
-    },
    "node_modules/setprototypeof": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -8980,12 +8690,6 @@
        "node": ">= 8"
      }
    },
-    "node_modules/which-module": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
-      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
-      "license": "ISC"
-    },
    "node_modules/why-is-node-running": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
    "@fortawesome/fontawesome-free": "^7.2.0",
    "bootstrap": "^5.3.8",
    "express": "^5.1.0",
-    "qrcode": "1.5.4",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0"
  },
--- a/public/images/pantalon-scuba.png
+++ b/public/images/pantalon-scuba.png
--- a/public/images/zapatillas-running.png
+++ b/public/images/zapatillas-running.png
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,11 +1,9 @@
-import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
+import { provideHttpClient, withFetch } from '@angular/common/http';
 import { ApplicationConfig, provideAppInitializer, provideBrowserGlobalErrorListeners } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideClientHydration } from '@angular/platform-browser';

 import { routes } from './app.routes';
-import { authBootstrap } from './core/services/auth/auth-bootstrap';
-import { authInterceptor } from './core/services/auth/auth.interceptor';
 import { tenantBootstrap } from './core/services/tenant-bootstrap';

 export const appConfig: ApplicationConfig = {
@@ -13,8 +11,7 @@ export const appConfig: ApplicationConfig = {
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes),
    provideClientHydration(),
-    provideHttpClient(withFetch(), withInterceptors([authInterceptor])),
-    provideAppInitializer(authBootstrap),
+    provideHttpClient(withFetch()),
    provideAppInitializer(tenantBootstrap)
  ]
 };
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1,7 +1,5 @@
@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">
--- a/src/app/app.routes.spec.ts
+++ b/src/app/app.routes.spec.ts
@@ -1,15 +1,11 @@
-import { computed, signal } from '@angular/core';
+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 { AuthService } from './core/services/auth/auth.service';
-import { CartService } from './core/services/cart/cart.service';
+import { routes } from './app.routes';
 import { Tenant } from './core/services/tenant.interface';
 import { TenantService } from './core/services/tenant.service';
-import { routes } from './app.routes';

 const tenant: Tenant = {
  id: 1,
@@ -19,9 +15,7 @@ const tenant: Tenant = {
  primary_color: '#6376F3',
  secondary_color: '#A0A0A0',
  danger_color: '#FF8888',
-  success_color: '#198754',
-  header_bg_color: '#313131',
-  footer_bg_color: '#313131',
+  header_footer_bg_color: '#313131',
  header_logo: 'https://example.com/header.png',
  footer_logo: 'https://example.com/footer.png'
 };
@@ -37,44 +31,13 @@ function createTenantServiceStub(
    tenant: tenantState.asReadonly(),
    status: statusState.asReadonly(),
    getTenant: () => tenantState(),
-    getTenantApiUrl: () => {
-      const tenantVal = tenantState();
-      if (!tenantVal) {
-        throw new Error('No se pudo resolver el tenant activo.');
-      }
-      return `http://localhost:8000/api/tenants/${tenantVal.codigo}`;
-    },
    bootstrap: vi.fn().mockResolvedValue(undefined)
  };
 }

-function createAuthServiceStub(isAuthenticated = false) {
-  const tokenState = signal<string | null>(isAuthenticated ? 'test-token' : null);
-  const userState = signal(
-    isAuthenticated ? { id: 1, nombre_apellido: 'Ada Lovelace', email: 'ada@example.com' } : null
-  );
-
-  return {
-    user: userState.asReadonly(),
-    token: tokenState.asReadonly(),
-    isAuthenticated: computed(() => tokenState() !== null),
-    login: vi.fn(),
-    register: vi.fn(),
-    logout: vi.fn(),
-    loadCurrentUser: vi.fn(),
-    hydrateSession: vi.fn(),
-    bootstrap: vi.fn().mockResolvedValue(undefined),
-    clearSession: vi.fn(() => {
-      userState.set(null);
-      tokenState.set(null);
-    })
-  };
-}
-
 async function renderAppAt(
  url: string,
-  tenantService: ReturnType<typeof createTenantServiceStub> = createTenantServiceStub(),
-  authService: ReturnType<typeof createAuthServiceStub> = createAuthServiceStub()
+  tenantService: ReturnType<typeof createTenantServiceStub> = createTenantServiceStub()
 ) {
  TestBed.resetTestingModule();

@@ -85,17 +48,6 @@ async function renderAppAt(
      {
        provide: TenantService,
        useValue: tenantService
-      },
-      {
-        provide: CartService,
-        useValue: {
-          cart: signal(null).asReadonly(),
-          loadCart: () => of({ id: 1, items: [], subtotal: '0' })
-        }
-      },
-      {
-        provide: AuthService,
-        useValue: authService
      }
    ]
  }).compileComponents();
@@ -118,8 +70,8 @@ describe('app routes', () => {

    expect(router.url).toBe('/');
    expect(compiled.querySelector('.store-layout')).not.toBeNull();
-    expect(compiled.querySelector('app-store-home-page')).not.toBeNull();
-    expect(compiled.textContent).toContain('Productos');
+    expect(compiled.querySelector('.store-home')).not.toBeNull();
+    expect(compiled.textContent).toContain('Tienda en construccion');
    expect(compiled.style.getPropertyValue('--tenant-primary')).toBe(tenant.primary_color);
  });

@@ -135,63 +87,14 @@ describe('app routes', () => {
    expect(compiled.textContent).toContain('Componentes reutilizables');
  });

-  it('loads the login page at /login and shows the create account CTA', async () => {
-    const { fixture, router } = await renderAppAt('/login');
-    const compiled = fixture.nativeElement as HTMLElement;
-
-    expect(router.url).toBe('/login');
-    expect(compiled.querySelector('app-login-page')).not.toBeNull();
-    expect(compiled.textContent).toContain('Iniciar sesion');
-    expect(compiled.textContent).toContain('Crear cuenta');
-  });
-
-  it('loads the register page at /register and renders the shared auth fields', async () => {
-    const { fixture, router } = await renderAppAt('/register');
-    const compiled = fixture.nativeElement as HTMLElement;
-    const registerPage = compiled.querySelector('app-register-page');
-    const placeholders = Array.from(registerPage?.querySelectorAll('input') ?? []).map((input) =>
-      input.getAttribute('placeholder')
-    );
-
-    expect(router.url).toBe('/register');
-    expect(registerPage).not.toBeNull();
-    expect(compiled.textContent).toContain('CREAR CUENTA');
-    expect(compiled.textContent).toContain('Volver');
-    expect(placeholders).toEqual([
-      'Nombre y Apellido',
-      'Email',
-      'Contrasena',
-      'Repetir Contrasena'
-    ]);
-  });
-
-  it('redirects authenticated users away from /login', async () => {
-    const { router } = await renderAppAt('/login', createTenantServiceStub(), createAuthServiceStub(true));
-
-    expect(router.url).toBe('/');
-  });
-
  it('renders the tenant not found screen for any route when the tenant is missing', async () => {
    const { fixture } = await renderAppAt(
      '/componentes-test/reutilizables',
-      createTenantServiceStub('not-found', null),
-      createAuthServiceStub()
+      createTenantServiceStub('not-found', null)
    );
    const compiled = fixture.nativeElement as HTMLElement;

    expect(compiled.querySelector('.tenant-status')).not.toBeNull();
    expect(compiled.textContent).toContain('No encontramos una tienda para este dominio');
  });
-
-  it('redirects unauthenticated users from /checkout to /login', async () => {
-    const { router } = await renderAppAt('/checkout', createTenantServiceStub(), createAuthServiceStub(false));
-
-    expect(router.url).toBe('/login');
-  });
-
-  it('allows authenticated users to access /checkout', async () => {
-    const { router } = await renderAppAt('/checkout', createTenantServiceStub(), createAuthServiceStub(true));
-
-    expect(router.url).toBe('/checkout');
-  });
 });
--- a/src/app/app.spec.ts
+++ b/src/app/app.spec.ts
@@ -1,12 +1,6 @@
-import '@angular/compiler';
 import { signal } from '@angular/core';
-import { TestBed, getTestBed } from '@angular/core/testing';
-import {
-  BrowserTestingModule,
-  platformBrowserTesting
-} from '@angular/platform-browser/testing';
+import { TestBed } from '@angular/core/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';
@@ -20,9 +14,7 @@ const tenant: Tenant = {
  primary_color: '#6376F3',
  secondary_color: '#A0A0A0',
  danger_color: '#FF8888',
-  success_color: '#198754',
-  header_bg_color: '#313131',
-  footer_bg_color: '#313131',
+  header_footer_bg_color: '#313131',
  header_logo: 'https://example.com/header.png',
  footer_logo: 'https://example.com/footer.png'
 };
@@ -40,21 +32,6 @@ 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],
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -3,8 +3,6 @@ import { RouterOutlet } from '@angular/router';

 import { TenantService } from './core/services/tenant.service';
 import { DEFAULT_TENANT_BRANDING } from './core/services/tenant-ssr-cache.store';
-import { ModalHostComponent } from './shared/components/modal-host/modal-host.component';
-import { ToastContainerComponent } from './shared/components/toast-container/toast-container.component';

 function hexToRgb(hex: string): string {
  const cleanHex = hex.replace('#', '').trim();
@@ -23,30 +21,17 @@ function hexToRgb(hex: string): string {

@Component({
  selector: 'app-root',
-  imports: [RouterOutlet, ToastContainerComponent, ModalHostComponent],
+  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.scss',
  host: {
    '[style.--tenant-primary]': 'tenantPrimaryColor()',
    '[style.--tenant-secondary]': 'tenantSecondaryColor()',
    '[style.--tenant-danger]': 'tenantDangerColor()',
-    '[style.--tenant-success]': 'tenantSuccessColor()',
-    '[style.--color-primary]': 'tenantPrimaryColor()',
-    '[style.--color-secondary]': 'tenantSecondaryColor()',
-    '[style.--color-danger]': 'tenantDangerColor()',
-    '[style.--color-success]': 'tenantSuccessColor()',
    '[style.--tenant-primary-rgb]': 'tenantPrimaryColorRgb()',
    '[style.--tenant-secondary-rgb]': 'tenantSecondaryColorRgb()',
    '[style.--tenant-danger-rgb]': 'tenantDangerColorRgb()',
-    '[style.--tenant-success-rgb]': 'tenantSuccessColorRgb()',
-    '[style.--color-primary-rgb]': 'tenantPrimaryColorRgb()',
-    '[style.--color-secondary-rgb]': 'tenantSecondaryColorRgb()',
-    '[style.--color-danger-rgb]': 'tenantDangerColorRgb()',
-    '[style.--color-success-rgb]': 'tenantSuccessColorRgb()',
-    '[style.--tenant-header-bg]': 'tenantHeaderBgColor()',
-    '[style.--tenant-footer-bg]': 'tenantFooterBgColor()',
-    '[style.--color-header-bg]': 'tenantHeaderBgColor()',
-    '[style.--color-footer-bg]': 'tenantFooterBgColor()'
+    '[style.--tenant-header-footer-bg]': 'tenantHeaderFooterBgColor()'
  }
 })
 export class App {
@@ -63,9 +48,6 @@ export class App {
  protected readonly tenantDangerColor = computed(
    () => this.tenantService.tenant()?.danger_color ?? DEFAULT_TENANT_BRANDING.dangerColor
  );
-  protected readonly tenantSuccessColor = computed(
-    () => this.tenantService.tenant()?.success_color ?? DEFAULT_TENANT_BRANDING.successColor
-  );
  protected readonly tenantPrimaryColorRgb = computed(() =>
    hexToRgb(this.tenantPrimaryColor())
  );
@@ -75,17 +57,10 @@ export class App {
  protected readonly tenantDangerColorRgb = computed(() =>
    hexToRgb(this.tenantDangerColor())
  );
-  protected readonly tenantSuccessColorRgb = computed(() =>
-    hexToRgb(this.tenantSuccessColor())
-  );
-  protected readonly tenantHeaderBgColor = computed(
+  protected readonly tenantHeaderFooterBgColor = computed(
    () =>
-      this.tenantService.tenant()?.header_bg_color ??
-      DEFAULT_TENANT_BRANDING.headerBgColor
+      this.tenantService.tenant()?.header_footer_bg_color ??
+      DEFAULT_TENANT_BRANDING.headerFooterBgColor
  );
-  protected readonly tenantFooterBgColor = computed(
-    () =>
-      this.tenantService.tenant()?.footer_bg_color ??
-      DEFAULT_TENANT_BRANDING.footerBgColor
-  );
-}
+}
+
--- a/src/app/core/layout/simple-layout/simple-layout.component.html
+++ b/src/app/core/layout/simple-layout/simple-layout.component.html
@@ -1,13 +0,0 @@
-<section class="simple-layout">
-  <div class="simple-layout__container container-xl">
-    <div class="simple-layout__row row justify-content-center">
-      <div class="simple-layout__column col-12 col-md-9 col-lg-7 col-xl-5">
-        <article class="simple-layout__card card border-0 shadow-lg">
-          <div class="simple-layout__body card-body">
-            <router-outlet />
-          </div>
-        </article>
-      </div>
-    </div>
-  </div>
-</section>
--- a/src/app/core/layout/simple-layout/simple-layout.component.scss
+++ b/src/app/core/layout/simple-layout/simple-layout.component.scss
@@ -1,50 +0,0 @@
-:host {
-  display: block;
-}
-
-.simple-layout {
-  padding: 1.5rem 0 2rem;
-}
-
-.simple-layout__container {
-  padding-inline: 1rem;
-}
-
-.simple-layout__row {
-  padding-block: 1rem;
-}
-
-.simple-layout__card {
-  border-radius: 5px;
-  overflow: hidden;
-}
-
-.simple-layout__body {
-  padding: 2rem 1.5rem;
-}
-
-:host ::ng-deep .auth-title {
-  margin: 0;
-  color: #666666;
-  font-size: 17px;
-  font-weight: 700;
-  text-transform: uppercase;
-}
-
-@media (min-width: 768px) {
-  .simple-layout {
-    padding: 3rem 0;
-  }
-
-  .simple-layout__container {
-    padding-inline: 1.5rem;
-  }
-
-  .simple-layout__row {
-    padding-block: 1.5rem;
-  }
-
-  .simple-layout__body {
-    padding: 3rem;
-  }
-}
--- a/src/app/core/layout/simple-layout/simple-layout.component.ts
+++ b/src/app/core/layout/simple-layout/simple-layout.component.ts
@@ -1,11 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-simple-layout',
-  imports: [RouterOutlet],
-  templateUrl: './simple-layout.component.html',
-  styleUrl: './simple-layout.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class SimpleLayoutComponent {}
--- a/src/app/core/layout/store-layout/store-footer/store-footer.component.scss
+++ b/src/app/core/layout/store-layout/store-footer/store-footer.component.scss
@@ -1,5 +1,5 @@
 .store-layout__footer {
-  background-color: var(--tenant-footer-bg);
+  background-color: var(--tenant-header-footer-bg);
 }

 .store-layout__brand-slot {
--- a/src/app/core/layout/store-layout/store-header/store-header.component.html
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.html
@@ -1,28 +1,28 @@
 <header class="store-layout__header">
  <div class="store-layout__header-main">
-    <div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-row flex-wrap align-items-center justify-content-between gap-3">
-      <a
-        routerLink="/"
-        class="store-layout__brand-slot d-inline-flex align-items-center gap-3 flex-shrink-0 text-decoration-none"
+    <div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-wrap align-items-center justify-content-between gap-3">
+      <div
+        class="store-layout__brand-slot d-inline-flex align-items-center gap-3 flex-shrink-0"
        data-testid="store-header-brand-slot"
        aria-label="Logo del comercio"
      >
-        @if (logoUrl()) {
-          <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>
          </div>
        }
-      </a>
+      </div>

-      <div class="d-flex flex-row align-items-center gap-3 ms-auto flex-nowrap flex-grow-1 justify-content-between justify-content-md-end">
+      <div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-3 ms-auto w-100 w-lg-auto">
        <div class="input-group store-layout__search" role="search">
          <label class="visually-hidden" for="store-search-input">Buscar productos</label>
          <input
            id="store-search-input"
            type="search"
            class="form-control store-layout__search-input border-end-0 rounded-start"
+            placeholder="Buscar productos"
          />
          <button
            type="button"
@@ -34,30 +34,16 @@
        </div>

        <div class="d-flex align-items-center justify-content-end gap-1" aria-label="Acciones de usuario">
-          <app-cart-icon
-            [quantity]="cartQuantity()"
-            ariaLabel="Carrito de compras"
-            title="Carrito"
-            (click)="cartClick.emit()"
-          />
-          <div class="store-layout__user-menu">
-            <app-icon-button
-              variant="user"
-              ariaLabel="Mi cuenta"
-              ariaControls="store-user-dropdown"
-              [ariaExpanded]="isUserDropdownOpen()"
-              title="Mi cuenta"
-              (clicked)="toggleUserDropdown()"
-            />
-
-            @if (isUserDropdownOpen()) {
-              <app-user-dropdown
-                id="store-user-dropdown"
-                [user]="user()"
-                (logoutClick)="onLogoutClick()"
-              />
-            }
-          </div>
+          @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>
+          }
        </div>
      </div>
    </div>
--- a/src/app/core/layout/store-layout/store-header/store-header.component.scss
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.scss
@@ -1,6 +1,6 @@
 .store-layout__header {
  color: #ffffff;
-  background-color: var(--tenant-header-bg);
+  background-color: var(--tenant-header-footer-bg);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
 }

@@ -41,62 +41,51 @@
 }

 .store-layout__search {
-  width: min(100%, 260px);
-  min-width: 0;
+  width: min(100%, 24rem);
+  min-width: 18rem;
 }

 .store-layout__search-input {
-  color: #666666;
-  border-color: #cccccc;
+  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.96);
 }

-.store-layout__search-input::placeholder {
-  color: #666666;
-}
-
 .store-layout__search-input:focus {
-  border-color: #cccccc;
-  box-shadow: none;
-  outline: none;
+  border-color: var(--tenant-primary);
+  box-shadow: 0 0 0 0.25rem color-mix(in srgb, white 70%, var(--tenant-primary));
 }

 .store-layout__search-button {
-  color: #a0a0a0;
-  border-color: #cccccc;
-  background-color: rgba(255, 255, 255, 0.96);
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.2);
+  background-color: color-mix(in srgb, white 10%, var(--tenant-header-footer-bg));
 }

 .store-layout__search-button:hover,
 .store-layout__search-button:focus-visible {
-  color: #8a8a8a;
-  border-color: #cccccc;
-  background-color: #ffffff;
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.28);
+  background-color: color-mix(in srgb, white 16%, var(--tenant-header-footer-bg));
 }

 .store-layout__action-button {
-  color: #a0a0a0;
+  color: #ffffff;
 }

 .store-layout__action-button:hover,
 .store-layout__action-button:focus-visible {
-  color: #8a8a8a;
-}
-
-.store-layout__user-menu {
-  position: relative;
-  display: inline-flex;
+  color: color-mix(in srgb, white 84%, var(--tenant-primary));
 }

 .store-layout__category-trigger {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
-  color: #a0a0a0;
+  color: #ffffff;
 }

 .store-layout__category-trigger:hover,
 .store-layout__category-trigger:focus-visible {
-  color: #8a8a8a;
+  color: color-mix(in srgb, white 84%, var(--tenant-primary));
 }

@keyframes store-header-logo-skeleton {
@@ -113,4 +102,8 @@
  .store-layout__brand-slot {
    min-width: 0;
  }
+
+  .store-layout__search {
+    min-width: 0;
+  }
 }
--- a/src/app/core/layout/store-layout/store-header/store-header.component.ts
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.ts
@@ -1,62 +1,17 @@
-import { Component, ElementRef, HostListener, inject, input, output, signal } from '@angular/core';
-import { RouterLink } from '@angular/router';
-import { AuthUser } from '../../../services/auth/auth.interfaces';
-import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
-import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
-import { UserDropdownComponent } from './user-dropdown/user-dropdown.component';
+import { Component, Input } from '@angular/core';
+
+export type StoreHeaderAction = {
+  label: string;
+  iconClass: string;
+};

@Component({
  selector: 'app-store-header',
-  imports: [CartIconComponent, IconButtonComponent, RouterLink, UserDropdownComponent],
+  imports: [],
  templateUrl: './store-header.component.html',
  styleUrl: './store-header.component.scss'
 })
 export class StoreHeaderComponent {
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
-  readonly logoUrl = input<string | null>(null);
-  readonly cartQuantity = input<number>(0);
-  readonly user = input<AuthUser | null>(null);
-  readonly isAuthenticated = input<boolean>(false);
-  readonly cartClick = output<void>();
-  readonly loginClick = output<void>();
-  readonly logoutClick = output<void>();
-
-  protected readonly isUserDropdownOpen = signal(false);
-
-  @HostListener('document:click', ['$event'])
-  protected onDocumentClick(event: MouseEvent): void {
-    if (!this.isUserDropdownOpen()) {
-      return;
-    }
-
-    const target = event.target;
-    if (target instanceof Node && !this.elementRef.nativeElement.contains(target)) {
-      this.isUserDropdownOpen.set(false);
-    }
-  }
-
-  @HostListener('document:keydown.escape')
-  protected onEscapeKey(): void {
-    this.isUserDropdownOpen.set(false);
-  }
-
-  protected toggleUserDropdown(): void {
-    if (!this.isAuthenticated()) {
-      this.loginClick.emit();
-      return;
-    }
-
-    this.isUserDropdownOpen.update((isOpen) => !isOpen);
-  }
-
-  protected onLoginClick(): void {
-    this.isUserDropdownOpen.set(false);
-    this.loginClick.emit();
-  }
-
-  protected onLogoutClick(): void {
-    this.isUserDropdownOpen.set(false);
-    this.logoutClick.emit();
-  }
+  @Input({ required: true }) headerActions: StoreHeaderAction[] = [];
+  @Input() logoUrl: string | null = null;
 }
--- a/src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.html
+++ b/src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.html
@@ -1,23 +0,0 @@
-<section class="user-dropdown" role="menu" aria-label="Menu de usuario">
-  <div class="user-dropdown__profile">
-    <span class="user-dropdown__name">{{ displayName() }}</span>
-  </div>
-
-  <div class="user-dropdown__divider"></div>
-
-  <button type="button" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-account">
-    Mi cuenta
-  </button>
-  <button type="button" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-purchases">
-    Mis compras
-  </button>
-  <button
-    type="button"
-    class="user-dropdown__item"
-    role="menuitem"
-    data-testid="user-dropdown-logout"
-    (click)="logoutClick.emit()"
-  >
-    Cerrar sesion
-  </button>
-</section>
--- a/src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss
+++ b/src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss
@@ -1,74 +0,0 @@
-:host {
-  position: absolute;
-  top: calc(100% + 0.75rem);
-  right: 0;
-  z-index: 1060;
-  display: block;
-  width: min(18rem, calc(100vw - 2rem));
-}
-
-.user-dropdown {
-  display: grid;
-  background: #ffffff;
-  border: 1px solid rgba(32, 32, 32, 0.1);
-  border-radius: 8px;
-  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
-  padding: 0.75rem;
-  animation: user-dropdown-enter 0.16s ease-out;
-}
-
-.user-dropdown__profile {
-  padding: 0.25rem;
-}
-
-.user-dropdown__name {
-  color: #a0a0a0;
-  font-size: 13px;
-  font-weight: 325;
-  line-height: 1.2;
-}
-
-.user-dropdown__divider {
-  height: 1px;
-  margin: 0.6rem 0;
-  background: rgba(32, 32, 32, 0.08);
-}
-
-.user-dropdown__item {
-  width: 100%;
-  border: 0;
-  border-radius: 6px;
-  padding: 0.65rem 0.6rem;
-  color: #8a8a8a;
-  font-size: 14px;
-  font-weight: 700;
-  text-align: left;
-  background: transparent;
-  cursor: pointer;
-  transition: color 0.15s ease;
-}
-
-.user-dropdown__item:active,
-.user-dropdown__item:hover,
-.user-dropdown__item:focus-visible {
-  color: var(--tenant-primary);
-  outline: none;
-}
-
-@keyframes user-dropdown-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-0.35rem);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 575.98px) {
-  :host {
-    right: -0.5rem;
-  }
-}
--- a/src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.ts
+++ b/src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.ts
@@ -1,14 +0,0 @@
-import { Component, computed, input, output } from '@angular/core';
-import { AuthUser } from '../../../../services/auth/auth.interfaces';
-
-@Component({
-  selector: 'app-user-dropdown',
-  templateUrl: './user-dropdown.component.html',
-  styleUrl: './user-dropdown.component.scss'
-})
-export class UserDropdownComponent {
-  readonly user = input<AuthUser | null>(null);
-  readonly logoutClick = output<void>();
-
-  protected readonly displayName = computed(() => this.user()?.nombre_apellido || 'Mi cuenta');
-}
--- a/src/app/core/layout/store-layout/store-layout.component.html
+++ b/src/app/core/layout/store-layout/store-layout.component.html
@@ -1,31 +1,5 @@
 <div class="store-layout d-flex flex-column flex-grow-1">
-  <app-store-header
-    [cartQuantity]="cartQuantity()"
-    [logoUrl]="tenant()?.header_logo ?? null"
-    [user]="user()"
-    [isAuthenticated]="isAuthenticated()"
-    (cartClick)="isCartOpen.set(!isCartOpen())"
-    (loginClick)="onLoginClick()"
-    (logoutClick)="onLogoutClick()"
-  />
-
-  @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" (click)="isCartOpen.set(false)">Seguir comprando</app-button>
-        <app-button variant="primary" class="flex-grow-1" (click)="onCheckoutClick()">Comprar</app-button>
-      </app-cart>
-    </div>
-  }
+  <app-store-header [headerActions]="headerActions" [logoUrl]="tenant()?.header_logo ?? null" />

  <main class="flex-grow-1 d-block">
    <router-outlet />
--- a/src/app/core/layout/store-layout/store-layout.component.scss
+++ b/src/app/core/layout/store-layout/store-layout.component.scss
@@ -1,55 +1,12 @@
 :host {
  display: flex;
  min-height: 100dvh;
-  background: #f5f5f5;
+  background:
+    radial-gradient(
+      circle at top,
+      color-mix(in srgb, white 88%, var(--tenant-primary)) 0%,
+      transparent 58%
+    ),
+    #f6f6f6;
  color: #202020;
 }
-
-.store-layout {
-  position: relative;
-}
-
-.store-layout__cart-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 1040;
-  background: transparent;
-}
-
-.store-layout__cart-dropdown {
-  position: absolute;
-  top: 76px;
-  right: calc((100% - 1320px) / 2 + 1.5rem);
- 
-  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);
-  }
-}
--- a/src/app/core/layout/store-layout/store-layout.component.spec.ts
+++ b/src/app/core/layout/store-layout/store-layout.component.spec.ts
@@ -1,16 +1,9 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { provideRouter, Router } from '@angular/router';
-
-import { of } from 'rxjs';
+import { provideRouter } from '@angular/router';

 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 { AuthService } from '../../services/auth/auth.service';
-import { AuthUser } from '../../services/auth/auth.interfaces';
 import { StoreLayoutComponent } from './store-layout.component';

 const tenant: Tenant = {
@@ -21,9 +14,7 @@ const tenant: Tenant = {
  primary_color: '#6376F3',
  secondary_color: '#A0A0A0',
  danger_color: '#FF8888',
-  success_color: '#198754',
-  header_bg_color: '#313131',
-  footer_bg_color: '#313131',
+  header_footer_bg_color: '#313131',
  header_logo: 'https://example.com/header.png',
  footer_logo: 'https://example.com/footer.png'
 };
@@ -31,8 +22,6 @@ const tenant: Tenant = {
 describe('StoreLayoutComponent', () => {
  beforeEach(async () => {
    const tenantState = signal(tenant);
-    const authUserState = signal<AuthUser | null>(null);
-    const isAuthenticatedState = signal(false);

    await TestBed.configureTestingModule({
      imports: [StoreLayoutComponent],
@@ -46,33 +35,6 @@ 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()
-          }
-        },
-        {
-          provide: AuthService,
-          useValue: {
-            user: authUserState,
-            isAuthenticated: isAuthenticatedState,
-            logout: vi.fn().mockReturnValue(of(void 0))
-          }
        }
      ]
    }).compileComponents();
@@ -111,101 +73,4 @@ describe('StoreLayoutComponent', () => {
    expect(compiled.querySelector('.fa-facebook')).not.toBeNull();
    expect(compiled.querySelector('.fa-linkedin-in')).not.toBeNull();
  });
-
-  it('redirects to /login when user icon is clicked and user is not logged in', () => {
-    const authService = TestBed.inject(AuthService);
-    const router = TestBed.inject(Router);
-    vi.spyOn(router, 'navigate');
-
-    (authService.isAuthenticated as any).set(false);
-
-    const fixture = TestBed.createComponent(StoreLayoutComponent);
-    fixture.detectChanges();
-
-    const compiled = fixture.nativeElement as HTMLElement;
-    const userButton = compiled.querySelector('app-icon-button[variant="user"] button') as HTMLButtonElement;
-    expect(userButton).not.toBeNull();
-    userButton.click();
-    fixture.detectChanges();
-
-    expect(compiled.querySelector('app-user-dropdown')).toBeNull();
-    expect(router.navigate).toHaveBeenCalledWith(['/login']);
-  });
-
-  it('opens authenticated user dropdown without redirecting on icon click', () => {
-    const authService = TestBed.inject(AuthService);
-    const router = TestBed.inject(Router);
-    vi.spyOn(router, 'navigate');
-
-    (authService.isAuthenticated as any).set(true);
-    (authService.user as any).set({
-      id: 1,
-      nombre_apellido: 'Ada Lovelace',
-      email: 'ada@example.com'
-    });
-
-    const fixture = TestBed.createComponent(StoreLayoutComponent);
-    fixture.detectChanges();
-
-    const compiled = fixture.nativeElement as HTMLElement;
-    const userButton = compiled.querySelector('app-icon-button[variant="user"] button') as HTMLButtonElement;
-    expect(userButton).not.toBeNull();
-    userButton.click();
-    fixture.detectChanges();
-
-    expect(compiled.querySelector('app-user-dropdown')).not.toBeNull();
-    expect(compiled.textContent).toContain('Ada Lovelace');
-    expect(router.navigate).not.toHaveBeenCalled();
-  });
-
-  it('logs out from the authenticated user dropdown', () => {
-    const authService = TestBed.inject(AuthService);
-    const router = TestBed.inject(Router);
-    vi.spyOn(router, 'navigate');
-
-    (authService.isAuthenticated as any).set(true);
-    (authService.user as any).set({
-      id: 1,
-      nombre_apellido: 'Ada Lovelace',
-      email: 'ada@example.com'
-    });
-
-    const fixture = TestBed.createComponent(StoreLayoutComponent);
-    fixture.detectChanges();
-
-    const compiled = fixture.nativeElement as HTMLElement;
-    const userButton = compiled.querySelector('app-icon-button[variant="user"] button') as HTMLButtonElement;
-    userButton.click();
-    fixture.detectChanges();
-
-    const logoutButton = compiled.querySelector('[data-testid="user-dropdown-logout"]') as HTMLButtonElement;
-    expect(logoutButton).not.toBeNull();
-    logoutButton.click();
-    fixture.detectChanges();
-
-    expect(authService.logout).toHaveBeenCalled();
-    expect(router.navigate).toHaveBeenCalledWith(['/login']);
-  });
-
-  it('redirects to /checkout when cart buy button is clicked', () => {
-    const router = TestBed.inject(Router);
-    vi.spyOn(router, 'navigate');
-
-    const fixture = TestBed.createComponent(StoreLayoutComponent);
-    fixture.detectChanges();
-
-    (fixture.componentInstance as any).isCartOpen.set(true);
-    fixture.detectChanges();
-
-    const compiled = fixture.nativeElement as HTMLElement;
-    const buyButton = Array.from(compiled.querySelectorAll('app-button button'))
-      .find((button) => button.textContent?.trim() === 'Comprar') as HTMLButtonElement | undefined;
-
-    expect(buyButton).toBeDefined();
-    buyButton!.click();
-    fixture.detectChanges();
-
-    expect(router.navigate).toHaveBeenCalledWith(['/checkout']);
-    expect((fixture.componentInstance as any).isCartOpen()).toBe(false);
-  });
 });
--- a/src/app/core/layout/store-layout/store-layout.component.ts
+++ b/src/app/core/layout/store-layout/store-layout.component.ts
@@ -1,106 +1,31 @@
-import { Component, computed, inject, OnInit, signal } from '@angular/core';
-import { Router, RouterOutlet } from '@angular/router';
+import { Component, inject } 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 } 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';
-import { AuthService } from '../../services/auth/auth.service';
+import { StoreHeaderComponent, StoreHeaderAction } from './store-header/store-header.component';

@Component({
  selector: 'app-store-layout',
-  imports: [RouterOutlet, StoreHeaderComponent, StoreFooterComponent, CartComponent, ButtonComponent],
+  imports: [RouterOutlet, StoreHeaderComponent, StoreFooterComponent],
  templateUrl: './store-layout.component.html',
  styleUrl: './store-layout.component.scss'
 })
-export class StoreLayoutComponent implements OnInit {
+export class StoreLayoutComponent {
  private readonly tenantService = inject(TenantService);
-  private readonly cartService = inject(CartService);
-  private readonly authService = inject(AuthService);
-  private readonly router = inject(Router);
-
-  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 user = this.authService.user;
-  protected readonly isAuthenticated = this.authService.isAuthenticated;
-
-  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 onLoginClick(): void {
-    void this.router.navigate(['/login']);
-  }
-
-  protected onLogoutClick(): void {
-    this.authService.logout().subscribe({
-      next: () => void this.router.navigate(['/login']),
-      error: (err) => console.error('Error logging out', err)
-    });
-  }
-
-  protected onCheckoutClick(): void {
-    this.isCartOpen.set(false);
-    void this.router.navigate(['/checkout']);
-  }

+  protected readonly headerActions: StoreHeaderAction[] = [
+    {
+      label: 'Carrito',
+      iconClass: 'fa-solid fa-cart-shopping'
+    },
+    {
+      label: 'Mi cuenta',
+      iconClass: 'fa-solid fa-circle-user'
+    }
+  ];

  protected readonly footerSections: StoreFooterSection[] = [
    {
--- a/src/app/core/services/api-paginated-response.interface.ts
+++ b/src/app/core/services/api-paginated-response.interface.ts
@@ -1,30 +0,0 @@
-import { ApiResponse } from './api-response.interface';
-
-export interface ApiPaginationMetaLink {
-  url: string | null;
-  label: string;
-  active: boolean;
-}
-
-export interface ApiPaginationMeta {
-  current_page: number;
-  from: number | null;
-  last_page: number;
-  links: ApiPaginationMetaLink[];
-  path: string;
-  per_page: number;
-  to: number | null;
-  total: number;
-}
-
-export interface ApiPaginationLinks {
-  first: string;
-  last: string;
-  prev: string | null;
-  next: string | null;
-}
-
-export interface ApiPaginatedResponse<T> extends ApiResponse<T> {
-  meta: ApiPaginationMeta;
-  links: ApiPaginationLinks;
-}
--- a/src/app/core/services/api-pagination-query-params.interface.ts
+++ b/src/app/core/services/api-pagination-query-params.interface.ts
@@ -1,4 +0,0 @@
-export interface ApiPaginationQueryParams {
-  page?: number;
-  per_page?: number;
-}
--- a/src/app/core/services/api-response.interface.ts
+++ b/src/app/core/services/api-response.interface.ts
@@ -1,5 +0,0 @@
-export interface ApiResponse<T> {
-  data: T;
-  message?: string;
-  errors?: Record<string, string[]>;
-}
--- a/src/app/core/services/auth/auth-bootstrap.ts
+++ b/src/app/core/services/auth/auth-bootstrap.ts
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-
-import { AuthService } from './auth.service';
-
-export function authBootstrap(): Promise<void> {
-  const authService = inject(AuthService);
-
-  return authService.bootstrap();
-}
--- a/src/app/core/services/auth/auth.guards.spec.ts
+++ b/src/app/core/services/auth/auth.guards.spec.ts
@@ -1,62 +0,0 @@
-import { computed, signal } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { provideRouter, Router, UrlTree } from '@angular/router';
-
-import { AuthService } from './auth.service';
-import { authGuard, guestOnlyGuard } from './auth.guards';
-
-function createAuthServiceStub(isAuthenticated = false) {
-  const tokenState = signal<string | null>(isAuthenticated ? 'jwt-token' : null);
-
-  return {
-    isAuthenticated: computed(() => tokenState() !== null)
-  };
-}
-
-describe('auth guards', () => {
-  beforeEach(() => {
-    TestBed.resetTestingModule();
-  });
-
-  it('redirects unauthenticated users to /login', () => {
-    TestBed.configureTestingModule({
-      providers: [provideRouter([]), { provide: AuthService, useValue: createAuthServiceStub() }]
-    });
-
-    const result = TestBed.runInInjectionContext(() => authGuard(null as never, null as never));
-
-    expect(result instanceof UrlTree).toBe(true);
-    expect(TestBed.inject(Router).serializeUrl(result as UrlTree)).toBe('/login');
-  });
-
-  it('allows authenticated users through authGuard', () => {
-    TestBed.configureTestingModule({
-      providers: [provideRouter([]), { provide: AuthService, useValue: createAuthServiceStub(true) }]
-    });
-
-    const result = TestBed.runInInjectionContext(() => authGuard(null as never, null as never));
-
-    expect(result).toBe(true);
-  });
-
-  it('redirects authenticated users away from guest routes', () => {
-    TestBed.configureTestingModule({
-      providers: [provideRouter([]), { provide: AuthService, useValue: createAuthServiceStub(true) }]
-    });
-
-    const result = TestBed.runInInjectionContext(() => guestOnlyGuard(null as never, null as never));
-
-    expect(result instanceof UrlTree).toBe(true);
-    expect(TestBed.inject(Router).serializeUrl(result as UrlTree)).toBe('/');
-  });
-
-  it('allows guests into login/register routes', () => {
-    TestBed.configureTestingModule({
-      providers: [provideRouter([]), { provide: AuthService, useValue: createAuthServiceStub() }]
-    });
-
-    const result = TestBed.runInInjectionContext(() => guestOnlyGuard(null as never, null as never));
-
-    expect(result).toBe(true);
-  });
-});
--- a/src/app/core/services/auth/auth.guards.ts
+++ b/src/app/core/services/auth/auth.guards.ts
@@ -1,18 +0,0 @@
-import { inject } from '@angular/core';
-import { CanActivateFn, Router } from '@angular/router';
-
-import { AuthService } from './auth.service';
-
-export const authGuard: CanActivateFn = () => {
-  const authService = inject(AuthService);
-  const router = inject(Router);
-
-  return authService.isAuthenticated() ? true : router.createUrlTree(['/login']);
-};
-
-export const guestOnlyGuard: CanActivateFn = () => {
-  const authService = inject(AuthService);
-  const router = inject(Router);
-
-  return authService.isAuthenticated() ? router.createUrlTree(['/']) : true;
-};
--- a/src/app/core/services/auth/auth.interceptor.spec.ts
+++ b/src/app/core/services/auth/auth.interceptor.spec.ts
@@ -1,96 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { provideHttpClient, withInterceptors } from '@angular/common/http';
-import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
-import { computed, signal } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-
-import { environment } from '../../../../environments/environment';
-import { AuthService } from './auth.service';
-import { authInterceptor } from './auth.interceptor';
-
-function createAuthServiceStub(token: string | null = null) {
-  const tokenState = signal(token);
-
-  return {
-    token: tokenState.asReadonly(),
-    isAuthenticated: computed(() => tokenState() !== null),
-    clearSession: vi.fn(() => tokenState.set(null))
-  };
-}
-
-describe('authInterceptor', () => {
-  beforeEach(() => {
-    TestBed.resetTestingModule();
-  });
-
-  it('adds the bearer token when a session exists', () => {
-    const authService = createAuthServiceStub('jwt-token');
-
-    TestBed.configureTestingModule({
-      providers: [
-        provideHttpClient(withInterceptors([authInterceptor])),
-        provideHttpClientTesting(),
-        { provide: AuthService, useValue: authService }
-      ]
-    });
-
-    const client = TestBed.inject(HttpClient);
-    const httpController = TestBed.inject(HttpTestingController);
-
-    client.get(`${environment.url}me`).subscribe();
-
-    const request = httpController.expectOne(`${environment.url}me`);
-    expect(request.request.headers.get('Authorization')).toBe('Bearer jwt-token');
-    request.flush({ id: 1 });
-
-    httpController.verify();
-  });
-
-  it('does not add the authorization header when no token exists', () => {
-    const authService = createAuthServiceStub();
-
-    TestBed.configureTestingModule({
-      providers: [
-        provideHttpClient(withInterceptors([authInterceptor])),
-        provideHttpClientTesting(),
-        { provide: AuthService, useValue: authService }
-      ]
-    });
-
-    const client = TestBed.inject(HttpClient);
-    const httpController = TestBed.inject(HttpTestingController);
-
-    client.get(`${environment.url}productos`).subscribe();
-
-    const request = httpController.expectOne(`${environment.url}productos`);
-    expect(request.request.headers.has('Authorization')).toBe(false);
-    request.flush([]);
-
-    httpController.verify();
-  });
-
-  it('clears the local session when an authenticated request returns 401', () => {
-    const authService = createAuthServiceStub('expired-token');
-
-    TestBed.configureTestingModule({
-      providers: [
-        provideHttpClient(withInterceptors([authInterceptor])),
-        provideHttpClientTesting(),
-        { provide: AuthService, useValue: authService }
-      ]
-    });
-
-    const client = TestBed.inject(HttpClient);
-    const httpController = TestBed.inject(HttpTestingController);
-
-    client.get(`${environment.url}me`).subscribe({
-      error: () => undefined
-    });
-
-    const request = httpController.expectOne(`${environment.url}me`);
-    request.flush({ message: 'Unauthorized' }, { status: 401, statusText: 'Unauthorized' });
-
-    expect(authService.clearSession).toHaveBeenCalledTimes(1);
-    httpController.verify();
-  });
-});
--- a/src/app/core/services/auth/auth.interceptor.ts
+++ b/src/app/core/services/auth/auth.interceptor.ts
@@ -1,37 +0,0 @@
-import {
-  HttpErrorResponse,
-  HttpEvent,
-  HttpHandlerFn,
-  HttpInterceptorFn,
-  HttpRequest
-} from '@angular/common/http';
-import { inject } from '@angular/core';
-import { Observable, catchError, throwError } from 'rxjs';
-
-import { AuthService } from './auth.service';
-
-export const authInterceptor: HttpInterceptorFn = (
-  request: HttpRequest<unknown>,
-  next: HttpHandlerFn
-): Observable<HttpEvent<unknown>> => {
-  const authService = inject(AuthService);
-  const token = authService.token();
-
-  const authenticatedRequest = token
-    ? request.clone({
-        setHeaders: {
-          Authorization: `Bearer ${token}`
-        }
-      })
-    : request;
-
-  return next(authenticatedRequest).pipe(
-    catchError((error: unknown) => {
-      if (error instanceof HttpErrorResponse && error.status === 401 && token) {
-        authService.clearSession();
-      }
-
-      return throwError(() => error);
-    })
-  );
-};
--- a/src/app/core/services/auth/auth.interfaces.ts
+++ b/src/app/core/services/auth/auth.interfaces.ts
@@ -1,31 +0,0 @@
-export interface AuthUser {
-  id: number;
-  nombre_apellido: string;
-  email: string;
-  dni?: string;
-  telefono?: string;
-}
-
-export interface LoginPayload {
-  email: string;
-  password: string;
-}
-
-export interface RegisterPayload {
-  nombre_apellido: string;
-  email: string;
-  password: string;
-  password_confirmation: string;
-}
-
-export interface LoginResponse {
-  message: string;
-  token: string;
-  token_type: 'Bearer';
-  user: AuthUser;
-}
-
-export interface RegisterResponse {
-  message: string;
-  data: AuthUser;
-}
--- a/src/app/core/services/auth/auth.service.spec.ts
+++ b/src/app/core/services/auth/auth.service.spec.ts
@@ -1,211 +0,0 @@
-import { PLATFORM_ID, TransferState } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { provideHttpClient } from '@angular/common/http';
-import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
-
-import { environment } from '../../../../environments/environment';
-import { AuthService } from './auth.service';
-import { CookieService } from '../cookie/cookie.service';
-
-describe('AuthService', () => {
-  let cookieStore: Record<string, string> = {};
-
-  beforeEach(() => {
-    cookieStore = {};
-    TestBed.resetTestingModule();
-  });
-
-  function createCookieServiceStub() {
-    return {
-      get: (name: string) => cookieStore[name] || null,
-      set: (name: string, value: string) => { cookieStore[name] = value; },
-      delete: (name: string) => { delete cookieStore[name]; }
-    };
-  }
-
-  it('stores token and user on successful login', () => {
-    TestBed.configureTestingModule({
-      providers: [
-        provideHttpClient(),
-        provideHttpClientTesting(),
-        AuthService,
-        { provide: CookieService, useValue: createCookieServiceStub() },
-        TransferState
-      ]
-    });
-
-    const service = TestBed.inject(AuthService);
-    const httpController = TestBed.inject(HttpTestingController);
-
-    service.login({ email: 'ada@example.com', password: 'secret123' }).subscribe((user) => {
-      expect(user.email).toBe('ada@example.com');
-    });
-
-    const request = httpController.expectOne(`${environment.url}login`);
-    expect(request.request.method).toBe('POST');
-    request.flush({
-      message: 'Sesion iniciada correctamente.',
-      token: 'plain-text-token',
-      token_type: 'Bearer',
-      user: {
-        id: 1,
-        nombre_apellido: 'Ada Lovelace',
-        email: 'ada@example.com'
-      }
-    });
-
-    expect(service.token()).toBe('plain-text-token');
-    expect(service.user()?.email).toBe('ada@example.com');
-    expect(service.isAuthenticated()).toBe(true);
-    expect(cookieStore['shopit.auth.token']).toBe('plain-text-token');
-
-    httpController.verify();
-  });
-
-  it('hydrates token from cookies and loads the current user during bootstrap', async () => {
-    cookieStore['shopit.auth.token'] = 'persisted-token';
-
-    TestBed.configureTestingModule({
-      providers: [
-        provideHttpClient(),
-        provideHttpClientTesting(),
-        AuthService,
-        { provide: CookieService, useValue: createCookieServiceStub() },
-        TransferState
-      ]
-    });
-
-    const service = TestBed.inject(AuthService);
-    const httpController = TestBed.inject(HttpTestingController);
-
-    const bootstrapPromise = service.bootstrap();
-    const request = httpController.expectOne(`${environment.url}me`);
-
-    expect(request.request.method).toBe('GET');
-    request.flush({
-      id: 9,
-      nombre_apellido: 'Grace Hopper',
-      email: 'grace@example.com'
-    });
-
-    await expect(bootstrapPromise).resolves.toBeUndefined();
-    expect(service.user()?.email).toBe('grace@example.com');
-    expect(service.isAuthenticated()).toBe(true);
-
-    httpController.verify();
-  });
-
-  it('clears the session when bootstrap receives 401 from /me', async () => {
-    cookieStore['shopit.auth.token'] = 'expired-token';
-
-    TestBed.configureTestingModule({
-      providers: [
-        provideHttpClient(),
-        provideHttpClientTesting(),
-        AuthService,
-        { provide: CookieService, useValue: createCookieServiceStub() },
-        TransferState
-      ]
-    });
-
-    const service = TestBed.inject(AuthService);
-    const httpController = TestBed.inject(HttpTestingController);
-
-    const bootstrapPromise = service.bootstrap();
-    const request = httpController.expectOne(`${environment.url}me`);
-
-    request.flush({ message: 'Unauthorized' }, { status: 401, statusText: 'Unauthorized' });
-
-    await expect(bootstrapPromise).resolves.toBeUndefined();
-    expect(service.user()).toBeNull();
-    expect(service.token()).toBeNull();
-    expect(service.isAuthenticated()).toBe(false);
-    expect(cookieStore['shopit.auth.token']).toBeUndefined();
-
-    httpController.verify();
-  });
-
-  it('registers without creating a session', () => {
-    TestBed.configureTestingModule({
-      providers: [
-        provideHttpClient(),
-        provideHttpClientTesting(),
-        AuthService,
-        { provide: CookieService, useValue: createCookieServiceStub() },
-        TransferState
-      ]
-    });
-
-    const service = TestBed.inject(AuthService);
-    const httpController = TestBed.inject(HttpTestingController);
-
-    service
-      .register({
-        nombre_apellido: 'Ada Lovelace',
-        email: 'ada@example.com',
-        password: 'secret123',
-        password_confirmation: 'secret123'
-      })
-      .subscribe((response) => {
-        expect(response.data.email).toBe('ada@example.com');
-      });
-
-    const request = httpController.expectOne(`${environment.url}register`);
-    expect(request.request.method).toBe('POST');
-    request.flush({
-      message: 'Usuario registrado correctamente.',
-      data: {
-        id: 1,
-        nombre_apellido: 'Ada Lovelace',
-        email: 'ada@example.com'
-      }
-    });
-
-    expect(service.token()).toBeNull();
-    expect(service.user()).toBeNull();
-    expect(service.isAuthenticated()).toBe(false);
-
-    httpController.verify();
-  });
-
-  it('clears local session even when logout request fails', () => {
-    TestBed.configureTestingModule({
-      providers: [
-        provideHttpClient(),
-        provideHttpClientTesting(),
-        AuthService,
-        { provide: CookieService, useValue: createCookieServiceStub() },
-        TransferState
-      ]
-    });
-
-    const service = TestBed.inject(AuthService);
-    const httpController = TestBed.inject(HttpTestingController);
-
-    service.login({ email: 'ada@example.com', password: 'secret123' }).subscribe();
-    httpController.expectOne(`${environment.url}login`).flush({
-      message: 'Sesion iniciada correctamente.',
-      token: 'plain-text-token',
-      token_type: 'Bearer',
-      user: {
-        id: 1,
-        nombre_apellido: 'Ada Lovelace',
-        email: 'ada@example.com'
-      }
-    });
-
-    service.logout().subscribe({
-      error: () => undefined
-    });
-
-    const logoutRequest = httpController.expectOne(`${environment.url}logout`);
-    expect(logoutRequest.request.method).toBe('POST');
-    logoutRequest.flush({ message: 'Unauthorized' }, { status: 401, statusText: 'Unauthorized' });
-
-    expect(service.token()).toBeNull();
-    expect(service.user()).toBeNull();
-    expect(cookieStore['shopit.auth.token']).toBeUndefined();
-
-    httpController.verify();
-  });
-});
--- a/src/app/core/services/auth/auth.service.ts
+++ b/src/app/core/services/auth/auth.service.ts
@@ -1,115 +0,0 @@
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { isPlatformBrowser, isPlatformServer } from '@angular/common';
-import { computed, inject, Injectable, PLATFORM_ID, signal, TransferState, makeStateKey } from '@angular/core';
-import { firstValueFrom, map, Observable, of, tap } from 'rxjs';
-
-import { environment } from '../../../../environments/environment';
-import {
-  AuthUser,
-  LoginPayload,
-  LoginResponse,
-  RegisterPayload,
-  RegisterResponse
-} from './auth.interfaces';
-import { CookieService } from '../cookie/cookie.service';
-
-const AUTH_TOKEN_COOKIE_KEY = 'shopit.auth.token';
-const AUTH_USER_SSR_STATE_KEY = makeStateKey<AuthUser>('shopit.auth.user');
-
-@Injectable({
-  providedIn: 'root'
-})
-export class AuthService {
-  private readonly http = inject(HttpClient);
-  private readonly platformId = inject(PLATFORM_ID);
-  private readonly cookieService = inject(CookieService);
-  private readonly transferState = inject(TransferState);
-
-  private readonly userState = signal<AuthUser | null>(null);
-  private readonly tokenState = signal<string | null>(null);
-
-  readonly user = this.userState.asReadonly();
-  readonly token = this.tokenState.asReadonly();
-  readonly isAuthenticated = computed(() => this.tokenState() !== null);
-
-  login(payload: LoginPayload): Observable<AuthUser> {
-    return this.http.post<LoginResponse>(`${environment.url}login`, payload).pipe(
-      tap((response) => this.applyAuthenticatedState(response.token, response.user)),
-      map((response) => response.user)
-    );
-  }
-
-  register(payload: RegisterPayload): Observable<RegisterResponse> {
-    return this.http.post<RegisterResponse>(`${environment.url}register`, payload);
-  }
-
-  logout(): Observable<void> {
-    if (!this.tokenState()) {
-      this.clearSession();
-      return of(void 0);
-    }
-
-    return this.http.post<void>(`${environment.url}logout`, {}).pipe(
-      tap({
-        next: () => this.clearSession(),
-        error: () => this.clearSession()
-      })
-    );
-  }
-
-  async bootstrap(): Promise<void> {
-    this.hydrateSession();
-
-    if (!this.tokenState() || this.userState()) {
-      return;
-    }
-
-    const transferredUser = this.transferState.get(AUTH_USER_SSR_STATE_KEY, null);
-    if (transferredUser) {
-      this.transferState.remove(AUTH_USER_SSR_STATE_KEY);
-      this.userState.set(transferredUser);
-      return;
-    }
-
-    try {
-      const user = await firstValueFrom(this.loadCurrentUser());
-      if (isPlatformServer(this.platformId)) {
-        this.transferState.set(AUTH_USER_SSR_STATE_KEY, user);
-      }
-    } catch (error) {
-      if (this.isUnauthorizedError(error)) {
-        this.clearSession();
-        return;
-      }
-
-      throw error;
-    }
-  }
-
-  loadCurrentUser(): Observable<AuthUser> {
-    return this.http.get<AuthUser>(`${environment.url}me`).pipe(
-      tap((user) => this.userState.set(user))
-    );
-  }
-
-  hydrateSession(): void {
-    const token = this.cookieService.get(AUTH_TOKEN_COOKIE_KEY);
-    this.tokenState.set(token);
-  }
-
-  clearSession(): void {
-    this.userState.set(null);
-    this.tokenState.set(null);
-    this.cookieService.delete(AUTH_TOKEN_COOKIE_KEY);
-  }
-
-  private applyAuthenticatedState(token: string, user: AuthUser): void {
-    this.tokenState.set(token);
-    this.userState.set(user);
-    this.cookieService.set(AUTH_TOKEN_COOKIE_KEY, token);
-  }
-
-  private isUnauthorizedError(error: unknown): error is HttpErrorResponse {
-    return error instanceof HttpErrorResponse && error.status === 401;
-  }
-}
--- a/src/app/core/services/cart/cart.interface.ts
+++ b/src/app/core/services/cart/cart.interface.ts
@@ -1,21 +0,0 @@
-export interface CartItemProduct {
-  nombre: string;
-  imagen: string | null;
-}
-
-export interface CartItem {
-  id: number;
-  cantidad: number;
-  precio_unitario: string;
-  product_id: number;
-  product_variant_id: number;
-  product: CartItemProduct | null;
-}
-
-export interface Cart {
-  id: number | null;
-  tenant_codigo: string;
-  status: string;
-  items: CartItem[];
-  subtotal: string;
-}
--- a/src/app/core/services/cart/cart.service.spec.ts
+++ b/src/app/core/services/cart/cart.service.spec.ts
@@ -1,138 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
-import { provideHttpClient } from '@angular/common/http';
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-
-import { CartService } from './cart.service';
-import { TenantService } from '../tenant.service';
-import { Cart } from './cart.interface';
-
-describe('CartService', () => {
-  let service: CartService;
-  let httpMock: HttpTestingController;
-  let tenantServiceMock: any;
-
-  const mockCart: Cart = {
-    id: 123,
-    tenant_codigo: 'acme',
-    status: 'active',
-    items: [
-      {
-        id: 1,
-        cantidad: 2,
-        precio_unitario: '10.00',
-        product_id: 5,
-        product_variant_id: 10,
-        product: {
-          nombre: 'Test Product (Size: M)',
-          imagen: null
-        }
-      }
-    ],
-    subtotal: '20.00'
-  };
-
-  beforeEach(() => {
-    tenantServiceMock = {
-      getTenantApiUrl: vi.fn().mockReturnValue('http://api.test/tenants/acme'),
-      tenant: vi.fn().mockReturnValue({ codigo: 'acme' })
-    };
-
-    TestBed.configureTestingModule({
-      providers: [
-        CartService,
-        provideHttpClient(),
-        provideHttpClientTesting(),
-        { provide: TenantService, useValue: tenantServiceMock }
-      ]
-    });
-
-    service = TestBed.inject(CartService);
-    httpMock = TestBed.inject(HttpTestingController);
-  });
-
-  afterEach(() => {
-    httpMock.verify();
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should initialize with null cart signal', () => {
-    expect(service.cart()).toBeNull();
-  });
-
-  it('should load cart and update signal', () => {
-    service.loadCart().subscribe((cart) => {
-      expect(cart).toEqual(mockCart);
-      expect(service.cart()).toEqual(mockCart);
-    });
-
-    const req = httpMock.expectOne('http://api.test/tenants/acme/cart');
-    expect(req.request.method).toBe('GET');
-    expect(req.request.withCredentials).toBe(true);
-    req.flush({ data: mockCart });
-  });
-
-  it('should clear cart state locally', () => {
-    service.clearCart();
-
-    expect(service.cart()).toEqual({
-      id: null,
-      tenant_codigo: 'acme',
-      status: 'active',
-      items: [],
-      subtotal: '0.00'
-    });
-  });
-
-  it('should add item and update signal', () => {
-    service.addItem(10, 2).subscribe((res) => {
-      expect(res.data).toEqual(mockCart);
-      expect(service.cart()).toEqual(mockCart);
-    });
-
-    const req = httpMock.expectOne('http://api.test/tenants/acme/cart/items');
-    expect(req.request.method).toBe('POST');
-    expect(req.request.body).toEqual({ product_variant_id: 10, cantidad: 2 });
-    expect(req.request.withCredentials).toBe(true);
-    req.flush({ data: mockCart });
-  });
-
-  it('should update item quantity and update signal', () => {
-    const updatedCart = { ...mockCart, subtotal: '30.00' };
-    updatedCart.items[0].cantidad = 3;
-
-    service.updateItemQuantity(10, 3).subscribe((res) => {
-      expect(res.data).toEqual(updatedCart);
-      expect(service.cart()).toEqual(updatedCart);
-    });
-
-    const req = httpMock.expectOne('http://api.test/tenants/acme/cart/items/10');
-    expect(req.request.method).toBe('PATCH');
-    expect(req.request.body).toEqual({ cantidad: 3 });
-    expect(req.request.withCredentials).toBe(true);
-    req.flush({ data: updatedCart });
-  });
-
-  it('should remove item and update signal', () => {
-    const emptyCart: Cart = {
-      id: 123,
-      tenant_codigo: 'acme',
-      status: 'active',
-      items: [],
-      subtotal: '0.00'
-    };
-
-    service.removeItem(10).subscribe((res) => {
-      expect(res.data).toEqual(emptyCart);
-      expect(service.cart()).toEqual(emptyCart);
-    });
-
-    const req = httpMock.expectOne('http://api.test/tenants/acme/cart/items/10');
-    expect(req.request.method).toBe('DELETE');
-    expect(req.request.withCredentials).toBe(true);
-    req.flush({ data: emptyCart });
-  });
-});
--- a/src/app/core/services/cart/cart.service.ts
+++ b/src/app/core/services/cart/cart.service.ts
@@ -1,105 +0,0 @@
-import { inject, Injectable, signal } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { catchError, map, Observable, tap } from 'rxjs';
-
-import { ApiResponse } from '../api-response.interface';
-import { TenantService } from '../tenant.service';
-import { Cart } from './cart.interface';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CartService {
-  private readonly http = inject(HttpClient);
-  private readonly tenantService = inject(TenantService);
-
-  private readonly cartState = signal<Cart | null>(null);
-  readonly cart = this.cartState.asReadonly();
-
-  private readonly isUpdatingState = signal<boolean>(false);
-  readonly isUpdating = this.isUpdatingState.asReadonly();
-
-  private get tenantApiUrl(): string {
-    return this.tenantService.getTenantApiUrl();
-  }
-
-  clearCart(): void {
-    this.cartState.set({
-      id: null,
-      tenant_codigo: this.tenantService.tenant()?.codigo ?? '',
-      status: 'active',
-      items: [],
-      subtotal: '0.00'
-    });
-  }
-
-  loadCart(): Observable<Cart> {
-    return this.http
-      .get<ApiResponse<Cart>>(`${this.tenantApiUrl}/cart`, {
-        withCredentials: true
-      })
-      .pipe(
-        map((response) => response.data),
-        tap((cart) => this.cartState.set(cart))
-      );
-  }
-
-  addItem(productVariantId: number, cantidad: number): Observable<ApiResponse<Cart>> {
-    this.isUpdatingState.set(true);
-    return this.http
-      .post<ApiResponse<Cart>>(
-        `${this.tenantApiUrl}/cart/items`,
-        { product_variant_id: productVariantId, cantidad },
-        { withCredentials: true }
-      )
-      .pipe(
-        tap((response) => {
-          this.cartState.set(response.data);
-          this.isUpdatingState.set(false);
-        }),
-        catchError((error) => {
-          this.isUpdatingState.set(false);
-          throw error;
-        })
-      );
-  }
-
-  updateItemQuantity(productVariantId: number, cantidad: number): Observable<ApiResponse<Cart>> {
-    this.isUpdatingState.set(true);
-    return this.http
-      .patch<ApiResponse<Cart>>(
-        `${this.tenantApiUrl}/cart/items/${productVariantId}`,
-        { cantidad },
-        { withCredentials: true }
-      )
-      .pipe(
-        tap((response) => {
-          this.cartState.set(response.data);
-          this.isUpdatingState.set(false);
-        }),
-        catchError((error) => {
-          this.isUpdatingState.set(false);
-          throw error;
-        })
-      );
-  }
-
-  removeItem(productVariantId: number): Observable<ApiResponse<Cart>> {
-    this.isUpdatingState.set(true);
-    return this.http
-      .delete<ApiResponse<Cart>>(
-        `${this.tenantApiUrl}/cart/items/${productVariantId}`,
-        { withCredentials: true }
-      )
-      .pipe(
-        tap((response) => {
-          this.cartState.set(response.data);
-          this.isUpdatingState.set(false);
-        }),
-        catchError((error) => {
-          this.isUpdatingState.set(false);
-          throw error;
-        })
-      );
-  }
-}
--- a/src/app/core/services/catalog/catalog.interface.ts
+++ b/src/app/core/services/catalog/catalog.interface.ts
@@ -1,50 +0,0 @@
-export interface Product {
-  id: number;
-  category_id: number;
-  brand_id: number | null;
-  slug: string;
-  nombre: string;
-  descripcion: string;
-  precio: string;
-  category: string;
-  brand: string | null;
-  images: string[];
-}
-
-export interface ProductAttributeOption {
-  id: number;
-  value: string;
-  label: string;
-  sort_order: number;
-  metadata: Record<string, unknown> | null;
-}
-
-export interface ProductAttribute {
-  id: number;
-  codigo: string;
-  nombre: string;
-  is_required: boolean;
-  metadata_schema: Record<string, unknown> | null;
-  type: string;
-  options: ProductAttributeOption[];
-}
-
-export interface ProductVariant {
-  id: number;
-  cantidad_maxima: number;
-  definitions: Record<string, string>;
-  images: string[];
-}
-
-export interface ProductVariantMap {
-  variant_id: number;
-  cantidad_maxima: number;
-  attributes: Record<string, string>;
-}
-
-export interface ProductDetail extends Product {
-  attributes: ProductAttribute[];
-  variants_map: ProductVariantMap[];
-  variant: ProductVariant | null;
-}
-
--- a/src/app/core/services/catalog/catalog.service.ts
+++ b/src/app/core/services/catalog/catalog.service.ts
@@ -1,67 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { map, Observable } from 'rxjs';
-
-import { ApiPaginationQueryParams } from '../api-pagination-query-params.interface';
-import { ApiPaginatedResponse } from '../api-paginated-response.interface';
-import { ApiResponse } from '../api-response.interface';
-import { TenantService } from '../tenant.service';
-import { Product, ProductDetail } from './catalog.interface';
-
-type HttpParamValue =
-  | string
-  | number
-  | boolean
-  | readonly (string | number | boolean)[];
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CatalogService {
-  private readonly http = inject(HttpClient);
-  private readonly tenantService = inject(TenantService);
-
-  private get tenantApiUrl(): string {
-    return this.tenantService.getTenantApiUrl();
-  }
-
-
-  getProductos(
-    params?: ApiPaginationQueryParams
-  ): Observable<ApiPaginatedResponse<Product[]>> {
-    return this.http.get<ApiPaginatedResponse<Product[]>>(
-      `${this.tenantApiUrl}/productos`,
-      { params: this.buildHttpParams(params) }
-    );
-  }
-
-  getProducto(id: number, variantId?: number): Observable<ProductDetail> {
-    let params = new HttpParams();
-    if (variantId) {
-      params = params.set('variant_id', variantId);
-    }
-    
-    return this.http
-      .get<ApiResponse<ProductDetail>>(`${this.tenantApiUrl}/productos/${id}`, { params })
-      .pipe(map((response) => response.data));
-  }
-
-  private buildHttpParams(params?: ApiPaginationQueryParams): HttpParams {
-    if (!params) {
-      return new HttpParams();
-    }
-
-    const fromObject = Object.entries(params).reduce<Record<string, HttpParamValue>>(
-      (acc, [key, value]) => {
-        if (value !== undefined) {
-          acc[key] = value;
-        }
-
-        return acc;
-      },
-      {}
-    );
-
-    return new HttpParams({ fromObject });
-  }
-}
--- a/src/app/core/services/checkout.service.ts
+++ b/src/app/core/services/checkout.service.ts
@@ -1,92 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { firstValueFrom } from 'rxjs';
-
-import { environment } from '../../../environments/environment';
-
-export interface CreatePurchasePayload {
-  cart_id: number;
-  dni: string;
-  telefono: string;
-  nombre_apellido: string;
-  email: string;
-}
-
-export interface PurchaseStatusResponse {
-  status: string | null;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CheckoutService {
-  private readonly http = inject(HttpClient);
-
-  async createPurchase(tenantCode: string, payload: CreatePurchasePayload): Promise<{ id: number }> {
-    const response = await firstValueFrom(
-      this.http.post<{ data?: { id: number }; id?: number }>(`${environment.url}tenants/${tenantCode}/compras`, payload)
-    );
-
-    const purchase = this.extractResponseData<{ id: number }>(response);
-
-    if (!purchase?.id) {
-      throw new Error('Error al crear la compra.');
-    }
-
-    return purchase;
-  }
-
-  async generatePaymentIntent(tenantCode: string, purchaseId: number, method: 'qr' | 'transfer' | 'telepagos'): Promise<any> {
-    const response = await firstValueFrom(
-      this.http.post<any>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}/payment-intent`, { method })
-    );
-    if (!response) {
-      throw new Error('Error al generar la intención de pago.');
-    }
-    return response;
-  }
-
-  async completePurchase(tenantCode: string, purchaseId: number): Promise<PurchaseStatusResponse> {
-    const response = await firstValueFrom(
-      this.http.post<{ data?: PurchaseStatusResponse } | PurchaseStatusResponse>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}/complete`, {})
-    );
-
-    const purchase = this.extractResponseData<PurchaseStatusResponse>(response);
-
-    if (!purchase) {
-      throw new Error('Error al finalizar la compra.');
-    }
-
-    return {
-      status: purchase.status ?? null
-    };
-  }
-
-  async getPurchase(tenantCode: string, purchaseId: string | number): Promise<PurchaseStatusResponse> {
-    const response = await firstValueFrom(
-      this.http.get<{ data?: PurchaseStatusResponse } | PurchaseStatusResponse>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}`)
-    );
-
-    const purchase = this.extractResponseData<PurchaseStatusResponse>(response);
-
-    if (!purchase) {
-      throw new Error('Error al obtener la compra.');
-    }
-
-    return {
-      status: purchase.status ?? null
-    };
-  }
-
-  private extractResponseData<T>(response: T | { data?: T } | null | undefined): T | null {
-    if (!response) {
-      return null;
-    }
-
-    if (typeof response === 'object' && 'data' in response && response.data) {
-      return response.data;
-    }
-
-    return response as T;
-  }
-}
--- a/src/app/core/services/cookie/cookie.service.ts
+++ b/src/app/core/services/cookie/cookie.service.ts
@@ -1,59 +0,0 @@
-import { isPlatformBrowser } from '@angular/common';
-import { inject, Injectable, PLATFORM_ID, REQUEST } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CookieService {
-  private readonly platformId = inject(PLATFORM_ID);
-  private readonly document = inject(DOCUMENT);
-  private readonly request = inject(REQUEST, { optional: true });
-
-  get(name: string): string | null {
-    if (isPlatformBrowser(this.platformId)) {
-      return this.getCookieFromString(name, this.document.cookie);
-    }
-
-    if (this.request) {
-      const cookieHeader = this.request.headers.get('cookie') || '';
-      return this.getCookieFromString(name, cookieHeader);
-    }
-
-    return null;
-  }
-
-  set(name: string, value: string, days = 7): void {
-    if (isPlatformBrowser(this.platformId)) {
-      const date = new Date();
-      date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
-      const expires = `expires=${date.toUTCString()}`;
-      this.document.cookie = `${name}=${value};${expires};path=/;SameSite=Lax`;
-    }
-  }
-
-  delete(name: string): void {
-    if (isPlatformBrowser(this.platformId)) {
-      this.document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;SameSite=Lax`;
-    }
-  }
-
-  private getCookieFromString(name: string, cookieString: string): string | null {
-    if (!cookieString) {
-      return null;
-    }
-    
-    const nameEQ = `${name}=`;
-    const ca = cookieString.split(';');
-    for (let i = 0; i < ca.length; i++) {
-      let c = ca[i];
-      while (c.charAt(0) === ' ') {
-        c = c.substring(1, c.length);
-      }
-      if (c.indexOf(nameEQ) === 0) {
-        return c.substring(nameEQ.length, c.length);
-      }
-    }
-    return null;
-  }
-}
--- a/src/app/core/services/modal.service.spec.ts
+++ b/src/app/core/services/modal.service.spec.ts
@@ -1,259 +0,0 @@
-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 { SimpleModalComponent } from '../../shared/components/simple-modal/simple-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
-    });
-  });
-
-  it('opens the simple modal with default button label', () => {
-    service.openSimple({
-      title: 'Aviso',
-      content: 'Este es un aviso simple.'
-    });
-
-    const activeModal = service.activeModal();
-
-    expect(activeModal?.component).toBe(SimpleModalComponent);
-    expect(activeModal?.config).toEqual({
-      title: 'Aviso',
-      data: {
-        content: 'Este es un aviso simple.',
-        buttonLabel: 'Entendido'
-      },
-      size: 'md',
-      closeOnBackdrop: true,
-      closeOnEscape: true,
-      showCloseButton: true
-    });
-  });
-
-  it('maps the simple modal close result to undefined', async () => {
-    const result$ = service.openSimple({
-      title: 'Aviso',
-      content: 'Este es un aviso simple.'
-    });
-    const activeModal = service.activeModal();
-    const resultPromise = firstValueFrom(result$);
-
-    activeModal?.ref.close();
-
-    await expect(resultPromise).resolves.toBeUndefined();
-  });
-});
-
-@Component({
-  template: ''
-})
-class DataTestModalComponent {
-  readonly data = inject(MODAL_DATA);
-  readonly modalRef = inject(ModalRef);
-}
--- a/src/app/core/services/modal.service.ts
+++ b/src/app/core/services/modal.service.ts
@@ -1,253 +0,0 @@
-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';
-import { SimpleModalComponent } from '../../shared/components/simple-modal/simple-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 SimpleModalData {
-  content: string;
-  buttonLabel: string;
-}
-
-export interface SimpleModalConfig
-  extends Omit<ModalConfig<SimpleModalData>, 'data'> {
-  content: string;
-  buttonLabel?: 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)
-    );
-  }
-
-  openSimple(config: SimpleModalConfig): Observable<void> {
-    return this.openSimpleRef(config).afterClosed$.pipe(
-      map(() => undefined)
-    );
-  }
-
-  openSimpleRef(config: SimpleModalConfig): ModalRef<void> {
-    return this.open(
-      SimpleModalComponent,
-      this.buildSimpleModalConfig(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
-      }
-    };
-  }
-
-  private buildSimpleModalConfig(
-    config: SimpleModalConfig
-  ): ModalConfig<SimpleModalData> {
-    const {
-      content,
-      buttonLabel = 'Entendido',
-      ...modalConfig
-    } = config;
-
-    return {
-      ...modalConfig,
-      data: {
-        content,
-        buttonLabel
-      }
-    };
-  }
-}
--- a/src/app/core/services/tenant-ssr-cache.store.ts
+++ b/src/app/core/services/tenant-ssr-cache.store.ts
@@ -17,9 +17,7 @@ export const DEFAULT_TENANT_BRANDING = {
  primaryColor: '#102bda',
  secondaryColor: '#9e9e9e',
  dangerColor: '#fd4c4c',
-  successColor: '#198754',
-  headerBgColor: '#313131',
-  footerBgColor: '#313131'
+  headerFooterBgColor: '#313131'
 } as const;

 export const TENANT_SSR_STATE_KEY = makeStateKey<TenantSsrState | null>('tenant-ssr-state');
--- a/src/app/core/services/tenant.interface.ts
+++ b/src/app/core/services/tenant.interface.ts
@@ -1,14 +1,3 @@
-import { ApiResponse } from './api-response.interface';
-
-export interface BankAccount {
-  id: number;
-  tenant_code: string;
-  titular: string;
-  entidad: string;
-  alias: string;
-  cvu: string;
-}
-
 export interface Tenant {
  id: number;
  codigo: string;
@@ -17,14 +6,11 @@ export interface Tenant {
  primary_color: string;
  secondary_color: string;
  danger_color: string;
-  success_color: string;
-  header_bg_color: string;
-  footer_bg_color: string;
+  header_footer_bg_color: string;
  header_logo: string;
  footer_logo: string;
-  selected_bank_account_id?: number | null;
-  selected_bank_account?: BankAccount | null;
 }

-export type TenantBootstrapResponse = ApiResponse<Tenant>;
-
+export interface TenantBootstrapResponse {
+  data: Tenant;
+}
--- a/src/app/core/services/tenant.service.spec.ts
+++ b/src/app/core/services/tenant.service.spec.ts
@@ -16,9 +16,7 @@ const tenant: Tenant = {
  primary_color: '#6376F3',
  secondary_color: '#A0A0A0',
  danger_color: '#FF8888',
-  success_color: '#198754',
-  header_bg_color: '#313131',
-  footer_bg_color: '#313131',
+  header_footer_bg_color: '#313131',
  header_logo: 'https://example.com/header.png',
  footer_logo: 'https://example.com/footer.png'
 };
--- a/src/app/core/services/tenant.service.ts
+++ b/src/app/core/services/tenant.service.ts
@@ -40,15 +40,6 @@ export class TenantService {
    return this.tenantState();
  }

-  getTenantApiUrl(): string {
-    const tenant = this.tenantState();
-    if (!tenant) {
-      throw new Error('No se pudo resolver el tenant activo.');
-    }
-    return `${environment.url}tenants/${tenant.codigo}`;
-  }
-
-
  async bootstrap(): Promise<void> {
    if (this.statusState() !== 'idle') {
      return;
--- a/src/app/core/services/toast.service.spec.ts
+++ b/src/app/core/services/toast.service.spec.ts
@@ -1,101 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { vi } from 'vitest';
-import { ToastService } from './toast.service';
-
-describe('ToastService', () => {
-  let service: ToastService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [ToastService]
-    });
-    service = TestBed.inject(ToastService);
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should initialize with an empty list of toasts', () => {
-    expect(service.toasts()).toEqual([]);
-  });
-
-  it('should show a toast and assign an id', () => {
-    const id = service.show('Hello world', 'info');
-    expect(id).toBeTruthy();
-    expect(service.toasts().length).toBe(1);
-    expect(service.toasts()[0]).toEqual({
-      id,
-      message: 'Hello world',
-      type: 'info',
-      duration: 3000
-    });
-  });
-
-  it('should add specific variant toasts via helper methods', () => {
-    const infoId = service.info('Info message');
-    const dangerId = service.danger('Danger message', 5000);
-    const successId = service.success('Success message', 0);
-
-    const toasts = service.toasts();
-    expect(toasts.length).toBe(3);
-
-    expect(toasts.find((t) => t.id === infoId)).toEqual({
-      id: infoId,
-      message: 'Info message',
-      type: 'info',
-      duration: 3000
-    });
-
-    expect(toasts.find((t) => t.id === dangerId)).toEqual({
-      id: dangerId,
-      message: 'Danger message',
-      type: 'danger',
-      duration: 5000
-    });
-
-    expect(toasts.find((t) => t.id === successId)).toEqual({
-      id: successId,
-      message: 'Success message',
-      type: 'success',
-      duration: 0
-    });
-  });
-
-  it('should dismiss a toast manually by id', () => {
-    const id1 = service.show('Toast 1');
-    const id2 = service.show('Toast 2');
-
-    expect(service.toasts().length).toBe(2);
-
-    service.dismiss(id1);
-
-    expect(service.toasts().length).toBe(1);
-    expect(service.toasts()[0].id).toBe(id2);
-  });
-
-  it('should automatically dismiss a toast after the duration', () => {
-    service.show('Auto dismiss toast', 'info', 2000);
-
-    expect(service.toasts().length).toBe(1);
-
-    vi.advanceTimersByTime(2000);
-
-    expect(service.toasts().length).toBe(0);
-  });
-
-  it('should not dismiss a toast automatically if duration is 0', () => {
-    service.show('Persistent toast', 'info', 0);
-
-    expect(service.toasts().length).toBe(1);
-
-    vi.advanceTimersByTime(10000);
-
-    expect(service.toasts().length).toBe(1);
-  });
-});
--- a/src/app/core/services/toast.service.ts
+++ b/src/app/core/services/toast.service.ts
@@ -1,47 +0,0 @@
-import { Injectable, signal } from '@angular/core';
-
-export interface Toast {
-  id: string;
-  message: string;
-  type: 'success' | 'danger' | 'info';
-  duration?: number;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ToastService {
-  private readonly toastsSignal = signal<Toast[]>([]);
-  readonly toasts = this.toastsSignal.asReadonly();
-
-  show(message: string, type: 'success' | 'danger' | 'info' = 'info', duration = 3000): string {
-    const id = Math.random().toString(36).substring(2, 9);
-    const newToast: Toast = { id, message, type, duration };
-
-    this.toastsSignal.update((toasts) => [...toasts, newToast]);
-
-    if (duration > 0) {
-      setTimeout(() => {
-        this.dismiss(id);
-      }, duration);
-    }
-
-    return id;
-  }
-
-  info(message: string, duration = 3000): string {
-    return this.show(message, 'info', duration);
-  }
-
-  danger(message: string, duration = 3000): string {
-    return this.show(message, 'danger', duration);
-  }
-
-  success(message: string, duration = 3000): string {
-    return this.show(message, 'success', duration);
-  }
-
-  dismiss(id: string): void {
-    this.toastsSignal.update((toasts) => toasts.filter((t) => t.id !== id));
-  }
-}
--- a/src/app/core/utils/use-mutation.spec.ts
+++ b/src/app/core/utils/use-mutation.spec.ts
@@ -0,0 +1,31 @@
+import { of, throwError } from 'rxjs';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useMutation } from './use-mutation';
+
+describe('useMutation', () => {
+  it('stores the resolved value and clears loading after a successful execution', async () => {
+    const mutation = useMutation<{ id: number }, { ok: boolean; id: number }>();
+    const factory = vi.fn((payload: { id: number }) => of({ ok: true, id: payload.id }));
+
+    await expect(mutation.execute(factory, { id: 7 })).resolves.toEqual({ ok: true, id: 7 });
+
+    expect(factory).toHaveBeenCalledWith({ id: 7 });
+    expect(mutation.loading()).toBe(false);
+    expect(mutation.error()).toBeNull();
+    expect(mutation.data()).toEqual({ ok: true, id: 7 });
+  });
+
+  it('stores the thrown error and clears loading after a failed execution', async () => {
+    const mutation = useMutation<{ id: number }, { ok: boolean }>();
+    const failure = new Error('request failed');
+    const factory = vi.fn(() => throwError(() => failure));
+
+    await expect(mutation.execute(factory, { id: 7 })).rejects.toThrow('request failed');
+
+    expect(factory).toHaveBeenCalledWith({ id: 7 });
+    expect(mutation.loading()).toBe(false);
+    expect(mutation.error()).toBe(failure);
+    expect(mutation.data()).toBeNull();
+  });
+});
--- a/src/app/core/utils/use-mutation.ts
+++ b/src/app/core/utils/use-mutation.ts
@@ -0,0 +1,42 @@
+import { signal, WritableSignal } from '@angular/core';
+import { Observable, firstValueFrom } from 'rxjs';
+
+export interface UseMutationResult<TData, TResult> {
+  loading: WritableSignal<boolean>;
+  error: WritableSignal<unknown | null>;
+  data: WritableSignal<TResult | null>;
+  execute: (factory: (payload: TData) => Observable<TResult>, payload: TData) => Promise<TResult>;
+}
+
+export function useMutation<TData, TResult>(): UseMutationResult<TData, TResult> {
+  const loading = signal(false);
+  const error = signal<unknown | null>(null);
+  const data = signal<TResult | null>(null);
+
+  async function execute(
+    factory: (payload: TData) => Observable<TResult>,
+    payload: TData
+  ): Promise<TResult> {
+    loading.set(true);
+    error.set(null);
+
+    try {
+      const result = await firstValueFrom(factory(payload));
+      data.set(result);
+
+      return result;
+    } catch (err) {
+      error.set(err);
+      throw err;
+    } finally {
+      loading.set(false);
+    }
+  }
+
+  return {
+    loading,
+    error,
+    data,
+    execute
+  };
+}
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
+++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
@@ -24,11 +24,8 @@
          <div class="button-grid">
            <app-button [disabled]="true">Primary</app-button>
            <app-button variant="secondary" [disabled]="true">Secondary</app-button>
-
            <app-button variant="danger" [disabled]="true">Danger</app-button>
-            <app-button variant="danger-secondary" [disabled]="true">
-              Danger secondary
-            </app-button>
+            <app-button variant="danger-secondary" [disabled]="true">Danger secondary</app-button>
            <app-button variant="cancel" [disabled]="true">Cancel</app-button>
          </div>
        </div>
@@ -43,149 +40,10 @@
            <app-button variant="cancel">E</app-button>
          </div>
        </div>
-
-        <div class="button-group">
-          <h2>Toasts</h2>
-          <div class="button-grid">
-            <app-button (click)="triggerToast('info')">Trigger Info</app-button>
-            <app-button variant="secondary" (click)="triggerToast('success')">
-              Trigger Success
-            </app-button>
-            <app-button variant="danger" (click)="triggerToast('danger')">
-              Trigger Danger
-            </app-button>
-          </div>
-        </div>
-
-        <div class="button-group">
-          <h2>Toasts Persistentes (No se van)</h2>
-          <div class="button-grid">
-            <app-button (click)="triggerPersistentToast('info')">
-              Info Persistente
-            </app-button>
-            <app-button
-              variant="secondary"
-              (click)="triggerPersistentToast('success')"
-            >
-              Success Persistente
-            </app-button>
-            <app-button variant="danger" (click)="triggerPersistentToast('danger')">
-              Danger Persistente
-            </app-button>
-          </div>
-        </div>
-
-        <div class="button-group">
-          <h2>Modal</h2>
-          <p class="text-muted mb-0">
-            Demo del modal global con servicio, host y devolucion de resultado.
-          </p>
-          <div class="button-grid">
-            <app-button (click)="openBasicModal()">Abrir confirm modal</app-button>
-            <app-button variant="danger" (click)="openConfirmDeleteModal()">
-              Abrir confirm delete
-            </app-button>
-            <app-button variant="secondary" (click)="openLockedModal()">
-              Abrir modal bloqueado
-            </app-button>
-            <app-button variant="danger-secondary" (click)="openWideModal()">
-              Abrir modal ancho
-            </app-button>
-            <app-button (click)="openSimpleModal()">
-              Abrir simple modal
-            </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>
@@ -313,167 +171,25 @@
            />
          </div>

-          <app-button variant="secondary" (click)="clearFile()">
-            Limpiar archivo
-          </app-button>
+          <app-button variant="secondary" (click)="clearFile()">Limpiar archivo</app-button>
        </div>
      </div>
-
-      <hr class="section-divider" />
-
-      <div class="paginator-showcase">
-        <h2>Paginator</h2>
-        <p class="text-muted mb-0">
-          Componente shared para navegar por paginas con primera, anterior,
-          siguiente y ultima.
-        </p>
-        <app-paginator
-          [page]="currentPage"
-          [totalPages]="paginatorTotalPages"
-          (pageChange)="currentPage = $event"
-        />
-      </div>
-
-      <hr class="section-divider" />
-
-      <div class="stepper-showcase">
-        <h2>Form Stepper</h2>
-        <p class="text-muted mb-4">
-          Stepper vertical reutilizable. Cada paso maneja sus propios botones de navegacion. No se puede avanzar si el paso no es valido.
-        </p>
-
-        <app-stepper #demoStepper>
-
-          <!-- Paso 1: Siempre valido -->
-          <app-step label="Informacion Personal" [isValid]="true">
-            <div class="row g-3">
-              <div class="col-md-6 input-field">
-                <label for="stepper-name">Nombre</label>
-                <app-input id="stepper-name" placeholder="Juan Perez" [(value)]="user" />
-              </div>
-              <div class="col-md-6 input-field">
-                <label for="stepper-email">Email</label>
-                <app-input id="stepper-email" type="email" placeholder="mail@empresa.com" [(value)]="email" />
-              </div>
-            </div>
-            <div class="d-flex justify-content-end mt-4">
-              <app-button (click)="demoStepper.next()">
-                Siguiente <i class="fa-solid fa-arrow-right ms-1"></i>
-              </app-button>
-            </div>
-          </app-step>
-
-          <!-- Paso 2: Valido solo si testStep2Valid es true -->
-          <app-step label="Configuracion de Cuenta" [isValid]="testStep2Valid">
-            <div class="row g-3">
-              <div class="col-md-6 input-field">
-                <label for="stepper-password">Contraseña</label>
-                <app-input id="stepper-password" type="password-toggle" placeholder="********" [(value)]="password" />
-              </div>
-              <div class="col-md-6 input-field">
-                <label for="stepper-amount">Presupuesto mensual</label>
-                <app-input id="stepper-amount" type="currency" placeholder="0" [(value)]="amount" />
-              </div>
-            </div>
-
-            <div class="stepper-validity-control mt-3 d-flex align-items-center gap-3">
-              <span class="text-muted small">
-                Simular validez del paso:
-              </span>
-              <app-button
-                [variant]="testStep2Valid ? 'secondary' : 'primary'"
-                (click)="testStep2Valid = !testStep2Valid"
-              >
-                @if (testStep2Valid) {
-                  <i class="fa-solid fa-check me-1"></i> Valido
-                } @else {
-                  <i class="fa-solid fa-xmark me-1"></i> Invalido — Siguiente bloqueado
-                }
-              </app-button>
-            </div>
-
-            <div class="d-flex justify-content-between mt-4">
-              <app-button variant="secondary" (click)="demoStepper.previous()">
-                <i class="fa-solid fa-arrow-left me-1"></i> Volver
-              </app-button>
-              <app-button (click)="demoStepper.next()" [disabled]="!testStep2Valid">
-                Siguiente <i class="fa-solid fa-arrow-right ms-1"></i>
-              </app-button>
-            </div>
-          </app-step>
-
-          <!-- Paso 3: Revision final, siempre valido -->
-          <app-step label="Revision y Confirmacion" [isValid]="true">
-            <div class="p-3 rounded bg-light">
-              <p class="mb-1"><strong>Nombre:</strong> {{ user }}</p>
-              <p class="mb-1"><strong>Email:</strong> {{ email }}</p>
-              <p class="mb-0"><strong>Presupuesto:</strong> {{ amount }}</p>
-            </div>
-            <div class="d-flex justify-content-between mt-4">
-              <app-button variant="secondary" (click)="demoStepper.previous()">
-                <i class="fa-solid fa-arrow-left me-1"></i> Volver
-              </app-button>
-              <app-button (click)="triggerToast('success')">
-                <i class="fa-solid fa-check me-1"></i> Confirmar
-              </app-button>
-            </div>
-          </app-step>
-
-        </app-stepper>
-      </div>
-
-      <hr class="section-divider" />
-
-      <div class="cart-showcase">
-        <div class="cart-showcase__header">
-          <div>
-            <h2>Carrito mock</h2>
-            <p class="text-muted mb-0">
-              Demo visual aislada del carrito con scroll a partir del cuarto item.
-            </p>
-          </div>
-
-          @if (!cartVisible) {
-            <app-button variant="secondary" (click)="showCart()">
-              Volver a mostrar carrito
-            </app-button>
-          }
-        </div>
-
-        @if (cartVisible) {
-          <div class="cart-showcase__viewport">
-            <app-cart
-              [showClose]="true"
-              [items]="cartMockItems"
-              [subtotal]="366000"
-              [discount]="66000"
-              [total]="300000"
-              [backgroundColor]="cartBackgroundColor"
-              (closed)="hideCart()"
-            />
-          </div>
-        }
-      </div>
-
    </div>
  </section>

  <section class="component-demo card shadow-sm mt-4 configuracion-tennant">
    <div class="card-body">
      <span class="eyebrow">Tenant Configuration</span>
-      <h2 class="mb-4">Configuracion Tenant</h2>
+      <h2 class="mb-4">Configuración 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">
+            <div class="tenant-logo-card__container header-footer-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>
@@ -487,13 +203,9 @@
        <div class="col-md-6">
          <div class="tenant-logo-card">
            <div class="tenant-logo-card__label">Logo del Footer</div>
-            <div class="tenant-logo-card__container footer-bg">
+            <div class="tenant-logo-card__container header-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>
@@ -507,95 +219,36 @@

      <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="col-md-4 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="col-md-4 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="col-md-4 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>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-md-3 mb-3">
-            <div class="color-swatch-card shadow-sm">
-              <div
-                class="color-swatch-card__preview"
-                [style.background-color]="'var(--tenant-success)'"
-              ></div>
-              <div class="color-swatch-card__body">
-                <span class="color-swatch-card__title">Success</span>
-                <code class="color-swatch-card__value">
-                  {{ tenant()?.success_color || 'Default' }}
-                </code>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-md-3 mb-3">
-            <div class="color-swatch-card shadow-sm">
-              <div
-                class="color-swatch-card__preview"
-                [style.background-color]="'var(--tenant-header-bg)'"
-              ></div>
-              <div class="color-swatch-card__body">
-                <span class="color-swatch-card__title">Header BG</span>
-                <code class="color-swatch-card__value">
-                  {{ tenant()?.header_bg_color || 'Default' }}
-                </code>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-md-3 mb-3">
-            <div class="color-swatch-card shadow-sm">
-              <div
-                class="color-swatch-card__preview"
-                [style.background-color]="'var(--tenant-footer-bg)'"
-              ></div>
-              <div class="color-swatch-card__body">
-                <span class="color-swatch-card__title">Footer BG</span>
-                <code class="color-swatch-card__value">
-                  {{ tenant()?.footer_bg_color || 'Default' }}
-                </code>
+                <code class="color-swatch-card__value">{{ tenant()?.danger_color || 'Default' }}</code>
              </div>
            </div>
          </div>
@@ -603,54 +256,4 @@
      </div>
    </div>
  </section>
-
-  <section class="component-demo card shadow-sm mt-4">
-    <div class="card-body">
-      <span class="eyebrow">Reusable Component</span>
-      <h2 class="mb-4">Tarjetas de Producto (ProductCard)</h2>
-
-      <p class="text-muted mb-4">
-        Las tarjetas se adaptan al tamano del contenedor padre. A continuacion se
-        presentan dentro de una grilla de Bootstrap.
-      </p>
-
-      <div class="row">
-        @for (product of testProducts; track product.title) {
-          <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch">
-            <app-product-card
-              [imageUrl]="product.imageUrl"
-              [title]="product.title"
-              [originalPrice]="product.originalPrice"
-              [discount]="product.discount"
-              [transferPrice]="product.transferPrice"
-              (buy)="onProductBuy(product.title)"
-            />
-          </div>
-        }
-      </div>
-    </div>
-  </section>
-
-  <app-store-section
-    title="PRODUCTOS"
-    class="component-demo store-section-demo mt-5"
-  >
-    <div class="row">
-      @for (product of testProducts; track product.title) {
-        <div
-          class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch store-section-demo__item"
-        >
-          <app-product-card
-            [imageUrl]="product.imageUrl"
-            [title]="product.title"
-            [originalPrice]="product.originalPrice"
-            [discount]="product.discount"
-            [transferPrice]="product.transferPrice"
-            (buy)="onProductBuy(product.title)"
-          />
-        </div>
-      }
-    </div>
-  </app-store-section>
 </main>
-
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
+++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
@@ -15,10 +15,6 @@
  border: 0;
 }

-.store-section-demo {
-  width: min(100%, 64rem);
-}
-
 .eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
@@ -49,92 +45,16 @@ h1 {
  gap: 0.75rem;
 }

-.modal-showcase__result {
-  padding: 0.875rem 1rem;
-  border: 1px dashed rgba(32, 32, 32, 0.14);
-  border-radius: 0.875rem;
-  background: linear-gradient(180deg, rgba(248, 248, 248, 0.92), rgba(255, 255, 255, 0.98));
-  color: #495057;
-  font-size: 0.95rem;
-}
-
-:host ::ng-deep .modal-demo-content {
-  display: grid;
-  gap: 1rem;
-}
-
-:host ::ng-deep .modal-demo-content__eyebrow {
-  margin: 0;
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: #6c757d;
-}
-
-:host ::ng-deep .modal-demo-content__title {
-  margin: 0;
-  font-size: 1.35rem;
-  font-weight: 700;
-  color: #202020;
-}
-
-:host ::ng-deep .modal-demo-content__description {
-  margin: 0;
-  color: #505050;
-  line-height: 1.6;
-}
-
-:host ::ng-deep .modal-demo-content__actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.75rem;
-}
-
 .button-group h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
 }

-.paginator-showcase {
-  display: grid;
-  justify-items: center;
-  gap: 0.75rem;
-  text-align: center;
-}
-
-.cart-showcase {
-  display: grid;
-  gap: 1rem;
-  justify-items: start;
-}
-
-.cart-showcase__viewport {
-  width: 100%;
-  max-width: 504px;
-  height: 640px;
-}
-
-.cart-showcase__header {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
 .button-grid--single-char app-button {
  min-width: 3rem;
 }

-.store-section-demo__item {
-  app-product-card {
-    width: 100%;
-  }
-}
-
 .section-divider {
  margin: 2rem 0;
 }
@@ -171,15 +91,6 @@ h1 {
  .input-grid {
    grid-template-columns: minmax(0, 1fr);
  }
-
-  .cart-showcase__header {
-    align-items: start;
-    flex-direction: column;
-  }
-
-  .modal-showcase__result {
-    font-size: 0.875rem;
-  }
 }

 .configuracion-tennant {
@@ -236,12 +147,8 @@ h1 {
    }
  }

-  .header-bg {
-    background-color: var(--tenant-header-bg, #f8f9fa);
-  }
-
-  .footer-bg {
-    background-color: var(--tenant-footer-bg, #f8f9fa);
+  .header-footer-bg {
+    background-color: var(--tenant-header-footer-bg, #f8f9fa);
  }

  .color-swatch-card {
@@ -291,44 +198,3 @@ 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;
-  }
-}
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts
+++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts
@@ -1,17 +1,8 @@
 import { signal } from '@angular/core';
-import { TestBed, getTestBed } from '@angular/core/testing';
-import {
-  BrowserTestingModule,
-  platformBrowserTesting
-} from '@angular/platform-browser/testing';
-import { of } from 'rxjs';
-import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
-
-import { ModalService } from '../../../../core/services/modal.service';
+import { TestBed } from '@angular/core/testing';
+import { ReutilizablesTestPageComponent } from './reutilizables-test-page.component';
 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,
@@ -21,9 +12,7 @@ const tenant: Tenant = {
  primary_color: '#6376F3',
  secondary_color: '#A0A0A0',
  danger_color: '#FF8888',
-  success_color: '#198754',
-  header_bg_color: '#313131',
-  footer_bg_color: '#313131',
+  header_footer_bg_color: '#313131',
  header_logo: 'https://example.com/header.png',
  footer_logo: 'https://example.com/footer.png'
 };
@@ -40,54 +29,14 @@ 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();
@@ -96,151 +45,22 @@ 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');

-    expect(sectionTitle?.textContent).toContain('Configuracion Tenant');
-
-    const headerImg = element.querySelector(
-      '.tenant-logo-card img[alt="Header Logo"]'
-    ) as HTMLImageElement;
+    // Check header logo source
+    const headerImg = element.querySelector('.tenant-logo-card img[alt="Header Logo"]') as HTMLImageElement;
    expect(headerImg?.src).toBe(tenant.header_logo);

-    const footerImg = element.querySelector(
-      '.tenant-logo-card img[alt="Footer Logo"]'
-    ) as HTMLImageElement;
+    // Check footer logo source
+    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);
-    expect(element.textContent).toContain(tenant.success_color);
-  });
-
-  it('renders the paginator demo with the initial page status', async () => {
-    const modalServiceStub = createModalServiceStub();
-    await TestBed.configureTestingModule({
-      imports: [ReutilizablesTestPageComponent],
-      providers: [
-        {
-          provide: TenantService,
-          useValue: createTenantServiceStub(tenant)
-        },
-        {
-          provide: ToastService,
-          useValue: createToastServiceStub()
-        },
-        {
-          provide: ModalService,
-          useValue: modalServiceStub
-        }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(ReutilizablesTestPageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(element.querySelector('app-paginator')).not.toBeNull();
-    expect(
-      element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()
-    ).toBe('1/8');
-  });
-
-  it('renders the modal showcase and opens the confirm demos from the buttons', async () => {
-    const modalServiceStub = createModalServiceStub();
-    await TestBed.configureTestingModule({
-      imports: [ReutilizablesTestPageComponent],
-      providers: [
-        {
-          provide: TenantService,
-          useValue: createTenantServiceStub(tenant)
-        },
-        {
-          provide: ToastService,
-          useValue: createToastServiceStub()
-        },
-        {
-          provide: ModalService,
-          useValue: modalServiceStub
-        }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(ReutilizablesTestPageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-    const buttons = Array.from(
-      element.querySelectorAll('.button-group app-button button')
-    );
-    const confirmButton = buttons.find((button) =>
-      button.textContent?.includes('Abrir confirm modal')
-    ) as HTMLButtonElement;
-    const deleteButton = buttons.find((button) =>
-      button.textContent?.includes('Abrir confirm delete')
-    ) as HTMLButtonElement;
-
-    expect(
-      element.querySelector('[data-testid="modal-last-result"]')?.textContent
-    ).toContain('Todavia no se abrio ningun modal.');
-
-    confirmButton.click();
-    fixture.detectChanges();
-    deleteButton.click();
-    fixture.detectChanges();
-
-    expect(modalServiceStub.openConfirm).toHaveBeenCalledWith({
-      title: 'Confirmar accion',
-      content: 'Caso base para verificar apertura, cierre y devolucion de resultado.',
-      confirmLabel: 'Confirmar'
-    });
-    expect(modalServiceStub.openConfirmDelete).toHaveBeenCalledWith({
-      title: 'Eliminar producto',
-      content:
-        'Esta accion eliminara el producto del catalogo. Podras volver a crearlo manualmente.',
-      confirmLabel: 'Eliminar'
-    });
-    expect(
-      element.querySelector('[data-testid="modal-last-result"]')?.textContent
-    ).toContain('Resultado: false');
-  });
-
-  it('updates the visible result when the confirm modal resolves to true', 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 confirmButton = Array.from(
-      element.querySelectorAll('.button-group app-button button')
-    ).find((button) =>
-      button.textContent?.includes('Abrir confirm modal')
-    ) as HTMLButtonElement;
-
-    confirmButton.click();
-    fixture.detectChanges();
-
-    expect(
-      element.querySelector('[data-testid="modal-last-result"]')?.textContent
-    ).toContain('Resultado: true');
  });
 });
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
+++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
@@ -1,45 +1,16 @@
 import { Component, inject } from '@angular/core';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
-import {
-  CartComponent,
-  CartItemMock
-} from '../../../../shared/components/cart/cart.component';
-import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
-import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
 import { InputComponent } from '../../../../shared/components/input/input.component';
-import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
-import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
-import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
-import { ModalService } from '../../../../core/services/modal.service';
 import { TenantService } from '../../../../core/services/tenant.service';
-import { ToastService } from '../../../../core/services/toast.service';
-import { StepperComponent } from '../../../../shared/components/stepper/stepper.component';
-import { StepComponent } from '../../../../shared/components/stepper/step.component';

@Component({
  selector: 'app-reutilizables-test-page',
-  imports: [
-    ButtonComponent,
-    CartComponent,
-    InputComponent,
-    PaginatorComponent,
-    ProductCardComponent,
-    StoreSectionComponent,
-    IconButtonComponent,
-    CartIconComponent,
-    StepperComponent,
-    StepComponent
-  ],
+  imports: [ButtonComponent, InputComponent],
  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 testStep1Valid = true;
-  protected testStep2Valid = false;
  protected readonly tenant = this.tenantService.tenant;
  protected textValue = 'Auriculares';
  protected numberValue = '24';
@@ -56,91 +27,6 @@ export class ReutilizablesTestPageComponent {
  protected fileName = '';
  protected clearTrigger = 0;
  protected editableDisabled = true;
-  protected currentPage = 1;
-  protected cartVisible = true;
-  protected lastModalResult = 'Todavia no se abrio ningun modal.';
-  protected readonly paginatorTotalPages = 8;
-  protected readonly cartBackgroundColor = '#ffffff';
-
-  protected readonly testProducts = [
-    {
-      title: 'Pantalon recto de scuba negro',
-      originalPrice: 95000,
-      discount: 20,
-      transferPrice: 74800,
-      imageUrl: '/images/pantalon-scuba.png'
-    },
-    {
-      title: 'Zapatillas de running azul',
-      originalPrice: 120000,
-      discount: 15,
-      transferPrice: 98000,
-      imageUrl: '/images/zapatillas-running.png'
-    },
-    {
-      title: 'Remera basica blanca (Sin Descuento)',
-      originalPrice: 32000,
-      discount: null,
-      transferPrice: 30000,
-      imageUrl: null
-    }
-  ];
-
-  protected readonly cartMockItems: CartItemMock[] = [
-    {
-      imageUrl: null,
-      product: 'Calza termica unisex con proceso sense y cintura con mayor agarre',
-      originalPrice: 95000,
-      discountedPrice: 76000,
-      discountPercentage: 20,
-      quantity: 1,
-      attributes: [
-        { label: 'Color', value: 'Beige' },
-        { label: 'Talle', value: 'S' }
-      ]
-    },
-    {
-      imageUrl: null,
-      product: 'Pantalon recto de scuba negro',
-      originalPrice: null,
-      discountedPrice: 89000,
-      discountPercentage: null,
-      quantity: 1,
-      attributes: [
-        { label: 'Color', value: 'Beige' },
-        { label: 'Talle', value: 'S' }
-      ]
-    },
-    {
-      imageUrl: null,
-      product: 'Top de supplex color habano',
-      originalPrice: 98000,
-      discountedPrice: 85000,
-      discountPercentage: 20,
-      quantity: 1,
-      attributes: [
-        { label: 'Color', value: 'Negro' },
-        { label: 'Talle', value: 'XL' }
-      ]
-    },
-    {
-      imageUrl: null,
-      product: 'Buzo oversize canguro gris',
-      originalPrice: 72000,
-      discountedPrice: 69000,
-      discountPercentage: 5,
-      quantity: 2,
-      attributes: [
-        { label: 'Color', value: 'Gris' },
-        { label: 'Talle', value: 'M' }
-      ]
-    }
-  ];
-
-  protected onProductBuy(productTitle: string): void {
-    console.log(`Comprando: ${productTitle}`);
-    alert(`Comprando: ${productTitle}`);
-  }

  protected onFileChange(file: File | null): void {
    this.fileName = file?.name ?? '';
@@ -150,112 +36,4 @@ export class ReutilizablesTestPageComponent {
    this.fileName = '';
    this.clearTrigger += 1;
  }
-
-  protected showCart(): void {
-    this.cartVisible = true;
-  }
-
-  protected hideCart(): void {
-    this.cartVisible = false;
-    this.toastService.info('Se disparo el evento de cerrado del carrito mock.');
-  }
-
-  protected triggerToast(type: 'success' | 'danger' | 'info'): void {
-    if (type === 'success') {
-      this.toastService.success(
-        'Operacion exitosa. El producto se ha guardado correctamente.'
-      );
-    } else if (type === 'danger') {
-      this.toastService.danger(
-        'Alerta de error. Hubo un problema al procesar la solicitud.'
-      );
-    } else if (type === 'info') {
-      this.toastService.info(
-        'Informacion del sistema: Hay una nueva actualizacion disponible.'
-      );
-    }
-  }
-
-  protected triggerPersistentToast(type: 'success' | 'danger' | 'info'): void {
-    if (type === 'success') {
-      this.toastService.success(
-        'Exito persistente. Esta alerta no se cerrara sola.',
-        0
-      );
-    } else if (type === 'danger') {
-      this.toastService.danger(
-        'Error persistente. Por favor, atienda este problema y cierrelo manualmente.',
-        0
-      );
-    } else if (type === 'info') {
-      this.toastService.info(
-        'Informacion persistente: Mantendremos este aviso en pantalla.',
-        0
-      );
-    }
-  }
-
-  protected openBasicModal(): void {
-    this.openConfirmModal({
-      title: 'Confirmar accion',
-      content:
-        'Caso base para verificar apertura, cierre y devolucion de resultado.',
-      confirmLabel: 'Confirmar'
-    });
-  }
-
-  protected openConfirmDeleteModal(): void {
-    this.openConfirmDelete({
-      title: 'Eliminar producto',
-      content:
-        'Esta accion eliminara el producto del catalogo. Podras volver a crearlo manualmente.',
-      confirmLabel: 'Eliminar'
-    });
-  }
-
-  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'
-    });
-  }
-
-  protected openSimpleModal(): void {
-    this.modalService.openSimple({
-      title: 'Mensaje del sistema',
-      content: 'Este es un mensaje simple del sistema que no requiere confirmación.',
-      buttonLabel: 'Entendido'
-    }).subscribe(() => {
-      this.lastModalResult = 'Simple modal cerrado';
-    });
-  }
-
-  private openConfirmModal(config: Parameters<ModalService['openConfirm']>[0]): void {
-    this.modalService.openConfirm(config).subscribe((confirmed) => {
-      this.lastModalResult = `Resultado: ${confirmed}`;
-    });
-  }
-
-  private openConfirmDelete(
-    config: Parameters<ModalService['openConfirmDelete']>[0]
-  ): void {
-    this.modalService.openConfirmDelete(config).subscribe((confirmed) => {
-      this.lastModalResult = `Resultado: ${confirmed}`;
-    });
-  }
 }
-
-
--- a/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.html
+++ b/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.html
@@ -1,40 +0,0 @@
-<div class="attribute-selector">
-  @for (attribute of attributes(); track attribute.id) {
-    <div class="attribute-selector__row">
-      <span class="attribute-selector__label">{{ attribute.nombre }}:</span>
-
-      <div class="attribute-selector__options">
-        @for (option of attribute.options; track option.id) {
-          @if (isColorOption(option)) {
-            <button
-              type="button"
-              class="attribute-selector__swatch"
-              [class.attribute-selector__swatch--selected]="hasSelectedOption(attribute, option)"
-              [class.attribute-selector__swatch--disabled]="!availableOptions()[attribute.id][option.id]"
-              [style.background-color]="getOptionSwatchColor(option)"
-              [attr.aria-label]="option.label"
-              [attr.aria-pressed]="hasSelectedOption(attribute, option)"
-              [title]="option.label"
-              [disabled]="!availableOptions()[attribute.id][option.id]"
-              (click)="selectAttributeOption(attribute, option)"
-            >
-              <span class="visually-hidden">{{ option.label }}</span>
-            </button>
-          } @else {
-            <button
-              type="button"
-              class="attribute-selector__text-option"
-              [class.attribute-selector__text-option--selected]="hasSelectedOption(attribute, option)"
-              [class.attribute-selector__text-option--disabled]="!availableOptions()[attribute.id][option.id]"
-              [attr.aria-pressed]="hasSelectedOption(attribute, option)"
-              [disabled]="!availableOptions()[attribute.id][option.id]"
-              (click)="selectAttributeOption(attribute, option)"
-            >
-              {{ option.label }}
-            </button>
-          }
-        }
-      </div>
-    </div>
-  }
-</div>
--- a/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.scss
+++ b/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.scss
@@ -1,83 +0,0 @@
-.attribute-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-
-  &__row {
-    display: flex;
-    align-items: center;
-    gap: 0.875rem;
-    flex-wrap: wrap;
-  }
-
-  &__label {
-    font-size: 15px;
-    font-weight: 700;
-    line-height: 1.2;
-    color: #A0A0A0;
-    min-width: 44px;
-  }
-
-  &__options {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    flex-wrap: wrap;
-  }
-
-  &__swatch {
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    border: 1px solid transparent;
-    padding: 0;
-    cursor: pointer;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
-    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-
-    &:hover {
-      transform: scale(1.05);
-    }
-
-    &--selected {
-      border-color: var(--tenant-primary);
-      box-shadow:
-        0 0 0 2px rgba(255, 255, 255, 1),
-        0 0 0 3px var(--tenant-primary);
-    }
-
-    &--disabled {
-      opacity: 0.3;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  &__text-option {
-    border: 1px solid #dcdcdc;
-    background: #ffffff;
-    color: #666666;
-    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
-    min-width: 34px;
-    min-height: 34px;
-    border-radius: 4px;
-    padding: 0.35rem 0.6rem;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 1;
-
-    &--selected {
-      background: var(--tenant-primary);
-      border-color: var(--tenant-primary);
-      color: #ffffff;
-    }
-
-    &--disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-      background-color: #f9f9f9;
-      color: #b0b0b0;
-      pointer-events: none;
-    }
-  }
-}
--- a/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.ts
+++ b/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.ts
@@ -1,263 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  input,
-  output,
-  signal,
-  untracked
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
-  ProductAttribute,
-  ProductAttributeOption,
-  ProductVariant,
-  ProductVariantMap
-} from '../../../../core/services/catalog/catalog.interface';
-
-@Component({
-  selector: 'app-product-attribute-selector',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './product-attribute-selector.component.html',
-  styleUrl: './product-attribute-selector.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ProductAttributeSelectorComponent {
-  public attributes = input<ProductAttribute[]>([]);
-  public variantsMap = input<ProductVariantMap[]>([]);
-  public defaultVariant = input<ProductVariant | null>(null);
-
-  public variantChange = output<ProductVariantMap | null>();
-
-  protected readonly selectedAttributeOptions = signal<Record<number, number>>({});
-
-  protected readonly availableOptions = computed(() => {
-    const selections = this.selectedAttributeOptions();
-    const variants = this.variantsMap();
-    const attributes = this.attributes();
-
-    const availability: Record<number, Record<number, boolean>> = {};
-
-    for (const attribute of attributes) {
-      availability[attribute.id] = {};
-      for (const option of attribute.options) {
-        const optionNormalized = this.normalizeText(option.value || option.label);
-        
-        const isAvailable = variants.some(variant => {
-          if (variant.cantidad_maxima <= 0) return false;
-
-          const variantAttrValue = this.getDefaultVariantAttributeValue(attribute, variant.attributes);
-          if (!variantAttrValue || this.normalizeText(variantAttrValue) !== optionNormalized) {
-             return false;
-          }
-
-          for (const otherAttr of attributes) {
-             if (otherAttr.id === attribute.id) continue;
-             const selectedOptionId = selections[otherAttr.id];
-             if (selectedOptionId !== undefined) {
-                const selectedOption = otherAttr.options.find(o => o.id === selectedOptionId);
-                if (selectedOption) {
-                   const selectedNormalized = this.normalizeText(selectedOption.value || selectedOption.label);
-                   const vAttrValue = this.getDefaultVariantAttributeValue(otherAttr, variant.attributes);
-                   if (!vAttrValue || this.normalizeText(vAttrValue) !== selectedNormalized) {
-                      return false;
-                   }
-                }
-             }
-          }
-          return true;
-        });
-
-        availability[attribute.id][option.id] = isAvailable;
-      }
-    }
-
-    return availability;
-  });
-
-  public reset(): void {
-    this.initializeSelections(this.attributes(), this.defaultVariant());
-  }
-
-  constructor() {
-    effect(() => {
-      const attributes = this.attributes();
-      const defaultVariant = this.defaultVariant();
-      
-      untracked(() => {
-        this.initializeSelections(attributes, defaultVariant);
-      });
-    });
-
-    effect(() => {
-      const selections = this.selectedAttributeOptions();
-      const variantsMap = this.variantsMap();
-      const attributes = this.attributes();
-      
-      untracked(() => {
-         this.emitMatchingVariant(selections, variantsMap, attributes);
-      });
-    });
-  }
-
-  protected hasSelectedOption(attribute: ProductAttribute, option: ProductAttributeOption): boolean {
-    return this.selectedAttributeOptions()[attribute.id] === option.id;
-  }
-
-  protected selectAttributeOption(
-    attribute: ProductAttribute,
-    option: ProductAttributeOption
-  ): void {
-    this.selectedAttributeOptions.update((current) => ({
-      ...current,
-      [attribute.id]: option.id
-    }));
-  }
-
-  protected isColorOption(option: ProductAttributeOption): boolean {
-    return this.findFirstHexValue(option.metadata) !== null;
-  }
-
-  protected getOptionSwatchColor(option: ProductAttributeOption): string {
-    return this.findFirstHexValue(option.metadata) ?? '#D9D9D9';
-  }
-
-  private initializeSelections(attributes: ProductAttribute[], defaultVariant: ProductVariant | null): void {
-    const selections: Record<number, number> = {};
-
-    for (const attribute of attributes) {
-      const optionId = this.findDefaultOptionId(attribute, defaultVariant);
-      if (optionId !== null) {
-        selections[attribute.id] = optionId;
-      }
-    }
-
-    this.selectedAttributeOptions.set(selections);
-  }
-
-  private findDefaultOptionId(
-    attribute: ProductAttribute,
-    variant: ProductVariant | null
-  ): number | null {
-    if (!variant) {
-      return null;
-    }
-
-    const defaultValue = this.getDefaultVariantAttributeValue(attribute, variant.definitions);
-    if (!defaultValue) {
-      return null;
-    }
-
-    const normalizedValue = this.normalizeText(defaultValue);
-    const matchByValue = attribute.options.find(
-      (option) => this.normalizeText(option.value) === normalizedValue
-    );
-
-    if (matchByValue) {
-      return matchByValue.id;
-    }
-
-    const matchByLabel = attribute.options.find(
-      (option) => this.normalizeText(option.label) === normalizedValue
-    );
-
-    return matchByLabel?.id ?? null;
-  }
-
-  private getDefaultVariantAttributeValue(
-    attribute: ProductAttribute,
-    variantAttributes: Record<string, string>
-  ): string | null {
-    const normalizedCodigo = this.normalizeText(attribute.codigo);
-    const normalizedNombre = this.normalizeText(attribute.nombre);
-
-    for (const [key, value] of Object.entries(variantAttributes)) {
-      const normalizedKey = this.normalizeText(key);
-
-      if (normalizedKey === normalizedCodigo || normalizedKey === normalizedNombre) {
-        return value;
-      }
-    }
-
-    return null;
-  }
-
-  private normalizeText(value: string | null | undefined): string {
-    return (value ?? '')
-      .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '')
-      .trim()
-      .toLowerCase();
-  }
-
-  private findFirstHexValue(value: unknown): string | null {
-    if (typeof value === 'string') {
-      const match = value.match(/#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/);
-      return match ? match[0] : null;
-    }
-
-    if (Array.isArray(value)) {
-      for (const item of value) {
-        const found = this.findFirstHexValue(item);
-        if (found) {
-          return found;
-        }
-      }
-      return null;
-    }
-
-    if (value && typeof value === 'object') {
-      for (const item of Object.values(value)) {
-        const found = this.findFirstHexValue(item);
-        if (found) {
-          return found;
-        }
-      }
-    }
-
-    return null;
-  }
-
-  private emitMatchingVariant(
-    selections: Record<number, number>,
-    variantsMap: ProductVariantMap[],
-    attributes: ProductAttribute[]
-  ): void {
-    if (attributes.length === 0 || variantsMap.length === 0) {
-      this.variantChange.emit(null);
-      return;
-    }
-
-    const selectedValuesById: Record<number, string> = {};
-    let allSelected = true;
-    for (const attr of attributes) {
-      const selectedOptionId = selections[attr.id];
-      if (selectedOptionId === undefined) {
-         allSelected = false;
-         break;
-      }
-      const option = attr.options.find(o => o.id === selectedOptionId);
-      if (option) {
-         selectedValuesById[attr.id] = this.normalizeText(option.value || option.label);
-      }
-    }
-
-    if (!allSelected) {
-      this.variantChange.emit(null);
-      return;
-    }
-
-    const matchingVariant = variantsMap.find(vMap => {
-      return attributes.every(attr => {
-         const selectedValue = selectedValuesById[attr.id];
-         const vMapValue = this.getDefaultVariantAttributeValue(attr, vMap.attributes);
-         if (!vMapValue) return false;
-         return this.normalizeText(vMapValue) === selectedValue;
-      });
-    });
-
-    this.variantChange.emit(matchingVariant || null);
-  }
-}
--- a/src/app/features/store/components/product-carousel/product-carousel.component.html
+++ b/src/app/features/store/components/product-carousel/product-carousel.component.html
@@ -1,51 +0,0 @@
-<div class="product-carousel d-flex flex-column gap-4">
-  <!-- Active/Main Image Area -->
-  <div class="product-carousel__main position-relative bg-light  overflow-hidden">
-    <!-- Main Image -->
-    @if (images().length > 0) {
-    <img [src]="images()[activeIndex()]" alt="Product active image"
-      class="product-carousel__main-image w-100 h-100 object-fit-cover" />
-    } @else {
-    <!-- Placeholder -->
-    <div class="product-carousel__placeholder w-100 h-100 d-flex align-items-center justify-content-center text-muted">
-      <i class="fa-solid fa-image fa-3x"></i>
-    </div>
-    }
-
-    <!-- Discount Badge -->
-    @if (discount() && discount()! > 0) {
-    <span
-      class="product-carousel__discount-badge position-absolute top-0 end-0 bg-primary text-white px-3 py-2 fw-semibold">
-      -{{ discount() }}%
-    </span>
-    }
-
-    <!-- Navigation Arrows -->
-    @if (images().length > 1) {
-    <button type="button"
-      class="product-carousel__nav-btn product-carousel__nav-btn--prev position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
-      (click)="prevImage()" aria-label="Previous image">
-      <i class="fa-solid fa-chevron-left"></i>
-    </button>
-
-    <button type="button"
-      class="product-carousel__nav-btn product-carousel__nav-btn--next position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
-      (click)="nextImage()" aria-label="Next image">
-      <i class="fa-solid fa-chevron-right"></i>
-    </button>
-    }
-  </div>
-
-  <!-- Thumbnails Row -->
-  @if (images().length > 1) {
-  <div class="product-carousel__thumbnails">
-    @for (image of images(); track image; let idx = $index) {
-    <button type="button" class="product-carousel__thumbnail border-0 p-0  overflow-hidden bg-light"
-      [class.product-carousel__thumbnail--active]="idx === activeIndex()" (click)="selectImage(idx)"
-      [attr.aria-label]="'Select image ' + (idx + 1)">
-      <img [src]="image" alt="Product thumbnail" class="w-100 h-100 object-fit-cover" />
-    </button>
-    }
-  </div>
-  }
-</div>
--- a/src/app/features/store/components/product-carousel/product-carousel.component.scss
+++ b/src/app/features/store/components/product-carousel/product-carousel.component.scss
@@ -1,92 +0,0 @@
-.product-carousel {
-  width: 100%;
-
-  &__main {
-    aspect-ratio: 1 / 1;
-    width: 100%;
-    background-color: #e0e0e0 !important;
-    /* Matches grey placeholder in mock */
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__main-image {
-    display: block;
-    padding: 0;
-    transition: transform 0.3s ease;
-  }
-
-  &__placeholder {
-    height: 100%;
-    background-color: #e0e0e0;
-  }
-
-  &__discount-badge {
-    top: 0 !important;
-    right: 0 !important;
-    background-color: var(--tenant-primary, #6376F3) !important;
-    border-bottom-left-radius: 4px;
-    font-size: 0.9rem;
-    letter-spacing: 0.5px;
-    padding: 0.5rem 1rem !important;
-  }
-
-  &__nav-btn {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.2) !important;
-    color: #ffffff !important;
-    font-size: 0.9rem;
-    transition: background-color 0.2s ease, transform 0.2s ease;
-    z-index: 10;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.4) !important;
-      transform: translateY(-50%) scale(1.05);
-    }
-
-    &--prev {
-      left: 16px !important;
-    }
-
-    &--next {
-      right: 16px !important;
-    }
-  }
-
-  &__thumbnails {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 0.5rem;
-    width: 100%;
-  }
-
-  &__thumbnail {
-    width: 100%;
-    aspect-ratio: 1 / 1;
-    background-color: #e0e0e0 !important;
-    /* Matches mock layout */
-    padding: 0;
-    transition: opacity 0.2s ease, border-color 0.2s ease;
-    border: 3px solid transparent !important;
-    cursor: pointer;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    &:hover {
-      opacity: 0.9;
-    }
-
-    &--active {
-      border-color: var(--tenant-primary, #6376F3) !important;
-      opacity: 1;
-    }
-  }
-}
--- a/src/app/features/store/components/product-carousel/product-carousel.component.spec.ts
+++ b/src/app/features/store/components/product-carousel/product-carousel.component.spec.ts
@@ -1,90 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { beforeEach, describe, expect, it } from 'vitest';
-import { ProductCarouselComponent } from './product-carousel.component';
-
-describe('ProductCarouselComponent', () => {
-  const mockImages = [
-    'https://example.com/img1.png',
-    'https://example.com/img2.png',
-    'https://example.com/img3.png'
-  ];
-
-  beforeEach(() => {
-    TestBed.resetTestingModule();
-  });
-
-  async function createComponent(images: string[] = [], discount: number | null = null) {
-    await TestBed.configureTestingModule({
-      imports: [ProductCarouselComponent]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(ProductCarouselComponent);
-    const component = fixture.componentInstance;
-
-    // Set signals input values
-    fixture.componentRef.setInput('images', images);
-    fixture.componentRef.setInput('discount', discount);
-
-    fixture.detectChanges();
-
-    return { fixture, component };
-  }
-
-  it('should create and start at activeIndex 0', async () => {
-    const { component } = await createComponent(mockImages);
-    expect(component).toBeTruthy();
-    expect(component.activeIndex()).toBe(0);
-  });
-
-  it('should cycle through images on nextImage', async () => {
-    const { component } = await createComponent(mockImages);
-    expect(component.activeIndex()).toBe(0);
-
-    component.nextImage();
-    expect(component.activeIndex()).toBe(1);
-
-    component.nextImage();
-    expect(component.activeIndex()).toBe(2);
-
-    component.nextImage(); // Should wrap around to 0
-    expect(component.activeIndex()).toBe(0);
-  });
-
-  it('should cycle backwards on prevImage', async () => {
-    const { component } = await createComponent(mockImages);
-    expect(component.activeIndex()).toBe(0);
-
-    component.prevImage(); // Should wrap around to end (2)
-    expect(component.activeIndex()).toBe(2);
-
-    component.prevImage();
-    expect(component.activeIndex()).toBe(1);
-  });
-
-  it('should set activeIndex on selectImage', async () => {
-    const { component } = await createComponent(mockImages);
-    expect(component.activeIndex()).toBe(0);
-
-    component.selectImage(2);
-    expect(component.activeIndex()).toBe(2);
-
-    // If out of bounds, should not change
-    component.selectImage(5);
-    expect(component.activeIndex()).toBe(2);
-  });
-
-  it('should render discount badge if provided', async () => {
-    const { fixture } = await createComponent(mockImages, 20);
-    const element = fixture.nativeElement as HTMLElement;
-    const badge = element.querySelector('.product-carousel__discount-badge');
-    expect(badge).not.toBeNull();
-    expect(badge?.textContent?.trim()).toBe('-20%');
-  });
-
-  it('should not render discount badge if not provided', async () => {
-    const { fixture } = await createComponent(mockImages);
-    const element = fixture.nativeElement as HTMLElement;
-    const badge = element.querySelector('.product-carousel__discount-badge');
-    expect(badge).toBeNull();
-  });
-});
--- a/src/app/features/store/components/product-carousel/product-carousel.component.ts
+++ b/src/app/features/store/components/product-carousel/product-carousel.component.ts
@@ -1,38 +0,0 @@
-import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'app-product-carousel',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './product-carousel.component.html',
-  styleUrl: './product-carousel.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ProductCarouselComponent {
-  readonly images = input<string[]>([]);
-  readonly discount = input<number | null>(null);
-
-  readonly activeIndex = signal(0);
-
-  nextImage(): void {
-    const total = this.images().length;
-    if (total > 0) {
-      this.activeIndex.set((this.activeIndex() + 1) % total);
-    }
-  }
-
-  prevImage(): void {
-    const total = this.images().length;
-    if (total > 0) {
-      this.activeIndex.set((this.activeIndex() - 1 + total) % total);
-    }
-  }
-
-  selectImage(index: number): void {
-    const total = this.images().length;
-    if (index >= 0 && index < total) {
-      this.activeIndex.set(index);
-    }
-  }
-}
--- a/src/app/features/store/pages/checkout-page/checkout-data-step.component.html
+++ b/src/app/features/store/pages/checkout-page/checkout-data-step.component.html
@@ -1,99 +0,0 @@
-<form
-  class="checkout-form"
-  novalidate
-  [formGroup]="form()"
-  (ngSubmit)="submit()"
->
-  <div class="checkout-form__fields">
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-nombre">
-        Nombre y Apellido <span class="form-field__required" aria-hidden="true">*</span>
-      </label>
-      <app-input
-        id="checkout-nombre"
-        type="text"
-        placeholder="Descripcion"
-        [value]="form().controls.nombre.value"
-        [invalid]="showControlError('nombre')"
-        [disabled]="form().controls.nombre.disabled"
-        (valueChange)="updateField('nombre', $event)"
-      />
-      @if (getControlError('nombre'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
-      }
-    </div>
-
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-email">
-        Email <span class="form-field__required" aria-hidden="true">*</span>
-      </label>
-      <app-input
-        id="checkout-email"
-        type="email"
-        placeholder="Descripcion"
-        [value]="form().controls.email.value"
-        [invalid]="showControlError('email')"
-        [disabled]="form().controls.email.disabled"
-        (valueChange)="updateField('email', $event)"
-      />
-      @if (getControlError('email'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
-      }
-    </div>
-
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-dni">
-        DNI <span class="form-field__required" aria-hidden="true">*</span>
-      </label>
-      <app-input
-        id="checkout-dni"
-        type="text"
-        placeholder="Descripcion"
-        [value]="form().controls.dni.value"
-        [invalid]="showControlError('dni')"
-        [disabled]="form().controls.dni.disabled"
-        (valueChange)="updateField('dni', $event)"
-      />
-      @if (getControlError('dni'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
-      }
-    </div>
-
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-telefono">
-        Telefono <span class="form-field__required" aria-hidden="true">*</span>
-      </label>
-      <app-input
-        id="checkout-telefono"
-        type="text"
-        placeholder="Descripcion"
-        [value]="form().controls.telefono.value"
-        [invalid]="showControlError('telefono')"
-        [disabled]="form().controls.telefono.disabled"
-        (valueChange)="updateField('telefono', $event)"
-      />
-      @if (getControlError('telefono'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
-      }
-    </div>
-  </div>
-
-  <div class="checkout-form__actions">
-    <app-button
-      type="button"
-      variant="cancel"
-      hostClass="checkout-form__action-btn"
-      buttonClass="w-100"
-      (click)="cancelStep.emit()"
-    >
-      Cancelar
-    </app-button>
-    <app-button
-      type="submit"
-      hostClass="checkout-form__action-btn"
-      buttonClass="w-100"
-    >
-      Continuar
-    </app-button>
-  </div>
-</form>
--- a/src/app/features/store/pages/checkout-page/checkout-data-step.component.scss
+++ b/src/app/features/store/pages/checkout-page/checkout-data-step.component.scss
@@ -1,48 +0,0 @@
-.checkout-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-
-  &__fields {
-    display: grid;
-    gap: 1.25rem;
-  }
-
-  &__actions {
-    display: flex;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-    gap: 1rem;
-    margin-top: 0.5rem;
-  }
-
-  &__action-btn {
-    display: block;
-    width: 100%;
-    flex: 1 1 290px;
-    max-width: 290px;
-  }
-}
-
-.form-field {
-  display: grid;
-  gap: 0.35rem;
-
-  &__label {
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: var(--bs-secondary, #6c757d);
-    letter-spacing: 0;
-  }
-
-  &__required {
-    color: var(--bs-danger, #dc3545);
-    margin-left: 2px;
-  }
-
-  &__error {
-    font-size: 0.75rem;
-    color: var(--bs-danger, #dc3545);
-  }
-}
-
--- a/src/app/features/store/pages/checkout-page/checkout-data-step.component.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-data-step.component.ts
@@ -1,47 +0,0 @@
-import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-
-import { ButtonComponent } from '../../../../shared/components/button/button.component';
-import { InputComponent } from '../../../../shared/components/input/input.component';
-import { CheckoutForm } from './checkout-page.models';
-
-@Component({
-  selector: 'app-checkout-data-step',
-  standalone: true,
-  imports: [ReactiveFormsModule, InputComponent, ButtonComponent],
-  templateUrl: './checkout-data-step.component.html',
-  styleUrl: './checkout-data-step.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class CheckoutDataStepComponent {
-  readonly form = input.required<CheckoutForm>();
-  readonly cancelStep = output<void>();
-  readonly continueStep = output<void>();
-
-  protected updateField(field: keyof CheckoutForm['controls'], value: string | number): void {
-    this.form().controls[field].setValue(String(value));
-  }
-
-  protected showControlError(controlName: keyof CheckoutForm['controls']): boolean {
-    const control = this.form().controls[controlName];
-    return control.invalid && control.touched;
-  }
-
-  protected getControlError(controlName: keyof CheckoutForm['controls']): string | null {
-    const control = this.form().controls[controlName];
-    if (!this.showControlError(controlName)) return null;
-    if (control.hasError('required')) return 'Este campo es obligatorio.';
-    if (control.hasError('email')) return 'Ingresa un email valido.';
-    return 'El valor ingresado no es valido.';
-  }
-
-  protected submit(): void {
-    const form = this.form();
-    if (form.invalid) {
-      form.markAllAsTouched();
-      return;
-    }
-
-    this.continueStep.emit();
-  }
-}
--- a/src/app/features/store/pages/checkout-page/checkout-page.component.html
+++ b/src/app/features/store/pages/checkout-page/checkout-page.component.html
@@ -1,40 +0,0 @@
-<div class="container-xl px-3 px-md-4 py-4">
-  <div class="checkout-page">
-    <div class="checkout-page__stepper-col ">
-      <app-stepper #stepper>
-        <app-step label="Datos" [isValid]="isStep1Valid()">
-          <app-checkout-data-step
-            [form]="form"
-            (cancelStep)="onCancel()"
-            (continueStep)="onStep1Continue()"
-          />
-        </app-step>
-
-        <app-step label="Pago">
-          <app-checkout-payment-step
-            [paymentMethods]="paymentMethods"
-            [selectedPaymentMethod]="selectedPaymentMethod()"
-            [copiedTransferField]="copiedTransferField()"
-            [transferAccount]="transferAccount()"
-            [isGeneratingIntent]="isPaymentLoading()"
-            [qrData]="qrData()"
-            (paymentMethodChange)="selectPaymentMethod($event)"
-            (copyTransferValue)="copyTransferValue($event.field, $event.value)"
-            (cancelStep)="onCancel()"
-            (complete)="onComplete()"
-          />
-        </app-step>
-      </app-stepper>
-    </div>
-
-    <div class="checkout-page__cart-col">
-      <app-cart
-        [items]="mappedCartItems()"
-        [subtotal]="cartSubtotal()"
-        [discount]="cartDiscount()"
-        [total]="cartTotal()"
-        backgroundColor="transparent"
-      />
-    </div>
-  </div>
-</div>
--- a/src/app/features/store/pages/checkout-page/checkout-page.component.scss
+++ b/src/app/features/store/pages/checkout-page/checkout-page.component.scss
@@ -1,25 +0,0 @@
-.checkout-page {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 420px;
-  gap: 4rem;
-  align-items: start;
-  padding: 2rem 0;
-
-  @media (max-width: 900px) {
-    grid-template-columns: 1fr;
-  }
-
-  &__stepper-col {
-    min-width: 0;
-    border-radius: 4px;
-    min-height: 420px;
-  }
-
-  &__cart-col {
-
-    max-height: 80vh;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-}
--- a/src/app/features/store/pages/checkout-page/checkout-page.component.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-page.component.ts
@@ -1,260 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, effect, inject, OnInit, signal, untracked, ViewChild } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
-import { startWith } from 'rxjs';
-
-import { CartService } from '../../../../core/services/cart/cart.service';
-import { TenantService } from '../../../../core/services/tenant.service';
-import { CheckoutService, CreatePurchasePayload } from '../../../../core/services/checkout.service';
-import { AuthService } from '../../../../core/services/auth/auth.service';
-import { BankAccount } from '../../../../core/services/tenant.interface';
-import { CartItem } from '../../../../core/services/cart/cart.interface';
-import { CartComponent, CartItemMock } from '../../../../shared/components/cart/cart.component';
-import { StepComponent } from '../../../../shared/components/stepper/step.component';
-import { StepperComponent } from '../../../../shared/components/stepper/stepper.component';
-import { CheckoutDataStepComponent } from './checkout-data-step.component';
-import { CheckoutPaymentStepComponent } from './checkout-payment-step.component';
-import { CheckoutForm, PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
-
-@Component({
-  selector: 'app-checkout-page',
-  standalone: true,
-  imports: [
-    CartComponent,
-    StepperComponent,
-    StepComponent,
-    CheckoutDataStepComponent,
-    CheckoutPaymentStepComponent
-  ],
-  templateUrl: './checkout-page.component.html',
-  styleUrl: './checkout-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class CheckoutPageComponent implements OnInit {
-  private readonly formBuilder = inject(FormBuilder);
-  private readonly cartService = inject(CartService);
-  private readonly router = inject(Router);
-  private readonly tenantService = inject(TenantService);
-  private readonly checkoutService = inject(CheckoutService);
-  private readonly authService = inject(AuthService);
-
-  @ViewChild(StepperComponent) stepper!: StepperComponent;
-
-  protected readonly form: CheckoutForm = this.formBuilder.nonNullable.group({
-    nombre: ['', [Validators.required]],
-    email: ['', [Validators.required, Validators.email]],
-    dni: ['', [Validators.required]],
-    telefono: ['', [Validators.required]]
-  });
-
-  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));
-  });
-
-  protected readonly isStep1Valid = signal(this.form.valid);
-  protected readonly paymentMethods: ReadonlyArray<PaymentMethodOption> = [
-    { id: 'qr', label: 'QR' },
-    { id: 'transfer', label: 'Transferencia' },
-    { id: 'telepagos', label: 'TelePagos' }
-  ];
-  protected readonly selectedPaymentMethod = signal<PaymentMethod>('qr');
-  protected readonly copiedTransferField = signal<TransferField | null>(null);
-  protected readonly transferAccount = signal<TransferAccount>({
-    titular: 'Nombre y Apellido',
-    entidad: 'TelePagos',
-    cvu: '0000000000000000000000',
-    alias: 'telepagos.ar'
-  });
-
-  protected readonly isCreatingPurchase = signal(false);
-  protected readonly createdPurchaseId = signal<number | null>(null);
-  protected readonly isGeneratingIntent = signal(false);
-  protected readonly isPaymentLoading = computed(() => this.isGeneratingIntent() || this.cartService.isUpdating());
-  protected readonly qrData = signal<string | null>(null);
-
-  constructor() {
-    effect(() => {
-      // We only want to trigger the intent generation when the cart changes.
-      // So we track the cart, but untrack the other signals to prevent duplicate calls.
-      const cart = this.cartService.cart();
-      
-      untracked(() => {
-        const purchaseId = this.createdPurchaseId();
-        if (cart && purchaseId) {
-          // Trigger payment intent generation when cart changes and we are on the payment step
-          void this.selectPaymentMethod(this.selectedPaymentMethod());
-        }
-      });
-    });
-
-    this.form.statusChanges
-      .pipe(startWith(this.form.status))
-      .subscribe(() => this.isStep1Valid.set(this.form.valid));
-
-    const user = this.authService.user();
-    if (user) {
-      this.form.patchValue({
-        nombre: user.nombre_apellido,
-        email: user.email,
-        dni: user.dni ?? '',
-        telefono: user.telefono ?? ''
-      });
-      this.form.controls.nombre.disable();
-      this.form.controls.email.disable();
-    }
-  }
-
-  ngOnInit(): void {
-    this.cartService.loadCart().subscribe();
-  }
-
-  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 async onStep1Continue(): Promise<void> {
-    if (this.form.invalid) return;
-
-    const tenant = this.tenantService.tenant();
-    if (!tenant) return;
-
-    this.isCreatingPurchase.set(true);
-
-    try {
-      const cart = this.cartService.cart();
-      if (!cart?.id) {
-        throw new Error('No hay un carrito activo para finalizar la compra.');
-      }
-
-      const formValue = this.form.getRawValue();
-      const payload: CreatePurchasePayload = {
-        cart_id: cart.id,
-        dni: formValue.dni,
-        telefono: formValue.telefono,
-        email: formValue.email,
-        nombre_apellido: formValue.nombre,
-      };
-
-      const response = await this.checkoutService.createPurchase(tenant.codigo, payload);
-      this.createdPurchaseId.set(response.id);
-      
-      this.stepper.next();
-      
-      // Auto trigger intent for default option
-      void this.selectPaymentMethod(this.selectedPaymentMethod());
-
-    } catch (error) {
-      console.error('Failed to create purchase:', error);
-      // Here we could show an alert or toast
-    } finally {
-      this.isCreatingPurchase.set(false);
-    }
-  }
-
-  protected onCancel(): void {
-    void this.router.navigate(['/']);
-  }
-
-  protected async selectPaymentMethod(method: PaymentMethod): Promise<void> {
-    this.selectedPaymentMethod.set(method);
-
-    const purchaseId = this.createdPurchaseId();
-    const tenant = this.tenantService.tenant();
-
-    if (!purchaseId || !tenant || method === 'telepagos') {
-      return;
-    }
-
-    this.isGeneratingIntent.set(true);
-
-    try {
-      const response = await this.checkoutService.generatePaymentIntent(tenant.codigo, purchaseId, method);
-      
-      if (method === 'qr' && response.qr_data?.qr_code) {
-        this.qrData.set(response.qr_data.qr_code);
-      } else if (method === 'transfer' && response.transfer_data) {
-        this.transferAccount.set({
-          titular: response.transfer_data.titular,
-          entidad: response.transfer_data.entidad,
-          cvu: response.transfer_data.cvu,
-          alias: response.transfer_data.alias
-        });
-      }
-    } catch (error) {
-      console.error('Failed to generate payment intent:', error);
-    } finally {
-      this.isGeneratingIntent.set(false);
-    }
-  }
-
-  protected async copyTransferValue(field: TransferField, value: string): Promise<void> {
-    if (!globalThis.navigator?.clipboard?.writeText) return;
-
-    try {
-      await globalThis.navigator.clipboard.writeText(value);
-      this.copiedTransferField.set(field);
-
-      setTimeout(() => {
-        if (this.copiedTransferField() === field) {
-          this.copiedTransferField.set(null);
-        }
-      }, 1800);
-    } catch {
-      this.copiedTransferField.set(null);
-    }
-  }
-
-  protected async onComplete(): Promise<void> {
-    const purchaseId = this.createdPurchaseId();
-    const tenant = this.tenantService.tenant();
-
-    if (!purchaseId || !tenant) {
-      return;
-    }
-
-    try {
-      await this.checkoutService.completePurchase(tenant.codigo, purchaseId);
-      this.cartService.clearCart();
-      void this.router.navigate(['/checkout/status', purchaseId]);
-    } catch (error) {
-      console.error('Failed to complete purchase:', error);
-    }
-  }
-}
--- a/src/app/features/store/pages/checkout-page/checkout-page.models.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-page.models.ts
@@ -1,23 +0,0 @@
-import { FormControl, FormGroup } from '@angular/forms';
-
-export type PaymentMethod = 'qr' | 'transfer' | 'telepagos';
-export type TransferField = 'cvu' | 'alias';
-
-export interface PaymentMethodOption {
-  id: PaymentMethod;
-  label: string;
-}
-
-export interface TransferAccount {
-  titular: string;
-  entidad: string;
-  cvu: string;
-  alias: string;
-}
-
-export type CheckoutForm = FormGroup<{
-  nombre: FormControl<string>;
-  email: FormControl<string>;
-  dni: FormControl<string>;
-  telefono: FormControl<string>;
-}>;
--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html
@@ -1,153 +0,0 @@
-<div class="checkout-payment">
-  <div class="checkout-payment__content">
-    <section class="payment-methods" aria-labelledby="payment-methods-title">
-      <h2 id="payment-methods-title" class="payment-methods__title">Selecciona el metodo de pago</h2>
-
-      <div class="payment-methods__list" role="radiogroup" aria-label="Metodo de pago">
-        @for (method of paymentMethods(); track method.id) {
-          <label
-            class="payment-method"
-            [class.is-selected]="selectedPaymentMethod() === method.id"
-          >
-            <input
-              class="payment-method__radio"
-              type="radio"
-              name="payment-method"
-              [value]="method.id"
-              [checked]="selectedPaymentMethod() === method.id"
-              (change)="selectPaymentMethod(method.id)"
-            />
-
-            <span class="payment-method__label">
-              @if (method.id === 'telepagos') {
-                <span class="telepagos-logo" aria-label="TelePagos">
-                  <span class="telepagos-logo__tele">tele</span><span class="telepagos-logo__pagos">pagos</span>
-                </span>
-              } @else {
-                {{ method.label }}
-              }
-            </span>
-
-            <i class="fa-solid fa-angle-right payment-method__chevron" aria-hidden="true"></i>
-          </label>
-        }
-      </div>
-    </section>
-
-    <section class="payment-panel d-flex justify-content-end" aria-live="polite">
-      @if (isGeneratingIntent()) {
-        <div class="payment-panel__card" style="text-align: center; padding: 2rem;">
-          <h3 class="payment-panel__title">Cargando información de pago...</h3>
-        </div>
-      } @else if (selectedPaymentMethod() === 'qr') {
-        <div class="payment-panel__card">
-          <h3 class="payment-panel__title">Ingresa a tu billetera y escanea el siguiente QR</h3>
-          <div class="payment-panel__divider"></div>
-
-          <div class="qr-code" aria-label="QR de pago">
-            @if (qrData()) {
-              <qrcode [qrdata]="qrData()!" [width]="200" [errorCorrectionLevel]="'M'"></qrcode>
-            } @else {
-              <span class="qr-code__finder qr-code__finder--tl"></span>
-              <span class="qr-code__finder qr-code__finder--tr"></span>
-              <span class="qr-code__finder qr-code__finder--bl"></span>
-            }
-          </div>
-        </div>
-      } @else if (selectedPaymentMethod() === 'transfer') {
-        <div class="payment-panel__card">
-          <h3 class="payment-panel__title">Transferi a la siguiente cuenta desde cualquier billetera</h3>
-          <div class="payment-panel__divider"></div>
-
-          <div class="payment-panel__account">
-            <p class="payment-panel__eyebrow">DATOS DE CUENTA:</p>
-
-            <div class="payment-detail">
-              <span class="payment-detail__label">Titular:</span>
-              <strong class="payment-detail__value">{{ transferAccount().titular }}</strong>
-            </div>
-
-            <div class="payment-detail">
-              <span class="payment-detail__label">Entidad:</span>
-              <strong class="payment-detail__value">{{ transferAccount().entidad }}</strong>
-            </div>
-
-            <div class="payment-detail payment-detail--copy">
-              <span class="payment-detail__label">CVU:</span>
-              <strong class="payment-detail__value">{{ transferAccount().cvu }}</strong>
-              <app-icon-button
-                variant="copy"
-                ariaLabel="Copiar CVU"
-                (click)="requestCopy('cvu', transferAccount().cvu)"
-              />
-            </div>
-
-            @if (copiedTransferField() === 'cvu') {
-              <small class="payment-detail__feedback">CVU copiado</small>
-            }
-
-            <div class="payment-detail payment-detail--copy">
-              <span class="payment-detail__label">Alias:</span>
-              <strong class="payment-detail__value">{{ transferAccount().alias }}</strong>
-              <app-icon-button
-                variant="copy"
-                ariaLabel="Copiar alias"
-                (click)="requestCopy('alias', transferAccount().alias)"
-              />
-            </div>
-
-            @if (copiedTransferField() === 'alias') {
-              <small class="payment-detail__feedback">Alias copiado</small>
-            }
-          </div>
-        </div>
-      } @else {
-        <div class="payment-panel__card">
-          <h3 class="payment-panel__title">Descarga la app de TelePagos para finalizar la compra</h3>
-          <div class="payment-panel__divider"></div>
-
-          <div class="store-badges" aria-label="Tiendas disponibles">
-            <div class="store-badge">
-              <i class="fa-brands fa-google-play" aria-hidden="true"></i>
-              <span class="store-badge__text">
-                <small>Disponible en</small>
-                <strong>Google Play</strong>
-              </span>
-            </div>
-
-            <div class="store-badge">
-              <i class="fa-brands fa-apple" aria-hidden="true"></i>
-              <span class="store-badge__text">
-                <small>Descargalo en</small>
-                <strong>App Store</strong>
-              </span>
-            </div>
-          </div>
-        </div>
-      }
-    </section>
-  </div>
-
-  <div class="checkout-payment__actions">
-    <app-button
-      type="button"
-      variant="cancel"
-      hostClass="checkout-payment__action-btn"
-      buttonClass="w-100"
-      [disabled]="true"
-    >
-      Cancelar
-    </app-button>
-
-    <app-button
-      type="button"
-      hostClass="checkout-payment__action-btn"
-      buttonClass="w-100"
-      [disabled]="isGeneratingIntent()"
-      (click)="complete.emit()"
-    >
-      Finalizar compra
-    </app-button>
-  </div>
-</div>
-
--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss
@@ -1,306 +0,0 @@
-.checkout-payment {
-  display: grid;
-  gap: 1rem;
-
-  &__content {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
-    gap: 2rem;
-    align-items: start;
-
-    @media (max-width: 760px) {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  &__actions {
-    display: flex;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-    gap: 1rem;
-    margin-top: 2rem;
-  }
-
-  &__action-btn {
-    width: 100%;
-    flex: 1 1 290px;
-    max-width: 290px;
-    display: block;
-  }
-}
-
-.payment-methods {
-  min-width: 0;
-
-  &__title {
-    margin: 0 0 1.75rem;
-    color: #8a8a8a;
-    font-size: 13px;
-    font-weight: 700;
-  }
-
-  &__list {
-    display: grid;
-    gap: 1.1rem;
-  }
-}
-
-.payment-method {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 0.85rem;
-  width: 100%;
-  max-width: 300px;
-  justify-self: start;
-  padding: 0.35rem 0;
-  color: #666666;
-  cursor: pointer;
-  transition: color 0.2s ease;
-
-  &:hover {
-    color: #4f4f4f;
-  }
-
-  &.is-selected {
-    color: var(--tenant-primary, #6376f3);
-  }
-
-  &__radio {
-    width: 16px;
-    height: 16px;
-    margin: 0;
-    accent-color: var(--tenant-primary, #6376f3);
-    cursor: pointer;
-  }
-
-  &__label {
-    min-width: 0;
-    font-size: 13px;
-    font-weight: 700;
-    line-height: 1.2;
-  }
-
-  &__chevron {
-    color: #9f9f9f;
-    font-size: 0.95rem;
-    opacity: 0;
-    transform: translateX(-4px);
-    transition: opacity 0.2s ease, transform 0.2s ease;
-  }
-
-  &.is-selected &__chevron,
-  &:hover &__chevron {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.telepagos-logo {
-  display: inline-block;
-  font-size: 1.45rem;
-  font-weight: 800;
-  line-height: 1;
-  letter-spacing: -0.03em;
-  background: linear-gradient(90deg, #0a69d8 0 78%, #f6a11a 78% 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-
-.payment-panel {
-  min-width: 0;
-  &__card {
-    width: 100%;
-    max-width: 290px;
-    min-height: 269px;
-    padding: 1.5rem 1.75rem;
-    border-radius: 5px;
-    background: #ffffff;
-    color: #666666;
-    box-shadow: 0 0 0 1px #f1f1f1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-
-  &__title {
-    max-width: 18rem;
-    margin: 0;
-    color: #8a8a8a;
-    font-size: 13px;
-    font-weight: 700;
-    line-height: 1.35;
-  }
-
-  &__divider {
-    width: 100%;
-    max-width: 220px;
-    height: 1px;
-    margin: 1.2rem 0 1.45rem;
-    background: #dddddd;
-  }
-
-  &__account {
-    width: 100%;
-    display: grid;
-    gap: 0.75rem;
-    color: #7a7a7a;
-    font-size: 12px;
-  }
-
-  &__eyebrow {
-    margin: 0;
-    color: #838383;
-    font-size: 12px;
-    font-weight: 325;
-    letter-spacing: 0.06em;
-  }
-}
-
-.payment-detail {
-  display: grid;
-  grid-template-columns: auto auto;
-  justify-content: center;
-  gap: 0.35rem;
-  align-items: center;
-  font-size: 12px;
-
-  &--copy {
-    grid-template-columns: auto auto auto;
-  }
-
-  &__label {
-    color: #8a8a8a;
-    font-weight: 325;
-  }
-
-  &__value {
-    color: #5e5e5e;
-    font-weight: 500;
-  }
-
-  &__feedback {
-    display: block;
-    margin-top: -0.25rem;
-    color: var(--tenant-primary, #6376f3);
-    font-size: 0.78rem;
-    font-weight: 700;
-  }
-}
-
-.qr-code {
-  position: relative;
-  width: min(170px, 100%);
-  aspect-ratio: 1;
-  border: 8px solid #ffffff;
-  background-color: #ffffff;
-  background-image:
-    linear-gradient(
-      90deg,
-      rgba(17, 17, 17, 0.95) 0 14%,
-      transparent 14% 28%,
-      rgba(17, 17, 17, 0.95) 28% 42%,
-      transparent 42% 56%,
-      rgba(17, 17, 17, 0.95) 56% 70%,
-      transparent 70% 84%,
-      rgba(17, 17, 17, 0.95) 84% 100%
-    ),
-    linear-gradient(
-      rgba(17, 17, 17, 0.95) 0 14%,
-      transparent 14% 28%,
-      rgba(17, 17, 17, 0.95) 28% 42%,
-      transparent 42% 56%,
-      rgba(17, 17, 17, 0.95) 56% 70%,
-      transparent 70% 84%,
-      rgba(17, 17, 17, 0.95) 84% 100%
-    );
-  background-size: 18px 18px;
-  background-position: 0 0, 9px 9px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  qrcode {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-
-    ::ng-deep canvas,
-    ::ng-deep img {
-      display: block !important;
-      width: 100% !important;
-      height: 100% !important;
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-}
-
-.qr-code__finder {
-  position: absolute;
-  width: 38px;
-  height: 38px;
-  border: 5px solid #111111;
-  background: #ffffff;
-  box-shadow: inset 0 0 0 8px #ffffff, inset 0 0 0 14px #111111;
-
-  &--tl {
-    top: 10px;
-    left: 10px;
-  }
-
-  &--tr {
-    top: 10px;
-    right: 10px;
-  }
-
-  &--bl {
-    bottom: 10px;
-    left: 10px;
-  }
-}
-
-.store-badges {
-  width: 100%;
-  max-width: 210px;
-  display: grid;
-  gap: 0.8rem;
-}
-
-.store-badge {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 0.95rem;
-  border-radius: 0.85rem;
-  background: #111111;
-  color: #ffffff;
-  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.16);
-
-  i {
-    font-size: 1.35rem;
-  }
-
-  &__text {
-    display: grid;
-    text-align: left;
-    line-height: 1.1;
-
-    small {
-      font-size: 0.62rem;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-      opacity: 0.8;
-    }
-
-    strong {
-      font-size: 1rem;
-      font-weight: 700;
-    }
-  }
-}
-
--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts
@@ -1,36 +0,0 @@
-import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
-
-import { ButtonComponent } from '../../../../shared/components/button/button.component';
-import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
-import { QRCodeComponent } from '../../../../shared/components/qrcode/qrcode.component';
-import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
-
-@Component({
-  selector: 'app-checkout-payment-step',
-  standalone: true,
-  imports: [ButtonComponent, IconButtonComponent, QRCodeComponent],
-  templateUrl: './checkout-payment-step.component.html',
-  styleUrl: './checkout-payment-step.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class CheckoutPaymentStepComponent {
-  readonly paymentMethods = input.required<ReadonlyArray<PaymentMethodOption>>();
-  readonly selectedPaymentMethod = input.required<PaymentMethod>();
-  readonly copiedTransferField = input<TransferField | null>(null);
-  readonly transferAccount = input.required<TransferAccount>();
-  readonly isGeneratingIntent = input<boolean>(false);
-  readonly qrData = input<string | null>(null);
-
-  readonly paymentMethodChange = output<PaymentMethod>();
-  readonly copyTransferValue = output<{ field: TransferField; value: string }>();
-  readonly cancelStep = output<void>();
-  readonly complete = output<void>();
-
-  protected selectPaymentMethod(method: PaymentMethod): void {
-    this.paymentMethodChange.emit(method);
-  }
-
-  protected requestCopy(field: TransferField, value: string): void {
-    this.copyTransferValue.emit({ field, value });
-  }
-}
--- a/src/app/features/store/pages/login-page/login-page.component.html
+++ b/src/app/features/store/pages/login-page/login-page.component.html
@@ -1,111 +0,0 @@
-<header class="login-page__header text-center mb-2">
-  <h1 id="login-title" class="auth-title mb-3">Iniciar sesion</h1>
-  @if (serverError(); as errorMessage) {
-      <small class="text-danger">{{ errorMessage }}</small>
-    }
-</header>
-
-<form
-  class="login-page__form d-grid gap-3"
-  novalidate
-  aria-labelledby="login-title"
-  [formGroup]="form"
-  (ngSubmit)="onSubmit()"
->
-  <div class="d-grid gap-3">
-    <label class="visually-hidden" for="login-email">Email</label>
-    <app-input
-      id="login-email"
-      type="email"
-      placeholder="Email"
-      [value]="form.controls.email.value"
-      [invalid]="showControlError('email')"
-      (valueChange)="updateEmail($event)"
-    />
-    @if (getControlError('email'); as errorMessage) {
-      <small class="text-danger">{{ errorMessage }}</small>
-    }
-
-    <div class="d-grid gap-1">
-      <label class="visually-hidden" for="login-password">Contrasena</label>
-      <app-input
-        id="login-password"
-        type="password"
-        placeholder="Contrasena"
-        [value]="form.controls.password.value"
-        [invalid]="showControlError('password')"
-        (valueChange)="updatePassword($event)"
-      />
-      @if (getControlError('password'); as errorMessage) {
-        <small class="text-danger">{{ errorMessage }}</small>
-      }
-      <div class="text-end">
-        <button type="button" class="login-page__forgot-password btn btn-link p-0 border-0 text-decoration-none">
-          Olvide mi contrasena
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="d-grid gap-2 text-center">
-    <app-button
-      type="submit"
-      hostClass="w-100 d-block"
-      buttonClass="w-100"
-      [disabled]="isSubmitting()"
-    >
-      {{ isSubmitting() ? 'Ingresando...' : 'Ingresar' }}
-    </app-button>
-    
-    <app-button
-      type="button"
-      variant="borderless"
-      hostClass="w-100 d-block text-center"
-      buttonClass="login-page__create-account px-3 py-2"
-      [disabled]="isSubmitting()"
-      (click)="goToRegister()"
-    >
-      Crear cuenta
-    </app-button>
-  </div>
-</form>
-
-<div class="login-page__divider d-flex align-items-center justify-content-center gap-3 my-4" aria-hidden="true">
-  <span class="login-page__divider-line flex-grow-1"></span>
-  <span class="login-page__divider-dot rounded-circle border flex-shrink-0"></span>
-  <span class="login-page__divider-line flex-grow-1"></span>
-</div>
-
-<app-button
-  type="button"
-  variant="neutral-outline"
-  hostClass="w-100 d-block"
-  buttonClass="w-100 d-inline-flex align-items-center justify-content-center gap-2 py-2 fw-semibold"
-  [disabled]="true"
->
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 48 48"
-    width="18"
-    height="18"
-    aria-hidden="true"
-  >
-    <path
-      fill="#FFC107"
-      d="M43.61 20.08H42V20H24v8h11.3C33.65 32.66 29.19 36 24 36c-6.63 0-12-5.37-12-12s5.37-12 12-12c3.06 0 5.84 1.15 7.96 3.04l5.66-5.66C34.09 6.05 29.3 4 24 4C12.95 4 4 12.95 4 24s8.95 20 20 20s20-8.95 20-20c0-1.34-.14-2.65-.39-3.92z"
-    />
-    <path
-      fill="#FF3D00"
-      d="M6.31 14.69l6.57 4.82C14.66 15.1 18.96 12 24 12c3.06 0 5.84 1.15 7.96 3.04l5.66-5.66C34.09 6.05 29.3 4 24 4C16.32 4 9.66 8.34 6.31 14.69z"
-    />
-    <path
-      fill="#4CAF50"
-      d="M24 44c5.2 0 9.9-1.99 13.47-5.23l-6.19-5.24C29.2 35.11 26.72 36 24 36c-5.17 0-9.62-3.32-11.28-7.95l-6.52 5.02C9.51 39.56 16.24 44 24 44z"
-    />
-    <path
-      fill="#1976D2"
-      d="M43.61 20.08H42V20H24v8h11.3c-.79 2.37-2.31 4.38-4.28 5.53l.01-.01l6.19 5.24C36.78 39.13 44 34 44 24c0-1.34-.14-2.65-.39-3.92z"
-    />
-  </svg>
-  <span>Continuar con Google</span>
-</app-button>
--- a/src/app/features/store/pages/login-page/login-page.component.scss
+++ b/src/app/features/store/pages/login-page/login-page.component.scss
@@ -1,36 +0,0 @@
-:host {
-  display: block;
-}
-
-.login-page__header {
-}
-
-.login-page__form {
-  width: 100%;
-}
-
-.login-page__forgot-password {
-  color: #a0a0a0;
-  font-size: 12px;
-  font-weight: 325;
-}
-
-.login-page__create-account {
-  min-height: 40px;
-}
-
-.login-page__divider {
-}
-
-.login-page__divider-line {
-  max-width: 18rem;
-  height: 1px;
-  background-color: #d9d9d9;
-}
-
-.login-page__divider-dot {
-  width: 16px;
-  height: 16px;
-  border-color: #d9d9d9 !important;
-  background-color: #ffffff;
-}
--- a/src/app/features/store/pages/login-page/login-page.component.spec.ts
+++ b/src/app/features/store/pages/login-page/login-page.component.spec.ts
@@ -1,104 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { provideRouter, Router } from '@angular/router';
-import { of, throwError } from 'rxjs';
-
-import { AuthService } from '../../../../core/services/auth/auth.service';
-import { LoginPageComponent } from './login-page.component';
-
-describe('LoginPageComponent', () => {
-  beforeEach(() => {
-    TestBed.resetTestingModule();
-  });
-
-  it('submits credentials and redirects to home with a full page reload on success', async () => {
-    const authService = {
-      login: vi.fn().mockReturnValue(
-        of({
-          id: 1,
-          nombre_apellido: 'Ada Lovelace',
-          email: 'ada@example.com'
-        })
-      )
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [LoginPageComponent],
-      providers: [provideRouter([]), { provide: AuthService, useValue: authService }]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(LoginPageComponent);
-    const component = fixture.componentInstance as any;
-    const router = TestBed.inject(Router);
-    const navigateSpy = vi.spyOn(router, 'navigate').mockResolvedValue(true);
-    const redirectSpy = vi.spyOn(component, 'redirectToHome').mockImplementation(() => undefined);
-
-    component.form.setValue({
-      email: 'ada@example.com',
-      password: 'secret123'
-    });
-
-    component.onSubmit();
-
-    expect(authService.login).toHaveBeenCalledWith({
-      email: 'ada@example.com',
-      password: 'secret123'
-    });
-    expect(redirectSpy).toHaveBeenCalled();
-    expect(navigateSpy).not.toHaveBeenCalled();
-  });
-
-  it('surfaces backend login errors', async () => {
-    const authService = {
-      login: vi.fn().mockReturnValue(
-        throwError(() => ({
-          error: {
-            errors: {
-              email: ['Las credenciales son invalidas.']
-            }
-          }
-        }))
-      )
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [LoginPageComponent],
-      providers: [provideRouter([]), { provide: AuthService, useValue: authService }]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(LoginPageComponent);
-    const component = fixture.componentInstance as any;
-
-    component.form.setValue({
-      email: 'ada@example.com',
-      password: 'wrong-password'
-    });
-
-    component.onSubmit();
-
-    expect(component.serverError()).toBe('Las credenciales son invalidas.');
-  });
-
-  it('validates email length and password minimum length before submit', async () => {
-    const authService = {
-      login: vi.fn()
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [LoginPageComponent],
-      providers: [provideRouter([]), { provide: AuthService, useValue: authService }]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(LoginPageComponent);
-    const component = fixture.componentInstance as any;
-
-    component.form.setValue({
-      email: `${'a'.repeat(250)}@example.com`,
-      password: '1234567'
-    });
-    component.onSubmit();
-
-    expect(authService.login).not.toHaveBeenCalled();
-    expect(component.getControlError('email')).toBe('No puede superar los 255 caracteres.');
-    expect(component.getControlError('password')).toBe('Debe tener al menos 8 caracteres.');
-  });
-});
--- a/src/app/features/store/pages/login-page/login-page.component.ts
+++ b/src/app/features/store/pages/login-page/login-page.component.ts
@@ -1,129 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
-
-import { AuthService } from '../../../../core/services/auth/auth.service';
-import { ButtonComponent } from '../../../../shared/components/button/button.component';
-import { InputComponent } from '../../../../shared/components/input/input.component';
-
-const PASSWORD_MIN_LENGTH = 8;
-const EMAIL_MAX_LENGTH = 255;
-
-@Component({
-  selector: 'app-login-page',
-  imports: [ReactiveFormsModule, InputComponent, ButtonComponent],
-  templateUrl: './login-page.component.html',
-  styleUrl: './login-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class LoginPageComponent {
-  private readonly formBuilder = inject(FormBuilder);
-  private readonly router = inject(Router);
-  private readonly authService = inject(AuthService);
-  private readonly document = inject(DOCUMENT);
-
-  private readonly submittedState = signal(false);
-  private readonly serverErrorState = signal<string | null>(null);
-  private readonly isSubmittingState = signal(false);
-
-  protected readonly form = this.formBuilder.nonNullable.group({
-    email: ['', [Validators.required, Validators.email, Validators.maxLength(EMAIL_MAX_LENGTH)]],
-    password: ['', [Validators.required, Validators.minLength(PASSWORD_MIN_LENGTH)]]
-  });
-  protected readonly submitted = this.submittedState.asReadonly();
-  protected readonly serverError = this.serverErrorState.asReadonly();
-  protected readonly isSubmitting = this.isSubmittingState.asReadonly();
-
-  goToRegister(): void {
-    void this.router.navigate(['/register']);
-  }
-
-  onSubmit(): void {
-    this.submittedState.set(true);
-    this.serverErrorState.set(null);
-
-    if (this.form.invalid) {
-      this.form.markAllAsTouched();
-      return;
-    }
-
-    this.isSubmittingState.set(true);
-
-    this.authService.login(this.form.getRawValue()).subscribe({
-      next: () => {
-        this.isSubmittingState.set(false);
-        this.redirectToHome();
-      },
-      error: (error: unknown) => {
-        this.isSubmittingState.set(false);
-        this.serverErrorState.set(this.resolveErrorMessage(error));
-      }
-    });
-  }
-
-  protected updateEmail(value: string | number): void {
-    this.form.controls.email.setValue(String(value));
-  }
-
-  protected updatePassword(value: string | number): void {
-    this.form.controls.password.setValue(String(value));
-  }
-
-  protected showControlError(controlName: 'email' | 'password'): boolean {
-    const control = this.form.controls[controlName];
-
-    return control.invalid && (control.touched || this.submitted());
-  }
-
-  protected getControlError(controlName: 'email' | 'password'): string | null {
-    const control = this.form.controls[controlName];
-
-    if (!this.showControlError(controlName)) {
-      return null;
-    }
-
-    if (control.hasError('required')) {
-      return 'Este campo es obligatorio.';
-    }
-
-    if (control.hasError('maxlength')) {
-      return `No puede superar los ${EMAIL_MAX_LENGTH} caracteres.`;
-    }
-
-    if (control.hasError('email')) {
-      return 'Ingresa un email valido.';
-    }
-
-    if (control.hasError('minlength')) {
-      return `Debe tener al menos ${PASSWORD_MIN_LENGTH} caracteres.`;
-    }
-
-    return 'El valor ingresado no es valido.';
-  }
-
-  protected redirectToHome(): void {
-    const homeUrl = this.router.serializeUrl(this.router.createUrlTree(['/']));
-    this.document.location.assign(homeUrl);
-  }
-
-  private resolveErrorMessage(error: unknown): string {
-    const errorPayload =
-      typeof error === 'object' && error !== null && 'error' in error
-        ? (error as { error?: { errors?: Record<string, string[]>; message?: string } }).error
-        : undefined;
-    const apiErrors = errorPayload?.errors;
-    const emailMessages = apiErrors?.['email'];
-    const emailError = Array.isArray(emailMessages) ? emailMessages[0] : null;
-
-    if (typeof emailError === 'string' && emailError.trim()) {
-      return emailError;
-    }
-
-    if (typeof errorPayload?.message === 'string' && errorPayload.message.trim()) {
-      return errorPayload.message;
-    }
-
-    return 'No se pudo iniciar sesion. Intenta nuevamente.';
-  }
-}
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.html
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.html
@@ -1,120 +0,0 @@
-<section class="product-detail py-5">
-  <div class="container-xl px-3 px-md-4">
-    @if (loading()) {
-      <div class="text-center py-5">
-        <div class="spinner-border text-primary" role="status">
-          <span class="visually-hidden">Cargando...</span>
-        </div>
-      </div>
-    } @else if (error()) {
-      <div class="alert alert-danger text-center mb-0" role="alert">
-        {{ error() }}
-      </div>
-    } @else if (product(); as prod) {
-      <div class="row g-4 g-xl-5 align-items-start">
-        <div class="col-12 col-lg-5">
-          <div #carouselHost class="product-detail__carousel">
-            <app-product-carousel [images]="carouselImages()" />
-          </div>
-        </div>
-
-        <div class="col-12 col-lg-7">
-          <div class="product-detail__panel">
-            <section class="product-detail__section">
-              <h1 class="product-detail__title mb-0">{{ prod.nombre }}</h1>
-
-              <div class="product-detail__title-price-divider"></div>
-
-              <div class="product-detail__price-group">
-                <span class="product-detail__price-current">
-                  {{ getFormattedPrice(prod.precio) }}
-                </span>
-
-                @if (oldPrice(); as oldPrice) {
-                  <span class="product-detail__price-previous">{{ oldPrice }}</span>
-                }
-              </div>
-            </section>
-
-            @if (hasRenderableAttributes()) {
-              <div class="product-detail__divider"></div>
-
-              <section class="product-detail__section product-detail__section--attributes">
-                <app-product-attribute-selector
-                  [attributes]="renderableAttributes()"
-                  [variantsMap]="prod.variants_map"
-                  [defaultVariant]="prod.variant"
-                  (variantChange)="onVariantChange($event)"
-                />
-              </section>
-            }
-
-            <div class="product-detail__divider"></div>
-
-            <section class="product-detail__section">
-              <div class="product-detail__purchase">
-                <app-quantity-selector
-                  [(quantity)]="quantity"
-                  [max]="selectedVariant()?.cantidad_maxima ?? 1"
-                />
-
-                <div class="product-detail__actions">
-                  <app-button
-                    class="product-detail__cta"
-                    variant="secondary"
-                    type="button"
-                    [disabled]="!selectedVariant() || variantLoading() || addingToCart()"
-                    (click)="addToCart()"
-                  >
-                    @if (variantLoading() || addingToCart()) {
-                      <div class="spinner-border spinner-border-sm" role="status"></div>
-                    } @else {
-                      Agregar al carrito
-                    }
-                  </app-button>
-
-                  <app-button class="product-detail__cta" type="button" [disabled]="!selectedVariant() || variantLoading()">
-                    @if (variantLoading()) {
-                      <div class="spinner-border spinner-border-sm" role="status"></div>
-                    } @else {
-                      Comprar
-                    }
-                  </app-button>
-                </div>
-              </div>
-            </section>
-
-            <div class="product-detail__divider"></div>
-
-            <section class="product-detail__section product-detail__section--description">
-              <h2 class="product-detail__description-heading">DESCRIPCIÓN</h2>
-
-              <div
-                #descriptionBody
-                class="product-detail__description-body"
-                [class.product-detail__description-body--expanded]="descriptionExpanded()"
-                [style.max-height.px]="descriptionExpanded() ? descriptionMaxHeight() || null : null"
-              >
-                {{ prod.descripcion }}
-              </div>
-
-              @if (showDescriptionToggle()) {
-                <button
-                  type="button"
-                  class="product-detail__description-toggle"
-                  (click)="toggleDescription()"
-                >
-                  {{ descriptionExpanded() ? 'Mostrar menos' : 'Mostrar más' }}
-                </button>
-              }
-            </section>
-          </div>
-        </div>
-      </div>
-    } @else {
-      <div class="alert alert-warning text-center mb-0" role="alert">
-        No se encontró el producto especificado.
-      </div>
-    }
-  </div>
-</section>
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.scss
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.scss
@@ -1,138 +0,0 @@
-.product-detail {
-  color: #000000;
-
-  &__panel {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
-  &__section {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  &__divider {
-    border-top: 1px solid #e6e6e6;
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 400;
-    line-height: 1.35;
-    color: #000000;
-  }
-
-  &__title-price-divider {
-    border-top: 1px solid #e6e6e6;
-  }
-
-  &__price-group {
-    display: flex;
-    align-items: baseline;
-    gap: 0.875rem;
-    flex-wrap: wrap;
-  }
-
-  &__price-current {
-    font-size: 42px;
-    font-weight: 700;
-    line-height: 1.1;
-    color: var(--tenant-primary);
-  }
-
-  &__price-previous {
-    font-size: 19px;
-    font-weight: 325;
-    line-height: 1.2;
-    color: #a0a0a0;
-    text-decoration: line-through;
-  }
-
-  &__section--attributes {
-    gap: 1.25rem;
-  }
-
-  &__attribute-options,
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    flex-wrap: wrap;
-  }
-
-
-  &__purchase {
-    display: flex;
-    align-items: stretch;
-    gap: 0.875rem;
-    flex-wrap: wrap;
-  }
-
-
-  &__actions {
-    flex: 1 1 0;
-  }
-
-  &__description-heading {
-    margin: 0;
-    font-size: 15px;
-    font-weight: 400;
-    line-height: 1.2;
-    letter-spacing: 0.04em;
-    color: #666666;
-  }
-
-  &__description-body {
-    font-size: 14px;
-    font-weight: 325;
-    line-height: 1.45;
-    color: #666666;
-    white-space: pre-line;
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-
-    &--expanded {
-      display: block;
-      -webkit-line-clamp: unset;
-      max-height: none;
-      overflow-y: auto;
-      padding-right: 0.35rem;
-    }
-  }
-
-  &__description-toggle {
-    align-self: center;
-    border: 0;
-    background: transparent;
-    padding: 0;
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--tenant-primary);
-  }
-}
-
-app-button.product-detail__cta {
-  flex: 1 1 0;
-  min-width: 0;
-}
-
-@media (max-width: 991.98px) {
-  .product-detail {
-    &__panel {
-      gap: 1.25rem;
-    }
-
-    &__purchase {
-      flex-direction: column;
-    }
-
-    &__actions {
-      width: 100%;
-      flex-direction: column;
-    }
-  }
-}
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts
@@ -1,434 +0,0 @@
-import { TestBed, getTestBed } from '@angular/core/testing';
-import {
-  BrowserTestingModule,
-  platformBrowserTesting
-} from '@angular/platform-browser/testing';
-import { ActivatedRoute, Router } from '@angular/router';
-import { By } from '@angular/platform-browser';
-import { BehaviorSubject, of, throwError } from 'rxjs';
-import { convertToParamMap } from '@angular/router';
-import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { ProductDetail } from '../../../../core/services/catalog/catalog.interface';
-import { CatalogService } from '../../../../core/services/catalog/catalog.service';
-import { CartService } from '../../../../core/services/cart/cart.service';
-import { ToastService } from '../../../../core/services/toast.service';
-import { ProductDetailPageComponent } from './product-detail-page.component';
-
-describe('ProductDetailPageComponent', () => {
-  const mockProduct: ProductDetail = {
-    id: 1,
-    category_id: 10,
-    brand_id: null,
-    slug: 'auriculares-bluetooth',
-    nombre: 'Auriculares Bluetooth',
-    descripcion: 'Auriculares bluetooth de prueba',
-    precio: '24999',
-    category: 'Tecnología',
-    brand: 'Sony',
-    images: ['https://example.com/image.png'],
-    attributes: [],
-    variants_map: [],
-    variant: null
-  };
-
-  let paramMapSubject: BehaviorSubject<any>;
-  let catalogServiceStub: any;
-  let routerStub: any;
-  let cartServiceStub: any;
-  let toastServiceStub: any;
-
-  beforeAll(() => {
-    try {
-      getTestBed().initTestEnvironment(
-        BrowserTestingModule,
-        platformBrowserTesting()
-      );
-    } catch {
-      // Test environment may already be initialized by another setup entrypoint.
-    }
-  });
-
-  beforeEach(() => {
-    vi.restoreAllMocks();
-    paramMapSubject = new BehaviorSubject(convertToParamMap({ id: '1' }));
-    catalogServiceStub = {
-      getProducto: vi.fn().mockReturnValue(of(mockProduct))
-    };
-    routerStub = {
-      navigate: vi.fn()
-    };
-    cartServiceStub = {
-      addItem: vi.fn().mockReturnValue(of({ message: 'Producto agregado al carrito' }))
-    };
-    toastServiceStub = {
-      success: vi.fn(),
-      danger: vi.fn(),
-      info: vi.fn()
-    };
-  });
-
-  async function configureTestingModule() {
-    await TestBed.configureTestingModule({
-      imports: [ProductDetailPageComponent],
-      providers: [
-        {
-          provide: ActivatedRoute,
-          useValue: {
-            paramMap: paramMapSubject.asObservable()
-          }
-        },
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        },
-        {
-          provide: Router,
-          useValue: routerStub
-        },
-        {
-          provide: CartService,
-          useValue: cartServiceStub
-        },
-        {
-          provide: ToastService,
-          useValue: toastServiceStub
-        }
-      ]
-    }).compileComponents();
-  }
-
-  it('loads the product on init and embeds the carousel', async () => {
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(catalogServiceStub.getProducto).toHaveBeenCalledWith(1);
-
-    expect(element.querySelector('app-product-carousel')).not.toBeNull();
-    expect(element.querySelector('.product-detail__title')?.textContent).toContain('Auriculares Bluetooth');
-    expect(element.querySelector('.product-detail__price-current')?.textContent).toContain('$24.999');
-    expect(element.querySelector('.product-detail__price-previous')).toBeNull();
-    expect(element.querySelector('.product-carousel__discount-badge')).toBeNull();
-  });
-
-  it('shows error message if load fails', async () => {
-    catalogServiceStub.getProducto.mockReturnValue(throwError(() => new Error('load failed')));
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(element.textContent).toContain('No pudimos cargar los detalles del producto.');
-  });
-
-
-  it('should use default variant images if present', async () => {
-    const detailProduct: ProductDetail = {
-      ...mockProduct,
-      images: ['https://example.com/product.png'],
-      variant: {
-        id: 123,
-        cantidad_maxima: 10,
-        images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'],
-        definitions: {}
-      }
-    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
-
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const carousel = fixture.debugElement.query(By.css('app-product-carousel')).componentInstance;
-    expect(carousel.images()).toEqual(['https://example.com/variant1.png', 'https://example.com/variant2.png']);
-  });
-
-  it('should fallback to product images if default variant images are not present', async () => {
-    const detailProduct: ProductDetail = {
-      ...mockProduct,
-      images: ['https://example.com/product.png'],
-      variant: null
-    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
-
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const carousel = fixture.debugElement.query(By.css('app-product-carousel')).componentInstance;
-    expect(carousel.images()).toEqual(['https://example.com/product.png']);
-  });
-
-  it('should fallback to empty array if no images are present at all', async () => {
-    const detailProduct: ProductDetail = {
-      ...mockProduct,
-      images: [],
-      variant: null
-    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
-
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const carousel = fixture.debugElement.query(By.css('app-product-carousel')).componentInstance;
-    expect(carousel.images()).toEqual([]);
-  });
-
-  it('renders generic attributes and preselects default variant options', async () => {
-    const detailProduct: ProductDetail = {
-      ...mockProduct,
-      attributes: [
-        {
-          id: 1,
-          codigo: 'color',
-          nombre: 'Color',
-          is_required: true,
-          metadata_schema: null,
-          type: 'select',
-          options: [
-            {
-              id: 10,
-              value: 'beige',
-              label: 'Beige',
-              sort_order: 1,
-              metadata: { hex: '#D8D1C7' }
-            },
-            {
-              id: 11,
-              value: 'brown',
-              label: 'Marrón',
-              sort_order: 2,
-              metadata: { palette: { primary: '#7E6460' } }
-            }
-          ]
-        },
-        {
-          id: 2,
-          codigo: 'material',
-          nombre: 'Material',
-          is_required: true,
-          metadata_schema: null,
-          type: 'select',
-          options: [
-            {
-              id: 20,
-              value: 'mesh',
-              label: 'Mesh',
-              sort_order: 1,
-              metadata: null
-            },
-            {
-              id: 21,
-              value: 'cuero',
-              label: 'Cuero',
-              sort_order: 2,
-              metadata: null
-            }
-          ]
-        }
-      ],
-      variant: {
-        id: 123,
-        cantidad_maxima: 10,
-        images: ['https://example.com/variant1.png'],
-        definitions: {
-          color: 'beige',
-          material: 'Cuero'
-        }
-      }
-    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
-
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-    const swatches = element.querySelectorAll('.attribute-selector__swatch');
-    const textOptions = element.querySelectorAll('.attribute-selector__text-option');
-    const labels = Array.from(element.querySelectorAll('.attribute-selector__label')).map((label) =>
-      label.textContent?.trim()
-    );
-
-    expect(labels).toEqual(['Color:', 'Material:']);
-    expect(swatches).toHaveLength(2);
-    expect(textOptions).toHaveLength(2);
-    expect(swatches[0].classList.contains('attribute-selector__swatch--selected')).toBe(true);
-    expect(textOptions[1].classList.contains('attribute-selector__text-option--selected')).toBe(true);
-    expect((swatches[0] as HTMLElement).style.backgroundColor).not.toBe('');
-  });
-
-  it('hides the attributes block and its extra divider when no attributes are present', async () => {
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(element.querySelector('.product-detail__section--attributes')).toBeNull();
-    expect(element.querySelectorAll('.product-detail__divider')).toHaveLength(2);
-  });
-
-  it('keeps quantity at a minimum of one and increments locally', async () => {
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    fixture.componentInstance['selectedVariant'].set({
-      variant_id: 1,
-      cantidad_maxima: 10,
-      attributes: {}
-    });
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-    const decreaseButton = element.querySelector(
-      '[aria-label="Disminuir cantidad"]'
-    ) as HTMLButtonElement;
-    const increaseButton = element.querySelector(
-      '[aria-label="Aumentar cantidad"]'
-    ) as HTMLButtonElement;
-
-    decreaseButton.click();
-    fixture.detectChanges();
-
-    expect(element.querySelector('.quantity-selector__value')?.textContent?.trim()).toBe('1');
-
-    increaseButton.click();
-    increaseButton.click();
-    fixture.detectChanges();
-
-    expect(element.querySelector('.quantity-selector__value')?.textContent?.trim()).toBe('3');
-  });
-
-  it('toggles the full description state when overflow is available', async () => {
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    (fixture.componentInstance as any).descriptionHasOverflow.set(true);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-    const toggleButton = element.querySelector(
-      '.product-detail__description-toggle'
-    ) as HTMLButtonElement;
-
-    expect(toggleButton.textContent?.trim()).toBe('Mostrar más');
-
-    toggleButton.click();
-    fixture.detectChanges();
-
-    expect(
-      element
-        .querySelector('.product-detail__description-body')
-        ?.classList.contains('product-detail__description-body--expanded')
-    ).toBe(true);
-    expect(toggleButton.textContent?.trim()).toBe('Mostrar menos');
-  });
-
-  it('renders purchase actions without side effects', async () => {
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    const buttons = Array.from(
-      fixture.nativeElement.querySelectorAll('app-button button')
-    ) as HTMLButtonElement[];
-
-    expect(buttons.map((button) => button.textContent?.trim())).toEqual([
-      'Agregar al carrito',
-      'Comprar'
-    ]);
-
-    buttons[0].click();
-    buttons[1].click();
-
-    expect(routerStub.navigate).not.toHaveBeenCalled();
-  });
-
-  it('calls CartService.addItem when variant is selected and Add to Cart is clicked', async () => {
-    const detailProduct: ProductDetail = {
-      ...mockProduct,
-      variant: {
-        id: 123,
-        cantidad_maxima: 5,
-        images: [],
-        definitions: {}
-      },
-      variants_map: [
-        {
-          variant_id: 123,
-          cantidad_maxima: 5,
-          attributes: {}
-        }
-      ]
-    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
-
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    // Select the variant
-    fixture.componentInstance['selectedVariant'].set(detailProduct.variants_map[0]);
-    fixture.componentInstance['quantity'].set(3);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-    const addToCartButton = Array.from(element.querySelectorAll('app-button button')).find(
-      (btn) => btn.textContent?.trim() === 'Agregar al carrito'
-    ) as HTMLButtonElement;
-
-    expect(addToCartButton).toBeDefined();
-    addToCartButton.click();
-    fixture.detectChanges();
-
-    expect(cartServiceStub.addItem).toHaveBeenCalledWith(123, 3);
-    expect(toastServiceStub.success).toHaveBeenCalledWith('Producto agregado al carrito');
-  });
-
-  it('shows error toast when CartService.addItem fails', async () => {
-    const detailProduct: ProductDetail = {
-      ...mockProduct,
-      variant: {
-        id: 123,
-        cantidad_maxima: 5,
-        images: [],
-        definitions: {}
-      },
-      variants_map: [
-        {
-          variant_id: 123,
-          cantidad_maxima: 5,
-          attributes: {}
-        }
-      ]
-    };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
-    cartServiceStub.addItem.mockReturnValue(throwError(() => new Error('Failed to add')));
-
-    await configureTestingModule();
-    const fixture = TestBed.createComponent(ProductDetailPageComponent);
-    fixture.detectChanges();
-
-    fixture.componentInstance['selectedVariant'].set(detailProduct.variants_map[0]);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-    const addToCartButton = Array.from(element.querySelectorAll('app-button button')).find(
-      (btn) => btn.textContent?.trim() === 'Agregar al carrito'
-    ) as HTMLButtonElement;
-
-    addToCartButton.click();
-    fixture.detectChanges();
-
-    expect(cartServiceStub.addItem).toHaveBeenCalled();
-    expect(toastServiceStub.danger).toHaveBeenCalledWith('No se pudo agregar el producto al carrito.');
-  });
-});
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts
@@ -1,328 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  OnDestroy,
-  OnInit,
-  computed,
-  effect,
-  inject,
-  signal,
-  viewChild,
-  PLATFORM_ID
-} from '@angular/core';
-import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { HttpErrorResponse } from '@angular/common/http';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { Subscription } from 'rxjs';
-
-import { CatalogService } from '../../../../core/services/catalog/catalog.service';
-import { ToastService } from '../../../../core/services/toast.service';
-import { CartService } from '../../../../core/services/cart/cart.service';
-import {
-  ProductAttribute,
-  ProductAttributeOption,
-  ProductDetail,
-  ProductVariant,
-  ProductVariantMap
-} from '../../../../core/services/catalog/catalog.interface';
-import { ProductCarouselComponent } from '../../components/product-carousel/product-carousel.component';
-import { ButtonComponent } from '../../../../shared/components/button/button.component';
-import { ProductAttributeSelectorComponent } from '../../components/product-attribute-selector/product-attribute-selector.component';
-import { QuantitySelectorComponent } from '../../../../shared/components/quantity-selector/quantity-selector.component';
-
-@Component({
-  selector: 'app-product-detail-page',
-  standalone: true,
-  imports: [
-    CommonModule,
-    RouterModule,
-    ProductCarouselComponent,
-    ButtonComponent,
-    ProductAttributeSelectorComponent,
-    QuantitySelectorComponent
-  ],
-  templateUrl: './product-detail-page.component.html',
-  styleUrl: './product-detail-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ProductDetailPageComponent implements OnInit, OnDestroy {
-  private readonly route = inject(ActivatedRoute);
-  private readonly router = inject(Router);
-  private readonly catalogService = inject(CatalogService);
-  private readonly toastService = inject(ToastService);
-  private readonly cartService = inject(CartService);
-  private readonly attributeSelector = viewChild(ProductAttributeSelectorComponent);
-  private readonly carouselHost = viewChild<ElementRef<HTMLElement>>('carouselHost');
-  private readonly descriptionBody = viewChild<ElementRef<HTMLElement>>('descriptionBody');
-  private readonly platformId = inject(PLATFORM_ID);
-  private readonly isBrowser = isPlatformBrowser(this.platformId);
-
-  private routeSub: Subscription | null = null;
-  private productSub: Subscription | null = null;
-  private carouselResizeObserver: ResizeObserver | null = null;
-  private observedCarouselPreview: HTMLElement | null = null;
-  private measurementTimer: ReturnType<typeof setTimeout> | null = null;
-
-  protected readonly product = signal<ProductDetail | null>(null);
-  protected readonly carouselImages = computed(() => {
-    const prod = this.product();
-    if (!prod) return [];
-    if (prod.variant?.images && prod.variant.images.length > 0) {
-      return prod.variant.images;
-    }
-    if (prod.images && prod.images.length > 0) {
-      return prod.images;
-    }
-    return [];
-  });
-  protected readonly loading = signal(false);
-  protected readonly variantLoading = signal(false);
-  protected readonly addingToCart = signal(false);
-  protected readonly error = signal<string | null>(null);
-  protected readonly selectedVariant = signal<ProductVariantMap | null>(null);
-  protected readonly quantity = signal(1);
-  protected readonly descriptionExpanded = signal(false);
-  protected readonly descriptionMaxHeight = signal(0);
-  protected readonly descriptionHasOverflow = signal(false);
-  protected readonly renderableAttributes = computed(() =>
-    (this.product()?.attributes ?? []).filter((attribute) => attribute.options.length > 0)
-  );
-  protected readonly hasRenderableAttributes = computed(
-    () => this.renderableAttributes().length > 0
-  );
-  protected readonly oldPrice = computed<string | null>(() => null);
-  protected readonly showDescriptionToggle = computed(
-    () => this.descriptionExpanded() || this.descriptionHasOverflow()
-  );
-
-  constructor() {
-    effect(() => {
-      this.carouselHost();
-      this.descriptionBody();
-      this.product();
-      this.descriptionExpanded();
-
-      if (this.isBrowser) {
-        queueMicrotask(() => {
-          this.bindCarouselResizeObserver();
-          this.refreshMeasurements();
-        });
-      }
-    });
-  }
-
-  ngOnInit(): void {
-    this.routeSub = this.route.paramMap.subscribe((params) => {
-      const id = this.parseIntegerParam(params.get('id'));
-      if (id === null) {
-        this.error.set('ID de producto inválido');
-        return;
-      }
-
-      this.loadProduct(id);
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.routeSub?.unsubscribe();
-    this.productSub?.unsubscribe();
-    this.carouselResizeObserver?.disconnect();
-    this.clearMeasurementTimer();
-  }
-
-  private loadProduct(id: number): void {
-    this.loading.set(true);
-    this.error.set(null);
-    this.product.set(null);
-
-    this.productSub?.unsubscribe();
-    this.productSub = this.catalogService.getProducto(id).subscribe({
-      next: (prod) => {
-        this.product.set(prod);
-        const matchingVariant = prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null;
-        this.selectedVariant.set(matchingVariant);
-        this.quantity.set(1);
-        this.descriptionExpanded.set(false);
-        this.descriptionHasOverflow.set(false);
-        this.loading.set(false);
-      },
-      error: () => {
-        this.error.set('No pudimos cargar los detalles del producto.');
-        this.loading.set(false);
-      }
-    });
-  }
-
-  private loadProductVariant(productId: number, variantId: number): void {
-    this.variantLoading.set(true);
-
-    this.productSub?.unsubscribe();
-    this.productSub = this.catalogService.getProducto(productId, variantId).subscribe({
-      next: (prod) => {
-        this.product.set(prod);
-        const matchingVariant = prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null;
-        this.selectedVariant.set(matchingVariant);
-        this.variantLoading.set(false);
-      },
-      error: (err: HttpErrorResponse) => {
-        const errorMessage = err.error?.message || 'No pudimos cargar la variante seleccionada.';
-        this.toastService.danger(errorMessage);
-        this.variantLoading.set(false);
-
-        this.product.update((currentProduct) => {
-          if (!currentProduct) return null;
-          const updatedVariantsMap = currentProduct.variants_map.map((v) => {
-            if (v.variant_id === variantId) {
-              return { ...v, cantidad_maxima: 0 };
-            }
-            return v;
-          });
-          return {
-            ...currentProduct,
-            variants_map: updatedVariantsMap
-          };
-        });
-
-        this.attributeSelector()?.reset();
-      }
-    });
-  }
-
-  protected goBack(): void {
-    this.router.navigate(['/']);
-  }
-
-  protected getFormattedPrice(priceStr: string | undefined): string {
-    if (!priceStr) return '$0';
-    const parsed = Number(priceStr);
-    const value = Number.isFinite(parsed) ? parsed : 0;
-    const rounded = Math.round(value);
-    const parts = rounded.toString().split('.');
-    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-    return `$${parts.join(',')}`;
-  }
-
-  protected onVariantChange(variant: ProductVariantMap | null): void {
-    if (this.selectedVariant()?.variant_id === variant?.variant_id) {
-      return;
-    }
-
-    this.selectedVariant.set(variant);
-    if (variant && this.quantity() > variant.cantidad_maxima) {
-      this.quantity.set(Math.max(1, variant.cantidad_maxima));
-    }
-
-    const currentProduct = this.product();
-    if (variant && currentProduct && currentProduct.variant?.id !== variant.variant_id) {
-      this.loadProductVariant(currentProduct.id, variant.variant_id);
-    }
-  }
-
-
-
-  protected addToCart(): void {
-    const variant = this.selectedVariant();
-    if (!variant) {
-      this.toastService.danger('Por favor, selecciona una variante.');
-      return;
-    }
-
-    this.addingToCart.set(true);
-    this.cartService.addItem(variant.variant_id, this.quantity()).subscribe({
-      next: (res) => {
-        const msg = res.message || 'Producto agregado al carrito';
-        this.toastService.success(msg);
-        this.addingToCart.set(false);
-      },
-      error: (err: HttpErrorResponse) => {
-        const errorMessage = err.error?.message || 'No se pudo agregar el producto al carrito.';
-        this.toastService.danger(errorMessage);
-        this.addingToCart.set(false);
-      }
-    });
-  }
-
-  protected toggleDescription(): void {
-    this.descriptionExpanded.update((current) => !current);
-  }
-
-  private parseIntegerParam(value: string | null): number | null {
-    if (!value) {
-      return null;
-    }
-
-    const parsed = Number(value);
-    return Number.isInteger(parsed) ? parsed : null;
-  }
-
-  private bindCarouselResizeObserver(): void {
-    const previewElement = this.getCarouselPreviewElement();
-
-    if (!previewElement || previewElement === this.observedCarouselPreview) {
-      return;
-    }
-
-    this.carouselResizeObserver?.disconnect();
-    this.observedCarouselPreview = previewElement;
-
-    if (typeof ResizeObserver === 'undefined') {
-      this.updateDescriptionMaxHeight();
-      return;
-    }
-
-    this.carouselResizeObserver = new ResizeObserver(() => {
-      this.scheduleMeasurement();
-    });
-    this.carouselResizeObserver.observe(previewElement);
-    this.updateDescriptionMaxHeight();
-  }
-
-  private scheduleMeasurement(): void {
-    this.clearMeasurementTimer();
-    this.measurementTimer = setTimeout(() => {
-      this.measurementTimer = null;
-      this.refreshMeasurements();
-    }, 0);
-  }
-
-  private clearMeasurementTimer(): void {
-    if (this.measurementTimer) {
-      clearTimeout(this.measurementTimer);
-      this.measurementTimer = null;
-    }
-  }
-
-  private refreshMeasurements(): void {
-    this.updateDescriptionMaxHeight();
-    this.updateDescriptionOverflow();
-  }
-
-  private updateDescriptionMaxHeight(): void {
-    const previewElement = this.getCarouselPreviewElement();
-    const nextHeight = previewElement?.getBoundingClientRect().height ?? 0;
-
-    if (nextHeight > 0) {
-      this.descriptionMaxHeight.set(nextHeight);
-    }
-  }
-
-  private updateDescriptionOverflow(): void {
-    const descriptionElement = this.descriptionBody()?.nativeElement;
-
-    if (!descriptionElement || this.descriptionExpanded()) {
-      return;
-    }
-
-    this.descriptionHasOverflow.set(
-      descriptionElement.scrollHeight - descriptionElement.clientHeight > 1
-    );
-  }
-
-  private getCarouselPreviewElement(): HTMLElement | null {
-    return (
-      this.carouselHost()?.nativeElement.querySelector<HTMLElement>('.product-carousel__main') ??
-      null
-    );
-  }
-}
--- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html
+++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html
@@ -1,135 +0,0 @@
-<div class="status-content">
-  @if (isLoading()) {
-    <div class="status-content__icon status-content__icon--loading">
-      <i class="fa-solid fa-spinner fa-spin"></i>
-    </div>
-    <h2 class="status-content__title">Cargando estado...</h2>
-  } @else if (status() === 'approved') {
-    <div class="status-content__section status-content__section--primary">
-      <div class="status-content__icon status-content__icon--success">
-        <i class="fa-solid fa-check"></i>
-      </div>
-      <h2 class="status-content__title">COMPRA REALIZADA!</h2>
-      <p class="status-content__subtitle">Tu compra fue realizada con &eacute;xito</p>
-    </div>
-
-    <hr class="status-content__divider" />
-
-    <div class="status-content__section status-content__section--secondary">
-      <p class="status-content__message">Comunicate con nosotros para coordinar el env&iacute;o.</p>
-
-      <app-button
-        type="button"
-        variant="secondary"
-        hostClass="status-content__button d-block"
-        buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center gap-2 py-2"
-        (click)="openWhatsApp()"
-      >
-        <i class="fa-brands fa-whatsapp status-content__button-icon"></i>
-        <span>WhatsApp</span>
-      </app-button>
-    </div>
-  } @else if (status() === 'pending') {
-    <div class="status-content__section status-content__section--primary">
-      <div class="status-content__icon status-content__icon--warning">
-        <i class="fa-solid fa-clock"></i>
-      </div>
-      <h2 class="status-content__title">ESTAMOS VERIFICANDO TU PAGO</h2>
-      <p class="status-content__subtitle">Tu compra ya fue registrada y estamos esperando la confirmaci&oacute;n del pago.</p>
-    </div>
-
-    <hr class="status-content__divider" />
-
-    <div class="status-content__section status-content__section--secondary">
-      <p class="status-content__message">Esta pantalla se actualiza autom&aacute;ticamente cuando el pago impacta.</p>
-      @if (isRefreshing()) {
-        <p class="status-content__hint">Actualizando estado...</p>
-      }
-
-      <app-button
-        type="button"
-        variant="secondary"
-        hostClass="status-content__button d-block"
-        buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center py-2"
-        [disabled]="isRefreshing()"
-        (click)="retryStatusCheck()"
-      >
-        Actualizar estado
-      </app-button>
-    </div>
-  } @else if (status() === 'rejected') {
-    <div class="status-content__section status-content__section--primary">
-      <div class="status-content__icon status-content__icon--error">
-        <i class="fa-solid fa-triangle-exclamation"></i>
-      </div>
-      <h2 class="status-content__title">NO PUDIMOS CONFIRMAR EL PAGO</h2>
-      <p class="status-content__subtitle">Revis&aacute; el medio de pago o comunicate con nosotros para continuar.</p>
-    </div>
-
-    <hr class="status-content__divider" />
-
-    <div class="status-content__section status-content__section--secondary">
-      <p class="status-content__message">Si ya pagaste, pod&eacute;s reintentar la consulta o escribirnos para revisarlo.</p>
-
-      <div class="status-content__actions">
-        <app-button
-          type="button"
-          variant="secondary"
-          hostClass="status-content__button d-block"
-          buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center py-2"
-          (click)="retryStatusCheck()"
-        >
-          Reintentar
-        </app-button>
-
-        <app-button
-          type="button"
-          variant="secondary"
-          hostClass="status-content__button d-block"
-          buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center gap-2 py-2"
-          (click)="openWhatsApp()"
-        >
-          <i class="fa-brands fa-whatsapp status-content__button-icon"></i>
-          <span>WhatsApp</span>
-        </app-button>
-      </div>
-    </div>
-  } @else {
-    <div class="status-content__section status-content__section--primary">
-      <div class="status-content__icon status-content__icon--error">
-        <i class="fa-solid fa-triangle-exclamation"></i>
-      </div>
-      <h2 class="status-content__title">NO PUDIMOS OBTENER EL ESTADO</h2>
-      <p class="status-content__subtitle">Hubo un problema al consultar tu compra.</p>
-    </div>
-
-    <hr class="status-content__divider" />
-
-    <div class="status-content__section status-content__section--secondary">
-      <p class="status-content__message">Reintent&aacute; en unos segundos. Si el problema sigue, comunicate con nosotros.</p>
-
-      <div class="status-content__actions">
-        <app-button
-          type="button"
-          variant="secondary"
-          hostClass="status-content__button d-block"
-          buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center py-2"
-          (click)="retryStatusCheck()"
-        >
-          Reintentar
-        </app-button>
-
-        <app-button
-          type="button"
-          variant="secondary"
-          hostClass="status-content__button d-block"
-          buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center gap-2 py-2"
-          (click)="openWhatsApp()"
-        >
-          <i class="fa-brands fa-whatsapp status-content__button-icon"></i>
-          <span>WhatsApp</span>
-        </app-button>
-      </div>
-    </div>
-  }
-</div>
--- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.scss
+++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.scss
@@ -1,136 +0,0 @@
-:host {
-  --color-primary: var(--tenant-primary, #6376f3);
-  --color-primary-rgb: var(--tenant-primary-rgb, 99, 118, 243);
-}
-
-.status-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  text-align: center;
-  padding: 2rem 1rem;
-
-  &__section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-  }
-
-  &__section--primary {
-    gap: 0.75rem;
-  }
-
-  &__section--secondary {
-    gap: 1rem;
-  }
-
-  &__icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 92px;
-    height: 92px;
-    border-radius: 50%;
-    font-size: 2rem;
-    margin-bottom: 0.25rem;
-
-    i {
-      line-height: 1;
-    }
-
-    &--success {
-      background-color: color-mix(in srgb, white 92%, var(--color-primary));
-      color: var(--color-primary) !important;
-      border: 1.5px solid color-mix(in srgb, white 20%, var(--color-primary));
-    }
-
-    &--warning {
-      background-color: color-mix(in srgb, white 92%, var(--color-primary));
-      color: var(--color-primary) !important;
-      border: 1.5px solid color-mix(in srgb, white 20%, var(--color-primary));
-    }
-
-    &--error {
-      background-color: color-mix(in srgb, white 92%, var(--color-primary));
-      color: var(--color-primary) !important;
-      border: 1.5px solid color-mix(in srgb, white 20%, var(--color-primary));
-    }
-
-    &--loading {
-      background-color: color-mix(in srgb, white 90%, var(--color-primary));
-      color: var(--color-primary);
-      border: 2px solid var(--color-primary);
-    }
-  }
-
-  &__title {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 1.25;
-    color: var(--color-primary) !important;
-  }
-
-  &__subtitle {
-    margin: 0;
-    font-size: 13px;
-    font-weight: 700;
-    line-height: 1.35;
-    color: #8a8a8a;
-    max-width: 320px;
-  }
-
-  &__divider {
-    display: block;
-    width: min(100%, 410px);
-    height: 1px;
-    background-color: #d9d9d9 !important;
-    border: 0;
-    opacity: 1;
-    margin: 1.75rem 0 1.5rem;
-  }
-
-  &__message {
-    max-width: 320px;
-    margin: 0;
-    font-size: 13px;
-    font-weight: 325;
-    line-height: 1.45;
-    color: var(--color-text);
-  }
-
-  &__hint {
-    margin: 0;
-    font-size: 12px;
-    line-height: 1.4;
-    color: #8a8a8a;
-  }
-
-  &__actions {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.75rem;
-    width: 100%;
-  }
-
-  &__button {
-    width: auto;
-  }
-
-  &__button-control {
-    min-width: 180px;
-  }
-
-  &__button-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    font-size: 20px;
-    line-height: 1;
-  }
-}
--- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts
+++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts
@@ -1,128 +0,0 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-
-import { CheckoutService, PurchaseStatusResponse } from '../../../../core/services/checkout.service';
-import { TenantService } from '../../../../core/services/tenant.service';
-import { ButtonComponent } from '../../../../shared/components/button/button.component';
-
-type PurchaseStatusView = 'approved' | 'pending' | 'rejected' | 'error';
-
-@Component({
-  selector: 'app-purchase-status-page',
-  standalone: true,
-  imports: [ButtonComponent],
-  templateUrl: './purchase-status-page.component.html',
-  styleUrl: './purchase-status-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class PurchaseStatusPageComponent implements OnInit, OnDestroy {
-  private readonly route = inject(ActivatedRoute);
-  private readonly router = inject(Router);
-  private readonly checkoutService = inject(CheckoutService);
-  private readonly tenantService = inject(TenantService);
-
-  private readonly pollIntervalMs = 5000;
-  private purchaseId: string | null = null;
-  private tenantCode: string | null = null;
-  private pollTimeoutId: ReturnType<typeof setTimeout> | null = null;
-
-  protected readonly isLoading = signal(true);
-  protected readonly isRefreshing = signal(false);
-  protected readonly status = signal<PurchaseStatusView>('pending');
-
-  ngOnInit(): void {
-    const purchaseId = this.route.snapshot.paramMap.get('id');
-    const tenant = this.tenantService.tenant();
-
-    if (!purchaseId || !tenant) {
-      void this.router.navigate(['/']);
-      return;
-    }
-
-    this.purchaseId = purchaseId;
-    this.tenantCode = tenant.codigo;
-
-    void this.refreshStatus(true);
-  }
-
-  ngOnDestroy(): void {
-    this.clearScheduledPoll();
-  }
-
-  protected retryStatusCheck(): void {
-    void this.refreshStatus(false);
-  }
-
-  private async refreshStatus(showLoader: boolean): Promise<void> {
-    if (!this.purchaseId || !this.tenantCode) {
-      return;
-    }
-
-    this.clearScheduledPoll();
-
-    if (showLoader) {
-      this.isLoading.set(true);
-    } else {
-      this.isRefreshing.set(true);
-    }
-
-    try {
-      const purchase = await this.checkoutService.getPurchase(this.tenantCode, this.purchaseId);
-      const resolvedStatus = this.resolveStatus(purchase);
-
-      this.status.set(resolvedStatus);
-
-      if (resolvedStatus === 'pending') {
-        this.scheduleNextPoll();
-      }
-    } catch (error) {
-      console.error('Failed to fetch purchase status:', error);
-      this.status.set('error');
-    } finally {
-      this.isLoading.set(false);
-      this.isRefreshing.set(false);
-    }
-  }
-
-  private resolveStatus(purchase: PurchaseStatusResponse): PurchaseStatusView {
-    if (purchase.status === 'paid') {
-      return 'approved';
-    }
-
-    if (purchase.status === 'rejected' || purchase.status === 'cancelled') {
-      return 'rejected';
-    }
-
-    return 'pending';
-  }
-
-  private scheduleNextPoll(): void {
-    if (this.pollTimeoutId !== null) {
-      return;
-    }
-
-    this.pollTimeoutId = setTimeout(() => {
-      this.pollTimeoutId = null;
-      void this.refreshStatus(false);
-    }, this.pollIntervalMs);
-  }
-
-  private clearScheduledPoll(): void {
-    if (this.pollTimeoutId === null) {
-      return;
-    }
-
-    clearTimeout(this.pollTimeoutId);
-    this.pollTimeoutId = null;
-  }
-
-  protected getWhatsAppLink(): string {
-    const phone = '5493416658247';
-    const message = encodeURIComponent('Hola! Mi compra fue realizada con \u00E9xito.');
-    return `https://wa.me/${phone}?text=${message}`;
-  }
-
-  protected openWhatsApp(): void {
-    window.open(this.getWhatsAppLink(), '_blank', 'noopener,noreferrer');
-  }
-}
--- a/src/app/features/store/pages/register-page/register-page.component.html
+++ b/src/app/features/store/pages/register-page/register-page.component.html
@@ -1,88 +0,0 @@
-<header class="register-page__header text-center mb-4">
-  <h1 id="register-title" class="auth-title">CREAR CUENTA</h1>
-</header>
-
-<form
-  class="register-page__form d-grid gap-3"
-  novalidate
-  aria-labelledby="register-title"
-  [formGroup]="form"
-  (ngSubmit)="onSubmit()"
->
-  <div class="d-grid gap-3">
-    <label class="visually-hidden" for="register-full-name">Nombre y Apellido</label>
-    <app-input
-      id="register-full-name"
-      placeholder="Nombre y Apellido"
-      [value]="form.controls.nombre_apellido.value"
-      [invalid]="showControlError('nombre_apellido')"
-      (valueChange)="updateField('nombre_apellido', $event)"
-    />
-    @if (getControlError('nombre_apellido'); as errorMessage) {
-      <small class="text-danger">{{ errorMessage }}</small>
-    }
-
-    <label class="visually-hidden" for="register-email">Email</label>
-    <app-input
-      id="register-email"
-      type="email"
-      placeholder="Email"
-      [value]="form.controls.email.value"
-      [invalid]="showControlError('email')"
-      (valueChange)="updateField('email', $event)"
-    />
-    @if (getControlError('email'); as errorMessage) {
-      <small class="text-danger">{{ errorMessage }}</small>
-    }
-
-    <label class="visually-hidden" for="register-password">Contrasena</label>
-    <app-input
-      id="register-password"
-      type="password"
-      placeholder="Contrasena"
-      [value]="form.controls.password.value"
-      [invalid]="showControlError('password')"
-      (valueChange)="updateField('password', $event)"
-    />
-    @if (getControlError('password'); as errorMessage) {
-      <small class="text-danger">{{ errorMessage }}</small>
-    }
-
-    <label class="visually-hidden" for="register-password-repeat">Repetir Contrasena</label>
-    <app-input
-      id="register-password-repeat"
-      type="password"
-      placeholder="Repetir Contrasena"
-      [value]="form.controls.password_confirmation.value"
-      [invalid]="showControlError('password_confirmation')"
-      (valueChange)="updateField('password_confirmation', $event)"
-    />
-    @if (getControlError('password_confirmation'); as errorMessage) {
-      <small class="text-danger">{{ errorMessage }}</small>
-    }
-  </div>
-
-  <div class="d-grid gap-2 text-center">
-    @if (serverError(); as errorMessage) {
-      <small class="text-danger">{{ errorMessage }}</small>
-    }
-    <app-button
-      type="submit"
-      hostClass="w-100 d-block"
-      buttonClass="w-100"
-      [disabled]="isSubmitting()"
-    >
-      {{ isSubmitting() ? 'Creando cuenta...' : 'Crear Cuenta' }}
-    </app-button>
-    <app-button
-      type="button"
-      variant="borderless"
-      hostClass="w-100 d-block text-center"
-      buttonClass="register-page__back-action px-3 py-2"
-      [disabled]="isSubmitting()"
-      (click)="goToLogin()"
-    >
-      Volver
-    </app-button>
-  </div>
-</form>
--- a/src/app/features/store/pages/register-page/register-page.component.scss
+++ b/src/app/features/store/pages/register-page/register-page.component.scss
@@ -1,14 +0,0 @@
-:host {
-  display: block;
-}
-
-.register-page__header {
-}
-
-.register-page__form {
-  width: 100%;
-}
-
-.register-page__back-action {
-  min-height: 40px;
-}
--- a/src/app/features/store/pages/register-page/register-page.component.spec.ts
+++ b/src/app/features/store/pages/register-page/register-page.component.spec.ts
@@ -1,189 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { provideRouter, Router } from '@angular/router';
-import { of, throwError } from 'rxjs';
-
-import { AuthService } from '../../../../core/services/auth/auth.service';
-import { ModalService } from '../../../../core/services/modal.service';
-import { ToastService } from '../../../../core/services/toast.service';
-import { RegisterPageComponent } from './register-page.component';
-
-describe('RegisterPageComponent', () => {
-  beforeEach(() => {
-    TestBed.resetTestingModule();
-  });
-
-  it('submits registration data and redirects to /login on success', async () => {
-    const authService = {
-      register: vi.fn().mockReturnValue(
-        of({
-          message: 'Usuario registrado correctamente.',
-          data: {
-            id: 1,
-            nombre_apellido: 'Ada Lovelace',
-            email: 'ada@example.com'
-          }
-        })
-      )
-    };
-    const modalService = {
-      openSimple: vi.fn().mockReturnValue(of(undefined))
-    };
-    const toastService = {
-      danger: vi.fn()
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [RegisterPageComponent],
-      providers: [
-        provideRouter([]),
-        { provide: AuthService, useValue: authService },
-        { provide: ModalService, useValue: modalService },
-        { provide: ToastService, useValue: toastService }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(RegisterPageComponent);
-    const component = fixture.componentInstance as any;
-    const router = TestBed.inject(Router);
-    const navigateSpy = vi.spyOn(router, 'navigate').mockResolvedValue(true);
-
-    component.form.setValue({
-      nombre_apellido: 'Ada Lovelace',
-      email: 'ada@example.com',
-      password: 'secret123',
-      password_confirmation: 'secret123'
-    });
-
-    component.onSubmit();
-
-    expect(authService.register).toHaveBeenCalledWith({
-      nombre_apellido: 'Ada Lovelace',
-      email: 'ada@example.com',
-      password: 'secret123',
-      password_confirmation: 'secret123'
-    });
-    expect(modalService.openSimple).toHaveBeenCalledWith({
-      content: 'Tu cuenta fue creada correctamente',
-      buttonLabel: 'Cerrar'
-    });
-    expect(navigateSpy).toHaveBeenCalledWith(['/login']);
-  });
-
-  it('shows a mismatch message when passwords do not match', async () => {
-    const authService = {
-      register: vi.fn()
-    };
-    const modalService = {
-      openSimple: vi.fn()
-    };
-    const toastService = {
-      danger: vi.fn()
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [RegisterPageComponent],
-      providers: [
-        provideRouter([]),
-        { provide: AuthService, useValue: authService },
-        { provide: ModalService, useValue: modalService },
-        { provide: ToastService, useValue: toastService }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(RegisterPageComponent);
-    const component = fixture.componentInstance as any;
-
-    component.form.setValue({
-      nombre_apellido: 'Ada Lovelace',
-      email: 'ada@example.com',
-      password: 'secret123',
-      password_confirmation: 'different'
-    });
-    component.onSubmit();
-
-    expect(authService.register).not.toHaveBeenCalled();
-    expect(component.getControlError('password_confirmation')).toBe('Las contrasenas no coinciden.');
-  });
-
-  it('validates max length and password minimum length before submit', async () => {
-    const authService = {
-      register: vi.fn()
-    };
-    const modalService = {
-      openSimple: vi.fn()
-    };
-    const toastService = {
-      danger: vi.fn()
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [RegisterPageComponent],
-      providers: [
-        provideRouter([]),
-        { provide: AuthService, useValue: authService },
-        { provide: ModalService, useValue: modalService },
-        { provide: ToastService, useValue: toastService }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(RegisterPageComponent);
-    const component = fixture.componentInstance as any;
-
-    component.form.setValue({
-      nombre_apellido: 'A'.repeat(256),
-      email: `${'a'.repeat(250)}@example.com`,
-      password: '1234567',
-      password_confirmation: '1234567'
-    });
-    component.onSubmit();
-
-    expect(authService.register).not.toHaveBeenCalled();
-    expect(component.getControlError('nombre_apellido')).toBe('No puede superar los 255 caracteres.');
-    expect(component.getControlError('email')).toBe('No puede superar los 255 caracteres.');
-    expect(component.getControlError('password')).toBe('Debe tener al menos 8 caracteres.');
-  });
-
-  it('surfaces backend register errors', async () => {
-    const authService = {
-      register: vi.fn().mockReturnValue(
-        throwError(() => ({
-          error: {
-            errors: {
-              email: ['El email ya esta en uso.']
-            }
-          }
-        }))
-      )
-    };
-    const modalService = {
-      openSimple: vi.fn()
-    };
-    const toastService = {
-      danger: vi.fn()
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [RegisterPageComponent],
-      providers: [
-        provideRouter([]),
-        { provide: AuthService, useValue: authService },
-        { provide: ModalService, useValue: modalService },
-        { provide: ToastService, useValue: toastService }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(RegisterPageComponent);
-    const component = fixture.componentInstance as any;
-
-    component.form.setValue({
-      nombre_apellido: 'Ada Lovelace',
-      email: 'ada@example.com',
-      password: 'secret123',
-      password_confirmation: 'secret123'
-    });
-    component.onSubmit();
-
-    expect(component.serverError()).toBe('El email ya esta en uso.');
-    expect(toastService.danger).toHaveBeenCalledWith('El email ya esta en uso.');
-  });
-});
--- a/src/app/features/store/pages/register-page/register-page.component.ts
+++ b/src/app/features/store/pages/register-page/register-page.component.ts
@@ -1,175 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
-import {
-  AbstractControl,
-  FormBuilder,
-  ReactiveFormsModule,
-  ValidationErrors,
-  ValidatorFn,
-  Validators
-} from '@angular/forms';
-import { Router } from '@angular/router';
-
-import { AuthService } from '../../../../core/services/auth/auth.service';
-import { ModalService } from '../../../../core/services/modal.service';
-import { ToastService } from '../../../../core/services/toast.service';
-import { ButtonComponent } from '../../../../shared/components/button/button.component';
-import { InputComponent } from '../../../../shared/components/input/input.component';
-
-const PASSWORD_MIN_LENGTH = 8;
-const TEXT_MAX_LENGTH = 255;
-
-const passwordsMatchValidator: ValidatorFn = (
-  control: AbstractControl
-): ValidationErrors | null => {
-  const password = control.get('password')?.value;
-  const passwordConfirmation = control.get('password_confirmation')?.value;
-
-  if (!password || !passwordConfirmation) {
-    return null;
-  }
-
-  return password === passwordConfirmation ? null : { passwordMismatch: true };
-};
-
-@Component({
-  selector: 'app-register-page',
-  imports: [ReactiveFormsModule, InputComponent, ButtonComponent],
-  templateUrl: './register-page.component.html',
-  styleUrl: './register-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class RegisterPageComponent {
-  private readonly formBuilder = inject(FormBuilder);
-  private readonly router = inject(Router);
-  private readonly authService = inject(AuthService);
-  private readonly modalService = inject(ModalService);
-  private readonly toastService = inject(ToastService);
-
-  private readonly submittedState = signal(false);
-  private readonly serverErrorState = signal<string | null>(null);
-  private readonly isSubmittingState = signal(false);
-
-  protected readonly form = this.formBuilder.nonNullable.group({
-    nombre_apellido: ['', [Validators.required, Validators.maxLength(TEXT_MAX_LENGTH)]],
-    email: [
-      '',
-      [Validators.required, Validators.email, Validators.maxLength(TEXT_MAX_LENGTH)]
-    ],
-    password: ['', [Validators.required, Validators.minLength(PASSWORD_MIN_LENGTH)]],
-    password_confirmation: ['', [Validators.required]]
-  }, {
-    validators: [passwordsMatchValidator]
-  });
-  protected readonly submitted = this.submittedState.asReadonly();
-  protected readonly serverError = this.serverErrorState.asReadonly();
-  protected readonly isSubmitting = this.isSubmittingState.asReadonly();
-
-  goToLogin(): void {
-    void this.router.navigate(['/login']);
-  }
-
-  onSubmit(): void {
-    this.submittedState.set(true);
-    this.serverErrorState.set(null);
-
-    if (this.form.invalid) {
-      this.form.markAllAsTouched();
-      return;
-    }
-
-    this.isSubmittingState.set(true);
-
-    this.authService.register(this.form.getRawValue()).subscribe({
-      next: () => {
-        this.isSubmittingState.set(false);
-        this.modalService.openSimple({
-          content: 'Tu cuenta fue creada correctamente',
-          buttonLabel: 'Cerrar'
-        }).subscribe(() => {
-          void this.router.navigate(['/login']);
-        });
-      },
-      error: (error: unknown) => {
-        this.isSubmittingState.set(false);
-        const errorMessage = this.resolveErrorMessage(error);
-        this.serverErrorState.set(errorMessage);
-        this.toastService.danger(errorMessage);
-      }
-    });
-  }
-
-  protected updateField(
-    controlName: 'nombre_apellido' | 'email' | 'password' | 'password_confirmation',
-    value: string | number
-  ): void {
-    this.form.controls[controlName].setValue(String(value));
-  }
-
-  protected showControlError(
-    controlName: 'nombre_apellido' | 'email' | 'password' | 'password_confirmation'
-  ): boolean {
-    const control = this.form.controls[controlName];
-    const hasPasswordMismatch =
-      controlName === 'password_confirmation' &&
-      this.form.hasError('passwordMismatch') &&
-      (control.touched || this.submitted());
-
-    return (control.invalid && (control.touched || this.submitted())) || hasPasswordMismatch;
-  }
-
-  protected getControlError(
-    controlName: 'nombre_apellido' | 'email' | 'password' | 'password_confirmation'
-  ): string | null {
-    const control = this.form.controls[controlName];
-
-    if (!this.showControlError(controlName)) {
-      return null;
-    }
-
-    if (control.hasError('required')) {
-      return 'Este campo es obligatorio.';
-    }
-
-    if (control.hasError('maxlength')) {
-      return `No puede superar los ${TEXT_MAX_LENGTH} caracteres.`;
-    }
-
-    if (control.hasError('email')) {
-      return 'Ingresa un email valido.';
-    }
-
-    if (control.hasError('minlength')) {
-      return `Debe tener al menos ${PASSWORD_MIN_LENGTH} caracteres.`;
-    }
-
-    if (controlName === 'password_confirmation' && this.form.hasError('passwordMismatch')) {
-      return 'Las contrasenas no coinciden.';
-    }
-
-    return 'El valor ingresado no es valido.';
-  }
-
-  private resolveErrorMessage(error: unknown): string {
-    const errorPayload =
-      typeof error === 'object' && error !== null && 'error' in error
-        ? (error as { error?: { errors?: Record<string, string[]>; message?: string } }).error
-        : undefined;
-    const apiErrors = errorPayload?.errors;
-
-    if (apiErrors && typeof apiErrors === 'object') {
-      for (const field of ['nombre_apellido', 'email', 'password'] as const) {
-        const messages = apiErrors[field];
-
-        if (Array.isArray(messages) && typeof messages[0] === 'string' && messages[0].trim()) {
-          return messages[0];
-        }
-      }
-    }
-
-    if (typeof errorPayload?.message === 'string' && errorPayload.message.trim()) {
-      return errorPayload.message;
-    }
-
-    return 'No se pudo crear la cuenta. Intenta nuevamente.';
-  }
-}
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.html
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.html
@@ -1,45 +1,21 @@
-<section class="py-5">
-  <div class="container-xl px-3 px-md-4">
-    <app-store-section title="Productos">
-      <div class="d-grid gap-4">
-        @if (error()) {
-          <p class="alert text-center mb-0 store-home__alert-error">{{ error() }}</p>
-        } @else if (loading() && !productCards().length) {
-          <p class="alert alert-light border text-center mb-0">Cargando productos...</p>
-        } @else if (!productCards().length) {
-          <p class="alert alert-light border text-center mb-0">No hay productos disponibles en este momento.</p>
-        } @else {
-          <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 g-4">
-            @for (product of productCards(); track product.id) {
-              <div class="col">
-                <app-product-card
-                  [title]="product.title"
-                  [originalPrice]="product.originalPrice"
-                  [discount]="product.discount"
-                  [transferPrice]="product.transferPrice"
-                  [imageUrl]="product.imageUrl"
-                  (buy)="onBuyProduct(product.id)"
-                />
-              </div>
-            }
-          </div>
-        }
+<section class="store-home">
+  <div class="store-home__inner">
+    <div class="store-home__hero">
+      <span class="store-home__eyebrow">Store Layout</span>
+      <h1>Tienda en construccion</h1>
+      <p class="store-home__lead">
+        Esta pagina placeholder deja visible el shell del store mientras se conectan categorias,
+        catalogo y acciones reales.
+      </p>
+    </div>

-        @if (loading() && productCards().length) {
-          <p class="alert alert-light border text-center mb-0 py-2">Actualizando productos...</p>
-        }
-
-        @if (totalPages() > 1) {
-          <div class="d-flex justify-content-center">
-            <app-paginator
-              [page]="currentPage()"
-              [totalPages]="totalPages()"
-              [disabled]="loading()"
-              (pageChange)="onPageChange($event)"
-            />
-          </div>
-        }
-      </div>
-    </app-store-section>
+    <div class="store-home__highlights">
+      @for (highlight of highlights; track highlight) {
+        <article class="store-home__card">
+          <span class="store-home__card-index" aria-hidden="true">0{{ $index + 1 }}</span>
+          <p>{{ highlight }}</p>
+        </article>
+      }
+    </div>
  </div>
 </section>
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.scss
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.scss
@@ -2,9 +2,95 @@
  display: block;
 }

-.store-home__alert-error {
-  margin: 0;
-  border-color: rgba(var(--tenant-danger-rgb, 220, 53, 69), 0.18);
-  background-color: rgba(var(--tenant-danger-rgb, 220, 53, 69), 0.08);
-  color: var(--tenant-danger, #dc3545);
+.store-home {
+  padding: 3rem 0 4rem;
+}
+
+.store-home__inner {
+  width: min(100% - 3rem, 75rem);
+  margin: 0 auto;
+  display: grid;
+  gap: 1.5rem;
+}
+
+.store-home__hero {
+  padding: clamp(2rem, 4vw, 3rem);
+  border: 1px solid #e4e4e4;
+  border-radius: 1.5rem;
+  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
+  box-shadow: 0 1.2rem 2.2rem rgba(17, 17, 17, 0.06);
+}
+
+.store-home__eyebrow {
+  display: inline-block;
+  margin-bottom: 0.75rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #666666;
+}
+
+h1 {
+  margin-bottom: 0.75rem;
+  font-size: clamp(2rem, 4vw, 3.25rem);
+  font-weight: 700;
+  letter-spacing: -0.05em;
+}
+
+.store-home__lead {
+  max-width: 42rem;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: #4a4a4a;
+}
+
+.store-home__highlights {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.store-home__card {
+  display: grid;
+  gap: 0.9rem;
+  padding: 1.5rem;
+  border: 1px solid #e4e4e4;
+  border-radius: 1.25rem;
+  background-color: #ffffff;
+  box-shadow: 0 0.75rem 1.5rem rgba(17, 17, 17, 0.04);
+}
+
+.store-home__card-index {
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: #707070;
+}
+
+.store-home__card p {
+  margin: 0;
+  line-height: 1.6;
+  color: #333333;
+}
+
+@media (max-width: 991.98px) {
+  .store-home__highlights {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 767.98px) {
+  .store-home {
+    padding: 2rem 0 3rem;
+  }
+
+  .store-home__inner {
+    width: min(100% - 1.5rem, 75rem);
+  }
+
+  .store-home__highlights {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts
@@ -1,239 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { Subject, of, throwError } from 'rxjs';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { ApiPaginatedResponse } from '../../../../core/services/api-paginated-response.interface';
-import { Product } from '../../../../core/services/catalog/catalog.interface';
-import { CatalogService } from '../../../../core/services/catalog/catalog.service';
-import { StoreHomePageComponent } from './store-home-page.component';
-
-function createPaginatedResponse(
-  products: Product[],
-  currentPage: number,
-  lastPage: number
-): ApiPaginatedResponse<Product[]> {
-  return {
-    data: products,
-    meta: {
-      current_page: currentPage,
-      from: products.length ? 1 : null,
-      last_page: lastPage,
-      links: [],
-      path: '/productos',
-      per_page: 12,
-      to: products.length || null,
-      total: products.length
-    },
-    links: {
-      first: '/productos?page=1',
-      last: `/productos?page=${lastPage}`,
-      prev: currentPage > 1 ? `/productos?page=${currentPage - 1}` : null,
-      next: currentPage < lastPage ? `/productos?page=${currentPage + 1}` : null
-    }
-  };
-}
-
-describe('StoreHomePageComponent', () => {
-  const pageOneProducts: Product[] = [
-    {
-      id: 1,
-      category_id: 10,
-      brand_id: null,
-      slug: 'auriculares-bluetooth',
-      nombre: 'Auriculares Bluetooth',
-      descripcion: 'Auriculares bluetooth de prueba',
-      precio: '24999',
-      category: 'Tecnología',
-      brand: null,
-      images: []
-    },
-    {
-      id: 2,
-      category_id: 11,
-      brand_id: null,
-      slug: 'teclado-mecanico',
-      nombre: 'Teclado Mecanico',
-      descripcion: 'Teclado mecánico de prueba',
-      precio: '18999',
-      category: 'Tecnología',
-      brand: null,
-      images: []
-    }
-  ];
-
-  beforeEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('loads page 1 on init, renders the products title and the fetched product cards', async () => {
-    const catalogServiceStub = {
-      getProductos: vi.fn().mockReturnValue(of(createPaginatedResponse(pageOneProducts, 1, 3)))
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [StoreHomePageComponent],
-      providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(StoreHomePageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(catalogServiceStub.getProductos).toHaveBeenCalledWith({ page: 1 });
-    expect(element.querySelector('.store-section__title')?.textContent?.trim()).toBe('Productos');
-    expect(element.querySelectorAll('app-product-card')).toHaveLength(2);
-    expect(element.textContent).toContain('Auriculares Bluetooth');
-    expect(element.textContent).toContain('Teclado Mecanico');
-    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('1/3');
-  });
-
-  it('requests the next page when the paginator emits a page change', async () => {
-    const catalogServiceStub = {
-      getProductos: vi
-        .fn()
-        .mockReturnValueOnce(of(createPaginatedResponse(pageOneProducts, 1, 3)))
-        .mockReturnValueOnce(
-          of(
-            createPaginatedResponse(
-              [
-                {
-                  id: 3,
-                  category_id: 12,
-                  brand_id: null,
-                  slug: 'mouse-gamer',
-                  nombre: 'Mouse Gamer',
-                  descripcion: 'Mouse gamer de prueba',
-                  precio: '15999',
-                  category: 'Tecnología',
-                  brand: null,
-                  images: []
-                }
-              ],
-              2,
-              3
-            )
-          )
-        )
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [StoreHomePageComponent],
-      providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(StoreHomePageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-    (element.querySelector('[data-testid="paginator-next"]') as HTMLButtonElement).click();
-    fixture.detectChanges();
-
-    expect(catalogServiceStub.getProductos).toHaveBeenNthCalledWith(1, { page: 1 });
-    expect(catalogServiceStub.getProductos).toHaveBeenNthCalledWith(2, { page: 2 });
-    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('2/3');
-    expect(element.textContent).toContain('Mouse Gamer');
-  });
-
-  it('disables the paginator while a new page request is in flight', async () => {
-    const nextPageSubject = new Subject<ApiPaginatedResponse<Product[]>>();
-    const catalogServiceStub = {
-      getProductos: vi
-        .fn()
-        .mockReturnValueOnce(of(createPaginatedResponse(pageOneProducts, 1, 3)))
-        .mockReturnValueOnce(nextPageSubject.asObservable())
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [StoreHomePageComponent],
-      providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(StoreHomePageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-    (element.querySelector('[data-testid="paginator-next"]') as HTMLButtonElement).click();
-    fixture.detectChanges();
-
-    expect(
-      Array.from(element.querySelectorAll('app-paginator button')).every(
-        (button) => (button as HTMLButtonElement).disabled
-      )
-    ).toBe(true);
-    expect(element.textContent).toContain('Actualizando productos...');
-
-    nextPageSubject.next(createPaginatedResponse(pageOneProducts, 2, 3));
-    nextPageSubject.complete();
-    fixture.detectChanges();
-
-    expect(
-      Array.from(element.querySelectorAll('app-paginator button')).some(
-        (button) => !(button as HTMLButtonElement).disabled
-      )
-    ).toBe(true);
-  });
-
-  it('shows an empty-state message and hides the paginator when there are no products', async () => {
-    const catalogServiceStub = {
-      getProductos: vi.fn().mockReturnValue(of(createPaginatedResponse([], 1, 1)))
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [StoreHomePageComponent],
-      providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(StoreHomePageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(element.textContent).toContain('No hay productos disponibles en este momento.');
-    expect(element.querySelector('app-paginator')).toBeNull();
-  });
-
-  it('shows an error message when the catalog request fails', async () => {
-    const catalogServiceStub = {
-      getProductos: vi.fn().mockReturnValue(throwError(() => new Error('boom')))
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [StoreHomePageComponent],
-      providers: [
-        {
-          provide: CatalogService,
-          useValue: catalogServiceStub
-        }
-      ]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(StoreHomePageComponent);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement as HTMLElement;
-
-    expect(element.textContent).toContain('No pudimos cargar los productos en este momento.');
-    expect(element.querySelectorAll('app-product-card')).toHaveLength(0);
-  });
-});
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.ts
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.ts
@@ -1,114 +1,14 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, computed, inject, signal } from '@angular/core';
-import { Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-
-import { CatalogService } from '../../../../core/services/catalog/catalog.service';
-import { Product } from '../../../../core/services/catalog/catalog.interface';
-import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
-import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
-import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
-
-interface StoreHomeProductCardViewModel {
-  id: number;
-  title: string;
-  originalPrice: number;
-  discount: null;
-  transferPrice: null;
-  imageUrl: string | null;
-}
+import { Component } from '@angular/core';

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

-import { SimpleLayoutComponent } from '../../core/layout/simple-layout/simple-layout.component';
 import { StoreLayoutComponent } from '../../core/layout/store-layout/store-layout.component';
-import { authGuard, guestOnlyGuard } from '../../core/services/auth/auth.guards';
-import { LoginPageComponent } from './pages/login-page/login-page.component';
-import { RegisterPageComponent } from './pages/register-page/register-page.component';
 import { StoreHomePageComponent } from './pages/store-home-page/store-home-page.component';

 export const routes: Routes = [
@@ -15,56 +11,6 @@ export const routes: Routes = [
      {
        path: '',
        component: StoreHomePageComponent
-      },
-      {
-        path: 'login',
-        canActivate: [guestOnlyGuard],
-        component: SimpleLayoutComponent,
-        children: [
-          {
-            path: '',
-            component: LoginPageComponent
-          }
-        ]
-      },
-      {
-        path: 'register',
-        canActivate: [guestOnlyGuard],
-        component: SimpleLayoutComponent,
-        children: [
-          {
-            path: '',
-            component: RegisterPageComponent
-          }
-        ]
-      },
-      {
-        path: 'producto/:id',
-        loadComponent: () =>
-          import('./pages/product-detail-page/product-detail-page.component').then(
-            (m) => m.ProductDetailPageComponent
-          )
-      },
-      {
-        path: 'checkout',
-        canActivate: [authGuard],
-        loadComponent: () =>
-          import('./pages/checkout-page/checkout-page.component').then(
-            (m) => m.CheckoutPageComponent
-          )
-      },
-      {
-        path: 'checkout/status',
-        component: SimpleLayoutComponent,
-        children: [
-          {
-            path: ':id',
-            loadComponent: () =>
-              import('./pages/purchase-status-page/purchase-status-page.component').then(
-                (m) => m.PurchaseStatusPageComponent
-              )
-          }
-        ]
      }
    ]
  }
--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -2,11 +2,6 @@
  display: inline-block;
 }

-:host(.product-detail__cta) {
-  display: block;
-  width: 100%;
-}
-
 .btn {
  min-height: 40px;
  font-weight: 700;
@@ -14,10 +9,6 @@
  min-width: 216px;
 }

-:host(.product-detail__cta) .btn {
-  width: 100%;
-}
-
 .btn-primary,
 .btn-secondary,
 .btn-danger {
@@ -29,9 +20,7 @@
 }

 .btn-outline-primary,
-.btn-outline-neutral,
-.btn-outline-danger,
-.btn-borderless {
+.btn-outline-danger {
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
@@ -87,17 +76,6 @@
  --bs-btn-disabled-border-color: color-mix(in srgb, transparent 35%, var(--tenant-primary));
 }

-.btn-outline-neutral {
-  --bs-btn-color: #666666;
-  --bs-btn-border-color: #a0a0a0;
-  --bs-btn-hover-bg: #a0a0a0;
-  --bs-btn-hover-border-color: #a0a0a0;
-  --bs-btn-active-bg: #8a8a8a;
-  --bs-btn-active-border-color: #8a8a8a;
-  --bs-btn-disabled-color: rgba(102, 102, 102, 0.55);
-  --bs-btn-disabled-border-color: rgba(160, 160, 160, 0.55);
-}
-
 .btn-outline-danger {
  --bs-btn-color: var(--tenant-danger);
  --bs-btn-border-color: var(--tenant-danger);
@@ -108,22 +86,3 @@
  --bs-btn-disabled-color: color-mix(in srgb, transparent 35%, var(--tenant-danger));
  --bs-btn-disabled-border-color: color-mix(in srgb, transparent 35%, var(--tenant-danger));
 }
-
-.btn-borderless {
-  min-width: auto;
-  padding-inline: 0;
-  border: 0;
-  color: var(--tenant-primary);
-  font-weight: 700;
-  --bs-btn-border-color: transparent;
-  --bs-btn-hover-color: color-mix(in srgb, black 18%, var(--tenant-primary));
-  --bs-btn-hover-bg: transparent;
-  --bs-btn-hover-border-color: transparent;
-  --bs-btn-active-color: color-mix(in srgb, black 24%, var(--tenant-primary));
-  --bs-btn-active-bg: transparent;
-  --bs-btn-active-border-color: transparent;
-  --bs-btn-disabled-color: color-mix(in srgb, transparent 35%, var(--tenant-primary));
-  --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: transparent;
-  --bs-btn-disabled-opacity: 1;
-}
--- a/src/app/shared/components/button/button.component.spec.ts
+++ b/src/app/shared/components/button/button.component.spec.ts
@@ -1,19 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ButtonComponent } from './button.component';
-
-describe('ButtonComponent', () => {
-  it('applies the borderless variant class', async () => {
-    await TestBed.configureTestingModule({
-      imports: [ButtonComponent]
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(ButtonComponent);
-    fixture.componentRef.setInput('variant', 'borderless');
-    fixture.detectChanges();
-
-    const button = fixture.nativeElement.querySelector('button') as HTMLButtonElement;
-
-    expect(button.classList.contains('btn-borderless')).toBe(true);
-  });
-});
--- a/src/app/shared/components/button/button.component.ts
+++ b/src/app/shared/components/button/button.component.ts
@@ -4,8 +4,6 @@ import { NgClass } from '@angular/common';
 export type ButtonVariant =
  | 'primary'
  | 'secondary'
-  | 'neutral-outline'
-  | 'borderless'
  | 'danger'
  | 'danger-secondary'
  | 'cancel';
@@ -15,44 +13,22 @@ export type ButtonVariant =
  imports: [NgClass],
  templateUrl: './button.component.html',
  styleUrl: './button.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    '[class]': 'hostClasses()',
-    '[attr.aria-disabled]': 'disabled()',
-    '(click)': 'onHostClick($event)'
-  }
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ButtonComponent {
  readonly variant = input<ButtonVariant>('primary');
  readonly type = input<'button' | 'submit' | 'reset'>('button');
  readonly disabled = input(false);
-  readonly hostClass = input<string>('');
-  readonly buttonClass = input<string>('');
-  protected readonly hostClasses = computed(() =>
-    [this.hostClass(), this.disabled() ? 'app-button--disabled' : ''].filter(Boolean).join(' ')
-  );

  protected readonly buttonClasses = computed(() => {
    const variants: Record<ButtonVariant, string> = {
      primary: 'btn-primary',
      secondary: 'btn-outline-primary',
-      'neutral-outline': 'btn-outline-neutral',
-      borderless: 'btn-borderless',
      danger: 'btn-danger',
      'danger-secondary': 'btn-outline-danger',
      cancel: 'btn-secondary'
    };

-    return ['btn', variants[this.variant()], this.buttonClass()];
+    return ['btn', variants[this.variant()]];
  });
-
-  protected onHostClick(event: Event): void {
-    if (!this.disabled()) {
-      return;
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-    event.stopImmediatePropagation();
-  }
 }
--- a/src/app/shared/components/cart-icon/cart-icon.component.html
+++ b/src/app/shared/components/cart-icon/cart-icon.component.html
@@ -1,13 +0,0 @@
-<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>
--- a/src/app/shared/components/cart-icon/cart-icon.component.scss
+++ b/src/app/shared/components/cart-icon/cart-icon.component.scss
@@ -1,79 +0,0 @@
-: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;
-}
--- a/src/app/shared/components/cart-icon/cart-icon.component.spec.ts
+++ b/src/app/shared/components/cart-icon/cart-icon.component.spec.ts
@@ -1,60 +0,0 @@
-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);
-  });
-});
--- a/src/app/shared/components/cart-icon/cart-icon.component.ts
+++ b/src/app/shared/components/cart-icon/cart-icon.component.ts
@@ -1,19 +0,0 @@
-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;
-  });
-}
--- a/Show More
+++ b/Show More