/* ============================================
   NAVBAR STYLES - Estilos globales del navbar
   Aplicables a todas las paginas del sitio
   ============================================ */

/* Posicionamiento del navbar */
#navbarNav .navbar-nav.nav-pills-modern {
    margin: 0 auto;
}

#navbarNav .navbar-nav:last-child {
    margin-left: auto;
    margin-right: 0;
}

/* ============================================
   MODERN NAV PILLS - Navegacion Moderna
   ============================================ */

.nav-pills-modern {
    gap: 0.5rem;
}

.nav-link-modern {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem !important;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75) !important;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link-modern i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.nav-link-modern:hover {
    color: #fff !important;
    background: rgba(0, 168, 89, 0.15);
    border-color: rgba(0, 168, 89, 0.3);
}

.nav-link-modern:hover i {
    transform: scale(1.1);
}

.nav-link-modern.active {
    color: #fff !important;
    background: linear-gradient(135deg, #00A859 0%, #007A42 100%);
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(0, 168, 89, 0.3);
}

.nav-link-modern.active i {
    color: #fff;
}

/* Responsive para moviles */
@media (max-width: 991px) {
    .nav-pills-modern {
        gap: 0.25rem;
        padding: 0.5rem 0;
    }

    .nav-link-modern {
        padding: 0.75rem 1rem !important;
        border-radius: 12px;
        justify-content: flex-start;
    }

    /* Reducir logo en mobile para navbar mas compacto */
    #navbar-main .navbar-brand img {
        height: 55px !important;
    }
}

/* ============================================
   USER DROPDOWN - Dark Theme
   ============================================ */

.dropdown-menu.dropdown-menu-dark-tipz {
    background: #1A1F2E;
    border: 1px solid #2A3040;
    border-radius: 12px;
    padding: 0.5rem 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    min-width: 260px;
}

.dropdown-menu-dark-tipz .dropdown-header {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    padding: 0.5rem 1rem 0.25rem;
}

.dropdown-menu-dark-tipz .dropdown-item {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.dropdown-menu-dark-tipz .dropdown-item:hover,
.dropdown-menu-dark-tipz .dropdown-item:focus {
    background: rgba(0, 168, 89, 0.15);
    color: #fff;
}

.dropdown-menu-dark-tipz .dropdown-item.text-warning:hover {
    background: rgba(255, 193, 7, 0.15);
}

.dropdown-menu-dark-tipz .dropdown-item.text-primary:hover {
    background: rgba(13, 110, 253, 0.15);
}

.dropdown-menu-dark-tipz .dropdown-item.text-danger:hover {
    background: rgba(220, 53, 69, 0.15);
}

.dropdown-menu-dark-tipz .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08);
    margin: 0.25rem 0;
}

.dropdown-menu-dark-tipz .dropdown-item i {
    width: 20px;
    text-align: center;
    margin-right: 0.5rem;
}

/* User info header in dropdown */
.dropdown-user-info {
    padding: 0.75rem 1rem;
}

.dropdown-user-info .user-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.dropdown-user-info .user-email {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

/* ============================================
   DROPDOWN CATEGORY HEADERS
   ============================================ */

.dropdown-category-header {
    display: block;
    padding: 6px 16px 4px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    user-select: none;
}

/* Danger divider before Cerrar Sesión — more prominent */
.dropdown-divider-danger {
    border-color: rgba(220, 53, 69, 0.2) !important;
    margin: 0.5rem 0 !important;
}

/* ============================================
   TRADING TOOLS DROPDOWN
   ============================================ */

/* Badge alignment — only in Trading Tools dropdown */
.nav-pills-modern .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
}

.nav-pills-modern .dropdown-menu .dropdown-item .badge {
    margin-left: auto;
}

/* Active state for dropdown toggle (Trading Tools) */
.nav-link-modern.dropdown-toggle.active {
    background: linear-gradient(135deg, #00A859 0%, #007A42 100%);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(0, 168, 89, 0.3);
}

/* User dropdown active indicator */
#userDropdown.text-success {
    color: #00A859 !important;
}

/* ============================================
   RESPONSIVE — Mobile dropdown adjustments
   ============================================ */

@media (max-width: 991px) {
    /* Trading Tools dropdown in mobile collapse */
    .nav-pills-modern .dropdown-menu {
        background: rgba(26, 31, 46, 0.95);
        border: none;
        border-radius: 8px;
        margin: 4px 0;
        box-shadow: none;
    }

    /* Category headers in mobile */
    .dropdown-category-header {
        padding: 8px 16px 4px;
    }
}

