/*
 * User OTA desktop shell
 * Shared visual language for header/nav/coins panel in user area.
 */

body[class*="page-"] {
    --nz-shell-blue: #002660;
    --nz-shell-blue-2: #003a8c;
    --nz-shell-bg: #f7f9fe;
    --nz-shell-line: #e2e8f3;
    --nz-shell-muted: #617091;
}

.site-header-overlay {
    z-index: 1200;
}

.header-top-dark-bar {
    background: linear-gradient(90deg, #063074 0%, #002660 70%);
}

.header-top-dark-content {
    max-width: 1280px;
}

.btn-comprar-coins-top {
    background: linear-gradient(135deg, #1b5cff 0%, #003a8c 100%) !important;
    box-shadow: 0 2px 10px rgba(27, 92, 255, 0.34) !important;
}

.btn-comprar-coins-top:hover {
    box-shadow: 0 5px 14px rgba(27, 92, 255, 0.45) !important;
}

.nav-container-white-bar {
    top: 46px;
    max-width: 1280px;
    width: calc(100% - 36px);
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--nz-shell-line);
    box-shadow: 0 10px 24px rgba(0, 38, 96, 0.09);
}

.header-content-white-bar {
    max-width: 1280px;
}

.header-white-bar {
    min-height: 56px;
    padding: 4px 0;
}

.header-logo img {
    max-height: 28px;
}

.header-nav-item-white {
    color: #4d5f85;
    border-radius: 10px;
}

.header-nav-item-white:hover {
    color: var(--nz-shell-blue);
    background: rgba(0, 58, 140, 0.08);
    transform: none;
}

.header-nav-item-white.active {
    color: var(--nz-shell-blue);
    background: rgba(0, 58, 140, 0.13);
}

.header-nav-item-white.active::after {
    height: 2px;
    width: 65%;
    background: linear-gradient(90deg, #1b5cff 0%, #003a8c 100%);
    box-shadow: 0 2px 8px rgba(0, 58, 140, 0.26);
}

.header-icon-btn-white {
    border-radius: 9px;
}

.header-icon-btn-white:hover {
    background: #edf2fc;
}

.notification-badge-header {
    background: #1b5cff;
}

.user-icon-link {
    border-color: #dae2f2;
}

.user-menu-dropdown-content {
    border: 1px solid var(--nz-shell-line);
    box-shadow: 0 12px 24px rgba(0, 38, 96, 0.12);
}

/* Shared page spacing so fixed dual-header does not overlap content */
body.page-alojamientos .main-content.search-layout-full,
body.page-actividades .main-content,
body.page-miembros .main-content,
body.page-red_social .main-content,
body.page-profile .main-content,
body.page-edit_profile .main-content,
body.page-chat .main-content,
body.page-membresias .main-content,
body.page-tienda .main-content {
    padding-top: 80px;
}

@media (max-width: 1100px) {
    .nav-container-white-bar {
        width: calc(100% - 20px);
    }
}

/* ------------------------------------------------------------------
   Global responsive layer (user area only)
   Keep desktop visual language and content; adapt distribution on phone.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    body[class*="page-"] {
        overflow-x: hidden;
    }

    body[class*="page-"] .main-content,
    body[class*="page-"] main,
    body[class*="page-"] .contenedor,
    body[class*="page-"] .cotenido {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body[class*="page-"] .main-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    body[class*="page-"] img,
    body[class*="page-"] video,
    body[class*="page-"] iframe {
        max-width: 100%;
        height: auto;
    }

    /* Generic card-like blocks */
    body[class*="page-"] .rounded-2xl,
    body[class*="page-"] .rounded-xl,
    body[class*="page-"] .rounded-card {
        max-width: 100%;
    }

    /* Avoid horizontal overflow in mixed grids/flex layouts */
    body[class*="page-"] [class*="grid"],
    body[class*="page-"] [class*="flex"] {
        min-width: 0;
    }

    body[class*="page-"] [class*="grid"] > *,
    body[class*="page-"] [class*="flex"] > * {
        min-width: 0;
    }

    /* Shared user header (same pattern as index) */
    body[class*="page-"] #userMainHeader .user-topbar {
        flex-wrap: wrap;
        align-items: center;
        height: auto;
        min-height: 86px;
        padding-top: 8px;
        padding-bottom: 8px;
        row-gap: 8px;
    }

    body[class*="page-"] #userMainHeader .user-left {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    body[class*="page-"] #userMainHeader .user-logo img {
        height: 34px;
        width: auto;
    }

    body[class*="page-"] #userMainHeader .user-nav {
        order: 3;
        width: 100%;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        overflow-x: auto !important;
        white-space: nowrap;
        padding-top: 2px;
        scrollbar-width: thin;
    }

    body[class*="page-"] #userMainHeader .user-actions {
        margin-left: auto;
        gap: 8px;
    }

    body[class*="page-"] #userMainHeader #coinsPill {
        padding-left: 10px;
        padding-right: 10px;
    }

    body[class*="page-"] #userMainHeader #coinsPill span {
        font-size: 12px;
    }

    body.page-alojamientos .main-content.search-layout-full,
    body.page-actividades .main-content,
    body.page-miembros .main-content,
    body.page-red_social .main-content,
    body.page-profile .main-content,
    body.page-edit_profile .main-content,
    body.page-chat .main-content,
    body.page-membresias .main-content,
    body.page-tienda .main-content {
        padding-top: 112px;
    }
}

@media (max-width: 640px) {
    body[class*="page-"] .main-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    body[class*="page-"] #userMainHeader .user-nav a {
        font-size: 13px !important;
        padding-bottom: 4px;
    }
}

/* Pages with local legacy headers: enforce same mobile header style as index */
@media (max-width: 768px) {
    .user-mobile-header {
        display: none !important;
    }

    .user-desktop-header.hidden.md\:block {
        display: block !important;
    }

    .user-desktop-header > div {
        padding-left: 12px !important;
        padding-right: 12px !important;
        height: auto !important;
        min-height: 86px !important;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 8px;
        gap: 8px !important;
    }

    .user-desktop-header > div > div:first-child {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px !important;
        min-width: 0;
    }

    .user-desktop-header nav.hidden.md\:flex,
    .user-desktop-header nav {
        display: flex !important;
        order: 3;
        width: 100%;
        gap: 14px !important;
        overflow-x: auto;
        white-space: nowrap;
        padding-top: 2px;
        scrollbar-width: thin;
    }

    .user-desktop-header nav a {
        font-size: 13px !important;
        white-space: nowrap;
    }

    .user-desktop-header > div > div:last-child {
        margin-left: auto;
        gap: 8px !important;
    }

    .user-desktop-header a.hidden.md\:flex#coinsPill,
    .user-desktop-header a#coinsPill {
        display: flex !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .user-desktop-header a#coinsPill span {
        font-size: 12px !important;
    }
}