/* ============================================================
   RADIUX WORKSPACE v2.0 - Fase 6.1 Ultra-Pro
   Solo aplica en escritorio. Modo táctil NO se toca.
   ============================================================ */

/* Solo activo en pantallas grandes y NO en modo táctil */
@media (min-width: 1025px) {

    /* === BODY Y CONTENEDOR PRINCIPAL === */
    body:not(.tactile-mode).workspace-mode {
        padding: 0 !important;
        overflow: hidden !important;
        height: 100vh !important;
    }

    body:not(.tactile-mode) #proView.workspace-active {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* === TOP BAR ULTRA-COMPACTA === */
    body:not(.tactile-mode) #proView.workspace-active > .top-bar {
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 4px 12px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        position: relative;
        z-index: 500;
        background: #060609 !important;
        border-bottom: 1px solid rgba(0, 210, 255, 0.12) !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.6) !important;
        flex-shrink: 0 !important;
    }

    /* Brand compacto */
    body:not(.tactile-mode) #proView.workspace-active .brand-group {
        gap: 6px !important;
    }

    body:not(.tactile-mode) #proView.workspace-active .brand-logo {
        height: 20px !important;
    }

    body:not(.tactile-mode) #proView.workspace-active .brand-text {
        font-size: 0.8rem !important;
    }

    body:not(.tactile-mode) #proView.workspace-active #planBadge {
        font-size: 0.45rem !important;
        padding: 1px 5px !important;
    }

    body:not(.tactile-mode) #proView.workspace-active #userNameDisplay {
        font-size: 0.6rem !important;
    }

    /* Actions compactas */
    body:not(.tactile-mode) #proView.workspace-active .top-bar-actions .btn {
        padding: 2px 6px !important;
        font-size: 0.65rem !important;
        border-radius: 6px !important;
    }

    /* Grabador compacto */
    body:not(.tactile-mode) #proView.workspace-active .rec-container {
        padding: 2px 8px !important;
        font-size: 0.6rem !important;
    }

    body:not(.tactile-mode) #proView.workspace-active .rec-dot {
        width: 6px !important;
        height: 6px !important;
    }

    /* Storage compacto - Inline en una sola línea para evitar desbordamientos */
    body:not(.tactile-mode) #proView.workspace-active .storage-panel {
        min-width: auto !important;
        padding: 2px 8px !important;
        gap: 4px !important;
        border-radius: 6px !important;
        flex-shrink: 1;
        max-width: 150px;
        background: rgba(255, 255, 255, 0.02) !important;
    }

    body:not(.tactile-mode) #proView.workspace-active .storage-panel .storage-icon {
        display: none !important;
    }

    body:not(.tactile-mode) #proView.workspace-active .storage-panel .flex-grow-1 {
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body:not(.tactile-mode) #proView.workspace-active #storageDetail {
        font-size: 0.45rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body:not(.tactile-mode) #proView.workspace-active #storagePercent {
        font-size: 0.45rem !important;
        font-weight: 800;
        color: var(--accent);
    }

    body:not(.tactile-mode) #proView.workspace-active .storage-bar-container {
        height: 2px !important;
    }

    /* Status compacto - inline */
    body:not(.tactile-mode) #proView.workspace-active .live-status {
        padding: 2px 10px !important;
        font-size: 0.55rem !important;
        border-radius: 6px !important;
        white-space: nowrap;
    }

    body:not(.tactile-mode) #proView.workspace-active .live-dot {
        width: 6px !important;
        height: 6px !important;
        margin-right: 5px !important;
    }

    body:not(.tactile-mode) #proView.workspace-active #timer {
        font-size: 0.65rem !important;
        margin-left: 6px !important;
    }

    body:not(.tactile-mode) #proView.workspace-active .listener-status-badge {
        font-size: 0.55rem !important;
        margin-left: 4px !important;
    }

    /* El contenedor GridStack - Asegurar 100% de ancho sin mrgenes internos extra */
    .gs-container-wrapper {
        width: 100%;
        flex: 1 !important;
        min-height: 0 !important;
        height: calc(100vh - 38px) !important; /* Altura exacta menos la top-bar */
        overflow-x: hidden;
        overflow-y: auto;
        padding: 4px !important;
        background: transparent !important;
    }

    /* Ocultar ABSOLUTAMENTE TODO lo original dentro de proView excepto la barra, el grid y modales */
    body:not(.tactile-mode) #proView.workspace-active > *:not(.top-bar):not(.gs-container-wrapper):not(style):not(script):not(.modal-overlay) {
        display: none !important;
    }

    /* === BARRAS DE TÍTULO DE PANELES === */
    .ws-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2px 8px;
        background: linear-gradient(135deg, rgba(0, 210, 255, 0.08), rgba(0, 255, 136, 0.03));
        border-bottom: 1px solid rgba(0, 210, 255, 0.12);
        cursor: move;
        user-select: none;
        -webkit-user-select: none;
        flex-shrink: 0;
        min-height: 22px;
        max-height: 22px;
    }

    .ws-panel-header .ws-panel-title {
        font-size: 0.5rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #00d2ff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ws-panel-header .ws-panel-controls {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    .ws-panel-header .ws-panel-icon {
        font-size: 0.45rem;
        opacity: 0.4;
        color: #fff;
    }

    .ws-panel-btn {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.3);
        font-size: 0.5rem;
        cursor: pointer;
        padding: 1px 3px;
        border-radius: 3px;
        transition: all 0.2s;
        line-height: 1;
    }

    .ws-panel-btn:hover {
        color: #00d2ff;
        background: rgba(0, 210, 255, 0.1);
    }

    .ws-panel-btn.btn-panel-color:hover {
        color: #ff9f43;
        background: rgba(255, 159, 67, 0.1);
    }

    .ws-panel-btn.btn-panel-reset-color:hover {
        color: #00d2ff;
        background: rgba(0, 210, 255, 0.1);
    }

    .ws-panel-btn.btn-close-panel:hover {
        color: #ff4757;
        background: rgba(255, 71, 87, 0.1);
    }

    /* === CONTENIDO ELÁSTICO DE PANELES === */
    .ws-panel-body {
        overflow: auto;
        flex: 1;
        min-height: 0;
    }

    /* Scrollbar mínimo dentro de paneles */
    .ws-panel-body::-webkit-scrollbar { width: 3px; height: 3px; }
    .ws-panel-body::-webkit-scrollbar-track { background: transparent; }
    .ws-panel-body::-webkit-scrollbar-thumb { background: rgba(0, 210, 255, 0.15); border-radius: 10px; }

    /* === GRID ITEMS === */
    .grid-stack-item-content {
        display: flex !important;
        flex-direction: column !important;
        background: rgba(8, 8, 12, 0.95);
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
        transition: box-shadow 0.2s !important;
    }

    .grid-stack-item-content:hover {
        box-shadow: 0 4px 20px rgba(0, 210, 255, 0.08) !important;
        border-color: rgba(0, 210, 255, 0.12) !important;
    }

    /* === CONTENIDO ELÁSTICO - Auto-ajuste de componentes internos === */
    .grid-stack .glass-panel {
        transform: none !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        padding: 8px !important;
        height: 100% !important;
        overflow: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .grid-stack .glass-panel:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Decks elásticos */
    .grid-stack .deck {
        transform: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        height: 100% !important;
        overflow: auto !important;
        padding: 8px 10px !important;
        border-top-width: 2px !important;
    }

    .grid-stack .deck:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Deck: Hacer faders y controles más compactos */
    .grid-stack .deck .track-title {
        font-size: 0.75rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .grid-stack .deck .track-artist {
        font-size: 0.6rem !important;
    }

    .grid-stack .deck {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 12px !important; /* Más aire para diseño pro */
    }

    .grid-stack .deck .track-info {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-evenly !important; /* Mejor distribución */
        margin-bottom: 10px !important;
    }

    .grid-stack .deck .deck-header {
        margin-bottom: 6px !important;
        flex-shrink: 0 !important;
    }

    .grid-stack .deck .deck-controls {
        flex-shrink: 0 !important;
        margin-top: auto !important;
    }

    .grid-stack .deck canvas {
        height: 20px !important;
        min-height: 20px;
    }

    /* Mixer elástico */
    .grid-stack .mixer-central {
        transform: none !important;
        margin: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        padding: 12px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .grid-stack .mixer-central .fader-group {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .grid-stack .mixer-central:hover {
        transform: none !important;
    }

    .grid-stack .mixer-central .fader-label {
        font-size: 0.55rem !important;
    }

    .grid-stack .mixer-central .voice-btn {
        padding: 3px !important;
        font-size: 0.55rem !important;
    }

    .grid-stack .mixer-central .voice-btn span {
        font-size: 0.45rem !important;
    }

    /* Playlist elástica */
    .grid-stack .glass-panel:has(#playlistUI) {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    .grid-stack #playlistUI {
        flex: 1 !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    .grid-stack .playback-controls .btn-mode {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.6rem !important;
    }

    /* Relay table compacta */
    .grid-stack #relayPanel .table {
        font-size: 0.65rem !important;
    }

    .grid-stack #relayPanel th,
    .grid-stack #relayPanel td {
        padding: 4px 6px !important;
    }

    /* Clock compacto */
    .grid-stack #clockPanel .clock-time-display {
        font-size: 1.6rem !important;
    }

    /* FX grid compacto */
    .grid-stack .fx-grid {
        gap: 6px !important;
    }

    .grid-stack .fx-grid .fx-btn {
        padding: 6px !important;
        font-size: 0.55rem !important;
        min-height: 50px !important;
    }

    /* Explorer compacto y elástico */
    .grid-stack .local-explorer {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    .grid-stack .local-explorer .local-file-list {
        flex: 1 !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
        flex: 1;
        min-height: 0;
    }

    /* GeoPanel compacto */
    .grid-stack #geoPanel .world-map-container {
        height: 100px !important;
    }

    /* Ocultar el footer de copyright en modo workspace */
    #proView.workspace-active > .text-center.mt-5 {
        display: none !important;
    }

    /* Ocultar los contenedores originales (Reforzado) */
    #proView.workspace-active > .decks-row,
    #proView.workspace-active > .row,
    #proView.workspace-active > .glass-panel,
    #proView.workspace-active > .master-section,
    #proView.workspace-active > .mt-5,
    #proView.workspace-active > footer {
        display: none !important;
    }

    /* === HANDLE DE RESIZE === */
    .grid-stack-item > .ui-resizable-se {
        width: 12px !important;
        height: 12px !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    .grid-stack-item > .ui-resizable-se::after {
        content: '';
        position: absolute;
        right: 2px;
        bottom: 2px;
        width: 8px;
        height: 8px;
        border-right: 2px solid rgba(0, 210, 255, 0.4);
        border-bottom: 2px solid rgba(0, 210, 255, 0.4);
        border-radius: 0 0 3px 0;
    }

    /* === TOOLBAR FLOTANTE (Reset + Panel Toggle) === */
    .ws-toolbar {
        position: fixed;
        bottom: 12px;
        right: 12px;
        z-index: 10000;
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .ws-toolbar-btn {
        background: rgba(6, 6, 9, 0.9);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(0, 210, 255, 0.2);
        color: #00d2ff;
        padding: 5px 12px;
        border-radius: 16px;
        font-size: 0.55rem;
        font-weight: 800;
        letter-spacing: 0.8px;
        cursor: pointer;
        transition: all 0.25s;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .ws-toolbar-btn:hover {
        background: rgba(0, 210, 255, 0.1);
        border-color: #00d2ff;
        box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
    }

    .ws-toolbar-btn.active {
        background: rgba(0, 210, 255, 0.15);
        border-color: #00d2ff;
    }

    /* === MENÚ DE PANELES (Toggle Show/Hide) === */
    .ws-panel-menu {
        position: fixed;
        bottom: 50px;
        right: 12px;
        z-index: 10001;
        background: rgba(6, 6, 9, 0.95);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(0, 210, 255, 0.15);
        border-radius: 12px;
        padding: 10px;
        display: none;
        min-width: 200px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    }

    .ws-panel-menu.visible {
        display: block;
        animation: wsMenuSlideUp 0.2s ease-out;
    }

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

    .ws-panel-menu-title {
        font-size: 0.5rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #00d2ff;
        margin-bottom: 8px;
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(0, 210, 255, 0.1);
    }

    .ws-panel-menu-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 6px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.15s;
        font-size: 0.6rem;
        color: rgba(255, 255, 255, 0.7);
    }

    .ws-panel-menu-item:hover {
        background: rgba(0, 210, 255, 0.08);
    }

    .ws-panel-menu-item input[type="checkbox"] {
        accent-color: #00d2ff;
        width: 12px;
        height: 12px;
    }

    .ws-panel-menu-item.disabled {
        opacity: 0.3;
        pointer-events: none;
    }

    /* === ESTILOS DE PANEL FIJADO INDIVIDUALMENTE === */
    .grid-stack-item.ws-panel-locked .ws-panel-icon {
        display: none !important;
    }
    .grid-stack-item.ws-panel-locked .ws-panel-header {
        cursor: default !important;
    }
    .grid-stack-item.ws-panel-locked .ui-resizable-handle,
    .grid-stack-item.ws-panel-locked > .ui-resizable-handle {
        display: none !important;
    }
    
    /* Botón de Candado (Fijador de Panel) */
    .ws-panel-btn.btn-panel-lock.locked {
        color: #ff4757 !important;
        background: rgba(255, 71, 87, 0.1) !important;
        text-shadow: 0 0 8px rgba(255, 71, 87, 0.6);
    }
    .ws-panel-btn.btn-panel-lock.locked:hover {
        color: #ff6b81 !important;
        background: rgba(255, 71, 87, 0.2) !important;
    }
}

/* === PROTECCIN TOTAL: Mvil y Tctil INTACTO === */
/* Se ha eliminado la restriccin que ocultaba el workspace en mviles para permitir pruebas de paneles */
body.tactile-mode .ws-panel-header { display: none !important; }
body.tactile-mode .ws-toolbar { display: none !important; }
body.tactile-mode .ws-panel-menu { display: none !important; }
body.tactile-mode .gs-container-wrapper { display: none !important; }

#cabinClockContainer {
    background-image: radial-gradient(circle at center, rgba(0, 210, 255, 0.05) 0%, rgba(0, 0, 0, 0) 66%), 
    linear-gradient(rgba(0, 210, 255, 0.05) 1px, transparent 1px), 
    linear-gradient(90deg, rgba(0, 210, 255, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    background-position: center center;
}