tas-uell-sdk 0.1.3 → 0.3.0

package/fesm2020/tas-uell-sdk.mjs

@@ -1,14 +1,16 @@
 import * as i0 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 { InjectionToken, Injectable, Inject, Component, Input, ChangeDetectionStrategy, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { map, catchError, finalize, shareReplay } from 'rxjs/operators';
 import * as OT from '@opentok/client';
-import interact from 'interactjs';
 import * as i1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i4$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import interact from 'interactjs';
+import * as i4$2 from '@angular/platform-browser';
 
 /**
  * Injection token for TAS configuration
@@ -66,7 +68,14 @@ var UserCallAction;
     UserCallAction["CHANGE_STATUS"] = "CHANGE_STATUS";
     UserCallAction["REQUEST_GEOLOCALIZATION"] = "REQUEST_GEOLOCALIZATION";
     UserCallAction["ACTIVATE_GEOLOCATION"] = "ACTIVATE_GEOLOCATION";
+    UserCallAction["DENY_GEOLOCATION"] = "DENY_GEOLOCATION";
 })(UserCallAction || (UserCallAction = {}));
+var GeoStatus;
+(function (GeoStatus) {
+    GeoStatus["PENDING"] = "PENDING";
+    GeoStatus["GRANTED"] = "GRANTED";
+    GeoStatus["DENIED"] = "DENIED";
+})(GeoStatus || (GeoStatus = {}));
 var RoomUserStatus;
 (function (RoomUserStatus) {
     RoomUserStatus["ASSIGNED"] = "ASSIGNED";
@@ -87,6 +96,11 @@ var ViewMode;
     ViewMode["FULLSCREEN"] = "FULLSCREEN";
     ViewMode["PIP"] = "PIP";
 })(ViewMode || (ViewMode = {}));
+var FeedbackMotiveType;
+(function (FeedbackMotiveType) {
+    FeedbackMotiveType["TECHNICAL"] = "TECHNICAL";
+    FeedbackMotiveType["BUSINESS"] = "BUSINESS";
+})(FeedbackMotiveType || (FeedbackMotiveType = {}));
 // Appointment types
 var AppointmentStatus;
 (function (AppointmentStatus) {
@@ -197,6 +211,9 @@ class TasService {
         // Observable for when all geo has been granted
         this.allGeoGrantedSubject = new BehaviorSubject(false);
         this.allGeoGranted$ = this.allGeoGrantedSubject.asObservable();
+        // Observable for individual user geo status (for owner panel)
+        this.userGeoInfoSubject = new BehaviorSubject([]);
+        this.userGeoInfo$ = this.userGeoInfoSubject.asObservable();
         this.statusPollingInterval = null;
         this.DEFAULT_POLL_INTERVAL_MS = 30000; // Default 30s
         this.wasOwnerPresent = false;
@@ -204,6 +221,10 @@ class TasService {
         this.currentAppointmentId = null;
         this.currentVideoCallId = null;
         this.currentTenant = null;
+        // Status cache (1 second TTL)
+        this.STATUS_CACHE_TTL_MS = 1000;
+        this.statusCache = null;
+        this.inflightStatusRequests = new Map();
     }
     // ... (Getters and other methods remain unchanged)
     /**
@@ -222,7 +243,6 @@ class TasService {
         if (params.tenant) {
             this.currentTenant = params.tenant;
         }
-        console.log(`[TAS DEBUG] Starting status polling with interval ${intervalMs}ms`);
         // Initial status fetch
         this.fetchAndProcessStatus(params);
         // Set up periodic polling
@@ -325,7 +345,6 @@ class TasService {
     }
     // Session Management
     disconnectSession(clearStorage = true) {
-        console.log('[TAS DEBUG] TasService.disconnectSession called. clearStorage:', clearStorage);
         // Call finishSession before disconnecting if we have a sessionId
         const sessionIdToFinish = this.currentSessionId;
         // Clear storage FIRST to prevent any race conditions where state might be saved after disconnect
@@ -356,11 +375,9 @@ class TasService {
                 businessRole: this.currentBusinessRole,
             }).subscribe({
                 next: (response) => {
-                    console.log('[TAS DEBUG] Session finished successfully:', response);
                     this.isFinishingSession = false;
                 },
                 error: (error) => {
-                    console.error('[TAS DEBUG] Error finishing session:', error);
                     this.isFinishingSession = false;
                 },
             });
@@ -395,7 +412,6 @@ class TasService {
         // If so, don't restore it on page reload
         const wasDisconnected = sessionStorage.getItem(this.DISCONNECTED_FLAG_KEY);
         if (wasDisconnected === 'true') {
-            console.log('[TAS DEBUG] Session was intentionally disconnected, skipping restore');
             this.clearSessionState();
             sessionStorage.removeItem(this.DISCONNECTED_FLAG_KEY);
             return;
@@ -403,14 +419,12 @@ class TasService {
         // Don't restore if we're already disconnected or if there's no active session
         // This prevents restoring sessions that were properly disconnected
         if (this.callStateSubject.getValue() === CallState.DISCONNECTED) {
-            console.log('[TAS DEBUG] Call state is DISCONNECTED, skipping restore');
             this.clearSessionState();
             return;
         }
         try {
             const state = JSON.parse(savedState);
             if (state.sessionId && state.token) {
-                console.log('[TAS DEBUG] Restoring session from storage');
                 // Force PiP mode for restoration to ensure UI consistency
                 this.viewModeSubject.next(ViewMode.PIP);
                 if (state.businessRole) {
@@ -419,18 +433,15 @@ class TasService {
                 this.connectSession(state.sessionId, state.token, containerId, // Use the same container for both since we are in PiP
                 containerId, this.currentBusinessRole)
                     .then(() => {
-                    console.log('[TAS DEBUG] Session restored successfully');
                     // Clear the disconnected flag if restoration succeeds
                     sessionStorage.removeItem(this.DISCONNECTED_FLAG_KEY);
                 })
                     .catch((err) => {
-                    console.error('[TAS DEBUG] Failed to restore session:', err);
                     this.clearSessionState(); // Clear bad state
                 });
             }
         }
         catch (e) {
-            console.error('[TAS DEBUG] Error parsing saved session state', e);
             this.clearSessionState();
         }
     }
@@ -449,19 +460,77 @@ class TasService {
             throw error;
         }));
     }
+    /**
+     * Generate cache key from request payload
+     */
+    getStatusCacheKey(payload) {
+        return `${payload.roomType}-${payload.entityId}-${payload.tenant}-${payload.sessionId || ''}`;
+    }
     /**
      * PROXY circuit status: /v2/proxy/video/status
+     * Uses a 1-second cache to avoid redundant API calls from multiple components
+     * Implements request deduplication for simultaneous calls
      */
     getProxyVideoStatus(payload) {
-        return this.httpClient
+        const cacheKey = this.getStatusCacheKey(payload);
+        const now = Date.now();
+        // 1. Check if we have a valid cached result (less than 1 second old)
+        if (this.statusCache &&
+            this.statusCache.key === cacheKey &&
+            (now - this.statusCache.timestamp) < this.STATUS_CACHE_TTL_MS) {
+            // Return cached error if present
+            if (this.statusCache.error) {
+                return new Observable(observer => {
+                    observer.error(this.statusCache.error);
+                });
+            }
+            // Return cached response
+            if (this.statusCache.response) {
+                return new Observable(observer => {
+                    observer.next(this.statusCache.response);
+                    observer.complete();
+                });
+            }
+        }
+        // 2. Check if there is already an inflight request for this key
+        if (this.inflightStatusRequests.has(cacheKey)) {
+            return this.inflightStatusRequests.get(cacheKey);
+        }
+        // 3. Make the API call, share it, and cache the Observable
+        const request$ = this.httpClient
             .post('v2/proxy/video/status', {
             body: payload,
             headers: {},
         })
-            .pipe(map((response) => response), catchError((error) => {
+            .pipe(map((response) => {
+            const typedResponse = response;
+            // Cache successful response
+            this.statusCache = {
+                key: cacheKey,
+                response: typedResponse,
+                error: null,
+                timestamp: Date.now(),
+            };
+            return typedResponse;
+        }), catchError((error) => {
             console.error('TAS Service: getProxyVideoStatus failed', error);
+            // Cache error response
+            this.statusCache = {
+                key: cacheKey,
+                response: null,
+                error: error,
+                timestamp: Date.now(),
+            };
             throw error;
-        }));
+        }), 
+        // Clean up inflight map when the observable completes or errors
+        finalize(() => {
+            this.inflightStatusRequests.delete(cacheKey);
+        }), 
+        // Share the result with all subscribers (deduplication)
+        shareReplay(1));
+        this.inflightStatusRequests.set(cacheKey, request$);
+        return request$;
     }
     /**
      * PROXY circuit user modification: /v2/proxy/video/user/modify
@@ -515,6 +584,42 @@ class TasService {
             throw error;
         }));
     }
+    /**
+     * Save video call feedback.
+     * POST /v2/proxy/video/save/feedback
+     * @param payload Feedback data including videoCallId, motiveId, motiveType, observation, rating (1-5), and tenant
+     * @returns Observable that completes on success (HTTP 200 OK, no response body)
+     */
+    saveFeedback(payload) {
+        // Validate rating is between 1 and 5
+        if (payload.rating < 1 || payload.rating > 5) {
+            return new Observable(observer => {
+                observer.error(new Error('Rating must be between 1 and 5'));
+            });
+        }
+        return this.httpClient
+            .post('v2/proxy/video/save/feedback', {
+            body: payload,
+            headers: {},
+        })
+            .pipe(catchError((error) => {
+            console.error('TAS Service: saveFeedback failed', error);
+            throw error;
+        }));
+    }
+    /**
+     * Get available feedback motives.
+     * GET /v2/proxy/video/motives
+     * @returns Observable of feedback motives array
+     */
+    getMotives() {
+        return this.httpClient
+            .get('v2/proxy/video/motives', { headers: {} })
+            .pipe(catchError((error) => {
+            console.error('TAS Service: getMotives failed', error);
+            throw error;
+        }));
+    }
     /**
      * Start automatic status polling for the current session.
      * Status is polled every STATUS_POLL_INTERVAL_MS milliseconds.
@@ -531,7 +636,6 @@ class TasService {
                 this.processStatusResponse(response);
             },
             error: (err) => {
-                console.error('[TAS DEBUG] Status polling error:', err);
             },
         });
     }
@@ -553,17 +657,18 @@ class TasService {
         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);
+        if (content.geoRequestActive !== undefined && content.geoRequestActive !== null) {
             this.geoRequestActiveSubject.next(content.geoRequestActive);
         }
+        else if (content.geoRequestActive === null) {
+            // Reset to false when null
+            this.geoRequestActiveSubject.next(false);
+        }
         // 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
@@ -571,7 +676,6 @@ class TasService {
         this.ownerHasJoinedSubject.next(ownerJoined);
         // Detect if owner left: was present, now not present
         if (this.wasOwnerPresent && !ownerJoined) {
-            console.log('[TAS DEBUG] Owner has left the session');
             this.ownerHasLeftSubject.next(true);
         }
         if (ownerJoined) {
@@ -586,6 +690,16 @@ class TasService {
             status: RoomUserStatus.WAITING,
         }));
         this.waitingRoomUsersSubject.next(waitingUsers);
+        // Extract geo info for USER role participants (for owner panel)
+        const userGeoInfo = content.users
+            .filter((u) => u.rol === 'USER')
+            .map((u) => ({
+            userId: u.userId,
+            geoStatus: u.geoStatus,
+            latitude: u.latitude,
+            longitude: u.longitude,
+        }));
+        this.userGeoInfoSubject.next(userGeoInfo);
     }
     /**
      * Admit a user from the waiting room by changing their status.
@@ -604,6 +718,9 @@ class TasService {
     get videoCallId() {
         return this.currentVideoCallId;
     }
+    get tenant() {
+        return this.currentTenant;
+    }
     /**
      * Connects to a TokBox video session
      */
@@ -656,11 +773,9 @@ class TasService {
                         businessRole: this.currentBusinessRole,
                     }).subscribe({
                         next: (response) => {
-                            console.log('[TAS DEBUG] Session finished on disconnect event:', response);
                             this.isFinishingSession = false;
                         },
                         error: (error) => {
-                            console.error('[TAS DEBUG] Error finishing session on disconnect:', error);
                             this.isFinishingSession = false;
                         },
                     });
