:root { 
    --bg-main: #0a0a0c; 
    --bg-panel: #141417; 
    --bg-input: #050505; 
    --accent: #f0a500; 
    --accent-hover: #d99100; 
    --border-color: #2a2a2e; 
    --text-main: #e4e4e7;
}
body, html { 
    margin: 0; 
    padding: 0; 
    background-color: var(--bg-main); 
    color: var(--text-main); 
    font-family: 'Segoe UI', system-ui, sans-serif; 
    overflow-x: hidden; 
}

/* =========================================
   ESTILOS GENERALES Y COMPONENTES
   ========================================= */
.bg-black { background-color: #000 !important; }
.text-accent { color: var(--accent) !important; }
.border-accent { border-color: var(--accent) !important; }

.btn-warning { background-color: var(--accent); border-color: var(--accent); color: #000; font-weight: bold; }
.btn-warning:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); color: #000; }
.btn-outline-warning { border-color: var(--accent); color: var(--accent); }
.btn-outline-warning:hover { background-color: var(--accent); color: #000; }

.form-control, .form-select, .input-group-text { background-color: var(--bg-input) !important; color: #fff !important; border: 1px solid var(--border-color) !important; }
.form-control:focus, .form-select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(240, 165, 0, 0.25) !important; }
.card { background-color: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.card-header { background-color: rgba(0,0,0,0.6); border-bottom: 1px solid var(--border-color); }

/* VISTA LOGIN */
.login-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: radial-gradient(circle at center, #1a1a1f 0%, #000 100%); }
.login-box { background: var(--bg-panel); border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 0 20px rgba(240, 165, 0, 0.15); width: 100%; max-width: 400px; padding: 2.5rem 2rem; }

/* LISTAS, SCROLLBARS Y CONSOLA */
.list-group-item { background-color: transparent; color: var(--text-main); border-color: var(--border-color); }
.list-group-item:hover { background-color: rgba(240, 165, 0, 0.05); }
.list-group-item.active { background-color: rgba(240, 165, 0, 0.1) !important; border-left: 4px solid var(--accent) !important; color: var(--accent) !important; font-weight: bold; }
#mqList .list-group-item.active { background-color: rgba(0,0,0,0.6) !important; }
.dyn-label { font-size: 0.70rem; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; font-weight: bold; display: block; letter-spacing: 0.5px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.debug-console { height: 160px; overflow-y: auto; background: #000; border: 1px solid var(--border-color); font-family: monospace; font-size: 0.70rem; padding: 5px; color: #a1a1aa; line-height: 1.3; word-wrap: break-word;}

/* =========================================
   TEMA VISUAL MODERNO (Modern Dark UI)
   ========================================= */
.mq-modern-panel { background-color: #1e1e26; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); overflow: hidden; margin-bottom: 1.5rem; }
.mq-panel-header { background-color: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 10px 15px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px; }
.mq-panel-body { padding: 15px; }

#editorTabs.modern-pills { background: #14141a; padding: 6px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); display: inline-flex; }
#editorTabs.modern-pills .nav-link { border-radius: 8px; color: #888; border: none; font-weight: 600; padding: 8px 16px; transition: all 0.3s ease; }
#editorTabs.modern-pills .nav-link:hover { color: #fff; background: rgba(255,255,255,0.05); }
#editorTabs.modern-pills .nav-link.active { background: #0dcaf0; color: #000; box-shadow: 0 2px 8px rgba(13, 202, 240, 0.4); }

.mq-modern-input { background-color: #14141a !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: #fff !important; border-radius: 6px; }
.mq-modern-input:focus { border-color: #0dcaf0 !important; box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25) !important; }
.input-group-text.mq-soft-bg { background-color: #2b2b36; border: 1px solid rgba(255, 255, 255, 0.1); color: #bbb; border-radius: 6px; }


/* =========================================
   LAYOUT RESPONSIVE (SIN CONFLICTOS)
   ========================================= */

/* 1. DISEÑO ESCRITORIO (PC grandes > 1200px) */
@media (min-width: 1200px) {
    body { overflow: hidden; height: 100vh; }
    .layout-wrapper { display: flex; height: 100vh; width: 100%; }
    .sidebar { width: 280px; height: 100vh; overflow-y: auto; background-color: #060608; border-right: 1px solid var(--border-color); flex-shrink: 0; display:flex; flex-direction:column; }
    .main-content { flex: 1; height: 100vh; overflow-y: auto; padding: 1.5rem; }
    
    /* El editor se ajusta a la pantalla sin salirse */
    .mq-panels-container { height: calc(100vh - 100px); overflow: hidden; display: flex; flex-direction: row; }
    .mq-list-panel { height: 100%; overflow-y: auto; border-right: 1px solid var(--border-color); }
    .mq-editor-panel { height: 100%; overflow-y: auto; }
}

/* 2. DISEÑO TABLET E IPAD PRO (<= 1199px) */
@media (max-width: 1199.98px) {
    /* CLAVE: Dejamos que el body general haga scroll para evitar paneles invisibles/cortados */
    body { overflow-y: auto !important; height: auto !important; }
    .layout-wrapper { display: block; height: auto; min-height: 100vh; }
    
    /* Ocultamos la barra lateral base para dar 100% de espacio al editor */
    .sidebar, #global-sidebar, .left-panel { display: none !important; }
    .main-content { padding: 1rem; height: auto; overflow: visible; }
    
    /* Contenedor deja de estar atrapado a 100vh y se apila */
    .mq-panels-container { display: flex; flex-direction: column; height: auto !important; overflow: visible !important; }
    
    /* La lista de misiones mantiene su scroll interno para no ser interminable */
    .mq-list-panel, .quest-list-container { 
        width: 100% !important;
        max-height: 40vh !important; 
        overflow-y: auto !important; 
        margin-bottom: 2rem !important; 
        border: 1px solid rgba(255,255,255,0.1) !important; 
        border-radius: 12px; 
        box-shadow: inset 0 -15px 15px -15px rgba(0,0,0,0.8); 
    }
    
    /* El editor central fluye naturalmente hacia abajo con el resto de la página */
    .mq-editor-panel { height: auto !important; overflow: visible !important; padding-left: 0 !important; }

    /* Pestañas horizontales deslizables */
    #editorTabs.modern-pills, .nav-tabs { display: flex; flex-wrap: nowrap !important; overflow-x: auto !important; white-space: nowrap !important; width: 100%; padding-bottom: 8px !important; -webkit-overflow-scrolling: touch; border-bottom: none;}
    #editorTabs.modern-pills::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar { height: 4px; display: block; }
    #editorTabs.modern-pills::-webkit-scrollbar-thumb { background-color: #0dcaf0; border-radius: 4px; }

    /* Botones de acción */
    .top-action-buttons { display: flex !important; flex-wrap: wrap !important; width: 100% !important; gap: 6px !important; }
    .top-action-buttons .btn { flex: 1 1 calc(33.33% - 6px) !important; font-size: 0.75rem !important; padding: 0.4rem 0.2rem !important; margin: 0 !important; }
}

/* 3. DISEÑO CELULARES PEQUEÑOS (<= 767px) */
@media (max-width: 767.98px) {
    .top-action-buttons .btn { flex: 1 1 calc(50% - 6px) !important; } /* Botones de 2 en 2 en cel */
    .mq-list-panel, .quest-list-container { max-height: 35vh !important; }
}