/**
 * DJ Browser Sorting Styles
 * Estilos para columnas ordenables del navegador DJ
 */

/* ==========================================
   COLUMNAS ORDENABLES - HEADER
   ========================================== */

.header-sortable {
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    position: relative;
    padding-right: 2px;
}

.header-sortable:hover {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

.header-sortable:active {
    transform: scale(0.95);
}

/* Indicador visual de columna activa */
.browser-table-header .header-sortable:has(+ .sort-active),
.browser-table-header .header-sortable[data-sorted="true"] {
    color: #a78bfa;
}

/* ==========================================
   ICONOS DE ORDENAMIENTO
   ========================================== */

/* Los iconos ↑↓ heredan el estilo del texto */
.header-sortable::after {
    margin-left: 2px;
    font-size: 9px;
    opacity: 0.8;
}

/* ==========================================
   ESTILOS POR COLUMNA
   ========================================== */

/* Título */
.browser-table-header .col-title.header-sortable:hover {
    color: #60a5fa;
}

/* Artista */
.browser-table-header .col-artist.header-sortable:hover {
    color: #34d399;
}

/* KEY */
.browser-table-header .col-key.header-sortable:hover {
    color: #a78bfa;
}

/* BPM */
.browser-table-header .col-bpm.header-sortable:hover {
    color: #22c55e;
}

/* Kbps */
.browser-table-header .col-kbps.header-sortable:hover {
    color: #f59e0b;
}

/* Tiempo */
.browser-table-header .col-time.header-sortable:hover {
    color: #ec4899;
}

/* ==========================================
   ANIMACIÓN DE ORDENAMIENTO
   ========================================== */

@keyframes sortPulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.browser-list.sorting {
    animation: sortPulse 0.3s ease;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    .header-sortable {
        font-size: 9px;
    }
}