feat: agregar validaciones para el módulo ARCA según el plan de la organización

- Dialog centrado (no bottom-sheet) con ThemeProvider
- Botones Cancelar/Guardar en texto plano (sin iconos), mismo patrón que Confirm.tsx
- Recibe valores actuales por props para no depender de store global
- Titulo dice 'Personalizar' solamente
- Cierre se hace con icono X en el title bar

.opencode/skills/engram-cloud-sync/SKILL.md

@@ -0,0 +1,33 @@
+---
+name: engram-cloud-sync
+description: "Trigger: sync engram cloud, sincronizar memoria, push engram, engram cloud sync. Synchronize local Engram project to remote cloud server."
+license: Apache-2.0
+metadata:
+  author: "horacio"
+  version: "1.0"
+---
+
+## Activation Contract
+
+Load this skill whenever the user explicitly asks to synchronize, push, or sync their Engram memory with the cloud.
+
+## Hard Rules
+
+- **Never skip the sync** when requested. Execute `engram sync --cloud --project turnosxpress` every time.
+- **Always verify** the cloud server is reachable and the project is enrolled before syncing.
+- **Report results to the user**: sessions, observations, prompts, mutations exported.
+- **Fail fast** on 403/forbidden errors — that means the project needs enrollment first.
+
+## Execution Steps
+
+1. **Check cloud status:** `engram cloud status --cwd <repo>` (default: current project directory). If `Auth status: ready` and `Sync readiness: pending`, continue.
+2. **If project is not enrolled** (`403: forbidden: project is not allowed` or similar), run `engram cloud enroll turnosxpress --cwd <repo>` then re-check status.
+3. **Execute sync:** `engram sync --cloud --project turnosxpress --cwd <repo>`.
+4. **Report results** — sessions, observations, prompts, mutations count. If sync fails, surface the exact error and suggest running `engram serve` for autosync mode.
+
+## Output Contract
+
+Return:
+- Cloud server URL and enrollment status.
+- Export counts: sessions, observations, prompts, mutations.
+- Confirmation: "Cloud sync complete" or actionable error if it failed.

server/.env

@@ -45,7 +45,7 @@ MP_SUBSCRIPTION_FIND_URL = https://api.mercadopago.com/preapproval/
 MP_ACCESS_TOKEN = APP_USR-8753424836448507-121412-731599daea1ffa0b278b5dcc78aa1ec8-1611134648
 MP_BACK_URL = https://turnosxpress.com.ar/landing/dashboard
 MP_CHECK_PAYMENT_MINUTES = 1
-MP_WEBHOOK_URL = https://30e1-186-132-147-13.ngrok-free.app/mercadopago/webhook
+MP_WEBHOOK_URL = https://5f09-186-58-32-217.ngrok-free.app/mercadopago/webhook
 
 DEFAULT_BOT_ADMIN_PORT = 3005
 

server/src/Models/Appointments/Appointments.ts

