/* ===============================================
   DJ MODULE - Professional Virtual DJ Interface
   =============================================== */

/* Variables */
:root {
    --dj-primary: #6366f1;
    --dj-accent: #818cf8;
    --dj-dark: #0a0a0f;
    --dj-surface: #16161f;
    --dj-surface-light: #1c1c28;
    --dj-neon-blue: #00d4ff;
    --dj-neon-pink: #ff00ff;
    --dj-neon-green: #00ff88;
    --dj-vinyl: #1a1a1a;
}

/* Animaciones */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
    }

    50% {
        box-shadow: 0 0 40px rgba(99, 102, 241, 0.8);
    }
}

@keyframes led-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ===============================================
   SPECTRUM VISUALIZER (Barras verticales animadas)
   =============================================== */
.spectrum-container {
    width: 52px;
    height: 100%;
    background: linear-gradient(180deg, #0a0a0f 0%, #12121a 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
}

.spectrum-left {
    border-right: 1px solid rgba(0, 212, 255, 0.2);
    box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.1);
}

.spectrum-right {
    border-left: 1px solid rgba(255, 0, 255, 0.2);
    box-shadow: inset 0 0 20px rgba(255, 0, 255, 0.1);
}

/* ===============================================
   PITCH FADER - Igual al Volume Fader
   =============================================== */
.pitch-fader {
    position: absolute;
    top: 58%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 100;
}

/* Asegurar visibilidad de controles pitch en desktop */
.pitch-controls-left,
.pitch-controls-right {
    z-index: 101;
    position: relative;
}

/* Deck A: pitch a la derecha */
.deck-a .pitch-fader {
    right: 20px;
}

/* Deck B: pitch a la izquierda */
.deck-b .pitch-fader {
    left: 20px;
}

.pitch-fader-left {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.pitch-fader:not(.pitch-fader-left) {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* Track del pitch - igual al fader-track */
.pitch-track {
    position: relative;
    width: 32px;
    height: 160px;
    background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 15%, #222222 50%, #2a2a2a 85%, #1a1a1a 100%);
    border-radius: 6px;
    border: 1px solid #0a0a0a;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.8),
        inset 0 2px 8px rgba(0, 0, 0, 0.9),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Input range específico para pitch - slider vertical nativo */
.pitch-track .fader-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 160px;
    margin: 0;
    padding: 0;
    cursor: ns-resize;
    z-index: 30;
    /* Método estándar para slider vertical - Chrome/Edge/Safari moderno */
    writing-mode: vertical-lr;
    direction: rtl;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    opacity: 0;
}

/* Thumb del pitch slider - WebKit (Chrome, Safari, Edge) */
.pitch-track .fader-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 16px;
    background: transparent;
    cursor: ns-resize;
    border: none;
    border-radius: 3px;
}

/* Thumb del pitch slider - Firefox */
.pitch-track .fader-input::-moz-range-thumb {
    width: 28px;
    height: 16px;
    background: transparent;
    cursor: ns-resize;
    border: none;
    border-radius: 3px;
}

/* Track del pitch slider - WebKit */
.pitch-track .fader-input::-webkit-slider-runnable-track {
    width: 32px;
    height: 160px;
    background: transparent;
    cursor: ns-resize;
}

/* Track del pitch slider - Firefox */
.pitch-track .fader-input::-moz-range-track {
    width: 32px;
    height: 160px;
    background: transparent;
    cursor: ns-resize;
}

/* Nivel del pitch - indicador LED bidireccional desde el centro */
.pitch-level {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 0%;
    transform: translateX(-50%);
    background: #00ff88;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
    transition: all 0.05s ease-out;
}

/* Punto central verde - siempre visible */
.pitch-track::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 4px;
    transform: translate(-50%, -50%);
    background: #00ff88;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.8);
    z-index: 5;
}

/* Knob del pitch - igual al fader-knob */
.pitch-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 16px;
    background: linear-gradient(180deg,
            #c0c0c0 0%,
            #a8a8a8 8%,
            #909090 15%,
            #787878 25%,
            #686868 35%,
            #606060 45%,
            #585858 55%,
            #505050 65%,
            #484848 75%,
            #404040 85%,
            #383838 92%,
            #303030 100%);
    border-radius: 3px;
    box-shadow:
        0 1px 0 #555555,
        0 2px 0 #444444,
        0 3px 0 #3a3a3a,
        0 4px 8px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    transition: top 0.05s ease-out;
}

/* LED del knob del pitch - cambia de color con el pitch */
.pitch-knob-led {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 4px;
    background: #00ff88;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.8);
    transition: all 0.05s ease-out;
}

/* Escala del pitch - a la derecha */
.pitch-scale-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 144px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    font-family: monospace;
}

/* Escala del pitch - a la izquierda */
.pitch-scale-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 144px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    font-family: monospace;
}

/* Botón PITCH / AUTO */
.pitch-auto-btn {
    background: transparent;
    border: none;
    font-size: 9px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pitch-auto-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.pitch-auto-btn.auto-active {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* Contenedor de controles pitch (flechas + texto) */
.pitch-controls-left,
.pitch-controls-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* =============================================
   FLECHAS PITCH - Triángulos Metálicos 3D
   ============================================= */
.pitch-arrow-btn {
    width: 0;
    height: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: transform 0.08s ease, filter 0.15s ease;
}

/* Ocultar SVG interno */
.pitch-arrow-btn svg {
    display: none;
}

/* ===== FLECHA ARRIBA ===== */
.pitch-arrow-btn.pitch-up {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid #3a3a3a;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.8)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.1));
}

/* Capa de brillo superior */
.pitch-arrow-btn.pitch-up::before {
    content: '';
    position: absolute;
    top: 2px;
    left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid;
    border-bottom-color: #707070;
    pointer-events: none;
}

/* Capa de reflejo highlight */
.pitch-arrow-btn.pitch-up::after {
    content: '';
    position: absolute;
    top: 3px;
    left: -3px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 5px solid;
    border-bottom-color: rgba(255, 255, 255, 0.25);
    pointer-events: none;
}

/* ===== FLECHA ABAJO ===== */
.pitch-arrow-btn.pitch-down {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #3a3a3a;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.8)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.1));
}

/* Capa de brillo */
.pitch-arrow-btn.pitch-down::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid;
    border-top-color: #707070;
    pointer-events: none;
}

/* Capa de reflejo */
.pitch-arrow-btn.pitch-down::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: -3px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid;
    border-top-color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

/* ===== ESTADO HOVER - Brillo metálico ===== */
.pitch-arrow-btn.pitch-up:hover {
    border-bottom-color: #505050;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
}

.pitch-arrow-btn.pitch-up:hover::before {
    border-bottom-color: #909090;
}

.pitch-arrow-btn.pitch-up:hover::after {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.pitch-arrow-btn.pitch-down:hover {
    border-top-color: #505050;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
}

.pitch-arrow-btn.pitch-down:hover::before {
    border-top-color: #909090;
}

.pitch-arrow-btn.pitch-down:hover::after {
    border-top-color: rgba(255, 255, 255, 0.35);
}

/* ===== ESTADO ACTIVE - Hundimiento ===== */
.pitch-arrow-btn.pitch-up:active {
    border-bottom-color: #252525;
    transform: translateY(2px) scale(0.95);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9));
}

.pitch-arrow-btn.pitch-up:active::before {
    border-bottom-color: #454545;
}

.pitch-arrow-btn.pitch-up:active::after {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.pitch-arrow-btn.pitch-down:active {
    border-top-color: #252525;
    transform: translateY(2px) scale(0.95);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9));
}

.pitch-arrow-btn.pitch-down:active::before {
    border-top-color: #454545;
}

.pitch-arrow-btn.pitch-down:active::after {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* ===== DECK A - Brillo CYAN ===== */
.deck-a .pitch-arrow-btn.pitch-up:hover {
    border-bottom-color: #006080;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(0, 212, 255, 0.6)) drop-shadow(0 0 4px rgba(0, 212, 255, 0.8));
}

.deck-a .pitch-arrow-btn.pitch-up:hover::before {
    border-bottom-color: #00b8e0;
}

.deck-a .pitch-arrow-btn.pitch-up:hover::after {
    border-bottom-color: rgba(102, 229, 255, 0.5);
}

.deck-a .pitch-arrow-btn.pitch-down:hover {
    border-top-color: #006080;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(0, 212, 255, 0.6)) drop-shadow(0 0 4px rgba(0, 212, 255, 0.8));
}

.deck-a .pitch-arrow-btn.pitch-down:hover::before {
    border-top-color: #00b8e0;
}

.deck-a .pitch-arrow-btn.pitch-down:hover::after {
    border-top-color: rgba(102, 229, 255, 0.5);
}

/* ===== DECK B - Brillo ROSA ===== */
.deck-b .pitch-arrow-btn.pitch-up:hover {
    border-bottom-color: #800080;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(255, 0, 255, 0.6)) drop-shadow(0 0 4px rgba(255, 0, 255, 0.8));
}

.deck-b .pitch-arrow-btn.pitch-up:hover::before {
    border-bottom-color: #e000e0;
}

.deck-b .pitch-arrow-btn.pitch-up:hover::after {
    border-bottom-color: rgba(255, 102, 255, 0.5);
}

.deck-b .pitch-arrow-btn.pitch-down:hover {
    border-top-color: #800080;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(255, 0, 255, 0.6)) drop-shadow(0 0 4px rgba(255, 0, 255, 0.8));
}

.deck-b .pitch-arrow-btn.pitch-down:hover::before {
    border-top-color: #e000e0;
}

.deck-b .pitch-arrow-btn.pitch-down:hover::after {
    border-top-color: rgba(255, 102, 255, 0.5);
}

/* =============================================
   PITCH VALUE DISPLAY - Indicador Digital
   ============================================= */
.pitch-value-display {
    position: absolute;
    bottom: -32px;
    left: 58%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
    white-space: nowrap;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.4);
    min-width: 50px;
    text-align: center;
}

/* Deck A - Cyan */
.deck-a .pitch-value-display {
    color: #00d4ff;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
    border-color: rgba(0, 212, 255, 0.3);
}

/* Deck B - Rosa */
.deck-b .pitch-value-display {
    color: #ff66ff;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
    border-color: rgba(255, 0, 255, 0.3);
    left: 40%;
}

/* Valor positivo */
.pitch-value-display.positive {
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.7);
}

/* Valor negativo */
.pitch-value-display.negative {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.7);
}

/* Valor cero */
.pitch-value-display.zero {
    color: #888;
    text-shadow: none;
}

.spectrum-canvas {
    width: 100%;
    height: 100%;
}

/* DJ Container */
.dj-container {
    background: linear-gradient(180deg, #0a0a0f 0%, #12121a 50%, #0a0a0f 100%);
    /* No usar min-height para no empujar el nav */
}

/* Navegación inferior - asegurar visibilidad */
body>nav {
    position: relative;
    z-index: 40;
    flex-shrink: 0;
}

/* ===============================================
   DECK LAYOUT - Estilo Metal Realista
   =============================================== */
.deck {
    /* Solo propiedades de layout - los estilos visuales vienen de los skins */
    border-radius: 10px;
    position: relative;
    overflow: visible;
    transition: all 0.3s ease;
    padding: 14px 10px 14px 10px;
    height: 100%;
    /* Fallback si no hay skin cargado */
    background: #1a1a1f;
    border: 1px solid #0f0f14;
}

/* Pseudo-elementos controlados por skins */
.deck::before,
.deck::after {
    content: '';
    position: absolute;
    z-index: 10;
}

/* Ranura del tornillo (cruz) - usando elementos adicionales */
.deck .screw-top-left,
.deck .screw-top-right,
.deck .screw-bottom-left,
.deck .screw-bottom-right {
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: 20;
}

/* Efecto hover metálico */
.deck:hover {
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.7),
        0 6px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        inset -1px 0 0 rgba(0, 0, 0, 0.2);
}

