tas-uell-sdk 0.2.0 → 0.3.0

package/fesm2020/tas-uell-sdk.mjs

@@ -1,15 +1,16 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Component, ChangeDetectionStrategy, Input, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
+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/platform-browser';
-import * as i4$1 from '@angular/common';
+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
@@ -95,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) {
@@ -578,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.
@@ -676,6 +718,9 @@ class TasService {
     get videoCallId() {
         return this.currentVideoCallId;
     }
+    get tenant() {
+        return this.currentTenant;
+    }
     /**
      * Connects to a TokBox video session
      */
@@ -888,6 +933,227 @@ 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.
@@ -988,11 +1254,12 @@ var UserGeoViewState;
     UserGeoViewState["DENIED"] = "DENIED";
 })(UserGeoViewState || (UserGeoViewState = {}));
 class TasVideocallComponent {
-    constructor(activeModal, tasService, geolocationService, sanitizer) {
+    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;
@@ -1016,6 +1283,7 @@ class TasVideocallComponent {
         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);
     }
@@ -1043,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();
     }
@@ -1168,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;
@@ -1195,8 +1494,9 @@ class TasVideocallComponent {
         // Owner left subscription - disconnect non-owners
         this.subscriptions.add(this.tasService.ownerHasLeft$.subscribe((hasLeft) => {
             if (hasLeft && !this.canAdmitUsers) { // Non-owner 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)
@@ -1382,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 }, { token: i4.DomSanitizer }], 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$1.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  <!-- 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.DomSanitizer }]; }, propDecorators: { sessionId: [{
+        }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }, { type: GeolocationService }, { type: i4$2.DomSanitizer }, { type: i1.NgbModal }]; }, propDecorators: { sessionId: [{
                 type: Input
             }], token: [{
                 type: Input
@@ -1436,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 = '';
@@ -1773,10 +2074,24 @@ class TasWaitingRoomComponent {
     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',
@@ -1800,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  <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        <p class=\"error-details\" *ngIf=\"errorMessage\">{{ errorMessage }}</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      </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-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)}.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}@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$1.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  <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        <p class=\"error-details\" *ngIf=\"errorMessage\">{{ errorMessage }}</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      </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-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)}.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}@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"] }]
+            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: [{
@@ -1827,9 +2142,6 @@ class TasButtonComponent {
         // Style customization
         this.variant = 'default';
         this.buttonLabel = 'Iniciar TAS';
-        // Skip status check - when true, button shows immediately without API call
-        // Useful when parent component already knows the appointment is valid
-        this.skipStatusCheck = false;
         this.isLoading = false;
         // Status check state
         this.isCheckingStatus = false;
@@ -1874,12 +2186,6 @@ class TasButtonComponent {
                 this.videoCallModalRef = null;
             }
         }));
-        // If skipStatusCheck is true, show button immediately without polling
-        if (this.skipStatusCheck) {
-            this.shouldShowButton = true;
-            this.isJoinable = true;
-            return;
-        }
         // Start status checking
         this.startStatusPolling();
     }
@@ -2001,7 +2307,7 @@ class TasButtonComponent {
     }
 }
 TasButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasButtonComponent, deps: [{ token: i1.NgbModal }, { token: TasService }, { token: TasUtilityService }], target: i0.ɵɵFactoryTarget.Component });
-TasButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasButtonComponent, selector: "tas-btn", inputs: { roomType: "roomType", entityId: "entityId", tenant: "tenant", businessRole: "businessRole", currentUser: "currentUser", variant: "variant", buttonLabel: "buttonLabel", skipStatusCheck: "skipStatusCheck" }, ngImport: i0, template: "<span\n  *ngIf=\"shouldShowButton\"\n  [ngbTooltip]=\"isDisabled && disabledReason ? disabledReason : null\"\n  container=\"body\"\n  placement=\"top\"\n  tooltipClass=\"tas-btn-tooltip\"\n>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary tas-btn\"\n    [class.tas-btn--teal]=\"variant === 'teal'\"\n    (click)=\"onClick()\"\n    [disabled]=\"isDisabled\"\n  >\n    <i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n    <span *ngIf=\"!isLoading\">{{ buttonLabel }}</span>\n    <span *ngIf=\"isLoading\">Processing...</span>\n  </button>\n</span>\n", styles: [":host{display:inline-block}.tas-btn{background-color:#ee316b!important;color:#fff!important;border-color:#ee316b!important;margin-right:24px;display:flex;padding:6px 14px;justify-content:center;align-items:center;gap:7px;flex-shrink:0;flex-grow:0}.tas-btn:disabled{background-color:#ccc!important;border-color:#ccc!important;cursor:not-allowed}.tas-btn:hover:not(:disabled){background-color:#d62a5f!important;border-color:#d62a5f!important}.tas-btn i{margin-right:5px}.tas-btn--teal{background-color:#0097a7!important;border-color:#0097a7!important;border-radius:24px;font-weight:500;margin-right:0;padding:6px 14px}.tas-btn--teal:hover:not(:disabled){background-color:#00838f!important;border-color:#00838f!important}\n"], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
+TasButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasButtonComponent, selector: "tas-btn", inputs: { roomType: "roomType", entityId: "entityId", tenant: "tenant", businessRole: "businessRole", currentUser: "currentUser", variant: "variant", buttonLabel: "buttonLabel" }, ngImport: i0, template: "<span\n  *ngIf=\"shouldShowButton\"\n  [ngbTooltip]=\"isDisabled && disabledReason ? disabledReason : null\"\n  container=\"body\"\n  placement=\"top\"\n  tooltipClass=\"tas-btn-tooltip\"\n>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary tas-btn\"\n    [class.tas-btn--teal]=\"variant === 'teal'\"\n    (click)=\"onClick()\"\n    [disabled]=\"isDisabled\"\n  >\n    <i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n    <span *ngIf=\"!isLoading\">{{ buttonLabel }}</span>\n    <span *ngIf=\"isLoading\">Processing...</span>\n  </button>\n</span>\n", styles: [":host{display:inline-block}.tas-btn{background-color:#ee316b!important;color:#fff!important;border-color:#ee316b!important;margin-right:24px;display:flex;padding:6px 14px;justify-content:center;align-items:center;gap:7px;flex-shrink:0;flex-grow:0}.tas-btn:disabled{background-color:#ccc!important;border-color:#ccc!important;cursor:not-allowed}.tas-btn:hover:not(:disabled){background-color:#d62a5f!important;border-color:#d62a5f!important}.tas-btn i{margin-right:5px}.tas-btn--teal{background-color:#0097a7!important;border-color:#0097a7!important;border-radius:24px;font-weight:500;margin-right:0;padding:6px 14px}.tas-btn--teal:hover:not(:disabled){background-color:#00838f!important;border-color:#00838f!important}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tas-btn', template: "<span\n  *ngIf=\"shouldShowButton\"\n  [ngbTooltip]=\"isDisabled && disabledReason ? disabledReason : null\"\n  container=\"body\"\n  placement=\"top\"\n  tooltipClass=\"tas-btn-tooltip\"\n>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary tas-btn\"\n    [class.tas-btn--teal]=\"variant === 'teal'\"\n    (click)=\"onClick()\"\n    [disabled]=\"isDisabled\"\n  >\n    <i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n    <span *ngIf=\"!isLoading\">{{ buttonLabel }}</span>\n    <span *ngIf=\"isLoading\">Processing...</span>\n  </button>\n</span>\n", styles: [":host{display:inline-block}.tas-btn{background-color:#ee316b!important;color:#fff!important;border-color:#ee316b!important;margin-right:24px;display:flex;padding:6px 14px;justify-content:center;align-items:center;gap:7px;flex-shrink:0;flex-grow:0}.tas-btn:disabled{background-color:#ccc!important;border-color:#ccc!important;cursor:not-allowed}.tas-btn:hover:not(:disabled){background-color:#d62a5f!important;border-color:#d62a5f!important}.tas-btn i{margin-right:5px}.tas-btn--teal{background-color:#0097a7!important;border-color:#0097a7!important;border-radius:24px;font-weight:500;margin-right:0;padding:6px 14px}.tas-btn--teal:hover:not(:disabled){background-color:#00838f!important;border-color:#00838f!important}\n"] }]
@@ -2019,8 +2325,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], buttonLabel: [{
                 type: Input
-            }], skipStatusCheck: [{
-                type: Input
             }] } });
 
 class TasFloatingCallComponent {
@@ -2031,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;
     }
@@ -2052,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
@@ -2179,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();
@@ -2200,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);
@@ -2214,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"
@@ -2254,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", "skipStatusCheck"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.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: [{
@@ -2330,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,
@@ -2347,6 +2725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         TasWaitingRoomComponent,
                         TasAvatarComponent,
                         TasIncomingAppointmentComponent,
+                        TasFeedbackModalComponent,
                     ],
                     imports: [CommonModule, FormsModule, NgbTooltipModule],
                     exports: [
@@ -2356,6 +2735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         TasWaitingRoomComponent,
                         TasAvatarComponent,
                         TasIncomingAppointmentComponent,
+                        TasFeedbackModalComponent,
                     ],
                 }]
         }] });
@@ -2368,5 +2748,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AppointmentStatus, CallState, GeoStatus, GeolocationService, RoomUserStatus, TAS_CONFIG, TAS_HTTP_CLIENT, TasAvatarComponent, TasBusinessRole, TasButtonComponent, TasFloatingCallComponent, TasIncomingAppointmentComponent, TasRoomType, TasService, TasSessionType, TasUellSdkModule, TasUserRole, TasUtilityService, TasVideocallComponent, TasWaitingRoomComponent, UserCallAction, UserGeoViewState, 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