/* --- Estils per Finestres Arrossegables (Desktop) --- */
.window-header {
    background: #0a0f0a;
    border-bottom: 2px solid #00f3ff;
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
    user-select: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: 8px;
    margin-top: -10px; /* Adjust for padding in console-panel */
    margin-left: -10px;
    margin-right: -10px;
}

.window-header:active {
    cursor: grabbing;
}

.window-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: #00f3ff;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
    pointer-events: none;
}

.btn-close-window {
    background: transparent;
    border: none;
    color: #00f3ff;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    padding: 0 5px;
    transition: color 0.2s, text-shadow 0.2s;
}

.btn-close-window:hover {
    color: #ff3333;
    text-shadow: 0 0 8px #ff3333;
}

/* En vertical (mòbil) l'app és a pantalla completa i no hi ha finestres: traiem la
   barra de títol (que servia per arrossegar i tancar). Es navega amb la barra inferior. */
@media (orientation: portrait) {
    .window-header { display: none !important; }
}

/* Quan estem en escriptori (ample EN HORITZONTAL) convertim els contenidors
   principals en finestres lliures. En vertical (portrait) no, perquè volem els
   panells a tot l'ample i apilats. */
@media (min-width: 768px) and (orientation: landscape) {
    .floating-window {
        position: absolute !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 15px rgba(0, 243, 255, 0.3) !important;
        z-index: 100; /* Canviarà dinàmicament al clicar */
        transition: opacity 0.3s ease;
    }
    
    /* Assegurem que en escriptori es mostren com a flex ignorant mobile-hidden. Només s'oculten si tenen desktop-closed */
    #panel-esquerra:not(.desktop-closed), #dreta-group:not(.desktop-closed), #panel-logs-wrapper:not(.desktop-closed) {
        display: flex !important;
    }
    
    .desktop-closed {
        display: none !important;
    }

    
    #interficie-global {
        position: relative !important;
        min-height: 900px; /* Assegurem espai per arrossegar */
        overflow: hidden;
    }
}