/* Drop zone styling */
.drop-zone.drag-over {
    border: 2px dashed var(--dj-neon-green) !important;
    background: rgba(0, 255, 136, 0.1) !important;
}

.drop-zone.drag-over::after {
    content: 'Soltar aqui';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 255, 136, 0.9);
    color: black;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 12px;
    z-index: 100;
    pointer-events: none;
}

/* ===============================================
   VINILO XL CON CARATULA
   =============================================== */
/* ============================================
   PLATO TECHNICS SL-1200 REALISTA
   ============================================ */

/* Plato metálico principal con puntos estroboscópicos */
.platter-xl {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    margin-top: 18px;
    /* Base metálica aluminio cepillado */
    background:
        /* Puntos estroboscópicos alrededor del borde */
        repeating-conic-gradient(from 0deg,
            #c0c0c0 0deg 2deg,
            transparent 2deg 10deg),
        /* Textura metálica cepillada */
        radial-gradient(circle at 50% 50%,
            #505050 0%,
            #404040 30%,
            #353535 60%,
            #2a2a2a 100%);
    box-shadow:
        /* Borde exterior biselado */
        0 0 0 4px #1a1a1a,
        0 0 0 5px #404040,
        0 0 0 6px #1a1a1a,
        /* Sombra profunda */
        0 8px 20px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.6),
        /* Brillo superior */
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

/* Anillo estroboscópico exterior */
.platter-xl::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
            rgba(200, 200, 200, 0.9) 0deg 1.5deg,
            rgba(40, 40, 40, 0.95) 1.5deg 10deg);
    mask: radial-gradient(circle, transparent 88%, black 89%, black 100%);
    -webkit-mask: radial-gradient(circle, transparent 88%, black 89%, black 100%);
}

/* Slipmat (fieltro) */
.platter-xl::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 50%;
    /* Textura de fieltro negro */
    background:
        radial-gradient(circle at 50% 50%,
            #1a1a1a 0%,
            #141414 50%,
            #0f0f0f 100%);
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.03);
}

/* Vinilo realista con surcos */
.vinyl-xl {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    z-index: 2;
    /* Surcos del vinilo - múltiples anillos concéntricos */
    background:
        /* Reflejo de luz realista */
        radial-gradient(ellipse 120% 60% at 30% 25%,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.05) 25%,
            transparent 50%),
        /* Surcos finos del vinilo */
        repeating-radial-gradient(circle at 50% 50%,
            #0a0a0a 0px,
            #1a1a1a 1px,
            #0f0f0f 1.5px,
            #151515 2px,
            #0a0a0a 2.5px),
        /* Color base del vinilo */
        radial-gradient(circle at 50% 50%,
            #1a1a1a 0%,
            #0f0f0f 40%,
            #0a0a0a 100%);
    box-shadow:
        /* Borde del vinilo */
        0 0 0 1px rgba(30, 30, 30, 0.8),
        /* Sombra interna */
        inset 0 0 30px rgba(0, 0, 0, 0.6),
        /* Brillo sutil del borde */
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
    transition: transform 0.05s linear;
    cursor: grab;
}

/* Efecto de brillo arcoíris del vinilo (reflexión de luz) */
.vinyl-xl::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background:
        /* Arcoíris holográfico del vinilo */
        conic-gradient(from 45deg at 50% 50%,
            transparent 0deg,
            rgba(255, 100, 100, 0.03) 30deg,
            rgba(255, 200, 100, 0.04) 60deg,
            rgba(100, 255, 100, 0.03) 90deg,
            rgba(100, 200, 255, 0.04) 120deg,
            rgba(200, 100, 255, 0.03) 150deg,
            transparent 180deg,
            rgba(255, 100, 100, 0.03) 210deg,
            rgba(255, 200, 100, 0.04) 240deg,
            rgba(100, 255, 100, 0.03) 270deg,
            rgba(100, 200, 255, 0.04) 300deg,
            rgba(200, 100, 255, 0.03) 330deg,
            transparent 360deg);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Reflejo de luz que rota con el vinilo */
.vinyl-xl::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 15%;
    width: 70%;
    height: 30%;
    border-radius: 50%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.02) 50%,
            transparent 100%);
    transform: rotate(-20deg);
    pointer-events: none;
}

/* Vinilo reproduciendo - efecto brillo activo */
.vinyl-xl.playing::before {
    opacity: 1;
}

.vinyl-xl.playing {
    animation: vinyl-spin 1.8s linear infinite;
    cursor: grabbing;
}

@keyframes vinyl-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Efecto scratch - vinilo tocado */
.vinyl-xl.scratching {
    animation: none;
    cursor: grabbing;
    box-shadow:
        0 0 0 1px rgba(30, 30, 30, 0.8),
        inset 0 0 30px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 200, 50, 0.3);
}

.vinyl-xl.scratching::before {
    opacity: 1;
    background:
        conic-gradient(from 45deg at 50% 50%,
            rgba(255, 200, 50, 0.1) 0deg,
            transparent 30deg,
            rgba(255, 200, 50, 0.15) 60deg,
            transparent 90deg,
            rgba(255, 200, 50, 0.1) 120deg,
            transparent 150deg,
            rgba(255, 200, 50, 0.15) 180deg,
            transparent 210deg,
            rgba(255, 200, 50, 0.1) 240deg,
            transparent 270deg,
            rgba(255, 200, 50, 0.15) 300deg,
            transparent 330deg,
            rgba(255, 200, 50, 0.1) 360deg);
}

/* ============================================
   ETIQUETA CENTRAL DEL VINILO (LABEL)
   ============================================ */

/* Contenedor de la etiqueta/carátula */
.vinyl-cover-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 5;
    /* Borde de la etiqueta */
    border: 2px solid #2a2a2a;
    box-shadow:
        /* Sombra de la etiqueta */
        0 2px 8px rgba(0, 0, 0, 0.5),
        /* Borde interno */
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        /* Brillo sutil */
        inset 0 1px 2px rgba(255, 255, 255, 0.15);
    /* Efecto papel/cartón de etiqueta */
    background: linear-gradient(135deg,
            #3a3a3a 0%,
            #2a2a2a 50%,
            #202020 100%);
}

/* Deck A - borde cyan */
.deck:first-of-type .vinyl-cover-container,
.deck-a .vinyl-cover-container {
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(99, 102, 241, 0.2),
        inset 0 0 0 1px rgba(99, 102, 241, 0.2);
}

/* Deck B - borde rosa */
.vinyl-cover-container.vinyl-cover-b {
    border-color: rgba(236, 72, 153, 0.6);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(236, 72, 153, 0.2),
        inset 0 0 0 1px rgba(236, 72, 153, 0.2);
}

/* Imagen de carátula */
.vinyl-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    /* Efecto de etiqueta de vinilo */
    filter: saturate(0.9) contrast(1.05);
}

/* Agujero central del vinilo (spindle hole) */
.vinyl-cover-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    z-index: 10;
    /* Spindle metálico */
    background:
        radial-gradient(circle at 30% 30%,
            #909090 0%,
            #606060 40%,
            #404040 70%,
            #303030 100%);
    border: 1px solid #202020;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Anillo decorativo alrededor del agujero */
.vinyl-cover-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    z-index: 9;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}

/* ============================================
   PANTALLA DIGITAL CDJ - LCD CON EFECTO VIDRIO
   ============================================ */

.cdj-screen {
    width: 100%;
    height: 85px;
    position: relative;
    border-radius: 6px;
    overflow: visible;
    margin-bottom: 4px;
    /* Marco exterior metálico */
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid #0a0a0a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.5),
        0 0 0 1px #333;
}

/* Efecto de vidrio sobre la pantalla */
.screen-glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
    /* Reflejo de vidrio */
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.05) 30%,
            transparent 50%,
            transparent 100%);
    /* Brillo superior */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.screen-glass::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
}

/* Contenido de la pantalla */
.screen-content {
    position: relative;
    z-index: 5;
    height: 100%;
    padding: 10px 6px 4px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Fondo LCD oscuro con brillo */
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 50, 80, 0.3) 0%, transparent 60%),
        linear-gradient(180deg, #0a1520 0%, #050a10 100%);
}

/* Fila superior: DECK | Título/Artista | LED */
.screen-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.deck-label {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 8px currentColor;
    flex-shrink: 0;
}

.deck-a .deck-label {
    color: #00d4ff;
}

.deck-b .deck-label {
    color: #ff00ff;
}