/* ============================================
   NAVBAR AUTO-HIDE + SUBHEADER PINNED
   Curva única "ease-out-expo" cubic-bezier(0.16, 1, 0.3, 1) a 560ms
   compartida entre navbar y subheader → ambos transicionan como
   una unidad cinematográfica al revelarse.
   ============================================ */

#navbar-main {
    --shift: 0px;
    transform: translate3d(0, calc(var(--shift) * -1), 0);
    will-change: transform;
    transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
    /* z-index DINÁMICO controlado por JS (navbar_autohide.js):
       - Normal (menú cerrado): 1025 → subheader sticky (1030) lo empuja al scrollear
       - Menú colapsable abierto: 1040 (via .menu-open class) → menú y dropdowns sobre el subheader
       Jerarquía: modal 1055 > navbar.menu-open 1040 > subheader 1030 > navbar 1025 > mobileTab 1020. */
    z-index: 1025;
}

/* Cuando el collapse menu está abierto, el navbar sube por encima del subheader
   para que el menú y sus dropdowns no queden atrapados detrás.
   .menu-open se aplica vía JS (más compatible que :has() para navegadores móviles). */
#navbar-main.menu-open {
    z-index: 1040;
}

/* Dropdown abierto dentro del navbar: subir z-index para que quede por encima
   del subheader sticky. Bootstrap ya posiciona el dropdown — solo necesitamos
   activar stacking context. */

/* DESKTOP (≥992px): Bootstrap usa position:absolute, basta subir z-index. */
#navbar-main.menu-open .dropdown-menu.show {
    z-index: 1041;
}

/* MOBILE (<992px): dentro del collapse expandido, Bootstrap usa position:static
   que NO crea stacking context — forzar position:relative para activar z-index. */
#navbar-main.menu-open .navbar-collapse.show .dropdown-menu.show {
    position: relative;
    z-index: 1041;
}

/* Mientras sigue al scroll, sin transition (1:1 con el dedo/rueda) */
#navbar-main:not(.is-revealing) {
    transition: none;
}

/* Hot-zone invisible de 6px en el borde superior (solo desktop) */
.navbar-hover-zone {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    z-index: 1029;
    background: transparent;
    pointer-events: auto;
}

@media (pointer: coarse) {
    .navbar-hover-zone {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #navbar-main {
        transition: none;
        transform: none !important;
    }
}

/* ============================================
   DASHBOARD HEADER STICKY — "Subheader pinned"
   Sticky con top: 0 fijo (robusto en todos los navegadores).
   Cuando body.navbar-revealing, el subheader recibe translateY
   para acompañar al navbar y no quedar tapado.
   Cuando body.is-subheader-pinned (navbar completamente oculto),
   aparece una sombra de elevación muy sutil.
   ============================================ */

body.has-navbar-autohide #main-content > .dashboard-header--editorial {
    /* !important neutraliza el override en trial_onboarding.css que pone
       position: static !important. Scope: solo cuando autohide está activo. */
    position: sticky !important;
    top: 0 !important;
    /* z-index 1030 — debe quedar por encima de #mobileTabSelector (1020)
       y su dropdown menu (1021) para que el botón móvil pase por DEBAJO
       del subheader durante el scroll, no por encima. */
    z-index: 1030;
    transform: translate3d(0, 0, 0);
    will-change: transform, box-shadow;
    /* Sin sombra por defecto. Aparece progresivamente cuando se ancla. */
    box-shadow:
        0 0 0 rgba(255, 255, 255, 0),
        0 0 0 rgba(0, 0, 0, 0);
    transition:
        transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modo scroll-driven (sin reveal): sin transition para el transform.
   El subheader queda quieto sticky en top:0 sin interpolación. */
body.has-navbar-autohide:not(.navbar-revealing) #main-content > .dashboard-header--editorial {
    transition: box-shadow 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mientras el navbar reaparece (hover sostenido), el subheader baja
   para acompañarlo SOLO si estaba pinned (navbar oculto). Si scrollY=0,
   el subheader está en flow natural debajo del navbar visible: aplicar
   translateY ahí dejaría un espacio negro entre navbar y subheader. */
body.has-navbar-autohide.navbar-revealing.is-subheader-pinned #main-content > .dashboard-header--editorial {
    transform: translate3d(0, var(--navbar-h, 80px), 0);
}

/* Cuando el subheader queda pinned (navbar oculto del todo): sombra
   de elevación sutil, hairline superior translúcido, fondo refinado.
   !important necesario porque trial_onboarding.css pone box-shadow: none !important */
body.is-subheader-pinned #main-content > .dashboard-header--editorial {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 28px rgba(0, 0, 0, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.has-navbar-autohide #main-content > .dashboard-header--editorial {
        position: static;
        top: auto;
        transform: none !important;
        transition: none;
        box-shadow: none;
    }
}