@@ -534,7 +534,7 @@ class AppointmentManager implements IAppointmentsManager {
 
             await this.updateHeatMap(availabilityConfig);
 
-            await this.tryApplyDiscounts(newAppointment);
+            await this.tryApplyDiscounts(newAppointment, String(companyCheck.ownerId));
 
             if (notification && checkClient.userId) {
                 //Envio la notificacion al cliente.
@@ -592,7 +592,7 @@ class AppointmentManager implements IAppointmentsManager {
         }
     }
 
-    private async tryApplyDiscounts(appointment: IAppointment) {
+    private async tryApplyDiscounts(appointment: IAppointment, sessionUser: string) {
         //Intenta aplicar un descuento al turno si esta especificado en DiscountsEmail
         // y la fecha coincide con el rango especificado.
 
@@ -632,7 +632,7 @@ class AppointmentManager implements IAppointmentsManager {
                 appointmentId: String(appointment.id),
                 discountId: String(existDiscount.discountId),
                 companyId: String(appointment.companyId),
-                sessionUser: String(appointment.userId),
+                sessionUser: sessionUser,
             });
         } catch (err) {
             console.log(err);

server/src/Models/ArcaCredentials/ArcaCredentials.ts

@@ -2,6 +2,9 @@ import crypto from "crypto";
 import axios from "axios";
 import forge from "node-forge";
 import { validatePermissionsByCompany, validateSessionUser } from "../../helpers/check";
+import CompaniesList from "../Companies/Companies";
+import PlanSubscriptionsList from "../PlanSubscriptions/PlanSubscriptons";
+import { PlanFeatures } from "../Plans/Plans.interface";
 import ArcaWsaaTokens from "../ArcaWsaaTokens/ArcaWsaaTokens";
 import {
     ARCA_WSAA_ENVIRONMENT,
@@ -123,6 +126,23 @@ class ArcaCredentialsManager implements IArcaCredentialsManager {
         await validatePermissionsByCompany({ companyId, sessionUser });
     }
 
+    private async requirePaymentsFeature(companyId: string): Promise<void> {
+        const company = await CompaniesList.companies.findOne({ _id: companyId });
+
+        if (!company) {
+            throw new Error("No se ha encontrado la organización");
+        }
+
+        const canAccessPayments = await PlanSubscriptionsList.checkFeature({
+            userId: String(company.ownerId),
+            feature: PlanFeatures.PAYMENTS,
+        });
+
+        if (!canAccessPayments) {
+            throw new Error("La organización no tiene un plan que soporte el módulo de pagos");
+        }
+    }
+
     private async requireActiveFiscalProfile(
         companyId: string,
         sessionUser: string
@@ -730,6 +750,7 @@ class ArcaCredentialsManager implements IArcaCredentialsManager {
 
     public async generateCsr(data: GenerateArcaCredentialCsrParams): Promise<ArcaCredentialView> {
         await this.validateCompanyAdmin(data.companyId, data.sessionUser);
+        await this.requirePaymentsFeature(data.companyId);
         const fiscalProfile = await this.requireActiveFiscalProfile(data.companyId, data.sessionUser);
 
         const keys = forge.pki.rsa.generateKeyPair(2048);
@@ -778,6 +799,7 @@ class ArcaCredentialsManager implements IArcaCredentialsManager {
 
     public async uploadCertificate(data: UploadArcaCredentialCertificateParams): Promise<ArcaCredentialView> {
         await this.validateCompanyAdmin(data.companyId, data.sessionUser);
+        await this.requirePaymentsFeature(data.companyId);
 
         if (!data.certificatePem || !data.certificatePem.trim()) {
             throw new Error("Se requiere el certificado ARCA");
@@ -836,6 +858,7 @@ class ArcaCredentialsManager implements IArcaCredentialsManager {
 
     public async testWsaaLogin(data: TestArcaWsaaLoginParams): Promise<ArcaWsaaLoginTestResult> {
         await this.validateCompanyAdmin(data.companyId, data.sessionUser);
+        await this.requirePaymentsFeature(data.companyId);
 
         const service = ARCA_WSAA_SERVICE.WSFE;
         const environment = this.getArcaEnvironment();
@@ -853,6 +876,7 @@ class ArcaCredentialsManager implements IArcaCredentialsManager {
 
     public async getWsfeLastVoucher(data: ArcaWsfeLastVoucherParams): Promise<ArcaWsfeLastVoucherResult> {
         await this.validateCompanyAdmin(data.companyId, data.sessionUser);
+        await this.requirePaymentsFeature(data.companyId);
         const fiscalProfile = await this.requireActiveFiscalProfile(data.companyId, data.sessionUser);
         const loginTicket = await this.getWsaaLoginTicket(data.companyId);
         const environment = this.getArcaEnvironment();
@@ -886,6 +910,7 @@ class ArcaCredentialsManager implements IArcaCredentialsManager {
 
     public async issueFacturaC(data: ArcaWsfeIssueFacturaCParams): Promise<ArcaWsfeIssueFacturaCResult> {
         await this.validateCompanyAdmin(data.companyId, data.sessionUser);
+        await this.requirePaymentsFeature(data.companyId);
 
         if (data.amount <= 0) {
             throw new Error("El importe de la factura debe ser mayor a cero");
@@ -961,6 +986,7 @@ class ArcaCredentialsManager implements IArcaCredentialsManager {
 
     public async getWsfeDiagnostics(data: ArcaWsfeDiagnosticsParams): Promise<ArcaWsfeDiagnosticsResult> {
         await this.validateCompanyAdmin(data.companyId, data.sessionUser);
+        await this.requirePaymentsFeature(data.companyId);
         const fiscalProfile = await this.requireActiveFiscalProfile(data.companyId, data.sessionUser);
         const loginTicket = await this.getWsaaLoginTicket(data.companyId);
         const environment = this.getArcaEnvironment();
@@ -1054,8 +1080,11 @@ class ArcaCredentialsManager implements IArcaCredentialsManager {
 
         await validateSessionUser({ sessionUser: data.sessionUser });
 
+        let companyId: string | undefined;
+
         if (data.companyId) {
             await validatePermissionsByCompany({ companyId: data.companyId, sessionUser: data.sessionUser });
+            companyId = data.companyId;
         } else if (data.id) {
             const credential = await this.arcaCredentials.findOne(data);
 
@@ -1067,12 +1096,13 @@ class ArcaCredentialsManager implements IArcaCredentialsManager {
                 companyId: String(credential.companyId),
                 sessionUser: data.sessionUser,
             });
-
+            companyId = String(credential.companyId);
-            return [this.sanitizeCredential(credential)];
         } else {
             throw new Error("Se requiere una organización para buscar credenciales ARCA");
         }
 
+        await this.requirePaymentsFeature(companyId);
+
         const credentials = await this.arcaCredentials.find(data);
         return credentials.map((credential) => this.sanitizeCredential(credential));
     }

server/src/Models/Companies/Companies.Interface.ts

@@ -380,4 +380,5 @@ export interface ICompaniesManager {
     sysAdminUpdate(data: SysAdminUpdateCompanyParams): Promise<void>;
     sysAdminSetBanned(data: SysAdminSetCompanyBannedParams): Promise<void>;
     sysAdminGetInsights(data: SysAdminCompanyInsightsParams): Promise<SysAdminCompanyInsightsResult>;
+    checkCompanyAdmin(data: { companyId: string; sessionUser: string }): Promise<boolean>;
 }

server/src/Models/Companies/Companies.ts

@@ -1221,6 +1221,19 @@ class CompaniesManager implements ICompaniesManager {
             },
         };
     }
+
+    public async checkCompanyAdmin(data: { companyId: string; sessionUser: string }): Promise<boolean> {
+        const filterData =
+            data.companyId.indexOf("-") >= 0 ? { slug: data.companyId } : { _id: data.companyId };
+
+        const company = await this.companies.findOne(filterData as any);
+
+        if (!company) {
+            return false;
+        }
+
+        return await EmployeesList.checkPermission(company, data.sessionUser, EmployeeRoles.ADMIN);
+    }
 }
 
 const CompaniesList = new CompaniesManager();

server/src/Models/OrganizationFiscalProfiles/OrganizationFiscalProfiles.ts

@@ -1,4 +1,7 @@
 import { validatePermissionsByCompany, validateSessionUser } from "../../helpers/check";
+import CompaniesList from "../Companies/Companies";
+import PlanSubscriptionsList from "../PlanSubscriptions/PlanSubscriptons";
+import { PlanFeatures } from "../Plans/Plans.interface";
 import { findArcaActivityByCode } from "../ArcaActivities/ArcaActivities.Catalog";
 import { OrganizationFiscalProfilesAdapterMongoose } from "./OrganizationFiscalProfiles.Adapter.Mongoose";
 import {
@@ -70,6 +73,21 @@ class OrganizationFiscalProfilesManager implements IOrganizationFiscalProfilesMa
 
         await validatePermissionsByCompany({ companyId: data.companyId, sessionUser: data.sessionUser });
 
+        const company = await CompaniesList.companies.findOne({ _id: data.companyId });
+
+        if (!company) {
+            throw new Error("No se ha encontrado la organización");
+        }
+
+        const canAccessPayments = await PlanSubscriptionsList.checkFeature({
+            userId: String(company.ownerId),
+            feature: PlanFeatures.PAYMENTS,
+        });
+
+        if (!canAccessPayments) {
+            throw new Error("La organización no tiene un plan que soporte el módulo de pagos");
+        }
+
         this.validateProfileFields(data);
 
         const existingProfile = await this.organizationFiscalProfiles.findOne({
@@ -140,6 +158,18 @@ class OrganizationFiscalProfilesManager implements IOrganizationFiscalProfilesMa
                 companyId: data.companyId,
                 sessionUser,
             });
+
+            const company = await CompaniesList.companies.findOne({ _id: data.companyId });
+            if (company) {
+                const canAccessPayments = await PlanSubscriptionsList.checkFeature({
+                    userId: String(company.ownerId),
+                    feature: PlanFeatures.PAYMENTS,
+                });
+
+                if (!canAccessPayments) {
+                    throw new Error("La organización no tiene un plan que soporte el módulo de pagos");
+                }
+            }
         } else if (data.id) {
             const profile = await this.organizationFiscalProfiles.findOne(data);
 
@@ -152,6 +182,18 @@ class OrganizationFiscalProfilesManager implements IOrganizationFiscalProfilesMa
                 sessionUser,
             });
 
+            const company = await CompaniesList.companies.findOne({ _id: String(profile.companyId) });
+            if (company) {
+                const canAccessPayments = await PlanSubscriptionsList.checkFeature({
+                    userId: String(company.ownerId),
+                    feature: PlanFeatures.PAYMENTS,
+                });
+
+                if (!canAccessPayments) {
+                    throw new Error("La organización no tiene un plan que soporte el módulo de pagos");
+                }
+            }
+
             return [profile];
         } else {
             throw new Error("Se requiere una organización para buscar perfiles fiscales");

server/src/Models/PlanUsageCycle/PlanUsageCycle.Adapter.Mongoose.ts

@@ -112,7 +112,6 @@ export class PlanUsageCycleAdapterMongoose implements IPlanUsageCycleAdapter {
                     planId: data.planId,
                     cycleStart: data.cycleStart,
                     cycleEnd: data.cycleEnd,
-                    appointmentsCount: 0,
                     creationDate: now,
                 },
                 $inc: { appointmentsCount: data.quantity },

server/src/Models/Users/Users.ts

@@ -63,6 +63,7 @@ import ClientsList from "../Clients/Clients";
 import RepeatsList from "../Repeats/Repeats";
 import { OAuth2Client } from "google-auth-library";
 import SchedulesDisabledList from "../SchedulesDisabled/SchedulesDisabled";
+import dayjs from "dayjs";
 
 const cleanEmail = (email: string): string => {
     return email.toLowerCase().trim();
@@ -1087,10 +1088,18 @@ class UsersManager implements IUsersManager {
 
         await this.users.update(data);
 
+        const fecha = dayjs().format("DD/MM/YYYY");
+        const hora = dayjs().format("HH:mm");
+
         await NotificationsManager.sendEmail({
             email: cleanEmail(sessionUser.email),
             subject: "TurnosXpress :: Usuario actualizado",
-            message: `Hola ${sessionUser.firstName}, has actualizado tu perfil con éxito`,
+            templateId: "6aa948e050f4bd20460f00a5",
+            context: {
+                username: sessionUser.firstName,
+                fecha,
+                hora,
+            },
         });
     }
 

server/src/api/Companies/Companies.Controller.ts

@@ -38,7 +38,7 @@ export class ToggleCompanyFixedPostController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async toggleFixedCompanyPost(
-        @Body() requestBody: FixCompanyPostParams
+        @Body() requestBody: FixCompanyPostParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().toggleFixedPost(requestBody);
@@ -62,7 +62,7 @@ export class MoveCompanyFixedPostController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async moveFixedCompanyPost(
-        @Body() requestBody: MoveCompanyFixedPostParams
+        @Body() requestBody: MoveCompanyFixedPostParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().moveFixedPost(requestBody);
@@ -86,7 +86,7 @@ export class SetNotificationsStatusCompanyController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async setNotificationAuto(
-        @Body() requestBody: SetNotificationAutoParams
+        @Body() requestBody: SetNotificationAutoParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().setNotificationAuto(requestBody);
@@ -110,7 +110,7 @@ export class SetPublishedStatusCompanyController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async setPublishedStatus(
-        @Body() requestBody: SetOrganizationPublishedStatusParams
+        @Body() requestBody: SetOrganizationPublishedStatusParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().setPublishedStatus(requestBody);
@@ -134,7 +134,7 @@ export class CreateCompanyController extends Controller {
     @SuccessResponse(200, "La compañia fue creada con exito")
     @Post()
     public async createCompany(
-        @Body() requestBody: CreateCompanyParams
+        @Body() requestBody: CreateCompanyParams,
     ): Promise<ICompany | ApiValidationError> {
         try {
             const company = await new CompaniesService().createCompany(requestBody);
@@ -155,7 +155,7 @@ export class DeleteCompanyController extends Controller {
     @SuccessResponse(200, "La compañia fue modificada con exito")
     @Post()
     public async deleteCompany(
-        @Body() requestBody: DeleteCompanyParams
+        @Body() requestBody: DeleteCompanyParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().deleteCompany(requestBody);
@@ -179,7 +179,7 @@ export class UpdateCompanyController extends Controller {
     @SuccessResponse(200, "La compañia fue modificada con exito")
     @Post()
     public async updateCompany(
-        @Body() requestBody: UpdateCompanyParams
+        @Body() requestBody: UpdateCompanyParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().updateCompany(requestBody);
@@ -202,7 +202,7 @@ export class GetCompanyByIdController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async getById(
-        @Body() requestBody: OranizationsViewByIdParams
+        @Body() requestBody: OranizationsViewByIdParams,
     ): Promise<MyOranizationsView | ApiValidationError> {
         try {
             const companies = await new CompaniesService().getById(requestBody);
@@ -222,7 +222,7 @@ export class GetCompanyByUserController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async getByUserId(
-        @Body() requestBody: MyOranizationsViewParams
+        @Body() requestBody: MyOranizationsViewParams,
     ): Promise<MyOranizationsView[] | ApiValidationError> {
         try {
             const companies = await new CompaniesService().getByUserId(requestBody);
@@ -242,7 +242,7 @@ export class PaginateCompanyController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async paginateUsers(
-        @Body() requestBody: PaginateCompaniesParams
+        @Body() requestBody: PaginateCompaniesParams,
     ): Promise<PaginateCompaniesResults | ApiValidationError> {
         try {
             const users = await new CompaniesService().paginateCompanies(requestBody);
@@ -265,7 +265,7 @@ export class UploadCompanyHeaderController extends Controller {
     public async uploadHeader(
         @FormField() companyId: string,
         @FormField() sessionUser: string,
-        @UploadedFile() file: Express.Multer.File
+        @UploadedFile() file: Express.Multer.File,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().setCompanyHeader({
@@ -295,7 +295,7 @@ export class UploadCompanyIconController extends Controller {
     public async uploadIcon(
         @FormField() companyId: string,
         @FormField() sessionUser: string,
-        @UploadedFile() file: Express.Multer.File
+        @UploadedFile() file: Express.Multer.File,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().setCompanyIcon({
@@ -325,7 +325,7 @@ export class DeleteCompanyHeaderController extends Controller {
     @SuccessResponse(200, "El archivo fue cargado con exito")
     @Post()
     public async deleteHeader(
-        @Body() data: DeleteCompanyFileParams
+        @Body() data: DeleteCompanyFileParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().deleteCompanyHeader(data);
@@ -349,7 +349,7 @@ export class DeleteCompanyIconController extends Controller {
     @SuccessResponse(200, "El archivo fue cargado con exito")
     @Post()
     public async deleteIcon(
-        @Body() data: DeleteCompanyFileParams
+        @Body() data: DeleteCompanyFileParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().deleteCompanyIcon(data);
@@ -372,7 +372,7 @@ export class filterAllOrganizationsController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async filterAllOrganizations(
-        @Body() requestBody: PaginateCompaniesParams
+        @Body() requestBody: PaginateCompaniesParams,
     ): Promise<TextObjectFilterResult[] | ApiValidationError> {
         try {
             const clients = await new CompaniesService().filterAll(requestBody);
@@ -392,7 +392,7 @@ export class CheckCompanyNameController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async checkName(
-        @Body() requestBody: { name: string }
+        @Body() requestBody: { name: string },
     ): Promise<{ valid: boolean } | ApiValidationError> {
         try {
             const valid = await new CompaniesService().checkNameExists(requestBody.name);
@@ -405,3 +405,24 @@ export class CheckCompanyNameController extends Controller {
         }
     }
 }
+
+@Route("companies/check-admin")
+@Middlewares(authenticateMiddleware)
+export class CheckCompanyAdminController extends Controller {
+    @Response<ApiValidationError>(500, "Ha ocurrido un error")
+    @SuccessResponse(200, "Done")
+    @Post()
+    public async checkAdmin(
+        @Body() requestBody: { companyId: string; sessionUser: string },
+    ): Promise<boolean | ApiValidationError> {
+        try {
+            const isAdmin = await new CompaniesService().checkCompanyAdmin(requestBody);
+            this.setStatus(200);
+            return isAdmin;
+        } catch (e) {
+            const errorOccurred: Error = e as Error;
+            this.setStatus(500);
+            return new ApiValidationError(500, errorOccurred.message);
+        }
+    }
+}

server/src/api/Companies/Companies.Service.ts

@@ -112,4 +112,9 @@ export class CompaniesService {
         const isValid = await CompaniestList.isValidName({ name });
         return isValid;
     }
+
+    public async checkCompanyAdmin(data: { companyId: string; sessionUser: string }): Promise<boolean> {
+        await connect(`${process.env.DATABASE_CONNECTION}`);
+        return await CompaniestList.checkCompanyAdmin(data);
+    }
 }

txclient/src/Services/Header.Edit.Service.ts

@@ -0,0 +1,19 @@
+import ApiRequest from "@services/Api.Service";
+import { UpdateCompanyParams } from "@models/Company.model";
+import { ApiVoidResult } from "@models/Api.VoidResult.type";
+
+export const updateOrganizationColors = async (data: UpdateCompanyParams): Promise<ApiVoidResult> => {
+    return ApiRequest.post<ApiVoidResult>("companies/update", data);
+};
+
+export const uploadHeaderImage = async (data: FormData): Promise<ApiVoidResult> => {
+    return ApiRequest.postFile<ApiVoidResult>("companies/upload-header", data);
+};
+
+export const uploadServiceImage = async (data: FormData): Promise<ApiVoidResult> => {
+    return ApiRequest.postFile<ApiVoidResult>("services/upload-image", data);
+};
+
+export const checkOrgAdmin = async (companyId: string, sessionUser: string): Promise<boolean> => {
+    return ApiRequest.post<boolean>("companies/check-admin", { companyId, sessionUser });
+};

txclient/src/app/admin/(client-profile)/org/[oid]/client/[clientId]/appointments/Appointments.Service.ts

@@ -37,7 +37,7 @@ const schemaAppointmentUpdate = Yup.object().shape({
     start: Yup.string().required("Debe seleccionar una fecha."),
     price: Yup.number().positive().required("Debe introducir un precio valido."),
     length: Yup.number().positive().required("Debe introducir una duración."),
-    comments: Yup.string().required("Debe introducir un comentario."),
+    comments: Yup.string().notRequired(),
     sessionUser: Yup.string().required("Para crear un turno debe iniciar sesión."),
 });
 

txclient/src/app/admin/(organization-profile)/org/profile/[id]/cash/movements/page.module.css

@@ -1,5 +1,6 @@
 .movementsPage {
     padding: 16px;
+    padding-top: 200px;
     padding-bottom: 32px;
 }
 

txclient/src/app/admin/(organization-profile)/org/profile/[id]/fiscal/page.tsx

@@ -17,6 +17,7 @@ import ReceiptLongOutlinedIcon from "@mui/icons-material/ReceiptLongOutlined";
 import { Grid2 } from "@mui/material";
 import { ApiError } from "@models/Server.Error.model";
 import style from "./page.module.css";
+import SecureByPlan, { SECURE_CONTENTS } from "@core/app/components/SecureByPlan/SecureByPlan";
 import {
     findArcaActivities,
     findOrganizationFiscalProfiles,
@@ -188,123 +189,125 @@ export default function OrganizationFiscalProfileEdit() {
     return (
         <>
             <Location />
-            <div className={style.pageContainer}>
+            <SecureByPlan content={SECURE_CONTENTS.PAYMENTS} companyId={id}>
-                <section className={style.heroCard}>
+                <div className={style.pageContainer}>
-                    <div className={style.heroIcon}>
+                    <section className={style.heroCard}>
-                        <ReceiptLongOutlinedIcon />
+                        <div className={style.heroIcon}>
-                    </div>
+                            <ReceiptLongOutlinedIcon />
-                    <div>
+                        </div>
-                        <h2>Configuración fiscal</h2>
+                        <div>
-                        <p>
+                            <h2>Configuración fiscal</h2>
-                            Estos datos se usan para emitir Factura C desde los movimientos de caja y para precargar el asistente ARCA.
+                            <p>
-                        </p>
+                                Estos datos se usan para emitir Factura C desde los movimientos de caja y para precargar el asistente ARCA.
-                    </div>
+                            </p>
-                </section>
+                        </div>
+                    </section>
 
-                <section className={style.formSection}>
+                    <section className={style.formSection}>
-                    <h3>Datos del emisor</h3>
+                        <h3>Datos del emisor</h3>
-                    <Grid2 container spacing={2}>
+                        <Grid2 container spacing={2}>
-                    <Grid2 size={{ xs: 12, sm: 6 }}>
+                        <Grid2 size={{ xs: 12, sm: 6 }}>
-                        <Textbox
+                            <Textbox
-                            name="cuit"
+                                name="cuit"
-                            placeholder="CUIT"
+                                placeholder="CUIT"
-                            type="text"
+                                type="text"
-                            value={cuit}
+                                value={cuit}
-                            width="100%"
+                                width="100%"
-                            onChange={(event) => {
+                                onChange={(event) => {
-                                setCuit(event.target.value.replace(/\D/g, ""));
+                                    setCuit(event.target.value.replace(/\D/g, ""));
-                                markNeedsSave();
+                                    markNeedsSave();
-                            }}
+                                }}
-                        />
+                            />
-                    </Grid2>
+                        </Grid2>
-                    <Grid2 size={{ xs: 12, sm: 6 }}>
+                        <Grid2 size={{ xs: 12, sm: 6 }}>
-                        <Textbox
+                            <Textbox
-                            name="legalName"
+                                name="legalName"
-                            placeholder="Razón social"
+                                placeholder="Razón social"
-                            type="text"
+                                type="text"
-                            value={legalName}
+                                value={legalName}
-                            width="100%"
+                                width="100%"
-                            onChange={(event) => {
+                                onChange={(event) => {
-                                setLegalName(event.target.value);
+                                    setLegalName(event.target.value);
-                                markNeedsSave();
+                                    markNeedsSave();
-                            }}
+                                }}
-                        />
+                            />
-                    </Grid2>
+                        </Grid2>
-                    </Grid2>
+                        </Grid2>
-                </section>
+                    </section>
 
-                <section className={style.formSection}>
+                    <section className={style.formSection}>
-                    <div className={style.sectionHeader}>
+                        <div className={style.sectionHeader}>
-                        <h3>Condición fiscal</h3>
+                            <h3>Condición fiscal</h3>
-                        <p>Seleccioná la condición declarada para esta organización.</p>
+                            <p>Seleccioná la condición declarada para esta organización.</p>
-                    </div>
+                        </div>
-                    <div className={style.optionGroup} role="radiogroup" aria-label="Condición fiscal">
+                        <div className={style.optionGroup} role="radiogroup" aria-label="Condición fiscal">
-                        {fiscalConditionOptions.map((option) => {
+                            {fiscalConditionOptions.map((option) => {
-                            const selected = taxCondition === option.id;
+                                const selected = taxCondition === option.id;
 
-                            return (
+                                return (
-                                <button
+                                    <button
-                                    key={option.id}
+                                        key={option.id}
-                                    type="button"
+                                        type="button"
-                                    className={`${style.optionCard} ${selected ? style.optionCardSelected : ""}`}
+                                        className={`${style.optionCard} ${selected ? style.optionCardSelected : ""}`}
-                                    onClick={() => {
+                                        onClick={() => {
-                                        setTaxCondition(option.id);
+                                            setTaxCondition(option.id);
-                                        markNeedsSave();
+                                            markNeedsSave();
-                                    }}
+                                        }}
-                                    aria-pressed={selected}
+                                        aria-pressed={selected}
-                                >
+                                    >
-                                    <span className={style.optionTitle}>{option.title}</span>
+                                        <span className={style.optionTitle}>{option.title}</span>
-                                    <span className={style.optionDescription}>{option.description}</span>
+                                        <span className={style.optionDescription}>{option.description}</span>
-                                </button>
+                                    </button>
-                            );
-                        })}
-                    </div>
-                </section>
-
-                <section className={style.formSection}>
-                    <h3>Facturación ARCA</h3>
-                    <Grid2 container spacing={2}>
-                    <Grid2 size={{ xs: 12, sm: 6 }}>
-                        <Textbox
-                            name="pointOfSale"
-                            placeholder="Punto de venta"
-                            type="text"
-                            value={pointOfSale}
-                            width="100%"
-                            onChange={(event) => {
-                                setPointOfSale(event.target.value.replace(/\D/g, ""));
-                                markNeedsSave();
-                            }}
-                        />
-                    </Grid2>
-                    </Grid2>
-
-                    {fiscalDataLoaded && (
-                        <TextObjectFilter
-                            key={`${activityCode}-${arcaActivities.length}`}
-                            placeholder="Actividad ARCA/CLAE"
-                            content={activityFilterContent}
-                            data={arcaActivities}
-                            selectedId={activityCode}
-                            onChange={(selectedActivityCode) => {
-                                const selectedActivity = arcaActivities.find(
-                                    (activity) => activity.id === selectedActivityCode
                                 );
+                            })}
+                        </div>
+                    </section>
 
-                                setActivityCode(selectedActivity?.id || "");
+                    <section className={style.formSection}>
-                                setActivityDescription(selectedActivity?.name || "");
+                        <h3>Facturación ARCA</h3>
-                                markNeedsSave();
+                        <Grid2 container spacing={2}>
-                            }}
+                        <Grid2 size={{ xs: 12, sm: 6 }}>
-                        />
+                            <Textbox
-                    )}
+                                name="pointOfSale"
+                                placeholder="Punto de venta"
+                                type="text"
+                                value={pointOfSale}
+                                width="100%"
+                                onChange={(event) => {
+                                    setPointOfSale(event.target.value.replace(/\D/g, ""));
+                                    markNeedsSave();
+                                }}
+                            />
+                        </Grid2>
+                        </Grid2>
 
-                    <p className={style.helpText}>
+                        {fiscalDataLoaded && (
-                        {activityCode && activityDescription
+                            <TextObjectFilter
-                            ? `${activityCode} - ${activityDescription}`
+                                key={`${activityCode}-${arcaActivities.length}`}
-                            : "Seleccioná la actividad principal declarada en ARCA."}
+                                placeholder="Actividad ARCA/CLAE"
-                    </p>
+                                content={activityFilterContent}
-                </section>
+                                data={arcaActivities}
-            </div>
+                                selectedId={activityCode}
+                                onChange={(selectedActivityCode) => {
+                                    const selectedActivity = arcaActivities.find(
+                                        (activity) => activity.id === selectedActivityCode
+                                    );
+
+                                    setActivityCode(selectedActivity?.id || "");
+                                    setActivityDescription(selectedActivity?.name || "");
+                                    markNeedsSave();
+                                }}
+                            />
+                        )}
+
+                        <p className={style.helpText}>
+                            {activityCode && activityDescription
+                                ? `${activityCode} - ${activityDescription}`
+                                : "Seleccioná la actividad principal declarada en ARCA."}
+                        </p>
+                    </section>
+                </div>
+            </SecureByPlan>
         </>
     );
 }

txclient/src/app/admin/(organization-profile)/org/profile/[id]/services/page.tsx

@@ -16,6 +16,7 @@ import { getServiceImage } from "@core/helpers/getServiceImage";
 import ServiceRatingSummary from "@components/ServiceRatingSummary/ServiceRatingSummary";
 
 import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import Dialog from "@mui/material/Dialog";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
@@ -118,18 +119,30 @@ export default function Org() {
                 </div>
                 <div className={style.serviceActions}>
                     <span className={style.servicePrice}>{formatPrice(data.price)}</span>
-                    <IconButton 
+                    <div className={style.iconsRow}>
-                        className={style.shareButton}
+                        <IconButton 
-                        sx={{ position: "absolute", top: "15px", right: "15px" }}
+                            onClick={(e) => {
-                        onClick={(e) => {
+                                e.stopPropagation();
-                            e.stopPropagation();
+                                goTo(`/landing/service/${data.id}`);
-                            setShareService(data);
+                            }}
-                        }}
+                            size="small"
-                        size="small"
+                            title="Ver perfil público del servicio"
-                        title="Compartir servicio"
+                            className={style.iconButton}
-                    >
+                        >
-                        <ShareOutlinedIcon fontSize="small" />
+                            <OpenInNewIcon fontSize="small" />
-                    </IconButton>
+                        </IconButton>
+                        <IconButton 
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setShareService(data);
+                            }}
+                            size="small"
+                            title="Compartir servicio"
+                            className={style.iconButton}
+                        >
+                            <ShareOutlinedIcon fontSize="small" />
+                        </IconButton>
+                    </div>
                 </div>
             </div>
         );

txclient/src/app/admin/(organization-profile)/org/profile/[id]/services/service.module.css

@@ -71,26 +71,29 @@
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    justify-content: flex-end; /* changed from space-between */
+    justify-content: center;
-    min-width: 100px;
+    gap: 12px;
+    min-width: 60px;
 }
 
 .servicePrice {
     font-size: 18px;
     font-weight: 800;
     color: #1e293b;
-    margin-bottom: 0; /* removed bottom margin */
 }
 
-.shareButton {
+.iconsRow {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.iconButton {
     color: #94a3b8;
     transition: color 0.2s ease;
-    position: absolute;
-    top: 15px;
-    right: 15px;
 }
 
-.shareButton:hover {
+.iconButton:hover {
     color: var(--wine-dark);
 }
 

txclient/src/app/admin/assistant/components/StepEngine/StepEngine.tsx

@@ -206,6 +206,7 @@ export default function StepEngine({ flowId, action, initialCompanyId, initialEm
     const [wapError, setWapError] = useState<string | null>(null);
 
     // State for ARCA onboarding flow
+    const [arcaIsBlocked, setArcaIsBlocked] = useState(false);
     const [arcaCuit, setArcaCuit] = useState("");
     const [arcaLegalName, setArcaLegalName] = useState("");
     const [arcaTaxCondition, setArcaTaxCondition] = useState<"MONOTRIBUTO" | "EXENTO">("MONOTRIBUTO");
@@ -277,6 +278,7 @@ export default function StepEngine({ flowId, action, initialCompanyId, initialEm
     };
 
     const loadOrganizationContext = (org: any) => {
+        setArcaIsBlocked(false);
         setCreatedCompanyId(org.id || org._id);
         setSelectedOrganization(org);
         setOrgName(org.name || "");
@@ -499,6 +501,18 @@ export default function StepEngine({ flowId, action, initialCompanyId, initialEm
             setWapQr(null);
             setWapError(null);
         } else if (flowId === "arca-onboarding") {
+            const orgSub = SessionInfo.organizationSubscriptions[org.id || org._id];
+            const planSupportsPayments = orgSub ? orgSub.plan?.payments : false;
+
+            if (!planSupportsPayments) {
+                setArcaIsBlocked(true);
+                setCurrentStepIndex(0);
+                setArcaError(null);
+                setArcaLoading(false);
+                return;
+            }
+
+            setArcaIsBlocked(false);
             setCurrentStepIndex(0);
             setArcaError(null);
             setArcaLoading(false);
@@ -527,6 +541,19 @@ export default function StepEngine({ flowId, action, initialCompanyId, initialEm
                 setArcaStatusLabel(getArcaStatusLabel(credential.status));
             }).catch(console.error);
         } else if (flowId === "arca-test-connection") {
+            const orgSub = SessionInfo.organizationSubscriptions[org.id || org._id];
+            const planSupportsPayments = orgSub ? orgSub.plan?.payments : false;
+
+            if (!planSupportsPayments) {
+                setArcaIsBlocked(true);
+                setCurrentStepIndex(0);
+                setArcaError(null);
+                setArcaLoading(false);
+                setArcaTestResult(null);
+                return;
+            }
+
+            setArcaIsBlocked(false);
             setCurrentStepIndex(0);
             setArcaError(null);
             setArcaLoading(false);
@@ -2415,8 +2442,42 @@ export default function StepEngine({ flowId, action, initialCompanyId, initialEm
         if (flowId === "public-link") return renderPublicLinkFlow();
         if (flowId === "notifications") return renderNotificationsFlow();
         if (flowId === "whatsapp-bot") return renderWhatsAppBotFlow();
-        if (flowId === "arca-onboarding") return renderArcaOnboardingFlow();
+        if (flowId === "arca-onboarding") {
-        if (flowId === "arca-test-connection") return renderArcaTestConnectionFlow();
+            if (arcaIsBlocked) {
+                return (
+                    <QuestionCard
+                        isActive
+                        title="Módulo ARCA no disponible"
+                        description="Este flujo requiere un plan con el módulo de pagos habilitado para emitir Factura C."
+                        onNext={() => router.push("/landing/pricing")}
+                        nextLabel="Ver planes"
+                    >
+                        <div style={{ color: "rgba(255,255,255,0.75)", textAlign: "center", lineHeight: 1.6 }}>
+                            La organización seleccionada necesita un plan con el módulo de pagos activo para usar ARCA. Actualizá tu plan o volvé al asistente y elegí otra opción.
+                        </div>
+                    </QuestionCard>
+                );
+            }
+            return renderArcaOnboardingFlow();
+        }
+        if (flowId === "arca-test-connection") {
+            if (arcaIsBlocked) {
+                return (
+                    <QuestionCard
+                        isActive
+                        title="Test de conexión ARCA no disponible"
+                        description="Este flujo requiere un plan con el módulo de pagos habilitado para probar la conexión con ARCA."
+                        onNext={() => router.push("/landing/pricing")}
+                        nextLabel="Ver planes"
+                    >
+                        <div style={{ color: "rgba(255,255,255,0.75)", textAlign: "center", lineHeight: 1.6 }}>
+                            La organización seleccionada necesita un plan con el módulo de pagos activo para usar ARCA. Actualizá tu plan o volvé al asistente y elegí otra opción.
+                        </div>
+                    </QuestionCard>
+                );
+            }
+            return renderArcaTestConnectionFlow();
+        }
         if (flowId === "disable-schedule") return renderDisableScheduleFlow();
         if (flowId === "open-reservation-periods") return renderReservationPeriodFlow();
         if (flowId === "override-schedule") return renderOverrideScheduleFlow();

txclient/src/app/admin/assistant/components/StepEngine/flows/OnboardingServiceFlow.tsx

@@ -39,13 +39,47 @@ type OnboardingServiceFlowProps = {
 };
 
 export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps) {
-    const { heatMapFraction, currentStepIndex, handleNext, serviceName, setServiceName, serviceDescription, setServiceDescription, handleKeyDown, serviceLength, setServiceLength, handleCreateService, isCreating, servicePrice, setServicePrice, serviceLimit, setServiceLimit, serviceCreateError, handleUploadServiceImage, serviceImage, setServiceImage, isStandaloneNewService, handleAssignCreatedServiceToMe, handleShowCollaboratorAssignment, handleToggleServiceCollaborator, handleAssignCreatedServiceToCollaborators, handleFinishWithoutAssignment, serviceAssignmentError, serviceAssignmentWarning, serviceAssignmentMode, serviceAssignmentCollaborators, selectedServiceCollaboratorIds, isLoadingServiceCollaborators } = props;
+    const {
+        heatMapFraction,
+        currentStepIndex,
+        handleNext,
+        serviceName,
+        setServiceName,
+        serviceDescription,
+        setServiceDescription,
+        handleKeyDown,
+        serviceLength,
+        setServiceLength,
+        handleCreateService,
+        isCreating,
+        servicePrice,
+        setServicePrice,
+        serviceLimit,
+        setServiceLimit,
+        serviceCreateError,
+        handleUploadServiceImage,
+        serviceImage,
+        setServiceImage,
+        isStandaloneNewService,
+        handleAssignCreatedServiceToMe,
+        handleShowCollaboratorAssignment,
+        handleToggleServiceCollaborator,
+        handleAssignCreatedServiceToCollaborators,
+        handleFinishWithoutAssignment,
+        serviceAssignmentError,
+        serviceAssignmentWarning,
+        serviceAssignmentMode,
+        serviceAssignmentCollaborators,
+        selectedServiceCollaboratorIds,
+        isLoadingServiceCollaborators,
+    } = props;
     const [isCustomDuration, setIsCustomDuration] = React.useState(false);
     const [customDurationValue, setCustomDurationValue] = React.useState("");
     const fraction = heatMapFraction || 60;
     const durationOptions = [fraction, fraction * 2, fraction * 3, fraction * 4];
     const customDurationMinutes = Number(customDurationValue);
-    const isValidCustomDuration = Number.isInteger(customDurationMinutes) && customDurationMinutes > 0;
+    const isValidCustomDuration =
+        Number.isInteger(customDurationMinutes) && customDurationMinutes > 0;
 
     const selectDurationOption = (duration: number) => {
         setIsCustomDuration(false);
@@ -65,390 +99,518 @@ export default function OnboardingServiceFlow(props: OnboardingServiceFlowProps)
     };
 
     return (
-            <>
+        <>
-                <QuestionCard 
+            <QuestionCard
-                    isActive={currentStepIndex === 0}
+                isActive={currentStepIndex === 0}
-                    title="Configura tus Servicios"
+                title="Configura tus Servicios"
-                    description="Ya creaste tu negocio. Ahora necesitas configurar al menos un servicio para que tus clientes puedan empezar a reservar."
+                description="Ya creaste tu negocio. Ahora necesitas configurar al menos un servicio para que tus clientes puedan empezar a reservar."
-                    onNext={handleNext}
+                onNext={handleNext}
-                    nextLabel="Comenzar"
+                nextLabel="Comenzar"
+            >
+                <div
+                    style={{
+                        color: "rgba(255, 255, 255, 0.7)",
+                        textAlign: "center",
+                        padding: "10px",
+                    }}
                 >
-                    <div style={{ color: "rgba(255, 255, 255, 0.7)", textAlign: "center", padding: "10px" }}>
+                    Vamos a crear el primer servicio de tu negocio. ¡Es muy fácil!
-                        Vamos a crear el primer servicio de tu negocio. ¡Es muy fácil!
+                </div>
-                    </div>
+            </QuestionCard>
-                </QuestionCard>
 
-                <QuestionCard 
+            <QuestionCard
-                    isActive={currentStepIndex === 1}
+                isActive={currentStepIndex === 1}
-                    title="1. Nombre y Descripción"
+                title="1. Nombre y Descripción"
-                    description="Elige un nombre atractivo y describe de qué trata el servicio."
+                description="Elige un nombre atractivo y describe de qué trata el servicio."
-                    onNext={handleNext}
+                onNext={handleNext}
-                    disableNext={serviceName.trim().length < 3 || serviceDescription.trim().length < 5}
+                disableNext={serviceName.trim().length < 3 || serviceDescription.trim().length < 5}
+            >
+                <div
+                    style={{ display: "flex", flexDirection: "column", gap: "15px", width: "100%" }}
                 >
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '15px', width: '100%' }}>
+                    <QuestionInput
+                        placeholder="Ej. Corte clásico con lavado"
+                        value={serviceName}
+                        onChange={(e) => setServiceName(e.target.value)}
+                        autoFocus
+                    />
+                    <QuestionInput
+                        placeholder="Breve descripción del servicio..."
+                        value={serviceDescription}
+                        onChange={(e) => setServiceDescription(e.target.value)}
+                        onKeyDown={(e) => {
+                            if (
+                                serviceName.trim().length >= 3 &&
+                                serviceDescription.trim().length >= 5
+                            ) {
+                                handleKeyDown(e, handleNext);
+                            }
+                        }}
+                    />
+                </div>
+            </QuestionCard>
+
+            <QuestionCard
+                isActive={currentStepIndex === 2}
+                title="2. Duración del Servicio"
+                description={`Elige cuánto tiempo tomará. Las opciones están basadas en tu fracción de agenda (${fraction} min).`}
+                onNext={handleNext}
+                disableNext={!serviceLength || (isCustomDuration && !isValidCustomDuration)}
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        gap: "10px",
+                        flexWrap: "wrap",
+                        width: "100%",
+                        justifyContent: "center",
+                    }}
+                >
+                    {durationOptions.map((val) => {
+                        const hours = Math.floor(val / 60);
+                        const minutes = val % 60;
+                        const label =
+                            hours > 0
+                                ? `${hours}h ${minutes > 0 ? minutes + "m" : ""}`.trim()
+                                : `${minutes} min`;
+
+                        return (
+                            <div
+                                key={val}
+                                onClick={() => selectDurationOption(val)}
+                                style={{
+                                    padding: "12px 24px",
+                                    borderRadius: "12px",
+                                    cursor: "pointer",
+                                    background:
+                                        !isCustomDuration && serviceLength === val
+                                            ? "var(--wine-red)"
+                                            : "rgba(255,255,255,0.05)",
+                                    border: `2px solid ${!isCustomDuration && serviceLength === val ? "var(--wine-red)" : "rgba(255,255,255,0.1)"}`,
+                                    color: "white",
+                                    fontWeight:
+                                        !isCustomDuration && serviceLength === val
+                                            ? "bold"
+                                            : "normal",
+                                    transition: "all 0.2s ease",
+                                    fontSize: "16px",
+                                }}
+                            >
+                                {label}
+                            </div>
+                        );
+                    })}
+                    <div
+                        onClick={selectCustomDuration}
+                        style={{
+                            padding: "12px 24px",
+                            borderRadius: "12px",
+                            cursor: "pointer",
+                            background: isCustomDuration
+                                ? "var(--wine-red)"
+                                : "rgba(255,255,255,0.05)",
+                            border: `2px solid ${isCustomDuration ? "var(--wine-red)" : "rgba(255,255,255,0.1)"}`,
+                            color: "white",
+                            fontWeight: isCustomDuration ? "bold" : "normal",
+                            transition: "all 0.2s ease",
+                            fontSize: "16px",
+                        }}
+                    >
+                        Otro
+                    </div>
+                </div>
+                {isCustomDuration && (
+                    <div style={{ width: "100%", marginTop: "16px" }}>
                         <QuestionInput
-                            placeholder="Ej. Corte clásico con lavado"
+                            type="number"
-                            value={serviceName}
+                            min="1"
-                            onChange={(e) => setServiceName(e.target.value)}
+                            step="1"
-                            autoFocus
+                            placeholder="Duración en minutos"
-                        />
+                            value={customDurationValue}
-                        <QuestionInput 
+                            onChange={(e) => updateCustomDuration(e.target.value)}
-                            placeholder="Breve descripción del servicio..."
-                            value={serviceDescription}
-                            onChange={(e) => setServiceDescription(e.target.value)}
                             onKeyDown={(e) => {
-                                if (serviceName.trim().length >= 3 && serviceDescription.trim().length >= 5) {
+                                if (isValidCustomDuration) {
                                     handleKeyDown(e, handleNext);
                                 }
                             }}
+                            autoFocus
                         />
-                    </div>
-                </QuestionCard>
-
-                <QuestionCard 
-                    isActive={currentStepIndex === 2}
-                    title="2. Duración del Servicio"
-                    description={`Elige cuánto tiempo tomará. Las opciones están basadas en tu fracción de agenda (${fraction} min).`}
-                    onNext={handleNext}
-                    disableNext={!serviceLength || (isCustomDuration && !isValidCustomDuration)}
-                >
-                    <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', width: '100%', justifyContent: 'center' }}>
-                        {durationOptions.map(val => {
-                            const hours = Math.floor(val / 60);
-                            const minutes = val % 60;
-                            const label = hours > 0 
-                                ? `${hours}h ${minutes > 0 ? minutes + 'm' : ''}`.trim()
-                                : `${minutes} min`;
-
-                            return (
-                                <div 
-                                    key={val}
-                                    onClick={() => selectDurationOption(val)}
-                                    style={{ 
-                                        padding: '12px 24px', 
-                                        borderRadius: '12px', 
-                                        cursor: 'pointer',
-                                        background: !isCustomDuration && serviceLength === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
-                                        border: `2px solid ${!isCustomDuration && serviceLength === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)'}`,
-                                        color: 'white',
-                                        fontWeight: !isCustomDuration && serviceLength === val ? 'bold' : 'normal',
-                                        transition: 'all 0.2s ease',
-                                        fontSize: '16px'
-                                    }}
-                                >
-                                    {label}
-                                </div>
-                            );
-                        })}
                         <div
-                            onClick={selectCustomDuration}
                             style={{
-                                padding: '12px 24px', 
+                                color: "rgba(255,255,255,0.6)",
-                                borderRadius: '12px', 
+                                fontSize: "13px",
-                                cursor: 'pointer',
+                                marginTop: "8px",
-                                background: isCustomDuration ? 'var(--wine-red)' : 'rgba(255,255,255,0.05)',
+                                textAlign: "center",
-                                border: `2px solid ${isCustomDuration ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)'}`,
-                                color: 'white',
-                                fontWeight: isCustomDuration ? 'bold' : 'normal',
-                                transition: 'all 0.2s ease',
-                                fontSize: '16px'
                             }}
                         >
-                            Otro
+                            Ingresá la duración total del servicio expresada en minutos.
                         </div>
                     </div>
-                    {isCustomDuration && (
+                )}
-                        <div style={{ width: '100%', marginTop: '16px' }}>
+            </QuestionCard>
-                            <QuestionInput
+
-                                type="number"
+            <QuestionCard
-                                min="1"
+                isActive={currentStepIndex === 3}
-                                step="1"
+                title="3. Precio y Cupos"
-                                placeholder="Duración en minutos"
+                description="¿Cuánto cuesta y a cuántas personas puede atender cada profesional a la vez en este servicio?"
-                                value={customDurationValue}
+                onNext={handleCreateService}
-                                onChange={(e) => updateCustomDuration(e.target.value)}
+                disableNext={isCreating}
-                                onKeyDown={(e) => {
+                nextLabel={isCreating ? "Guardando..." : "Crear Servicio"}
-                                    if (isValidCustomDuration) {
+            >
-                                        handleKeyDown(e, handleNext);
+                <div
-                                    }
+                    style={{ display: "flex", flexDirection: "column", gap: "20px", width: "100%" }}
+                >
+                    <div>
+                        <div style={{ color: "white", marginBottom: "10px", fontSize: "14px" }}>
+                            Precio Original
+                        </div>
+                        <div style={{ position: "relative" }}>
+                            <span
+                                style={{
+                                    position: "absolute",
+                                    left: "15px",
+                                    top: "50%",
+                                    transform: "translateY(-50%)",
+                                    color: "white",
+                                    fontSize: "18px",
+                                }}
+                            >
+                                $
+                            </span>
+                            <input
+                                type="text"
+                                inputMode="decimal"
+                                placeholder="0.00"
+                                value={servicePrice}
+                                onChange={(e) => setServicePrice(e.target.value)}
+                                style={{
+                                    width: "100%",
+                                    padding: "15px 15px 15px 35px",
+                                    borderRadius: "12px",
+                                    border: "1px solid rgba(255,255,255,0.2)",
+                                    background: "rgba(255,255,255,0.05)",
+                                    color: "white",
+                                    fontSize: "18px",
+                                    outline: "none",
                                 }}
-                                autoFocus
                             />
-                            <div style={{ color: 'rgba(255,255,255,0.6)', fontSize: '13px', marginTop: '8px', textAlign: 'center' }}>
+                        </div>
-                                Ingresá la duración total del servicio expresada en minutos.
+                    </div>
-                            </div>
+
+                    <div>
+                        <div style={{ color: "white", marginBottom: "10px", fontSize: "14px" }}>
+                            Cupos Simultáneos (Por defecto 1)
+                        </div>
+                        <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+                            {[1, 2, 3, 5, 10].map((val) => (
+                                <div
+                                    key={val}
+                                    onClick={() => setServiceLimit(val)}
+                                    style={{
+                                        padding: "8px 16px",
+                                        borderRadius: "8px",
+                                        cursor: "pointer",
+                                        background:
+                                            serviceLimit === val
+                                                ? "var(--wine-red)"
+                                                : "rgba(255,255,255,0.1)",
+                                        border: `1px solid ${serviceLimit === val ? "var(--wine-red)" : "rgba(255,255,255,0.2)"}`,
+                                        color: "white",
+                                        fontWeight: serviceLimit === val ? "bold" : "normal",
+                                        transition: "all 0.2s ease",
+                                    }}
+                                >
+                                    {val}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    {serviceCreateError && (
+                        <div
+                            style={{
+                                padding: "14px 16px",
+                                borderRadius: "12px",
+                                background: "rgba(255, 99, 132, 0.12)",
+                                border: "1px solid rgba(255, 99, 132, 0.35)",
+                                color: "#fecdd3",
+                                fontSize: "14px",
+                                lineHeight: 1.5,
+                                textAlign: "center",
+                            }}
+                        >
+                            {serviceCreateError}
                         </div>
                     )}
-                </QuestionCard>
+                </div>
+            </QuestionCard>
 
-                <QuestionCard 
+            <QuestionCard
-                    isActive={currentStepIndex === 3}
+                isActive={currentStepIndex === 4}
-                    title="3. Precio y Cupos"
+                title="4. Imagen del Servicio"
-                    description="¿Cuánto cuesta y a cuántas personas puedes atender a la vez en este servicio?"
+                description="Sube una foto representativa para que los clientes sepan qué ofreces. (Opcional)"
-                    onNext={handleCreateService}
+                onNext={handleUploadServiceImage}
-                    disableNext={isCreating}
+                disableNext={isCreating}
-                    nextLabel={isCreating ? "Guardando..." : "Crear Servicio"}
+                nextLabel={
+                    isCreating
+                        ? "Subiendo..."
+                        : serviceImage
+                          ? isStandaloneNewService
+                              ? "Subir y continuar"
+                              : "Subir y Finalizar"
+                          : "Omitir por ahora"
+                }
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "20px",
+                        width: "100%",
+                        alignItems: "center",
+                    }}
                 >
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: '100%' }}>
+                    <div
-                        <div>
+                        style={{
-                            <div style={{ color: 'white', marginBottom: '10px', fontSize: '14px' }}>Precio Original</div>
+                            width: "100%",
-                            <div style={{ position: 'relative' }}>
+                            height: "150px",
-                                <span style={{ position: 'absolute', left: '15px', top: '50%', transform: 'translateY(-50%)', color: 'white', fontSize: '18px' }}>$</span>
+                            border: "2px dashed rgba(255,255,255,0.3)",
-                                <input 
+                            borderRadius: "12px",
-                                    type="text"
+                            display: "flex",
-                                    inputMode="decimal"
+                            alignItems: "center",
-                                    placeholder="0.00"
+                            justifyContent: "center",
-                                    value={servicePrice}
+                            position: "relative",
-                                    onChange={(e) => setServicePrice(e.target.value)}
+                            overflow: "hidden",
-                                    style={{
+                            cursor: "pointer",
-                                        width: '100%',
+                            background: serviceImage ? "transparent" : "rgba(255,255,255,0.05)",
-                                        padding: '15px 15px 15px 35px',
+                        }}
-                                        borderRadius: '12px',
-                                        border: '1px solid rgba(255,255,255,0.2)',
-                                        background: 'rgba(255,255,255,0.05)',
-                                        color: 'white',
-                                        fontSize: '18px',
-                                        outline: 'none'
-                                    }}
-                                />
-                            </div>
-                        </div>
-
-                        <div>
-                            <div style={{ color: 'white', marginBottom: '10px', fontSize: '14px' }}>Cupos Simultáneos (Por defecto 1)</div>
-                            <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-                                {[1, 2, 3, 5, 10].map(val => (
-                                    <div 
-                                        key={val}
-                                        onClick={() => setServiceLimit(val)}
-                                        style={{ 
-                                            padding: '8px 16px', 
-                                            borderRadius: '8px', 
-                                            cursor: 'pointer',
-                                            background: serviceLimit === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.1)',
-                                            border: `1px solid ${serviceLimit === val ? 'var(--wine-red)' : 'rgba(255,255,255,0.2)'}`,
-                                            color: 'white',
-                                            fontWeight: serviceLimit === val ? 'bold' : 'normal',
-                                            transition: 'all 0.2s ease'
-                                        }}
-                                    >
-                                        {val}
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                        {serviceCreateError && (
-                            <div style={{
-                                padding: '14px 16px',
-                                borderRadius: '12px',
-                                background: 'rgba(255, 99, 132, 0.12)',
-                                border: '1px solid rgba(255, 99, 132, 0.35)',
-                                color: '#fecdd3',
-                                fontSize: '14px',
-                                lineHeight: 1.5,
-                                textAlign: 'center'
-                            }}>
-                                {serviceCreateError}
-                            </div>
-                        )}
-                    </div>
-                </QuestionCard>
-
-                <QuestionCard 
-                    isActive={currentStepIndex === 4}
-                    title="4. Imagen del Servicio"
-                    description="Sube una foto representativa para que los clientes sepan qué ofreces. (Opcional)"
-                    onNext={handleUploadServiceImage}
-                    disableNext={isCreating}
-                    nextLabel={isCreating ? "Subiendo..." : (serviceImage ? (isStandaloneNewService ? "Subir y continuar" : "Subir y Finalizar") : "Omitir por ahora")}
-                >
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: '100%', alignItems: 'center' }}>
-                        <div style={{
-                            width: '100%',
-                            height: '150px',
-                            border: '2px dashed rgba(255,255,255,0.3)',
-                            borderRadius: '12px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            position: 'relative',
-                            overflow: 'hidden',
-                            cursor: 'pointer',
-                            background: serviceImage ? 'transparent' : 'rgba(255,255,255,0.05)'
-                        }}>
-                            {serviceImage ? (
-                                <img 
-                                    src={URL.createObjectURL(serviceImage)} 
-                                    alt="Preview" 
-                                    style={{ width: '100%', height: '100%', objectFit: 'cover' }} 
-                                />
-                            ) : (
-                                <span style={{ color: 'rgba(255,255,255,0.6)' }}>Toca para seleccionar imagen</span>
-                            )}
-                            <input 
-                                type="file" 
-                                accept="image/*" 
-                                onChange={(e) => {
-                                    if (e.target.files && e.target.files.length > 0) {
-                                        setServiceImage(e.target.files[0]);
-                                    }
-                                }}
-                                style={{
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    width: '100%',
-                                    height: '100%',
-                                    opacity: 0,
-                                    cursor: 'pointer'
-                                }}
-                            />
-                        </div>
-                        {serviceCreateError && (
-                            <div style={{
-                                padding: '14px 16px',
-                                borderRadius: '12px',
-                                background: 'rgba(255, 99, 132, 0.12)',
-                                border: '1px solid rgba(255, 99, 132, 0.35)',
-                                color: '#fecdd3',
-                                fontSize: '14px',
-                                lineHeight: 1.5,
-                                textAlign: 'center'
-                            }}>
-                                {serviceCreateError}
-                            </div>
-                        )}
-                    </div>
-                </QuestionCard>
-
-                {isStandaloneNewService && (
-                    <QuestionCard
-                        isActive={currentStepIndex === 5}
-                        title="¿Quién brinda este servicio?"
-                        description="Asigná este servicio a un colaborador para que pueda recibir reservas. Si todavía no querés hacerlo, podés configurarlo después."
                     >
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', width: '100%' }}>
+                        {serviceImage ? (
-	                            <button
+                            <img
-	                                type="button"
+                                src={URL.createObjectURL(serviceImage)}
-	                                onClick={handleAssignCreatedServiceToMe}
+                                alt="Preview"
-                                disabled={isCreating}
+                                style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                            />
+                        ) : (
+                            <span style={{ color: "rgba(255,255,255,0.6)" }}>
+                                Toca para seleccionar imagen
+                            </span>
+                        )}
+                        <input
+                            type="file"
+                            accept="image/*"
+                            onChange={(e) => {
+                                if (e.target.files && e.target.files.length > 0) {
+                                    setServiceImage(e.target.files[0]);
+                                }
+                            }}
+                            style={{
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                                height: "100%",
+                                opacity: 0,
+                                cursor: "pointer",
+                            }}
+                        />
+                    </div>
+                    {serviceCreateError && (
+                        <div
+                            style={{
+                                padding: "14px 16px",
+                                borderRadius: "12px",
+                                background: "rgba(255, 99, 132, 0.12)",
+                                border: "1px solid rgba(255, 99, 132, 0.35)",
+                                color: "#fecdd3",
+                                fontSize: "14px",
+                                lineHeight: 1.5,
+                                textAlign: "center",
+                            }}
+                        >
+                            {serviceCreateError}
+                        </div>
+                    )}
+                </div>
+            </QuestionCard>
+
+            {isStandaloneNewService && (
+                <QuestionCard
+                    isActive={currentStepIndex === 5}
+                    title="¿Quién brinda este servicio?"
+                    description="Asigná este servicio a un colaborador para que pueda recibir reservas. Si todavía no querés hacerlo, podés configurarlo después."
+                >
+                    <div
+                        style={{
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "14px",
+                            width: "100%",
+                        }}
+                    >
+                        <button
+                            type="button"
+                            onClick={handleAssignCreatedServiceToMe}
+                            disabled={isCreating}
+                            style={{
+                                padding: "14px 18px",
+                                borderRadius: "12px",
+                                border: "1px solid var(--wine-red)",
+                                background: "var(--wine-red)",
+                                color: "white",
+                                fontSize: "16px",
+                                fontWeight: "bold",
+                                cursor: isCreating ? "not-allowed" : "pointer",
+                                opacity: isCreating ? 0.7 : 1,
+                            }}
+                        >
+                            {isCreating ? "Asignando..." : "Yo"}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={handleShowCollaboratorAssignment}
+                            disabled={isCreating || isLoadingServiceCollaborators}
+                            style={{
+                                padding: "14px 18px",
+                                borderRadius: "12px",
+                                border:
+                                    serviceAssignmentMode === "collaborators"
+                                        ? "1px solid var(--wine-red)"
+                                        : "1px solid rgba(255,255,255,0.2)",
+                                background:
+                                    serviceAssignmentMode === "collaborators"
+                                        ? "rgba(128, 0, 64, 0.35)"
+                                        : "rgba(255,255,255,0.05)",
+                                color: "white",
+                                fontSize: "16px",
+                                cursor:
+                                    isCreating || isLoadingServiceCollaborators
+                                        ? "not-allowed"
+                                        : "pointer",
+                                opacity: isCreating || isLoadingServiceCollaborators ? 0.7 : 1,
+                            }}
+                        >
+                            {isLoadingServiceCollaborators
+                                ? "Cargando colaboradores..."
+                                : "Uno o más colaboradores"}
+                        </button>
+                        {serviceAssignmentMode === "collaborators" && (
+                            <div
                                 style={{
-                                    padding: '14px 18px',
+                                    display: "flex",
-                                    borderRadius: '12px',
+                                    flexDirection: "column",
-                                    border: '1px solid var(--wine-red)',
+                                    gap: "10px",
-                                    background: 'var(--wine-red)',
+                                    width: "100%",
-                                    color: 'white',
-                                    fontSize: '16px',
-                                    fontWeight: 'bold',
-                                    cursor: isCreating ? 'not-allowed' : 'pointer',
-                                    opacity: isCreating ? 0.7 : 1
                                 }}
-	                            >
+                            >
-	                                {isCreating ? "Asignando..." : "Yo"}
+                                {serviceAssignmentCollaborators.length === 0 &&
-	                            </button>
+                                    !isLoadingServiceCollaborators && (
-	                            <button
+                                        <div
-	                                type="button"
+                                            style={{
-	                                onClick={handleShowCollaboratorAssignment}
+                                                color: "rgba(255,255,255,0.7)",
-	                                disabled={isCreating || isLoadingServiceCollaborators}
+                                                fontSize: "14px",
-	                                style={{
+                                                textAlign: "center",
-	                                    padding: '14px 18px',
+                                            }}
-	                                    borderRadius: '12px',
+                                        >
-	                                    border: serviceAssignmentMode === "collaborators" ? '1px solid var(--wine-red)' : '1px solid rgba(255,255,255,0.2)',
+                                            No encontramos colaboradores activos para esta
-	                                    background: serviceAssignmentMode === "collaborators" ? 'rgba(128, 0, 64, 0.35)' : 'rgba(255,255,255,0.05)',
+                                            organización.
-	                                    color: 'white',
+                                        </div>
-	                                    fontSize: '16px',
+                                    )}
-	                                    cursor: isCreating || isLoadingServiceCollaborators ? 'not-allowed' : 'pointer',
+                                <CollaboratorPicker
-	                                    opacity: isCreating || isLoadingServiceCollaborators ? 0.7 : 1
+                                    employees={serviceAssignmentCollaborators}
-	                                }}
+                                    selectedIds={selectedServiceCollaboratorIds}
-	                            >
+                                    multiple
-	                                {isLoadingServiceCollaborators ? "Cargando colaboradores..." : "Uno o más colaboradores"}
+                                    disabled={isCreating}
-	                            </button>
+                                    onToggle={handleToggleServiceCollaborator}
-	                            {serviceAssignmentMode === "collaborators" && (
+                                />
-	                                <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100%' }}>
+                                {serviceAssignmentCollaborators.length > 0 && (
-	                                    {serviceAssignmentCollaborators.length === 0 && !isLoadingServiceCollaborators && (
-	                                        <div style={{ color: 'rgba(255,255,255,0.7)', fontSize: '14px', textAlign: 'center' }}>
-	                                            No encontramos colaboradores activos para esta organización.
-	                                        </div>
-	                                    )}
-	                                    <CollaboratorPicker
-	                                        employees={serviceAssignmentCollaborators}
-	                                        selectedIds={selectedServiceCollaboratorIds}
-	                                        multiple
-	                                        disabled={isCreating}
-	                                        onToggle={handleToggleServiceCollaborator}
-	                                    />
-	                                    {serviceAssignmentCollaborators.length > 0 && (
-	                                        <button
-	                                            type="button"
-	                                            onClick={handleAssignCreatedServiceToCollaborators}
-	                                            disabled={isCreating || selectedServiceCollaboratorIds.length === 0}
-	                                            style={{
-	                                                padding: '14px 18px',
-	                                                borderRadius: '12px',
-	                                                border: '1px solid var(--wine-red)',
-	                                                background: 'var(--wine-red)',
-	                                                color: 'white',
-	                                                fontSize: '16px',
-	                                                fontWeight: 'bold',
-	                                                cursor: isCreating || selectedServiceCollaboratorIds.length === 0 ? 'not-allowed' : 'pointer',
-	                                                opacity: isCreating || selectedServiceCollaboratorIds.length === 0 ? 0.7 : 1
-	                                            }}
-	                                        >
-	                                            {isCreating ? "Asignando..." : "Asignar servicio"}
-	                                        </button>
-	                                    )}
-	                                </div>
-	                            )}
-                            {!serviceAssignmentWarning && (
-                                <>
                                     <button
                                         type="button"
-                                        onClick={handleFinishWithoutAssignment}
+                                        onClick={handleAssignCreatedServiceToCollaborators}
-                                        disabled={isCreating}
+                                        disabled={
+                                            isCreating ||
+                                            selectedServiceCollaboratorIds.length === 0
+                                        }
                                         style={{
-                                            padding: '14px 18px',
+                                            padding: "14px 18px",
-                                            borderRadius: '12px',
+                                            borderRadius: "12px",
-                                            border: '1px solid rgba(255,255,255,0.2)',
+                                            border: "1px solid var(--wine-red)",
-                                            background: 'rgba(255,255,255,0.05)',
+                                            background: "var(--wine-red)",
-                                            color: 'white',
+                                            color: "white",
-                                            fontSize: '16px',
+                                            fontSize: "16px",
-                                            cursor: isCreating ? 'not-allowed' : 'pointer',
+                                            fontWeight: "bold",
-                                            opacity: isCreating ? 0.7 : 1
+                                            cursor:
+                                                isCreating ||
+                                                selectedServiceCollaboratorIds.length === 0
+                                                    ? "not-allowed"
+                                                    : "pointer",
+                                            opacity:
+                                                isCreating ||
+                                                selectedServiceCollaboratorIds.length === 0
+                                                    ? 0.7
+                                                    : 1,
                                         }}
                                     >
-                                        Lo configuro después
+                                        {isCreating ? "Asignando..." : "Asignar servicio"}
                                     </button>
-                                    <div style={{
+                                )}
-                                        padding: '12px 14px',
+                            </div>
-                                        borderRadius: '12px',
+                        )}
-                                        background: 'rgba(245, 158, 11, 0.12)',
+                        {!serviceAssignmentWarning && (
-                                        border: '1px solid rgba(245, 158, 11, 0.35)',
+                            <>
-                                        color: '#fde68a',
+                                <button
-                                        fontSize: '14px',
+                                    type="button"
+                                    onClick={handleFinishWithoutAssignment}
+                                    disabled={isCreating}
+                                    style={{
+                                        padding: "14px 18px",
+                                        borderRadius: "12px",
+                                        border: "1px solid rgba(255,255,255,0.2)",
+                                        background: "rgba(255,255,255,0.05)",
+                                        color: "white",
+                                        fontSize: "16px",
+                                        cursor: isCreating ? "not-allowed" : "pointer",
+                                        opacity: isCreating ? 0.7 : 1,
+                                    }}
+                                >
+                                    Lo configuro después
+                                </button>
+                                <div
+                                    style={{
+                                        padding: "12px 14px",
+                                        borderRadius: "12px",
+                                        background: "rgba(245, 158, 11, 0.12)",
+                                        border: "1px solid rgba(245, 158, 11, 0.35)",
+                                        color: "#fde68a",
+                                        fontSize: "14px",
                                         lineHeight: 1.5,
-                                        textAlign: 'center'
+                                        textAlign: "center",
-                                    }}>
+                                    }}
-                                        Si lo configurás después, el servicio no va a estar disponible para reservas hasta que lo asignes a un colaborador con horarios cargados.
+                                >
-                                    </div>
+                                    Si lo configurás después, el servicio no va a estar disponible
-                                </>
+                                    para reservas hasta que lo asignes a un colaborador con horarios
-                            )}
+                                    cargados.
-                            {serviceAssignmentError && (
+                                </div>
-                                <div style={{
+                            </>
-                                    padding: '12px 14px',
+                        )}
-                                    borderRadius: '12px',
+                        {serviceAssignmentError && (
-                                    background: 'rgba(255, 99, 132, 0.12)',
+                            <div
-                                    border: '1px solid rgba(255, 99, 132, 0.35)',
+                                style={{
-                                    color: '#fecdd3',
+                                    padding: "12px 14px",
-                                    fontSize: '14px',
+                                    borderRadius: "12px",
+                                    background: "rgba(255, 99, 132, 0.12)",
+                                    border: "1px solid rgba(255, 99, 132, 0.35)",
+                                    color: "#fecdd3",
+                                    fontSize: "14px",
                                     lineHeight: 1.5,
-                                    textAlign: 'center'
+                                    textAlign: "center",
-                                }}>
+                                }}
-	                                    {serviceAssignmentError}
+                            >
-	                                </div>
+                                {serviceAssignmentError}
-	                            )}
+                            </div>
-                        </div>
+                        )}
-	                    </QuestionCard>
+                    </div>
-                )}
+                </QuestionCard>
-            </>
+            )}
-        );
+        </>
-    
+    );
 }

txclient/src/app/components/FinancialWidget/FinancialWidget.tsx

@@ -1,13 +1,17 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import { LineChart } from "@mui/x-charts/LineChart";
-import { MyOranizationsView } from "@core/Models/Company.model";
+import {
-import { DashboardFinancialsResult, getDashboardFinancials } from "../../landing/dashboard/Dashboard.Service";
+    DashboardFinancialsResult,
+    getDashboardFinancials,
+} from "../../landing/dashboard/Dashboard.Service";
 import { loadCollaboratorsByCompanyId } from "../../admin/(organization-profile)/org/profile/[id]/collaborators/Collaborators.Service";
 import { CompanyEmployeesView } from "@models/Collaborators.model";
 import UnpaidIncomeCard from "../UnpaidIncomeCard/UnpaidIncomeCard";
 import styles from "./FinancialWidget.module.css";
 import dayjs from "dayjs";
+import OpenInNewOutlinedIcon from "@mui/icons-material/OpenInNewOutlined";
+import { useNavigation } from "@core/app/hooks/goto";
 
 export interface FinancialWidgetProps {
     sessionUser: string;
@@ -15,7 +19,12 @@ export interface FinancialWidgetProps {
     organizationName?: string;
 }
 
-export default function FinancialWidget({ sessionUser, selectedOrgId, organizationName }: FinancialWidgetProps) {
+export default function FinancialWidget({
+    sessionUser,
+    selectedOrgId,
+    organizationName,
+}: FinancialWidgetProps) {
+    const { goTo } = useNavigation();
     const [selectedTimeframe, setSelectedTimeframe] = useState<"week" | "month" | "year">("month");
     const [selectedEmployeeId, setSelectedEmployeeId] = useState<string>("");
     const [collaborators, setCollaborators] = useState<CompanyEmployeesView[]>([]);
@@ -27,10 +36,12 @@ export default function FinancialWidget({ sessionUser, selectedOrgId, organizati
 
     useEffect(() => {
         if (selectedOrgId) {
-            loadCollaboratorsByCompanyId({ companyId: selectedOrgId }).then((res) => {
+            loadCollaboratorsByCompanyId({ companyId: selectedOrgId })
-                setCollaborators(res);
+                .then((res) => {
-                setSelectedEmployeeId(""); // reset employee filter when org changes
+                    setCollaborators(res);
-            }).catch(console.error);
+                    setSelectedEmployeeId(""); // reset employee filter when org changes
+                })
+                .catch(console.error);
         }
     }, [selectedOrgId, sessionUser]);
 
@@ -43,14 +54,17 @@ export default function FinancialWidget({ sessionUser, selectedOrgId, organizati
                 sessionUser,
                 companyId: selectedOrgId,
                 timeframe: selectedTimeframe,
-                employeeId: selectedEmployeeId || undefined
+                employeeId: selectedEmployeeId || undefined,
-            }).then((res) => {
+            })
-                setFinancials(res);
+                .then((res) => {
-            }).catch((err) => {
+                    setFinancials(res);
-                const errMsg = err.format ? err.format() : err.message;
+                })
-                console.warn("Acceso denegado a métricas financieras: ", errMsg);
+                .catch((err) => {
-                setError("No tienes permisos de administrador para esta organización.");
+                    const errMsg = err.format ? err.format() : err.message;
-            }).finally(() => setLoading(false));
+                    console.warn("Acceso denegado a métricas financieras: ", errMsg);
+                    setError("No tienes permisos de administrador para esta organización.");
+                })
+                .finally(() => setLoading(false));
         }
     }, [selectedOrgId, selectedTimeframe, selectedEmployeeId, sessionUser]);
 
@@ -64,15 +78,22 @@ export default function FinancialWidget({ sessionUser, selectedOrgId, organizati
         const previous = financials.previousPeriodTotal;
 
         if (previous === 0) {
-            if (current > 0) return <span className={styles.positive}>+100% vs periodo anterior</span>;
+            if (current > 0)
+                return <span className={styles.positive}>+100% vs periodo anterior</span>;
             return <span className={styles.neutral}>Sin datos previos</span>;
         }
 
         const diff = current - previous;
         const percent = (diff / previous) * 100;
 
-        if (percent > 0) return <span className={styles.positive}>+{percent.toFixed(1)}% vs periodo anterior</span>;
+        if (percent > 0)
-        if (percent < 0) return <span className={styles.negative}>{percent.toFixed(1)}% vs periodo anterior</span>;
+            return (
+                <span className={styles.positive}>+{percent.toFixed(1)}% vs periodo anterior</span>
+            );
+        if (percent < 0)
+            return (
+                <span className={styles.negative}>{percent.toFixed(1)}% vs periodo anterior</span>
+            );
         return <span className={styles.neutral}>0% vs periodo anterior</span>;
     };
 
@@ -81,15 +102,46 @@ export default function FinancialWidget({ sessionUser, selectedOrgId, organizati
     if (error) {
         return (
             <div className={styles.container}>
-                <button className={styles.headerButton} type="button" onClick={() => setIsOpen((value) => !value)}>
+                <button
+                    className={styles.headerButton}
+                    type="button"
+                    onClick={() => setIsOpen((value) => !value)}
+                >
                     <h3 className={styles.title}>
-                        Rendimiento Financiero {organizationName ? `- ${organizationName}` : ''}
+                        Rendimiento Financiero {organizationName ? `- ${organizationName}` : ""}
                     </h3>
-                    <span className={styles.toggleIcon}>{isOpen ? "−" : "+"}</span>
+                    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                        <button
+                            type="button"
+                            onClick={() => goTo(`/landing/org/${selectedOrgId}`)}
+                            style={{
+                                display: "inline-flex",
+                                alignItems: "center",
+                                gap: "6px",
+                                padding: "6px 12px",
+                                borderRadius: "999px",
+                                color: "var(--green-darkestX1)",
+                                border: "1px solid var(--green-darkestX1)",
+                                background: "var(--white)",
+                                textDecoration: "none",
+                                fontSize: "14px",
+                                fontWeight: 600,
+                                cursor: "pointer",
+                                transition: "all 0.2s ease",
+                            }}
+                            title="Ver perfil público de la organización"
+                        >
+                            <OpenInNewOutlinedIcon fontSize="small" />
+                            Ver perfil
+                        </button>
+                        <span className={styles.toggleIcon}>{isOpen ? "−" : "+"}</span>
+                    </div>
                 </button>
                 {isOpen && (
-                    <div style={{ padding: '40px 20px', textAlign: 'center', color: '#6b7280' }}>
+                    <div style={{ padding: "40px 20px", textAlign: "center", color: "#6b7280" }}>
-                        <p style={{ fontWeight: '600', marginBottom: '8px', color: '#374151' }}>Acceso Restringido</p>
+                        <p style={{ fontWeight: "600", marginBottom: "8px", color: "#374151" }}>
+                            Acceso Restringido
+                        </p>
                         <p>{error}</p>
                     </div>
                 )}
@@ -98,67 +150,108 @@ export default function FinancialWidget({ sessionUser, selectedOrgId, organizati
     }
 
     const chartData = financials?.currentPeriodData || [];
-    const xAxisData = chartData.map(d => {
+    const xAxisData = chartData.map((d) => {
         // format label nicer depending on timeframe
         if (selectedTimeframe === "year") return dayjs(d.date).format("MMM YYYY");
         return dayjs(d.date).format("DD/MM");
     });
-    const seriesData = chartData.map(d => d.amount);
+    const seriesData = chartData.map((d) => d.amount);
-    const hasChartData = chartData.some(d => d.amount > 0);
+    const hasChartData = chartData.some((d) => d.amount > 0);
 
     return (
         <div className={styles.container}>
-            <button className={styles.headerButton} type="button" onClick={() => setIsOpen((value) => !value)}>
+            <button
+                className={styles.headerButton}
+                type="button"
+                onClick={() => setIsOpen((value) => !value)}
+            >
                 <h3 className={styles.title}>
-                    Rendimiento Financiero {organizationName ? `- ${organizationName}` : ''}
+                    Rendimiento Financiero {organizationName ? `- ${organizationName}` : ""}
                 </h3>
-                <span className={styles.toggleIcon}>{isOpen ? "−" : "+"}</span>
+                <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                    <button
+                        type="button"
+                        onClick={() => goTo(`/landing/org/${selectedOrgId}`)}
+                        style={{
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: "6px",
+                            padding: "6px 12px",
+                            borderRadius: "999px",
+                            color: "var(--green-darkestX1)",
+                            border: "1px solid var(--green-darkestX1)",
+                            background: "var(--white)",
+                            textDecoration: "none",
+                            fontSize: "14px",
+                            fontWeight: 600,
+                            cursor: "pointer",
+                            transition: "all 0.2s ease",
+                        }}
+                        title="Ver perfil público de la organización"
+                    >
+                        <OpenInNewOutlinedIcon fontSize="small" />
+                        Ver perfil
+                    </button>
+                    <span className={styles.toggleIcon}>{isOpen ? "−" : "+"}</span>
+                </div>
             </button>
 
             {isOpen && (
                 <>
                     <div className={styles.filters}>
-                    <select 
+                        <select
-                        className={styles.select}
+                            className={styles.select}
-                        value={selectedTimeframe} 
+                            value={selectedTimeframe}
-                        onChange={e => setSelectedTimeframe(e.target.value as "week" | "month" | "year")}
+                            onChange={(e) =>
-                    >
+                                setSelectedTimeframe(e.target.value as "week" | "month" | "year")
-                        <option value="week">Última Semana</option>
+                            }
-                        <option value="month">Último Mes</option>
+                        >
-                        <option value="year">Último Año</option>
+                            <option value="week">Última Semana</option>
-                    </select>
+                            <option value="month">Último Mes</option>
+                            <option value="year">Último Año</option>
+                        </select>
 
-                    <select 
+                        <select
-                        className={styles.select}
+                            className={styles.select}
-                        value={selectedEmployeeId} 
+                            value={selectedEmployeeId}
-                        onChange={e => setSelectedEmployeeId(e.target.value)}
+                            onChange={(e) => setSelectedEmployeeId(e.target.value)}
-                    >
+                        >
-                        <option value="">Todos los Profesionales</option>
+                            <option value="">Todos los Profesionales</option>
-                        {collaborators.map(c => (
+                            {collaborators.map((c) => (
-                            <option key={c.id} value={c.id}>{c.fullName}</option>
+                                <option key={c.id} value={c.id}>
-                        ))}
+                                    {c.fullName}
-                    </select>
+                                </option>
+                            ))}
+                        </select>
                     </div>
 
                     <div className={styles.metricsRow}>
-                <div className={styles.metricBox}>
+                        <div className={styles.metricBox}>
-                    <span className={styles.metricLabel}>Ingresos del Periodo</span>
+                            <span className={styles.metricLabel}>Ingresos del Periodo</span>
-                    <span className={styles.metricValue}>
+                            <span className={styles.metricValue}>
-                        {loading ? "..." : formatCurrency(financials?.currentPeriodTotal || 0)}
+                                {loading
-                    </span>
+                                    ? "..."
-                    <div className={styles.metricComparison}>
+                                    : formatCurrency(financials?.currentPeriodTotal || 0)}
-                        {!loading && renderComparison()}
+                            </span>
-                    </div>
+                            <div className={styles.metricComparison}>
-                </div>
+                                {!loading && renderComparison()}
+                            </div>
+                        </div>
 
-                {financials && (
+                        {financials && <UnpaidIncomeCard value={financials.unpaidToday} />}
-                    <UnpaidIncomeCard value={financials.unpaidToday} />
-                )}
                     </div>
 
                     {loading && (
                         <div className={styles.chartContainer}>
-                            <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', color: '#9ca3af'}}>
+                            <div
+                                style={{
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                    height: "100%",
+                                    color: "#9ca3af",
+                                }}
+                            >
                                 Cargando datos...
                             </div>
                         </div>
@@ -168,57 +261,68 @@ export default function FinancialWidget({ sessionUser, selectedOrgId, organizati
                         <div className={styles.chartContainer}>
                             <LineChart
                                 height={350}
-                                xAxis={[{ 
+                                xAxis={[
-                                    scaleType: 'point', 
+                                    {
-                                    data: xAxisData,
+                                        scaleType: "point",
-                                }]}
+                                        data: xAxisData,
+                                    },
+                                ]}
                                 series={[
                                     {
                                         data: seriesData,
-                                        color: 'rgb(36, 169, 53)',
+                                        color: "rgb(36, 169, 53)",
                                         area: true,
                                         showMark: true,
-                                        curve: 'monotoneX',
+                                        curve: "monotoneX",
-                                        valueFormatter: (val: number | null) => val ? formatCurrency(val) : "0",
+                                        valueFormatter: (val: number | null) =>
+                                            val ? formatCurrency(val) : "0",
                                     },
                                 ]}
                                 grid={{ horizontal: true }}
                                 margin={{ top: 20, bottom: 40, left: 70, right: 20 }}
                                 sx={{
-                                    '.MuiLineElement-root': {
+                                    ".MuiLineElement-root": {
                                         strokeWidth: 3,
                                     },
-                                    '.MuiAreaElement-root': {
+                                    ".MuiAreaElement-root": {
-                                        fill: 'url(#gradient)',
+                                        fill: "url(#gradient)",
                                     },
-                                    '.MuiChartsGrid-line': {
+                                    ".MuiChartsGrid-line": {
-                                        strokeDasharray: '5 5',
+                                        strokeDasharray: "5 5",
-                                        stroke: '#e5e7eb',
+                                        stroke: "#e5e7eb",
                                     },
-                                    '.MuiChartsAxis-line': {
+                                    ".MuiChartsAxis-line": {
-                                        stroke: 'transparent',
+                                        stroke: "transparent",
                                     },
-                                    '.MuiChartsAxis-tick': {
+                                    ".MuiChartsAxis-tick": {
-                                        stroke: 'transparent',
+                                        stroke: "transparent",
                                     },
-                                    '.MuiChartsAxis-tickLabel': {
+                                    ".MuiChartsAxis-tickLabel": {
-                                        fill: '#9ca3af',
+                                        fill: "#9ca3af",
-                                        fontFamily: 'inherit',
+                                        fontFamily: "inherit",
-                                        fontSize: '12px',
+                                        fontSize: "12px",
                                         fontWeight: 500,
                                     },
-                                    '.MuiMarkElement-root': {
+                                    ".MuiMarkElement-root": {
-                                        stroke: 'rgb(36, 169, 53)',
+                                        stroke: "rgb(36, 169, 53)",
                                         strokeWidth: 2,
-                                        fill: '#ffffff',
+                                        fill: "#ffffff",
-                                        scale: '1.2',
+                                        scale: "1.2",
-                                    }
+                                    },
                                 }}
                             >
                                 <defs>
                                     <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
-                                        <stop offset="5%" stopColor="rgb(36, 169, 53)" stopOpacity={0.3}/>
+                                        <stop
-                                        <stop offset="95%" stopColor="rgb(36, 169, 53)" stopOpacity={0.0}/>
+                                            offset="5%"
+                                            stopColor="rgb(36, 169, 53)"
+                                            stopOpacity={0.3}
+                                        />
+                                        <stop
+                                            offset="95%"
+                                            stopColor="rgb(36, 169, 53)"
+                                            stopOpacity={0.0}
+                                        />
                                     </linearGradient>
                                 </defs>
                             </LineChart>

txclient/src/app/components/Home/Footer/Footer.tsx

@@ -74,6 +74,9 @@ export default function Footer() {
                         <Link href="/admin/org" style={{ display: "block" }}>
                             Mis organizaciones
                         </Link>
+                        <Link href="/landing/help" style={{ display: "block" }}>
+                            Obtener ayuda
+                        </Link>
                         <h1 style={{ marginTop: "5px" }}>Contacto</h1>
                         <Link href="mailto:info@turnosxpress.com.ar" style={{ display: "block" }}>
                             info@turnosxpress.com.ar

txclient/src/app/components/Location/Location.module.css

@@ -5,7 +5,7 @@
     right: 0px;
     height: 70px;
     overflow: hidden;
-    z-index: 1;
+    z-index: 100;
     pointer-events: none;
 }
 

txclient/src/app/components/OrganizationHeader/OrganizationHeader.tsx

@@ -17,6 +17,7 @@ import classNames from "classnames";
 import { useNavigation } from "@core/app/hooks/goto";
 
 import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import Dialog from "@mui/material/Dialog";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
@@ -69,6 +70,14 @@ export default function OrganizationHeader(props: OrganizationHeaderParams): Rea
             icon: <ShareOutlinedIcon />,
         });
 
+        menu.add({
+            text: "Ver perfil",
+            onClick: () => {
+                goTo(`/landing/org/${props.data.id}`);
+            },
+            icon: <OpenInNewIcon />,
+        });
+
         menu.add({
             text: "Notificaciones",
             onClick: () => {

txclient/src/app/components/OrganizationHeaderEdit/HeaderEditPopup.tsx

@@ -0,0 +1,187 @@
+"use client";
+import { useState, useEffect } from "react";
+import { Grid2, IconButton, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import turnosXpressTheme from "@core/app/theme/turnosXpress";
+import Button from "@mui/material/Button";
+import { ThemeProvider } from "@emotion/react";
+import { PopoverPicker } from "@components/ColorPicker/ColorPicker";
+import ImagePicker from "@components/ImagePicker/ImagePicker";
+import { useAlert } from "@core/Store/Alert.Store";
+import { useSessionStore } from "@core/Store/Sesion.Store";
+import { useOrganizationHeaderStore } from "@core/Store/OrganizationHeader.Store";
+import { updateOrganizationColors, uploadHeaderImage } from "@services/Header.Edit.Service";
+import { UpdateCompanyParams } from "@models/Company.model";
+
+interface HeaderEditPopupProps {
+    open: boolean;
+    onClose: () => void;
+    companyId: string;
+    headerColor: string;
+    headerFontColor: string;
+    headerFontShadowColor: string;
+    headerImage: string;
+    onSaved: () => void;
+    onRefresh?: () => void;
+}
+
+export default function HeaderEditPopup(props: HeaderEditPopupProps) {
+    const { open, onClose, companyId, headerColor, headerFontColor, headerFontShadowColor, headerImage, onSaved, onRefresh } = props;
+    const alert = useAlert();
+    const SessionInfo = useSessionStore();
+    const organizationHeader = useOrganizationHeaderStore();
+
+    const [headerColorState, setHeaderColorState] = useState("");
+    const [headerFontColorState, setHeaderFontColorState] = useState("");
+    const [headerFontShadowColorState, setHeaderFontShadowColorState] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    // Sync local state when values change externally
+    useEffect(() => {
+        if (open) {
+            setHeaderColorState(headerColor || "");
+            setHeaderFontColorState(headerFontColor || "");
+            setHeaderFontShadowColorState(headerFontShadowColor || "");
+            setLoading(false);
+        }
+    }, [open, headerColor, headerFontColor, headerFontShadowColor]);
+
+    const handleSaveColors = async () => {
+        setLoading(true);
+
+        try {
+            const updData: UpdateCompanyParams = {
+                id: companyId,
+                headerColor: headerColorState,
+                headerFontColor: headerFontColorState,
+                headerFontShadowColor: headerFontShadowColorState,
+                sessionUser: SessionInfo.userId,
+            };
+
+            await updateOrganizationColors(updData);
+
+            organizationHeader.setHeaderColor(headerColorState);
+            organizationHeader.setHeaderFontColor(headerFontColorState);
+            organizationHeader.setHeaderFontShadowColor(headerFontShadowColorState);
+
+            alert.showSuccess("Colores actualizados");
+            onSaved();
+            onRefresh?.();
+        } catch (error) {
+            const formatted = error instanceof Error ? error.message : "Error al guardar los colores";
+            alert.showError(formatted || "Error al guardar los colores");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        setLoading(true);
+
+        try {
+            const formData = new FormData();
+            formData.append("companyId", companyId);
+            formData.append("sessionUser", SessionInfo.userId);
+            formData.append("file", file);
+
+            uploadHeaderImage(formData).then(() => {
+                alert.showSuccess("Imagen actualizada");
+                onSaved();
+                onRefresh?.();
+            }).catch((error) => {
+                const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
+                alert.showError(formatted || "Error al guardar la imagen");
+            }).finally(() => {
+                setLoading(false);
+            });
+        } catch (error) {
+            const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
+            alert.showError(formatted || "Error al guardar la imagen");
+            setLoading(false);
+        }
+    };
+
+    return (
+        <ThemeProvider theme={turnosXpressTheme}>
+            <Dialog
+                open={open}
+                onClose={onClose}
+                maxWidth="sm"
+                fullWidth
+                PaperProps={{
+                    sx: {
+                        borderRadius: 2,
+                        height: 500,
+                    },
+                }}
+            >
+                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                    Personalizar
+                    <IconButton onClick={onClose} size="small">
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+
+                <DialogContent dividers sx={{ p: 3 }}>
+                    {/* Colores */}
+                    <Grid2 container spacing={1} mb={3}>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Fondo"
+                                color={headerColorState}
+                                onChange={(color: string) => {
+                                    setHeaderColorState(color);
+                                }}
+                            />
+                        </Grid2>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Fuente"
+                                color={headerFontColorState}
+                                onChange={(color: string) => {
+                                    setHeaderFontColorState(color);
+                                }}
+                            />
+                        </Grid2>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Sombra"
+                                color={headerFontShadowColorState}
+                                onChange={(color: string) => {
+                                    setHeaderFontShadowColorState(color);
+                                }}
+                            />
+                        </Grid2>
+                    </Grid2>
+
+                    {/* Imagen */}
+                    <ImagePicker
+                        src={headerImage}
+                        alt="Cabecera"
+                        style={{ width: "100%", height: 120, borderRadius: 8 }}
+                        readOnly={false}
+                        onChange={handleImageChange}
+                        imageSizeSrc="/org-header-size.webp"
+                        mbLimit={5}
+                    />
+                </DialogContent>
+
+                <DialogActions sx={{ px: 3, pb: 2 }}>
+                    <Button onClick={onClose}>Cancelar</Button>
+                    <Button
+                        onClick={handleSaveColors}
+                        autoFocus
+                        color="success"
+                        variant="contained"
+                        disabled={loading}
+                    >
+                        Guardar
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </ThemeProvider>
+    );
+}

txclient/src/app/components/OrganizationHeaderEdit/OrganizationHeaderEdit.tsx

@@ -0,0 +1,116 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import HeaderEditPopup from "./HeaderEditPopup";
+import { useSessionStore } from "@core/Store/Sesion.Store";
+import { checkOrgAdmin } from "@services/Header.Edit.Service";
+
+interface OrganizationHeaderEditProps {
+    companyId: string;
+    headerColor?: string;
+    headerFontColor?: string;
+    headerFontShadowColor?: string;
+    headerImage?: string;
+}
+
+export default function OrganizationHeaderEdit({
+    companyId,
+    headerColor = "",
+    headerFontColor = "",
+    headerFontShadowColor = "",
+    headerImage = "",
+}: OrganizationHeaderEditProps) {
+    const router = useRouter();
+    const SessionInfo = useSessionStore();
+    const [isOrgAdmin, setIsOrgAdmin] = useState(false);
+    const [showEditPopup, setShowEditPopup] = useState(false);
+
+    useEffect(() => {
+        if (!SessionInfo.userId || !companyId) {
+            setIsOrgAdmin(false);
+            const existing = document.getElementById("edit-header-btn");
+            if (existing) existing.remove();
+            return;
+        }
+
+        let cancelled = false;
+
+        checkOrgAdmin(companyId, SessionInfo.userId)
+            .then((isAdmin) => {
+                if (cancelled) return;
+                setIsOrgAdmin(isAdmin);
+
+                const wrapper = document.getElementById("header-wrapper");
+                if (!wrapper) return;
+
+                if (isAdmin) {
+                    const existingBtn = document.getElementById("edit-header-btn");
+                    if (existingBtn) existingBtn.remove();
+
+                    const btn = document.createElement("div");
+                    btn.id = "edit-header-btn";
+                    btn.innerHTML = `
+                        <button style="
+                            position: absolute;
+                            top: 12px;
+                            right: 12px;
+                            width: 40px;
+                            height: 40px;
+                            border-radius: 50%;
+                            background: rgba(0,0,0,0.45);
+                            color: white;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            z-index: 100;
+                            transition: background 0.2s;
+                        " onmouseover="this.style.background='rgba(0,0,0,0.7)'" onmouseout="this.style.background='rgba(0,0,0,0.45)'">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+                        </button>
+                    `;
+                    btn.querySelector("button")!.addEventListener("click", () =>
+                        setShowEditPopup(true),
+                    );
+                    wrapper.appendChild(btn);
+                } else {
+                    const existingBtn = document.getElementById("edit-header-btn");
+                    if (existingBtn) existingBtn.remove();
+                }
+            })
+            .catch(() => {
+                if (cancelled) return;
+                setIsOrgAdmin(false);
+
+                const existingBtn = document.getElementById("edit-header-btn");
+                if (existingBtn) existingBtn.remove();
+            });
+
+        return () => {
+            cancelled = true;
+            const existing = document.getElementById("edit-header-btn");
+            if (existing) existing.remove();
+        };
+    }, [SessionInfo.userId, companyId]);
+
+    return (
+        <>
+            {isOrgAdmin && (
+                <HeaderEditPopup
+                    open={showEditPopup}
+                    onClose={() => setShowEditPopup(false)}
+                    companyId={companyId}
+                    headerColor={headerColor}
+                    headerFontColor={headerFontColor}
+                    headerFontShadowColor={headerFontShadowColor}
+                    headerImage={headerImage}
+                    onSaved={() => {
+                        setShowEditPopup(false);
+                    }}
+                    onRefresh={() => router.refresh()}
+                />
+            )}
+        </>
+    );
+}

txclient/src/app/components/ProductItem/ProductItem.tsx

@@ -6,6 +6,7 @@ import { PublicServiceView } from "@models/Service.model";
 import style from "./style.module.css";
 import { getServiceImage } from "@core/helpers/getServiceImage";
 import ServiceRatingSummary from "@components/ServiceRatingSummary/ServiceRatingSummary";
+import EditIcon from "@mui/icons-material/Edit";
 
 export type FindResultsViewMode = "grid" | "card";
 
@@ -14,6 +15,8 @@ export interface ProductItemProps {
     width?: number | string;
     viewMode?: FindResultsViewMode;
     dragging?: boolean;
+    isAdmin?: boolean;
+    onImageEdit?: () => void;
 }
 
 export default function ProductItem(props: ProductItemProps) {
@@ -21,6 +24,8 @@ export default function ProductItem(props: ProductItemProps) {
     const { product } = props;
     const { viewMode = "card" } = props;
     const { dragging = false } = props;
+    const { isAdmin = false } = props;
+    const { onImageEdit } = props;
     const { goTo } = useNavigation();
 
     return (
@@ -38,7 +43,7 @@ export default function ProductItem(props: ProductItemProps) {
                         textAlign: "center",
                         padding: "10px",
                         border: "solid 1px  rgba(0, 0, 0, 0.1)",
-                        cursor: "pointer",
+                        cursor: isAdmin ? "default" : "pointer",
                         position: "relative",
                     }}
                     onClick={() => {
@@ -58,6 +63,11 @@ export default function ProductItem(props: ProductItemProps) {
                                 display: "block",
                             }}
                         />
+                        {isAdmin && (
+                            <span className={style.adminEditButton} onClick={(e) => { e.stopPropagation(); onImageEdit?.(); }}>
+                                <EditIcon fontSize="small" />
+                            </span>
+                        )}
                         <ServiceRatingSummary
                             serviceId={product.id}
                             variant="card"

txclient/src/app/components/ProductItem/style.module.css

@@ -8,6 +8,32 @@
     bottom: 8px;
 }
 
+.adminEditButton {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    z-index: 10;
+}
+
+.adminEditButton:hover {
+    background: var(--wine-red);
+    transform: scale(1.1);
+}
+
+.adminEditButton:hover svg {
+    color: white !important;
+}
+
 .cardHeader {
     margin: 10px 0;
     text-align: center;

txclient/src/app/landing/dashboard/page.tsx

@@ -41,6 +41,7 @@ import NotificationsNoneOutlinedIcon from "@mui/icons-material/NotificationsNone
 import ChatBubbleOutlineOutlinedIcon from "@mui/icons-material/ChatBubbleOutlineOutlined";
 import AddCircleOutlineOutlinedIcon from "@mui/icons-material/AddCircleOutlineOutlined";
 import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import FinancialWidget from "@components/FinancialWidget/FinancialWidget";
 import PlanMetricsWidget from "@components/PlanMetricsWidget/PlanMetricsWidget";
 import PendingRepeatsCard from "@core/app/components/PendingRepeatsCard/PendingRepeatsCard";
@@ -442,6 +443,9 @@ function DashboardContent() {
                                         <div className={classNames(style.actionButton)} style={{backgroundColor: "var(--wine-red)"}} onClick={handleNewAppointmentClick}>
                                             <AddCircleOutlineOutlinedIcon /> Nuevo Turno
                                         </div>
+                                        <div className={classNames(style.actionButton, style.buttonHelp)} onClick={() => goTo("/landing/help")}>
+                                            <HelpOutlineIcon /> Obtener ayuda
+                                        </div>
                                     </div>
                                 </div>
 

txclient/src/app/landing/dashboard/style.module.css

@@ -1,29 +1,42 @@
 .dashboardGrid {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 20px;
+    gap: 24px;
     width: 100%;
-    max-width: 1200px;
+    max-width: 1280px;
-    margin: 30px auto;
+    margin: 40px auto;
-    padding: 0 20px;
+    padding: 0 24px;
 }
 
 @media (min-width: 850px) {
     .dashboardGrid {
-        grid-template-columns: 350px 1fr;
+        grid-template-columns: 380px 1fr;
     }
 }
 
+/* Welcome Card - Modern gradient design */
 .welcomeCard {
-    background-color: white;
+    background: linear-gradient(135deg, #ffffff 0%, #faf7fb 100%);
-    border-radius: 16px;
+    border-radius: 20px;
-    padding: 30px;
+    padding: 36px;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
     display: flex;
     flex-direction: column;
-    gap: 15px;
+    gap: 20px;
     grid-column: 1 / -1;
     position: relative;
+    border: 1px solid rgba(127, 42, 255, 0.08);
+    overflow: hidden;
+}
+
+.welcomeCard::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--wine-red) 0%, var(--wine-dark) 50%, var(--wine-darkest) 100%);
 }
 
 .welcomeContainer {
@@ -35,24 +48,35 @@
     width: 100%;
 }
 
+.welcomeContainer h3 {
+    font-size: 1.75rem;
+    font-weight: 800;
+    color: var(--wine-superdark);
+    margin: 0;
+    letter-spacing: -0.02em;
+}
+
 .metricsCard {
     background-color: white;
-    border-radius: 16px;
+    border-radius: 20px;
     padding: 30px;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
     display: flex;
     flex-direction: column;
     gap: 20px;
+    border: 1px solid rgba(0, 0, 0, 0.04);
 }
 
+/* Agenda Card */
 .agendaCard {
     background-color: white;
-    border-radius: 16px;
+    border-radius: 20px;
-    padding: 30px;
+    padding: 28px;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
     display: flex;
     flex-direction: column;
-    gap: 15px;
+    gap: 16px;
+    border: 1px solid rgba(0, 0, 0, 0.04);
 }
 
 .agendaHeader {
@@ -68,10 +92,16 @@
     text-align: left;
 }
 
+.agendaHeader h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--wine-superdark);
+}
+
 .agendaHeaderTitleWrap {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
     min-width: 0;
 }
 
@@ -79,14 +109,15 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 28px;
+    min-width: 32px;
-    height: 28px;
+    height: 32px;
-    padding: 0 9px;
+    padding: 0 10px;
     border-radius: 999px;
-    background: var(--wine-red);
+    background: linear-gradient(135deg, var(--wine-red) 0%, var(--wine-dark) 100%);
     color: var(--white);
-    font-size: 13px;
+    font-size: 14px;
-    font-weight: 900;
+    font-weight: 800;
+    box-shadow: 0 4px 12px rgba(255, 42, 127, 0.3);
 }
 
 .agendaToggleIcon {
@@ -94,21 +125,27 @@
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
-    width: 32px;
+    width: 36px;
-    height: 32px;
+    height: 36px;
     border-radius: 999px;
     background: var(--white);
     color: var(--wine-red);
-    border: 1px solid var(--wine-red);
+    border: 2px solid var(--wine-red);
     font-size: 22px;
     font-weight: 800;
     line-height: 1;
+    transition: all 0.2s ease;
+}
+
+.agendaToggleIcon:hover {
+    background: var(--wine-red);
+    color: var(--white);
 }
 
 .agendaList {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 12px;
     max-height: 500px;
     overflow-y: auto;
 }
@@ -116,22 +153,25 @@
 .agendaItem {
     display: flex;
     flex-direction: column;
-    padding: 15px;
+    padding: 16px 18px;
-    border-radius: 12px;
+    border-radius: 14px;
-    background-color: #f9f9f9;
+    background: linear-gradient(135deg, #faf7fb 0%, #ffffff 100%);
     border-left: 4px solid var(--wine-red);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition: all 0.2s ease;
+    border: 1px solid rgba(127, 42, 255, 0.08);
 }
 
 .agendaItem:hover {
     transform: translateY(-2px);
-    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+    border-left-color: var(--wine-dark);
 }
 
+/* Quick Actions - Modern button grid */
 .quickActions {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 15px;
+    gap: 16px;
 }
 
 .actionButton {
@@ -139,37 +179,75 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 10px;
+    gap: 12px;
-    padding: 20px 10px;
+    padding: 24px 16px;
-    border-radius: 16px;
+    border-radius: 18px;
     color: white;
-    font-weight: bold;
+    font-weight: 700;
     cursor: pointer;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     border: none;
     font-size: 14px;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.actionButton::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.actionButton:hover::before {
+    opacity: 1;
 }
 
 .actionButton:hover {
-    transform: translateY(-4px);
+    transform: translateY(-6px);
-    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
 }
 
-.buttonOrganizations { background-color: var(--organization-card); }
+.actionButton:active {
-.buttonNotification { background-color: var(--red); }
+    transform: translateY(-2px);
-.buttonMessenger { background-color: var(--orange); }
+}
 
+.actionButton svg {
+    font-size: 28px !important;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+}
+
+.buttonOrganizations { 
+    background: linear-gradient(135deg, var(--organization-card) 0%, var(--organization-flag) 100%);
+}
+.buttonNotification { 
+    background: linear-gradient(135deg, var(--red) 0%, var(--red-darkest) 100%);
+}
+.buttonMessenger { 
+    background: linear-gradient(135deg, var(--orange) 0%, #cc7a00 100%);
+}
+.buttonHelp { 
+    background: linear-gradient(135deg, var(--wine-dark) 0%, var(--wine-darkest) 100%);
+}
+
+/* Payment Cards */
 .pendingPaymentCard {
     grid-column: 1 / -1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
-    padding: 26px 30px;
+    padding: 28px 32px;
-    border-radius: 18px;
+    border-radius: 20px;
-    background: #fff8e8;
+    background: linear-gradient(135deg, #fff8e8 0%, #fff3d6 100%);
-    border: 1px solid rgba(255, 151, 36, 0.28);
+    border: 1px solid rgba(255, 151, 36, 0.3);
-    box-shadow: 0 12px 28px rgba(255, 151, 36, 0.1);
+    box-shadow: 0 12px 32px rgba(255, 151, 36, 0.12);
 }
 
 .failedPaymentCard {
@@ -178,11 +256,11 @@
     align-items: center;
     justify-content: space-between;
     gap: 24px;
-    padding: 26px 30px;
+    padding: 28px 32px;
-    border-radius: 18px;
+    border-radius: 20px;
-    background: #f8fafc;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-    border: 1px solid rgba(100, 116, 139, 0.24);
+    border: 1px solid rgba(100, 116, 139, 0.25);
-    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
+    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
 }
 
 .expiredDowngradeCard {
@@ -191,11 +269,11 @@
     align-items: center;
     justify-content: space-between;
     gap: 24px;
-    padding: 26px 30px;
+    padding: 28px 32px;
-    border-radius: 18px;
+    border-radius: 20px;
-    background: #fff7ed;
+    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
-    border: 1px solid rgba(194, 65, 12, 0.24);
+    border: 1px solid rgba(194, 65, 12, 0.25);
-    box-shadow: 0 12px 28px rgba(194, 65, 12, 0.08);
+    box-shadow: 0 12px 32px rgba(194, 65, 12, 0.1);
     color: #7c2d12;
 }
 
@@ -210,78 +288,82 @@
 .pendingPaymentContent {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
     max-width: 760px;
 }
 
 .pendingPaymentEyebrow {
     width: fit-content;
-    padding: 5px 11px;
+    padding: 6px 12px;
     border-radius: 999px;
-    background: rgba(255, 151, 36, 0.16);
+    background: rgba(255, 151, 36, 0.18);
     color: #9a4b00;
     font-size: 12px;
-    font-weight: 900;
+    font-weight: 800;
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: 0.05em;
 }
 
 .failedPaymentEyebrow {
     width: fit-content;
-    padding: 5px 11px;
+    padding: 6px 12px;
     border-radius: 999px;
-    background: rgba(100, 116, 139, 0.12);
+    background: rgba(100, 116, 139, 0.14);
     color: #475569;
     font-size: 12px;
-    font-weight: 900;
+    font-weight: 800;
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: 0.05em;
 }
 
 .expiredDowngradeEyebrow {
     width: fit-content;
-    padding: 5px 11px;
+    padding: 6px 12px;
     border-radius: 999px;
-    background: rgba(194, 65, 12, 0.12);
+    background: rgba(194, 65, 12, 0.14);
     color: #9a3412;
     font-size: 12px;
-    font-weight: 900;
+    font-weight: 800;
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: 0.05em;
 }
 
 .expiredDowngradeButton {
     flex: 0 0 auto;
-    border: 1px solid rgba(124, 45, 18, 0.22);
+    border: 1px solid rgba(124, 45, 18, 0.25);
-    border-radius: 14px;
+    border-radius: 16px;
-    background: #7c2d12;
+    background: linear-gradient(135deg, #7c2d12 0%, #9a3412 100%);
     color: #fff7ed;
     cursor: pointer;
-    font-weight: 900;
+    font-weight: 800;
-    padding: 14px 18px;
+    padding: 16px 20px;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition: all 0.3s ease;
+    font-size: 15px;
 }
 
 .expiredDowngradeButton:hover {
-    box-shadow: 0 10px 24px rgba(124, 45, 18, 0.18);
+    box-shadow: 0 12px 28px rgba(124, 45, 18, 0.2);
-    transform: translateY(-2px);
+    transform: translateY(-3px);
 }
 
 .pendingPaymentContent h2 {
     margin: 0;
     color: var(--black);
-    font-size: clamp(22px, 3vw, 30px);
+    font-size: clamp(22px, 3vw, 28px);
+    font-weight: 800;
+    letter-spacing: -0.01em;
 }
 
 .pendingPaymentContent p {
     margin: 0;
     color: var(--gray-dark);
-    line-height: 1.55;
+    line-height: 1.6;
+    font-size: 15px;
 }
 
 .pendingPaymentLink {
     color: #9a4b00;
-    font-weight: 800;
+    font-weight: 700;
     text-decoration: underline;
     text-underline-offset: 3px;
 }
@@ -295,31 +377,32 @@
     min-width: 260px;
 }
 
+/* Starter Cards */
 .starterCard {
     grid-column: 1 / -1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
-    padding: 32px;
+    padding: 36px;
-    border-radius: 20px;
+    border-radius: 24px;
     background: linear-gradient(135deg, rgba(128, 0, 32, 0.96), rgba(58, 0, 120, 0.94));
     color: var(--white);
-    box-shadow: 0 18px 45px rgba(58, 0, 120, 0.18);
+    box-shadow: 0 20px 50px rgba(58, 0, 120, 0.2);
 }
 
 .starterContent {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 12px;
     max-width: 720px;
 }
 
 .starterEyebrow {
     width: fit-content;
-    padding: 6px 12px;
+    padding: 7px 14px;
     border-radius: 999px;
-    background: rgba(255, 255, 255, 0.16);
+    background: rgba(255, 255, 255, 0.18);
     font-size: 13px;
     font-weight: 800;
     text-transform: uppercase;
@@ -329,14 +412,15 @@
 .starterContent h2 {
     margin: 0;
     font-size: clamp(26px, 4vw, 38px);
-    line-height: 1.05;
+    line-height: 1.1;
+    font-weight: 800;
 }
 
 .starterContent p {
     margin: 0;
-    color: rgba(255, 255, 255, 0.86);
+    color: rgba(255, 255, 255, 0.88);
     font-size: 16px;
-    line-height: 1.6;
+    line-height: 1.65;
 }
 
 .starterActions {
@@ -349,69 +433,79 @@
 .starterPrimaryButton,
 .starterSecondaryButton {
     border: 0;
-    border-radius: 14px;
+    border-radius: 16px;
-    padding: 14px 18px;
+    padding: 16px 20px;
-    font-weight: 900;
+    font-weight: 800;
     cursor: pointer;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition: all 0.3s ease;
+    font-size: 15px;
 }
 
 .starterPrimaryButton:hover,
 .starterSecondaryButton:hover {
-    transform: translateY(-2px);
+    transform: translateY(-3px);
 }
 
 .starterPrimaryButton {
     background: var(--white);
     color: var(--wine-red);
-    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
 }
 
 .starterSecondaryButton {
-    background: rgba(255, 255, 255, 0.14);
+    background: rgba(255, 255, 255, 0.16);
     color: var(--white);
-    border: 1px solid rgba(255, 255, 255, 0.32);
+    border: 1px solid rgba(255, 255, 255, 0.35);
 }
 
 .starterGuideGrid {
     grid-column: 1 / -1;
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 18px;
+    gap: 20px;
 }
 
 .starterGuideCard {
     min-height: 220px;
-    padding: 26px;
+    padding: 28px;
-    border-radius: 18px;
+    border-radius: 20px;
     background: var(--white);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.07);
     border: 1px solid rgba(128, 0, 32, 0.08);
+    transition: all 0.3s ease;
+}
+
+.starterGuideCard:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
 }
 
 .starterGuideNumber {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 38px;
+    width: 42px;
-    height: 38px;
+    height: 42px;
     border-radius: 999px;
-    background: rgba(128, 0, 32, 0.1);
+    background: linear-gradient(135deg, var(--wine-red) 0%, var(--wine-dark) 100%);
-    color: var(--wine-red);
+    color: var(--white);
     font-weight: 900;
-    margin-bottom: 18px;
+    margin-bottom: 20px;
+    font-size: 18px;
+    box-shadow: 0 6px 16px rgba(255, 42, 127, 0.3);
 }
 
 .starterGuideCard h3 {
-    margin: 0 0 10px;
+    margin: 0 0 12px;
     color: var(--black);
     font-size: 20px;
+    font-weight: 700;
 }
 
 .starterGuideCard p {
     margin: 0;
     color: var(--gray-dark);
-    line-height: 1.55;
+    line-height: 1.6;
     font-size: 15px;
 }
 
@@ -419,32 +513,34 @@
     grid-column: 1 / -1;
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
-    gap: 28px;
+    gap: 32px;
     align-items: start;
-    padding: 34px;
+    padding: 36px;
-    border-radius: 20px;
+    border-radius: 24px;
     background: linear-gradient(180deg, #ffffff 0%, #faf7fb 100%);
-    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.055);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.07);
     border: 1px solid rgba(128, 0, 32, 0.08);
 }
 
 .starterNextStepsPanel h3 {
-    margin: 14px 0 10px;
+    margin: 16px 0 12px;
     color: var(--black);
     font-size: clamp(24px, 3vw, 34px);
+    font-weight: 800;
 }
 
 .starterNextStepsPanel p {
     margin: 0;
     max-width: 680px;
     color: var(--gray-dark);
-    line-height: 1.65;
+    line-height: 1.7;
+    font-size: 15px;
 }
 
 .starterChecklist {
     display: flex;
     flex-direction: column;
-    gap: 14px;
+    gap: 16px;
     margin: 0;
     padding: 0;
     list-style: none;
@@ -452,49 +548,81 @@
 
 .starterChecklist li {
     position: relative;
-    padding: 14px 16px 14px 44px;
+    padding: 16px 18px 16px 48px;
-    border-radius: 14px;
+    border-radius: 16px;
     background: var(--white);
     color: var(--black);
     font-weight: 700;
-    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.045);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.04);
+    transition: all 0.2s ease;
+}
+
+.starterChecklist li:hover {
+    transform: translateX(4px);
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
 }
 
 .starterChecklist li::before {
     content: "✓";
     position: absolute;
-    left: 16px;
+    left: 18px;
     top: 50%;
     transform: translateY(-50%);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 20px;
+    width: 22px;
-    height: 20px;
+    height: 22px;
     border-radius: 999px;
-    background: var(--green);
+    background: linear-gradient(135deg, var(--green) 0%, var(--green-darkestX1) 100%);
     color: var(--white);
     font-size: 12px;
     font-weight: 900;
+    box-shadow: 0 3px 8px rgba(42, 255, 42, 0.3);
 }
 
+/* Responsive */
 @media (max-width: 760px) {
+    .dashboardGrid {
+        margin: 24px auto;
+        padding: 0 16px;
+        gap: 20px;
+    }
+
+    .welcomeCard {
+        padding: 28px 24px;
+    }
+
+    .welcomeContainer h3 {
+        font-size: 1.5rem;
+    }
+
+    .quickActions {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+    }
+
+    .actionButton {
+        padding: 20px 12px;
+    }
+
     .pendingPaymentCard {
         align-items: stretch;
         flex-direction: column;
-        padding: 22px;
+        padding: 24px;
     }
 
     .failedPaymentCard {
         align-items: stretch;
         flex-direction: column;
-        padding: 22px;
+        padding: 24px;
     }
 
     .expiredDowngradeCard {
         align-items: stretch;
         flex-direction: column;
-        padding: 22px;
+        padding: 24px;
     }
 
     .expiredDowngradeButton {
@@ -510,7 +638,7 @@
     .starterCard {
         align-items: stretch;
         flex-direction: column;
-        padding: 24px;
+        padding: 28px;
     }
 
     .starterActions {
@@ -523,7 +651,13 @@
 
     .starterNextStepsPanel {
         grid-template-columns: 1fr;
-        padding: 24px;
+        padding: 28px;
+    }
+}
+
+@media (max-width: 480px) {
+    .quickActions {
+        grid-template-columns: 1fr;
     }
 }
 

txclient/src/app/landing/help/components/VideoModal.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { useEffect, useCallback } from "react";
+import style from "../help.module.css";
+import { Video, videoCategories } from "../videoData";
+
+interface VideoModalProps {
+    video: Video | null;
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectVideo: (video: Video) => void;
+}
+
+export default function VideoModal({
+    video,
+    isOpen,
+    onClose,
+    onSelectVideo,
+}: VideoModalProps) {
+    const handleKeyDown = useCallback(
+        (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        },
+        [onClose]
+    );
+
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener("keydown", handleKeyDown);
+            document.body.style.overflow = "hidden";
+        }
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+            document.body.style.overflow = "";
+        };
+    }, [isOpen, handleKeyDown]);
+
+    if (!isOpen || !video) return null;
+
+    const getCategoryName = (categoryId: string) => {
+        const cat = videoCategories.find((c) => c.id === categoryId);
+        return cat ? cat.name : "";
+    };
+
+    const allVideos = videoCategories.flatMap((cat) => cat.videos);
+    const currentVideoIndex = allVideos.findIndex((v) => v.id === video.id);
+
+    const handleNext = () => {
+        if (currentVideoIndex < allVideos.length - 1) {
+            onSelectVideo(allVideos[currentVideoIndex + 1]);
+        }
+    };
+
+    const handlePrev = () => {
+        if (currentVideoIndex > 0) {
+            onSelectVideo(allVideos[currentVideoIndex - 1]);
+        }
+    };
+
+    return (
+        <div className={style.modalOverlay} onClick={onClose}>
+            <div className={style.modalContent} onClick={(e) => e.stopPropagation()}>
+                <div className={style.modalHeader}>
+                    <h3 className={style.modalTitle}>{video.title}</h3>
+                    <button className={style.modalClose} onClick={onClose} aria-label="Cerrar">
+                        ✕
+                    </button>
+                </div>
+                <div className={style.modalBody}>
+                    <div className={style.modalVideo}>
+                        <div className={style.videoWrapper}>
+                            <iframe
+                                src={`https://www.youtube.com/embed/${video.id}?autoplay=1&rel=0&modestbranding=1`}
+                                title={video.title}
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                                allowFullScreen
+                            />
+                        </div>
+                        <div style={{ padding: "1rem 1.5rem", borderBottom: "1px solid var(--white-darkest)" }}>
+                            <p style={{ color: "var(--gray-dark)", fontSize: "0.9rem", lineHeight: 1.6 }}>
+                                {video.description}
+                            </p>
+                            <div style={{ display: "flex", gap: "0.75rem", marginTop: "0.75rem" }}>
+                                {currentVideoIndex > 0 && (
+                                    <button
+                                        onClick={handlePrev}
+                                        style={{
+                                            padding: "0.5rem 1rem",
+                                            borderRadius: "8px",
+                                            border: "1px solid var(--white-darkest)",
+                                            background: "var(--white)",
+                                            cursor: "pointer",
+                                            fontSize: "0.85rem",
+                                            fontWeight: 600,
+                                            color: "var(--black)",
+                                        }}
+                                    >
+                                        ← Anterior
+                                    </button>
+                                )}
+                                {currentVideoIndex < allVideos.length - 1 && (
+                                    <button
+                                        onClick={handleNext}
+                                        style={{
+                                            padding: "0.5rem 1rem",
+                                            borderRadius: "8px",
+                                            border: "none",
+                                            background: "linear-gradient(135deg, var(--wine-red), var(--wine-dark))",
+                                            color: "white",
+                                            cursor: "pointer",
+                                            fontSize: "0.85rem",
+                                            fontWeight: 600,
+                                        }}
+                                    >
+                                        Siguiente →
+                                    </button>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                    <div className={style.modalSidebar}>
+                        <div className={style.sidebarTitle}>Todos los tutoriales</div>
+                        {videoCategories.map((cat) => (
+                            <div key={cat.id}>
+                                <div
+                                    style={{
+                                        padding: "0.6rem 1.25rem",
+                                        fontSize: "0.75rem",
+                                        fontWeight: 700,
+                                        color: "var(--wine-dark)",
+                                        textTransform: "uppercase",
+                                        letterSpacing: "0.5px",
+                                        background: "rgba(127, 42, 255, 0.04)",
+                                        borderTop: "1px solid var(--white-darkest)",
+                                    }}
+                                >
+                                    {cat.icon} {cat.name}
+                                </div>
+                                {cat.videos.map((v) => (
+                                    <div
+                                        key={v.id}
+                                        className={
+                                            v.id === video.id
+                                                ? style.sidebarVideoActive
+                                                : style.sidebarVideo
+                                        }
+                                        onClick={() => onSelectVideo(v)}
+                                    >
+                                        <div className={style.sidebarThumb}>
+                                            <img src={v.thumbnail} alt={v.title} />
+                                        </div>
+                                        <div className={style.sidebarVideoInfo}>
+                                            <div className={style.sidebarVideoTitle}>{v.title}</div>
+                                            <div className={style.sidebarVideoCategory}>
+                                                {getCategoryName(v.category)}
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

txclient/src/app/landing/help/help.module.css

@@ -0,0 +1,701 @@
+/* Help Center - Professional Video Tutorial Page */
+
+.container {
+    width: 100%;
+    max-width: 1300px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+
+/* Hero Section */
+.hero {
+    text-align: center;
+    padding: 4rem 2rem 3rem;
+    padding-top: 5rem;
+}
+
+.heroIcon {
+    width: 72px;
+    height: 72px;
+    background: linear-gradient(135deg, var(--wine-red) 0%, var(--wine-dark) 100%);
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1.5rem;
+    box-shadow: 0 10px 30px rgba(255, 42, 127, 0.2);
+}
+
+.heroTitle {
+    font-size: 3rem;
+    font-weight: 800;
+    line-height: 1.2;
+    margin-bottom: 1rem;
+    background: linear-gradient(135deg, var(--wine-superdark) 0%, var(--wine-red) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.heroSubtitle {
+    font-size: 1.2rem;
+    color: var(--gray-dark);
+    max-width: 700px;
+    margin: 0 auto 2rem;
+    line-height: 1.7;
+}
+
+.heroStats {
+    display: flex;
+    gap: 2rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 2rem;
+}
+
+.statItem {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    background: var(--white);
+    border-radius: 50px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+    border: 1px solid var(--white-darkest);
+}
+
+.statNumber {
+    font-size: 1.4rem;
+    font-weight: 800;
+    color: var(--wine-dark);
+}
+
+.statLabel {
+    font-size: 0.9rem;
+    color: var(--gray-dark);
+    font-weight: 500;
+}
+
+/* Category Navigation */
+.categoryNav {
+    display: flex;
+    gap: 0.75rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 1.5rem 0 3rem;
+    position: sticky;
+    top: 0;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    z-index: 10;
+    border-bottom: 1px solid var(--white-darkest);
+    margin-bottom: 2rem;
+}
+
+.categoryBtn {
+    padding: 0.6rem 1.4rem;
+    border-radius: 50px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    border: 2px solid var(--white-darkest);
+    background: var(--white);
+    color: var(--gray-dark);
+    white-space: nowrap;
+}
+
+.categoryBtn:hover {
+    border-color: var(--wine-light);
+    color: var(--wine-dark);
+    background: rgba(127, 42, 255, 0.04);
+}
+
+.categoryBtnActive {
+    composes: categoryBtn;
+    background: linear-gradient(135deg, var(--wine-red) 0%, var(--wine-dark) 100%);
+    color: var(--white);
+    border-color: transparent;
+    box-shadow: 0 4px 15px rgba(255, 42, 127, 0.3);
+}
+
+.categoryBtnActive:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(255, 42, 127, 0.4);
+    color: var(--white);
+}
+
+/* Category Section */
+.categorySection {
+    margin-bottom: 4rem;
+    scroll-margin-top: 80px;
+}
+
+.categoryHeader {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid var(--white-darkest);
+}
+
+.categoryIcon {
+    width: 48px;
+    height: 48px;
+    border-radius: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.categoryTitle {
+    font-size: 1.8rem;
+    font-weight: 800;
+    color: var(--wine-superdark);
+}
+
+.categoryDescription {
+    font-size: 1rem;
+    color: var(--gray-dark);
+    margin-top: 0.25rem;
+    line-height: 1.5;
+}
+
+.categoryCount {
+    margin-left: auto;
+    background: var(--white-dark);
+    color: var(--gray-dark);
+    padding: 0.3rem 0.8rem;
+    border-radius: 50px;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+/* Video Grid */
+.videoGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+    gap: 1.5rem;
+}
+
+/* Video Card */
+.videoCard {
+    background: var(--white);
+    border-radius: 16px;
+    overflow: hidden;
+    border: 1px solid var(--white-darkest);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.videoCard:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
+    border-color: var(--wine-lighter);
+}
+
+.videoThumbnail {
+    position: relative;
+    width: 100%;
+    padding-bottom: 56.25%;
+    overflow: hidden;
+    background: var(--black);
+}
+
+.videoThumbnail img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.videoCard:hover .videoThumbnail img {
+    transform: scale(1.05);
+}
+
+.playOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0);
+    transition: background 0.3s ease;
+}
+
+.videoCard:hover .playOverlay {
+    background: rgba(0, 0, 0, 0.3);
+}
+
+.playButton {
+    width: 56px;
+    height: 56px;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: scale(0.8);
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.videoCard:hover .playButton {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.playIcon {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 10px 0 10px 18px;
+    border-color: transparent transparent transparent var(--wine-red);
+    margin-left: 4px;
+}
+
+.videoDuration {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.videoContent {
+    padding: 1.25rem;
+}
+
+.videoTitle {
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--black);
+    margin-bottom: 0.5rem;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.videoDescription {
+    font-size: 0.85rem;
+    color: var(--gray-dark);
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.videoMeta {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--white-darkest);
+}
+
+.videoStep {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.8rem;
+    color: var(--wine-dark);
+    font-weight: 600;
+}
+
+.stepNumber {
+    width: 22px;
+    height: 22px;
+    background: linear-gradient(135deg, var(--wine-red), var(--wine-dark));
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.7rem;
+    font-weight: 700;
+}
+
+/* Video Modal */
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.85);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.modalContent {
+    width: 100%;
+    max-width: 1100px;
+    background: var(--white);
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
+    animation: slideUp 0.3s ease;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+}
+
+@keyframes slideUp {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+.modalHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--white-darkest);
+    background: var(--white);
+}
+
+.modalTitle {
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: var(--black);
+    flex: 1;
+    margin-right: 1rem;
+}
+
+.modalClose {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--white-dark);
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.modalClose:hover {
+    background: var(--error);
+    color: white;
+}
+
+.modalBody {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+.modalVideo {
+    flex: 1;
+    min-width: 0;
+}
+
+.videoWrapper {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+
+.videoWrapper iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+.modalSidebar {
+    width: 320px;
+    overflow-y: auto;
+    border-left: 1px solid var(--white-darkest);
+    background: var(--white-dark);
+    flex-shrink: 0;
+}
+
+.sidebarTitle {
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: var(--gray-dark);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 1rem 1.25rem 0.75rem;
+}
+
+.sidebarVideo {
+    display: flex;
+    gap: 0.75rem;
+    padding: 0.75rem 1.25rem;
+    cursor: pointer;
+    transition: background 0.2s ease;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.sidebarVideo:hover {
+    background: rgba(127, 42, 255, 0.04);
+}
+
+.sidebarVideoActive {
+    composes: sidebarVideo;
+    background: rgba(127, 42, 255, 0.08);
+    border-left: 3px solid var(--wine-red);
+}
+
+.sidebarThumb {
+    width: 100px;
+    height: 56px;
+    border-radius: 8px;
+    overflow: hidden;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.sidebarThumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.sidebarVideoInfo {
+    flex: 1;
+    min-width: 0;
+}
+
+.sidebarVideoTitle {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--black);
+    line-height: 1.3;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.sidebarVideoCategory {
+    font-size: 0.7rem;
+    color: var(--wine-dark);
+    font-weight: 500;
+    margin-top: 0.25rem;
+}
+
+/* Progress Section */
+.progressSection {
+    background: linear-gradient(135deg, var(--wine-superdark) 0%, var(--wine-darkest) 100%);
+    border-radius: 20px;
+    padding: 3rem;
+    margin: 3rem 0;
+    text-align: center;
+    color: white;
+}
+
+.progressTitle {
+    font-size: 1.8rem;
+    font-weight: 800;
+    margin-bottom: 0.75rem;
+}
+
+.progressText {
+    font-size: 1.1rem;
+    opacity: 0.85;
+    max-width: 600px;
+    margin: 0 auto 2rem;
+    line-height: 1.6;
+}
+
+.progressBar {
+    max-width: 500px;
+    margin: 0 auto;
+    height: 8px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.progressFill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--wine-red), var(--yellow));
+    border-radius: 4px;
+    transition: width 0.5s ease;
+}
+
+/* CTA Section */
+.ctaSection {
+    text-align: center;
+    padding: 4rem 2rem;
+    margin-top: 2rem;
+    background: var(--white-dark);
+    border-radius: 24px;
+    margin-bottom: 3rem;
+}
+
+.ctaTitle {
+    font-size: 2rem;
+    font-weight: 800;
+    color: var(--wine-superdark);
+    margin-bottom: 1rem;
+}
+
+.ctaText {
+    font-size: 1.1rem;
+    color: var(--gray-dark);
+    max-width: 500px;
+    margin: 0 auto 2rem;
+    line-height: 1.6;
+}
+
+.ctaButton {
+    display: inline-block;
+    padding: 1rem 2.5rem;
+    background: linear-gradient(135deg, var(--wine-red) 0%, var(--wine-dark) 100%);
+    color: white;
+    border-radius: 50px;
+    font-weight: 700;
+    font-size: 1.1rem;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(255, 42, 127, 0.3);
+}
+
+.ctaButton:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(255, 42, 127, 0.4);
+    color: white;
+    text-decoration: none;
+}
+
+/* Learning Path */
+.learningPath {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 1.5rem;
+    background: rgba(127, 42, 255, 0.04);
+    border-radius: 12px;
+    margin-bottom: 2rem;
+    border: 1px solid rgba(127, 42, 255, 0.1);
+}
+
+.learningPathIcon {
+    color: var(--wine-dark);
+    flex-shrink: 0;
+}
+
+.learningPathText {
+    font-size: 0.9rem;
+    color: var(--wine-darkest);
+    font-weight: 500;
+    line-height: 1.4;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+    .modalSidebar {
+        display: none;
+    }
+
+    .modalBody {
+        flex-direction: column;
+    }
+}
+
+@media (max-width: 768px) {
+    .heroTitle {
+        font-size: 2.2rem;
+    }
+
+    .heroSubtitle {
+        font-size: 1rem;
+    }
+
+    .videoGrid {
+        grid-template-columns: 1fr;
+    }
+
+    .categoryNav {
+        justify-content: flex-start;
+        overflow-x: auto;
+        padding-bottom: 1rem;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .categoryHeader {
+        flex-wrap: wrap;
+    }
+
+    .categoryCount {
+        margin-left: 0;
+    }
+
+    .heroStats {
+        gap: 1rem;
+    }
+
+    .statItem {
+        padding: 0.5rem 1rem;
+    }
+
+    .modalContent {
+        border-radius: 12px;
+    }
+
+    .modalOverlay {
+        padding: 1rem;
+    }
+
+    .progressSection {
+        padding: 2rem 1.5rem;
+    }
+
+    .container {
+        padding: 0 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero {
+        padding: 3rem 1rem 2rem;
+    }
+
+    .heroTitle {
+        font-size: 1.8rem;
+    }
+
+    .categoryTitle {
+        font-size: 1.4rem;
+    }
+
+    .videoContent {
+        padding: 1rem;
+    }
+}

txclient/src/app/landing/help/page.tsx

@@ -0,0 +1,317 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import style from "./help.module.css";
+import { videoCategories, Video, getTotalVideoCount } from "./videoData";
+import VideoModal from "./components/VideoModal";
+import AnimatedContainer from "@core/app/components/AnimatedConainer/AnimatedContainer";
+import HeaderConfProvider from "@core/app/components/HeaderConfProvider/HeaderConfProvider";
+import DefaultLoginAction from "@core/app/components/LoginAction/DefaultLoginAction";
+import { ScrollToTop } from "@core/app/components/ScrollTop";
+import Link from "next/link";
+
+export default function HelpPage() {
+    const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [activeCategory, setActiveCategory] = useState<string>("all");
+    const [watchedVideos, setWatchedVideos] = useState<Set<string>>(new Set());
+
+    const totalVideos = getTotalVideoCount();
+
+    useEffect(() => {
+        const watched = localStorage.getItem("tx-help-watched");
+        if (watched) {
+            setWatchedVideos(new Set(JSON.parse(watched)));
+        }
+    }, []);
+
+    const handleVideoClick = (video: Video) => {
+        setSelectedVideo(video);
+        setIsModalOpen(true);
+        const newWatched = new Set(watchedVideos);
+        newWatched.add(video.id);
+        setWatchedVideos(newWatched);
+        localStorage.setItem("tx-help-watched", JSON.stringify([...newWatched]));
+    };
+
+    const handleCloseModal = () => {
+        setIsModalOpen(false);
+        setTimeout(() => setSelectedVideo(null), 200);
+    };
+
+    const handleCategoryClick = (categoryId: string) => {
+        setActiveCategory(categoryId);
+        if (categoryId !== "all") {
+            const element = document.getElementById(`category-${categoryId}`);
+            if (element) {
+                element.scrollIntoView({ behavior: "smooth", block: "start" });
+            }
+        }
+    };
+
+    const progressPercent = Math.round((watchedVideos.size / totalVideos) * 100);
+
+    return (
+        <AnimatedContainer
+            color="#aeaeae"
+            minSize={150}
+            maxSize={500}
+            items={10}
+            style={{
+                display: "block",
+                width: "100%",
+                background: "var(--white)",
+            }}
+        >
+            <ScrollToTop />
+            <HeaderConfProvider />
+            <DefaultLoginAction />
+
+            <div className={style.container}>
+                {/* Hero Section */}
+                <div className={style.hero}>
+                    <div className={style.heroIcon}>
+                        <svg
+                            width="36"
+                            height="36"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="white"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        >
+                            <polygon points="5 3 19 12 5 21 5 3" />
+                        </svg>
+                    </div>
+                    <h1 className={style.heroTitle}>Centro de Ayuda</h1>
+                    <p className={style.heroSubtitle}>
+                        Aprende a usar TurnosXpress paso a paso con nuestros tutoriales en video.
+                        Desde la configuración inicial hasta las funciones más avanzadas,
+                        tenemos todo lo que necesitas para aprovechar al máximo la plataforma.
+                    </p>
+                    <div className={style.heroStats}>
+                        <div className={style.statItem}>
+                            <span className={style.statNumber}>{totalVideos}</span>
+                            <span className={style.statLabel}>Video tutoriales</span>
+                        </div>
+                        <div className={style.statItem}>
+                            <span className={style.statNumber}>{videoCategories.length}</span>
+                            <span className={style.statLabel}>Categorías</span>
+                        </div>
+                        <div className={style.statItem}>
+                            <span className={style.statNumber}>{watchedVideos.size}</span>
+                            <span className={style.statLabel}>Vistos</span>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Progress Section */}
+                {watchedVideos.size > 0 && (
+                    <div className={style.progressSection}>
+                        <h2 className={style.progressTitle}>
+                            Tu progreso de aprendizaje
+                        </h2>
+                        <p className={style.progressText}>
+                            Has visto {watchedVideos.size} de {totalVideos} tutoriales.
+                            {progressPercent === 100
+                                ? " ¡Felicidades! Has completado todos los tutoriales."
+                                : ` ¡Sigue así, te faltan ${totalVideos - watchedVideos.size}!`}
+                        </p>
+                        <div className={style.progressBar}>
+                            <div
+                                className={style.progressFill}
+                                style={{ width: `${progressPercent}%` }}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                {/* Category Navigation */}
+                <div className={style.categoryNav}>
+                    <button
+                        className={
+                            activeCategory === "all"
+                                ? style.categoryBtnActive
+                                : style.categoryBtn
+                        }
+                        onClick={() => {
+                            setActiveCategory("all");
+                            window.scrollTo({ top: 0, behavior: "smooth" });
+                        }}
+                    >
+                        Todos
+                    </button>
+                    {videoCategories.map((cat) => (
+                        <button
+                            key={cat.id}
+                            className={
+                                activeCategory === cat.id
+                                    ? style.categoryBtnActive
+                                    : style.categoryBtn
+                            }
+                            onClick={() => handleCategoryClick(cat.id)}
+                        >
+                            {cat.icon} {cat.name}
+                        </button>
+                    ))}
+                </div>
+
+                {/* Learning Path */}
+                <div className={style.learningPath}>
+                    <span className={style.learningPathIcon}>
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        >
+                            <circle cx="12" cy="12" r="10" />
+                            <path d="M12 16v-4" />
+                            <path d="M12 8h.01" />
+                        </svg>
+                    </span>
+                    <span className={style.learningPathText}>
+                        <strong>Recomendación:</strong> Sigue el orden de las categorías para
+                        un aprendizaje progresivo. Comienza con &quot;Primeros Pasos&quot; y
+                        avanza según tus necesidades.
+                    </span>
+                </div>
+
+                {/* Video Categories */}
+                {videoCategories.map((category) => (
+                    <div
+                        key={category.id}
+                        id={`category-${category.id}`}
+                        className={style.categorySection}
+                    >
+                        <div className={style.categoryHeader}>
+                            <div
+                                className={style.categoryIcon}
+                                style={{ background: category.color }}
+                            >
+                                <span style={{ fontSize: "1.5rem" }}>{category.icon}</span>
+                            </div>
+                            <div>
+                                <h2 className={style.categoryTitle}>{category.name}</h2>
+                                <p className={style.categoryDescription}>
+                                    {category.description}
+                                </p>
+                            </div>
+                            <span className={style.categoryCount}>
+                                {category.videos.length} videos
+                            </span>
+                        </div>
+
+                        <div className={style.videoGrid}>
+                            {category.videos.map((video, idx) => (
+                                <div
+                                    key={video.id}
+                                    className={style.videoCard}
+                                    onClick={() => handleVideoClick(video)}
+                                >
+                                    <div className={style.videoThumbnail}>
+                                        <img
+                                            src={video.thumbnail}
+                                            alt={video.title}
+                                            loading="lazy"
+                                        />
+                                        <div className={style.playOverlay}>
+                                            <div className={style.playButton}>
+                                                <div className={style.playIcon} />
+                                            </div>
+                                        </div>
+                                        {watchedVideos.has(video.id) && (
+                                            <div
+                                                style={{
+                                                    position: "absolute",
+                                                    top: "8px",
+                                                    left: "8px",
+                                                    background:
+                                                        "linear-gradient(135deg, #2aaa2a, #008011)",
+                                                    color: "white",
+                                                    padding: "3px 8px",
+                                                    borderRadius: "4px",
+                                                    fontSize: "0.7rem",
+                                                    fontWeight: 700,
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    gap: "3px",
+                                                }}
+                                            >
+                                                ✓ Visto
+                                            </div>
+                                        )}
+                                    </div>
+                                    <div className={style.videoContent}>
+                                        <h3 className={style.videoTitle}>{video.title}</h3>
+                                        <p className={style.videoDescription}>
+                                            {video.description}
+                                        </p>
+                                        <div className={style.videoMeta}>
+                                            <div className={style.videoStep}>
+                                                <span className={style.stepNumber}>
+                                                    {idx + 1}
+                                                </span>
+                                                Paso {idx + 1} de {category.videos.length}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+
+                {/* CTA Section */}
+                <div className={style.ctaSection}>
+                    <h2 className={style.ctaTitle}>¿Necesitas más ayuda?</h2>
+                    <p className={style.ctaText}>
+                        Si no encontrás lo que buscás, nuestro equipo de soporte está
+                        listo para ayudarte. También podés visitar nuestro canal de YouTube
+                        para más contenido.
+                    </p>
+                    <div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
+                        <a
+                            href="mailto:info@turnosxpress.com.ar"
+                            className={style.ctaButton}
+                        >
+                            ✉ Escribinos
+                        </a>
+                        <a
+                            href="https://www.youtube.com/@turnosxpress"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={style.ctaButton}
+                            style={{
+                                background: "var(--white)",
+                                color: "var(--wine-darkest)",
+                                boxShadow: "0 4px 15px rgba(0,0,0,0.1)",
+                            }}
+                        >
+                            ▶ Canal de YouTube
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            {/* Video Modal */}
+            <VideoModal
+                video={selectedVideo}
+                isOpen={isModalOpen}
+                onClose={handleCloseModal}
+                onSelectVideo={(video) => {
+                    setSelectedVideo(video);
+                    const newWatched = new Set(watchedVideos);
+                    newWatched.add(video.id);
+                    setWatchedVideos(newWatched);
+                    localStorage.setItem("tx-help-watched", JSON.stringify([...newWatched]));
+                }}
+            />
+        </AnimatedContainer>
+    );
+}

txclient/src/app/landing/help/videoData.ts

@@ -0,0 +1,210 @@
+export interface Video {
+    id: string;
+    title: string;
+    description: string;
+    thumbnail: string;
+    category: string;
+    order: number;
+}
+
+export interface VideoCategory {
+    id: string;
+    name: string;
+    description: string;
+    icon: string;
+    color: string;
+    videos: Video[];
+}
+
+export const videoCategories: VideoCategory[] = [
+    {
+        id: "getting-started",
+        name: "Primeros Pasos",
+        description: "Comienza tu recorrido con TurnosXpress. Aprende a registrarte y crear tu primera organización.",
+        icon: "🚀",
+        color: "linear-gradient(135deg, #ff2a7f 0%, #7f2aff 100%)",
+        videos: [
+            {
+                id: "QE5pEw_af5g",
+                title: "Cómo registrarse en TurnosXpress",
+                description: "Paso a paso completo para crear tu cuenta: formulario, verificación de correo y activación.",
+                thumbnail: "https://i2.ytimg.com/vi/QE5pEw_af5g/hqdefault.jpg",
+                category: "getting-started",
+                order: 1,
+            },
+            {
+                id: "Aufl00f4U0Y",
+                title: "Cómo crear una nueva organización en TurnosXpress",
+                description: "Crea tu organización: nombre, eslogan, categoría y configuración inicial.",
+                thumbnail: "https://i2.ytimg.com/vi/Aufl00f4U0Y/hqdefault.jpg",
+                category: "getting-started",
+                order: 2,
+            },
+        ],
+    },
+    {
+        id: "services",
+        name: "Configuración de Servicios",
+        description: "Aprende a crear, personalizar y hacer visibles tus servicios para los clientes.",
+        icon: "🎯",
+        color: "linear-gradient(135deg, #7f2aff 0%, #3300ff 100%)",
+        videos: [
+            {
+                id: "hgs9w9Q7w2k",
+                title: "Cómo crear tu primer servicio en TurnosXpress",
+                description: "Crea servicios con nombre, descripción, precio, duración y límite de turnos.",
+                thumbnail: "https://i1.ytimg.com/vi/hgs9w9Q7w2k/hqdefault.jpg",
+                category: "services",
+                order: 1,
+            },
+            {
+                id: "UthPmnzR7fg",
+                title: "Cómo asignar una imagen a tus servicios",
+                description: "Personaliza tus servicios agregando imágenes representativas.",
+                thumbnail: "https://i2.ytimg.com/vi/UthPmnzR7fg/hqdefault.jpg",
+                category: "services",
+                order: 2,
+            },
+            {
+                id: "p6_ax-B2vDA",
+                title: "Haz visibles tus servicios en TurnosXpress",
+                description: "Configura servicios como públicos para que aparezcan en la pantalla principal.",
+                thumbnail: "https://i1.ytimg.com/vi/p6_ax-B2vDA/hqdefault.jpg",
+                category: "services",
+                order: 3,
+            },
+            {
+                id: "tzVF2MeW37I",
+                title: "Cómo asignar un servicio a un colaborador",
+                description: "Asigna servicios a los colaboradores de tu organización.",
+                thumbnail: "https://i.ytimg.com/vi/tzVF2MeW37I/hqdefault.jpg",
+                category: "services",
+                order: 4,
+            },
+        ],
+    },
+    {
+        id: "schedules",
+        name: "Gestión de Horarios",
+        description: "Configura la disponibilidad horaria de tus colaboradores y habilita turnos.",
+        icon: "📅",
+        color: "linear-gradient(135deg, #00aa16 0%, #008011 100%)",
+        videos: [
+            {
+                id: "enu2ny1k6XU",
+                title: "Cómo configurar la disponibilidad horaria",
+                description: "Define rangos horarios disponibles para cada día de la semana por colaborador.",
+                thumbnail: "https://i2.ytimg.com/vi/enu2ny1k6XU/hqdefault.jpg",
+                category: "schedules",
+                order: 1,
+            },
+            {
+                id: "8kBxSYoisSM",
+                title: "Cómo habilitar horarios disponibles",
+                description: "Habilita o deshabilita la disponibilidad de turnos para varias semanas.",
+                thumbnail: "https://i1.ytimg.com/vi/8kBxSYoisSM/hqdefault.jpg",
+                category: "schedules",
+                order: 2,
+            },
+        ],
+    },
+    {
+        id: "clients-bookings",
+        name: "Clientes y Reservas",
+        description: "Administra clientes, reservas recurrentes y ayuda con la activación de cuentas.",
+        icon: "👥",
+        color: "linear-gradient(135deg, #ff982a 0%, #ff4a2a 100%)",
+        videos: [
+            {
+                id: "BcHrqxW_PTs",
+                title: "Cómo configurar y administrar reservas recurrentes",
+                description: "Crea repeticiones semanales, gestiona turnos y libera horarios fácilmente.",
+                thumbnail: "https://i3.ytimg.com/vi/BcHrqxW_PTs/hqdefault.jpg",
+                category: "clients-bookings",
+                order: 1,
+            },
+            {
+                id: "MVpCGA-w7c8",
+                title: "Cómo ayudar a un cliente a activar su cuenta",
+                description: "Asiste a tus clientes con la activación de cuenta desde el panel de Asistencia.",
+                thumbnail: "https://i2.ytimg.com/vi/MVpCGA-w7c8/hqdefault.jpg",
+                category: "clients-bookings",
+                order: 2,
+            },
+        ],
+    },
+    {
+        id: "payments-discounts",
+        name: "Pagos y Descuentos",
+        description: "Registra pagos de reservas y crea descuentos para fidelizar clientes.",
+        icon: "💰",
+        color: "linear-gradient(135deg, #2aaa2a 0%, #008011 100%)",
+        videos: [
+            {
+                id: "CpGNWAJo6MM",
+                title: "Cómo registrar el pago de una reserva",
+                description: "Registra pagos, revisa adeudados y consulta movimientos en caja.",
+                thumbnail: "https://i4.ytimg.com/vi/CpGNWAJo6MM/hqdefault.jpg",
+                category: "payments-discounts",
+                order: 1,
+            },
+            {
+                id: "UAh7HkOcvMQ",
+                title: "Cómo crear y aplicar descuentos",
+                description: "Crea descuentos por porcentaje o monto fijo y aplícalos en turnos o servicios.",
+                thumbnail: "https://i2.ytimg.com/vi/UAh7HkOcvMQ/hqdefault.jpg",
+                category: "payments-discounts",
+                order: 2,
+            },
+        ],
+    },
+    {
+        id: "customization",
+        name: "Personalización y Comunicación",
+        description: "Personaliza tu organización, configura notificaciones y vincula WhatsApp.",
+        icon: "🎨",
+        color: "linear-gradient(135deg, #fde456 0%, #ff982a 100%)",
+        videos: [
+            {
+                id: "iu7sGYW1iGk",
+                title: "Cómo personalizar tu organización",
+                description: "Cambia imagen de cabecera, color de fondo, fuente y sombra del texto.",
+                thumbnail: "https://i2.ytimg.com/vi/iu7sGYW1iGk/hqdefault.jpg",
+                category: "customization",
+                order: 1,
+            },
+            {
+                id: "nZkBIpmLRyI",
+                title: "Cómo agregar la dirección de tu negocio",
+                description: "Configura la ubicación de tu negocio para que los clientes te encuentren.",
+                thumbnail: "https://i.ytimg.com/vi/nZkBIpmLRyI/hqdefault.jpg",
+                category: "customization",
+                order: 2,
+            },
+            {
+                id: "oJuvDdewG1I",
+                title: "Cómo crear plantillas de notificaciones",
+                description: "Diseña mensajes con datos dinámicos para altas de turnos y recordatorios.",
+                thumbnail: "https://i4.ytimg.com/vi/oJuvDdewG1I/hqdefault.jpg",
+                category: "customization",
+                order: 3,
+            },
+            {
+                id: "wjJfoky6VD0",
+                title: "Cómo vincular WhatsApp en TurnosXpress",
+                description: "Asigna servidor, crea instancia de WhatsApp y escanea el código QR.",
+                thumbnail: "https://i4.ytimg.com/vi/wjJfoky6VD0/hqdefault.jpg",
+                category: "customization",
+                order: 4,
+            },
+        ],
+    },
+];
+
+export const getAllVideos = (): Video[] => {
+    return videoCategories.flatMap((cat) => cat.videos);
+};
+
+export const getTotalVideoCount = (): number => {
+    return getAllVideos().length;
+};

txclient/src/app/landing/org/[oid]/HeaderEditPopup.tsx

@@ -0,0 +1,187 @@
+"use client";
+import { useState, useEffect } from "react";
+import { Grid2, IconButton, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import turnosXpressTheme from "@core/app/theme/turnosXpress";
+import Button from "@mui/material/Button";
+import { ThemeProvider } from "@emotion/react";
+import { PopoverPicker } from "@components/ColorPicker/ColorPicker";
+import ImagePicker from "@components/ImagePicker/ImagePicker";
+import { useAlert } from "@core/Store/Alert.Store";
+import { useSessionStore } from "@core/Store/Sesion.Store";
+import { useOrganizationHeaderStore } from "@core/Store/OrganizationHeader.Store";
+import { updateOrganizationColors, uploadHeaderImage } from "@services/Header.Edit.Service";
+import { UpdateCompanyParams } from "@models/Company.model";
+
+interface HeaderEditPopupProps {
+    open: boolean;
+    onClose: () => void;
+    companyId: string;
+    headerColor: string;
+    headerFontColor: string;
+    headerFontShadowColor: string;
+    headerImage: string;
+    onSaved: () => void;
+    onRefresh?: () => void;
+}
+
+export default function HeaderEditPopup(props: HeaderEditPopupProps) {
+    const { open, onClose, companyId, headerColor, headerFontColor, headerFontShadowColor, headerImage, onSaved, onRefresh } = props;
+    const alert = useAlert();
+    const SessionInfo = useSessionStore();
+    const organizationHeader = useOrganizationHeaderStore();
+
+    const [headerColorState, setHeaderColorState] = useState("");
+    const [headerFontColorState, setHeaderFontColorState] = useState("");
+    const [headerFontShadowColorState, setHeaderFontShadowColorState] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    // Sync local state when values change externally
+    useEffect(() => {
+        if (open) {
+            setHeaderColorState(headerColor || "");
+            setHeaderFontColorState(headerFontColor || "");
+            setHeaderFontShadowColorState(headerFontShadowColor || "");
+            setLoading(false);
+        }
+    }, [open, headerColor, headerFontColor, headerFontShadowColor]);
+
+    const handleSaveColors = async () => {
+        setLoading(true);
+
+        try {
+            const updData: UpdateCompanyParams = {
+                id: companyId,
+                headerColor: headerColorState,
+                headerFontColor: headerFontColorState,
+                headerFontShadowColor: headerFontShadowColorState,
+                sessionUser: SessionInfo.userId,
+            };
+
+            await updateOrganizationColors(updData);
+
+            organizationHeader.setHeaderColor(headerColorState);
+            organizationHeader.setHeaderFontColor(headerFontColorState);
+            organizationHeader.setHeaderFontShadowColor(headerFontShadowColorState);
+
+            alert.showSuccess("Colores actualizados");
+            onSaved();
+            onRefresh?.();
+        } catch (error) {
+            const formatted = error instanceof Error ? error.message : "Error al guardar los colores";
+            alert.showError(formatted || "Error al guardar los colores");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        setLoading(true);
+
+        try {
+            const formData = new FormData();
+            formData.append("companyId", companyId);
+            formData.append("sessionUser", SessionInfo.userId);
+            formData.append("file", file);
+
+            uploadHeaderImage(formData).then(() => {
+                alert.showSuccess("Imagen actualizada");
+                onSaved();
+                onRefresh?.();
+            }).catch((error) => {
+                const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
+                alert.showError(formatted || "Error al guardar la imagen");
+            }).finally(() => {
+                setLoading(false);
+            });
+        } catch (error) {
+            const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
+            alert.showError(formatted || "Error al guardar la imagen");
+            setLoading(false);
+        }
+    };
+
+    return (
+        <ThemeProvider theme={turnosXpressTheme}>
+            <Dialog
+                open={open}
+                onClose={onClose}
+                maxWidth="sm"
+                fullWidth
+                PaperProps={{
+                    sx: {
+                        borderRadius: 2,
+                        height: 500,
+                    },
+                }}
+            >
+                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                    Personalizar
+                    <IconButton onClick={onClose} size="small">
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+
+                <DialogContent dividers sx={{ p: 3 }}>
+                    {/* Colores */}
+                    <Grid2 container spacing={1} mb={3}>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Fondo"
+                                color={headerColorState}
+                                onChange={(color: string) => {
+                                    setHeaderColorState(color);
+                                }}
+                            />
+                        </Grid2>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Fuente"
+                                color={headerFontColorState}
+                                onChange={(color: string) => {
+                                    setHeaderFontColorState(color);
+                                }}
+                            />
+                        </Grid2>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Sombra"
+                                color={headerFontShadowColorState}
+                                onChange={(color: string) => {
+                                    setHeaderFontShadowColorState(color);
+                                }}
+                            />
+                        </Grid2>
+                    </Grid2>
+
+                    {/* Imagen */}
+                    <ImagePicker
+                        src={headerImage}
+                        alt="Cabecera"
+                        style={{ width: "100%", height: 120, borderRadius: 8 }}
+                        readOnly={false}
+                        onChange={handleImageChange}
+                        imageSizeSrc="/org-header-size.webp"
+                        mbLimit={5}
+                    />
+                </DialogContent>
+
+                <DialogActions sx={{ px: 3, pb: 2 }}>
+                    <Button onClick={onClose}>Cancelar</Button>
+                    <Button
+                        onClick={handleSaveColors}
+                        autoFocus
+                        color="success"
+                        variant="contained"
+                        disabled={loading}
+                    >
+                        Guardar
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </ThemeProvider>
+    );
+}

txclient/src/app/landing/org/[oid]/Org.Service.ts

@@ -0,0 +1,13 @@
+import ApiRequest from "@services/Api.Service";
+import { UpdateCompanyParams } from "@models/Company.model";
+import { ApiVoidResult } from "@models/Api.VoidResult.type";
+
+export const updateOrganizationsById = async (
+    data: UpdateCompanyParams
+): Promise<ApiVoidResult> => {
+    return ApiRequest.post<ApiVoidResult>("companies/update", data);
+};
+
+export const uploadHeaderImage = async (data: FormData): Promise<ApiVoidResult> => {
+    return ApiRequest.postFile<ApiVoidResult>("companies/upload-header", data);
+};

txclient/src/app/landing/org/[oid]/layout.tsx

@@ -45,7 +45,9 @@ export default async function OrganizationPublicProfile({ params, children }: Pr
             <div className="homeCentered">
                 {orgData.id && (
                     <>
-                        <OrganizationHeader organization={orgData} />
+                        <div style={{ position: "relative" }} id="header-wrapper">
+                            <OrganizationHeader organization={orgData} />
+                        </div>
                         <OrganizationDataConnector orgData={orgData} />
                         <div>{children}</div>
                     </>

txclient/src/app/landing/org/[oid]/page.tsx

@@ -43,7 +43,10 @@ import { useSessionStore } from "@core/Store/Sesion.Store";
 import { EVENT_TYPES, useEventHandlerStore } from "@core/Store/EventHandler.Store";
 import { useAlert } from "@core/Store/Alert.Store";
 import { IPost } from "@core/Models/Posts.model";
-import { preprocessQuillHtml, transformQuillContentForDisplay } from "@core/app/helpers/htmlSainitize";
+import {
+    preprocessQuillHtml,
+    transformQuillContentForDisplay,
+} from "@core/app/helpers/htmlSainitize";
 import { useSearchParams } from "next/navigation";
 
 import { ThemeProvider } from "@emotion/react";
@@ -55,12 +58,14 @@ import DownIcon from "@mui/icons-material/ArrowDownwardRounded";
 import PinIcon from "@mui/icons-material/PushPin";
 import EditIcon from "@mui/icons-material/AutoFixHigh";
 import turnosXpressTheme from "@core/app/theme/turnosXpress";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import dayjs from "dayjs";
 import { useConfirmStore } from "@core/Store/Confirm.Store";
 import ReviewsCarousel from "@core/app/components/ReviewsCarousel/ReviewsCarousel";
 import OrganizationProfessionals from "@core/app/components/OrganizationProfessionals/OrganizationProfessionals";
 import { RatingTargetType } from "@core/Models/Ratings.model";
+import HeaderEditPopup from "./HeaderEditPopup";
+import { checkOrgAdmin } from "./post.service";
 
 enum VIEW {
     POSTS = "posts",
@@ -76,6 +81,7 @@ type UrlData = {
 export default function OrganizationPublicProfile() {
     const data = useParams<UrlData>();
     const oid = data.oid;
+    const router = useRouter();
     const OrganizationData = useOrgDataStore();
     const [position, setPosition] = useState<[number, number]>([0, 0]);
     const [orgData, setOrgData] = useState<PublicOrganizationView>();
@@ -96,8 +102,85 @@ export default function OrganizationPublicProfile() {
     const [posts, setPosts] = useState<IPost[]>([]);
     const [authorizedUsers, setAuthorizedUsers] = useState<string[]>([]);
     const [currentPage, setCurrentPage] = useState<number>(1);
-
+    const [isOrgAdmin, setIsOrgAdmin] = useState<boolean>(false);
+    const [showEditPopup, setShowEditPopup] = useState<boolean>(false);
     const SessionInfo = useSessionStore();
+
+    // Unified effect: check admin status and manage edit button DOM element
+    useEffect(() => {
+        if (!SessionInfo.userId || !oid) {
+            setIsOrgAdmin(false);
+            const existing = document.getElementById("edit-header-btn");
+            if (existing) existing.remove();
+            return;
+        }
+
+        let cancelled = false;
+
+        checkOrgAdmin(oid, SessionInfo.userId)
+            .then((isAdmin) => {
+                if (cancelled) return;
+                console.log("isAdmin:", isAdmin);
+                setIsOrgAdmin(isAdmin);
+
+                // Append or remove button based on the result
+                const wrapper = document.getElementById("header-wrapper");
+                if (!wrapper) return;
+
+                if (isAdmin) {
+                    const existingBtn = document.getElementById("edit-header-btn");
+                    if (existingBtn) existingBtn.remove();
+
+                    const btn = document.createElement("div");
+                    btn.id = "edit-header-btn";
+                    btn.innerHTML = `
+                        <button style="
+                            position: absolute;
+                            top: 12px;
+                            right: 12px;
+                            width: 40px;
+                            height: 40px;
+                            border-radius: 50%;
+                            background: rgba(0,0,0,0.45);
+                            color: white;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            z-index: 100;
+                            transition: background 0.2s;
+                        " onmouseover="this.style.background='rgba(0,0,0,0.7)'" onmouseout="this.style.background='rgba(0,0,0,0.45)'">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+                        </button>
+                    `;
+                    btn.querySelector("button")!.addEventListener("click", () =>
+                        setShowEditPopup(true),
+                    );
+                    wrapper.appendChild(btn);
+                } else {
+                    // Remove button for non-admin users
+                    const existingBtn = document.getElementById("edit-header-btn");
+                    if (existingBtn) existingBtn.remove();
+                }
+            })
+            .catch(() => {
+                if (cancelled) return;
+                setIsOrgAdmin(false);
+
+                // Ensure button is removed on error
+                const existingBtn = document.getElementById("edit-header-btn");
+                if (existingBtn) existingBtn.remove();
+            });
+
+        // Cleanup: mark as cancelled and remove button
+        return () => {
+            cancelled = true;
+            const existing = document.getElementById("edit-header-btn");
+            if (existing) existing.remove();
+        };
+    }, [SessionInfo.userId, oid]);
+
     const eventHandler = useEventHandlerStore();
     const alert = useAlert();
     const confirm = useConfirmStore();
@@ -338,7 +421,8 @@ export default function OrganizationPublicProfile() {
                             return response.data;
                         }
                         const newPosts = response.data.filter(
-                            (newPost) => !prevPosts.some((prevPost) => prevPost._id === newPost._id),
+                            (newPost) =>
+                                !prevPosts.some((prevPost) => prevPost._id === newPost._id),
                         );
 
                         return [...prevPosts, ...newPosts];
@@ -508,7 +592,11 @@ export default function OrganizationPublicProfile() {
                         gap: "10px",
                     }}
                 >
-                    <WhatsappShareButton title={shareTitle} separator=":: " url={window.location.href}>
+                    <WhatsappShareButton
+                        title={shareTitle}
+                        separator=":: "
+                        url={window.location.href}
+                    >
                         <WhatsAppShareIcon size={32} round />
                     </WhatsappShareButton>
                     <FacebookShareButton title={shareTitle} url={window.location.href}>
@@ -531,6 +619,21 @@ export default function OrganizationPublicProfile() {
     return (
         <>
             <HeaderConfProvider />
+            {isOrgAdmin && oid && orgData && (
+                <HeaderEditPopup
+                    open={showEditPopup}
+                    onClose={() => setShowEditPopup(false)}
+                    companyId={oid}
+                    headerColor={orgData.headerColor}
+                    headerFontColor={orgData.headerFontColor}
+                    headerFontShadowColor={orgData.headerFontShadowColor}
+                    headerImage={orgData.headerFile}
+                    onSaved={() => {
+                        setShowEditPopup(false);
+                    }}
+                    onRefresh={() => router.refresh()}
+                />
+            )}
             {orgData && (
                 <div className={style.organizationContent}>
                     {showEditor && (
@@ -656,7 +759,9 @@ export default function OrganizationPublicProfile() {
                                         )}
                                     </div>
                                     {view === VIEW.SERVICES && (
-                                        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                                        <div
+                                            style={{ display: "flex", justifyContent: "flex-end" }}
+                                        >
                                             <ButtonGroup
                                                 variant="outlined"
                                                 aria-label="Basic button group"
@@ -711,7 +816,8 @@ export default function OrganizationPublicProfile() {
                                                 <div
                                                     style={{
                                                         textAlign: "center",
-                                                        backgroundImage: "url(/no-conversation.webp)",
+                                                        backgroundImage:
+                                                            "url(/no-conversation.webp)",
                                                         backgroundRepeat: "no-repeat",
                                                         backgroundPosition: "center center",
                                                         backgroundSize: "50% auto",
@@ -726,7 +832,8 @@ export default function OrganizationPublicProfile() {
                                                     <div
                                                         key={post._id}
                                                         style={{
-                                                            borderBottom: "1px solid var(--gray-light)",
+                                                            borderBottom:
+                                                                "1px solid var(--gray-light)",
                                                             paddingTop: "5px",
                                                             paddingBottom: "10px",
                                                             paddingLeft: "30px",
@@ -740,7 +847,11 @@ export default function OrganizationPublicProfile() {
                                                                 justifyContent: "space-between",
                                                             }}
                                                         >
-                                                            <div style={{ color: "var(--gray-darkest)" }}>
+                                                            <div
+                                                                style={{
+                                                                    color: "var(--gray-darkest)",
+                                                                }}
+                                                            >
                                                                 {dayjs(post.createdAt).format(
                                                                     "DD MMMM YYYY HH:mm",
                                                                 )}
@@ -780,22 +891,30 @@ export default function OrganizationPublicProfile() {
                                                                     color: "var(--gray-darkest)",
                                                                 }}
                                                             >
-                                                                <ThemeProvider theme={turnosXpressTheme}>
+                                                                <ThemeProvider
+                                                                    theme={turnosXpressTheme}
+                                                                >
                                                                     <MaterialButton
                                                                         color="inherit"
                                                                         startIcon={<ClipIcon />}
                                                                         onClick={() => {
-                                                                            fijarPost(`${post._id}`);
+                                                                            fijarPost(
+                                                                                `${post._id}`,
+                                                                            );
                                                                         }}
                                                                     >
-                                                                        {post.fixed ? "Liberar" : "Fijar"}
+                                                                        {post.fixed
+                                                                            ? "Liberar"
+                                                                            : "Fijar"}
                                                                     </MaterialButton>
 
                                                                     {post.fixed && (
                                                                         <>
                                                                             <MaterialButton
                                                                                 color="inherit"
-                                                                                startIcon={<UpIcon />}
+                                                                                startIcon={
+                                                                                    <UpIcon />
+                                                                                }
                                                                                 onClick={() => {
                                                                                     moverPost(
                                                                                         `${post._id}`,
@@ -808,7 +927,9 @@ export default function OrganizationPublicProfile() {
 
                                                                             <MaterialButton
                                                                                 color="inherit"
-                                                                                startIcon={<DownIcon />}
+                                                                                startIcon={
+                                                                                    <DownIcon />
+                                                                                }
                                                                                 onClick={() => {
                                                                                     moverPost(
                                                                                         `${post._id}`,
@@ -824,7 +945,9 @@ export default function OrganizationPublicProfile() {
                                                                     <MaterialButton
                                                                         color="inherit"
                                                                         onClick={() => {
-                                                                            editarPost(`${post._id}`);
+                                                                            editarPost(
+                                                                                `${post._id}`,
+                                                                            );
                                                                         }}
                                                                     >
                                                                         <EditIcon />
@@ -833,7 +956,9 @@ export default function OrganizationPublicProfile() {
                                                                     <MaterialButton
                                                                         color="inherit"
                                                                         onClick={() => {
-                                                                            eliminarPost(`${post._id}`);
+                                                                            eliminarPost(
+                                                                                `${post._id}`,
+                                                                            );
                                                                         }}
                                                                     >
                                                                         <DeleteIcon />
@@ -858,7 +983,8 @@ export default function OrganizationPublicProfile() {
                                                 style={{
                                                     padding: "0px 0px 40px 0px",
                                                     display: "flex",
-                                                    flexDirection: viewMode === "card" ? "row" : "column",
+                                                    flexDirection:
+                                                        viewMode === "card" ? "row" : "column",
                                                     justifyContent: "start",
                                                     gap: "20px",
                                                     flexWrap: "wrap",

txclient/src/app/landing/org/[oid]/post.service.ts

@@ -65,3 +65,7 @@ export const toggleFixedPost = async (data: FixCompanyPostParams): Promise<void>
 export const moveFixedPost = async (data: MoveCompanyFixedPostParams): Promise<void> => {
     return ApiRequest.post<void>("companies/move-fixed-post", data);
 };
+
+export const checkOrgAdmin = async (companyId: string, sessionUser: string): Promise<boolean> => {
+    return ApiRequest.post<boolean>("companies/check-admin", { companyId, sessionUser });
+};

txclient/src/app/landing/service/[sid]/Service.Service.ts

@@ -0,0 +1,10 @@
+import ApiRequest from "@services/Api.Service";
+import { ApiVoidResult } from "@models/Api.VoidResult.type";
+
+export const uploadServiceImage = async (data: FormData): Promise<ApiVoidResult> => {
+    return ApiRequest.postFile<ApiVoidResult>("services/upload-image", data);
+};
+
+export const checkOrgAdmin = async (companyId: string, sessionUser: string): Promise<boolean> => {
+    return ApiRequest.post<boolean>("companies/check-admin", { companyId, sessionUser });
+};

txclient/src/app/landing/service/[sid]/ServiceDetailCard.tsx

@@ -0,0 +1,59 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import ProductItem from "@core/app/components/ProductItem/ProductItem";
+import { PublicServiceView } from "@models/Service.model";
+import { PublicOrganizationView } from "@models/Company.model";
+import ServiceImageEditPopup from "./ServiceImageEditPopup";
+import { useSessionStore } from "@core/Store/Sesion.Store";
+import { checkOrgAdmin } from "@services/Header.Edit.Service";
+
+interface ServiceDetailCardProps {
+    service: PublicServiceView;
+    organization: PublicOrganizationView;
+}
+
+export default function ServiceDetailCard({ service, organization }: ServiceDetailCardProps) {
+    const router = useRouter();
+    const SessionInfo = useSessionStore();
+    const [isAdmin, setIsAdmin] = useState(false);
+    const [showEditPopup, setShowEditPopup] = useState(false);
+
+    useEffect(() => {
+        if (!SessionInfo.userId || !organization.id || !service.id) return;
+
+        checkOrgAdmin(organization.id, SessionInfo.userId)
+            .then((result) => {
+                setIsAdmin(result);
+            })
+            .catch(() => {
+                setIsAdmin(false);
+            });
+    }, [SessionInfo.userId, organization.id, service.id]);
+
+    const handleImageSaved = () => {
+        setShowEditPopup(false);
+        router.refresh();
+    };
+
+    return (
+        <>
+            <ProductItem
+                product={service}
+                width="100%"
+                isAdmin={isAdmin}
+                onImageEdit={() => setShowEditPopup(true)}
+            />
+            {isAdmin && (
+                <ServiceImageEditPopup
+                    open={showEditPopup}
+                    onClose={() => setShowEditPopup(false)}
+                    serviceId={service.id}
+                    companyId={organization.id}
+                    currentImage={service.image}
+                    onSaved={handleImageSaved}
+                />
+            )}
+        </>
+    );
+}

txclient/src/app/landing/service/[sid]/ServiceImageEditPopup.tsx

@@ -0,0 +1,105 @@
+"use client";
+import { useState } from "react";
+import { IconButton, Dialog, DialogActions, DialogContent, DialogTitle, Button } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import turnosXpressTheme from "@core/app/theme/turnosXpress";
+import { ThemeProvider } from "@emotion/react";
+import ImagePicker from "@components/ImagePicker/ImagePicker";
+import { useAlert } from "@core/Store/Alert.Store";
+import { useSessionStore } from "@core/Store/Sesion.Store";
+import { uploadServiceImage } from "@services/Header.Edit.Service";
+
+interface ServiceImageEditPopupProps {
+    open: boolean;
+    onClose: () => void;
+    serviceId: string;
+    companyId: string;
+    currentImage: string;
+    onSaved: () => void;
+}
+
+export default function ServiceImageEditPopup(props: ServiceImageEditPopupProps) {
+    const { open, onClose, serviceId, companyId, currentImage, onSaved } = props;
+    const alert = useAlert();
+    const SessionInfo = useSessionStore();
+    const [loading, setLoading] = useState(false);
+
+    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        setLoading(true);
+
+        try {
+            const formData = new FormData();
+            formData.append("companyId", companyId);
+            formData.append("serviceId", serviceId);
+            formData.append("sessionUser", SessionInfo.userId);
+            formData.append("file", file);
+
+            uploadServiceImage(formData)
+                .then(() => {
+                    alert.showSuccess("Imagen actualizada");
+                    onSaved();
+                })
+                .catch((error) => {
+                    const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
+                    alert.showError(formatted || "Error al guardar la imagen");
+                })
+                .finally(() => {
+                    setLoading(false);
+                });
+        } catch (error) {
+            const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
+            alert.showError(formatted || "Error al guardar la imagen");
+            setLoading(false);
+        }
+    };
+
+    return (
+        <ThemeProvider theme={turnosXpressTheme}>
+            <Dialog
+                open={open}
+                onClose={onClose}
+                maxWidth="sm"
+                fullWidth
+                PaperProps={{
+                    sx: {
+                        borderRadius: 2,
+                        width: 'auto',
+                        height: 'auto',
+                    },
+                }}
+            >
+                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", py: 2 }}>
+                    Editar imagen del servicio
+                    <IconButton onClick={onClose} size="small">
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+
+                <DialogContent dividers sx={{ p: 3, display: "flex", justifyContent: "center" }}>
+                    <ImagePicker
+                        src={currentImage}
+                        alt="Imagen del servicio"
+                        style={{ width: 400, height: 400, borderRadius: 8 }}
+                        readOnly={false}
+                        onChange={handleImageChange}
+                        imageSizeSrc="/service-image-size.webp"
+                        mbLimit={5}
+                    />
+                </DialogContent>
+
+                <DialogActions sx={{ px: 3, pb: 2, pt: 1 }}>
+                    <Button onClick={onClose}>Cancelar</Button>
+                    <Button
+                        onClick={() => {}}
+                        disabled={loading}
+                    >
+                        Guardar
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </ThemeProvider>
+    );
+}

txclient/src/app/landing/service/[sid]/page.tsx

@@ -2,7 +2,6 @@ import AnimatedContainer from "@components/AnimatedConainer/AnimatedContainer";
 import style from "./profile.module.css";
 import ApiServerService from "@services/Api.Server.Service";
 import { PublicOrganizationServiceView } from "@core/Models/Service.model";
-import ProductItem from "@core/app/components/ProductItem/ProductItem";
 import Appointment from "./components/Appointment/Appointment";
 import OrganizationHeader from "@components/Home/OrganizationHeader/OrganizationHeader";
 import ProductGallery from "@core/app/components/Home/ProductsGallery/ProductGallery";
@@ -12,6 +11,8 @@ import ServicePrivate from "@core/app/components/ServicePrivate/ServicePrivate";
 import EvangelizeBanner from "@components/EvangelizeBanner/EvangelizeBanner";
 import ReviewsCarousel from "@components/ReviewsCarousel/ReviewsCarousel";
 import { RatingTargetType } from "@core/Models/Ratings.model";
+import ServiceDetailCard from "./ServiceDetailCard";
+import OrganizationHeaderEdit from "@components/OrganizationHeaderEdit/OrganizationHeaderEdit";
 
 const GetServiceData = async (serviceId: string): Promise<PublicOrganizationServiceView> => {
     try {
@@ -56,11 +57,20 @@ export default async function OrganizationPublicProfile({ params }: Props) {
                     <ScrollToTop />
                     <HeaderConfProvider />
                     <div className="homeCentered">
-                        <OrganizationHeader organization={organizationService.organization} />
+                        <div id="header-wrapper" style={{ position: "relative" }}>
+                            <OrganizationHeader organization={organizationService.organization} />
+                        </div>
+                        <OrganizationHeaderEdit
+                            companyId={organizationService.organization.id}
+                            headerColor={organizationService.organization.headerColor}
+                            headerFontColor={organizationService.organization.headerFontColor}
+                            headerFontShadowColor={organizationService.organization.headerFontShadowColor}
+                            headerImage={organizationService.organization.headerFile}
+                        />
                         <div className={style.organizationContent}>
                             <div className={style.serviceSide}>
                                 <div className={style.stickyWrapper}>
-                                    <ProductItem product={organizationService.service} width="100%" />
+                                    <ServiceDetailCard service={organizationService.service} organization={organizationService.organization} />
                                 </div>
                             </div>
                             <div className={style.bookingSide}>