tas-uell-sdk 0.0.6 → 0.1.0

package/fesm2020/tas-uell-sdk.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Component, ChangeDetectionStrategy, Input, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Inject, Component, ChangeDetectionStrategy, Input, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 import * as OT from '@opentok/client';
 import interact from 'interactjs';
 import * as i1 from '@ng-bootstrap/ng-bootstrap';
-import * as i3 from '@angular/common';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
@@ -86,6 +87,12 @@ var ViewMode;
     ViewMode["FULLSCREEN"] = "FULLSCREEN";
     ViewMode["PIP"] = "PIP";
 })(ViewMode || (ViewMode = {}));
+// Appointment types
+var AppointmentStatus;
+(function (AppointmentStatus) {
+    AppointmentStatus["CONFIRMED"] = "CONFIRMED";
+    AppointmentStatus["CANCELLED"] = "CANCELLED";
+})(AppointmentStatus || (AppointmentStatus = {}));
 
 class TasService {
     constructor(httpClient, config) {
@@ -120,6 +127,15 @@ class TasService {
         this.ownerHasLeft$ = this.ownerHasLeftSubject.asObservable();
         this.joinableSubject = new BehaviorSubject(false);
         this.joinable$ = this.joinableSubject.asObservable();
+        // Observable for when backend requests geolocation activation
+        this.activateGeoSubject = new BehaviorSubject(false);
+        this.activateGeo$ = this.activateGeoSubject.asObservable();
+        // Observable for when geo request is active (owner waiting for user response)
+        this.geoRequestActiveSubject = new BehaviorSubject(false);
+        this.geoRequestActive$ = this.geoRequestActiveSubject.asObservable();
+        // Observable for when all geo has been granted
+        this.allGeoGrantedSubject = new BehaviorSubject(false);
+        this.allGeoGranted$ = this.allGeoGrantedSubject.asObservable();
         this.statusPollingInterval = null;
         this.DEFAULT_POLL_INTERVAL_MS = 30000; // Default 30s
         this.wasOwnerPresent = false;
@@ -411,6 +427,19 @@ class TasService {
             throw error;
         }));
     }
