/* =========================
   VARIABLES PORTAL
   ========================= */
:root {
    --portal-primary: #6366f1;
    --portal-secondary: #8b5cf6;
    --portal-cyan: #06b6d4;
}

/* =========================
   BACKGROUNDS
   ========================= */
.gradient-bg {
    background: linear-gradient(135deg,
            var(--portal-primary) 0%,
            var(--portal-secondary) 100%);
}

.bg-soft {
    background: radial-gradient(circle at top,
            #eef2ff 0%,
            #f8fafc 45%,
            #eef2ff 100%);
}

/* =========================
   GLASS / CARDS
   ========================= */
.glass {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.06);
}

.card-hover {
    transition: 0.25s ease;
}

.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 40px -16px rgba(2, 6, 23, 0.15);
}

/* =========================
   PROGRESS RINGS
   ========================= */
.ringtrack {
    stroke: #e5e7eb;
}

.ringfill {
    transition: stroke-dashoffset 0.4s ease;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* =========================
   PORTFOLIO / TABS
   ========================= */
.tab-btn {
    transition: 0.15s ease;
}

/* =========================
   TABLE STATES
   ========================= */
.row-mod {
    background-color: #fde68a;
}

.row-new {
    background-color: #a7f3d0;
}

/* =========================
   MODAL / PANEL
   ========================= */
body.modal-open,
body.panel-open {
    overflow: hidden;
}

/* Panel lateral slide-in */
#customerPanel.is-visible {
    display: block;
}

#customerPanel.is-visible #customerPanelOverlay {
    opacity: 1;
}

#customerPanel.is-visible #customerPanelContent {
    transform: translateX(0);
}

/* Panel tabs */
.panel-tab-btn {
    transition: all 0.15s ease;
}

.panel-tab-btn.active {
    background-color: #4f46e5;
    color: white;
}

/* =========================
   SMALL HELPERS
   ========================= */
.marker-label {
    position: absolute;
    transform: translateX(-50%);
    top: -1.6rem;
    font-size: 0.7rem;
    color: #334155;
}

/* =========================
   SWEETALERT2 ESTILO JUVIBOX
   ========================= */
.swal2-popup {
    border-radius: 1rem !important;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25) !important;
    font-family: 'Inter', sans-serif !important;
}

.swal2-title {
    font-size: 1.2rem !important;
    color: #1e1b4b !important;
    font-weight: 600 !important;
}

.swal2-html-container {
    color: #4b5563 !important;
    font-size: 0.95rem !important;
}

.swal2-confirm {
    background: linear-gradient(90deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    border-radius: 0.5rem !important;
    font-weight: 500 !important;
    padding: 0.6rem 1.4rem !important;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
    transition: all 0.2s ease-in-out;
}

.swal2-confirm:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.swal2-cancel {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-radius: 0.5rem !important;
    font-weight: 500 !important;
    padding: 0.6rem 1.4rem !important;
    transition: all 0.2s ease-in-out;
}

.swal2-cancel:hover {
    background: #e5e7eb !important;
}

.swal2-icon.swal2-warning {
    border-color: #facc15 !important;
    color: #eab308 !important;
}

/* =========================
   CALL DROPDOWN
   ========================= */
#call_dropdown_menu {
    animation: dropdownFadeIn 0.15s ease-out;
    transform-origin: top right;
}

#call_dropdown_menu.hidden {
    display: none;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* =========================
   COMMERCIAL ACT PANEL
   ========================= */
#commercial_act_panel {
    animation: actPanelSlideIn 0.25s ease-out;
}

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

/* Result option buttons */
.act-result-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: #334155;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    font-size: 0.75rem;
    min-height: 70px;
}

.act-result-option:hover {
    background: #475569;
    transform: translateY(-2px);
}

.act-result-option:has(input:checked) {
    background: linear-gradient(135deg, #10b981, #14b8a6);
    box-shadow: 0 0 0 2px #34d399, 0 4px 12px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
}

.act-result-option i {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

/* Small result option buttons */
.act-result-option-sm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.5rem 0.35rem;
    background: #334155;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    font-size: 0.65rem;
    min-height: 52px;
}

.act-result-option-sm:hover {
    background: #475569;
    transform: translateY(-1px);
}

.act-result-option-sm:has(input:checked) {
    background: linear-gradient(135deg, #10b981, #14b8a6);
    box-shadow: 0 0 0 2px #34d399, 0 4px 12px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

.act-result-option-sm i {
    font-size: 0.875rem;
    margin-bottom: 0.15rem;
}

/* Phone chips in act panel */
.act-phone-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #334155;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    color: white;
}

.act-phone-chip:hover {
    background: #475569;
}

.act-phone-chip.selected {
    background: linear-gradient(135deg, #10b981, #14b8a6);
    box-shadow: 0 0 0 2px #34d399;
}

.act-phone-chip i {
    opacity: 0.7;
}

/* Timer pulse animation */
@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

#act_timer {
    animation: timerPulse 2s ease-in-out infinite;
}