/* UTILITY CLASSES */
.fw-600 { font-weight: 600; }
.fs-7 { font-size: 0.75rem; }
.fs-8 { font-size: 0.65rem; }
.op-6 { opacity: 0.6; }
.op-8 { opacity: 0.8; }
.text-discreto { color: var(--text-muted); }

.w-40px { width: 40px; }
.minw-0 { min-width: 0; }

.btn-action {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    backdrop-filter: blur(8px) saturate(150%);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-action:hover {
    border-color: var(--glass-border-hover);
    background: var(--primary-glow);
    color: var(--text);
    box-shadow: 0 0 12px var(--primary-glow);
}

.btn-action.btn-danger-hover:hover {
    background: rgba(196, 74, 74, 0.1) !important;
    border-color: rgba(196, 74, 74, 0.2);
    color: var(--danger) !important;
    box-shadow: 0 0 12px rgba(196, 74, 74, 0.12) !important;
}

.alert-glass {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 12px 16px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
}

.alert-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
    pointer-events: none;
}

.list-group {
    background: transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.list-group-item {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    backdrop-filter: blur(8px) saturate(150%);
    border: 1px solid var(--glass-border);
    color: var(--text);
    margin-bottom: 1px;
    transition: all 0.2s;
}

.list-group-item:hover {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-hover);
}

.list-group-item.active {
    background: var(--primary-glow);
    border-color: var(--glass-border-hover);
    color: var(--primary);
}

.dropdown-menu {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-glass);
}

.dropdown-item {
    color: var(--text);
    transition: all 0.15s;
}

.dropdown-item:hover {
    background: var(--primary-glow);
    color: var(--text);
}

.pagination .page-link {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    backdrop-filter: blur(8px) saturate(150%);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    transition: all 0.2s;
}

.pagination .page-link:hover {
    border-color: var(--glass-border-hover);
    background: var(--primary-glow);
    color: var(--text);
}

.pagination .page-item.active .page-link {
    background: var(--primary-glow);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 6px var(--primary-glow);
}

.tooltip-inner {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-border);
    color: var(--text);
    font-size: 0.75rem;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--glass-border);
}

.spinner-glass {
    width: 40px;
    height: 40px;
    border: 3px solid var(--glass-border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   WOW MICRO-ANIMATIONS: INTERACTIVE CARD ZOOM & DETALLES
   Responsabilidad: Animación fluida de escala (zoom), brillo y toque interactivo en tarjetas
   ========================================================================== */

.glass-card,
.kanban-card,
.account-card,
.service-card,
.info-card,
.kpi-card {
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                background-color 0.3s ease !important;
    position: relative;
    will-change: transform, box-shadow;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .glass-card:hover,
    .kanban-card:hover,
    .account-card:hover,
    .service-card:hover,
    .info-card:hover,
    .kpi-card:hover {
        transform: translateY(-3px) !important;
        border-color: rgba(255, 255, 255, 0.35) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
        z-index: 5;
    }
    [data-theme="light"] .glass-card:hover,
    [data-theme="light"] .kanban-card:hover,
    [data-theme="light"] .account-card:hover,
    [data-theme="light"] .service-card:hover,
    [data-theme="light"] .info-card:hover,
    [data-theme="light"] .kpi-card:hover {
        border-color: rgba(15, 23, 42, 0.22) !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10) !important;
    }
}

/* Efecto visual de botón Ver Detalles en tarjetas de información */
.card-actions .btn {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
    .glass-card:hover .card-actions .btn,
    .kanban-card:hover .card-actions .btn,
    .account-card:hover .card-actions .btn {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
}

.progress-h28 { height: 28px; }
.w-max-250 { max-width: 250px; }
.w-max-200 { max-width: 200px; }
.w-max-180 { max-width: 180px; }
.empty-state-icon { font-size: 2rem; color: var(--text-muted); }
.scroll-h180 { max-height: 180px; overflow-y: auto; }
.w-0 { width: 0%; }
.icon-warning-lg { font-size: 2.5rem; color: var(--warning); }

/* Theme Toggle Switch Custom Style */
.theme-switch-card {
    transition: background 0.3s ease, border-color 0.3s ease;
    border: 1px solid var(--glass-border);
}
.theme-switch-card:hover {
    background: var(--glass-bg-hover, rgba(255, 255, 255, 0.08));
    border-color: var(--glass-border-hover, rgba(255, 255, 255, 0.2));
}

.theme-toggle-switch {
    width: 44px;
    height: 22px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    position: relative;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.theme-toggle-slider {
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Estado de modo claro para el switch */
[data-theme="light"] .theme-toggle-switch {
    background-color: #0d6efd;
}

[data-theme="light"] .theme-toggle-slider {
    transform: translateX(22px);
}