+    /**
+     * Get user appointments within a date range.
+     * @param params Date range for querying appointments
+     * @returns Observable of appointment array
+     */
+    getAppointments(params) {
+        return this.httpClient
+            .get(`v2/proxy/appointment/agendas/user/appointments?fromDate=${params.fromDate}&toDate=${params.toDate}`, { headers: {} })
+            .pipe(catchError((error) => {
+            console.error('TAS Service: getAppointments failed', error);
+            throw error;
+        }));
+    }
     /**
      * Start automatic status polling for the current session.
      * Status is polled every STATUS_POLL_INTERVAL_MS milliseconds.
@@ -447,6 +476,21 @@ class TasService {
         }
         // Update joinable status
         this.joinableSubject.next(content.joinable);
+        // Update activateGeo status
+        if (content.activateGeo !== undefined) {
+            console.log('[TAS DEBUG] activateGeo received:', content.activateGeo);
+            this.activateGeoSubject.next(content.activateGeo);
+        }
+        // Update geoRequestActive status (owner waiting for user geo response)
+        if (content.geoRequestActive !== undefined) {
+            console.log('[TAS DEBUG] geoRequestActive received:', content.geoRequestActive);
+            this.geoRequestActiveSubject.next(content.geoRequestActive);
+        }
+        // Update allGeoGranted status (all users responded with geo)
+        if (content.allGeoGranted !== undefined) {
+            console.log('[TAS DEBUG] allGeoGranted received:', content.allGeoGranted);
+            this.allGeoGrantedSubject.next(content.allGeoGranted);
+        }
         // Check if owner has joined
         const ownerJoined = this.checkIfOwnerJoined(content.users);
         this.ownerHasJoinedSubject.next(ownerJoined);
@@ -651,6 +695,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     args: [TAS_CONFIG]
                 }] }]; } });
 
+class GeolocationService {
+    constructor() {
+        this.cachedPosition = null;
+    }
+    /**
+     * Request current geolocation position using Web Geolocation API.
+     * Works in both browser and Capacitor environments.
+     * @returns Promise with {latitude, longitude} or null if denied/unavailable
+     */
+    async getCurrentPosition() {
+        if (!navigator.geolocation) {
+            console.warn('[GeolocationService] Geolocation not supported');
+            return null;
+        }
+        return new Promise((resolve) => {
+            navigator.geolocation.getCurrentPosition((position) => {
+                const geoPosition = {
+                    latitude: position.coords.latitude,
+                    longitude: position.coords.longitude,
+                };
+                this.cachedPosition = geoPosition;
+                resolve(geoPosition);
+            }, (error) => {
+                console.warn('[GeolocationService] Geolocation error:', error.message);
+                resolve(null);
+            }, {
+                enableHighAccuracy: false,
+                timeout: 30000,
+                maximumAge: 60000,
+            });
+        });
+    }
+    /**
+     * Get the cached position from the last successful request.
+     */
+    getCachedPosition() {
+        return this.cachedPosition;
+    }
+    /**
+     * Clear the cached position.
+     */
+    clearCache() {
+        this.cachedPosition = null;
+    }
+}
+GeolocationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GeolocationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GeolocationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GeolocationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GeolocationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class TasAvatarComponent {
     constructor() {
         this.name = '';
@@ -725,9 +823,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 
 class TasVideocallComponent {
-    constructor(activeModal, tasService) {
+    constructor(activeModal, tasService, geolocationService) {
         this.activeModal = activeModal;
         this.tasService = tasService;
+        this.geolocationService = geolocationService;
         this.participantName = '';
         this.tenant = '';
         this.businessRole = TasBusinessRole.USER;
@@ -739,6 +838,12 @@ class TasVideocallComponent {
         this.ownerHasJoined = false;
         this.hasVideoStream = false;
         this.dismissedUsers = [];
+        this.showLocationPanel = true; // Show by default for owners, will be updated based on user's location status
+        this.userHasLocation = false; // Tracks if the user has shared their location
+        this.geoLocationStatus = 'unknown';
+        // Geo panel states for owner
+        this.geoRequestActive = false; // Owner sent request, waiting for user
+        this.allGeoGranted = false; // All users responded with geo
         this.subscriptions = new Subscription();
     }
     ngOnInit() {
@@ -816,6 +921,30 @@ class TasVideocallComponent {
         this.dismissedUsers.push(userId);
         this.waitingRoomUsers = this.waitingRoomUsers.filter((u) => u.userId !== userId);
     }
+    /**
+     * Close the location panel
+     */
+    closeLocationPanel() {
+        this.showLocationPanel = false;
+    }
+    /**
+     * Request the user to share their location
+     */
+    requestUserLocation() {
+        if (!this.videoCallId) {
+            console.error('Cannot request location: videoCallId not set');
+            return;
+        }
+        const body = {
+            videoCallId: this.videoCallId,
+            action: UserCallAction.REQUEST_GEOLOCALIZATION,
+        };
+        // TODO: Send location request action to backend when endpoint is ready
+        this.tasService.modifyProxyVideoUser(body).subscribe({
+            next: () => console.log('Location request sent'),
+            error: (err) => console.error('Error requesting location:', err),
+        });
+    }
     // Private Methods
     setupSubscriptions() {
         // Call state subscription
@@ -854,6 +983,78 @@ class TasVideocallComponent {
                 this.activeModal.close('owner_left');
             }
         }));
+        // ActivateGeo subscription - only for non-owners (users)
+        this.subscriptions.add(this.tasService.activateGeo$.subscribe((activateGeo) => {
+            if (activateGeo && !this.canAdmitUsers) {
+                console.log('[TAS DEBUG] activateGeo=true, checking geo status for user...');
+                this.handleActivateGeo();
+            }
+        }));
+        // GeoRequestActive subscription - for owners
+        this.subscriptions.add(this.tasService.geoRequestActive$.subscribe((active) => {
+            console.log('[TAS DEBUG] geoRequestActive changed:', active);
+            this.geoRequestActive = active;
+        }));
+        // AllGeoGranted subscription - for owners
+        this.subscriptions.add(this.tasService.allGeoGranted$.subscribe((granted) => {
+            console.log('[TAS DEBUG] allGeoGranted changed:', granted);
+            this.allGeoGranted = granted;
+        }));
+    }
+    /**
+     * Handle activateGeo request from backend (for non-owner users).
+     * If geo is already active, report it. If not, prompt user.
+     */
+    async handleActivateGeo() {
+        console.log('[TAS DEBUG] handleActivateGeo - current status:', this.geoLocationStatus);
+        // Check if we already have a cached position
+        const cachedPosition = this.geolocationService.getCachedPosition();
+        if (cachedPosition) {
+            console.log('[TAS DEBUG] Geolocation already active, reporting to backend:', cachedPosition);
+            this.geoLocationStatus = 'active';
+            this.reportGeoStatus(cachedPosition.latitude, cachedPosition.longitude);
+            return;
+        }
+        // Try to get position
+        console.log('[TAS DEBUG] Requesting geolocation from user...');
+        const position = await this.geolocationService.getCurrentPosition();
+        if (position) {
+            console.log('[TAS DEBUG] Geolocation obtained:', position);
+            this.geoLocationStatus = 'active';
+            this.reportGeoStatus(position.latitude, position.longitude);
+        }
+        else {
+            console.log('[TAS DEBUG] Geolocation denied or unavailable');
+            this.geoLocationStatus = 'denied';
+            // Report that geo is not available (with no coordinates)
+            this.reportGeoStatus();
+        }
+    }
+    /**
+     * Report geolocation status to backend.
+     */
+    reportGeoStatus(latitude, longitude) {
+        if (!this.videoCallId) {
+            console.error('[TAS DEBUG] Cannot report geo status: videoCallId not set');
+            return;
+        }
+        // TODO: If the permission for geo location is not granted, we should not report it to the backend
+        if (!this.geoLocationStatus) {
+            console.error('[TAS DEBUG] Cannot report geo status: geoLocationStatus not set');
+            return;
+        }
+        const body = {
+            userId: this.userId,
+            videoCallId: this.videoCallId,
+            action: UserCallAction.ACTIVATE_GEOLOCATION,
+            latitude,
+            longitude,
+        };
+        console.log('[TAS DEBUG] Reporting geo status to backend:', body);
+        this.tasService.modifyProxyVideoUser(body).subscribe({
+            next: () => console.log('[TAS DEBUG] Geo status reported successfully'),
+            error: (err) => console.error('[TAS DEBUG] Error reporting geo status:', err),
+        });
     }
     initializeCall() {
         if (this.isReturningFromPip) {
@@ -942,12 +1143,12 @@ class TasVideocallComponent {
         });
     }
 }
-TasVideocallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasVideocallComponent, deps: [{ token: i1.NgbActiveModal }, { token: TasService }], target: i0.ɵɵFactoryTarget.Component });
-TasVideocallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasVideocallComponent, selector: "tas-videocall", inputs: { sessionId: "sessionId", token: "token", appointmentId: "appointmentId", videoCallId: "videoCallId", participantName: "participantName", tenant: "tenant", businessRole: "businessRole", isReturningFromPip: "isReturningFromPip" }, viewQueries: [{ propertyName: "publisherContainer", first: true, predicate: ["publisherContainer"], descendants: true }, { propertyName: "subscriberContainer", first: true, predicate: ["subscriberContainer"], descendants: true }], ngImport: i0, template: "<div class=\"tas-videocall-container\">\n  <!-- Subscriber video (large, background) -->\n  <div\n    id=\"subscriber-container\"\n    [class.subscriber-view]=\"isPublisherSmall\"\n    [class.publisher-view]=\"!isPublisherSmall\"\n    #subscriberContainer\n    (dblclick)=\"onDoubleClick()\"\n  ></div>\n\n  <!-- Publisher video (small, overlay) -->\n  <div\n    id=\"publisher-container\"\n    [class.publisher-view]=\"isPublisherSmall\"\n    [class.subscriber-view]=\"!isPublisherSmall\"\n    #publisherContainer\n    (dblclick)=\"onDoubleClick()\"\n  ></div>\n\n  <!-- Centered avatar (shown when no video stream) -->\n  <div class=\"avatar-container\" *ngIf=\"!hasVideoStream\">\n    <tas-avatar [name]=\"participantName\" [size]=\"80\"></tas-avatar>\n  </div>\n\n  <!-- Controls -->\n  <div class=\"controls-container\">\n    <button\n      class=\"btn control-btn mute-btn\"\n      [class.muted]=\"isMuted\"\n      (click)=\"toggleMute()\"\n      [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n      [attr.aria-label]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n    >\n      <i\n        class=\"fa\"\n        [class.fa-microphone]=\"!isMuted\"\n        [class.fa-microphone-slash]=\"isMuted\"\n      ></i>\n    </button>\n    <button\n      class=\"btn control-btn swap-btn\"\n      (click)=\"toggleSwap()\"\n      title=\"Intercambiar vista\"\n      aria-label=\"Intercambiar vista\"\n    >\n      <i class=\"fa fa-video-camera\"></i>\n    </button>\n    <button\n      class=\"btn control-btn hangup-btn\"\n      (click)=\"hangUp()\"\n      title=\"Finalizar llamada\"\n      aria-label=\"Finalizar llamada\"\n    >\n      <i class=\"fa fa-phone\"></i>\n    </button>\n    <button\n      class=\"btn control-btn more-btn\"\n      title=\"M\u00E1s opciones\"\n      aria-label=\"M\u00E1s opciones\"\n    >\n      <i class=\"fa fa-ellipsis-v\"></i>\n    </button>\n  </div>\n\n  <!-- Waiting room notification (shown for OWNER/BACKOFFICE only) -->\n  <div\n    class=\"waiting-notification\"\n    *ngIf=\"waitingRoomUsers.length > 0 && canAdmitUsers\"\n    role=\"alert\"\n    aria-live=\"polite\"\n  >\n    <span class=\"waiting-text\">\n      {{ waitingRoomUsers[0].name }} est\u00E1 en la sala de espera.\n    </span>\n    <button\n      class=\"admit-btn\"\n      (click)=\"admitUser(waitingRoomUsers[0].userId)\"\n      aria-label=\"Admitir usuario\"\n    >\n      Admitir\n    </button>\n    <button\n      class=\"dismiss-btn\"\n      (click)=\"dismissWaitingNotification(waitingRoomUsers[0].userId)\"\n      aria-label=\"Cerrar notificaci\u00F3n\"\n    >\n      \u00D7\n    </button>\n  </div>\n</div>\n", styles: [".tas-videocall-container{position:relative;width:100vw;height:100vh;overflow:hidden;border-radius:8px;border:1px solid var(--Neutral-GreyLight, #dadfe9);background:linear-gradient(180deg,#e5f1f7 0%,#0072ac 100%)}.tas-videocall-container ::ng-deep .OT_edge-bar-item,.tas-videocall-container ::ng-deep .OT_mute,.tas-videocall-container ::ng-deep .OT_audio-level-meter,.tas-videocall-container ::ng-deep .OT_bar,.tas-videocall-container ::ng-deep .OT_name{display:none!important}.tas-videocall-container .subscriber-view{width:100%;height:100%;z-index:1}.tas-videocall-container .publisher-view{position:absolute;top:20px;right:20px;width:200px;height:150px;z-index:2;border:2px solid #fff;border-radius:8px;background-color:#0000004d;overflow:hidden}.tas-videocall-container .avatar-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;justify-content:center}.tas-videocall-container .controls-container{display:flex;flex-direction:row;gap:12px;position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3;background-color:#33475bb3;padding:12px 20px;border-radius:30px;backdrop-filter:blur(8px)}.tas-videocall-container .controls-container .control-btn{width:44px;height:44px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:18px;border:none;background:var(--Primary-Uell, #1da4b1);cursor:pointer;transition:all .2s ease}.tas-videocall-container .controls-container .control-btn i{color:#fff}.tas-videocall-container .controls-container .control-btn:hover{transform:scale(1.05);filter:brightness(1.1)}.tas-videocall-container .controls-container .control-btn:focus{outline:2px solid #fff;outline-offset:2px}.tas-videocall-container .controls-container .control-btn.muted{background:#f39c12}.tas-videocall-container .controls-container .hangup-btn{background:#f44336}.tas-videocall-container .controls-container .hangup-btn i{transform:rotate(135deg)}.tas-videocall-container .controls-container .hangup-btn:hover{background:#d32f2f}.tas-videocall-container .controls-container .swap-btn,.tas-videocall-container .controls-container .pip-btn{background:var(--Primary-Uell, #1da4b1)}.tas-videocall-container .controls-container .swap-btn:hover,.tas-videocall-container .controls-container .pip-btn:hover{background:#178e99}.tas-videocall-container .controls-container .more-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .more-btn:hover{background:rgba(255,255,255,.35)}.tas-videocall-container .waiting-notification{position:absolute;bottom:100px;left:16px;display:flex;align-items:center;gap:12px;background-color:#33475be6;padding:10px 16px;border-radius:8px;z-index:4;backdrop-filter:blur(4px);max-width:calc(100% - 32px);box-shadow:0 4px 12px #0003}.tas-videocall-container .waiting-notification .waiting-text{color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tas-videocall-container .waiting-notification .admit-btn{background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:4px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease;white-space:nowrap}.tas-videocall-container .waiting-notification .admit-btn:hover{background:#178e99}.tas-videocall-container .waiting-notification .admit-btn:focus{outline:2px solid #fff;outline-offset:2px}.tas-videocall-container .waiting-notification .dismiss-btn{background:transparent;color:#fff;border:none;font-size:20px;line-height:1;cursor:pointer;padding:0 4px;opacity:.7;transition:opacity .2s ease}.tas-videocall-container .waiting-notification .dismiss-btn:hover{opacity:1}.tas-videocall-container .waiting-notification .dismiss-btn:focus{outline:2px solid #fff;outline-offset:2px}\n"], components: [{ type: TasAvatarComponent, selector: "tas-avatar", inputs: ["name", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TasVideocallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasVideocallComponent, deps: [{ token: i1.NgbActiveModal }, { token: TasService }, { token: GeolocationService }], target: i0.ɵɵFactoryTarget.Component });
+TasVideocallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasVideocallComponent, selector: "tas-videocall", inputs: { sessionId: "sessionId", token: "token", appointmentId: "appointmentId", videoCallId: "videoCallId", userId: "userId", participantName: "participantName", tenant: "tenant", businessRole: "businessRole", isReturningFromPip: "isReturningFromPip" }, viewQueries: [{ propertyName: "publisherContainer", first: true, predicate: ["publisherContainer"], descendants: true }, { propertyName: "subscriberContainer", first: true, predicate: ["subscriberContainer"], descendants: true }], ngImport: i0, template: "<div class=\"tas-videocall-wrapper\">\n  <div class=\"tas-videocall-container\">\n    <!-- Subscriber video (large, background) -->\n    <div\n      id=\"subscriber-container\"\n      [class.subscriber-view]=\"isPublisherSmall\"\n      [class.publisher-view]=\"!isPublisherSmall\"\n      #subscriberContainer\n      (dblclick)=\"onDoubleClick()\"\n    ></div>\n\n    <!-- Publisher video (small, overlay) -->\n    <div\n      id=\"publisher-container\"\n      [class.publisher-view]=\"isPublisherSmall\"\n      [class.subscriber-view]=\"!isPublisherSmall\"\n      #publisherContainer\n      (dblclick)=\"onDoubleClick()\"\n    ></div>\n\n    <!-- Centered avatar (shown when no video stream) -->\n    <div class=\"avatar-container\" *ngIf=\"!hasVideoStream\">\n      <tas-avatar [name]=\"participantName\" [size]=\"80\"></tas-avatar>\n    </div>\n\n    <!-- Controls -->\n    <div class=\"controls-container\">\n      <button\n        class=\"btn control-btn mute-btn\"\n        [class.muted]=\"isMuted\"\n        (click)=\"toggleMute()\"\n        [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n        [attr.aria-label]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n      >\n        <i\n          class=\"fa\"\n          [class.fa-microphone]=\"!isMuted\"\n          [class.fa-microphone-slash]=\"isMuted\"\n        ></i>\n      </button>\n      <button\n        class=\"btn control-btn swap-btn\"\n        (click)=\"toggleSwap()\"\n        title=\"Intercambiar vista\"\n        aria-label=\"Intercambiar vista\"\n      >\n        <i class=\"fa fa-video-camera\"></i>\n      </button>\n      <button\n        class=\"btn control-btn hangup-btn\"\n        (click)=\"hangUp()\"\n        title=\"Finalizar llamada\"\n        aria-label=\"Finalizar llamada\"\n      >\n        <i class=\"fa fa-phone\"></i>\n      </button>\n      <button\n        class=\"btn control-btn more-btn\"\n        title=\"M\u00E1s opciones\"\n        aria-label=\"M\u00E1s opciones\"\n      >\n        <i class=\"fa fa-ellipsis-v\"></i>\n      </button>\n    </div>\n\n    <!-- Waiting room notification (shown for OWNER/BACKOFFICE only) -->\n    <div\n      class=\"waiting-notification\"\n      *ngIf=\"waitingRoomUsers.length > 0 && canAdmitUsers\"\n      role=\"alert\"\n      aria-live=\"polite\"\n    >\n      <span class=\"waiting-text\">\n        {{ waitingRoomUsers[0].name }} est\u00E1 en la sala de espera.\n      </span>\n      <button\n        class=\"admit-btn\"\n        (click)=\"admitUser(waitingRoomUsers[0].userId)\"\n        aria-label=\"Admitir usuario\"\n      >\n        Admitir\n      </button>\n      <button\n        class=\"dismiss-btn\"\n        (click)=\"dismissWaitingNotification(waitingRoomUsers[0].userId)\"\n        aria-label=\"Cerrar notificaci\u00F3n\"\n      >\n        \u00D7\n      </button>\n    </div>\n  </div>\n\n  <!-- Location panel (shown for owners when user hasn't allowed location) -->\n  <div class=\"location-panel\" *ngIf=\"showLocationPanel && canAdmitUsers\">\n    <div class=\"location-header\">\n      <i class=\"fa fa-map-marker header-icon\"></i>\n      <h3>Ubicaci\u00F3n del colaborador</h3>\n      <button class=\"close-btn\" (click)=\"closeLocationPanel()\" aria-label=\"Cerrar\">\u00D7</button>\n    </div>\n    <div class=\"location-description\">\n      <p>El colaborador tiene la ubicaci\u00F3n desactivada, solicita que la active.</p>\n      <p>Esta acci\u00F3n nos permitir\u00E1 disponibilizar algunas alertas.</p>\n    </div>\n    <div class=\"location-content\">\n      <!-- Initial state: Show verify button -->\n      <ng-container *ngIf=\"!geoRequestActive && !allGeoGranted\">\n        <button class=\"verify-location-btn\" (click)=\"requestUserLocation()\">\n          Verificar ubicaci\u00F3n\n        </button>\n      </ng-container>\n\n      <!-- Loading state: Spinner while waiting for user response -->\n      <ng-container *ngIf=\"geoRequestActive && !allGeoGranted\">\n        <div class=\"geo-loading-container\">\n          <div class=\"geo-spinner\"></div>\n          <p class=\"loading-title\">Verificando ubicaci\u00F3n...</p>\n          <p class=\"loading-subtitle\">Esto puede tardar unos segundos.</p>\n        </div>\n        <button class=\"verify-location-btn disabled\" disabled>\n          Verificar ubicaci\u00F3n\n        </button>\n      </ng-container>\n\n      <!-- Success state: Location verified -->\n      <ng-container *ngIf=\"allGeoGranted\">\n        <div class=\"geo-success-container\">\n          <div class=\"success-icon\">\n            <i class=\"fa fa-check\"></i>\n          </div>\n          <p class=\"success-title\">La ubicaci\u00F3n fue verificada</p>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"location-footer\">\n      <span class=\"footer-icon\"><i class=\"fa fa-clock-o\"></i></span>\n      <span class=\"footer-icon location-icon\"><i class=\"fa fa-map-marker\"></i></span>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100vw;height:100vh;box-sizing:border-box;padding:2rem;background:linear-gradient(281deg,rgba(29,164,177,.2) 6.96%,rgba(0,0,0,0) 70.44%),#212532}.tas-videocall-wrapper{display:flex;flex:1;gap:1rem;height:100%}.tas-videocall-container{position:relative;flex:1;height:100%;overflow:hidden;border-radius:8px;border:1px solid var(--Neutral-GreyLight, #dadfe9);background:linear-gradient(180deg,#e5f1f7 0%,#0072ac 100%)}.tas-videocall-container ::ng-deep .OT_edge-bar-item,.tas-videocall-container ::ng-deep .OT_mute,.tas-videocall-container ::ng-deep .OT_audio-level-meter,.tas-videocall-container ::ng-deep .OT_bar,.tas-videocall-container ::ng-deep .OT_name{display:none!important}.tas-videocall-container .subscriber-view{width:100%;height:100%;z-index:1}.tas-videocall-container .publisher-view{position:absolute;top:20px;right:20px;width:200px;height:150px;z-index:2;border:2px solid #fff;border-radius:8px;background-color:#0000004d;overflow:hidden}.tas-videocall-container .avatar-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;justify-content:center}.tas-videocall-container .controls-container{display:flex;flex-direction:row;gap:12px;position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3;background-color:#33475bb3;padding:12px 20px;border-radius:30px;backdrop-filter:blur(8px)}.tas-videocall-container .controls-container .control-btn{width:44px;height:44px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:18px;border:none;background:var(--Primary-Uell, #1da4b1);cursor:pointer;transition:all .2s ease}.tas-videocall-container .controls-container .control-btn i{color:#fff}.tas-videocall-container .controls-container .control-btn:hover{transform:scale(1.05);filter:brightness(1.1)}.tas-videocall-container .controls-container .control-btn:focus{outline:2px solid #fff;outline-offset:2px}.tas-videocall-container .controls-container .control-btn.muted{background:#f39c12}.tas-videocall-container .controls-container .hangup-btn{background:#f44336}.tas-videocall-container .controls-container .hangup-btn i{transform:rotate(135deg)}.tas-videocall-container .controls-container .hangup-btn:hover{background:#d32f2f}.tas-videocall-container .controls-container .swap-btn,.tas-videocall-container .controls-container .pip-btn{background:var(--Primary-Uell, #1da4b1)}.tas-videocall-container .controls-container .swap-btn:hover,.tas-videocall-container .controls-container .pip-btn:hover{background:#178e99}.tas-videocall-container .controls-container .more-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .more-btn:hover{background:rgba(255,255,255,.35)}.tas-videocall-container .waiting-notification{position:absolute;bottom:100px;left:16px;display:flex;align-items:center;gap:12px;background-color:#33475be6;padding:10px 16px;border-radius:8px;z-index:4;backdrop-filter:blur(4px);max-width:calc(100% - 32px);box-shadow:0 4px 12px #0003}.tas-videocall-container .waiting-notification .waiting-text{color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tas-videocall-container .waiting-notification .admit-btn{background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:4px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease;white-space:nowrap}.tas-videocall-container .waiting-notification .admit-btn:hover{background:#178e99}.tas-videocall-container .waiting-notification .admit-btn:focus{outline:2px solid #fff;outline-offset:2px}.tas-videocall-container .waiting-notification .dismiss-btn{background:transparent;color:#fff;border:none;font-size:20px;line-height:1;cursor:pointer;padding:0 4px;opacity:.7;transition:opacity .2s ease}.tas-videocall-container .waiting-notification .dismiss-btn:hover{opacity:1}.tas-videocall-container .waiting-notification .dismiss-btn:focus{outline:2px solid #fff;outline-offset:2px}.location-panel{width:280px;height:100%;background:#212532;border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;color:#fff}.location-panel .location-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.location-panel .location-header h3{font-size:16px;font-weight:600;margin:0;color:#fff}.location-panel .location-header .close-btn{background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0;line-height:1;opacity:.7}.location-panel .location-header .close-btn:hover{opacity:1}.location-panel .location-description{font-size:14px;color:#fffc;line-height:1.5;margin-bottom:.5rem}.location-panel .location-description p{margin:0 0 .5rem}.location-panel .location-content{flex:1;display:flex;flex-direction:column;justify-content:flex-end}.location-panel .verify-location-btn{width:100%;padding:12px 24px;background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease;margin-bottom:1rem}.location-panel .verify-location-btn:hover{background:#178e99}.location-panel .verify-location-btn:disabled{background:rgba(29,164,177,.5);cursor:not-allowed}.location-panel .location-footer{display:flex;justify-content:flex-end;gap:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.1)}.location-panel .location-footer .footer-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#fff;font-size:14px}.location-panel .location-footer .footer-icon.location-icon{background:var(--Primary-Uell, #1da4b1)}.location-panel .header-icon{color:#fff;font-size:16px}.location-panel .geo-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 0}.location-panel .geo-loading-container .geo-spinner{width:64px;height:64px;border:4px solid rgba(29,164,177,.2);border-top-color:var(--Primary-Uell, #1da4b1);border-radius:50%;animation:geo-spin 1s linear infinite}.location-panel .geo-loading-container .loading-title{color:#fff;font-size:16px;font-weight:600;margin:1.5rem 0 .25rem}.location-panel .geo-loading-container .loading-subtitle{color:#ffffffb3;font-size:14px;margin:0}.location-panel .geo-success-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 0}.location-panel .geo-success-container .success-icon{width:80px;height:80px;border-radius:50%;background:var(--Primary-Uell, #1da4b1);display:flex;align-items:center;justify-content:center;position:relative}.location-panel .geo-success-container .success-icon i{color:#fff;font-size:32px}.location-panel .geo-success-container .success-icon:before,.location-panel .geo-success-container .success-icon:after{content:\"\\2726\";position:absolute;color:#fff;font-size:10px}.location-panel .geo-success-container .success-icon:before{top:-8px;right:-4px}.location-panel .geo-success-container .success-icon:after{bottom:-4px;left:-8px}.location-panel .geo-success-container .success-title{color:#fff;font-size:16px;font-weight:600;margin:1.5rem 0 0}.location-panel .verify-location-btn.disabled{background:rgba(29,164,177,.5);cursor:not-allowed}@keyframes geo-spin{to{transform:rotate(360deg)}}\n"], components: [{ type: TasAvatarComponent, selector: "tas-avatar", inputs: ["name", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasVideocallComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tas-videocall', template: "<div class=\"tas-videocall-container\">\n  <!-- Subscriber video (large, background) -->\n  <div\n    id=\"subscriber-container\"\n    [class.subscriber-view]=\"isPublisherSmall\"\n    [class.publisher-view]=\"!isPublisherSmall\"\n    #subscriberContainer\n    (dblclick)=\"onDoubleClick()\"\n  ></div>\n\n  <!-- Publisher video (small, overlay) -->\n  <div\n    id=\"publisher-container\"\n    [class.publisher-view]=\"isPublisherSmall\"\n    [class.subscriber-view]=\"!isPublisherSmall\"\n    #publisherContainer\n    (dblclick)=\"onDoubleClick()\"\n  ></div>\n\n  <!-- Centered avatar (shown when no video stream) -->\n  <div class=\"avatar-container\" *ngIf=\"!hasVideoStream\">\n    <tas-avatar [name]=\"participantName\" [size]=\"80\"></tas-avatar>\n  </div>\n\n  <!-- Controls -->\n  <div class=\"controls-container\">\n    <button\n      class=\"btn control-btn mute-btn\"\n      [class.muted]=\"isMuted\"\n      (click)=\"toggleMute()\"\n      [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n      [attr.aria-label]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n    >\n      <i\n        class=\"fa\"\n        [class.fa-microphone]=\"!isMuted\"\n        [class.fa-microphone-slash]=\"isMuted\"\n      ></i>\n    </button>\n    <button\n      class=\"btn control-btn swap-btn\"\n      (click)=\"toggleSwap()\"\n      title=\"Intercambiar vista\"\n      aria-label=\"Intercambiar vista\"\n    >\n      <i class=\"fa fa-video-camera\"></i>\n    </button>\n    <button\n      class=\"btn control-btn hangup-btn\"\n      (click)=\"hangUp()\"\n      title=\"Finalizar llamada\"\n      aria-label=\"Finalizar llamada\"\n    >\n      <i class=\"fa fa-phone\"></i>\n    </button>\n    <button\n      class=\"btn control-btn more-btn\"\n      title=\"M\u00E1s opciones\"\n      aria-label=\"M\u00E1s opciones\"\n    >\n      <i class=\"fa fa-ellipsis-v\"></i>\n    </button>\n  </div>\n\n  <!-- Waiting room notification (shown for OWNER/BACKOFFICE only) -->\n  <div\n    class=\"waiting-notification\"\n    *ngIf=\"waitingRoomUsers.length > 0 && canAdmitUsers\"\n    role=\"alert\"\n    aria-live=\"polite\"\n  >\n    <span class=\"waiting-text\">\n      {{ waitingRoomUsers[0].name }} est\u00E1 en la sala de espera.\n    </span>\n    <button\n      class=\"admit-btn\"\n      (click)=\"admitUser(waitingRoomUsers[0].userId)\"\n      aria-label=\"Admitir usuario\"\n    >\n      Admitir\n    </button>\n    <button\n      class=\"dismiss-btn\"\n      (click)=\"dismissWaitingNotification(waitingRoomUsers[0].userId)\"\n      aria-label=\"Cerrar notificaci\u00F3n\"\n    >\n      \u00D7\n    </button>\n  </div>\n</div>\n", styles: [".tas-videocall-container{position:relative;width:100vw;height:100vh;overflow:hidden;border-radius:8px;border:1px solid var(--Neutral-GreyLight, #dadfe9);background:linear-gradient(180deg,#e5f1f7 0%,#0072ac 100%)}.tas-videocall-container ::ng-deep .OT_edge-bar-item,.tas-videocall-container ::ng-deep .OT_mute,.tas-videocall-container ::ng-deep .OT_audio-level-meter,.tas-videocall-container ::ng-deep .OT_bar,.tas-videocall-container ::ng-deep .OT_name{display:none!important}.tas-videocall-container .subscriber-view{width:100%;height:100%;z-index:1}.tas-videocall-container .publisher-view{position:absolute;top:20px;right:20px;width:200px;height:150px;z-index:2;border:2px solid #fff;border-radius:8px;background-color:#0000004d;overflow:hidden}.tas-videocall-container .avatar-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;justify-content:center}.tas-videocall-container .controls-container{display:flex;flex-direction:row;gap:12px;position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3;background-color:#33475bb3;padding:12px 20px;border-radius:30px;backdrop-filter:blur(8px)}.tas-videocall-container .controls-container .control-btn{width:44px;height:44px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:18px;border:none;background:var(--Primary-Uell, #1da4b1);cursor:pointer;transition:all .2s ease}.tas-videocall-container .controls-container .control-btn i{color:#fff}.tas-videocall-container .controls-container .control-btn:hover{transform:scale(1.05);filter:brightness(1.1)}.tas-videocall-container .controls-container .control-btn:focus{outline:2px solid #fff;outline-offset:2px}.tas-videocall-container .controls-container .control-btn.muted{background:#f39c12}.tas-videocall-container .controls-container .hangup-btn{background:#f44336}.tas-videocall-container .controls-container .hangup-btn i{transform:rotate(135deg)}.tas-videocall-container .controls-container .hangup-btn:hover{background:#d32f2f}.tas-videocall-container .controls-container .swap-btn,.tas-videocall-container .controls-container .pip-btn{background:var(--Primary-Uell, #1da4b1)}.tas-videocall-container .controls-container .swap-btn:hover,.tas-videocall-container .controls-container .pip-btn:hover{background:#178e99}.tas-videocall-container .controls-container .more-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .more-btn:hover{background:rgba(255,255,255,.35)}.tas-videocall-container .waiting-notification{position:absolute;bottom:100px;left:16px;display:flex;align-items:center;gap:12px;background-color:#33475be6;padding:10px 16px;border-radius:8px;z-index:4;backdrop-filter:blur(4px);max-width:calc(100% - 32px);box-shadow:0 4px 12px #0003}.tas-videocall-container .waiting-notification .waiting-text{color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tas-videocall-container .waiting-notification .admit-btn{background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:4px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease;white-space:nowrap}.tas-videocall-container .waiting-notification .admit-btn:hover{background:#178e99}.tas-videocall-container .waiting-notification .admit-btn:focus{outline:2px solid #fff;outline-offset:2px}.tas-videocall-container .waiting-notification .dismiss-btn{background:transparent;color:#fff;border:none;font-size:20px;line-height:1;cursor:pointer;padding:0 4px;opacity:.7;transition:opacity .2s ease}.tas-videocall-container .waiting-notification .dismiss-btn:hover{opacity:1}.tas-videocall-container .waiting-notification .dismiss-btn:focus{outline:2px solid #fff;outline-offset:2px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }]; }, propDecorators: { sessionId: [{
+            args: [{ selector: 'tas-videocall', template: "<div class=\"tas-videocall-wrapper\">\n  <div class=\"tas-videocall-container\">\n    <!-- Subscriber video (large, background) -->\n    <div\n      id=\"subscriber-container\"\n      [class.subscriber-view]=\"isPublisherSmall\"\n      [class.publisher-view]=\"!isPublisherSmall\"\n      #subscriberContainer\n      (dblclick)=\"onDoubleClick()\"\n    ></div>\n\n    <!-- Publisher video (small, overlay) -->\n    <div\n      id=\"publisher-container\"\n      [class.publisher-view]=\"isPublisherSmall\"\n      [class.subscriber-view]=\"!isPublisherSmall\"\n      #publisherContainer\n      (dblclick)=\"onDoubleClick()\"\n    ></div>\n\n    <!-- Centered avatar (shown when no video stream) -->\n    <div class=\"avatar-container\" *ngIf=\"!hasVideoStream\">\n      <tas-avatar [name]=\"participantName\" [size]=\"80\"></tas-avatar>\n    </div>\n\n    <!-- Controls -->\n    <div class=\"controls-container\">\n      <button\n        class=\"btn control-btn mute-btn\"\n        [class.muted]=\"isMuted\"\n        (click)=\"toggleMute()\"\n        [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n        [attr.aria-label]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n      >\n        <i\n          class=\"fa\"\n          [class.fa-microphone]=\"!isMuted\"\n          [class.fa-microphone-slash]=\"isMuted\"\n        ></i>\n      </button>\n      <button\n        class=\"btn control-btn swap-btn\"\n        (click)=\"toggleSwap()\"\n        title=\"Intercambiar vista\"\n        aria-label=\"Intercambiar vista\"\n      >\n        <i class=\"fa fa-video-camera\"></i>\n      </button>\n      <button\n        class=\"btn control-btn hangup-btn\"\n        (click)=\"hangUp()\"\n        title=\"Finalizar llamada\"\n        aria-label=\"Finalizar llamada\"\n      >\n        <i class=\"fa fa-phone\"></i>\n      </button>\n      <button\n        class=\"btn control-btn more-btn\"\n        title=\"M\u00E1s opciones\"\n        aria-label=\"M\u00E1s opciones\"\n      >\n        <i class=\"fa fa-ellipsis-v\"></i>\n      </button>\n    </div>\n\n    <!-- Waiting room notification (shown for OWNER/BACKOFFICE only) -->\n    <div\n      class=\"waiting-notification\"\n      *ngIf=\"waitingRoomUsers.length > 0 && canAdmitUsers\"\n      role=\"alert\"\n      aria-live=\"polite\"\n    >\n      <span class=\"waiting-text\">\n        {{ waitingRoomUsers[0].name }} est\u00E1 en la sala de espera.\n      </span>\n      <button\n        class=\"admit-btn\"\n        (click)=\"admitUser(waitingRoomUsers[0].userId)\"\n        aria-label=\"Admitir usuario\"\n      >\n        Admitir\n      </button>\n      <button\n        class=\"dismiss-btn\"\n        (click)=\"dismissWaitingNotification(waitingRoomUsers[0].userId)\"\n        aria-label=\"Cerrar notificaci\u00F3n\"\n      >\n        \u00D7\n      </button>\n    </div>\n  </div>\n\n  <!-- Location panel (shown for owners when user hasn't allowed location) -->\n  <div class=\"location-panel\" *ngIf=\"showLocationPanel && canAdmitUsers\">\n    <div class=\"location-header\">\n      <i class=\"fa fa-map-marker header-icon\"></i>\n      <h3>Ubicaci\u00F3n del colaborador</h3>\n      <button class=\"close-btn\" (click)=\"closeLocationPanel()\" aria-label=\"Cerrar\">\u00D7</button>\n    </div>\n    <div class=\"location-description\">\n      <p>El colaborador tiene la ubicaci\u00F3n desactivada, solicita que la active.</p>\n      <p>Esta acci\u00F3n nos permitir\u00E1 disponibilizar algunas alertas.</p>\n    </div>\n    <div class=\"location-content\">\n      <!-- Initial state: Show verify button -->\n      <ng-container *ngIf=\"!geoRequestActive && !allGeoGranted\">\n        <button class=\"verify-location-btn\" (click)=\"requestUserLocation()\">\n          Verificar ubicaci\u00F3n\n        </button>\n      </ng-container>\n\n      <!-- Loading state: Spinner while waiting for user response -->\n      <ng-container *ngIf=\"geoRequestActive && !allGeoGranted\">\n        <div class=\"geo-loading-container\">\n          <div class=\"geo-spinner\"></div>\n          <p class=\"loading-title\">Verificando ubicaci\u00F3n...</p>\n          <p class=\"loading-subtitle\">Esto puede tardar unos segundos.</p>\n        </div>\n        <button class=\"verify-location-btn disabled\" disabled>\n          Verificar ubicaci\u00F3n\n        </button>\n      </ng-container>\n\n      <!-- Success state: Location verified -->\n      <ng-container *ngIf=\"allGeoGranted\">\n        <div class=\"geo-success-container\">\n          <div class=\"success-icon\">\n            <i class=\"fa fa-check\"></i>\n          </div>\n          <p class=\"success-title\">La ubicaci\u00F3n fue verificada</p>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"location-footer\">\n      <span class=\"footer-icon\"><i class=\"fa fa-clock-o\"></i></span>\n      <span class=\"footer-icon location-icon\"><i class=\"fa fa-map-marker\"></i></span>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100vw;height:100vh;box-sizing:border-box;padding:2rem;background:linear-gradient(281deg,rgba(29,164,177,.2) 6.96%,rgba(0,0,0,0) 70.44%),#212532}.tas-videocall-wrapper{display:flex;flex:1;gap:1rem;height:100%}.tas-videocall-container{position:relative;flex:1;height:100%;overflow:hidden;border-radius:8px;border:1px solid var(--Neutral-GreyLight, #dadfe9);background:linear-gradient(180deg,#e5f1f7 0%,#0072ac 100%)}.tas-videocall-container ::ng-deep .OT_edge-bar-item,.tas-videocall-container ::ng-deep .OT_mute,.tas-videocall-container ::ng-deep .OT_audio-level-meter,.tas-videocall-container ::ng-deep .OT_bar,.tas-videocall-container ::ng-deep .OT_name{display:none!important}.tas-videocall-container .subscriber-view{width:100%;height:100%;z-index:1}.tas-videocall-container .publisher-view{position:absolute;top:20px;right:20px;width:200px;height:150px;z-index:2;border:2px solid #fff;border-radius:8px;background-color:#0000004d;overflow:hidden}.tas-videocall-container .avatar-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;justify-content:center}.tas-videocall-container .controls-container{display:flex;flex-direction:row;gap:12px;position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3;background-color:#33475bb3;padding:12px 20px;border-radius:30px;backdrop-filter:blur(8px)}.tas-videocall-container .controls-container .control-btn{width:44px;height:44px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:18px;border:none;background:var(--Primary-Uell, #1da4b1);cursor:pointer;transition:all .2s ease}.tas-videocall-container .controls-container .control-btn i{color:#fff}.tas-videocall-container .controls-container .control-btn:hover{transform:scale(1.05);filter:brightness(1.1)}.tas-videocall-container .controls-container .control-btn:focus{outline:2px solid #fff;outline-offset:2px}.tas-videocall-container .controls-container .control-btn.muted{background:#f39c12}.tas-videocall-container .controls-container .hangup-btn{background:#f44336}.tas-videocall-container .controls-container .hangup-btn i{transform:rotate(135deg)}.tas-videocall-container .controls-container .hangup-btn:hover{background:#d32f2f}.tas-videocall-container .controls-container .swap-btn,.tas-videocall-container .controls-container .pip-btn{background:var(--Primary-Uell, #1da4b1)}.tas-videocall-container .controls-container .swap-btn:hover,.tas-videocall-container .controls-container .pip-btn:hover{background:#178e99}.tas-videocall-container .controls-container .more-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .more-btn:hover{background:rgba(255,255,255,.35)}.tas-videocall-container .waiting-notification{position:absolute;bottom:100px;left:16px;display:flex;align-items:center;gap:12px;background-color:#33475be6;padding:10px 16px;border-radius:8px;z-index:4;backdrop-filter:blur(4px);max-width:calc(100% - 32px);box-shadow:0 4px 12px #0003}.tas-videocall-container .waiting-notification .waiting-text{color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tas-videocall-container .waiting-notification .admit-btn{background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:4px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease;white-space:nowrap}.tas-videocall-container .waiting-notification .admit-btn:hover{background:#178e99}.tas-videocall-container .waiting-notification .admit-btn:focus{outline:2px solid #fff;outline-offset:2px}.tas-videocall-container .waiting-notification .dismiss-btn{background:transparent;color:#fff;border:none;font-size:20px;line-height:1;cursor:pointer;padding:0 4px;opacity:.7;transition:opacity .2s ease}.tas-videocall-container .waiting-notification .dismiss-btn:hover{opacity:1}.tas-videocall-container .waiting-notification .dismiss-btn:focus{outline:2px solid #fff;outline-offset:2px}.location-panel{width:280px;height:100%;background:#212532;border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;color:#fff}.location-panel .location-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.location-panel .location-header h3{font-size:16px;font-weight:600;margin:0;color:#fff}.location-panel .location-header .close-btn{background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0;line-height:1;opacity:.7}.location-panel .location-header .close-btn:hover{opacity:1}.location-panel .location-description{font-size:14px;color:#fffc;line-height:1.5;margin-bottom:.5rem}.location-panel .location-description p{margin:0 0 .5rem}.location-panel .location-content{flex:1;display:flex;flex-direction:column;justify-content:flex-end}.location-panel .verify-location-btn{width:100%;padding:12px 24px;background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease;margin-bottom:1rem}.location-panel .verify-location-btn:hover{background:#178e99}.location-panel .verify-location-btn:disabled{background:rgba(29,164,177,.5);cursor:not-allowed}.location-panel .location-footer{display:flex;justify-content:flex-end;gap:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.1)}.location-panel .location-footer .footer-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#fff;font-size:14px}.location-panel .location-footer .footer-icon.location-icon{background:var(--Primary-Uell, #1da4b1)}.location-panel .header-icon{color:#fff;font-size:16px}.location-panel .geo-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 0}.location-panel .geo-loading-container .geo-spinner{width:64px;height:64px;border:4px solid rgba(29,164,177,.2);border-top-color:var(--Primary-Uell, #1da4b1);border-radius:50%;animation:geo-spin 1s linear infinite}.location-panel .geo-loading-container .loading-title{color:#fff;font-size:16px;font-weight:600;margin:1.5rem 0 .25rem}.location-panel .geo-loading-container .loading-subtitle{color:#ffffffb3;font-size:14px;margin:0}.location-panel .geo-success-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 0}.location-panel .geo-success-container .success-icon{width:80px;height:80px;border-radius:50%;background:var(--Primary-Uell, #1da4b1);display:flex;align-items:center;justify-content:center;position:relative}.location-panel .geo-success-container .success-icon i{color:#fff;font-size:32px}.location-panel .geo-success-container .success-icon:before,.location-panel .geo-success-container .success-icon:after{content:\"\\2726\";position:absolute;color:#fff;font-size:10px}.location-panel .geo-success-container .success-icon:before{top:-8px;right:-4px}.location-panel .geo-success-container .success-icon:after{bottom:-4px;left:-8px}.location-panel .geo-success-container .success-title{color:#fff;font-size:16px;font-weight:600;margin:1.5rem 0 0}.location-panel .verify-location-btn.disabled{background:rgba(29,164,177,.5);cursor:not-allowed}@keyframes geo-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }, { type: GeolocationService }]; }, propDecorators: { sessionId: [{
                 type: Input
             }], token: [{
                 type: Input
@@ -955,6 +1156,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], videoCallId: [{
                 type: Input
+            }], userId: [{
+                type: Input
             }], participantName: [{
                 type: Input
             }], tenant: [{
@@ -974,15 +1177,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 var WaitingRoomState;
 (function (WaitingRoomState) {
     WaitingRoomState["CHECKING_STATUS"] = "CHECKING_STATUS";
-    WaitingRoomState["WAITING_FOR_OWNER"] = "WAITING_FOR_OWNER";
+    WaitingRoomState["WAITING_FOR_JOINABLE"] = "WAITING_FOR_JOINABLE";
     WaitingRoomState["READY"] = "READY";
     WaitingRoomState["GETTING_TOKEN"] = "GETTING_TOKEN";
+    WaitingRoomState["JOINING"] = "JOINING";
     WaitingRoomState["ERROR"] = "ERROR";
 })(WaitingRoomState || (WaitingRoomState = {}));
 class TasWaitingRoomComponent {
-    constructor(activeModal, tasService, modalService, cdr) {
+    constructor(activeModal, tasService, geolocationService, modalService, cdr) {
         this.activeModal = activeModal;
         this.tasService = tasService;
+        this.geolocationService = geolocationService;
         this.modalService = modalService;
         this.cdr = cdr;
         // Status endpoint params
@@ -992,6 +1197,7 @@ class TasWaitingRoomComponent {
         this.state = WaitingRoomState.CHECKING_STATUS;
         this.WaitingRoomState = WaitingRoomState; // Expose enum to template
         this.errorMessage = '';
+        this.isJoinable = false;
         // Session data from status response
         this.resolvedSessionId = '';
         this.resolvedAppointmentId = null;
@@ -1000,6 +1206,8 @@ class TasWaitingRoomComponent {
         // Subscriptions
         this.subscriptions = new Subscription();
         this.videoCallModalRef = null;
+        // Geolocation
+        this.geoPosition = null;
     }
     /** Whether current user is an owner */
     get isOwner() {
@@ -1007,8 +1215,69 @@ class TasWaitingRoomComponent {
     }
     ngOnInit() {
         console.log('[TAS DEBUG] TasWaitingRoomComponent.ngOnInit');
+        this.requestMediaPermissions();
+        this.requestGeolocation();
         this.checkStatus();
     }
+    /**
+     * Request camera and microphone permissions.
+     */
+    async requestMediaPermissions() {
+        console.log('[TAS DEBUG] Requesting media permissions...');
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+            // Stop tracks immediately - we just needed the permission
+            stream.getTracks().forEach(track => track.stop());
+            console.log('[TAS DEBUG] Media permissions granted');
+        }
+        catch (error) {
+            console.warn('[TAS DEBUG] Media permissions denied or unavailable:', error);
+        }
+    }
+    /**
+     * Request geolocation immediately on init.
+     * Only for regular users (not owners/backoffice).
+     * If user allows, store position and send to backend.
+     */
+    async requestGeolocation() {
+        // Only request geolocation for regular users, not owners/backoffice
+        if (this.isOwner || this.isBackoffice) {
+            console.log('[TAS DEBUG] Skipping geolocation for owner/backoffice');
+            return;
+        }
+        console.log('[TAS DEBUG] Requesting geolocation...');
+        const position = await this.geolocationService.getCurrentPosition();
+        if (position) {
+            console.log('[TAS DEBUG] Geolocation obtained:', position);
+            this.geoPosition = position;
+            // Send to backend when videoCallId is available
+            this.sendGeolocationToBackend();
+        }
+        else {
+            console.log('[TAS DEBUG] Geolocation denied or unavailable');
+        }
+    }
+    /**
+     * Send geolocation to backend via modify user endpoint.
+     * NOTE: Endpoint call is prepared but may not be active yet.
+     */
+    sendGeolocationToBackend() {
+        if (!this.geoPosition || !this.videoCallId) {
+            return;
+        }
+        console.log('[TAS DEBUG] Sending geolocation to backend...');
+        const body = {
+            userId: this.currentUser?.id,
+            videoCallId: this.videoCallId,
+            action: UserCallAction.ACTIVATE_GEOLOCATION,
+            latitude: this.geoPosition.latitude,
+            longitude: this.geoPosition.longitude,
+        };
+        this.tasService.modifyProxyVideoUser(body).subscribe({
+            next: () => console.log('[TAS DEBUG] Geolocation sent successfully'),
+            error: (err) => console.error('[TAS DEBUG] Failed to send geolocation:', err),
+        });
+    }
     ngOnDestroy() {
         console.log('[TAS DEBUG] TasWaitingRoomComponent.ngOnDestroy');
         this.subscriptions.unsubscribe();
@@ -1042,6 +1311,8 @@ class TasWaitingRoomComponent {
                 this.resolvedAppointmentId = content.appointmentId;
                 this.videoCallId = content.videoCallId;
                 console.log('[TAS DEBUG] Status response:', content);
+                // Try to send geolocation now that we have videoCallId
+                this.sendGeolocationToBackend();
                 // Start polling for status updates
                 this.tasService.startStatusPolling(statusParams);
                 // Subscribe to joinable status
@@ -1063,36 +1334,33 @@ class TasWaitingRoomComponent {
         console.log('[TAS DEBUG] handleJoinableChange called', {
             joinable,
             currentState: this.state,
-            isOwner: this.isOwner,
-            isBackoffice: this.isBackoffice,
             resolvedSessionId: this.resolvedSessionId,
         });
-        // Don't update state if already getting token, ready, or in error
+        this.isJoinable = joinable;
+        // Don't update state if already getting token, joining, or in error
         if (this.state === WaitingRoomState.GETTING_TOKEN ||
-            this.state === WaitingRoomState.READY ||
+            this.state === WaitingRoomState.JOINING ||
             this.state === WaitingRoomState.ERROR) {
             console.log('[TAS DEBUG] Skipping state update - already in:', this.state);
             return;
         }
-        if (this.isOwner || this.isBackoffice) {
-            console.log('[TAS DEBUG] User is owner/backoffice, calling getTokenForOwner');
-            // Owner/Backoffice: call /start to get token first, then show join button
-            if (this.state === WaitingRoomState.CHECKING_STATUS) {
-                this.getTokenForOwner();
-            }
+        // Both users and owners: show join button based on joinable
+        if (joinable) {
+            console.log('[TAS DEBUG] Joinable is true, showing join button');
+            this.state = WaitingRoomState.READY;
         }
         else {
-            // Non-owner: wait until joinable is true
-            if (joinable) {
-                console.log('[TAS DEBUG] Non-owner: joinable is true, getting token');
-                this.getTokenForOwner(); // Also get token when joinable
-            }
-            else {
-                console.log('[TAS DEBUG] Non-owner: waiting for owner');
-                this.state = WaitingRoomState.WAITING_FOR_OWNER;
-                this.cdr.detectChanges();
-            }
+            console.log('[TAS DEBUG] Waiting for joinable...');
+            this.state = WaitingRoomState.WAITING_FOR_JOINABLE;
         }
+        this.cdr.detectChanges();
+    }
+    /**
+     * Called when user clicks the join button.
+     * Calls /start to get token then auto-joins.
+     */
+    joinSession() {
+        this.startSessionAndJoin();
     }
     /**
      * Check if user has owner/backoffice role
@@ -1103,9 +1371,9 @@ class TasWaitingRoomComponent {
             this.businessRole === TasBusinessRole.MANAGER);
     }
     /**
-     * Get token for owner/backoffice - call /start endpoint
+     * Start session and join - called when user clicks join button
      */
-    getTokenForOwner() {
+    startSessionAndJoin() {
         if (!this.resolvedSessionId) {
             this.state = WaitingRoomState.ERROR;
             this.errorMessage = 'Session ID not available';
@@ -1134,10 +1402,14 @@ class TasWaitingRoomComponent {
                     this.cdr.detectChanges();
                     return;
                 }
-                console.log('[TAS DEBUG] Token obtained successfully');
+                console.log('[TAS DEBUG] Token obtained successfully, joining session...');
                 this.token = tokenResponse.content.token;
-                this.state = WaitingRoomState.READY;
+                this.state = WaitingRoomState.JOINING;
                 this.cdr.detectChanges();
+                // Auto-join immediately
+                this.tasService.stopStatusPolling();
+                this.activeModal.close('joining');
+                this.openVideoCallModal();
             },
             error: (err) => {
                 console.error('[TAS DEBUG] /start request failed:', err);
@@ -1149,19 +1421,6 @@ class TasWaitingRoomComponent {
             },
         }));
     }
-    /**
-     * Join the session - token already obtained
-     */
-    joinSession() {
-        if (!this.resolvedSessionId || !this.token) {
-            this.errorMessage = 'Session not ready';
-            return;
-        }
-        // Close waiting room and open video call
-        this.tasService.stopStatusPolling();
-        this.activeModal.close('joining');
-        this.openVideoCallModal();
-    }
     /**
      * Closes the waiting room
      */
@@ -1189,6 +1448,7 @@ class TasWaitingRoomComponent {
         this.videoCallModalRef.componentInstance.token = this.token;
         this.videoCallModalRef.componentInstance.appointmentId = this.resolvedAppointmentId;
         this.videoCallModalRef.componentInstance.videoCallId = this.videoCallId;
+        this.videoCallModalRef.componentInstance.userId = this.currentUser?.id;
         this.videoCallModalRef.componentInstance.tenant = this.tenant;
         this.videoCallModalRef.componentInstance.businessRole = this.businessRole;
         this.videoCallModalRef.componentInstance.isReturningFromPip = false;
@@ -1199,12 +1459,12 @@ class TasWaitingRoomComponent {
         });
     }
 }
-TasWaitingRoomComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasWaitingRoomComponent, deps: [{ token: i1.NgbActiveModal }, { token: TasService }, { token: i1.NgbModal }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TasWaitingRoomComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasWaitingRoomComponent, selector: "tas-waiting-room", inputs: { roomType: "roomType", entityId: "entityId", tenant: "tenant", businessRole: "businessRole", currentUser: "currentUser" }, ngImport: i0, template: "<div class=\"tas-waiting-room\">\n  <!-- Header -->\n  <div class=\"waiting-room-header\">\n    <h2 class=\"header-title\">Iniciar turno</h2>\n    <button type=\"button\" class=\"close-btn\" (click)=\"cancel()\" aria-label=\"Close\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"waiting-room-content\">\n    <!-- CHECKING_STATUS State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.CHECKING_STATUS\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Verificando estado de la sesi\u00F3n...</p>\n    </div>\n\n    <!-- WAITING_FOR_OWNER State (Non-owner waiting) -->\n    <div class=\"state-container waiting-for-owner\" *ngIf=\"state === WaitingRoomState.WAITING_FOR_OWNER\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message waiting-title\">Medicina laboral te va a admitir en unos instantes...</p>\n      <p class=\"state-submessage\">Por favor, permanec\u00E9 en esta pantalla hasta que inicie la consulta.</p>\n    </div>\n\n    <!-- READY State (Owner can join) -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.READY\">\n      <div class=\"state-icon ready\">\n        <i class=\"fa fa-check-circle\"></i>\n      </div>\n      <p class=\"state-message success\">\u00A1La sala est\u00E1 lista!</p>\n      <p class=\"state-submessage\">Pod\u00E9s unirte a la videollamada cuando quieras</p>\n      <button type=\"button\" class=\"btn action-btn join-btn\" (click)=\"joinSession()\">\n        <i class=\"fa fa-sign-in\"></i>\n        Unirse a la llamada\n      </button>\n    </div>\n\n    <!-- GETTING_TOKEN State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.GETTING_TOKEN\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Conectando...</p>\n    </div>\n\n    <!-- ERROR State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.ERROR\">\n      <div class=\"state-icon error\">\n        <i class=\"fa fa-exclamation-triangle\"></i>\n      </div>\n      <p class=\"state-message error\">Ocurri\u00F3 un error</p>\n      <p class=\"error-details\" *ngIf=\"errorMessage\">\n        {{ errorMessage }}\n      </p>\n      <button type=\"button\" class=\"btn action-btn retry-btn\" (click)=\"retry()\">\n        <i class=\"fa fa-refresh\"></i>\n        Reintentar\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".tas-waiting-room{display:flex;flex-direction:column;min-height:420px;background:#ffffff;border-radius:5px;overflow:hidden}.waiting-room-header{position:relative;padding:20px 40px;border-bottom:1px solid #e9ecef;display:flex;align-items:center;justify-content:space-between}.waiting-room-header .header-title{margin:0;font-size:18px;font-weight:600;line-height:24px;color:#212529}.waiting-room-header .close-btn{width:32px;height:32px;border:none;background:transparent;border-radius:4px;color:#6c757d;cursor:pointer;transition:all .2s ease;font-size:20px;display:flex;align-items:center;justify-content:center}.waiting-room-header .close-btn:hover{background:#f8f9fa;color:#212529}.waiting-title{font-size:16px;font-weight:600;color:#212529;margin-bottom:8px}.waiting-room-content{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 40px;background:#ffffff}.state-container{text-align:center;max-width:400px;width:100%}.mode-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:24px;padding:4px;background:#f8f9fa;border-radius:8px}.mode-tab{flex:1;padding:10px 16px;font-size:13px;font-weight:600;border:none;border-radius:6px;background:transparent;color:#6c757d;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.mode-tab i{font-size:14px}.mode-tab:hover{color:#212529}.mode-tab.active{background:#ffffff;color:#1da4b1;box-shadow:0 2px 8px #00000014}.mode-content{animation:fadeIn .3s ease}.session-input-container{display:flex;flex-direction:column;gap:16px;margin-top:8px}.session-input{width:100%;padding:14px 16px;font-size:14px;border:2px solid #e9ecef;border-radius:8px;background:#ffffff;color:#212529;transition:all .2s ease;text-align:center;font-family:Monaco,Consolas,monospace;letter-spacing:.5px}.session-input::placeholder{color:#6c757d;font-family:inherit;letter-spacing:normal}.session-input:focus{outline:none;border-color:#1da4b1;box-shadow:0 0 0 3px #1da4b126}.session-input:hover:not(:focus){border-color:#6c757d}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.state-icon{width:80px;height:80px;margin:0 auto 24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.state-icon i{font-size:36px}.state-icon.idle{background:rgba(29,164,177,.1);border:2px dashed #1da4b1}.state-icon.idle i{color:#1da4b1}.state-icon.loading{background:rgba(29,164,177,.1);border:2px solid #1da4b1}.state-icon.ready{background:linear-gradient(135deg,#1da4b1 0%,#38b89a 100%);box-shadow:0 4px 16px #1da4b14d}.state-icon.ready i{color:#fff}.state-icon.error{background:rgba(238,49,107,.1);border:2px solid #ee316b}.state-icon.error i{color:#ee316b}.spinner{width:40px;height:40px;border:3px solid #e9ecef;border-top-color:#1da4b1;border-radius:50%;animation:spin 1s linear infinite}.state-message{font-size:16px;font-weight:600;margin:0 0 8px;color:#212529;line-height:24px}.state-message.success{color:#1da4b1}.state-message.error{color:#ee316b}.state-submessage{font-size:14px;color:#6c757d;margin:0 0 24px;font-weight:400}.error-details{font-size:13px;color:#ee316b;margin:0 0 24px;padding:12px 16px;background:rgba(238,49,107,.08);border-radius:8px;border:1px solid rgba(238,49,107,.2)}.progress-steps{display:flex;justify-content:center;gap:24px;margin:24px 0 32px}.step{display:flex;flex-direction:column;align-items:center;gap:8px}.step .step-indicator{width:32px;height:32px;border-radius:50%;background:#f8f9fa;border:2px solid #e9ecef;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.step .step-indicator i{font-size:12px;color:#fff}.step .step-label{font-size:11px;color:#6c757d;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.step.active .step-indicator{background:rgba(29,164,177,.1);border-color:#1da4b1;animation:pulse-active 1.5s infinite}.step.active .step-label{color:#1da4b1;font-weight:600}.step.completed .step-indicator{background:#1da4b1;border-color:#1da4b1}.step.completed .step-label{color:#1da4b1;font-weight:600}.action-btn{padding:12px 32px;font-size:16px;font-weight:600;border-radius:4px;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:10px}.action-btn i{font-size:16px}.action-btn.create-btn{background:#0077b3;color:#fff;box-shadow:0 2px 8px #0077b340}.action-btn.create-btn:hover{background:#005c8a;box-shadow:0 4px 12px #0077b359}.action-btn.create-btn:active{transform:translateY(1px)}.action-btn.join-btn{background:#1da4b1;color:#fff;box-shadow:0 2px 8px #1da4b140;animation:pulse-ready 2s infinite}.action-btn.join-btn:hover{background:#17848e;box-shadow:0 4px 12px #1da4b159}.action-btn.join-btn:active{transform:translateY(1px)}.action-btn.retry-btn{background:transparent;color:#6c757d;border:1px solid #e9ecef}.action-btn.retry-btn:hover{background:#f8f9fa;border-color:#6c757d;color:#212529}.waiting-room-footer{padding:16px 40px 24px;background:#ffffff;border-top:1px solid #e9ecef;display:flex;justify-content:center}.waiting-room-footer .cancel-btn{padding:10px 24px;font-size:14px;font-weight:600;border-radius:4px;background:transparent;color:#6c757d;border:none;cursor:pointer;transition:all .2s ease}.waiting-room-footer .cancel-btn:hover{background:#f8f9fa;color:#212529}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-active{0%,to{box-shadow:0 0 #1da4b166}50%{box-shadow:0 0 0 8px #1da4b100}}@keyframes pulse-ready{0%,to{box-shadow:0 2px 8px #1da4b140}50%{box-shadow:0 4px 16px #1da4b166}}@media (max-width: 576px){.tas-waiting-room{min-height:380px}.waiting-room-header{padding:24px 24px 20px}.waiting-room-header .header-icon{width:56px;height:56px}.waiting-room-header .header-icon i{font-size:22px}.waiting-room-header .header-title{font-size:18px}.waiting-room-content{padding:24px}.state-icon{width:64px;height:64px}.state-icon i{font-size:28px}.spinner{width:32px;height:32px}.progress-steps{gap:12px}.step .step-indicator{width:28px;height:28px}.step .step-label{font-size:9px}.action-btn{padding:10px 24px;font-size:14px}.waiting-room-footer{padding:16px 24px 20px}}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TasWaitingRoomComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasWaitingRoomComponent, deps: [{ token: i1.NgbActiveModal }, { token: TasService }, { token: GeolocationService }, { token: i1.NgbModal }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TasWaitingRoomComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasWaitingRoomComponent, selector: "tas-waiting-room", inputs: { roomType: "roomType", entityId: "entityId", tenant: "tenant", businessRole: "businessRole", currentUser: "currentUser" }, ngImport: i0, template: "<div class=\"tas-waiting-room\">\n  <!-- Header -->\n  <div class=\"waiting-room-header\">\n    <h2 class=\"header-title\">Iniciar turno</h2>\n    <button type=\"button\" class=\"close-btn\" (click)=\"cancel()\" aria-label=\"Close\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"waiting-room-content\">\n    <!-- CHECKING_STATUS State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.CHECKING_STATUS\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Verificando estado de la sesi\u00F3n...</p>\n    </div>\n\n    <!-- WAITING_FOR_JOINABLE State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.WAITING_FOR_JOINABLE\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Esperando que la sesi\u00F3n est\u00E9 disponible...</p>\n      <p class=\"state-submessage\">Por favor, permanec\u00E9 en esta pantalla.</p>\n    </div>\n\n    <!-- READY State (Join button enabled) -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.READY\">\n      <div class=\"state-icon ready\">\n        <i class=\"fa fa-check-circle\"></i>\n      </div>\n      <p class=\"state-message success\">\u00A1La sala est\u00E1 lista!</p>\n      <button type=\"button\" class=\"btn action-btn join-btn\" (click)=\"joinSession()\">\n        <i class=\"fa fa-sign-in\"></i>\n        Unirse a la llamada\n      </button>\n    </div>\n\n    <!-- JOINING State (Auto-joining) -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.JOINING\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Ingresando a la llamada...</p>\n    </div>\n\n    <!-- GETTING_TOKEN State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.GETTING_TOKEN\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Conectando...</p>\n    </div>\n\n    <!-- ERROR State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.ERROR\">\n      <div class=\"state-icon error\">\n        <i class=\"fa fa-exclamation-triangle\"></i>\n      </div>\n      <p class=\"state-message error\">Ocurri\u00F3 un error</p>\n      <p class=\"error-details\" *ngIf=\"errorMessage\">\n        {{ errorMessage }}\n      </p>\n      <button type=\"button\" class=\"btn action-btn retry-btn\" (click)=\"retry()\">\n        <i class=\"fa fa-refresh\"></i>\n        Reintentar\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".tas-waiting-room{display:flex;flex-direction:column;min-height:420px;background:#ffffff;border-radius:5px;overflow:hidden}.waiting-room-header{position:relative;padding:20px 40px;border-bottom:1px solid #e9ecef;display:flex;align-items:center;justify-content:space-between}.waiting-room-header .header-title{margin:0;font-size:18px;font-weight:600;line-height:24px;color:#212529}.waiting-room-header .close-btn{width:32px;height:32px;border:none;background:transparent;border-radius:4px;color:#6c757d;cursor:pointer;transition:all .2s ease;font-size:20px;display:flex;align-items:center;justify-content:center}.waiting-room-header .close-btn:hover{background:#f8f9fa;color:#212529}.waiting-title{font-size:16px;font-weight:600;color:#212529;margin-bottom:8px}.waiting-room-content{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 40px;background:#ffffff}.state-container{text-align:center;max-width:400px;width:100%}.mode-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:24px;padding:4px;background:#f8f9fa;border-radius:8px}.mode-tab{flex:1;padding:10px 16px;font-size:13px;font-weight:600;border:none;border-radius:6px;background:transparent;color:#6c757d;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.mode-tab i{font-size:14px}.mode-tab:hover{color:#212529}.mode-tab.active{background:#ffffff;color:#1da4b1;box-shadow:0 2px 8px #00000014}.mode-content{animation:fadeIn .3s ease}.session-input-container{display:flex;flex-direction:column;gap:16px;margin-top:8px}.session-input{width:100%;padding:14px 16px;font-size:14px;border:2px solid #e9ecef;border-radius:8px;background:#ffffff;color:#212529;transition:all .2s ease;text-align:center;font-family:Monaco,Consolas,monospace;letter-spacing:.5px}.session-input::placeholder{color:#6c757d;font-family:inherit;letter-spacing:normal}.session-input:focus{outline:none;border-color:#1da4b1;box-shadow:0 0 0 3px #1da4b126}.session-input:hover:not(:focus){border-color:#6c757d}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.state-icon{width:80px;height:80px;margin:0 auto 24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.state-icon i{font-size:36px}.state-icon.idle{background:rgba(29,164,177,.1);border:2px dashed #1da4b1}.state-icon.idle i{color:#1da4b1}.state-icon.loading{background:rgba(29,164,177,.1);border:2px solid #1da4b1}.state-icon.ready{background:linear-gradient(135deg,#1da4b1 0%,#38b89a 100%);box-shadow:0 4px 16px #1da4b14d}.state-icon.ready i{color:#fff}.state-icon.error{background:rgba(238,49,107,.1);border:2px solid #ee316b}.state-icon.error i{color:#ee316b}.spinner{width:40px;height:40px;border:3px solid #e9ecef;border-top-color:#1da4b1;border-radius:50%;animation:spin 1s linear infinite}.state-message{font-size:16px;font-weight:600;margin:0 0 8px;color:#212529;line-height:24px}.state-message.success{color:#1da4b1}.state-message.error{color:#ee316b}.state-submessage{font-size:14px;color:#6c757d;margin:0 0 24px;font-weight:400}.error-details{font-size:13px;color:#ee316b;margin:0 0 24px;padding:12px 16px;background:rgba(238,49,107,.08);border-radius:8px;border:1px solid rgba(238,49,107,.2)}.progress-steps{display:flex;justify-content:center;gap:24px;margin:24px 0 32px}.step{display:flex;flex-direction:column;align-items:center;gap:8px}.step .step-indicator{width:32px;height:32px;border-radius:50%;background:#f8f9fa;border:2px solid #e9ecef;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.step .step-indicator i{font-size:12px;color:#fff}.step .step-label{font-size:11px;color:#6c757d;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.step.active .step-indicator{background:rgba(29,164,177,.1);border-color:#1da4b1;animation:pulse-active 1.5s infinite}.step.active .step-label{color:#1da4b1;font-weight:600}.step.completed .step-indicator{background:#1da4b1;border-color:#1da4b1}.step.completed .step-label{color:#1da4b1;font-weight:600}.action-btn{padding:12px 32px;font-size:16px;font-weight:600;border-radius:4px;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:10px}.action-btn i{font-size:16px}.action-btn.create-btn{background:#0077b3;color:#fff;box-shadow:0 2px 8px #0077b340}.action-btn.create-btn:hover{background:#005c8a;box-shadow:0 4px 12px #0077b359}.action-btn.create-btn:active{transform:translateY(1px)}.action-btn.join-btn{background:#1da4b1;color:#fff;box-shadow:0 2px 8px #1da4b140;animation:pulse-ready 2s infinite}.action-btn.join-btn:hover{background:#17848e;box-shadow:0 4px 12px #1da4b159}.action-btn.join-btn:active{transform:translateY(1px)}.action-btn.retry-btn{background:transparent;color:#6c757d;border:1px solid #e9ecef}.action-btn.retry-btn:hover{background:#f8f9fa;border-color:#6c757d;color:#212529}.waiting-room-footer{padding:16px 40px 24px;background:#ffffff;border-top:1px solid #e9ecef;display:flex;justify-content:center}.waiting-room-footer .cancel-btn{padding:10px 24px;font-size:14px;font-weight:600;border-radius:4px;background:transparent;color:#6c757d;border:none;cursor:pointer;transition:all .2s ease}.waiting-room-footer .cancel-btn:hover{background:#f8f9fa;color:#212529}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-active{0%,to{box-shadow:0 0 #1da4b166}50%{box-shadow:0 0 0 8px #1da4b100}}@keyframes pulse-ready{0%,to{box-shadow:0 2px 8px #1da4b140}50%{box-shadow:0 4px 16px #1da4b166}}@media (max-width: 576px){.tas-waiting-room{min-height:380px}.waiting-room-header{padding:24px 24px 20px}.waiting-room-header .header-icon{width:56px;height:56px}.waiting-room-header .header-icon i{font-size:22px}.waiting-room-header .header-title{font-size:18px}.waiting-room-content{padding:24px}.state-icon{width:64px;height:64px}.state-icon i{font-size:28px}.spinner{width:32px;height:32px}.progress-steps{gap:12px}.step .step-indicator{width:28px;height:28px}.step .step-label{font-size:9px}.action-btn{padding:10px 24px;font-size:14px}.waiting-room-footer{padding:16px 24px 20px}}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasWaitingRoomComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tas-waiting-room', template: "<div class=\"tas-waiting-room\">\n  <!-- Header -->\n  <div class=\"waiting-room-header\">\n    <h2 class=\"header-title\">Iniciar turno</h2>\n    <button type=\"button\" class=\"close-btn\" (click)=\"cancel()\" aria-label=\"Close\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"waiting-room-content\">\n    <!-- CHECKING_STATUS State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.CHECKING_STATUS\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Verificando estado de la sesi\u00F3n...</p>\n    </div>\n\n    <!-- WAITING_FOR_OWNER State (Non-owner waiting) -->\n    <div class=\"state-container waiting-for-owner\" *ngIf=\"state === WaitingRoomState.WAITING_FOR_OWNER\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message waiting-title\">Medicina laboral te va a admitir en unos instantes...</p>\n      <p class=\"state-submessage\">Por favor, permanec\u00E9 en esta pantalla hasta que inicie la consulta.</p>\n    </div>\n\n    <!-- READY State (Owner can join) -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.READY\">\n      <div class=\"state-icon ready\">\n        <i class=\"fa fa-check-circle\"></i>\n      </div>\n      <p class=\"state-message success\">\u00A1La sala est\u00E1 lista!</p>\n      <p class=\"state-submessage\">Pod\u00E9s unirte a la videollamada cuando quieras</p>\n      <button type=\"button\" class=\"btn action-btn join-btn\" (click)=\"joinSession()\">\n        <i class=\"fa fa-sign-in\"></i>\n        Unirse a la llamada\n      </button>\n    </div>\n\n    <!-- GETTING_TOKEN State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.GETTING_TOKEN\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Conectando...</p>\n    </div>\n\n    <!-- ERROR State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.ERROR\">\n      <div class=\"state-icon error\">\n        <i class=\"fa fa-exclamation-triangle\"></i>\n      </div>\n      <p class=\"state-message error\">Ocurri\u00F3 un error</p>\n      <p class=\"error-details\" *ngIf=\"errorMessage\">\n        {{ errorMessage }}\n      </p>\n      <button type=\"button\" class=\"btn action-btn retry-btn\" (click)=\"retry()\">\n        <i class=\"fa fa-refresh\"></i>\n        Reintentar\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".tas-waiting-room{display:flex;flex-direction:column;min-height:420px;background:#ffffff;border-radius:5px;overflow:hidden}.waiting-room-header{position:relative;padding:20px 40px;border-bottom:1px solid #e9ecef;display:flex;align-items:center;justify-content:space-between}.waiting-room-header .header-title{margin:0;font-size:18px;font-weight:600;line-height:24px;color:#212529}.waiting-room-header .close-btn{width:32px;height:32px;border:none;background:transparent;border-radius:4px;color:#6c757d;cursor:pointer;transition:all .2s ease;font-size:20px;display:flex;align-items:center;justify-content:center}.waiting-room-header .close-btn:hover{background:#f8f9fa;color:#212529}.waiting-title{font-size:16px;font-weight:600;color:#212529;margin-bottom:8px}.waiting-room-content{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 40px;background:#ffffff}.state-container{text-align:center;max-width:400px;width:100%}.mode-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:24px;padding:4px;background:#f8f9fa;border-radius:8px}.mode-tab{flex:1;padding:10px 16px;font-size:13px;font-weight:600;border:none;border-radius:6px;background:transparent;color:#6c757d;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.mode-tab i{font-size:14px}.mode-tab:hover{color:#212529}.mode-tab.active{background:#ffffff;color:#1da4b1;box-shadow:0 2px 8px #00000014}.mode-content{animation:fadeIn .3s ease}.session-input-container{display:flex;flex-direction:column;gap:16px;margin-top:8px}.session-input{width:100%;padding:14px 16px;font-size:14px;border:2px solid #e9ecef;border-radius:8px;background:#ffffff;color:#212529;transition:all .2s ease;text-align:center;font-family:Monaco,Consolas,monospace;letter-spacing:.5px}.session-input::placeholder{color:#6c757d;font-family:inherit;letter-spacing:normal}.session-input:focus{outline:none;border-color:#1da4b1;box-shadow:0 0 0 3px #1da4b126}.session-input:hover:not(:focus){border-color:#6c757d}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.state-icon{width:80px;height:80px;margin:0 auto 24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.state-icon i{font-size:36px}.state-icon.idle{background:rgba(29,164,177,.1);border:2px dashed #1da4b1}.state-icon.idle i{color:#1da4b1}.state-icon.loading{background:rgba(29,164,177,.1);border:2px solid #1da4b1}.state-icon.ready{background:linear-gradient(135deg,#1da4b1 0%,#38b89a 100%);box-shadow:0 4px 16px #1da4b14d}.state-icon.ready i{color:#fff}.state-icon.error{background:rgba(238,49,107,.1);border:2px solid #ee316b}.state-icon.error i{color:#ee316b}.spinner{width:40px;height:40px;border:3px solid #e9ecef;border-top-color:#1da4b1;border-radius:50%;animation:spin 1s linear infinite}.state-message{font-size:16px;font-weight:600;margin:0 0 8px;color:#212529;line-height:24px}.state-message.success{color:#1da4b1}.state-message.error{color:#ee316b}.state-submessage{font-size:14px;color:#6c757d;margin:0 0 24px;font-weight:400}.error-details{font-size:13px;color:#ee316b;margin:0 0 24px;padding:12px 16px;background:rgba(238,49,107,.08);border-radius:8px;border:1px solid rgba(238,49,107,.2)}.progress-steps{display:flex;justify-content:center;gap:24px;margin:24px 0 32px}.step{display:flex;flex-direction:column;align-items:center;gap:8px}.step .step-indicator{width:32px;height:32px;border-radius:50%;background:#f8f9fa;border:2px solid #e9ecef;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.step .step-indicator i{font-size:12px;color:#fff}.step .step-label{font-size:11px;color:#6c757d;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.step.active .step-indicator{background:rgba(29,164,177,.1);border-color:#1da4b1;animation:pulse-active 1.5s infinite}.step.active .step-label{color:#1da4b1;font-weight:600}.step.completed .step-indicator{background:#1da4b1;border-color:#1da4b1}.step.completed .step-label{color:#1da4b1;font-weight:600}.action-btn{padding:12px 32px;font-size:16px;font-weight:600;border-radius:4px;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:10px}.action-btn i{font-size:16px}.action-btn.create-btn{background:#0077b3;color:#fff;box-shadow:0 2px 8px #0077b340}.action-btn.create-btn:hover{background:#005c8a;box-shadow:0 4px 12px #0077b359}.action-btn.create-btn:active{transform:translateY(1px)}.action-btn.join-btn{background:#1da4b1;color:#fff;box-shadow:0 2px 8px #1da4b140;animation:pulse-ready 2s infinite}.action-btn.join-btn:hover{background:#17848e;box-shadow:0 4px 12px #1da4b159}.action-btn.join-btn:active{transform:translateY(1px)}.action-btn.retry-btn{background:transparent;color:#6c757d;border:1px solid #e9ecef}.action-btn.retry-btn:hover{background:#f8f9fa;border-color:#6c757d;color:#212529}.waiting-room-footer{padding:16px 40px 24px;background:#ffffff;border-top:1px solid #e9ecef;display:flex;justify-content:center}.waiting-room-footer .cancel-btn{padding:10px 24px;font-size:14px;font-weight:600;border-radius:4px;background:transparent;color:#6c757d;border:none;cursor:pointer;transition:all .2s ease}.waiting-room-footer .cancel-btn:hover{background:#f8f9fa;color:#212529}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-active{0%,to{box-shadow:0 0 #1da4b166}50%{box-shadow:0 0 0 8px #1da4b100}}@keyframes pulse-ready{0%,to{box-shadow:0 2px 8px #1da4b140}50%{box-shadow:0 4px 16px #1da4b166}}@media (max-width: 576px){.tas-waiting-room{min-height:380px}.waiting-room-header{padding:24px 24px 20px}.waiting-room-header .header-icon{width:56px;height:56px}.waiting-room-header .header-icon i{font-size:22px}.waiting-room-header .header-title{font-size:18px}.waiting-room-content{padding:24px}.state-icon{width:64px;height:64px}.state-icon i{font-size:28px}.spinner{width:32px;height:32px}.progress-steps{gap:12px}.step .step-indicator{width:28px;height:28px}.step .step-label{font-size:9px}.action-btn{padding:10px 24px;font-size:14px}.waiting-room-footer{padding:16px 24px 20px}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }, { type: i1.NgbModal }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { roomType: [{
+            args: [{ selector: 'tas-waiting-room', template: "<div class=\"tas-waiting-room\">\n  <!-- Header -->\n  <div class=\"waiting-room-header\">\n    <h2 class=\"header-title\">Iniciar turno</h2>\n    <button type=\"button\" class=\"close-btn\" (click)=\"cancel()\" aria-label=\"Close\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"waiting-room-content\">\n    <!-- CHECKING_STATUS State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.CHECKING_STATUS\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Verificando estado de la sesi\u00F3n...</p>\n    </div>\n\n    <!-- WAITING_FOR_JOINABLE State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.WAITING_FOR_JOINABLE\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Esperando que la sesi\u00F3n est\u00E9 disponible...</p>\n      <p class=\"state-submessage\">Por favor, permanec\u00E9 en esta pantalla.</p>\n    </div>\n\n    <!-- READY State (Join button enabled) -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.READY\">\n      <div class=\"state-icon ready\">\n        <i class=\"fa fa-check-circle\"></i>\n      </div>\n      <p class=\"state-message success\">\u00A1La sala est\u00E1 lista!</p>\n      <button type=\"button\" class=\"btn action-btn join-btn\" (click)=\"joinSession()\">\n        <i class=\"fa fa-sign-in\"></i>\n        Unirse a la llamada\n      </button>\n    </div>\n\n    <!-- JOINING State (Auto-joining) -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.JOINING\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Ingresando a la llamada...</p>\n    </div>\n\n    <!-- GETTING_TOKEN State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.GETTING_TOKEN\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Conectando...</p>\n    </div>\n\n    <!-- ERROR State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.ERROR\">\n      <div class=\"state-icon error\">\n        <i class=\"fa fa-exclamation-triangle\"></i>\n      </div>\n      <p class=\"state-message error\">Ocurri\u00F3 un error</p>\n      <p class=\"error-details\" *ngIf=\"errorMessage\">\n        {{ errorMessage }}\n      </p>\n      <button type=\"button\" class=\"btn action-btn retry-btn\" (click)=\"retry()\">\n        <i class=\"fa fa-refresh\"></i>\n        Reintentar\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".tas-waiting-room{display:flex;flex-direction:column;min-height:420px;background:#ffffff;border-radius:5px;overflow:hidden}.waiting-room-header{position:relative;padding:20px 40px;border-bottom:1px solid #e9ecef;display:flex;align-items:center;justify-content:space-between}.waiting-room-header .header-title{margin:0;font-size:18px;font-weight:600;line-height:24px;color:#212529}.waiting-room-header .close-btn{width:32px;height:32px;border:none;background:transparent;border-radius:4px;color:#6c757d;cursor:pointer;transition:all .2s ease;font-size:20px;display:flex;align-items:center;justify-content:center}.waiting-room-header .close-btn:hover{background:#f8f9fa;color:#212529}.waiting-title{font-size:16px;font-weight:600;color:#212529;margin-bottom:8px}.waiting-room-content{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 40px;background:#ffffff}.state-container{text-align:center;max-width:400px;width:100%}.mode-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:24px;padding:4px;background:#f8f9fa;border-radius:8px}.mode-tab{flex:1;padding:10px 16px;font-size:13px;font-weight:600;border:none;border-radius:6px;background:transparent;color:#6c757d;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.mode-tab i{font-size:14px}.mode-tab:hover{color:#212529}.mode-tab.active{background:#ffffff;color:#1da4b1;box-shadow:0 2px 8px #00000014}.mode-content{animation:fadeIn .3s ease}.session-input-container{display:flex;flex-direction:column;gap:16px;margin-top:8px}.session-input{width:100%;padding:14px 16px;font-size:14px;border:2px solid #e9ecef;border-radius:8px;background:#ffffff;color:#212529;transition:all .2s ease;text-align:center;font-family:Monaco,Consolas,monospace;letter-spacing:.5px}.session-input::placeholder{color:#6c757d;font-family:inherit;letter-spacing:normal}.session-input:focus{outline:none;border-color:#1da4b1;box-shadow:0 0 0 3px #1da4b126}.session-input:hover:not(:focus){border-color:#6c757d}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.state-icon{width:80px;height:80px;margin:0 auto 24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.state-icon i{font-size:36px}.state-icon.idle{background:rgba(29,164,177,.1);border:2px dashed #1da4b1}.state-icon.idle i{color:#1da4b1}.state-icon.loading{background:rgba(29,164,177,.1);border:2px solid #1da4b1}.state-icon.ready{background:linear-gradient(135deg,#1da4b1 0%,#38b89a 100%);box-shadow:0 4px 16px #1da4b14d}.state-icon.ready i{color:#fff}.state-icon.error{background:rgba(238,49,107,.1);border:2px solid #ee316b}.state-icon.error i{color:#ee316b}.spinner{width:40px;height:40px;border:3px solid #e9ecef;border-top-color:#1da4b1;border-radius:50%;animation:spin 1s linear infinite}.state-message{font-size:16px;font-weight:600;margin:0 0 8px;color:#212529;line-height:24px}.state-message.success{color:#1da4b1}.state-message.error{color:#ee316b}.state-submessage{font-size:14px;color:#6c757d;margin:0 0 24px;font-weight:400}.error-details{font-size:13px;color:#ee316b;margin:0 0 24px;padding:12px 16px;background:rgba(238,49,107,.08);border-radius:8px;border:1px solid rgba(238,49,107,.2)}.progress-steps{display:flex;justify-content:center;gap:24px;margin:24px 0 32px}.step{display:flex;flex-direction:column;align-items:center;gap:8px}.step .step-indicator{width:32px;height:32px;border-radius:50%;background:#f8f9fa;border:2px solid #e9ecef;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.step .step-indicator i{font-size:12px;color:#fff}.step .step-label{font-size:11px;color:#6c757d;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.step.active .step-indicator{background:rgba(29,164,177,.1);border-color:#1da4b1;animation:pulse-active 1.5s infinite}.step.active .step-label{color:#1da4b1;font-weight:600}.step.completed .step-indicator{background:#1da4b1;border-color:#1da4b1}.step.completed .step-label{color:#1da4b1;font-weight:600}.action-btn{padding:12px 32px;font-size:16px;font-weight:600;border-radius:4px;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:10px}.action-btn i{font-size:16px}.action-btn.create-btn{background:#0077b3;color:#fff;box-shadow:0 2px 8px #0077b340}.action-btn.create-btn:hover{background:#005c8a;box-shadow:0 4px 12px #0077b359}.action-btn.create-btn:active{transform:translateY(1px)}.action-btn.join-btn{background:#1da4b1;color:#fff;box-shadow:0 2px 8px #1da4b140;animation:pulse-ready 2s infinite}.action-btn.join-btn:hover{background:#17848e;box-shadow:0 4px 12px #1da4b159}.action-btn.join-btn:active{transform:translateY(1px)}.action-btn.retry-btn{background:transparent;color:#6c757d;border:1px solid #e9ecef}.action-btn.retry-btn:hover{background:#f8f9fa;border-color:#6c757d;color:#212529}.waiting-room-footer{padding:16px 40px 24px;background:#ffffff;border-top:1px solid #e9ecef;display:flex;justify-content:center}.waiting-room-footer .cancel-btn{padding:10px 24px;font-size:14px;font-weight:600;border-radius:4px;background:transparent;color:#6c757d;border:none;cursor:pointer;transition:all .2s ease}.waiting-room-footer .cancel-btn:hover{background:#f8f9fa;color:#212529}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-active{0%,to{box-shadow:0 0 #1da4b166}50%{box-shadow:0 0 0 8px #1da4b100}}@keyframes pulse-ready{0%,to{box-shadow:0 2px 8px #1da4b140}50%{box-shadow:0 4px 16px #1da4b166}}@media (max-width: 576px){.tas-waiting-room{min-height:380px}.waiting-room-header{padding:24px 24px 20px}.waiting-room-header .header-icon{width:56px;height:56px}.waiting-room-header .header-icon i{font-size:22px}.waiting-room-header .header-title{font-size:18px}.waiting-room-content{padding:24px}.state-icon{width:64px;height:64px}.state-icon i{font-size:28px}.spinner{width:32px;height:32px}.progress-steps{gap:12px}.step .step-indicator{width:28px;height:28px}.step .step-label{font-size:9px}.action-btn{padding:10px 24px;font-size:14px}.waiting-room-footer{padding:16px 24px 20px}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }, { type: GeolocationService }, { type: i1.NgbModal }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { roomType: [{
                 type: Input
             }], entityId: [{
                 type: Input
@@ -1223,12 +1483,15 @@ class TasButtonComponent {
         // Status endpoint params
         this.roomType = TasRoomType.TAS;
         this.businessRole = TasBusinessRole.USER;
+        // Style customization
+        this.variant = 'default';
+        this.buttonLabel = 'Iniciar TAS';
         this.isLoading = false;
-        this.buttonText = 'Iniciar TAS';
         // Status check state
         this.isCheckingStatus = false;
         this.isStatusError = false;
         this.statusErrorMessage = '';
+        this.isJoinable = false; // Tracks joinable field from status response
         this.subscriptions = new Subscription();
         this.currentModalRef = null;
         this.videoCallModalRef = null;
@@ -1241,18 +1504,22 @@ class TasButtonComponent {
             this.businessRole === TasBusinessRole.ADMIN_MANAGER ||
             this.businessRole === TasBusinessRole.MANAGER);
     }
-    /** Whether the button should be visible */
-    get isVisible() {
-        // Backoffice: always show (disabled if error)
-        // Other roles: hide if status error
-        if (this.isBackoffice) {
-            return true;
-        }
-        return !this.isStatusError;
-    }
     /** Whether the button should be disabled */
     get isDisabled() {
-        return this.isLoading || this.isCheckingStatus || this.isStatusError;
+        return this.isLoading || this.isStatusError || !this.isJoinable;
+    }
+    /** Reason why the button is disabled (for tooltip) */
+    get disabledReason() {
+        if (this.isLoading) {
+            return '';
+        }
+        if (this.isStatusError) {
+            return this.statusErrorMessage || 'Error al verificar el estado';
+        }
+        if (!this.isJoinable) {
+            return 'Todavía no es el horario de la llamada';
+        }
+        return '';
     }
     ngOnInit() {
         // Subscribe to viewMode to handle PiP return
@@ -1295,17 +1562,10 @@ class TasButtonComponent {
     checkStatus() {
         // Skip if required inputs are not available
         if (!this.tenant || !this.entityId) {
-            console.log('[TAS DEBUG] checkStatus skipped - missing required inputs');
             return;
         }
         this.isCheckingStatus = true;
         this.statusErrorMessage = '';
-        console.log('[TAS DEBUG] checkStatus called with:', {
-            roomType: this.roomType,
-            entityId: this.entityId,
-            tenant: this.tenant,
-            businessRole: this.businessRole,
-        });
         this.subscriptions.add(this.tasService.getProxyVideoStatus({
             roomType: this.roomType,
             entityId: this.entityId,
@@ -1322,20 +1582,19 @@ class TasButtonComponent {
                     response?.error ||
                     response?.name === 'HttpErrorResponse';
                 if (isErrorResponse) {
-                    console.error('[TAS DEBUG] Status check returned error in response:', response);
                     this.isCheckingStatus = false;
                     this.isStatusError = true;
                     this.statusErrorMessage = response?.error?.message || response?.message || 'Error checking status';
                 }
                 else {
-                    console.log('[TAS DEBUG] Status check successful:', response);
                     this.isCheckingStatus = false;
                     this.isStatusError = false;
                     this.statusErrorMessage = '';
+                    // Update joinable state from response
+                    this.isJoinable = response.content?.joinable ?? false;
                 }
             },
             error: (err) => {
-                console.error('[TAS DEBUG] Status check failed:', err);
                 this.isCheckingStatus = false;
                 this.isStatusError = true;
                 this.statusErrorMessage = err?.error?.message || err?.message || 'Error checking status';
@@ -1343,23 +1602,12 @@ class TasButtonComponent {
         }));
     }
     onClick() {
-        console.log('[TAS DEBUG] onClick called');
-        console.log('[TAS DEBUG] Inputs:', {
-            tenant: this.tenant,
-            entityId: this.entityId,
-            roomType: this.roomType,
-            businessRole: this.businessRole,
-            currentUser: this.currentUser,
-        });
         if (!this.tenant || !this.currentUser?.name) {
-            console.error('[TAS DEBUG] Tenant or current user not available');
             return;
         }
         if (!this.entityId) {
-            console.error('[TAS DEBUG] entityId is required');
             return;
         }
-        console.log('[TAS DEBUG] Validation passed, opening waiting room modal');
         this.openWaitingRoomModal();
     }
     openWaitingRoomModal() {
@@ -1401,10 +1649,10 @@ class TasButtonComponent {
     }
 }
 TasButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasButtonComponent, deps: [{ token: i1.NgbModal }, { token: TasService }], target: i0.ɵɵFactoryTarget.Component });
-TasButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasButtonComponent, selector: "tas-btn", inputs: { roomType: "roomType", entityId: "entityId", tenant: "tenant", businessRole: "businessRole", currentUser: "currentUser" }, ngImport: i0, template: "<button\n  *ngIf=\"isVisible\"\n  type=\"button\"\n  class=\"btn btn-primary tas-btn\"\n  (click)=\"onClick()\"\n  [disabled]=\"isDisabled\"\n>\n  <i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n  <span *ngIf=\"!isLoading\">Iniciar TAS</span>\n  <span *ngIf=\"isLoading\">Processing...</span>\n</button>\n\n", styles: [":host{display:inline-block}.tas-btn{background-color:#ee316b!important;color:#fff!important;border-color:#ee316b!important;margin-right:24px}.tas-btn:disabled{background-color:#ccc!important;border-color:#ccc!important;cursor:not-allowed}.tas-btn:hover:not(:disabled){background-color:#d62a5f!important;border-color:#d62a5f!important}.tas-btn i{margin-right:5px}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TasButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasButtonComponent, selector: "tas-btn", inputs: { roomType: "roomType", entityId: "entityId", tenant: "tenant", businessRole: "businessRole", currentUser: "currentUser", variant: "variant", buttonLabel: "buttonLabel" }, ngImport: i0, template: "<span\n  [ngbTooltip]=\"isDisabled && disabledReason ? disabledReason : null\"\n  container=\"body\"\n  placement=\"top\"\n  tooltipClass=\"tas-btn-tooltip\"\n>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary tas-btn\"\n    [class.tas-btn--teal]=\"variant === 'teal'\"\n    (click)=\"onClick()\"\n    [disabled]=\"isDisabled\"\n  >\n    <i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n    <span *ngIf=\"!isLoading\">{{ buttonLabel }}</span>\n    <span *ngIf=\"isLoading\">Processing...</span>\n  </button>\n</span>\n", styles: [":host{display:inline-block}.tas-btn{background-color:#ee316b!important;color:#fff!important;border-color:#ee316b!important;margin-right:24px;display:flex;padding:6px 14px;justify-content:center;align-items:center;gap:7px;flex-shrink:0;flex-grow:0}.tas-btn:disabled{background-color:#ccc!important;border-color:#ccc!important;cursor:not-allowed}.tas-btn:hover:not(:disabled){background-color:#d62a5f!important;border-color:#d62a5f!important}.tas-btn i{margin-right:5px}.tas-btn--teal{background-color:#0097a7!important;border-color:#0097a7!important;border-radius:24px;padding:10px 24px;font-weight:500;margin-right:0}.tas-btn--teal:hover:not(:disabled){background-color:#00838f!important;border-color:#00838f!important}\n"], directives: [{ type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tas-btn', template: "<button\n  *ngIf=\"isVisible\"\n  type=\"button\"\n  class=\"btn btn-primary tas-btn\"\n  (click)=\"onClick()\"\n  [disabled]=\"isDisabled\"\n>\n  <i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n  <span *ngIf=\"!isLoading\">Iniciar TAS</span>\n  <span *ngIf=\"isLoading\">Processing...</span>\n</button>\n\n", styles: [":host{display:inline-block}.tas-btn{background-color:#ee316b!important;color:#fff!important;border-color:#ee316b!important;margin-right:24px}.tas-btn:disabled{background-color:#ccc!important;border-color:#ccc!important;cursor:not-allowed}.tas-btn:hover:not(:disabled){background-color:#d62a5f!important;border-color:#d62a5f!important}.tas-btn i{margin-right:5px}\n"] }]
+            args: [{ selector: 'tas-btn', template: "<span\n  [ngbTooltip]=\"isDisabled && disabledReason ? disabledReason : null\"\n  container=\"body\"\n  placement=\"top\"\n  tooltipClass=\"tas-btn-tooltip\"\n>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary tas-btn\"\n    [class.tas-btn--teal]=\"variant === 'teal'\"\n    (click)=\"onClick()\"\n    [disabled]=\"isDisabled\"\n  >\n    <i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n    <span *ngIf=\"!isLoading\">{{ buttonLabel }}</span>\n    <span *ngIf=\"isLoading\">Processing...</span>\n  </button>\n</span>\n", styles: [":host{display:inline-block}.tas-btn{background-color:#ee316b!important;color:#fff!important;border-color:#ee316b!important;margin-right:24px;display:flex;padding:6px 14px;justify-content:center;align-items:center;gap:7px;flex-shrink:0;flex-grow:0}.tas-btn:disabled{background-color:#ccc!important;border-color:#ccc!important;cursor:not-allowed}.tas-btn:hover:not(:disabled){background-color:#d62a5f!important;border-color:#d62a5f!important}.tas-btn i{margin-right:5px}.tas-btn--teal{background-color:#0097a7!important;border-color:#0097a7!important;border-radius:24px;padding:10px 24px;font-weight:500;margin-right:0}.tas-btn--teal:hover:not(:disabled){background-color:#00838f!important;border-color:#00838f!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.NgbModal }, { type: TasService }]; }, propDecorators: { roomType: [{
                 type: Input
             }], entityId: [{
@@ -1415,6 +1663,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], currentUser: [{
                 type: Input
+            }], variant: [{
+                type: Input
+            }], buttonLabel: [{
+                type: Input
             }] } });
 
 class TasFloatingCallComponent {
@@ -1563,6 +1815,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             args: [{ selector: 'tas-floating-call', template: "<div class=\"tas-floating-container\" [class.visible]=\"isVisible\">\n  <!-- Video content area - shows main video only -->\n  <div class=\"floating-content\">\n    <!-- Main video container (subscriber if available, otherwise publisher) -->\n    <div id=\"pip-main-video\" class=\"pip-main-video\"></div>\n\n    <!-- Bottom controls -->\n    <div class=\"floating-controls\">\n      <button\n        class=\"action-btn expand-btn\"\n        (click)=\"onExpand()\"\n        title=\"Expand to fullscreen\"\n      >\n        <i class=\"fa fa-expand\"></i>\n      </button>\n      <button\n        class=\"action-btn mute-btn\"\n        [class.muted]=\"isMuted\"\n        (click)=\"toggleMute()\"\n        [title]=\"isMuted ? 'Unmute microphone' : 'Mute microphone'\"\n      >\n        <i\n          class=\"fa\"\n          [class.fa-microphone]=\"!isMuted\"\n          [class.fa-microphone-slash]=\"isMuted\"\n        ></i>\n      </button>\n      <button class=\"action-btn hangup-btn\" (click)=\"onHangUp()\" title=\"Hang up call\">\n        <i class=\"fa fa-phone\" style=\"transform: rotate(135deg)\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".tas-floating-container{position:fixed;bottom:20px;right:20px;width:280px;height:180px;background:#000;border-radius:12px;box-shadow:0 8px 32px #00000080;z-index:9999;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;transition:opacity .3s ease,visibility .3s ease,box-shadow .2s ease;opacity:0;visibility:hidden;pointer-events:none}.tas-floating-container.visible{opacity:1;visibility:visible;pointer-events:auto}.tas-floating-container:hover{box-shadow:0 8px 32px #00000080,0 0 0 2px #ffffff4d}.floating-content{position:relative;width:100%;height:100%;overflow:hidden}.pip-main-video{position:absolute;top:0;left:0;width:100%;height:100%;background:#000}.pip-main-video ::ng-deep video{width:100%;height:100%;object-fit:cover}.pip-main-video ::ng-deep .OT_subscriber,.pip-main-video ::ng-deep .OT_publisher{width:100%!important;height:100%!important}.pip-main-video ::ng-deep .OT_edge-bar-item,.pip-main-video ::ng-deep .OT_mute,.pip-main-video ::ng-deep .OT_audio-level-meter,.pip-main-video ::ng-deep .OT_bar,.pip-main-video ::ng-deep .OT_name{display:none!important}.floating-controls{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:12px;padding:6px 14px;background:rgba(0,0,0,.7);border-radius:24px;backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.tas-floating-container:hover .floating-controls{opacity:1;visibility:visible}.action-btn{width:32px;height:32px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s ease}.action-btn.expand-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.expand-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.mute-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn.muted{background:#f39c12;color:#fff}.action-btn.mute-btn.muted:hover{background:#e67e22}.action-btn.hangup-btn{background:#dc3545;color:#fff}.action-btn.hangup-btn:hover{background:#c82333;transform:scale(1.1)}\n"] }]
         }], ctorParameters: function () { return [{ type: TasService }, { type: i1.NgbModal }]; } });
 
+class TasIncomingAppointmentComponent {
+    constructor(tasService) {
+        this.tasService = tasService;
+        // Passthrough inputs for tas-btn
+        this.roomType = TasRoomType.TAS;
+        this.businessRole = TasBusinessRole.USER;
+        this.enterCall = new EventEmitter();
+        this.appointment = null;
+        this.isLoading = true;
+        this.hasError = false;
+        this.subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.loadAppointments();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    loadAppointments() {
+        const today = new Date();
+        const in7Days = new Date(today);
+        in7Days.setDate(today.getDate() + 7);
+        this.subscriptions.add(this.tasService
+            .getAppointments({ fromDate: this.formatDate(today), toDate: this.formatDate(in7Days) })
+            .subscribe({
+            next: (response) => {
+                // Handle both array response and wrapped response (e.g., { content: [...] })
+                const appointments = Array.isArray(response)
+                    ? response
+                    : response?.content || [];
+                // Filter for confirmed appointments and get the first one
+                const confirmed = appointments.filter((a) => a.status === AppointmentStatus.CONFIRMED);
+                this.appointment = confirmed.length > 0 ? confirmed[0] : null;
+                this.isLoading = false;
+            },
+            error: () => {
+                this.hasError = true;
+                this.isLoading = false;
+            },
+        }));
+    }
+    onEnterCall() {
+        if (this.appointment) {
+            this.enterCall.emit(this.appointment);
+        }
+    }
+    /**
+     * Format date to Spanish format: "Lunes 8 de diciembre"
+     */
+    get formattedDate() {
+        if (!this.appointment)
+            return '';
+        const [year, month, day] = this.appointment.date.split('-').map(Number);
+        const date = new Date(year, month - 1, day);
+        const dayNames = [
+            'Domingo', 'Lunes', 'Martes', 'Miércoles',
+            'Jueves', 'Viernes', 'Sábado'
+        ];
+        const monthNames = [
+            'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio',
+            'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'
+        ];
+        const dayName = dayNames[date.getDay()];
+        const dayNum = date.getDate();
+        const monthName = monthNames[date.getMonth()];
+        return `${dayName} ${dayNum} de ${monthName}`;
+    }
+    /**
+     * Format time range: "9:00 - 9:30"
+     */
+    get formattedTimeRange() {
+        if (!this.appointment)
+            return '';
+        return `${this.appointment.startTime} - ${this.appointment.endTime}`;
+    }
+    formatDate(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+}
+TasIncomingAppointmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasIncomingAppointmentComponent, deps: [{ token: TasService }], target: i0.ɵɵFactoryTarget.Component });
+TasIncomingAppointmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasIncomingAppointmentComponent, selector: "tas-incoming-appointment", inputs: { roomType: "roomType", entityId: "entityId", tenant: "tenant", businessRole: "businessRole", currentUser: "currentUser" }, outputs: { enterCall: "enterCall" }, ngImport: i0, template: "<div class=\"incoming-appointment-card\">\n  <h3 class=\"card-title\">Pr\u00F3ximo turno</h3>\n\n  <!-- Loading state -->\n  <div class=\"card-content\" *ngIf=\"isLoading\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n\n  <!-- Empty state -->\n  <div class=\"card-content empty-state\" *ngIf=\"!isLoading && !appointment\">\n    <div class=\"icon-container\">\n      <div class=\"icon-circle\">\n        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n      </div>\n      <span class=\"sparkle sparkle-1\">\u2726</span>\n      <span class=\"sparkle sparkle-2\">\u2726</span>\n      <span class=\"sparkle sparkle-3\">\u2726</span>\n      <span class=\"sparkle sparkle-4\">\u2726</span>\n    </div>\n    <h4 class=\"empty-title\">Todav\u00EDa no ten\u00E9s turnos agendados</h4>\n    <p class=\"empty-subtitle\">\n      En caso de que Medicina Laboral requiera una consulta, lo ver\u00E1s en esta secci\u00F3n.\n    </p>\n  </div>\n\n  <!-- Appointment state -->\n  <div class=\"card-content appointment-state\" *ngIf=\"!isLoading && appointment\">\n    \n    <div class=\"appointment-card\">\n      <div class=\"appointment-header\">\n        <tas-avatar [name]=\"appointment.title\" [size]=\"48\"></tas-avatar>\n        \n        <span class=\"doctor-name\">{{ appointment.title }}</span>\n      </div>\n      <div class=\"appointment-details\">\n        <div class=\"date-time\">\n          <span class=\"date\">{{ formattedDate }}</span>\n          <span class=\"time\">{{ formattedTimeRange }}</span>\n        </div>\n        <tas-btn\n          variant=\"teal\"\n          buttonLabel=\"Ingresar\"\n          [roomType]=\"roomType\"\n          [entityId]=\"entityId\"\n          [tenant]=\"tenant\"\n          [businessRole]=\"businessRole\"\n          [currentUser]=\"currentUser\"\n        ></tas-btn>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.incoming-appointment-card{background:#ffffff;border-radius:12px;box-shadow:0 2px 8px #00000014;padding:24px;min-width:360px}.card-title{font-size:16px;font-weight:400;color:#6b7280;margin:0 0 24px}.card-content{display:flex;flex-direction:column;align-items:center}.loading-spinner{width:40px;height:40px;border:3px solid #e0f7fa;border-top-color:#0097a7;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:20px 0}.icon-container{position:relative;width:120px;height:120px;margin-bottom:24px}.icon-circle{width:100%;height:100%;background:#e0f7fa;border-radius:50%;display:flex;align-items:center;justify-content:center}.icon-circle i{font-size:40px;color:#0097a7}.sparkle{position:absolute;color:#0097a7;font-size:12px}.sparkle-1{top:10px;right:5px}.sparkle-2{top:0;right:30px}.sparkle-3{top:25px;left:0}.sparkle-4{bottom:20px;right:0}.empty-title{font-size:18px;font-weight:600;color:#1f2937;margin:0 0 12px}.empty-subtitle{font-size:14px;color:#6b7280;margin:0;max-width:320px;line-height:1.5}.appointment-state{align-items:stretch}.appointment-card{border-radius:12px;border:1px solid var(--Primary-White-Uell50, #8ED1D8);background:#F1FAFA;padding:1.5rem}.appointment-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.doctor-name{overflow:hidden;color:var(--Neutral-GreyDark, #383E52);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.016px}.appointment-details{display:flex;justify-content:space-between;align-items:flex-end}.date-time{display:flex;flex-direction:column;gap:4px}.date{color:var(--Neutral-GreyDark, #383E52);font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.06px}.time{font-size:14px;color:var(--Neutral-GreyDark, #383E52);font-family:Inter;font-size:10px;font-style:normal;font-weight:400;line-height:14px;letter-spacing:.04px}\n"], components: [{ type: TasAvatarComponent, selector: "tas-avatar", inputs: ["name", "size"] }, { type: TasButtonComponent, selector: "tas-btn", inputs: ["roomType", "entityId", "tenant", "businessRole", "currentUser", "variant", "buttonLabel"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasIncomingAppointmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tas-incoming-appointment', template: "<div class=\"incoming-appointment-card\">\n  <h3 class=\"card-title\">Pr\u00F3ximo turno</h3>\n\n  <!-- Loading state -->\n  <div class=\"card-content\" *ngIf=\"isLoading\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n\n  <!-- Empty state -->\n  <div class=\"card-content empty-state\" *ngIf=\"!isLoading && !appointment\">\n    <div class=\"icon-container\">\n      <div class=\"icon-circle\">\n        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n      </div>\n      <span class=\"sparkle sparkle-1\">\u2726</span>\n      <span class=\"sparkle sparkle-2\">\u2726</span>\n      <span class=\"sparkle sparkle-3\">\u2726</span>\n      <span class=\"sparkle sparkle-4\">\u2726</span>\n    </div>\n    <h4 class=\"empty-title\">Todav\u00EDa no ten\u00E9s turnos agendados</h4>\n    <p class=\"empty-subtitle\">\n      En caso de que Medicina Laboral requiera una consulta, lo ver\u00E1s en esta secci\u00F3n.\n    </p>\n  </div>\n\n  <!-- Appointment state -->\n  <div class=\"card-content appointment-state\" *ngIf=\"!isLoading && appointment\">\n    \n    <div class=\"appointment-card\">\n      <div class=\"appointment-header\">\n        <tas-avatar [name]=\"appointment.title\" [size]=\"48\"></tas-avatar>\n        \n        <span class=\"doctor-name\">{{ appointment.title }}</span>\n      </div>\n      <div class=\"appointment-details\">\n        <div class=\"date-time\">\n          <span class=\"date\">{{ formattedDate }}</span>\n          <span class=\"time\">{{ formattedTimeRange }}</span>\n        </div>\n        <tas-btn\n          variant=\"teal\"\n          buttonLabel=\"Ingresar\"\n          [roomType]=\"roomType\"\n          [entityId]=\"entityId\"\n          [tenant]=\"tenant\"\n          [businessRole]=\"businessRole\"\n          [currentUser]=\"currentUser\"\n        ></tas-btn>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.incoming-appointment-card{background:#ffffff;border-radius:12px;box-shadow:0 2px 8px #00000014;padding:24px;min-width:360px}.card-title{font-size:16px;font-weight:400;color:#6b7280;margin:0 0 24px}.card-content{display:flex;flex-direction:column;align-items:center}.loading-spinner{width:40px;height:40px;border:3px solid #e0f7fa;border-top-color:#0097a7;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:20px 0}.icon-container{position:relative;width:120px;height:120px;margin-bottom:24px}.icon-circle{width:100%;height:100%;background:#e0f7fa;border-radius:50%;display:flex;align-items:center;justify-content:center}.icon-circle i{font-size:40px;color:#0097a7}.sparkle{position:absolute;color:#0097a7;font-size:12px}.sparkle-1{top:10px;right:5px}.sparkle-2{top:0;right:30px}.sparkle-3{top:25px;left:0}.sparkle-4{bottom:20px;right:0}.empty-title{font-size:18px;font-weight:600;color:#1f2937;margin:0 0 12px}.empty-subtitle{font-size:14px;color:#6b7280;margin:0;max-width:320px;line-height:1.5}.appointment-state{align-items:stretch}.appointment-card{border-radius:12px;border:1px solid var(--Primary-White-Uell50, #8ED1D8);background:#F1FAFA;padding:1.5rem}.appointment-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.doctor-name{overflow:hidden;color:var(--Neutral-GreyDark, #383E52);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.016px}.appointment-details{display:flex;justify-content:space-between;align-items:flex-end}.date-time{display:flex;flex-direction:column;gap:4px}.date{color:var(--Neutral-GreyDark, #383E52);font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.06px}.time{font-size:14px;color:var(--Neutral-GreyDark, #383E52);font-family:Inter;font-size:10px;font-style:normal;font-weight:400;line-height:14px;letter-spacing:.04px}\n"] }]
+        }], ctorParameters: function () { return [{ type: TasService }]; }, propDecorators: { roomType: [{
+                type: Input
+            }], entityId: [{
+                type: Input
+            }], tenant: [{
+                type: Input
+            }], businessRole: [{
+                type: Input
+            }], currentUser: [{
+                type: Input
+            }], enterCall: [{
+                type: Output
+            }] } });
+
 class TasUellSdkModule {
     /**
      * Use forRoot() to configure the TAS SDK module with required dependencies.
@@ -1609,12 +1962,14 @@ TasUellSdkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         TasVideocallComponent,
         TasFloatingCallComponent,
         TasWaitingRoomComponent,
-        TasAvatarComponent], imports: [CommonModule, FormsModule], exports: [TasButtonComponent,
+        TasAvatarComponent,
+        TasIncomingAppointmentComponent], imports: [CommonModule, FormsModule, NgbTooltipModule], exports: [TasButtonComponent,
         TasVideocallComponent,
         TasFloatingCallComponent,
         TasWaitingRoomComponent,
-        TasAvatarComponent] });
-TasUellSdkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasUellSdkModule, imports: [[CommonModule, FormsModule]] });
+        TasAvatarComponent,
+        TasIncomingAppointmentComponent] });
+TasUellSdkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasUellSdkModule, imports: [[CommonModule, FormsModule, NgbTooltipModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasUellSdkModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1624,14 +1979,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         TasFloatingCallComponent,
                         TasWaitingRoomComponent,
                         TasAvatarComponent,
+                        TasIncomingAppointmentComponent,
                     ],
-                    imports: [CommonModule, FormsModule],
+                    imports: [CommonModule, FormsModule, NgbTooltipModule],
                     exports: [
                         TasButtonComponent,
                         TasVideocallComponent,
                         TasFloatingCallComponent,
                         TasWaitingRoomComponent,
                         TasAvatarComponent,
+                        TasIncomingAppointmentComponent,
                     ],
                 }]
         }] });
@@ -1644,5 +2001,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CallState, RoomUserStatus, TAS_CONFIG, TAS_HTTP_CLIENT, TasAvatarComponent, TasBusinessRole, TasButtonComponent, TasFloatingCallComponent, TasRoomType, TasService, TasSessionType, TasUellSdkModule, TasUserRole, TasVideocallComponent, TasWaitingRoomComponent, UserCallAction, UserStatus, VideoSessionStatus, ViewMode, WaitingRoomState };
+export { AppointmentStatus, CallState, GeolocationService, RoomUserStatus, TAS_CONFIG, TAS_HTTP_CLIENT, TasAvatarComponent, TasBusinessRole, TasButtonComponent, TasFloatingCallComponent, TasIncomingAppointmentComponent, TasRoomType, TasService, TasSessionType, TasUellSdkModule, TasUserRole, TasVideocallComponent, TasWaitingRoomComponent, UserCallAction, UserStatus, VideoSessionStatus, ViewMode, WaitingRoomState };
 //# sourceMappingURL=tas-uell-sdk.mjs.map