/* === Z-INDEX SYSTEM UNIFICADO - KEIMADA LIVE === */
/* Sistema de capas para evitar solapamiento de componentes */

:root {
    /* === SISTEMA DE CAPAS JERÁRQUICO === */
    
    /* Layer 1: Base Layout */
    --z-base: 1;
    --z-content: 10;
    --z-header: 100;
    
    /* Layer 2: Navigation & Menus */
    --z-navigation: 900;
    --z-dropdown-menu: 950;
    --z-audio-player: 960; /* Player por encima del menú dropdown */
    
    /* Layer 3: Interactive Components */
    --z-fab: 1000;
    --z-context-indicators: 1100;
    --z-smart-overlay: 1200;
    
    /* Layer 4: Side Panels */
    --z-sidebar-panels: 1400;
    --z-chat-overlay: 1400;
    --z-chat-panel: 1500;
    --z-more-options-panel: 2000;
    
    /* Layer 5: Modal & Notifications */
    --z-notifications: 9000;
    --z-modal-overlay: 9500;
    --z-modal-content: 9600;
    
    /* Layer 6: Critical Alerts */
    --z-critical-alert: 9999;
}

/* === POSICIONAMIENTO INTELIGENTE === */
/* Evitar conflictos de positioning */

/* RIGHT SIDE STACK - Elementos que van a la derecha */
.right-stack {
    position: fixed;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: var(--z-context-indicators);
    pointer-events: none;
}

.right-stack > * {
    pointer-events: auto;
}

/* TOP RIGHT - Notifications */
.top-right-zone {
    top: 20px;
    right: 20px;
}

/* MIDDLE RIGHT - Context info */
.middle-right-zone {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

/* BOTTOM RIGHT - FAB */
.bottom-right-zone {
    bottom: 30px;
    right: 30px;
}

/* LEFT SIDE STACK - Elementos que van a la izquierda */
.left-stack {
    position: fixed;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: var(--z-context-indicators);
    pointer-events: none;
}

.left-stack > * {
    pointer-events: auto;
}

/* TOP LEFT - Now Playing */
.top-left-zone {
    top: 80px;
    left: 20px;
}

/* BOTTOM LEFT - Session info */
.bottom-left-zone {
    bottom: 100px;
    left: 20px;
}

/* === MOBILE ADJUSTMENTS === */
@media (max-width: 768px) {
    /* Reducir spacing en móvil */
    .right-stack, .left-stack {
        gap: 8px;
    }
    
    .top-right-zone {
        top: 10px;
        right: 10px;
    }
    
    .bottom-right-zone {
        bottom: 20px;
        right: 20px;
    }
    
    .top-left-zone {
        top: 70px;
        left: 10px;
    }
    
    .bottom-left-zone {
        bottom: 80px;
        left: 10px;
    }
    
    /* En móvil, algunos elementos deben ser full-width */
    .mobile-full-width {
        left: 10px !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
    }
}

/* === RESOLUCIÓN DE CONFLICTOS === */
/* Reglas específicas para evitar solapamiento */

/* Chat Panel y More Options - Solo uno visible a la vez */
.chat-panel.open ~ .more-options-dropdown {
    right: -100vw !important; /* Forzar oculto */
}

.more-options-dropdown.open ~ .chat-panel {
    right: -320px !important; /* Forzar oculto */
}

/* FAB - Mover cuando hay paneles abiertos */
.chat-panel.open ~ .fab-back-to-top,
.more-options-dropdown.open ~ .fab-back-to-top {
    right: 350px; /* Mover a la izquierda del panel */
    transition: right 0.4s ease;
}

@media (max-width: 768px) {
    .chat-panel.open ~ .fab-back-to-top,
    .more-options-dropdown.open ~ .fab-back-to-top {
        opacity: 0.3; /* En móvil solo atenuar */
        right: 30px;
    }
}

/* Context indicators - Adjustar cuando hay paneles abiertos */
.chat-panel.open ~ .context-indicators,
.more-options-dropdown.open ~ .context-indicators {
    opacity: 0.3;
    pointer-events: none;
}

/* Notifications - Mover cuando hay paneles abiertos */
.chat-panel.open ~ .notification-system,
.more-options-dropdown.open ~ .notification-system {
    right: 340px;
    transition: right 0.4s ease;
}

@media (max-width: 768px) {
    .chat-panel.open ~ .notification-system,
    .more-options-dropdown.open ~ .notification-system {
        right: 10px; /* En móvil mantener posición */
        top: 70px; /* Pero subir un poco */
    }
}