@@ -818,6 +933,244 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
+class TasFeedbackModalComponent {
+    constructor(activeModal, tasService) {
+        this.activeModal = activeModal;
+        this.tasService = tasService;
+        this.businessRole = TasBusinessRole.USER;
+        this.motives = [];
+        this.filteredMotives = [];
+        this.selectedMotive = null;
+        this.rating = 0;
+        this.hoverRating = 0;
+        this.observation = '';
+        this.isSubmitting = false;
+        this.showToast = false;
+        this.isDropdownOpen = false;
+        this.subscriptions = new Subscription();
+        this.toastTimeout = null;
+    }
+    ngOnInit() {
+        this.loadMotives();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        if (this.toastTimeout) {
+            clearTimeout(this.toastTimeout);
+        }
+    }
+    /**
+     * Check if current user can see all motives (BUSINESS + TECHNICAL)
+     * Only BACKOFFICE, ADMIN_MANAGER, MANAGER roles see BUSINESS motives
+     */
+    get canSeeBusinessMotives() {
+        return (this.businessRole === TasBusinessRole.BACKOFFICE ||
+            this.businessRole === TasBusinessRole.ADMIN_MANAGER ||
+            this.businessRole === TasBusinessRole.MANAGER);
+    }
+    /**
+     * Observation is required when "Otro problema tecnico" is selected
+     */
+    get isObservationRequired() {
+        return this.selectedMotive?.description === 'Otro problema tecnico';
+    }
+    /**
+     * Can submit if rating > 0 OR motive is selected
+     * If observation is required, it must not be empty
+     */
+    get canSubmit() {
+        const hasRatingOrMotive = this.rating > 0 || this.selectedMotive !== null;
+        if (!hasRatingOrMotive)
+            return false;
+        if (this.isObservationRequired && !this.observation.trim())
+            return false;
+        return true;
+    }
+    /**
+     * Progress percentage for the divider line
+     * 0 = nothing selected, 50 = one selected, 100 = both selected
+     */
+    get feedbackProgress() {
+        const hasRating = this.rating > 0;
+        const hasMotive = this.selectedMotive !== null;
+        if (hasRating && hasMotive)
+            return 100;
+        if (hasRating || hasMotive)
+            return 50;
+        return 0;
+    }
+    /**
+     * Set star rating
+     */
+    setRating(value) {
+        // Toggle off if clicking the same rating
+        if (this.rating === value) {
+            this.rating = 0;
+        }
+        else {
+            this.rating = value;
+        }
+    }
+    /**
+     * Set hover preview rating
+     */
+    setHoverRating(value) {
+        this.hoverRating = value;
+    }
+    /**
+     * Clear hover preview
+     */
+    clearHoverRating() {
+        this.hoverRating = 0;
+    }
+    /**
+     * Get the display rating (hover preview or actual)
+     */
+    getDisplayRating() {
+        return this.hoverRating > 0 ? this.hoverRating : this.rating;
+    }
+    /**
+     * Toggle dropdown open/close
+     */
+    toggleDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen;
+    }
+    /**
+     * Close dropdown
+     */
+    closeDropdown() {
+        this.isDropdownOpen = false;
+    }
+    /**
+     * Select a motive from dropdown
+     */
+    selectMotive(motive) {
+        this.selectedMotive = motive;
+        this.closeDropdown();
+    }
+    /**
+     * Clear selected motive
+     */
+    clearMotive() {
+        this.selectedMotive = null;
+    }
+    /**
+     * Submit feedback
+     */
+    submit() {
+        if (!this.canSubmit || this.isSubmitting)
+            return;
+        this.isSubmitting = true;
+        const payload = {
+            videoCallId: this.videoCallId,
+            motiveId: this.selectedMotive?.id ?? 0,
+            observation: this.observation.trim(),
+            rating: this.rating || 1,
+            tenant: this.tenant,
+        };
+        if (this.selectedMotive) {
+            payload.motiveType = this.selectedMotive.motiveType;
+        }
+        this.subscriptions.add(this.tasService.saveFeedback(payload).subscribe({
+            next: () => {
+                this.isSubmitting = false;
+                this.showToastNotification();
+            },
+            error: (err) => {
+                console.error('Error saving feedback:', err);
+                this.isSubmitting = false;
+                // Still close modal on error, just don't show toast
+                this.activeModal.close('submitted');
+            },
+        }));
+    }
+    /**
+     * Close modal without saving
+     */
+    dismiss() {
+        this.activeModal.dismiss('dismissed');
+    }
+    /**
+     * Load motives from API
+     */
+    loadMotives() {
+        this.subscriptions.add(this.tasService.getMotives().subscribe({
+            next: (motives) => {
+                this.motives = motives;
+                this.filterMotives();
+            },
+            error: (err) => {
+                console.error('Error loading motives:', err);
+                // Fallback mock motives for development/testing
+                this.motives = [
+                    { id: 1, description: 'Problemas de audio', motiveType: FeedbackMotiveType.TECHNICAL },
+                    { id: 2, description: 'Problemas de video', motiveType: FeedbackMotiveType.TECHNICAL },
+                    { id: 3, description: 'Conexión inestable', motiveType: FeedbackMotiveType.TECHNICAL },
+                    { id: 4, description: 'Otro problema tecnico', motiveType: FeedbackMotiveType.TECHNICAL },
+                    { id: 5, description: 'Problema de negocio', motiveType: FeedbackMotiveType.BUSINESS },
+                ];
+                this.filterMotives();
+            },
+        }));
+    }
+    /**
+     * Filter motives based on user role
+     * USERs see only TECHNICAL motives
+     * Owners (BACKOFFICE, ADMIN_MANAGER, MANAGER) see all motives
+     */
+    filterMotives() {
+        if (this.canSeeBusinessMotives) {
+            this.filteredMotives = this.motives;
+        }
+        else {
+            this.filteredMotives = this.motives.filter((m) => !m.motiveType || m.motiveType === FeedbackMotiveType.TECHNICAL);
+        }
+        // If still empty after filtering, and we have motives, just show all as fallback
+        if (this.filteredMotives.length === 0 && this.motives.length > 0) {
+            this.filteredMotives = this.motives;
+        }
+    }
+    /**
+     * Show toast notification and auto-dismiss after 3s
+     */
+    showToastNotification() {
+        this.showToast = true;
+        this.toastTimeout = setTimeout(() => {
+            this.showToast = false;
+            this.activeModal.close('submitted');
+        }, 3000);
+    }
+}
+TasFeedbackModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasFeedbackModalComponent, deps: [{ token: i1.NgbActiveModal }, { token: TasService }], target: i0.ɵɵFactoryTarget.Component });
+TasFeedbackModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasFeedbackModalComponent, selector: "tas-feedback-modal", inputs: { videoCallId: "videoCallId", tenant: "tenant", businessRole: "businessRole" }, ngImport: i0, template: "<div class=\"tas-feedback-modal\">\n  <!-- Header with subtitle -->\n  <div class=\"feedback-header\">\n    <div class=\"header-text\">\n      <span class=\"subtitle\">Cierre de la consulta</span>\n      <h2>Calidad de la videollamada</h2>\n    </div>\n    <button\n      type=\"button\"\n      class=\"close-btn\"\n      (click)=\"dismiss()\"\n      aria-label=\"Cerrar\"\n    >\n      <i class=\"fa fa-times\"></i>\n    </button>\n  </div>\n\n  <!-- Progress Divider -->\n  <div class=\"progress-divider\">\n    <div class=\"progress-fill\" [style.width.%]=\"feedbackProgress\"></div>\n  </div>\n  <div class=\"accent-line\"></div>\n\n  <div class=\"feedback-content\">\n    <!-- Star Rating with question -->\n    <div class=\"rating-section\">\n      <p class=\"rating-question\">\u00BFC\u00F3mo fue la calidad de la llamada?</p>\n      <div\n        class=\"stars-container\"\n        (mouseleave)=\"clearHoverRating()\"\n      >\n        <button\n          *ngFor=\"let star of [1, 2, 3, 4, 5]\"\n          type=\"button\"\n          class=\"star-btn\"\n          [class.filled]=\"star <= getDisplayRating()\"\n          (click)=\"setRating(star)\"\n          (mouseenter)=\"setHoverRating(star)\"\n          [attr.aria-label]=\"'Calificar ' + star + ' estrellas'\"\n        >\n          <i class=\"fa\" [class.fa-star]=\"star <= getDisplayRating()\" [class.fa-star-o]=\"star > getDisplayRating()\"></i>\n        </button>\n      </div>\n    </div>\n\n    <!-- Motive Dropdown -->\n    <div class=\"motive-section\">\n      <label class=\"motive-label\">Motivo (opcional)</label>\n      <div class=\"custom-dropdown\" [class.open]=\"isDropdownOpen\">\n        <button\n          type=\"button\"\n          class=\"dropdown-trigger\"\n          (click)=\"toggleDropdown()\"\n          [attr.aria-expanded]=\"isDropdownOpen\"\n          aria-haspopup=\"listbox\"\n        >\n          <span class=\"dropdown-text\">\n            {{ selectedMotive?.description || 'Seleccionar motivo' }}\n          </span>\n          <i class=\"fa fa-chevron-down dropdown-arrow\"></i>\n        </button>\n        <div\n          class=\"dropdown-menu\"\n          *ngIf=\"isDropdownOpen\"\n          role=\"listbox\"\n        >\n          <button\n            *ngFor=\"let motive of filteredMotives\"\n            type=\"button\"\n            class=\"dropdown-item\"\n            [class.selected]=\"selectedMotive?.id === motive.id\"\n            (click)=\"selectMotive(motive)\"\n            role=\"option\"\n            [attr.aria-selected]=\"selectedMotive?.id === motive.id\"\n          >\n            {{ motive.description }}\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Observation Textarea -->\n    <div class=\"observation-section\">\n      <label class=\"observation-label\" [class.required]=\"isObservationRequired\">\n        {{ isObservationRequired ? 'Observacion (requerida)' : 'Observacion (opcional)' }}\n      </label>\n      <textarea\n        class=\"observation-textarea\"\n        [(ngModel)]=\"observation\"\n        [placeholder]=\"isObservationRequired ? 'Por favor, describe el problema...' : 'Escribe tu comentario...'\"\n        rows=\"3\"\n        [attr.aria-required]=\"isObservationRequired\"\n      ></textarea>\n    </div>\n  </div>\n\n  <div class=\"feedback-footer\">\n    <button\n      type=\"button\"\n      class=\"submit-btn\"\n      [disabled]=\"!canSubmit || isSubmitting\"\n      (click)=\"submit()\"\n    >\n      <span *ngIf=\"!isSubmitting\">Enviar</span>\n      <span *ngIf=\"isSubmitting\">\n        <i class=\"fa fa-spinner fa-spin\"></i>\n        Enviando...\n      </span>\n    </button>\n  </div>\n\n  <!-- Toast Notification -->\n  <div class=\"toast-notification\" *ngIf=\"showToast\" role=\"alert\" aria-live=\"polite\">\n    <i class=\"fa fa-check-circle\"></i>\n    <span>Gracias por tu feedback</span>\n  </div>\n</div>\n\n<!-- Backdrop to close dropdown when clicking outside -->\n<div\n  class=\"dropdown-backdrop\"\n  *ngIf=\"isDropdownOpen\"\n  (click)=\"closeDropdown()\"\n></div>\n", styles: [":host{display:block;width:100%}::ng-deep .tas-feedback-modal-wrapper .modal-content{overflow:visible!important;border:none;background:transparent}::ng-deep .tas-feedback-modal-wrapper .modal-dialog{max-width:450px}.tas-feedback-modal{width:100%;background:#fff;border-radius:16px;overflow:visible;position:relative;padding:.5rem;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.feedback-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.25rem 1.5rem 1rem;background:#fff;border-radius:16px 16px 0 0}.feedback-header .header-text{display:flex;flex-direction:column;gap:.25rem}.feedback-header .header-text .subtitle{font-size:.8125rem;color:#6b7280;font-weight:400}.feedback-header .header-text h2{margin:0;font-size:1.25rem;font-weight:600;color:#1f2937;letter-spacing:-.01em}.feedback-header .close-btn{background:transparent;border:none;padding:8px;cursor:pointer;color:#9ca3af;font-size:1.25rem;line-height:1;transition:all .2s ease;margin-top:-4px}.feedback-header .close-btn:hover{color:#4b5563}.feedback-header .close-btn:focus{outline:none;color:#4b5563}.progress-divider{height:4px;background:#e5e7eb;margin:0;position:relative;overflow:hidden}.progress-divider .progress-fill{height:100%;background:linear-gradient(90deg,var(--Primary-Uell, #1da4b1) 0%,#4fd1c5 100%);transition:width .4s cubic-bezier(.4,0,.2,1);border-radius:0 2px 2px 0}.feedback-content{padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.rating-section{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}.rating-section .rating-question{margin:0;font-size:.9375rem;color:#4b5563;font-weight:400;align-self:center}.rating-section .stars-container{display:flex;gap:8px;width:100%;justify-content:center}.rating-section .star-btn{background:transparent;border:none;padding:4px;cursor:pointer;font-size:2rem;color:#d1d5db;transition:all .15s ease;line-height:1}.rating-section .star-btn:hover{transform:scale(1.15)}.rating-section .star-btn.filled{color:#f5a623}.rating-section .star-btn.filled i.fa-star{text-shadow:0 2px 4px rgba(245,166,35,.3)}.rating-section .star-btn i.fa-star-o{color:#d1d5db}.rating-section .star-btn:focus{outline:none}.motive-section{display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:visible}.motive-section .motive-label{font-size:.875rem;font-weight:500;color:#4b5563}.motive-section .custom-dropdown{position:relative;overflow:visible}.motive-section .custom-dropdown .dropdown-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#fff;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;font-size:.9375rem;color:#4b5563;transition:all .2s ease;min-height:52px}.motive-section .custom-dropdown .dropdown-trigger:hover{border-color:#9ca3af}.motive-section .custom-dropdown .dropdown-trigger:focus{outline:none;border-color:var(--Primary-Uell, #1da4b1)}.motive-section .custom-dropdown .dropdown-trigger .dropdown-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.motive-section .custom-dropdown .dropdown-trigger .dropdown-arrow{font-size:.875rem;color:#6b7280;transition:transform .2s ease;margin-left:.5rem}.motive-section .custom-dropdown.open .dropdown-trigger{border-color:var(--Primary-Uell, #1da4b1)}.motive-section .custom-dropdown.open .dropdown-trigger .dropdown-arrow{transform:rotate(180deg)}.motive-section .custom-dropdown .dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;display:block;min-height:40px;min-width:100%;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 16px #0000001f;max-height:250px;overflow:hidden;overflow-y:auto;z-index:1050;visibility:visible;opacity:1;padding:0}.motive-section .custom-dropdown .dropdown-menu .dropdown-item{width:100%;padding:1rem 1.25rem;background:transparent;border:none;border-bottom:1px dashed #e5e7eb;text-align:left;font-size:.9375rem;color:#4b5563;cursor:pointer;transition:all .15s ease;position:relative}.motive-section .custom-dropdown .dropdown-menu .dropdown-item:last-child{border-bottom:none}.motive-section .custom-dropdown .dropdown-menu .dropdown-item:hover{background:rgba(29,164,177,.05);color:#374151}.motive-section .custom-dropdown .dropdown-menu .dropdown-item.selected{background:rgba(29,164,177,.08);color:var(--Primary-Uell, #1da4b1);border-left:3px solid var(--Primary-Uell, #1da4b1);padding-left:calc(1.25rem - 3px)}.motive-section .custom-dropdown .dropdown-menu .dropdown-item:focus{outline:none;background:rgba(29,164,177,.05)}.motive-section .custom-dropdown .dropdown-menu .dropdown-item:first-child{border-radius:8px 8px 0 0}.motive-section .custom-dropdown .dropdown-menu .dropdown-item:last-child{border-radius:0 0 8px 8px}.motive-section .custom-dropdown .dropdown-menu .dropdown-item:only-child{border-radius:8px}.motive-section .clear-motive-btn{position:absolute;right:40px;top:32px;background:#f3f4f6;border:none;padding:4px 6px;border-radius:4px;cursor:pointer;color:#6b7280;font-size:.625rem;transition:all .2s ease}.motive-section .clear-motive-btn:hover{background:#e5e7eb;color:#374151}.motive-section .clear-motive-btn:focus{outline:none}.observation-section{display:flex;flex-direction:column;gap:.5rem}.observation-section .observation-label{font-size:.875rem;font-weight:500;color:#4b5563}.observation-section .observation-label.required{color:#dc2626}.observation-section .observation-label.required:after{content:\" *\";font-weight:600}.observation-section .observation-textarea{width:100%;padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:12px;font-size:.875rem;font-family:inherit;resize:vertical;min-height:80px;transition:all .2s ease;background:#fff}.observation-section .observation-textarea::placeholder{color:#9ca3af}.observation-section .observation-textarea:hover{border-color:#9ca3af}.observation-section .observation-textarea:focus{outline:none;border-color:var(--Primary-Uell, #1da4b1);box-shadow:0 0 0 3px #1da4b126}.feedback-footer{padding:1rem 1.5rem 1.5rem;display:flex;justify-content:flex-end}.feedback-footer .submit-btn{padding:.75rem 2rem;background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:24px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:120px}.feedback-footer .submit-btn:hover:not(:disabled){background:#178e99}.feedback-footer .submit-btn:disabled{background:rgba(29,164,177,.5);cursor:not-allowed}.feedback-footer .submit-btn:focus{outline:none;box-shadow:0 0 0 3px #1da4b126}.feedback-footer .submit-btn i.fa-spinner{margin-right:6px}.toast-notification{position:fixed;bottom:24px;left:24px;display:flex;align-items:center;gap:10px;padding:14px 20px;background:#383e52;color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000040;font-size:.875rem;font-weight:500;z-index:1060;animation:slideIn .3s ease}.toast-notification i.fa-check-circle{color:#4ade80;font-size:1.125rem}@keyframes slideIn{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.dropdown-backdrop{position:fixed;inset:0;z-index:99}\n"], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasFeedbackModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tas-feedback-modal', template: "<div class=\"tas-feedback-modal\">\n  <!-- Header with subtitle -->\n  <div class=\"feedback-header\">\n    <div class=\"header-text\">\n      <span class=\"subtitle\">Cierre de la consulta</span>\n      <h2>Calidad de la videollamada</h2>\n    </div>\n    <button\n      type=\"button\"\n      class=\"close-btn\"\n      (click)=\"dismiss()\"\n      aria-label=\"Cerrar\"\n    >\n      <i class=\"fa fa-times\"></i>\n    </button>\n  </div>\n\n  <!-- Progress Divider -->\n  <div class=\"progress-divider\">\n    <div class=\"progress-fill\" [style.width.%]=\"feedbackProgress\"></div>\n  </div>\n  <div class=\"accent-line\"></div>\n\n  <div class=\"feedback-content\">\n    <!-- Star Rating with question -->\n    <div class=\"rating-section\">\n      <p class=\"rating-question\">\u00BFC\u00F3mo fue la calidad de la llamada?</p>\n      <div\n        class=\"stars-container\"\n        (mouseleave)=\"clearHoverRating()\"\n      >\n        <button\n          *ngFor=\"let star of [1, 2, 3, 4, 5]\"\n          type=\"button\"\n          class=\"star-btn\"\n          [class.filled]=\"star <= getDisplayRating()\"\n          (click)=\"setRating(star)\"\n          (mouseenter)=\"setHoverRating(star)\"\n          [attr.aria-label]=\"'Calificar ' + star + ' estrellas'\"\n        >\n          <i class=\"fa\" [class.fa-star]=\"star <= getDisplayRating()\" [class.fa-star-o]=\"star > getDisplayRating()\"></i>\n        </button>\n      </div>\n    </div>\n\n    <!-- Motive Dropdown -->\n    <div class=\"motive-section\">\n      <label class=\"motive-label\">Motivo (opcional)</label>\n      <div class=\"custom-dropdown\" [class.open]=\"isDropdownOpen\">\n        <button\n          type=\"button\"\n          class=\"dropdown-trigger\"\n          (click)=\"toggleDropdown()\"\n          [attr.aria-expanded]=\"isDropdownOpen\"\n          aria-haspopup=\"listbox\"\n        >\n          <span class=\"dropdown-text\">\n            {{ selectedMotive?.description || 'Seleccionar motivo' }}\n          </span>\n          <i class=\"fa fa-chevron-down dropdown-arrow\"></i>\n        </button>\n        <div\n          class=\"dropdown-menu\"\n          *ngIf=\"isDropdownOpen\"\n          role=\"listbox\"\n        >\n          <button\n            *ngFor=\"let motive of filteredMotives\"\n            type=\"button\"\n            class=\"dropdown-item\"\n            [class.selected]=\"selectedMotive?.id === motive.id\"\n            (click)=\"selectMotive(motive)\"\n            role=\"option\"\n            [attr.aria-selected]=\"selectedMotive?.id === motive.id\"\n          >\n            {{ motive.description }}\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Observation Textarea -->\n    <div class=\"observation-section\">\n      <label class=\"observation-label\" [class.required]=\"isObservationRequired\">\n        {{ isObservationRequired ? 'Observacion (requerida)' : 'Observacion (opcional)' }}\n      </label>\n      <textarea\n        class=\"observation-textarea\"\n        [(ngModel)]=\"observation\"\n        [placeholder]=\"isObservationRequired ? 'Por favor, describe el problema...' : 'Escribe tu comentario...'\"\n        rows=\"3\"\n        [attr.aria-required]=\"isObservationRequired\"\n      ></textarea>\n    </div>\n  </div>\n\n  <div class=\"feedback-footer\">\n    <button\n      type=\"button\"\n      class=\"submit-btn\"\n      [disabled]=\"!canSubmit || isSubmitting\"\n      (click)=\"submit()\"\n    >\n      <span *ngIf=\"!isSubmitting\">Enviar</span>\n      <span *ngIf=\"isSubmitting\">\n        <i class=\"fa fa-spinner fa-spin\"></i>\n        Enviando...\n      </span>\n    </button>\n  </div>\n\n  <!-- Toast Notification -->\n  <div class=\"toast-notification\" *ngIf=\"showToast\" role=\"alert\" aria-live=\"polite\">\n    <i class=\"fa fa-check-circle\"></i>\n    <span>Gracias por tu feedback</span>\n  </div>\n</div>\n\n<!-- Backdrop to close dropdown when clicking outside -->\n<div\n  class=\"dropdown-backdrop\"\n  *ngIf=\"isDropdownOpen\"\n  (click)=\"closeDropdown()\"\n></div>\n", styles: [":host{display:block;width:100%}::ng-deep .tas-feedback-modal-wrapper .modal-content{overflow:visible!important;border:none;background:transparent}::ng-deep .tas-feedback-modal-wrapper .modal-dialog{max-width:450px}.tas-feedback-modal{width:100%;background:#fff;border-radius:16px;overflow:visible;position:relative;padding:.5rem;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.feedback-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.25rem 1.5rem 1rem;background:#fff;border-radius:16px 16px 0 0}.feedback-header .header-text{display:flex;flex-direction:column;gap:.25rem}.feedback-header .header-text .subtitle{font-size:.8125rem;color:#6b7280;font-weight:400}.feedback-header .header-text h2{margin:0;font-size:1.25rem;font-weight:600;color:#1f2937;letter-spacing:-.01em}.feedback-header .close-btn{background:transparent;border:none;padding:8px;cursor:pointer;color:#9ca3af;font-size:1.25rem;line-height:1;transition:all .2s ease;margin-top:-4px}.feedback-header .close-btn:hover{color:#4b5563}.feedback-header .close-btn:focus{outline:none;color:#4b5563}.progress-divider{height:4px;background:#e5e7eb;margin:0;position:relative;overflow:hidden}.progress-divider .progress-fill{height:100%;background:linear-gradient(90deg,var(--Primary-Uell, #1da4b1) 0%,#4fd1c5 100%);transition:width .4s cubic-bezier(.4,0,.2,1);border-radius:0 2px 2px 0}.feedback-content{padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.rating-section{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}.rating-section .rating-question{margin:0;font-size:.9375rem;color:#4b5563;font-weight:400;align-self:center}.rating-section .stars-container{display:flex;gap:8px;width:100%;justify-content:center}.rating-section .star-btn{background:transparent;border:none;padding:4px;cursor:pointer;font-size:2rem;color:#d1d5db;transition:all .15s ease;line-height:1}.rating-section .star-btn:hover{transform:scale(1.15)}.rating-section .star-btn.filled{color:#f5a623}.rating-section .star-btn.filled i.fa-star{text-shadow:0 2px 4px rgba(245,166,35,.3)}.rating-section .star-btn i.fa-star-o{color:#d1d5db}.rating-section .star-btn:focus{outline:none}.motive-section{display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:visible}.motive-section .motive-label{font-size:.875rem;font-weight:500;color:#4b5563}.motive-section .custom-dropdown{position:relative;overflow:visible}.motive-section .custom-dropdown .dropdown-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#fff;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;font-size:.9375rem;color:#4b5563;transition:all .2s ease;min-height:52px}.motive-section .custom-dropdown .dropdown-trigger:hover{border-color:#9ca3af}.motive-section .custom-dropdown .dropdown-trigger:focus{outline:none;border-color:var(--Primary-Uell, #1da4b1)}.motive-section .custom-dropdown .dropdown-trigger .dropdown-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.motive-section .custom-dropdown .dropdown-trigger .dropdown-arrow{font-size:.875rem;color:#6b7280;transition:transform .2s ease;margin-left:.5rem}.motive-section .custom-dropdown.open .dropdown-trigger{border-color:var(--Primary-Uell, #1da4b1)}.motive-section .custom-dropdown.open .dropdown-trigger .dropdown-arrow{transform:rotate(180deg)}.motive-section .custom-dropdown .dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;display:block;min-height:40px;min-width:100%;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 16px #0000001f;max-height:250px;overflow:hidden;overflow-y:auto;z-index:1050;visibility:visible;opacity:1;padding:0}.motive-section .custom-dropdown .dropdown-menu .dropdown-item{width:100%;padding:1rem 1.25rem;background:transparent;border:none;border-bottom:1px dashed #e5e7eb;text-align:left;font-size:.9375rem;color:#4b5563;cursor:pointer;transition:all .15s ease;position:relative}.motive-section .custom-dropdown .dropdown-menu .dropdown-item:last-child{border-bottom:none}.motive-section .custom-dropdown .dropdown-menu .dropdown-item:hover{background:rgba(29,164,177,.05);color:#374151}.motive-section .custom-dropdown .dropdown-menu .dropdown-item.selected{background:rgba(29,164,177,.08);color:var(--Primary-Uell, #1da4b1);border-left:3px solid var(--Primary-Uell, #1da4b1);padding-left:calc(1.25rem - 3px)}.motive-section .custom-dropdown .dropdown-menu .dropdown-item:focus{outline:none;background:rgba(29,164,177,.05)}.motive-section .custom-dropdown .dropdown-menu .dropdown-item:first-child{border-radius:8px 8px 0 0}.motive-section .custom-dropdown .dropdown-menu .dropdown-item:last-child{border-radius:0 0 8px 8px}.motive-section .custom-dropdown .dropdown-menu .dropdown-item:only-child{border-radius:8px}.motive-section .clear-motive-btn{position:absolute;right:40px;top:32px;background:#f3f4f6;border:none;padding:4px 6px;border-radius:4px;cursor:pointer;color:#6b7280;font-size:.625rem;transition:all .2s ease}.motive-section .clear-motive-btn:hover{background:#e5e7eb;color:#374151}.motive-section .clear-motive-btn:focus{outline:none}.observation-section{display:flex;flex-direction:column;gap:.5rem}.observation-section .observation-label{font-size:.875rem;font-weight:500;color:#4b5563}.observation-section .observation-label.required{color:#dc2626}.observation-section .observation-label.required:after{content:\" *\";font-weight:600}.observation-section .observation-textarea{width:100%;padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:12px;font-size:.875rem;font-family:inherit;resize:vertical;min-height:80px;transition:all .2s ease;background:#fff}.observation-section .observation-textarea::placeholder{color:#9ca3af}.observation-section .observation-textarea:hover{border-color:#9ca3af}.observation-section .observation-textarea:focus{outline:none;border-color:var(--Primary-Uell, #1da4b1);box-shadow:0 0 0 3px #1da4b126}.feedback-footer{padding:1rem 1.5rem 1.5rem;display:flex;justify-content:flex-end}.feedback-footer .submit-btn{padding:.75rem 2rem;background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:24px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:120px}.feedback-footer .submit-btn:hover:not(:disabled){background:#178e99}.feedback-footer .submit-btn:disabled{background:rgba(29,164,177,.5);cursor:not-allowed}.feedback-footer .submit-btn:focus{outline:none;box-shadow:0 0 0 3px #1da4b126}.feedback-footer .submit-btn i.fa-spinner{margin-right:6px}.toast-notification{position:fixed;bottom:24px;left:24px;display:flex;align-items:center;gap:10px;padding:14px 20px;background:#383e52;color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000040;font-size:.875rem;font-weight:500;z-index:1060;animation:slideIn .3s ease}.toast-notification i.fa-check-circle{color:#4ade80;font-size:1.125rem}@keyframes slideIn{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.dropdown-backdrop{position:fixed;inset:0;z-index:99}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }]; }, propDecorators: { videoCallId: [{
+                type: Input
+            }], tenant: [{
+                type: Input
+            }], businessRole: [{
+                type: Input
+            }] } });
+
+/**
+ * SVG icons used internally by TAS SDK components.
+ * Icons are stored as strings to avoid asset bundling complexity.
+ */
+const TAS_ICONS = {
+    home: `<svg width="120" height="100" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="10" width="100" height="100" rx="50" fill="#44D8E8" fill-opacity="0.2"/>
+<path d="M45 70C43.625 70 42.4479 69.5104 41.4688 68.5313C40.4896 67.5521 40 66.375 40 65V46.5625L37.5 48.5C36.9583 48.9167 36.3438 49.0833 35.6562 49C34.9688 48.9167 34.4167 48.5833 34 48C33.5833 47.4583 33.4271 46.8542 33.5312 46.1875C33.6354 45.5208 33.9583 44.9792 34.5 44.5625L56.9375 27.3125C57.3958 26.9792 57.8854 26.7292 58.4062 26.5625C58.9271 26.3958 59.4583 26.3125 60 26.3125C60.5417 26.3125 61.0729 26.3958 61.5938 26.5625C62.1146 26.7292 62.6042 26.9792 63.0625 27.3125L85.5 44.5C86.0417 44.9167 86.3646 45.4583 86.4688 46.125C86.5729 46.7917 86.4167 47.4167 86 48C85.5833 48.5833 85.0417 48.9063 84.375 48.9688C83.7083 49.0313 83.0833 48.8542 82.5 48.4375L60 31.25L45 42.75V65H50.0625C50.7708 65 51.3542 65.2396 51.8125 65.7188C52.2708 66.1979 52.5 66.7917 52.5 67.5C52.5 68.2083 52.2604 68.8021 51.7812 69.2813C51.3021 69.7604 50.7083 70 50 70H45ZM67.3125 73.9375C66.9792 73.9375 66.6667 73.875 66.375 73.75C66.0833 73.625 65.8125 73.4375 65.5625 73.1875L58.5 66.125C58 65.625 57.75 65.0417 57.75 64.375C57.75 63.7083 58 63.125 58.5 62.625C59 62.125 59.5833 61.875 60.25 61.875C60.9167 61.875 61.5 62.125 62 62.625L67.3125 67.875L79.6875 55.5C80.1875 55 80.7812 54.7604 81.4688 54.7813C82.1562 54.8021 82.75 55.0625 83.25 55.5625C83.75 56.0625 84 56.6458 84 57.3125C84 57.9792 83.75 58.5625 83.25 59.0625L69.0625 73.1875C68.8125 73.4375 68.5417 73.625 68.25 73.75C67.9583 73.875 67.6458 73.9375 67.3125 73.9375Z" fill="white"/>
+<path d="M110 5L106.575 3.425L105 0L103.425 3.425L100 5L103.425 6.575L105 10L106.575 6.575L110 5Z" fill="#44D8E8"/>
+<path d="M10 51L6.575 49.425L5 46L3.425 49.425L0 51L3.425 52.575L5 56L6.575 52.575L10 51Z" fill="#44D8E8"/>
+<path d="M95 43.5L93.2875 42.7125L92.5 41L91.7125 42.7125L90 43.5L91.7125 44.2875L92.5 46L93.2875 44.2875L95 43.5Z" fill="#44D8E8"/>
+<path d="M42 4.5L40.2875 3.7125L39.5 2L38.7125 3.7125L37 4.5L38.7125 5.2875L39.5 7L40.2875 5.2875L42 4.5Z" fill="#44D8E8"/>
+<path d="M88 83.5L86.2875 82.7125L85.5 81L84.7125 82.7125L83 83.5L84.7125 84.2875L85.5 86L86.2875 84.2875L88 83.5Z" fill="#44D8E8"/>
+<path d="M120 97.5L118.287 96.7125L117.5 95L116.713 96.7125L115 97.5L116.713 98.2875L117.5 100L118.287 98.2875L120 97.5Z" fill="#44D8E8"/>
+</svg>`,
+};
+
 class TasAvatarComponent {
     constructor() {
         this.name = '';
@@ -891,11 +1244,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+/** User geolocation panel view states */
+var UserGeoViewState;
+(function (UserGeoViewState) {
+    UserGeoViewState["HIDDEN"] = "HIDDEN";
+    UserGeoViewState["INITIAL"] = "INITIAL";
+    UserGeoViewState["VERIFYING"] = "VERIFYING";
+    UserGeoViewState["VERIFIED"] = "VERIFIED";
+    UserGeoViewState["DENIED"] = "DENIED";
+})(UserGeoViewState || (UserGeoViewState = {}));
 class TasVideocallComponent {
-    constructor(activeModal, tasService, geolocationService) {
+    constructor(activeModal, tasService, geolocationService, sanitizer, modalService) {
         this.activeModal = activeModal;
         this.tasService = tasService;
         this.geolocationService = geolocationService;
+        this.sanitizer = sanitizer;
+        this.modalService = modalService;
         this.participantName = '';
         this.tenant = '';
         this.businessRole = TasBusinessRole.USER;
@@ -913,11 +1277,23 @@ class TasVideocallComponent {
         // Geo panel states for owner
         this.geoRequestActive = false; // Owner sent request, waiting for user
         this.allGeoGranted = false; // All users responded with geo
+        this.userGeoInfo = []; // Individual user geo status
+        // User geo panel state (for owners)
+        this.userGeoViewState = UserGeoViewState.HIDDEN;
+        this.UserGeoViewState = UserGeoViewState; // Expose enum to template
+        this.devModeEnabled = false; // Enable dev controls for testing
+        this.geoPanelDismissed = false; // Track if owner manually closed the panel
+        this.feedbackShown = false; // Track if feedback modal has been shown
         this.subscriptions = new Subscription();
+        this.homeIcon = this.sanitizer.bypassSecurityTrustHtml(TAS_ICONS.home);
     }
     ngOnInit() {
         this.setupSubscriptions();
         this.initializeCall();
+        // For owners: show the geo panel to request user location (unless dismissed)
+        if (this.canAdmitUsers && !this.geoPanelDismissed) {
+            this.userGeoViewState = UserGeoViewState.INITIAL;
+        }
     }
     ngAfterViewInit() {
         this.initInteract();
@@ -935,6 +1311,37 @@ class TasVideocallComponent {
     hangUp() {
         this.tasService.disconnectSession();
     }
+    /**
+     * Open feedback modal when call ends
+     */
+    openFeedbackModal() {
+        // Prevent opening feedback modal multiple times
+        if (this.feedbackShown) {
+            this.activeModal.close('hangup');
+            return;
+        }
+        // Get videoCallId from input or service
+        const videoCallId = this.videoCallId ?? this.tasService.videoCallId;
+        // If no videoCallId, skip feedback and close directly
+        if (!videoCallId) {
+            this.activeModal.close('hangup');
+            return;
+        }
+        this.feedbackShown = true;
+        const modalRef = this.modalService.open(TasFeedbackModalComponent, {
+            centered: true,
+            backdrop: true,
+            keyboard: true,
+            windowClass: 'tas-feedback-modal-wrapper',
+        });
+        modalRef.componentInstance.videoCallId = videoCallId;
+        modalRef.componentInstance.tenant = this.tenant;
+        modalRef.componentInstance.businessRole = this.businessRole;
+        // Close videocall modal after feedback modal is closed/dismissed
+        modalRef.result.finally(() => {
+            this.activeModal.close('hangup');
+        });
+    }
     toggleMute() {
         this.tasService.toggleMute();
     }
@@ -959,6 +1366,43 @@ class TasVideocallComponent {
             this.businessRole === TasBusinessRole.ADMIN_MANAGER ||
             this.businessRole === TasBusinessRole.MANAGER);
     }
+    /** Users with pending geo status */
+    get pendingUsers() {
+        return this.userGeoInfo.filter(u => u.geoStatus === GeoStatus.PENDING);
+    }
+    /** Users who granted geo */
+    get grantedUsers() {
+        return this.userGeoInfo.filter(u => u.geoStatus === GeoStatus.GRANTED);
+    }
+    /** Users who denied geo */
+    get deniedUsers() {
+        return this.userGeoInfo.filter(u => u.geoStatus === GeoStatus.DENIED);
+    }
+    /** Show location panel only if owner and there are users who haven't granted */
+    get shouldShowLocationPanel() {
+        if (!this.canAdmitUsers || this.userGeoInfo.length === 0) {
+            return false;
+        }
+        // Hide if all users have granted
+        const allGranted = this.userGeoInfo.every(u => u.geoStatus === GeoStatus.GRANTED);
+        return !allGranted;
+    }
+    /** Check if any user has denied geo */
+    get hasAnyDenied() {
+        return this.deniedUsers.length > 0;
+    }
+    /** Show user geo panel for owners when not hidden */
+    get shouldShowUserGeoPanel() {
+        return this.canAdmitUsers && this.userGeoViewState !== UserGeoViewState.HIDDEN;
+    }
+    /** Set user geo view state (for dev controls or close button) */
+    setUserGeoViewState(state) {
+        this.userGeoViewState = state;
+        // Track if owner manually dismissed the panel
+        if (state === UserGeoViewState.HIDDEN) {
+            this.geoPanelDismissed = true;
+        }
+    }
     /**
      * Admit a user from the waiting room
      */
@@ -997,7 +1441,7 @@ class TasVideocallComponent {
         this.showLocationPanel = false;
     }
     /**
-     * Request the user to share their location
+     * Request the user to share their location (called by owner)
      */
     requestUserLocation() {
         if (!this.videoCallId) {
@@ -1008,9 +1452,12 @@ class TasVideocallComponent {
             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'),
+            next: () => {
+                console.log('Location request sent');
+                // Set panel to verifying state while waiting for user response
+                this.userGeoViewState = UserGeoViewState.VERIFYING;
+            },
             error: (err) => console.error('Error requesting location:', err),
         });
     }
@@ -1020,7 +1467,7 @@ class TasVideocallComponent {
         this.subscriptions.add(this.tasService.callState$.subscribe((state) => {
             this.callState = state;
             if (state === CallState.DISCONNECTED) {
-                this.activeModal.close('hangup');
+                this.openFeedbackModal();
             }
             // Track if we have an active video stream
             this.hasVideoStream = state === CallState.CONNECTED;
@@ -1047,69 +1494,82 @@ class TasVideocallComponent {
         // Owner left subscription - disconnect non-owners
         this.subscriptions.add(this.tasService.ownerHasLeft$.subscribe((hasLeft) => {
             if (hasLeft && !this.canAdmitUsers) { // Non-owner user
-                console.log('[TAS DEBUG] Owner left, disconnecting user');
+                // hangUp() triggers DISCONNECTED state, which opens feedback modal
+                // then closes videocall modal after feedback is done
                 this.hangUp();
-                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
+        // AllGeoGranted subscription - for owners to update panel state
         this.subscriptions.add(this.tasService.allGeoGranted$.subscribe((granted) => {
-            console.log('[TAS DEBUG] allGeoGranted changed:', granted);
             this.allGeoGranted = granted;
+            // For owners: update panel state based on geo status
+            if (this.canAdmitUsers && granted) {
+                this.userGeoViewState = UserGeoViewState.VERIFIED;
+            }
+        }));
+        // UserGeoInfo subscription - for owner geo panel
+        this.subscriptions.add(this.tasService.userGeoInfo$.subscribe((info) => {
+            this.userGeoInfo = info;
+            // Note: We don't auto-switch to DENIED here - that only happens 
+            // after owner requests and user denies (via geoRequestActive flow)
         }));
     }
     /**
      * Handle activateGeo request from backend (for non-owner users).
-     * If geo is already active, report it. If not, prompt user.
+     * Directly prompts browser for geolocation - no panel for users.
      */
     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);
+        // Clear any cached position to force re-prompting
+        this.geolocationService.clearCache();
+        // Request geolocation from user (browser will prompt)
+        const position = await this.geolocationService.getCurrentPosition();
+        if (position) {
             this.geoLocationStatus = 'active';
-            this.reportGeoStatus(cachedPosition.latitude, cachedPosition.longitude);
-            return;
+            this.reportGeoStatus(position.latitude, position.longitude);
+        }
+        else {
+            this.geoLocationStatus = 'denied';
+            this.denyGeoLocation();
         }
-        // Try to get position
-        console.log('[TAS DEBUG] Requesting geolocation from user...');
+    }
+    /** Start geolocation verification (called from template button) */
+    async startGeoVerification() {
+        this.userGeoViewState = UserGeoViewState.VERIFYING;
+        // Clear any cached position to force re-prompting
+        this.geolocationService.clearCache();
+        // Request geolocation from user (browser will prompt)
         const position = await this.geolocationService.getCurrentPosition();
         if (position) {
-            console.log('[TAS DEBUG] Geolocation obtained:', position);
             this.geoLocationStatus = 'active';
+            this.userGeoViewState = UserGeoViewState.VERIFIED;
             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();
+            this.userGeoViewState = UserGeoViewState.DENIED;
+            this.denyGeoLocation();
         }
     }
     /**
-     * Report geolocation status to backend.
+     * Report granted geolocation to backend.
+     * IMPORTANT: Only call with valid coordinates.
      */
     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');
+        // Validate coordinates are present
+        if (latitude === undefined || latitude === null || longitude === undefined || longitude === null) {
             return;
         }
         const body = {
@@ -1119,11 +1579,21 @@ class TasVideocallComponent {
             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),
-        });
+        this.tasService.modifyProxyVideoUser(body).subscribe({});
+    }
+    /**
+     * Report denied geolocation to backend.
+     */
+    denyGeoLocation() {
+        if (!this.videoCallId) {
+            return;
+        }
+        const body = {
+            userId: this.userId,
+            videoCallId: this.videoCallId,
+            action: UserCallAction.DENY_GEOLOCATION,
+        };
+        this.tasService.modifyProxyVideoUser(body).subscribe({});
     }
     initializeCall() {
         if (this.isReturningFromPip) {
@@ -1212,12 +1682,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 }, { 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-refresh\"></i>\n      </button>\n      <button\n        class=\"btn control-btn pip-btn\"\n        (click)=\"minimize()\"\n        title=\"Minimizar (Picture in Picture)\"\n        aria-label=\"Minimizar videollamada\"\n      >\n        <i class=\"fa fa-compress\"></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    </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:transparent;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 .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,.tas-videocall-container .controls-container .mute-btn{background:transparent}.tas-videocall-container .controls-container .swap-btn:hover,.tas-videocall-container .controls-container .pip-btn:hover,.tas-videocall-container .controls-container .mute-btn:hover{background:rgba(255,255,255,.15)}.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)}.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"] }] });
+TasVideocallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasVideocallComponent, deps: [{ token: i1.NgbActiveModal }, { token: TasService }, { token: GeolocationService }, { token: i4$2.DomSanitizer }, { token: i1.NgbModal }], 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-refresh\"></i>\n      </button>\n      <button\n        class=\"btn control-btn pip-btn\"\n        (click)=\"minimize()\"\n        title=\"Minimizar (Picture in Picture)\"\n        aria-label=\"Minimizar videollamada\"\n      >\n        <i class=\"fa fa-compress\"></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    </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  <!-- Owner geolocation panel (for owners to request user location) -->\n  <div class=\"user-geo-panel\" *ngIf=\"shouldShowUserGeoPanel || devModeEnabled\">\n    <div class=\"user-geo-header\">\n      <div class=\"header-title-row\">\n        <i class=\"fa fa-map-marker header-icon\" *ngIf=\"userGeoViewState !== UserGeoViewState.INITIAL\"></i>\n        <h3>Ubicaci\u00F3n del colaborador</h3>\n      </div>\n      <button class=\"close-btn\" (click)=\"setUserGeoViewState(UserGeoViewState.HIDDEN)\" aria-label=\"Cerrar\">\u00D7</button>\n    </div>\n\n    <div class=\"user-geo-description\" *ngIf=\"userGeoViewState !== UserGeoViewState.VERIFIED && userGeoViewState !== UserGeoViewState.DENIED\">\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\n    <div class=\"user-geo-content\">\n      <!-- INITIAL state: just the button -->\n      <ng-container *ngIf=\"userGeoViewState === UserGeoViewState.INITIAL\">\n        <!-- spacer -->\n      </ng-container>\n\n      <!-- VERIFYING state: spinner + loading message -->\n      <ng-container *ngIf=\"userGeoViewState === UserGeoViewState.VERIFYING\">\n        <div class=\"user-geo-verifying\">\n          <div class=\"geo-spinner-large\"></div>\n          <p class=\"verifying-title\">Verificando ubicaci\u00F3n...</p>\n          <p class=\"verifying-subtitle\">Esto puede tardar unos segundos.</p>\n        </div>\n      </ng-container>\n\n      <!-- VERIFIED state: home icon with sparkles -->\n      <ng-container *ngIf=\"userGeoViewState === UserGeoViewState.VERIFIED\">\n        <div class=\"user-geo-verified\">\n          <div class=\"verified-icon-container\">\n            <span class=\"home-icon\" [innerHTML]=\"homeIcon\"></span>\n          </div>\n          <p class=\"verified-title\">La ubicaci\u00F3n fue verificada</p>\n        </div>\n      </ng-container>\n\n      <!-- DENIED state: error icon and message -->\n      <ng-container *ngIf=\"userGeoViewState === UserGeoViewState.DENIED\">\n        <div class=\"user-geo-denied\">\n          <div class=\"denied-icon-container\">\n            <i class=\"fa fa-times-circle\"></i>\n          </div>\n          <p class=\"denied-title\">La ubicaci\u00F3n fue rechazada</p>\n          <p class=\"denied-subtitle\">El colaborador no permiti\u00F3 el acceso a su ubicaci\u00F3n.</p>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Button (hidden in verified and denied states) -->\n    <button \n      class=\"user-geo-btn\" \n      *ngIf=\"userGeoViewState !== UserGeoViewState.VERIFIED && userGeoViewState !== UserGeoViewState.DENIED\"\n      [class.disabled]=\"userGeoViewState === UserGeoViewState.VERIFYING\"\n      [disabled]=\"userGeoViewState === UserGeoViewState.VERIFYING\"\n      (click)=\"requestUserLocation()\">\n      Verificar ubicaci\u00F3n\n    </button>\n\n    <!-- Dev controls -->\n    <div class=\"dev-controls\" *ngIf=\"devModeEnabled\">\n      <span class=\"dev-label\">Dev:</span>\n      <button class=\"dev-btn\" (click)=\"setUserGeoViewState(UserGeoViewState.INITIAL)\">Initial</button>\n      <button class=\"dev-btn\" (click)=\"setUserGeoViewState(UserGeoViewState.VERIFYING)\">Verifying</button>\n      <button class=\"dev-btn\" (click)=\"setUserGeoViewState(UserGeoViewState.VERIFIED)\">Verified</button>\n      <button class=\"dev-btn\" (click)=\"setUserGeoViewState(UserGeoViewState.DENIED)\">Denied</button>\n      <button class=\"dev-btn\" (click)=\"setUserGeoViewState(UserGeoViewState.HIDDEN)\">Hide</button>\n    </div>\n  </div>\n</div>\n\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:transparent;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 .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,.tas-videocall-container .controls-container .mute-btn{background:transparent}.tas-videocall-container .controls-container .swap-btn:hover,.tas-videocall-container .controls-container .pip-btn:hover,.tas-videocall-container .controls-container .mute-btn:hover{background:rgba(255,255,255,.15)}.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)}.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-user-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;max-height:200px;overflow-y:auto}.location-panel .location-user-list .user-geo-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:rgba(255,255,255,.05);border-radius:6px}.location-panel .location-user-list .user-geo-item .user-icon{color:#fff9;font-size:14px}.location-panel .location-user-list .user-geo-item .user-name{flex:1;font-size:14px;color:#fff}.location-panel .location-user-list .user-geo-item .geo-status{display:flex;align-items:center;gap:.35rem;font-size:12px;padding:2px 8px;border-radius:12px}.location-panel .location-user-list .user-geo-item .geo-status.pending{color:#ffc107;background:rgba(255,193,7,.15)}.location-panel .location-user-list .user-geo-item .geo-status.granted{color:#4caf50;background:rgba(76,175,80,.15)}.location-panel .location-user-list .user-geo-item .geo-status.denied{color:#f44336;background:rgba(244,67,54,.15)}.location-panel .location-user-list .user-geo-item .geo-status i{font-size:10px}.location-panel .geo-denied-warning{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:rgba(244,67,54,.15);border-radius:6px;margin-bottom:1rem;color:#f44336;font-size:13px}.location-panel .geo-denied-warning i{font-size:14px}.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)}}.user-geo-panel{width:360px;height:100%;background:#212532;border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;color:#fff}.user-geo-panel .user-geo-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2.5rem;padding-top:2rem}.user-geo-panel .user-geo-header .header-title-row{display:flex;align-items:center;gap:.5rem}.user-geo-panel .user-geo-header .header-title-row .header-icon{font-size:16px;color:#fff}.user-geo-panel .user-geo-header .header-title-row h3{font-size:18px;font-weight:600;margin:0;color:#fff}.user-geo-panel .user-geo-header .close-btn{background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0;line-height:1;opacity:.7}.user-geo-panel .user-geo-header .close-btn:hover{opacity:1}.user-geo-panel .user-geo-description{font-size:14px;color:#fffc;line-height:1.6;margin-bottom:1rem}.user-geo-panel .user-geo-description p{margin:0 0 .75rem}.user-geo-panel .user-geo-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.user-geo-panel .user-geo-verifying{display:flex;flex-direction:column;align-items:center;text-align:center}.user-geo-panel .user-geo-verifying .geo-spinner-large{width:80px;height:80px;border:4px solid rgba(29,164,177,.2);border-top-color:var(--Primary-Uell, #1da4b1);border-radius:50%;animation:geo-spin 1s linear infinite;margin-bottom:1.5rem}.user-geo-panel .user-geo-verifying .verifying-title{color:#fff;font-size:16px;font-weight:600;margin:0 0 .25rem}.user-geo-panel .user-geo-verifying .verifying-subtitle{color:#fff9;font-size:14px;margin:0}.user-geo-panel .user-geo-verified{display:flex;flex-direction:column;align-items:center;text-align:center}.user-geo-panel .user-geo-verified .verified-icon-container{margin-bottom:1rem}.user-geo-panel .user-geo-verified .verified-icon-container .home-icon{display:block}.user-geo-panel .user-geo-verified .verified-icon-container .home-icon svg{width:120px;height:100px}.user-geo-panel .user-geo-verified .verified-title{color:#fff;font-size:16px;font-weight:600;margin:0}.user-geo-panel .user-geo-denied{display:flex;flex-direction:column;align-items:center;text-align:center}.user-geo-panel .user-geo-denied .denied-icon-container{width:100px;height:100px;border-radius:50%;background:rgba(244,67,54,.2);display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}.user-geo-panel .user-geo-denied .denied-icon-container i{font-size:48px;color:#f44336}.user-geo-panel .user-geo-denied .denied-title{color:#fff;font-size:16px;font-weight:600;margin:0 0 .5rem}.user-geo-panel .user-geo-denied .denied-subtitle{color:#fff9;font-size:14px;margin:0}.user-geo-panel .user-geo-btn{width:100%;padding:14px 24px;background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:auto;margin-bottom:1rem}.user-geo-panel .user-geo-btn:hover:not(.disabled){background:#178e99}.user-geo-panel .user-geo-btn.disabled{background:rgba(29,164,177,.5);cursor:not-allowed}.user-geo-panel .dev-controls{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:rgba(0,0,0,.3);border-radius:6px;margin-bottom:1rem;flex-wrap:wrap}.user-geo-panel .dev-controls .dev-label{font-size:12px;color:#fff9;font-weight:600}.user-geo-panel .dev-controls .dev-btn{padding:4px 8px;font-size:11px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;transition:all .2s ease}.user-geo-panel .dev-controls .dev-btn:hover{background:rgba(255,255,255,.2)}.user-geo-panel .user-geo-footer{display:flex;justify-content:center;gap:.75rem;padding-top:.5rem}.user-geo-panel .user-geo-footer .footer-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#fff9;font-size:16px}.user-geo-panel .user-geo-footer .footer-icon.active{background:var(--Primary-Uell, #1da4b1);color:#fff}\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-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-refresh\"></i>\n      </button>\n      <button\n        class=\"btn control-btn pip-btn\"\n        (click)=\"minimize()\"\n        title=\"Minimizar (Picture in Picture)\"\n        aria-label=\"Minimizar videollamada\"\n      >\n        <i class=\"fa fa-compress\"></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    </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:transparent;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 .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,.tas-videocall-container .controls-container .mute-btn{background:transparent}.tas-videocall-container .controls-container .swap-btn:hover,.tas-videocall-container .controls-container .pip-btn:hover,.tas-videocall-container .controls-container .mute-btn:hover{background:rgba(255,255,255,.15)}.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)}.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: [{
+            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-refresh\"></i>\n      </button>\n      <button\n        class=\"btn control-btn pip-btn\"\n        (click)=\"minimize()\"\n        title=\"Minimizar (Picture in Picture)\"\n        aria-label=\"Minimizar videollamada\"\n      >\n        <i class=\"fa fa-compress\"></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    </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  <!-- Owner geolocation panel (for owners to request user location) -->\n  <div class=\"user-geo-panel\" *ngIf=\"shouldShowUserGeoPanel || devModeEnabled\">\n    <div class=\"user-geo-header\">\n      <div class=\"header-title-row\">\n        <i class=\"fa fa-map-marker header-icon\" *ngIf=\"userGeoViewState !== UserGeoViewState.INITIAL\"></i>\n        <h3>Ubicaci\u00F3n del colaborador</h3>\n      </div>\n      <button class=\"close-btn\" (click)=\"setUserGeoViewState(UserGeoViewState.HIDDEN)\" aria-label=\"Cerrar\">\u00D7</button>\n    </div>\n\n    <div class=\"user-geo-description\" *ngIf=\"userGeoViewState !== UserGeoViewState.VERIFIED && userGeoViewState !== UserGeoViewState.DENIED\">\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\n    <div class=\"user-geo-content\">\n      <!-- INITIAL state: just the button -->\n      <ng-container *ngIf=\"userGeoViewState === UserGeoViewState.INITIAL\">\n        <!-- spacer -->\n      </ng-container>\n\n      <!-- VERIFYING state: spinner + loading message -->\n      <ng-container *ngIf=\"userGeoViewState === UserGeoViewState.VERIFYING\">\n        <div class=\"user-geo-verifying\">\n          <div class=\"geo-spinner-large\"></div>\n          <p class=\"verifying-title\">Verificando ubicaci\u00F3n...</p>\n          <p class=\"verifying-subtitle\">Esto puede tardar unos segundos.</p>\n        </div>\n      </ng-container>\n\n      <!-- VERIFIED state: home icon with sparkles -->\n      <ng-container *ngIf=\"userGeoViewState === UserGeoViewState.VERIFIED\">\n        <div class=\"user-geo-verified\">\n          <div class=\"verified-icon-container\">\n            <span class=\"home-icon\" [innerHTML]=\"homeIcon\"></span>\n          </div>\n          <p class=\"verified-title\">La ubicaci\u00F3n fue verificada</p>\n        </div>\n      </ng-container>\n\n      <!-- DENIED state: error icon and message -->\n      <ng-container *ngIf=\"userGeoViewState === UserGeoViewState.DENIED\">\n        <div class=\"user-geo-denied\">\n          <div class=\"denied-icon-container\">\n            <i class=\"fa fa-times-circle\"></i>\n          </div>\n          <p class=\"denied-title\">La ubicaci\u00F3n fue rechazada</p>\n          <p class=\"denied-subtitle\">El colaborador no permiti\u00F3 el acceso a su ubicaci\u00F3n.</p>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Button (hidden in verified and denied states) -->\n    <button \n      class=\"user-geo-btn\" \n      *ngIf=\"userGeoViewState !== UserGeoViewState.VERIFIED && userGeoViewState !== UserGeoViewState.DENIED\"\n      [class.disabled]=\"userGeoViewState === UserGeoViewState.VERIFYING\"\n      [disabled]=\"userGeoViewState === UserGeoViewState.VERIFYING\"\n      (click)=\"requestUserLocation()\">\n      Verificar ubicaci\u00F3n\n    </button>\n\n    <!-- Dev controls -->\n    <div class=\"dev-controls\" *ngIf=\"devModeEnabled\">\n      <span class=\"dev-label\">Dev:</span>\n      <button class=\"dev-btn\" (click)=\"setUserGeoViewState(UserGeoViewState.INITIAL)\">Initial</button>\n      <button class=\"dev-btn\" (click)=\"setUserGeoViewState(UserGeoViewState.VERIFYING)\">Verifying</button>\n      <button class=\"dev-btn\" (click)=\"setUserGeoViewState(UserGeoViewState.VERIFIED)\">Verified</button>\n      <button class=\"dev-btn\" (click)=\"setUserGeoViewState(UserGeoViewState.DENIED)\">Denied</button>\n      <button class=\"dev-btn\" (click)=\"setUserGeoViewState(UserGeoViewState.HIDDEN)\">Hide</button>\n    </div>\n  </div>\n</div>\n\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:transparent;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 .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,.tas-videocall-container .controls-container .mute-btn{background:transparent}.tas-videocall-container .controls-container .swap-btn:hover,.tas-videocall-container .controls-container .pip-btn:hover,.tas-videocall-container .controls-container .mute-btn:hover{background:rgba(255,255,255,.15)}.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)}.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-user-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;max-height:200px;overflow-y:auto}.location-panel .location-user-list .user-geo-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:rgba(255,255,255,.05);border-radius:6px}.location-panel .location-user-list .user-geo-item .user-icon{color:#fff9;font-size:14px}.location-panel .location-user-list .user-geo-item .user-name{flex:1;font-size:14px;color:#fff}.location-panel .location-user-list .user-geo-item .geo-status{display:flex;align-items:center;gap:.35rem;font-size:12px;padding:2px 8px;border-radius:12px}.location-panel .location-user-list .user-geo-item .geo-status.pending{color:#ffc107;background:rgba(255,193,7,.15)}.location-panel .location-user-list .user-geo-item .geo-status.granted{color:#4caf50;background:rgba(76,175,80,.15)}.location-panel .location-user-list .user-geo-item .geo-status.denied{color:#f44336;background:rgba(244,67,54,.15)}.location-panel .location-user-list .user-geo-item .geo-status i{font-size:10px}.location-panel .geo-denied-warning{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:rgba(244,67,54,.15);border-radius:6px;margin-bottom:1rem;color:#f44336;font-size:13px}.location-panel .geo-denied-warning i{font-size:14px}.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)}}.user-geo-panel{width:360px;height:100%;background:#212532;border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;color:#fff}.user-geo-panel .user-geo-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2.5rem;padding-top:2rem}.user-geo-panel .user-geo-header .header-title-row{display:flex;align-items:center;gap:.5rem}.user-geo-panel .user-geo-header .header-title-row .header-icon{font-size:16px;color:#fff}.user-geo-panel .user-geo-header .header-title-row h3{font-size:18px;font-weight:600;margin:0;color:#fff}.user-geo-panel .user-geo-header .close-btn{background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0;line-height:1;opacity:.7}.user-geo-panel .user-geo-header .close-btn:hover{opacity:1}.user-geo-panel .user-geo-description{font-size:14px;color:#fffc;line-height:1.6;margin-bottom:1rem}.user-geo-panel .user-geo-description p{margin:0 0 .75rem}.user-geo-panel .user-geo-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.user-geo-panel .user-geo-verifying{display:flex;flex-direction:column;align-items:center;text-align:center}.user-geo-panel .user-geo-verifying .geo-spinner-large{width:80px;height:80px;border:4px solid rgba(29,164,177,.2);border-top-color:var(--Primary-Uell, #1da4b1);border-radius:50%;animation:geo-spin 1s linear infinite;margin-bottom:1.5rem}.user-geo-panel .user-geo-verifying .verifying-title{color:#fff;font-size:16px;font-weight:600;margin:0 0 .25rem}.user-geo-panel .user-geo-verifying .verifying-subtitle{color:#fff9;font-size:14px;margin:0}.user-geo-panel .user-geo-verified{display:flex;flex-direction:column;align-items:center;text-align:center}.user-geo-panel .user-geo-verified .verified-icon-container{margin-bottom:1rem}.user-geo-panel .user-geo-verified .verified-icon-container .home-icon{display:block}.user-geo-panel .user-geo-verified .verified-icon-container .home-icon svg{width:120px;height:100px}.user-geo-panel .user-geo-verified .verified-title{color:#fff;font-size:16px;font-weight:600;margin:0}.user-geo-panel .user-geo-denied{display:flex;flex-direction:column;align-items:center;text-align:center}.user-geo-panel .user-geo-denied .denied-icon-container{width:100px;height:100px;border-radius:50%;background:rgba(244,67,54,.2);display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}.user-geo-panel .user-geo-denied .denied-icon-container i{font-size:48px;color:#f44336}.user-geo-panel .user-geo-denied .denied-title{color:#fff;font-size:16px;font-weight:600;margin:0 0 .5rem}.user-geo-panel .user-geo-denied .denied-subtitle{color:#fff9;font-size:14px;margin:0}.user-geo-panel .user-geo-btn{width:100%;padding:14px 24px;background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:auto;margin-bottom:1rem}.user-geo-panel .user-geo-btn:hover:not(.disabled){background:#178e99}.user-geo-panel .user-geo-btn.disabled{background:rgba(29,164,177,.5);cursor:not-allowed}.user-geo-panel .dev-controls{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:rgba(0,0,0,.3);border-radius:6px;margin-bottom:1rem;flex-wrap:wrap}.user-geo-panel .dev-controls .dev-label{font-size:12px;color:#fff9;font-weight:600}.user-geo-panel .dev-controls .dev-btn{padding:4px 8px;font-size:11px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;transition:all .2s ease}.user-geo-panel .dev-controls .dev-btn:hover{background:rgba(255,255,255,.2)}.user-geo-panel .user-geo-footer{display:flex;justify-content:center;gap:.75rem;padding-top:.5rem}.user-geo-panel .user-geo-footer .footer-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#fff9;font-size:16px}.user-geo-panel .user-geo-footer .footer-icon.active{background:var(--Primary-Uell, #1da4b1);color:#fff}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }, { type: GeolocationService }, { type: i4$2.DomSanitizer }, { type: i1.NgbModal }]; }, propDecorators: { sessionId: [{
                 type: Input
             }], token: [{
                 type: Input
@@ -1266,6 +1736,7 @@ class TasWaitingRoomComponent {
         this.state = WaitingRoomState.CHECKING_STATUS;
         this.WaitingRoomState = WaitingRoomState; // Expose enum to template
         this.errorMessage = '';
+        this.showErrorDetails = false;
         this.isJoinable = false;
         // Session data from status response
         this.resolvedSessionId = '';
@@ -1277,19 +1748,40 @@ class TasWaitingRoomComponent {
         this.videoCallModalRef = null;
         // Geolocation
         this.geoPosition = null;
+        this.geoWasDenied = false; // Tracks if user denied geo permission
+        this.geoResultSent = false; // Tracks if geo result was already sent
+        // Permission tracking for auto-join
+        this.mediaPermissionsGranted = false;
+        this.geoPermissionsResolved = false;
+        // Auto-retry tracking
+        this.retryCount = 0;
+        this.MAX_RETRIES = 1;
     }
     /** Whether current user is an owner */
     get isOwner() {
         return this.currentUser?.role === TasUserRole.OWNER;
     }
+    /** Whether we're still requesting permissions (for template) */
+    get isRequestingPermissions() {
+        return !this.mediaPermissionsGranted || (!this.geoPermissionsResolved && !this.isOwner && !this.isBackoffice);
+    }
+    /** Whether we're waiting for admission after permissions granted (for template) */
+    get isWaitingForAdmission() {
+        return this.mediaPermissionsGranted &&
+            (this.geoPermissionsResolved || this.isOwner || this.isBackoffice) &&
+            !this.isJoinable;
+    }
     ngOnInit() {
         console.log('[TAS DEBUG] TasWaitingRoomComponent.ngOnInit');
         this.requestMediaPermissions();
+        // Request geolocation permission and cache it (but don't send to backend yet)
+        // The cached position will be sent when owner requests it via activateGeo
         this.requestGeolocation();
         this.checkStatus();
     }
     /**
      * Request camera and microphone permissions.
+     * Triggers auto-join when permissions are resolved.
      */
     async requestMediaPermissions() {
         console.log('[TAS DEBUG] Requesting media permissions...');
@@ -1298,37 +1790,71 @@ class TasWaitingRoomComponent {
             // Stop tracks immediately - we just needed the permission
             stream.getTracks().forEach(track => track.stop());
             console.log('[TAS DEBUG] Media permissions granted');
+            this.mediaPermissionsGranted = true;
         }
         catch (error) {
             console.warn('[TAS DEBUG] Media permissions denied or unavailable:', error);
+            // Still allow joining - some users may not have camera/mic
+            this.mediaPermissionsGranted = true;
         }
+        this.tryAutoJoin();
+        this.cdr.detectChanges();
     }
     /**
-     * Request geolocation immediately on init.
+     * Request geolocation permission and cache result.
      * Only for regular users (not owners/backoffice).
-     * If user allows, store position and send to backend.
+     * Actual send to backend happens after we have videoCallId.
+     * Triggers auto-join when geolocation is resolved.
      */
     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');
+            this.geoPermissionsResolved = true;
             return;
         }
-        console.log('[TAS DEBUG] Requesting geolocation...');
+        console.log('[TAS DEBUG] Requesting geolocation permission...');
         const position = await this.geolocationService.getCurrentPosition();
         if (position) {
-            console.log('[TAS DEBUG] Geolocation obtained:', position);
+            console.log('[TAS DEBUG] Geolocation granted:', position);
             this.geoPosition = position;
-            // Send to backend when videoCallId is available
-            this.sendGeolocationToBackend();
+            this.geoWasDenied = false;
         }
         else {
             console.log('[TAS DEBUG] Geolocation denied or unavailable');
+            this.geoPosition = null;
+            this.geoWasDenied = true;
         }
+        this.geoPermissionsResolved = true;
+        // If we already have videoCallId, send now. Otherwise, it will be sent after status response.
+        this.sendGeoResultToBackend();
+        this.tryAutoJoin();
+        this.cdr.detectChanges();
     }
     /**
-     * Send geolocation to backend via modify user endpoint.
-     * NOTE: Endpoint call is prepared but may not be active yet.
+     * Send geo result to backend (granted or denied).
+     * Only sends if videoCallId is available and not already sent.
+     */
+    sendGeoResultToBackend() {
+        if (!this.videoCallId) {
+            console.log('[TAS DEBUG] Cannot send geo result: videoCallId not available yet');
+            return;
+        }
+        if (this.geoResultSent) {
+            console.log('[TAS DEBUG] Geo result already sent, skipping');
+            return;
+        }
+        if (this.geoPosition) {
+            this.sendGeolocationToBackend();
+            this.geoResultSent = true;
+        }
+        else if (this.geoWasDenied) {
+            this.sendGeoDenialToBackend();
+            this.geoResultSent = true;
+        }
+    }
+    /**
+     * Send granted geolocation to backend via modify user endpoint.
      */
     sendGeolocationToBackend() {
         if (!this.geoPosition || !this.videoCallId) {
@@ -1336,7 +1862,6 @@ class TasWaitingRoomComponent {
         }
         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,
@@ -1347,6 +1872,23 @@ class TasWaitingRoomComponent {
             error: (err) => console.error('[TAS DEBUG] Failed to send geolocation:', err),
         });
     }
+    /**
+     * Send geolocation denial to backend via modify user endpoint.
+     */
+    sendGeoDenialToBackend() {
+        if (!this.videoCallId) {
+            return;
+        }
+        console.log('[TAS DEBUG] Sending geo denial to backend...');
+        const body = {
+            videoCallId: this.videoCallId,
+            action: UserCallAction.DENY_GEOLOCATION,
+        };
+        this.tasService.modifyProxyVideoUser(body).subscribe({
+            next: () => console.log('[TAS DEBUG] Geo denial sent successfully'),
+            error: (err) => console.error('[TAS DEBUG] Failed to send geo denial:', err),
+        });
+    }
     ngOnDestroy() {
         console.log('[TAS DEBUG] TasWaitingRoomComponent.ngOnDestroy');
         this.subscriptions.unsubscribe();
@@ -1380,8 +1922,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();
+                // Now that we have videoCallId, send geo result if not already sent
+                this.sendGeoResultToBackend();
                 // Start polling for status updates
                 this.tasService.startStatusPolling(statusParams);
                 // Subscribe to joinable status
@@ -1397,7 +1939,8 @@ class TasWaitingRoomComponent {
         }));
     }
     /**
-     * Handle changes to joinable status
+     * Handle changes to joinable status.
+     * Triggers auto-join when joinable becomes true.
      */
     handleJoinableChange(joinable) {
         console.log('[TAS DEBUG] handleJoinableChange called', {
@@ -1413,10 +1956,11 @@ class TasWaitingRoomComponent {
             console.log('[TAS DEBUG] Skipping state update - already in:', this.state);
             return;
         }
-        // Both users and owners: show join button based on joinable
+        // Update state and attempt auto-join
         if (joinable) {
-            console.log('[TAS DEBUG] Joinable is true, showing join button');
+            console.log('[TAS DEBUG] Joinable is true, attempting auto-join');
             this.state = WaitingRoomState.READY;
+            this.tryAutoJoin();
         }
         else {
             console.log('[TAS DEBUG] Waiting for joinable...');
@@ -1425,11 +1969,33 @@ class TasWaitingRoomComponent {
         this.cdr.detectChanges();
     }
     /**
-     * Called when user clicks the join button.
-     * Calls /start to get token then auto-joins.
+     * Attempt to auto-join the session when all conditions are met.
+     * - For owners: just need joinable + sessionId
+     * - For users: need media permissions + geo resolved + joinable + sessionId
      */
-    joinSession() {
-        this.startSessionAndJoin();
+    tryAutoJoin() {
+        // Don't try if already joining or in error
+        if (this.state === WaitingRoomState.GETTING_TOKEN ||
+            this.state === WaitingRoomState.JOINING) {
+            console.log('[TAS DEBUG] tryAutoJoin skipped - already in state:', this.state);
+            return;
+        }
+        // For owners: just need joinable
+        if (this.isOwner) {
+            if (this.isJoinable && this.resolvedSessionId) {
+                console.log('[TAS DEBUG] Owner auto-joining...');
+                this.startSessionAndJoin();
+            }
+            return;
+        }
+        // For users: need media + geo resolved + joinable
+        if (this.mediaPermissionsGranted &&
+            this.geoPermissionsResolved &&
+            this.isJoinable &&
+            this.resolvedSessionId) {
+            console.log('[TAS DEBUG] User auto-joining...');
+            this.startSessionAndJoin();
+        }
     }
     /**
      * Check if user has owner/backoffice role
@@ -1482,30 +2048,50 @@ class TasWaitingRoomComponent {
             },
             error: (err) => {
                 console.error('[TAS DEBUG] /start request failed:', err);
-                this.state = WaitingRoomState.ERROR;
-                this.errorMessage = err?.error?.message || err?.message || 'Error al iniciar la sesión. Por favor, intente nuevamente.';
-                this.tasService.stopStatusPolling();
-                console.log('[TAS DEBUG] State set to ERROR, errorMessage:', this.errorMessage);
-                this.cdr.detectChanges();
+                // Auto-retry on first failure
+                if (this.retryCount < this.MAX_RETRIES) {
+                    this.retryCount++;
+                    console.log('[TAS DEBUG] Auto-retrying... attempt:', this.retryCount);
+                    this.state = WaitingRoomState.CHECKING_STATUS;
+                    this.cdr.detectChanges();
+                    setTimeout(() => this.startSessionAndJoin(), 2000);
+                }
+                else {
+                    // Show error after retry fails
+                    this.state = WaitingRoomState.ERROR;
+                    this.errorMessage = err?.error?.message || err?.message || 'Error al iniciar la sesión. Por favor, intente nuevamente.';
+                    this.tasService.stopStatusPolling();
+                    console.log('[TAS DEBUG] State set to ERROR, errorMessage:', this.errorMessage);
+                    this.cdr.detectChanges();
+                }
             },
         }));
     }
     /**
-     * Closes the waiting room
-     */
-    cancel() {
-        this.tasService.stopStatusPolling();
-        this.activeModal.dismiss('cancel');
-    }
-    /**
-     * Retry after an error
+     * Retry after an error.
+     * Resets retry count and restarts the flow.
      */
     retry() {
         this.state = WaitingRoomState.CHECKING_STATUS;
         this.errorMessage = '';
+        this.showErrorDetails = false;
         this.token = '';
+        this.retryCount = 0; // Reset retry count for auto-retry
         this.checkStatus();
     }
+    /**
+     * Toggle the error details dropdown visibility.
+     */
+    toggleErrorDetails() {
+        this.showErrorDetails = !this.showErrorDetails;
+    }
+    /**
+     * Close the waiting room modal.
+     */
+    close() {
+        this.tasService.stopStatusPolling();
+        this.activeModal.dismiss('close');
+    }
     openVideoCallModal() {
         this.videoCallModalRef = this.modalService.open(TasVideocallComponent, {
             size: 'xl',
@@ -1529,10 +2115,10 @@ 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: 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"] }] });
+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  <div class=\"waiting-room-content\">\n    <div class=\"state-container\">\n      <!-- Loading states (show spinner) -->\n      <ng-container *ngIf=\"state !== WaitingRoomState.ERROR\">\n        <div class=\"state-icon loading\">\n          <div class=\"spinner\"></div>\n        </div>\n        \n        <!-- Requesting permissions -->\n        <ng-container *ngIf=\"isRequestingPermissions\">\n          <p class=\"state-message\">Solicitando permisos...</p>\n          <p class=\"state-submessage\">Por favor, acept\u00E1 los permisos de c\u00E1mara y micr\u00F3fono.</p>\n        </ng-container>\n        \n        <!-- Waiting for admission (permissions granted, not joinable yet) -->\n        <ng-container *ngIf=\"isWaitingForAdmission\">\n          <p class=\"state-message\">Medicina laboral va a admitirte</p>\n          <p class=\"state-submessage\">Por favor, permanec\u00E9 en esta pantalla.</p>\n        </ng-container>\n        \n        <!-- Getting token / Joining -->\n        <ng-container *ngIf=\"state === WaitingRoomState.GETTING_TOKEN || state === WaitingRoomState.JOINING\">\n          <p class=\"state-message\">Conectando...</p>\n        </ng-container>\n        \n        <!-- Checking status (when not requesting permissions) -->\n        <ng-container *ngIf=\"state === WaitingRoomState.CHECKING_STATUS && !isRequestingPermissions\">\n          <p class=\"state-message\">Verificando estado...</p>\n        </ng-container>\n      </ng-container>\n\n      <!-- Error state (show error icon and message) -->\n      <ng-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        \n        <!-- Collapsible error details -->\n        <div class=\"error-dropdown\" *ngIf=\"errorMessage\">\n          <button \n            type=\"button\" \n            class=\"error-toggle-btn\"\n            (click)=\"toggleErrorDetails()\"\n            [attr.aria-expanded]=\"showErrorDetails\"\n            aria-controls=\"error-details-content\"\n          >\n            <span>Ver detalles del error</span>\n            <i class=\"fa\" [class.fa-chevron-down]=\"!showErrorDetails\" [class.fa-chevron-up]=\"showErrorDetails\"></i>\n          </button>\n          <div \n            id=\"error-details-content\"\n            class=\"error-details-content\"\n            [class.expanded]=\"showErrorDetails\"\n          >\n            <p class=\"error-details-text\">{{ errorMessage }}</p>\n          </div>\n        </div>\n        \n        <div class=\"error-actions\">\n          <button type=\"button\" class=\"btn action-btn retry-btn\" (click)=\"retry()\">\n            <i class=\"fa fa-refresh\"></i>\n            Reintentar\n          </button>\n          <button type=\"button\" class=\"btn action-btn close-btn\" (click)=\"close()\">\n            Cerrar\n          </button>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".tas-waiting-room{display:flex;flex-direction:column;min-height:300px;background:#ffffff;border-radius:5px;overflow:hidden}.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%}.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.loading{background:rgba(29,164,177,.1);border:2px solid #1da4b1}.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.error{color:#ee316b}.state-submessage{font-size:14px;color:#6c757d;margin:0 0 24px;font-weight:400}.error-dropdown{margin:16px 0;width:100%}.error-toggle-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 16px;font-size:13px;font-weight:500;color:#6c757d;background:transparent;border:1px solid #e9ecef;border-radius:6px;cursor:pointer;transition:all .2s ease}.error-toggle-btn:hover{background:#f8f9fa;border-color:#6c757d;color:#212529}.error-toggle-btn i{font-size:12px;transition:transform .2s ease}.error-details-content{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}.error-details-content.expanded{max-height:200px;padding-top:12px}.error-details-text{font-size:12px;color:#ee316b;margin:0;padding:12px 16px;background:rgba(238,49,107,.08);border-radius:8px;border:1px solid rgba(238,49,107,.2);text-align:left;word-break:break-word;max-height:150px;overflow-y:auto}.error-actions{display:flex;justify-content:center;gap:12px;margin-top:16px}.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.retry-btn{background:transparent;color:#6c757d;border:1px solid #e9ecef}.action-btn.retry-btn:hover{background:#f8f9fa;border-color:#6c757d;color:#212529}.action-btn.close-btn{background:#ee316b;color:#fff;border:none}.action-btn.close-btn:hover{background:#da124f}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 576px){.tas-waiting-room{min-height:250px}.waiting-room-content{padding:24px}.state-icon{width:64px;height:64px}.state-icon i{font-size:28px}.spinner{width:32px;height:32px}.action-btn{padding:10px 24px;font-size:14px}}\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_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"] }]
+            args: [{ selector: 'tas-waiting-room', template: "<div class=\"tas-waiting-room\">\n  <div class=\"waiting-room-content\">\n    <div class=\"state-container\">\n      <!-- Loading states (show spinner) -->\n      <ng-container *ngIf=\"state !== WaitingRoomState.ERROR\">\n        <div class=\"state-icon loading\">\n          <div class=\"spinner\"></div>\n        </div>\n        \n        <!-- Requesting permissions -->\n        <ng-container *ngIf=\"isRequestingPermissions\">\n          <p class=\"state-message\">Solicitando permisos...</p>\n          <p class=\"state-submessage\">Por favor, acept\u00E1 los permisos de c\u00E1mara y micr\u00F3fono.</p>\n        </ng-container>\n        \n        <!-- Waiting for admission (permissions granted, not joinable yet) -->\n        <ng-container *ngIf=\"isWaitingForAdmission\">\n          <p class=\"state-message\">Medicina laboral va a admitirte</p>\n          <p class=\"state-submessage\">Por favor, permanec\u00E9 en esta pantalla.</p>\n        </ng-container>\n        \n        <!-- Getting token / Joining -->\n        <ng-container *ngIf=\"state === WaitingRoomState.GETTING_TOKEN || state === WaitingRoomState.JOINING\">\n          <p class=\"state-message\">Conectando...</p>\n        </ng-container>\n        \n        <!-- Checking status (when not requesting permissions) -->\n        <ng-container *ngIf=\"state === WaitingRoomState.CHECKING_STATUS && !isRequestingPermissions\">\n          <p class=\"state-message\">Verificando estado...</p>\n        </ng-container>\n      </ng-container>\n\n      <!-- Error state (show error icon and message) -->\n      <ng-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        \n        <!-- Collapsible error details -->\n        <div class=\"error-dropdown\" *ngIf=\"errorMessage\">\n          <button \n            type=\"button\" \n            class=\"error-toggle-btn\"\n            (click)=\"toggleErrorDetails()\"\n            [attr.aria-expanded]=\"showErrorDetails\"\n            aria-controls=\"error-details-content\"\n          >\n            <span>Ver detalles del error</span>\n            <i class=\"fa\" [class.fa-chevron-down]=\"!showErrorDetails\" [class.fa-chevron-up]=\"showErrorDetails\"></i>\n          </button>\n          <div \n            id=\"error-details-content\"\n            class=\"error-details-content\"\n            [class.expanded]=\"showErrorDetails\"\n          >\n            <p class=\"error-details-text\">{{ errorMessage }}</p>\n          </div>\n        </div>\n        \n        <div class=\"error-actions\">\n          <button type=\"button\" class=\"btn action-btn retry-btn\" (click)=\"retry()\">\n            <i class=\"fa fa-refresh\"></i>\n            Reintentar\n          </button>\n          <button type=\"button\" class=\"btn action-btn close-btn\" (click)=\"close()\">\n            Cerrar\n          </button>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".tas-waiting-room{display:flex;flex-direction:column;min-height:300px;background:#ffffff;border-radius:5px;overflow:hidden}.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%}.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.loading{background:rgba(29,164,177,.1);border:2px solid #1da4b1}.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.error{color:#ee316b}.state-submessage{font-size:14px;color:#6c757d;margin:0 0 24px;font-weight:400}.error-dropdown{margin:16px 0;width:100%}.error-toggle-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 16px;font-size:13px;font-weight:500;color:#6c757d;background:transparent;border:1px solid #e9ecef;border-radius:6px;cursor:pointer;transition:all .2s ease}.error-toggle-btn:hover{background:#f8f9fa;border-color:#6c757d;color:#212529}.error-toggle-btn i{font-size:12px;transition:transform .2s ease}.error-details-content{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}.error-details-content.expanded{max-height:200px;padding-top:12px}.error-details-text{font-size:12px;color:#ee316b;margin:0;padding:12px 16px;background:rgba(238,49,107,.08);border-radius:8px;border:1px solid rgba(238,49,107,.2);text-align:left;word-break:break-word;max-height:150px;overflow-y:auto}.error-actions{display:flex;justify-content:center;gap:12px;margin-top:16px}.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.retry-btn{background:transparent;color:#6c757d;border:1px solid #e9ecef}.action-btn.retry-btn:hover{background:#f8f9fa;border-color:#6c757d;color:#212529}.action-btn.close-btn{background:#ee316b;color:#fff;border:none}.action-btn.close-btn:hover{background:#da124f}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 576px){.tas-waiting-room{min-height:250px}.waiting-room-content{padding:24px}.state-icon{width:64px;height:64px}.state-icon i{font-size:28px}.spinner{width:32px;height:32px}.action-btn{padding:10px 24px;font-size:14px}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }, { type: GeolocationService }, { type: i1.NgbModal }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { roomType: [{
                 type: Input
             }], entityId: [{
@@ -1646,6 +2232,11 @@ class TasButtonComponent {
         })
             .subscribe({
             next: (response) => {
+                // Validate response structure
+                if (!response || !response.content) {
+                    this.handleStatusError('Invalid response');
+                    return;
+                }
                 this.isCheckingStatus = false;
                 this.isStatusError = false;
                 this.statusErrorMessage = '';
@@ -1654,23 +2245,20 @@ class TasButtonComponent {
                 this.isJoinable = response.content?.joinable ?? false;
             },
             error: (err) => {
-                this.isCheckingStatus = false;
-                const errorMessage = this.tasUtilityService.extractErrorMessage(err, 'Error checking status');
-                this.statusErrorMessage = errorMessage;
-                // Use utility service to determine if button should be shown
-                this.shouldShowButton = this.tasUtilityService.shouldShowButton(errorMessage);
-                // Stop polling on error
-                this.stopStatusPolling();
-                // If button should be hidden, don't treat as error
-                if (!this.shouldShowButton) {
-                    this.isStatusError = false;
-                }
-                else {
-                    this.isStatusError = true;
-                }
+                this.handleStatusError(err);
             },
         }));
     }
+    handleStatusError(err) {
+        this.isCheckingStatus = false;
+        const errorMessage = this.tasUtilityService.extractErrorMessage(err, 'Error checking status');
+        this.statusErrorMessage = errorMessage;
+        // On any status error, hide the button
+        this.shouldShowButton = false;
+        this.isStatusError = false; // We don't show error UI, just hide the button
+        // Stop polling on error
+        this.stopStatusPolling();
+    }
     onClick() {
         if (!this.tenant || !this.currentUser?.name) {
             return;
@@ -1747,6 +2335,7 @@ class TasFloatingCallComponent {
         this.isMuted = false;
         this.subscriptions = new Subscription();
         this.videoCallModalRef = null;
+        this.feedbackShown = false; // Track if feedback modal has been shown
         // Margin from screen edges (in pixels)
         this.PIP_MARGIN = 20;
     }
@@ -1768,12 +2357,45 @@ class TasFloatingCallComponent {
     toggleMute() {
         this.tasService.toggleMute();
     }
+    /**
+     * Open feedback modal when call ends from PiP mode
+     */
+    openFeedbackModal() {
+        // Prevent opening feedback modal multiple times
+        if (this.feedbackShown) {
+            this.isVisible = false;
+            return;
+        }
+        // Get videoCallId from service
+        const videoCallId = this.tasService.videoCallId;
+        // If no videoCallId, skip feedback and hide directly
+        if (!videoCallId) {
+            this.isVisible = false;
+            return;
+        }
+        this.feedbackShown = true;
+        const modalRef = this.modalService.open(TasFeedbackModalComponent, {
+            centered: true,
+            backdrop: true,
+            keyboard: true,
+            windowClass: 'tas-feedback-modal-wrapper',
+        });
+        modalRef.componentInstance.videoCallId = videoCallId;
+        modalRef.componentInstance.tenant = this.tasService.tenant ?? '';
+        modalRef.componentInstance.businessRole = this.tasService.businessRole;
+        // Hide floating call after feedback modal is closed/dismissed
+        modalRef.result.finally(() => {
+            this.isVisible = false;
+            this.feedbackShown = false; // Reset for potential future calls
+        });
+    }
     // Private Methods
     setupSubscriptions() {
         // Call state subscription
         this.subscriptions.add(this.tasService.callState$.subscribe((state) => {
-            if (state === CallState.DISCONNECTED) {
-                this.isVisible = false;
+            // Only handle disconnect feedback if we're in PiP mode (isVisible)
+            if (state === CallState.DISCONNECTED && this.isVisible) {
+                this.openFeedbackModal();
             }
         }));
         // View mode subscription
@@ -1895,10 +2517,13 @@ class TasIncomingAppointmentComponent {
         this.appointments = [];
         this.isLoading = true;
         this.hasError = false;
+        // The appointmentId from status API - only this appointment shows tas-btn
+        this.activeAppointmentId = null;
         this.subscriptions = new Subscription();
     }
     ngOnInit() {
         this.loadAppointments();
+        this.checkStatus();
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -1916,8 +2541,9 @@ class TasIncomingAppointmentComponent {
                 const appointments = Array.isArray(response)
                     ? response
                     : response?.content || [];
-                // Sort by date and startTime descending (most recent first)
-                this.appointments = appointments.sort((a, b) => {
+                // Deduplicate by id and sort by date and startTime ascending (earliest first)
+                const uniqueAppointments = appointments.filter((appt, index, self) => index === self.findIndex((a) => a.id === appt.id));
+                this.appointments = uniqueAppointments.sort((a, b) => {
                     const dateTimeA = `${a.date}T${a.startTime}`;
                     const dateTimeB = `${b.date}T${b.startTime}`;
                     return dateTimeB.localeCompare(dateTimeA);
@@ -1930,15 +2556,49 @@ class TasIncomingAppointmentComponent {
             },
         }));
     }
+    /**
+     * Check status endpoint to get the active appointmentId
+     */
+    checkStatus() {
+        if (!this.tenant || !this.entityId) {
+            return;
+        }
+        this.subscriptions.add(this.tasService
+            .getProxyVideoStatus({
+            roomType: this.roomType,
+            entityId: this.entityId,
+            tenant: this.tenant,
+            businessRole: this.businessRole,
+        })
+            .subscribe({
+            next: (response) => {
+                // Store the appointmentId from status - tas-btn only shows for this one
+                this.activeAppointmentId = response?.content?.appointmentId ?? null;
+            },
+            error: () => {
+                this.activeAppointmentId = null;
+            },
+        }));
+    }
     onEnterCall(appointment) {
         this.enterCall.emit(appointment);
     }
     /**
-     * Check if tas-btn should be shown for an appointment (CONFIRMED or ACTIVE status)
+     * Check if tas-btn should be shown for an appointment.
+     * Only shows when appointment.id matches the activeAppointmentId from status API.
+     * tas-btn handles its own polling for joinable state.
      */
     shouldShowTasBtn(appointment) {
-        return appointment.status === AppointmentStatus.CONFIRMED ||
+        const hasValidStatus = appointment.status === AppointmentStatus.CONFIRMED ||
             appointment.status === AppointmentStatus.ACTIVE;
+        // Only show for the appointment that matches status API response
+        return hasValidStatus && appointment.id === this.activeAppointmentId;
+    }
+    /**
+     * TrackBy function for ngFor
+     */
+    trackByAppointmentId(index, appointment) {
+        return appointment.id;
     }
     /**
      * Format date to Spanish format: "Lunes 8 de diciembre"
@@ -1970,17 +2630,17 @@ class TasIncomingAppointmentComponent {
      */
     getOtherParticipant(appointment) {
         if (!appointment.participants || appointment.participants.length === 0) {
-            return appointment.title; // Fallback to title if no participants
+            return appointment.title;
         }
         const otherParticipant = appointment.participants.find(p => p.userId !== this.currentUser?.id);
         return otherParticipant?.name || appointment.title;
     }
 }
 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", fromDate: "fromDate", toDate: "toDate" }, 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 && appointments.length === 0\">\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  <!-- Appointments list -->\n  <div class=\"card-content appointment-state\" *ngIf=\"!isLoading && appointments.length > 0\">\n    <div class=\"appointment-card\" *ngFor=\"let appt of appointments\">\n      <div class=\"appointment-header\">\n        <tas-avatar [name]=\"getOtherParticipant(appt)\" [size]=\"48\"></tas-avatar>\n        <span class=\"doctor-name\">{{ getOtherParticipant(appt) }}</span>\n      </div>\n      <div class=\"appointment-details\">\n        <div class=\"date-time\">\n          <span class=\"date\">{{ formatAppointmentDate(appt) }}</span>\n          <span class=\"time\">{{ formatTimeRange(appt) }}</span>\n        </div>\n        <tas-btn\n          *ngIf=\"shouldShowTasBtn(appt)\"\n          variant=\"teal\"\n          buttonLabel=\"Ingresar\"\n          [roomType]=\"appt.roomType\"\n          [entityId]=\"appt.entityId\"\n          [tenant]=\"tenant\"\n          [businessRole]=\"businessRole\"\n          [currentUser]=\"currentUser\"\n        ></tas-btn>\n      </div>\n    </div>\n  </div>\n</div>\n\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;gap:16px}.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"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+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", fromDate: "fromDate", toDate: "toDate" }, 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 && appointments.length === 0\">\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  <!-- Appointments list -->\n  <div class=\"card-content appointment-state\" *ngIf=\"!isLoading && appointments.length > 0\">\n    <div class=\"appointment-card\" *ngFor=\"let appt of appointments; trackBy: trackByAppointmentId\">\n      <div class=\"appointment-header\">\n        <tas-avatar [name]=\"getOtherParticipant(appt)\" [size]=\"48\"></tas-avatar>\n        <span class=\"doctor-name\">{{ getOtherParticipant(appt) }}</span>\n      </div>\n      <div class=\"appointment-details\">\n        <div class=\"date-time\">\n          <span class=\"date\">{{ formatAppointmentDate(appt) }}</span>\n          <span class=\"time\">{{ formatTimeRange(appt) }}</span>\n        </div>\n        <tas-btn\n          *ngIf=\"shouldShowTasBtn(appt)\"\n          variant=\"teal\"\n          buttonLabel=\"Ingresar\"\n          [roomType]=\"appt.roomType\"\n          [entityId]=\"appt.entityId\"\n          [tenant]=\"tenant\"\n          [businessRole]=\"businessRole\"\n          [currentUser]=\"currentUser\"\n        ></tas-btn>\n      </div>\n    </div>\n  </div>\n</div>\n\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;gap:16px}.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"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 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 && appointments.length === 0\">\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  <!-- Appointments list -->\n  <div class=\"card-content appointment-state\" *ngIf=\"!isLoading && appointments.length > 0\">\n    <div class=\"appointment-card\" *ngFor=\"let appt of appointments\">\n      <div class=\"appointment-header\">\n        <tas-avatar [name]=\"getOtherParticipant(appt)\" [size]=\"48\"></tas-avatar>\n        <span class=\"doctor-name\">{{ getOtherParticipant(appt) }}</span>\n      </div>\n      <div class=\"appointment-details\">\n        <div class=\"date-time\">\n          <span class=\"date\">{{ formatAppointmentDate(appt) }}</span>\n          <span class=\"time\">{{ formatTimeRange(appt) }}</span>\n        </div>\n        <tas-btn\n          *ngIf=\"shouldShowTasBtn(appt)\"\n          variant=\"teal\"\n          buttonLabel=\"Ingresar\"\n          [roomType]=\"appt.roomType\"\n          [entityId]=\"appt.entityId\"\n          [tenant]=\"tenant\"\n          [businessRole]=\"businessRole\"\n          [currentUser]=\"currentUser\"\n        ></tas-btn>\n      </div>\n    </div>\n  </div>\n</div>\n\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;gap:16px}.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"] }]
+            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 && appointments.length === 0\">\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  <!-- Appointments list -->\n  <div class=\"card-content appointment-state\" *ngIf=\"!isLoading && appointments.length > 0\">\n    <div class=\"appointment-card\" *ngFor=\"let appt of appointments; trackBy: trackByAppointmentId\">\n      <div class=\"appointment-header\">\n        <tas-avatar [name]=\"getOtherParticipant(appt)\" [size]=\"48\"></tas-avatar>\n        <span class=\"doctor-name\">{{ getOtherParticipant(appt) }}</span>\n      </div>\n      <div class=\"appointment-details\">\n        <div class=\"date-time\">\n          <span class=\"date\">{{ formatAppointmentDate(appt) }}</span>\n          <span class=\"time\">{{ formatTimeRange(appt) }}</span>\n        </div>\n        <tas-btn\n          *ngIf=\"shouldShowTasBtn(appt)\"\n          variant=\"teal\"\n          buttonLabel=\"Ingresar\"\n          [roomType]=\"appt.roomType\"\n          [entityId]=\"appt.entityId\"\n          [tenant]=\"tenant\"\n          [businessRole]=\"businessRole\"\n          [currentUser]=\"currentUser\"\n        ></tas-btn>\n      </div>\n    </div>\n  </div>\n</div>\n\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;gap:16px}.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: [{
@@ -2046,12 +2706,14 @@ TasUellSdkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         TasFloatingCallComponent,
         TasWaitingRoomComponent,
         TasAvatarComponent,
-        TasIncomingAppointmentComponent], imports: [CommonModule, FormsModule, NgbTooltipModule], exports: [TasButtonComponent,
+        TasIncomingAppointmentComponent,
+        TasFeedbackModalComponent], imports: [CommonModule, FormsModule, NgbTooltipModule], exports: [TasButtonComponent,
         TasVideocallComponent,
         TasFloatingCallComponent,
         TasWaitingRoomComponent,
         TasAvatarComponent,
-        TasIncomingAppointmentComponent] });
+        TasIncomingAppointmentComponent,
+        TasFeedbackModalComponent] });
 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,
@@ -2063,6 +2725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         TasWaitingRoomComponent,
                         TasAvatarComponent,
                         TasIncomingAppointmentComponent,
+                        TasFeedbackModalComponent,
                     ],
                     imports: [CommonModule, FormsModule, NgbTooltipModule],
                     exports: [
@@ -2072,6 +2735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         TasWaitingRoomComponent,
                         TasAvatarComponent,
                         TasIncomingAppointmentComponent,
+                        TasFeedbackModalComponent,
                     ],
                 }]
         }] });
@@ -2084,5 +2748,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AppointmentStatus, CallState, GeolocationService, RoomUserStatus, TAS_CONFIG, TAS_HTTP_CLIENT, TasAvatarComponent, TasBusinessRole, TasButtonComponent, TasFloatingCallComponent, TasIncomingAppointmentComponent, TasRoomType, TasService, TasSessionType, TasUellSdkModule, TasUserRole, TasUtilityService, TasVideocallComponent, TasWaitingRoomComponent, UserCallAction, UserStatus, VideoSessionStatus, ViewMode, WaitingRoomState };
+export { AppointmentStatus, CallState, FeedbackMotiveType, GeoStatus, GeolocationService, RoomUserStatus, TAS_CONFIG, TAS_HTTP_CLIENT, TasAvatarComponent, TasBusinessRole, TasButtonComponent, TasFeedbackModalComponent, TasFloatingCallComponent, TasIncomingAppointmentComponent, TasRoomType, TasService, TasSessionType, TasUellSdkModule, TasUserRole, TasUtilityService, TasVideocallComponent, TasWaitingRoomComponent, UserCallAction, UserGeoViewState, UserStatus, VideoSessionStatus, ViewMode, WaitingRoomState };
 //# sourceMappingURL=tas-uell-sdk.mjs.map