.nav-link.active {
    background-color: rgba(59, 130, 246, 0.15);
    color: #fff;
}

.fade-in {
    animation: fadeIn 0.2s ease-in;
}

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

.status-activa { background-color: #fef3c7; color: #92400e; }
.status-pendiente { background-color: #dbeafe; color: #1e40af; }
.status-resuelta { background-color: #d1fae5; color: #065f46; }
.status-pending { background-color: #dbeafe; color: #1e40af; }
.status-syncing { background-color: #fef3c7; color: #92400e; }
.status-synced { background-color: #d1fae5; color: #065f46; }
.status-in_progress { background-color: #fef3c7; color: #92400e; }
.status-complete { background-color: #d1fae5; color: #065f46; }
.status-refreshing_in_progress { background-color: #e0e7ff; color: #3730a3; }
.status-error { background-color: #fee2e2; color: #991b1b; }
.status-queued { background-color: #e5e7eb; color: #374151; }
.status-started { background-color: #dbeafe; color: #1e40af; }
.status-ended { background-color: #d1fae5; color: #065f46; }
.status-failed { background-color: #fee2e2; color: #991b1b; }

input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

table th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

@keyframes pulse {
    from { height: 20%; opacity: 0.3; }
    to { height: 100%; opacity: 0.8; }
}

/* Tooltips personalizados para análisis IA */
.ai-tooltip {
    cursor: help;
}

/* Contenedor del tooltip con position fixed */
#ai-tooltip-container {
    position: fixed;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-line;
    max-width: 320px;
    min-width: 280px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 99999;
    font-weight: 500;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

#ai-tooltip-container.show {
    opacity: 1;
    transform: translateY(0);
}

#ai-tooltip-container::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #667eea;
}

@keyframes tooltipFadeIn {
    from { 
        opacity: 0; 
        transform: translateX(-50%) translateY(-4px);
    }
    to { 
        opacity: 1; 
        transform: translateX(-50%) translateY(-8px);
    }
}