/**
 * ch-shell-unified.css v3
 * Un solo offset bajo el header fijo (main.container). Sin padding en body ni en páginas hijas.
 */

:root {
    --ch-shell-sidebar-w: 280px;
    --ch-shell-header-h: var(--neon-header-pc-height, 72px);
    --ch-shell-bg-color: #070710;
    --ch-shell-bg: linear-gradient(180deg, #070710 0%, #0a0a14 42%, #06060c 100%);
    --ch-shell-aurora:
        radial-gradient(ellipse 70% 55% at 12% 18%, rgba(249, 115, 22, 0.11) 0%, transparent 58%),
        radial-gradient(ellipse 55% 45% at 88% 72%, rgba(236, 72, 153, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
}

/* Fondo oscuro global */
html {
    background-color: var(--ch-shell-bg-color) !important;
    background-image: var(--ch-shell-aurora) !important;
    background-attachment: fixed !important;
}

body {
    background-color: var(--ch-shell-bg-color) !important;
    background-image: var(--ch-shell-aurora) !important;
    background-attachment: fixed !important;
    color: #f1f5f9;
}

body.nx-page-body,
body.nx-index-body,
body.products-page-body {
    background-color: var(--ch-shell-bg-color) !important;
    background-image: var(--ch-shell-aurora) !important;
}

main.container,
.nx-main,
.nx-shell,
.main-container,
.products-page-main {
    background: transparent !important;
}

main.container {
    box-sizing: border-box !important;
}

/* ── Desktop/tablet: UN solo hueco bajo header (main.container) ── */
@media (min-width: 769px) {
    :root {
        --header-offset: var(--ch-shell-header-h);
        --neon-header-pc-height: 72px;
    }

    html,
    body {
        margin: 0 !important;
        padding-top: 0 !important;
        margin-left: 0 !important;
    }

    /* Offset único — pegado al header */
    main.container {
        padding-top: var(--ch-shell-header-h) !important;
        padding-bottom: 24px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-top: 0 !important;
        min-height: calc(100vh - var(--ch-shell-header-h));
    }

    /* Anular offsets duplicados dentro de main (style_pro, dashboard, productos, etc.) */
    main.container > .nx-main.nx-shell,
    main.container > .main-container,
    main.container .dash-page,
    main.container .products-page-main,
    main.container .recharge-container,
    main.container .proxy-page,
    main.container .smm-page,
    main.container .balance-page-wrap {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    main.container > .nx-main.nx-shell {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Header */
    #main-header.neon-header,
    #main-header.neon-header.nx-header {
        margin-top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: linear-gradient(180deg, rgba(15, 15, 28, 0.97) 0%, rgba(10, 10, 26, 0.95) 100%) !important;
        border-bottom: 1px solid rgba(249, 115, 22, 0.16) !important;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.04) inset,
            0 10px 36px rgba(0, 0, 0, 0.45) !important;
    }

    #main-header.neon-header .container {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 1480px !important;
        padding: 12px 24px !important;
        box-sizing: border-box !important;
    }

    .header-user-info {
        background: rgba(249, 115, 22, 0.07) !important;
        border: 1px solid rgba(249, 115, 22, 0.2) !important;
        border-radius: 999px !important;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset !important;
    }

    .header-date i,
    .header-balance i {
        color: #f97316 !important;
    }

    .current-time,
    .user-role-small {
        color: #ec4899 !important;
        opacity: 0.85 !important;
    }

    .user-avatar-small {
        background: linear-gradient(135deg, #f97316, #ec4899) !important;
        box-shadow: 0 2px 10px rgba(249, 115, 22, 0.35) !important;
    }

    .container:not(main.container) {
        margin-left: auto !important;
        width: 100% !important;
    }

    /* Home: hero pegado bajo header */
    body.nx-index-body main.container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }

    body.nx-index-body .nx-hero {
        min-height: calc(100vh - var(--ch-shell-header-h));
        background: transparent !important;
        padding-top: 12px !important;
        padding-bottom: 40px !important;
    }
}

@media (min-width: 1025px) {
    :root {
        --ch-shell-header-h: 72px;
    }

    main.container {
        margin-left: var(--ch-shell-sidebar-w) !important;
        width: calc(100% - var(--ch-shell-sidebar-w)) !important;
        max-width: none !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .sidebar-pc-ultra,
    .sidebar-pc-ultra.sidebar-pc-drawer {
        background: linear-gradient(180deg, #0e0e1c 0%, #0a0a14 55%, #070710 100%) !important;
        border-right: 1px solid rgba(249, 115, 22, 0.12) !important;
        box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04) !important;
        scrollbar-color: rgba(249, 115, 22, 0.35) rgba(0, 0, 0, 0.25) !important;
    }

    .sidebar-pc-drawer .header-content-pc-ultra span {
        color: rgba(148, 163, 184, 0.85) !important;
        letter-spacing: 0.14em !important;
    }

    .sidebar-pc-drawer .nav-link-pc-ultra {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .sidebar-pc-drawer .nav-link-pc-ultra:hover,
    .sidebar-pc-drawer .nav-link-pc-ultra.active {
        background: rgba(249, 115, 22, 0.1) !important;
        border-color: rgba(249, 115, 22, 0.24) !important;
        box-shadow: inset 3px 0 0 rgba(249, 115, 22, 0.75) !important;
    }

    .sidebar-pc-drawer .link-icon-pc-ultra i {
        color: #fb923c !important;
    }

    .sidebar-pc-drawer .nav-link-pc-ultra.active .link-text-pc-ultra {
        color: #fff !important;
    }

    .sidebar-pc-ultra.sidebar-pc-drawer::-webkit-scrollbar-thumb {
        background: rgba(249, 115, 22, 0.35) !important;
    }
}