/* Fila Virtual UMA - Styles */

:root {
    --color-primary: #82A9BA;
    --color-primary-darker: #B2C13E;
    --color-text: #424242;
    --color-background: #F9F4E0;
    --color-dashboard-box: #D6D6D6;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text);
}

/* Animations */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Customer status borders */
.status-waiting {
    border-left: 4px solid var(--color-primary);
}

.status-calling {
    border-left: 4px solid #3b82f6;
    background-color: #eff6ff;
}

.status-serving {
    border-left: 4px solid var(--color-primary-darker);
}

.status-standby {
    border-left: 4px solid #64748b;
    background-color: #f1f5f9;
}

/* Reactivated customer animation */
.reactivated-customer {
    animation: pulse-reactivate 1.5s infinite;
}

@keyframes pulse-reactivate {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    70% {
        box-shadow: 0 0 0 7px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* Host view - Calling customer border pulse animation (green) */
.animate-pulse-border {
    animation: pulse-border 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-border {
    0%, 100% {
        border-left-color: #22c55e;
        border-left-width: 8px;
    }
    50% {
        border-left-color: #86efac;
        border-left-width: 12px;
    }
}

/* Host view - Reactivated customer border pulse animation (light blue) */
.animate-pulse-border-blue {
    animation: pulse-border-blue 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-border-blue {
    0%, 100% {
        border-left-color: #60a5fa;
        border-left-width: 8px;
    }
    50% {
        border-left-color: #93c5fd;
        border-left-width: 12px;
    }
}