/* Track info en fila superior */
.screen-track {
    flex: 1;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.screen-track .track-title {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.screen-track .track-artist {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 9px;
    color: #00d4ff;
    text-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fila inferior: BPM | TIME | REMAIN | TAP */
.screen-row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}

/* BPM en pantalla */
.screen-bpm {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    color: #ffcc00;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.7);
    letter-spacing: 0.5px;
    min-width: 32px;
}

.time-current,
.time-remain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.time-label {
    font-family: 'Arial', sans-serif;
    font-size: 6px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.time-display {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: var(--dj-neon-blue);
    text-shadow: 0 0 5px rgba(0, 212, 255, 0.4);
}

.deck-b .time-display {
    color: var(--dj-neon-pink);
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.4);
}

/* Botón TAP en pantalla - Estilo goma/caucho redondo */
.screen-tap-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-family: 'Arial Black', sans-serif;
    font-size: 7px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Base del botón - goma oscura con anillos */
    background:
        radial-gradient(circle at 50% 50%, transparent 30%, rgba(40, 40, 40, 0.5) 32%, transparent 34%),
        radial-gradient(circle at 50% 50%, transparent 50%, rgba(40, 40, 40, 0.4) 52%, transparent 54%),
        radial-gradient(circle at 50% 50%, transparent 70%, rgba(50, 50, 50, 0.3) 72%, transparent 74%),
        radial-gradient(circle at 50% 30%, rgba(100, 100, 100, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, #353535 0%, #252525 40%, #1a1a1a 70%, #101010 100%);
    /* Borde exterior grueso */
    border: 3px solid #2a2a2a;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 0 1px #1a1a1a;
    transition: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.screen-tap-btn:hover {
    color: #bbb;
    border-color: #333;
}

.screen-tap-btn:active,
.screen-tap-btn.tapping {
    /* Centro se hunde - efecto de presión */
    background:
        radial-gradient(circle at 50% 50%, transparent 30%, rgba(30, 30, 30, 0.6) 32%, transparent 34%),
        radial-gradient(circle at 50% 50%, transparent 50%, rgba(30, 30, 30, 0.5) 52%, transparent 54%),
        radial-gradient(circle at 50% 50%, transparent 70%, rgba(40, 40, 40, 0.4) 72%, transparent 74%),
        radial-gradient(circle at 50% 60%, rgba(60, 60, 60, 0.2) 0%, transparent 30%),
        radial-gradient(circle at 50% 50%, #252525 0%, #1a1a1a 40%, #101010 70%, #080808 100%);
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.7),
        inset 0 -1px 1px rgba(255, 255, 255, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 0 0 1px #151515;
    border-color: #222;
    color: #777;
    text-shadow: none;
    padding-top: 2px;
}

/* TAP Container con LED indicador */
.tap-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* LED indicador de TAP activo */
.tap-led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    /* LED apagado */
    background: radial-gradient(circle at 30% 30%, #444 0%, #222 50%, #111 100%);
    border: 1px solid #333;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.5),
        0 1px 1px rgba(255, 255, 255, 0.05);
}

.tap-led:hover {
    border-color: #555;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 5px rgba(255, 255, 255, 0.1);
}

/* LED activo - brilla en verde */
.tap-led.active {
    background: radial-gradient(circle at 30% 30%, #7fff7f 0%, #00ff00 40%, #00cc00 70%, #009900 100%);
    border-color: #00aa00;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        0 0 8px rgba(0, 255, 0, 0.8),
        0 0 15px rgba(0, 255, 0, 0.4),
        0 0 25px rgba(0, 255, 0, 0.2);
    animation: led-pulse 1.5s ease-in-out infinite;
}

@keyframes led-pulse {

    0%,
    100% {
        box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.4),
            0 0 8px rgba(0, 255, 0, 0.8),
            0 0 15px rgba(0, 255, 0, 0.4);
    }

    50% {
        box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.4),
            0 0 12px rgba(0, 255, 0, 1),
            0 0 20px rgba(0, 255, 0, 0.6),
            0 0 30px rgba(0, 255, 0, 0.3);
    }
}

/* Indicador visual en el botón TAP cuando su LED está activo */
.tap-container:has(.tap-led.active) .screen-tap-btn {
    color: #0f0;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.deck-a .time-elapsed {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
}

.deck-a .time-remaining {
    color: #ff6b6b;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.6);
}

.deck-b .time-elapsed {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
}

.deck-b .time-remaining {
    color: #ff6b6b;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.6);
}

/* Track info con scroll */
.track-title-scroll,
.track-artist-scroll {
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
    text-align: center;
}

.screen-track .track-title {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
    display: block;
    line-height: 1.3;
}

.screen-track .track-artist {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 9px;
    color: #00d4ff;
    text-shadow: 0 0 6px rgba(0, 212, 255, 0.6);
    display: block;
    line-height: 1.2;
}

/* Animación de scroll para títulos largos */
.track-title-scroll.scrolling .track-title,
.track-artist-scroll.scrolling .track-artist {
    animation: text-scroll 8s linear infinite;
}

@keyframes text-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Status indicador de deck (On/Off) */
.deck-status {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(100, 100, 100, 0.3);
    color: #666;
    letter-spacing: 0.5px;
}

.deck-status.on {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

.deck-status.playing {
    animation: status-pulse 1s ease-in-out infinite;
}

@keyframes status-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

@keyframes led-pulse {

    0%,
    100% {
        box-shadow: 0 0 6px #00ff88, 0 0 12px rgba(0, 255, 136, 0.5);
    }

    50% {
        box-shadow: 0 0 10px #00ff88, 0 0 20px rgba(0, 255, 136, 0.8);
    }
}

/* ============================================
   TONEARM PROFESIONAL ESTILO TECHNICS
   ============================================ */

/* Contenedor del ensamblaje del tonearm */
.tonearm-assembly {
    position: absolute;
    top: 18px;
    z-index: 10;
    width: 80px;
    height: 30px;
}

/* Posición tonearm izquierdo (Deck A) */
.tonearm-assembly.tonearm-left {
    right: -15px;
}

/* Posición tonearm derecho (Deck B) */
.tonearm-assembly.tonearm-right {
    left: -15px;
}

/* Base fija del tonearm - NO se mueve */
.tonearm-base {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    z-index: 12;
    /* Base metálica con detalles */
    background:
        radial-gradient(circle at 35% 35%,
            #909090 0%,
            #707070 30%,
            #505050 60%,
            #404040 80%,
            #303030 100%);
    border: 2px solid #252525;
    box-shadow:
        0 0 0 1px #404040,
        0 3px 6px rgba(0, 0, 0, 0.5),
        inset 0 2px 3px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.tonearm-left .tonearm-base {
    right: 0;
}

.tonearm-right .tonearm-base {
    left: 0;
}

/* Brazo móvil del tonearm - SE MUEVE */
.tonearm-arm {
    position: absolute;
    width: 65px;
    height: 5px;
    top: 50%;
    z-index: 11;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Brazo tubular metálico */
    background:
        linear-gradient(180deg,
            #808080 0%,
            #c0c0c0 15%,
            #a0a0a0 30%,
            #707070 50%,
            #505050 70%,
            #606060 85%,
            #707070 100%);
    border-radius: 3px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Headshell (cabeza con aguja) */
.tonearm-arm::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 14px;
    height: 10px;
    z-index: 6;
    background:
        linear-gradient(180deg,
            #909090 0%,
            #707070 30%,
            #606060 50%,
            #505050 70%,
            #404040 100%);
    border-radius: 2px 2px 1px 1px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
    clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
}

/* Deck A - brazo a la derecha, pivote en right */
/* Posición inactiva: vertical (preparado para nuevo vinilo) */
.tonearm-left .tonearm-arm {
    right: 8px;
    transform-origin: right center;
    transform: translateY(-50%) rotate(-75deg);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tonearm-left .tonearm-arm::after {
    left: -8px;
    transform: translateY(-50%) rotate(8deg);
}

/* Deck B - brazo a la izquierda, pivote en left */
/* Posición inactiva: vertical (preparado para nuevo vinilo) */
.tonearm-right .tonearm-arm {
    left: 8px;
    transform-origin: left center;
    transform: translateY(-50%) rotate(75deg);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tonearm-right .tonearm-arm::after {
    right: -8px;
    transform: translateY(-50%) rotate(-8deg);
}

/* Tonearm activo - sobre el disco con movimiento realista */
.tonearm-assembly.active.tonearm-left .tonearm-arm {
    transform: translateY(-50%) rotate(-8deg);
    animation: tonearm-wobble-left 3.5s ease-in-out infinite;
}

.tonearm-assembly.active.tonearm-right .tonearm-arm {
    transform: translateY(-50%) rotate(8deg);
    animation: tonearm-wobble-right 3.5s ease-in-out infinite;
}

/* Animación realista del brazo - simula ondulaciones del vinilo */
@keyframes tonearm-wobble-left {
    0% {
        transform: translateY(-50%) rotate(-8deg);
    }

    8% {
        transform: translateY(calc(-50% - 1.5px)) rotate(-6.5deg);
    }

    18% {
        transform: translateY(calc(-50% + 2px)) rotate(-9deg);
    }

    28% {
        transform: translateY(calc(-50% - 1px)) rotate(-7deg);
    }

    40% {
        transform: translateY(calc(-50% + 1.5px)) rotate(-9.5deg);
    }

    52% {
        transform: translateY(calc(-50% - 2px)) rotate(-6deg);
    }

    65% {
        transform: translateY(calc(-50% + 1px)) rotate(-10deg);
    }

    78% {
        transform: translateY(calc(-50% - 1.5px)) rotate(-7.5deg);
    }

    88% {
        transform: translateY(calc(-50% + 1px)) rotate(-8.5deg);
    }

    100% {
        transform: translateY(-50%) rotate(-8deg);
    }
}

@keyframes tonearm-wobble-right {
    0% {
        transform: translateY(-50%) rotate(8deg);
    }

    8% {
        transform: translateY(calc(-50% - 1.5px)) rotate(6.5deg);
    }

    18% {
        transform: translateY(calc(-50% + 2px)) rotate(9deg);
    }

    28% {
        transform: translateY(calc(-50% - 1px)) rotate(7deg);
    }

    40% {
        transform: translateY(calc(-50% + 1.5px)) rotate(9.5deg);
    }

    52% {
        transform: translateY(calc(-50% - 2px)) rotate(6deg);
    }

    65% {
        transform: translateY(calc(-50% + 1px)) rotate(10deg);
    }

    78% {
        transform: translateY(calc(-50% - 1.5px)) rotate(7.5deg);
    }

    88% {
        transform: translateY(calc(-50% + 1px)) rotate(8.5deg);
    }

    100% {
        transform: translateY(-50%) rotate(8deg);
    }
}


/* ===============================================
   TRACK MARQUEE (Titulo animado)
   =============================================== */
.track-marquee-container {
    height: 20px;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    border: none;
    position: relative;
    box-shadow: none;
    transition: text-shadow 0.05s ease;
    display: flex;
    align-items: center;
    max-width: 65%;
}

.deck-a .track-marquee-container {
    /* Sin borde ni sombra */
}

/* Efecto de brillo al ritmo de la musica - solo texto */
.deck-a .track-marquee-container.glow .track-title {
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.8), 0 0 15px rgba(0, 212, 255, 0.5);
}

.deck-b .track-marquee-container.glow .track-title {
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.8), 0 0 15px rgba(255, 0, 255, 0.5);
}

/* Efecto glow para pantalla CDJ */
.deck-a .track-title-scroll.glow .track-title {
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.9), 0 0 15px rgba(0, 212, 255, 0.6);
}

.deck-b .track-title-scroll.glow .track-title {
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.9), 0 0 15px rgba(255, 0, 255, 0.6);
}

/* Animación marquee para pantalla CDJ */
.track-title-scroll.animate .track-title,
.track-artist-scroll.animate .track-artist {
    animation: cdj-marquee 10s linear infinite;
}

@keyframes cdj-marquee {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(0);
    }

    90% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.track-marquee {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 0 12px;
    height: 100%;
    font-size: 11px;
}

.track-marquee.animate {
    animation: marquee 10s linear infinite;
}

.track-marquee .track-title {
    color: white;
    font-weight: 500;
}

.track-marquee .track-separator {
    color: rgba(255, 255, 255, 0.3);
}

.track-marquee .track-artist {
    color: rgba(255, 255, 255, 0.6);
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Hover pausa la animación */
.track-marquee-container:hover .track-marquee {
    animation-play-state: paused;
}

/* Deck B colores */
.deck-b .track-marquee-container {
    /* Sin borde ni sombra */
}

/* Track Title (legacy) */
.track-title {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===============================================
   MIXER CENTER
   =============================================== */
.mixer-center {
    background: linear-gradient(180deg, #14141c 0%, #0c0c12 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    overflow: visible;
}

/* BPM Box */
.bpm-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 10px;
    border-radius: 6px;
    min-width: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bpm-box.bpm-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.bpm-box.bpm-clickable:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
    transform: scale(1.05);
}

.bpm-box .bpm-value {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: var(--dj-neon-green);
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

/* TAP Tempo Button */
.tap-btn {
    padding: 2px 8px;
    font-size: 9px;
    font-weight: bold;
    background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tap-btn:hover {
    background: linear-gradient(145deg, #2a2a4e, #1a1a2e);
    border-color: rgba(99, 102, 241, 0.5);
    color: #fff;
}

.tap-btn:active,
.tap-btn.tapping {
    transform: scale(0.95);
    background: linear-gradient(145deg, #6366f1, #4f46e5);
    border-color: #6366f1;
    color: #fff;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
}

/* BPM Column Colors */
.col-bpm.bpm-empty {
    color: #ef4444;
    opacity: 0.8;
}

.col-bpm.bpm-saved {
    color: #22c55e;
    font-weight: 600;
}

/* BPM Confidence Levels */
/* Alta confianza >= 90% - Verde */
.col-bpm.bpm-conf-high {
    color: #22c55e;
    font-weight: 600;
}

/* Media confianza 70-89% - Rosado */
.col-bpm.bpm-conf-medium {
    color: #f472b6;
    font-weight: 600;
}

/* Baja confianza 50-69% - Naranja */
.col-bpm.bpm-conf-low {
    color: #f59e0b;
    font-weight: 600;
}

/* Muy baja confianza < 50% - Rojo */
.col-bpm.bpm-conf-very-low {
    color: #ef4444;
    font-weight: 600;
}

/* Legacy: BPM con baja confianza (< 90%) - color rosado */
.col-bpm.bpm-low-confidence,
.bpm-value.bpm-low-confidence,
.bpm-low-confidence {
    color: #f472b6;
    background: rgba(244, 114, 182, 0.15);
    border-radius: 3px;
    padding: 1px 4px;
}

/* Header clickeable para búsqueda masiva */
.header-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 2px 4px;
    border-radius: 4px;
}

.header-clickable:hover {
    background: rgba(139, 92, 246, 0.3);
    color: #a78bfa;
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

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

/* === DECK INDICATORS EN BROWSER === */

/* Fila en Deck A - Verde fosforescente */
.browser-row.in-deck-a {
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.15) 0%, transparent 100%) !important;
    border-left: 3px solid #00ff88 !important;
}

.browser-row.in-deck-a .col-title {
    color: #00ff88 !important;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

/* Fila en Deck B - Violeta fosforescente */
.browser-row.in-deck-b {
    background: linear-gradient(90deg, rgba(255, 0, 255, 0.15) 0%, transparent 100%) !important;
    border-left: 3px solid #ff00ff !important;
}

.browser-row.in-deck-b .col-title {
    color: #ff00ff !important;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
}

/* Indicadores A, B, ✓ */
.deck-indicator,
.played-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    flex-shrink: 0;
}

.deck-a-indicator {
    background: #00ff88;
    color: #000;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
}

.deck-b-indicator {
    background: #ff00ff;
    color: #fff;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.8);
}

.played-indicator {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 9px;
}

/* EQ Group */
.eq-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* EQ Knob Small */
/* ==========================================
   PERILLAS EQ ESTILO PROFESIONAL ALLEN & HEATH
   ========================================== */
.eq-knob-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;

    /* Efecto metálico biselado 3D */
    background:
        radial-gradient(ellipse at 30% 20%,
            #6a6a6a 0%,
            #4a4a4a 20%,
            #3a3a3a 40%,
            #2a2a2a 60%,
            #1a1a1a 100%);
    border: 2px solid #0a0a0a;
    box-shadow:
        /* Borde exterior metálico */
        0 0 0 1px #303030,
        /* Sombra profunda */
        0 4px 8px rgba(0, 0, 0, 0.6),
        /* Bisel superior */
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        /* Bisel inferior */
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
}

/* Indicador de posición - línea blanca */
.eq-knob-sm::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 10px;
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #e0e0e0 50%,
            #c0c0c0 100%);
    border-radius: 1.5px;
    box-shadow:
        0 0 4px rgba(255, 255, 255, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Anillo decorativo central */
.eq-knob-sm::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            #2a2a2a 0%,
            #1a1a1a 60%,
            #0a0a0a 100%);
    border: 1px solid #0a0a0a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}

.eq-knob-sm:hover {
    background:
        radial-gradient(ellipse at 30% 20%,
            #7a7a7a 0%,
            #5a5a5a 20%,
            #4a4a4a 40%,
            #3a3a3a 60%,
            #2a2a2a 100%);
    box-shadow:
        0 0 0 1px #404040,
        0 4px 8px rgba(0, 0, 0, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(99, 102, 241, 0.3);
}

.eq-knob-sm:active {
    transform: scale(0.95);
}

/* EQ Column (vertical layout) */
.eq-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* EQ Column Vertical - Para mixer central reorganizado */
.eq-column-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Volume Knob Small - Perilla de volumen profesional */
.vol-knob-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 4px;

    /* Efecto metálico 3D con anillos concéntricos */
    background:
        radial-gradient(ellipse at 30% 20%,
            #707070 0%,
            #505050 20%,
            #404040 40%,
            #303030 60%,
            #202020 100%);
    border: 2px solid #0a0a0a;
    box-shadow:
        0 0 0 1px #353535,
        0 4px 10px rgba(0, 0, 0, 0.7),
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -3px 6px rgba(0, 0, 0, 0.5);
}

/* Indicador del volumen - marca grande */
.vol-knob-sm::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 12px;
    background:
        linear-gradient(180deg,
            #00ff88 0%,
            #00cc6a 50%,
            #009944 100%);
    border-radius: 2px;
    box-shadow:
        0 0 6px rgba(0, 255, 136, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Centro de la perilla */
.vol-knob-sm::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            #2a2a2a 0%,
            #1a1a1a 60%,
            #0a0a0a 100%);
    border: 1px solid #050505;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
}

.vol-knob-sm:hover {
    background:
        radial-gradient(ellipse at 30% 20%,
            #808080 0%,
            #606060 20%,
            #505050 40%,
            #404040 60%,
            #303030 100%);
    box-shadow:
        0 0 0 1px #454545,
        0 4px 10px rgba(0, 0, 0, 0.7),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -3px 6px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(0, 255, 136, 0.3);
}

.vol-knob-sm:active {
    transform: scale(0.95);
}

/* ===============================================
   CHANNEL FADER - Fader de volumen 3D realista
   Colores: gris, negro, plateado con sombras y reflejos
   =============================================== */
.channel-fader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: relative;
}

/* Contenedor para poner escala a la izquierda de la barra */
.fader-row-reverse {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
}

/* Cuando la escala está dentro de fader-row-reverse, quitar position absolute */
.fader-row-reverse .fader-scale {
    position: relative;
    right: auto;
    top: auto;
}

.fader-label {
    font-size: 11px;
    font-weight: bold;
    text-shadow: 0 0 10px currentColor;
    letter-spacing: 1px;
}

/* Base del fader - carcasa metálica */
.fader-track {
    position: relative;
    width: 32px;
    height: 110px;
    background: linear-gradient(90deg,
            #1a1a1a 0%,
            #2a2a2a 15%,
            #222222 50%,
            #2a2a2a 85%,
            #1a1a1a 100%);
    border-radius: 6px;
    border: 1px solid #0a0a0a;
    box-shadow:
        /* Sombra exterior profunda */
        0 4px 12px rgba(0, 0, 0, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.6),
        /* Borde plateado superior */
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        /* Profundidad interior */
        inset 0 -2px 8px rgba(0, 0, 0, 0.9),
        inset 2px 0 6px rgba(0, 0, 0, 0.5),
        inset -2px 0 6px rgba(0, 0, 0, 0.5);
}

/* Ranura central del fader - canal donde desliza */
.fader-groove {
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 8px;
    width: 6px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
            #050505 0%,
            #0a0a0a 20%,
            #151515 50%,
            #0a0a0a 80%,
            #050505 100%);
    border-radius: 3px;
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 1),
        inset 1px 0 4px rgba(0, 0, 0, 0.8),
        inset -1px 0 4px rgba(0, 0, 0, 0.8),
        0 0 1px rgba(255, 255, 255, 0.05);
}

/* Indicador de nivel LED verde */
.fader-level {
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 3px;
    height: 0%;
    max-height: calc(100% - 16px);
    transform: translateX(-50%);
    background: linear-gradient(180deg,
            #00ff88 0%,
            #00dd77 50%,
            #00bb66 100%);
    border-radius: 2px;
    box-shadow:
        0 0 8px rgba(0, 255, 136, 0.7),
        0 0 4px rgba(0, 255, 136, 0.5);
    transition: height 0.03s linear;
    z-index: 1;
}

/* Input range invisible - slider vertical */
.fader-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ns-resize;
    z-index: 20;
    /* Slider vertical estándar moderno */
    writing-mode: vertical-lr;
    direction: rtl;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

/* Thumb del fader - WebKit */
.fader-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 16px;
    background: transparent;
    cursor: ns-resize;
    border: none;
}

/* Thumb del fader - Firefox */
.fader-input::-moz-range-thumb {
    width: 28px;
    height: 16px;
    background: transparent;
    cursor: ns-resize;
    border: none;
}

/* Perilla del fader - Metal cepillado 3D */
.fader-knob {
    position: absolute;
    left: 50%;
    bottom: 75%;
    transform: translate(-50%, 50%);
    width: 28px;
    height: 16px;
    /* Degradado plateado/gris metálico */
    background: linear-gradient(180deg,
            #c0c0c0 0%,
            #a8a8a8 8%,
            #909090 15%,
            #787878 25%,
            #686868 35%,
            #606060 45%,
            #585858 55%,
            #505050 65%,
            #484848 75%,
            #404040 85%,
            #383838 92%,
            #303030 100%);
    border-radius: 4px;
    /* Bordes para efecto 3D */
    border-top: 1px solid #d0d0d0;
    border-left: 1px solid #a0a0a0;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #202020;
    /* Sombras múltiples para profundidad */
    box-shadow:
        /* Relieve inferior (efecto escalón 3D) */
        0 1px 0 #505050,
        0 2px 0 #404040,
        0 3px 0 #353535,
        0 4px 0 #2a2a2a,
        /* Sombra proyectada */
        0 6px 12px rgba(0, 0, 0, 0.7),
        0 3px 6px rgba(0, 0, 0, 0.5),
        /* Reflejos internos */
        inset 0 2px 3px rgba(255, 255, 255, 0.25),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4);
    cursor: ns-resize;
    pointer-events: none;
    z-index: 10;
    transition: bottom 0.02s linear;
}

/* Línea indicadora central - LED brillante */
.fader-knob-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(0, 255, 136, 0.3) 0%,
            #00ff88 30%,
            #00ffaa 50%,
            #00ff88 70%,
            rgba(0, 255, 136, 0.3) 100%);
    border-radius: 1px;
    box-shadow:
        0 0 6px rgba(0, 255, 136, 0.9),
        0 0 3px rgba(0, 255, 136, 0.6);
}

/* Escala numérica lateral */
.fader-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 144px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    position: absolute;
    right: -16px;
    top: 25px;
    font-family: monospace;
}

/* === EFECTOS HOVER === */
.fader-track:hover {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(0, 255, 136, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 8px rgba(0, 0, 0, 0.9),
        inset 2px 0 6px rgba(0, 0, 0, 0.5),
        inset -2px 0 6px rgba(0, 0, 0, 0.5);
}

.fader-track:hover .fader-knob {
    background: linear-gradient(180deg,
            #d0d0d0 0%,
            #b8b8b8 8%,
            #a0a0a0 15%,
            #888888 25%,
            #787878 35%,
            #707070 45%,
            #686868 55%,
            #606060 65%,
            #585858 75%,
            #505050 85%,
            #484848 92%,
            #404040 100%);
    box-shadow:
        0 1px 0 #606060,
        0 2px 0 #505050,
        0 3px 0 #454545,
        0 4px 0 #3a3a3a,
        0 6px 14px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(0, 255, 136, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4);
}

.fader-track:hover .fader-knob-line {
    box-shadow:
        0 0 10px rgba(0, 255, 136, 1),
        0 0 5px rgba(0, 255, 136, 0.8),
        0 0 20px rgba(0, 255, 136, 0.4);
}

/* === EFECTO ACTIVE (arrastrando) === */
.fader-track:active .fader-knob {
    background: linear-gradient(180deg,
            #b0b0b0 0%,
            #989898 15%,
            #808080 30%,
            #686868 50%,
            #585858 70%,
            #484848 85%,
            #383838 100%);
    box-shadow:
        0 1px 0 #454545,
        0 2px 0 #3a3a3a,
        0 4px 8px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.15),
        inset 0 -1px 2px rgba(0, 0, 0, 0.5);
}

/* ===============================================
   CHANNEL FADER CON EQ INTEGRADO - LADO A LADO
   =============================================== */
.channel-fader-with-eq {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    padding-top: 20px;
    position: relative;
    background: linear-gradient(180deg, #1a1a22 0%, #12121a 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.channel-fader-with-eq .fader-label {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: bold;
    text-shadow: 0 0 10px currentColor;
    letter-spacing: 2px;
}

/* Sección de EQ - VERTICAL al lado del fader */
.eq-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 2px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Knob mini para EQ */
.eq-knob-mini {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: radial-gradient(ellipse at 30% 20%,
        #555555 0%,
        #404040 30%,
        #2a2a2a 60%,
        #1a1a1a 100%);
    border: 2px solid #0a0a0a;
    box-shadow:
        0 0 0 1px #333333,
        0 3px 8px rgba(0, 0, 0, 0.6),
        inset 0 1px 3px rgba(255, 255, 255, 0.1),
        inset 0 -2px 5px rgba(0, 0, 0, 0.4);
    transition: transform 0.1s ease;
}

.eq-knob-mini:hover {
    box-shadow:
        0 0 0 1px #444444,
        0 3px 8px rgba(0, 0, 0, 0.6),
        0 0 10px rgba(99, 102, 241, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.15);
}

/* Indicador de posición del knob */
.eq-knob-mini::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

/* Label del EQ */
.eq-knob-mini .eq-label {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

/* Colores específicos para cada banda */
.eq-knob-mini[data-band="high"] {
    box-shadow:
        0 0 0 1px #333333,
        0 3px 8px rgba(0, 0, 0, 0.6),
        0 0 8px rgba(255, 200, 100, 0.2),
        inset 0 1px 3px rgba(255, 255, 255, 0.1);
}
.eq-knob-mini[data-band="high"] .eq-label { color: #ffcc66; }

.eq-knob-mini[data-band="mid"] {
    box-shadow:
        0 0 0 1px #333333,
        0 3px 8px rgba(0, 0, 0, 0.6),
        0 0 8px rgba(100, 200, 255, 0.2),
        inset 0 1px 3px rgba(255, 255, 255, 0.1);
}
.eq-knob-mini[data-band="mid"] .eq-label { color: #66ccff; }

.eq-knob-mini[data-band="low"] {
    box-shadow:
        0 0 0 1px #333333,
        0 3px 8px rgba(0, 0, 0, 0.6),
        0 0 8px rgba(255, 100, 150, 0.2),
        inset 0 1px 3px rgba(255, 255, 255, 0.1);
}
.eq-knob-mini[data-band="low"] .eq-label { color: #ff6699; }

/* Escala simplificada para el fader con EQ */
.channel-fader-with-eq .fader-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 110px;
    font-size: 7px;
    color: rgba(255, 255, 255, 0.3);
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
}

.channel-fader-with-eq .fader-track {
    position: relative;
}

/* ===============================================
   LOOP BUTTONS - Botones de loop verticales
   =============================================== */
.loop-buttons-vertical {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    background: linear-gradient(180deg, #1a1a22 0%, #0f0f14 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 50;
}

/* Posición para Deck A - izquierda del vinilo */
.deck-a .loop-buttons-vertical {
    left: 5px;
    top: 56%;
    transform: translateY(-50%);
}

/* Posición para Deck B - derecha del vinilo */
.deck-b .loop-buttons-vertical {
    right: 5px;
    top: 56%;
    transform: translateY(-50%);
}

/* Botón de loop individual */
.loop-btn,
.loop-quantize-btn,
.loop-exit-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(180deg, #2a2a35 0%, #1a1a22 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.loop-btn:hover,
.loop-quantize-btn:hover,
.loop-exit-btn:hover {
    background: linear-gradient(180deg, #3a3a45 0%, #2a2a35 100%);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow:
        0 2px 8px rgba(99, 102, 241, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Quantize button - especial */
.loop-quantize-btn {
    background: linear-gradient(180deg, #2a2a40 0%, #1a1a28 100%);
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.3);
}

.loop-quantize-btn.active {
    background: linear-gradient(180deg, #4c1d95 0%, #3b0764 100%);
    color: #e9d5ff;
    border-color: #a78bfa;
    box-shadow:
        0 0 10px rgba(167, 139, 250, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Loop activo */
.loop-btn.active {
    background: linear-gradient(180deg, #065f46 0%, #064e3b 100%);
    color: #6ee7b7;
    border-color: #10b981;
    box-shadow:
        0 0 10px rgba(16, 185, 129, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Exit button */
.loop-exit-btn {
    background: linear-gradient(180deg, #3a2a2a 0%, #2a1a1a 100%);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
    font-size: 14px;
}

.loop-exit-btn:hover {
    background: linear-gradient(180deg, #7f1d1d 0%, #5c1818 100%);
    border-color: #ef4444;
    box-shadow:
        0 0 10px rgba(239, 68, 68, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Contenedor botón carpeta - independiente */
.load-local-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    gap: 2px;
}

.deck-a .load-local-container {
    left: 8px;
    bottom: 12px;
}

.deck-b .load-local-container {
    right: 8px;
    bottom: 12px;
}

.load-local-container .load-local-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 2px solid rgba(59, 130, 246, 0.5);
    background: linear-gradient(180deg,
        #1e40af 0%,
        #1e3a8a 50%,
        #172554 100%);
    color: #93c5fd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.load-local-container .load-local-btn svg {
    width: 20px;
    height: 20px;
}

.load-local-container .load-local-btn:hover {
    background: linear-gradient(180deg,
        #2563eb 0%,
        #1d4ed8 50%,
        #1e3a8a 100%);
    border-color: #60a5fa;
    color: #ffffff;
    transform: scale(1.05);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(59, 130, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.load-local-container .load-local-btn:active {
    transform: scale(0.95);
}

.load-local-container::after {
    content: 'LOAD';
    font-size: 7px;
    font-weight: 700;
    color: rgba(147, 197, 253, 0.6);
    letter-spacing: 0.5px;
}

/* Volume Knob Grande */
.vol-knob {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    background:
        radial-gradient(ellipse at 30% 20%,
            #707070 0%,
            #505050 25%,
            #3a3a3a 50%,
            #252525 100%);
    border: 2px solid #0a0a0a;
    box-shadow:
        0 0 0 1px #353535,
        0 5px 12px rgba(0, 0, 0, 0.7),
        inset 0 2px 5px rgba(255, 255, 255, 0.15),
        inset 0 -3px 8px rgba(0, 0, 0, 0.5);
}

.vol-knob::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 14px;
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #e0e0e0 50%,
            #c0c0c0 100%);
    border-radius: 2px;
    box-shadow:
        0 0 5px rgba(255, 255, 255, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Botón AUTO MIX */
.auto-mix-btn {
    padding: 3px 12px;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
    background: linear-gradient(180deg, #2a2a3a 0%, #1a1a2a 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    top: -12px;
    margin-bottom: -10px;
}

.auto-mix-btn:hover {
    background: linear-gradient(180deg, #3a3a4a 0%, #2a2a3a 100%);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.auto-mix-btn.active {
    background: linear-gradient(180deg, #ff6600 0%, #cc3300 100%);
    color: white;
    border-color: #ff8800;
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.5);
    animation: auto-mix-pulse 1s ease-in-out infinite;
}

@keyframes auto-mix-pulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 102, 0, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 102, 0, 0.8);
    }
}

/* ==========================================
   CROSSFADER ESTILO PROFESIONAL PIONEER DJM
   ========================================== */
.crossfader-lg {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    outline: none;
    cursor: pointer;

    /* Canal del crossfader - efecto ranura metálica */
    background:
        linear-gradient(180deg,
            #0a0a0a 0%,
            #1a1a1a 20%,
            #252525 40%,
            #1a1a1a 60%,
            #0a0a0a 100%);
    border-radius: 5px;
    border: 1px solid #050505;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.8),
        inset 0 -1px 2px rgba(255, 255, 255, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.05);

    /* Indicadores de color en los extremos */
    position: relative;
}

/* Contenedor del crossfader mejorado */
.crossfader-box {
    width: 160px;
    padding: 8px 12px;
    background:
        linear-gradient(180deg,
            #1a1a1a 0%,
            #252525 50%,
            #1a1a1a 100%);
    border-radius: 8px;
    border: 1px solid #0a0a0a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Thumb del crossfader - Estilo fader metálico profesional */
.crossfader-lg::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 40px;
    height: 24px;
    cursor: grab;

    /* Efecto metálico 3D con ranuras */
    background:
        linear-gradient(180deg,
            #808080 0%,
            #d0d0d0 8%,
            #b0b0b0 15%,
            #909090 30%,
            #707070 50%,
            #606060 70%,
            #505050 85%,
            #404040 100%);
    border-radius: 3px;
    border: 1px solid #303030;
    box-shadow:
        /* Ranuras verticales decorativas */
        inset 3px 0 0 rgba(255, 255, 255, 0.1),
        inset -3px 0 0 rgba(0, 0, 0, 0.1),
        inset 8px 0 0 rgba(255, 255, 255, 0.05),
        inset -8px 0 0 rgba(0, 0, 0, 0.05),
        /* Sombras externas */
        0 0 0 1px #1a1a1a,
        0 4px 8px rgba(0, 0, 0, 0.7);
}

.crossfader-lg::-webkit-slider-thumb:hover {
    background:
        linear-gradient(180deg,
            #909090 0%,
            #e0e0e0 8%,
            #c0c0c0 15%,
            #a0a0a0 30%,
            #808080 50%,
            #707070 70%,
            #606060 85%,
            #505050 100%);
}

.crossfader-lg::-webkit-slider-thumb:active {
    cursor: grabbing;
    background:
        linear-gradient(180deg,
            #707070 0%,
            #c0c0c0 8%,
            #a0a0a0 15%,
            #808080 30%,
            #606060 50%,
            #505050 70%,
            #404040 85%,
            #353535 100%);
}

/* Firefox */
.crossfader-lg::-moz-range-thumb {
    width: 40px;
    height: 24px;
    cursor: grab;
    background:
        linear-gradient(180deg,
            #808080 0%,
            #d0d0d0 8%,
            #b0b0b0 15%,
            #909090 30%,
            #707070 50%,
            #606060 70%,
            #505050 85%,
            #404040 100%);
    border-radius: 3px;
    border: 1px solid #303030;
}

/* ==========================================
   BOTONES FX ESTILO PROFESIONAL
   ========================================== */
.fx-btn-sm {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.1s ease;

    /* Efecto botón goma/caucho 3D */
    background:
        linear-gradient(180deg,
            #3a3a3a 0%,
            #252525 30%,
            #1a1a1a 70%,
            #202020 100%);
    border: 1px solid #0a0a0a;
    color: rgba(255, 255, 255, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 3px 6px rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.fx-btn-sm:hover {
    background:
        linear-gradient(180deg,
            #454545 0%,
            #303030 30%,
            #252525 70%,
            #2a2a2a 100%);
    color: rgba(255, 255, 255, 0.8);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 3px 6px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(99, 102, 241, 0.2);
}

.fx-btn-sm:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.3);
}

/* FX Activo - LED azul brillante */
.fx-btn-sm.active {
    background:
        linear-gradient(180deg,
            #6366f1 0%,
            #5558e8 30%,
            #4f46e5 60%,
            #4338ca 100%);
    color: #fff;
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -2px 3px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(99, 102, 241, 0.6),
        0 0 30px rgba(99, 102, 241, 0.3);
    animation: fxGlow 0.8s ease-in-out infinite alternate;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

@keyframes fxGlow {
    0% {
        box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.3),
            inset 0 -2px 3px rgba(0, 0, 0, 0.2),
            0 0 12px rgba(99, 102, 241, 0.5),
            0 0 25px rgba(99, 102, 241, 0.2);
    }

    100% {
        box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.4),
            inset 0 -2px 3px rgba(0, 0, 0, 0.2),
            0 0 18px rgba(99, 102, 241, 0.7),
            0 0 35px rgba(99, 102, 241, 0.4);
    }
}

/* Auto DJ Button */
#autoDjBtn.auto-dj-active {
    animation: autoDjPulse 1.5s ease-in-out infinite;
}

@keyframes autoDjPulse {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.8), 0 0 25px rgba(34, 197, 94, 0.4);
        transform: scale(1.02);
    }
}

/* Master Slider */
.master-slider {
    -webkit-appearance: none;
    width: 90px;
    height: 6px;
    background: linear-gradient(90deg, #22c55e 0%, #eab308 60%, #ef4444 100%);
    border-radius: 3px;
    opacity: 0.8;
}

.master-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: linear-gradient(180deg, #777 0%, #333 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Master Slider Wide (debajo de efectos) */
.master-slider-wide {
    -webkit-appearance: none;
    width: 180px;
    height: 20px;
    background: linear-gradient(180deg,
            #1a1a1a 0%,
            #2a2a2a 15%,
            #222222 50%,
            #2a2a2a 85%,
            #1a1a1a 100%);
    border-radius: 6px;
    outline: none;
    border: 1px solid #0a0a0a;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 8px rgba(0, 0, 0, 0.9),
        inset 2px 0 6px rgba(0, 0, 0, 0.5),
        inset -2px 0 6px rgba(0, 0, 0, 0.5);
}

.master-slider-wide::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 28px;
    background: linear-gradient(180deg,
            #c0c0c0 0%,
            #a8a8a8 8%,
            #909090 15%,
            #787878 25%,
            #686868 35%,
            #606060 45%,
            #585858 55%,
            #505050 65%,
            #484848 75%,
            #404040 85%,
            #383838 92%,
            #303030 100%);
    border-radius: 4px;
    cursor: ew-resize;
    border-top: 1px solid #d0d0d0;
    border-left: 1px solid #a0a0a0;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #202020;
    box-shadow:
        0 1px 0 #505050,
        0 2px 0 #404040,
        0 3px 0 #353535,
        0 4px 0 #2a2a2a,
        0 6px 12px rgba(0, 0, 0, 0.7),
        0 3px 6px rgba(0, 0, 0, 0.5),
        inset 0 2px 3px rgba(255, 255, 255, 0.25),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4);
}

.master-slider-wide::-webkit-slider-thumb:hover {
    box-shadow:
        0 1px 0 #606060,
        0 2px 0 #505050,
        0 3px 0 #454545,
        0 4px 0 #3a3a3a,
        0 6px 16px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(255, 180, 0, 0.3),
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4);
}

/* Línea central LED en thumb del master */
.master-slider-wide::-webkit-slider-thumb::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 180, 0, 0.3) 0%, #ffb400 50%, rgba(255, 180, 0, 0.3) 100%);
    border-radius: 1px;
}

/* Escala numérica del Master Volume */
.master-scale {
    font-size: 8px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 10px;
}

/* Pitch Slider Horizontal */
.pitch-slider-h {
    -webkit-appearance: none;
    height: 5px;
    background: linear-gradient(90deg, #333 0%, #555 50%, #333 100%);
    border-radius: 3px;
    outline: none;
}

.pitch-slider-h::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 18px;
    background: linear-gradient(180deg, #777 0%, #333 100%);
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.pitch-value {
    font-family: 'Courier New', monospace;
    color: rgba(255, 255, 255, 0.6);
}

/* Deck Button Small */
/* ===============================================
   BOTONES ESTILO MEZCLADORA PROFESIONAL (Pioneer/Denon)
   =============================================== */

/* Botón base - Estilo caucho/goma profesional */
.deck-btn-sm {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background:
        linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 40%, #252525 100%);
    border: 1px solid #0a0a0a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.deck-btn-sm:hover {
    background: linear-gradient(180deg, #454545 0%, #252525 40%, #303030 100%);
    color: rgba(255, 255, 255, 0.8);
}

.deck-btn-sm:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.4);
}

/* PLAY Button - Verde brillante estilo Pioneer */
.deck-btn-sm.play-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 30% 20%, #4a4a4a 0%, #2a2a2a 50%, #1a1a1a 100%);
    border: 2px solid #151515;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -3px 6px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.7),
        0 0 0 2px #0a0a0a;
    color: rgba(255, 255, 255, 0.6);
}

.deck-btn-sm.play-btn svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.deck-btn-sm.play-btn:hover {
    background: radial-gradient(ellipse at 30% 20%, #555 0%, #333 50%, #222 100%);
    color: rgba(255, 255, 255, 0.9);
}

.deck-btn-sm.play-btn.playing {
    background:
        radial-gradient(ellipse at 30% 20%, #2ecc71 0%, #27ae60 50%, #1e8449 100%);
    color: #fff;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(46, 204, 113, 0.6),
        0 0 40px rgba(46, 204, 113, 0.3);
}

/* CUE Button - Naranja/Ámbar estilo Pioneer */
.deck-btn-sm.cue-btn {
    background:
        linear-gradient(180deg, #4a4035 0%, #2a2520 40%, #352a20 100%);
    color: rgba(255, 165, 0, 0.7);
    border-color: rgba(255, 140, 0, 0.3);
}

.deck-btn-sm.cue-btn:hover {
    background: linear-gradient(180deg, #5a4a3a 0%, #3a3025 40%, #453525 100%);
    color: #ffa500;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(255, 165, 0, 0.3);
}

.deck-btn-sm.cue-btn:active,
.deck-btn-sm.cue-btn.active {
    background:
        linear-gradient(180deg, #ff8c00 0%, #e67300 40%, #cc6600 100%);
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 165, 0, 0.8);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        0 0 20px rgba(255, 165, 0, 0.6);
}

/* STOP Button - Rojo oscuro (mismo tamaño que CUE) */
.deck-btn-sm.stop-btn {
    width: 40px;
    height: 40px;
    background: linear-gradient(180deg, #4a3535 0%, #2a1a1a 40%, #351a1a 100%);
    color: rgba(255, 100, 100, 0.6);
    border-color: rgba(255, 80, 80, 0.2);
}

.deck-btn-sm.stop-btn:hover {
    background: linear-gradient(180deg, #5a4040 0%, #3a2525 40%, #452525 100%);
    color: #ff6b6b;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 0 12px rgba(255, 100, 100, 0.3);
}

/* SYNC Button - Verde neón */
.deck-btn-sm.sync-btn {
    background: linear-gradient(180deg, #354a35 0%, #1a2a1a 40%, #1a351a 100%);
    color: rgba(0, 255, 136, 0.7);
    border-color: rgba(0, 255, 136, 0.3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    min-width: 44px;
    padding: 0 6px;
}

.deck-btn-sm.sync-btn:hover {
    background: linear-gradient(180deg, #405a40 0%, #253525 40%, #254525 100%);
    color: #00ff88;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 0 12px rgba(0, 255, 136, 0.3);
}

.deck-btn-sm.sync-btn.synced {
    background: linear-gradient(180deg, #00ff88 0%, #00cc6a 50%, #00994d 100%);
    color: #000;
    font-weight: 800;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(0, 255, 136, 0.6);
}

/* BEAT MATCH - color naranja */
.deck-btn-sm.beat-match-btn {
    background: linear-gradient(180deg, #4a3520 0%, #2a1a10 40%, #351a08 100%);
    color: rgba(255, 170, 0, 0.7);
    border-color: rgba(255, 170, 0, 0.3);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    min-width: 38px;
    padding: 0 4px;
}

.deck-btn-sm.beat-match-btn:hover {
    background: linear-gradient(180deg, #5a4530 0%, #3a2520 40%, #452510 100%);
    color: #ffaa00;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 12px rgba(255, 170, 0, 0.4);
}

.deck-btn-sm.beat-match-btn:active {
    background: linear-gradient(180deg, #ffaa00 0%, #cc8800 50%, #996600 100%);
    color: #000;
    font-weight: 800;
    transform: scale(0.95);
}

/* SYNC LOCK - color azul */
.deck-btn-sm.sync-lock-btn {
    background: linear-gradient(180deg, #203550 0%, #102030 40%, #081830 100%);
    color: rgba(0, 170, 255, 0.7);
    border-color: rgba(0, 170, 255, 0.3);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    min-width: 38px;
    padding: 0 4px;
}

.deck-btn-sm.sync-lock-btn:hover {
    background: linear-gradient(180deg, #304560 0%, #203040 40%, #182840 100%);
    color: #00aaff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 12px rgba(0, 170, 255, 0.4);
}

.deck-btn-sm.sync-lock-btn.locked {
    background: linear-gradient(180deg, #00aaff 0%, #0088cc 50%, #006699 100%);
    color: #fff;
    font-weight: 800;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(0, 170, 255, 0.6);
    animation: sync-lock-pulse 1s ease-in-out infinite;
}

@keyframes sync-lock-pulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 170, 255, 0.8);
    }
}

/* Deck B - colores rosa/magenta */
.deck-b .deck-btn-sm.cue-btn {
    background: linear-gradient(180deg, #4a354a 0%, #2a1a2a 40%, #351a35 100%);
    color: rgba(255, 0, 255, 0.6);
    border-color: rgba(255, 0, 255, 0.2);
}

.deck-b .deck-btn-sm.cue-btn:hover {
    background: linear-gradient(180deg, #5a405a 0%, #3a253a 40%, #452545 100%);
    color: #ff00ff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(255, 0, 255, 0.3);
}

/* ===============================================
   FILAS DE CONTROLES REORGANIZADAS
   =============================================== */

/* CUE Memory + Beat arrows - div separado */
.beat-controls {
    position: absolute;
    top: 62%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    z-index: 50;
    padding: 10px;
    background: linear-gradient(145deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
    border: 1px solid rgba(100, 100, 120, 0.3);
    border-radius: 8px;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
}

/* Posición para Deck A - izquierda cerca del cyan */
.deck-a .beat-controls {
    left: 65px;
}

/* Posición para Deck B - derecha cerca del cyan */
.deck-b .beat-controls {
    right: 65px;
    align-items: flex-end;
}

/* Columna vertical de 4 botones CUE */
.cue-memory-vertical {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cue-memory-vertical .cue-memory-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid rgba(236, 72, 153, 0.5);
    background: linear-gradient(180deg, #4a1942 0%, #2d1026 100%);
    color: #f472b6;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cue-memory-vertical .cue-memory-btn:hover {
    background: linear-gradient(180deg, #6b2158 0%, #4a1942 100%);
    border-color: #ec4899;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.4);
}

.cue-memory-vertical .cue-memory-btn.active {
    background: linear-gradient(180deg, #ec4899 0%, #be185d 100%);
    color: #fff;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
}

/* CUE Row - contenedor de botón + LED */
.cue-row {
    display: flex;
    align-items: center;
    gap: 10px; /* Más separación entre botón y LED */
}

.cue-row.deck-a {
    flex-direction: row; /* Botón izquierda, LED derecha */
}

.cue-row.deck-b {
    flex-direction: row; /* LED izquierda, Botón derecha */
}

/* LED indicador de CUE - estilo realista */
.cue-led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* LED apagado - aspecto de cristal/vidrio oscuro */
    background: radial-gradient(circle at 35% 35%,
        #5a5a5a 0%,
        #3a3a3a 30%,
        #252525 60%,
        #1a1a1a 100%);
    border: 1px solid #666;
    cursor: pointer;
    transition: all 0.15s ease;
    /* Efecto de cristal con brillo */
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.5);
}

.cue-led:hover {
    border-color: #888;
    transform: scale(1.15);
    background: radial-gradient(circle at 35% 35%,
        #6a6a6a 0%,
        #4a4a4a 30%,
        #353535 60%,
        #2a2a2a 100%);
}

/* LED encendido - rojo brillante */
.cue-led.active {
    background: radial-gradient(circle at 30% 30%,
        #ff9999 0%,
        #ff4444 25%,
        #ee0000 50%,
        #bb0000 100%);
    border-color: #ff6666;
    box-shadow:
        0 0 8px rgba(255, 0, 0, 0.9),
        0 0 16px rgba(255, 0, 0, 0.5),
        0 0 24px rgba(255, 0, 0, 0.3),
        inset 0 2px 3px rgba(255, 255, 255, 0.5);
    animation: led-pulse 1.5s ease-in-out infinite;
}

@keyframes led-pulse {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(255, 0, 0, 0.9),
            0 0 16px rgba(255, 0, 0, 0.5),
            0 0 24px rgba(255, 0, 0, 0.3),
            inset 0 2px 3px rgba(255, 255, 255, 0.5);
    }
    50% {
        box-shadow:
            0 0 12px rgba(255, 0, 0, 1),
            0 0 24px rgba(255, 0, 0, 0.7),
            0 0 36px rgba(255, 0, 0, 0.4),
            inset 0 2px 3px rgba(255, 255, 255, 0.6);
    }
}

/* Flechas combinadas - parecen un botón rectangular */
.beat-arrows-combined {
    display: flex;
    gap: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.beat-arrow-left,
.beat-arrow-right {
    width: 14px;
    height: 22px;
    border: none;
    background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.beat-arrow-left {
    border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.beat-arrow-left:hover,
.beat-arrow-right:hover {
    background: linear-gradient(180deg, #4b5563 0%, #374151 100%);
    color: #fff;
}

.beat-arrow-left .arrow-left,
.beat-arrow-right .arrow-right {
    width: 0;
    height: 0;
    border-style: solid;
}

.beat-arrow-left .arrow-left {
    border-width: 4px 5px 4px 0;
    border-color: transparent currentColor transparent transparent;
}

.beat-arrow-right .arrow-right {
    border-width: 4px 0 4px 5px;
    border-color: transparent transparent transparent currentColor;
}

/* Botón AUTO/MANUAL para CUE */
.cue-auto-toggle {
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 3px;
    border: 1px solid #444;
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    color: #666;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
}

.cue-auto-toggle:hover {
    border-color: #666;
    color: #888;
}

/* AUTO activo - verde brillante */
.cue-auto-toggle.active {
    background: linear-gradient(180deg, #166534 0%, #14532d 100%);
    border-color: #22c55e;
    color: #4ade80;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.cue-auto-toggle.active:hover {
    background: linear-gradient(180deg, #15803d 0%, #166534 100%);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
}

/* Wrapper absoluto para controles - independiente del plato */
.deck-controls-wrapper {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 15;
}


/* Fila superior: Beat Back | CUE Memory | Beat Forward */
.controls-row-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 2px;
}

/* Fila inferior: CUE | PLAY | STOP | SYNC */
.controls-row-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Sync + Beat Nudge Group */
.sync-beat-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sync-btn-wide {
    padding: 1px 8px;
    border-radius: 3px;
    background: linear-gradient(145deg, #252532 0%, #16161f 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 44px;
    line-height: 1;
}

.sync-btn-wide:hover {
    background: linear-gradient(145deg, #2a2a3a 0%, #1a1a24 100%);
    color: var(--dj-neon-green);
    border-color: var(--dj-neon-green);
}

.sync-btn-wide.synced {
    color: var(--dj-neon-green);
    border-color: var(--dj-neon-green);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

.beat-nudge-btns {
    display: flex;
    gap: 2px;
}

.beat-nudge-row {
    display: flex;
    gap: 4px;
    width: 100%;
    justify-content: center;
    margin: 2px 0;
}

.beat-nudge-row .beat-back-btn,
.beat-nudge-row .beat-fwd-btn {
    padding: 2px 12px;
    min-width: 36px;
}

/* ==========================================
   BOTONES BEAT NUDGE - CIRCULAR METÁLICO
   ========================================== */
.beat-nudge-compact {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 6px 0;
}

.beat-arrow-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    position: relative;

    /* Efecto cromado/metal pulido */
    background:
        radial-gradient(ellipse 80% 50% at 50% 15%,
            rgba(255, 255, 255, 0.5) 0%,
            transparent 60%),
        radial-gradient(ellipse at 30% 25%,
            #a0a0a0 0%,
            #808080 20%,
            #606060 40%,
            #505050 60%,
            #404040 80%,
            #303030 100%);
    border: 1px solid #202020;
    color: #1a1a1a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow:
        /* Anillo exterior */
        0 0 0 2px #1a1a1a,
        0 0 0 3px #404040,
        /* Sombra */
        0 3px 6px rgba(0, 0, 0, 0.5),
        /* Brillo interno superior */
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

/* Reflejo de luz */
.beat-arrow-btn::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 15%;
    width: 70%;
    height: 40%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            transparent 100%);
    border-radius: 50% 50% 40% 40%;
    pointer-events: none;
}

.beat-arrow-btn:hover {
    background:
        radial-gradient(ellipse 80% 50% at 50% 15%,
            rgba(255, 255, 255, 0.7) 0%,
            transparent 60%),
        radial-gradient(ellipse at 30% 25%,
            #c0c0c0 0%,
            #a0a0a0 20%,
            #808080 40%,
            #606060 60%,
            #505050 80%,
            #404040 100%);
    transform: scale(1.08);
    box-shadow:
        0 0 0 2px #1a1a1a,
        0 0 0 3px #505050,
        0 4px 10px rgba(0, 0, 0, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.beat-arrow-btn:active {
    transform: scale(0.95);
    background:
        radial-gradient(ellipse at 50% 60%,
            #707070 0%,
            #505050 40%,
            #404040 70%,
            #303030 100%);
    box-shadow:
        0 0 0 2px #1a1a1a,
        0 0 0 3px #353535,
        0 1px 3px rgba(0, 0, 0, 0.4),
        inset 0 3px 6px rgba(0, 0, 0, 0.4);
}

/* ========== Brillo por Deck ========== */
.deck-a .beat-arrow-btn:hover {
    box-shadow:
        0 0 0 2px #1a1a1a,
        0 0 0 3px rgba(0, 212, 255, 0.5),
        0 0 12px rgba(0, 212, 255, 0.4),
        0 4px 10px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.deck-b .beat-arrow-btn:hover {
    box-shadow:
        0 0 0 2px #1a1a1a,
        0 0 0 3px rgba(255, 0, 255, 0.5),
        0 0 12px rgba(255, 0, 255, 0.4),
        0 4px 10px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

/* Flechas CSS triangulares */
.arrow-left,
.arrow-right {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
}

.arrow-left {
    border-width: 5px 7px 5px 0;
    border-color: transparent #303030 transparent transparent;
}

.arrow-right {
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #303030;
}

.beat-arrow-btn:hover .arrow-left {
    border-color: transparent #1a1a1a transparent transparent;
}

.beat-arrow-btn:hover .arrow-right {
    border-color: transparent transparent transparent #1a1a1a;
}

/* LED Indicator */
.led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.led.on {
    background: var(--dj-neon-green);
    box-shadow: 0 0 10px var(--dj-neon-green);
}

.led.playing {
    animation: led-blink 0.5s ease infinite;
}

/* Decks Row */
.decks-row {
    background: linear-gradient(180deg, #0f0f17 0%, #0a0a0f 100%);
}

/* ===============================================
   BROWSER SECTION
   =============================================== */
.browser-section {
    background: linear-gradient(180deg, #0f0f17 0%, #0a0a0f 100%);
}

.song-browser {
    background: transparent;
}

.browser-search {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 10px;
    color: white;
    font-size: 12px;
}

.browser-search:focus {
    outline: none;
    border-color: var(--dj-primary);
}

/* Estilos de categorías movidos a dj-categories.css */

.browser-list {
    max-height: none;
}

/* Browser Table Header */
.browser-table-header {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    background: rgba(18, 18, 24, 0.98);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Browser Context Menu */
.browser-context-menu {
    position: fixed;
    background: rgba(25, 25, 35, 0.98);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 0;
    min-width: 200px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 9999;
    animation: contextMenuFadeIn 0.15s ease-out;
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.browser-context-menu.hidden {
    display: none;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.15s ease;
}

.context-menu-item:hover {
    background: rgba(99, 102, 241, 0.3);
    color: #fff;
}

.context-menu-item:hover svg {
    color: #a5b4fc;
}

.context-menu-item svg {
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.context-menu-item[data-action="send-deck-a"]:hover {
    background: rgba(59, 130, 246, 0.3);
}

.context-menu-item[data-action="send-deck-a"]:hover svg {
    color: #60a5fa;
}

.context-menu-item[data-action="send-deck-b"]:hover {
    background: rgba(239, 68, 68, 0.3);
}

.context-menu-item[data-action="send-deck-b"]:hover svg {
    color: #f87171;
}

.context-menu-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 6px 10px;
}

/* ==========================================
   CATEGORY CONTEXT MENU
   ========================================== */
.category-context-menu {
    position: fixed;
    background: rgba(25, 25, 35, 0.98);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    min-width: 160px;
    max-width: 220px;
    z-index: 9999;
    overflow: hidden;
}

.category-context-menu.hidden {
    display: none;
}

.category-menu-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(99, 102, 241, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.category-menu-header svg {
    color: #a5b4fc;
}

.category-menu-close {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.15s ease;
}

.category-menu-close:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.category-menu-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0;
}

.category-menu-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 2px 0;
}

.category-menu-list::-webkit-scrollbar {
    width: 4px;
}

.category-menu-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.category-menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    font-size: 10px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.15s ease;
}

.category-menu-item:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #fff;
}

.category-menu-item input[type="checkbox"] {
    appearance: none;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.category-menu-item input[type="checkbox"]:checked {
    background: #6366f1;
    border-color: #6366f1;
}

.category-menu-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 7px;
    border: solid white;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.category-menu-item.is-all {
    font-weight: 600;
    color: #a5b4fc;
}

.category-menu-item .category-count {
    margin-left: auto;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 4px;
    border-radius: 8px;
    line-height: 1.2;
}

.category-menu-actions {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.2);
}

.category-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px 8px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.category-action-btn:hover {
    background: rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
    color: #fff;
}

.category-action-btn svg {
    flex-shrink: 0;
}

/* Browser Row */
.browser-row {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    padding-left: 16px;
    cursor: grab;
    transition: all 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 11px;
    position: relative;
    /* Asegurar que el drag funcione */
    -webkit-user-drag: element;
    user-select: none;
}

.browser-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.browser-row.context-selected {
    background: rgba(59, 130, 246, 0.3);
    outline: 1px solid rgba(59, 130, 246, 0.6);
}

.browser-row:active {
    cursor: grabbing;
}

.browser-row.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

/* Canción reproducida (más del 50%) */
.browser-row.played {
    background: rgba(99, 102, 241, 0.1);
    border-left: 3px solid var(--dj-primary);
}

.browser-row.played .col-title,
.browser-row.played .col-artist {
    color: rgba(255, 255, 255, 0.5);
}

.browser-row.played::before {
    content: '✓';
    position: absolute;
    left: 4px;
    color: var(--dj-neon-green);
    font-size: 10px;
}

/* Columnas de la tabla */
.col-title {
    flex: 2;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
    padding-right: 8px;
}

.col-artist {
    flex: 1.5;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.6);
    padding-right: 8px;
}

.col-bpm {
    width: 45px;
    text-align: center;
    color: var(--dj-neon-green);
    font-family: 'Courier New', monospace;
    font-size: 10px;
}

.col-bpm.bpm-editable {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.col-bpm.bpm-editable:hover {
    background: rgba(99, 102, 241, 0.3);
    color: white;
    transform: scale(1.1);
}

.col-kbps {
    width: 45px;
    text-align: center;
    color: var(--dj-neon-blue);
    font-family: 'Courier New', monospace;
    font-size: 10px;
}

.col-time {
    width: 58px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Courier New', monospace;
    font-size: 10px;
}

.col-actions {
    width: 60px;
    display: flex;
    gap: 4px;
    justify-content: center;
}

/* Header columns styles */
.browser-table-header .col-title,
.browser-table-header .col-artist,
.browser-table-header .col-key,
.browser-table-header .col-bpm,
.browser-table-header .col-kbps,
.browser-table-header .col-time,
.browser-table-header .col-actions {
    color: rgba(255, 255, 255, 0.4);
}

.browser-item-cover {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.browser-item-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.browser-item-info {
    flex: 1;
    min-width: 0;
}

.browser-item-title {
    font-size: 12px;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browser-item-artist {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.browser-item-duration {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    font-family: monospace;
}

.browser-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.browser-item:hover .browser-item-actions {
    opacity: 1;
}

.load-deck-btn {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-deck-btn.deck-a {
    background: rgba(0, 212, 255, 0.2);
    color: var(--dj-neon-blue);
    border: 1px solid var(--dj-neon-blue);
}

.load-deck-btn.deck-b {
    background: rgba(255, 0, 255, 0.2);
    color: var(--dj-neon-pink);
    border: 1px solid var(--dj-neon-pink);
}

.load-deck-btn:hover {
    transform: scale(1.05);
}

/* ===============================================
   PLAYLIST PANEL
   =============================================== */
.playlist-panel {
    min-width: 200px;
}

.playlist-drop-zone {
    min-height: 100px;
    transition: all 0.3s ease;
}

.playlist-drop-zone.drag-over {
    background: rgba(236, 72, 153, 0.1);
    border: 2px dashed var(--dj-neon-pink);
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: grab;
    transition: all 0.2s ease;
}

.playlist-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.playlist-item-number {
    width: 20px;
    height: 20px;
    background: rgba(236, 72, 153, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: var(--dj-neon-pink);
}

.playlist-item-info {
    flex: 1;
    min-width: 0;
}

.playlist-item-title {
    font-size: 11px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-item-artist {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
}

.playlist-item-remove {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
}

.playlist-item:hover .playlist-item-remove {
    opacity: 1;
}

.playlist-item-remove:hover {
    background: rgba(239, 68, 68, 0.4);
}

/* ===============================================
   PANEL DE EFECTOS DJ
   =============================================== */
.effects-panel {
    min-width: 180px;
}

.effects-list {
    min-height: 100px;
}

.effect-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.effect-item:hover {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.4);
    transform: scale(1.02);
}

.effect-item:active,
.effect-item.playing {
    background: rgba(234, 179, 8, 0.3);
    border-color: var(--dj-neon-green);
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
}

.effect-item-icon {
    width: 24px;
    height: 24px;
    background: rgba(234, 179, 8, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.effect-item-icon svg {
    width: 14px;
    height: 14px;
    color: #eab308;
}

.effect-item-name {
    flex: 1;
    font-size: 11px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.effect-item-duration {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
}

.effect-menu-btn {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.effect-item:hover .effect-menu-btn {
    opacity: 0.8;
}

.effect-menu-btn:hover {
    opacity: 1;
    background: rgba(234, 179, 8, 0.3);
}

.effect-menu-btn svg {
    width: 16px;
    height: 16px;
    color: #eab308;
}

.effect-stop-btn {
    width: 18px;
    height: 18px;
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.effect-item:hover .effect-stop-btn {
    opacity: 0.7;
}

.effect-stop-btn:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.3);
}

.effect-stop-btn svg {
    width: 10px;
    height: 10px;
    color: #ef4444;
}

/* Dropdown container - W3Schools pattern */
.effect-dropdown {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.effect-dropdown-menu {
    display: none;
    position: fixed;
    background: #0d0d1a;
    min-width: 180px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(234, 179, 8, 0.4);
    border-radius: 10px;
    border: 2px solid rgba(234, 179, 8, 0.5);
    z-index: 9999;
    backdrop-filter: blur(10px);
}

.effect-dropdown-menu.show {
    display: block;
}

.effect-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    transition: background 0.15s;
}

.effect-dropdown-item:hover {
    background: rgba(234, 179, 8, 0.2);
}

.effect-dropdown-item svg {
    width: 18px;
    height: 18px;
    color: #eab308;
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

.dropdown-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    padding: 4px 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.slot-buttons-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 6px 10px 10px;
}

.slot-assign {
    width: 100%;
    padding: 6px 4px;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.slot-assign:hover {
    background: rgba(234, 179, 8, 0.3);
    border-color: rgba(234, 179, 8, 0.5);
}

.slot-num {
    font-weight: bold;
    color: #eab308;
}

.effect-item.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

.effects-list::-webkit-scrollbar {
    width: 5px;
}

.effects-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.effects-list::-webkit-scrollbar-thumb {
    background: rgba(234, 179, 8, 0.3);
    border-radius: 3px;
}

.effects-list::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 179, 8, 0.5);
}

/* ===============================================
   FX QUICK BUTTONS (Botones de efectos rápidos)
   =============================================== */
.fx-quick-buttons {
    flex-shrink: 0;
}

.fx-btn {
    width: 40px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.9), rgba(20, 20, 30, 0.9));
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.4),
        -1px -1px 2px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    user-select: none;
}

/* Estado vacío - opaco */
.fx-btn:not(.has-effect) {
    opacity: 0.5;
}

/* Estado con efecto - resaltado */
.fx-btn.has-effect {
    opacity: 1;
    border-color: rgba(234, 179, 8, 0.6);
    color: #eab308;
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.4),
        -1px -1px 2px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 8px rgba(234, 179, 8, 0.3);
}

/* Hover */
.fx-btn:hover {
    opacity: 1;
    border-color: rgba(234, 179, 8, 0.4);
    transform: translateY(-1px);
}

/* Click - efecto hundido */
.fx-btn:active,
.fx-btn.pressed {
    transform: translateY(1px);
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.5),
        inset -1px -1px 2px rgba(255, 255, 255, 0.05);
    background: linear-gradient(145deg, rgba(20, 20, 30, 0.9), rgba(30, 30, 40, 0.9));
}

/* Drag over - cuando se arrastra un efecto encima */
.fx-btn.drag-over {
    border-color: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
    transform: scale(1.1);
}

/* Reproduciendo */
.fx-btn.playing {
    animation: fx-pulse 0.3s ease-in-out;
    border-color: #22c55e;
}

@keyframes fx-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* Manteniendo presionado - cargando loop */
.fx-btn.holding {
    animation: fx-hold-progress 1s linear forwards;
    border-color: #f97316;
}

@keyframes fx-hold-progress {
    0% {
        box-shadow: inset 0 0 0 0 rgba(249, 115, 22, 0.5);
    }

    100% {
        box-shadow: inset 0 -24px 0 0 rgba(249, 115, 22, 0.7);
    }
}

/* Loop activo - pulso continuo */
.fx-btn.looping {
    animation: fx-loop-pulse 1s ease-in-out infinite;
    border-color: #f97316;
    background: linear-gradient(145deg, rgba(249, 115, 22, 0.3), rgba(249, 115, 22, 0.1));
    box-shadow:
        0 0 8px rgba(249, 115, 22, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #fb923c;
}

@keyframes fx-loop-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 15px rgba(249, 115, 22, 0.9);
    }
}

/* ===============================================
   PANEL RESIZERS (Divisores arrastrables)
   =============================================== */
.panel-resizer {
    width: 6px;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(255, 255, 255, 0.1) 20%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.1) 80%,
            transparent 100%);
    cursor: col-resize;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.panel-resizer:hover {
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(99, 102, 241, 0.3) 20%,
            rgba(99, 102, 241, 0.5) 50%,
            rgba(99, 102, 241, 0.3) 80%,
            transparent 100%);
}

.panel-resizer:active,
.panel-resizer.dragging {
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(99, 102, 241, 0.5) 20%,
            rgba(99, 102, 241, 0.8) 50%,
            rgba(99, 102, 241, 0.5) 80%,
            transparent 100%);
}

.panel-resizer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
}

.panel-resizer:hover::before {
    background: rgba(99, 102, 241, 0.6);
    height: 40px;
}

/* Prevent text selection while dragging */
.resizing {
    user-select: none;
    cursor: col-resize !important;
}

.resizing * {
    cursor: col-resize !important;
}

/* ===============================================
   SCROLLBAR
   =============================================== */
.browser-list::-webkit-scrollbar,
.playlist-drop-zone::-webkit-scrollbar {
    width: 5px;
}

.browser-list::-webkit-scrollbar-track,
.playlist-drop-zone::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.browser-list::-webkit-scrollbar-thumb,
.playlist-drop-zone::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.browser-list::-webkit-scrollbar-thumb:hover,
.playlist-drop-zone::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ========================================
   RESPONSIVE - Scroll horizontal en móvil
   Mantiene tamaño escritorio 1920x1080, permite deslizar
   ======================================== */
@media (max-width: 1500px) {
    /* Body: scroll en ambas direcciones */
    body.bg-dark-950 {
        overflow: scroll;
        height: auto;
        min-height: 100vh;
        min-width: 1500px;
    }

    /* Main sin restricciones */
    body.bg-dark-950 > main.dj-container {
        overflow: visible;
        height: auto;
        min-height: auto;
        flex: none;
        padding-bottom: 60px;
    }

    /* Decks y mixer mantienen tamaño de escritorio */
    .decks-row {
        height: 410px;
        min-height: 410px;
    }

    .deck {
        min-width: 384px;
    }

    .mixer {
        min-width: 470px;
    }

    /* Browser section con altura fija */
    .browser-section {
        overflow: hidden;
        height: 400px;
        min-height: 400px;
        max-height: 400px;
        flex: none;
    }

    /* Paneles internos con scroll */
    .browser-section .flex-1.overflow-hidden,
    #browserPanel,
    #playlistPanel,
    #effectsPanel {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 350px;
    }

    /* Navegación inferior fija */
    body > nav.h-14 {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        min-width: auto;
        z-index: 9999;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* CUEs pegados a los loops y más arriba */
    .deck-a .beat-controls {
        left: 40px;
        top: 55%;
    }

    .deck-b .beat-controls {
        right: 40px;
        top: 55%;
    }

    /* Ocultar CUE 4 en ventana angosta */
    .cue-row:has([data-slot="4"]) {
        display: none;
    }

    /* EQ y volumen separados del borde */
    .channel-fader-with-eq {
        margin-left: 15px;
        margin-right: 15px;
    }

    /* Ocultar espectro de frecuencias en pantalla angosta */
    .spectrum-container {
        display: none;
    }

    /* Ocultar waveform detallado (el que se mueve) en pantalla angosta */
    .waveform-R {
        display: none;
    }
}