/* ===================================================
   MUSYPHID - OPTIMIZACIÓN FINAL Y FIX MOBILE 10/10
   =================================================== */

/* 1. PANELES Y CABECERAS */
.panel-default > .panel-heading, 
.panel-danger > .panel-heading, 
.card-header, .module-title, .panel-title,
[style*="background-color: #d9534f"], 
[style*="background: #8b0000"] {
    background: #0a1a0a !important; 
    border-bottom: 2px solid #d4af37 !important;
    color: #d4af37 !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    padding: 12px !important;
}

/* 2. CONTENEDORES */
.ms-ui-main, [class*="myaccount"], .panel, .module-contents, .card, .panel-danger {
    background: #050505 !important;
    border: 1px solid #d4af37 !important;
    color: #eee !important;
}

/* 3. FORMULARIOS */
.input-group { border: none !important; margin-bottom: 5px !important; display: flex !important; }
.input-group-text {
    background: #111 !important;
    border: 1px solid #333 !important;
    color: #d4af37 !important;
    font-size: 11px !important;
    width: 160px !important;
    display: flex !important; align-items: center; justify-content: center;
}
.form-control {
    background: #141414 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    padding: 10px !important;
    flex: 1 !important;
}

/* 4. NAVBAR PC */
#navbar {
    background: #0a1a0a url('../img/navbg.jpg') no-repeat top center;
    width: 100%;
    max-width: 1275px;
    margin: 0 auto;
    border: 2px solid #d4af37;
    border-radius: 15px !important;
    min-height: 60px;
    display: flex; align-items: center; justify-content: center;
}
#nav-links ul { display: flex; gap: 30px; list-style: none; padding: 0; margin: 0; }
#nav-links ul li a {
    color: #e0e0e0 !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
#nav-links ul li a:hover { color: #48ff00 !important; }

/* 5. BOTONES */
.btn-danger, .btn-logout, .label-danger {
    background: #1a1a1a !important;
    border: 1px solid #d4af37 !important;
    color: #d4af37 !important;
}

/* 6. LOGO PC (Centrado y Ajustado) */
#header a img, #ms-logo-fixed img {
    position: absolute !important;
    top: 15px !important; /* Lo subimos un poco para que encaje en el marco */
    left: 50% !important; /* Lo mandamos al centro exacto */
    transform: translateX(-50%) !important; /* Truco para centrar elementos absolutos */
    width: 170px !important; /* Ajustamos el tamaño para que no tape los botones laterales */
    z-index: 9999 !important;
}

/* Ajuste extra para que los botones del centro no se pisen con el logo */
#nav-links ul { 
    display: flex; 
    gap: 40px; /* Aumentamos el espacio central si es necesario */
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

/* 7. ESPACIADOR */
#container, #content, .main-container {
    margin-top: 150px !important; 
    position: relative;
    z-index: 10;
}

/* === RESPONSIVE (Móvil con Logo Centrado y Online Sutil) === */
@media (max-width: 768px) {
    /* 1. Logo Centrado arriba de todo */
    #header a img, #ms-logo-fixed img, #ms-logo-fixed {
        position: relative !important;
        top: 0 !important; 
        left: 0 !important;
        margin: 10px auto 20px auto !important;
        width: 160px !important;
        display: block !important;
        transform: none !important;
    }

    /* 2. Menú en Cuadrícula (Botones individuales) */
    .pc-nav, #nav-links { display: block !important; width: 100% !important; }
    #navbar { 
        flex-direction: column !important; 
        height: auto !important; 
        padding: 10px !important;
        border-radius: 5px !important;
    }
    #nav-links ul { 
        display: flex !important; 
        flex-wrap: wrap !important; 
        justify-content: center !important; 
        gap: 8px !important; 
    }
    #nav-links ul li { flex: 0 0 46% !important; margin: 0 !important; }
    #nav-links ul li a {
        display: block !important;
        background: rgba(0,0,0,0.8) !important;
        border: 1px solid #d4af37 !important;
        font-size: 12px !important;
        padding: 10px 2px !important;
        text-align: center !important;
    }

    /* 3. Gauge Online (Escalado para que no tape todo) */
    .ms-online-gauge-wrapper {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin: 10px auto !important;
        transform: scale(0.85); /* Un poco más pequeño en móvil */
    }
    
    #container, #content { margin-top: 20px !important; }

    /* Ocultamos cualquier menú sándwich sobrante */
    .mobile-nav, .navbar-toggle, #menu-toggle { display: none !important; }
}

/* ELEMENTOS OCULTOS */
img[alt="Syphid"], .ms-welcome-card img { display: none !important; }