/**
 * DJ Loop In/Out Module - Styles
 * Botones IN, OUT, ÷2, ×2 y display de longitud
 */

/* ===============================================
   CONTENEDOR DE LOOP IN/OUT
   =============================================== */
.loop-inout-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px;
    background: linear-gradient(180deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Label del grupo */
.loop-inout-label {
    font-size: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

/* ===============================================
   BOTONES IN / OUT
   =============================================== */
.loop-in-btn,
.loop-out-btn {
    width: 32px;
    height: 22px;
    font-size: 9px;
    font-weight: 700;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Botón IN - Cyan */
.loop-in-btn {
    background: linear-gradient(180deg, #1a3a4a 0%, #0d2530 100%);
    color: rgba(0, 200, 255, 0.7);
    border: 1px solid rgba(0, 200, 255, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.4);
}

.loop-in-btn:hover {
    background: linear-gradient(180deg, #204a5a 0%, #153540 100%);
    color: rgba(0, 220, 255, 0.9);
    border-color: rgba(0, 200, 255, 0.5);
}

.loop-in-btn.active {
    background: linear-gradient(180deg, #00a8cc 0%, #007799 100%);
    color: #ffffff;
    border-color: #00d4ff;
    box-shadow:
        0 0 10px rgba(0, 200, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.loop-in-btn.loop-active {
    animation: loop-pulse-cyan 0.8s ease-in-out infinite;
}

/* Botón OUT - Magenta */
.loop-out-btn {
    background: linear-gradient(180deg, #3a1a4a 0%, #250d30 100%);
    color: rgba(255, 0, 200, 0.7);
    border: 1px solid rgba(255, 0, 200, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.4);
}

.loop-out-btn:hover {
    background: linear-gradient(180deg, #4a205a 0%, #351540 100%);
    color: rgba(255, 50, 220, 0.9);
    border-color: rgba(255, 0, 200, 0.5);
}

.loop-out-btn.active {
    background: linear-gradient(180deg, #cc00a8 0%, #990077 100%);
    color: #ffffff;
    border-color: #ff00cc;
    box-shadow:
        0 0 10px rgba(255, 0, 200, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.loop-out-btn.loop-active {
    animation: loop-pulse-magenta 0.8s ease-in-out infinite;
}

/* ===============================================
   BOTONES ÷2 y ×2 (Halve / Double)
   =============================================== */
.loop-size-controls {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}

.loop-halve-btn,
.loop-double-btn {
    width: 22px;
    height: 20px;
    font-size: 10px;
    font-weight: 700;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: linear-gradient(180deg, #2a2a35 0%, #1a1a22 100%);
    color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

.loop-halve-btn:hover,
.loop-double-btn:hover {
    background: linear-gradient(180deg, #3a3a45 0%, #2a2a32 100%);
    color: rgba(255, 255, 255, 0.7);
}

/* Estado habilitado (cuando hay loop activo) */
.loop-halve-btn.enabled,
.loop-double-btn.enabled {
    color: rgba(0, 255, 136, 0.8);
    border-color: rgba(0, 255, 136, 0.3);
}

.loop-halve-btn.enabled:hover,
.loop-double-btn.enabled:hover {
    background: linear-gradient(180deg, #1a3a2a 0%, #0d2518 100%);
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.5);
    box-shadow:
        0 0 8px rgba(0, 255, 136, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.loop-halve-btn.enabled:active,
.loop-double-btn.enabled:active {
    transform: scale(0.95);
    box-shadow:
        0 0 12px rgba(0, 255, 136, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===============================================
   DISPLAY DE LONGITUD DEL LOOP
   =============================================== */
.loop-length-display {
    width: 48px;
    height: 16px;
    font-size: 9px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    text-align: center;
    line-height: 16px;
    background: linear-gradient(180deg, #0a0a12 0%, #050508 100%);
    color: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    margin-top: 2px;
}

.loop-length-display.active {
    color: #00ff88;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.8);
    border-color: rgba(0, 255, 136, 0.3);
}

/* ===============================================
   ANIMACIONES
   =============================================== */
@keyframes loop-pulse-cyan {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(0, 200, 255, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow:
            0 0 20px rgba(0, 200, 255, 0.8),
            0 0 30px rgba(0, 200, 255, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

@keyframes loop-pulse-magenta {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(255, 0, 200, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow:
            0 0 20px rgba(255, 0, 200, 0.8),
            0 0 30px rgba(255, 0, 200, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

/* ===============================================
   RESPONSIVE - Móvil
   =============================================== */
@media (max-width: 768px) {
    .loop-inout-controls {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 3px;
        gap: 2px;
    }

    .loop-inout-label {
        width: 100%;
        text-align: center;
        margin-bottom: 1px;
    }

    .loop-in-btn,
    .loop-out-btn {
        width: 28px;
        height: 20px;
        font-size: 8px;
    }

    .loop-halve-btn,
    .loop-double-btn {
        width: 20px;
        height: 18px;
        font-size: 9px;
    }

    .loop-length-display {
        width: 40px;
        height: 14px;
        font-size: 8px;
        line-height: 14px;
    }
}

/* ===============================================
   POSICIONAMIENTO EN EL DECK
   =============================================== */
/* Deck A - Controles a la izquierda del vinilo */
.deck-a .loop-inout-controls {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
}

/* Deck B - Controles a la derecha del vinilo */
.deck-b .loop-inout-controls {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
}

/* Ajuste para móvil - mover abajo */
@media (max-width: 768px) {
    .deck-a .loop-inout-controls,
    .deck-b .loop-inout-controls {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        margin-top: 4px;
    }
}