/* ============================================================
   IZZY | PLANTILLA GLOBAL
   Barra superior premium / responsive
   ============================================================ */

.sb-topnav {
    display:flex;
    align-items:center;
    flex-wrap:nowrap!important;
    width:100%;
    min-width:0;
}

.sb-topnav .logo-container {
    flex:0 0 auto;
    min-width:0;
}

/* Menú lateral */
.sb-topnav #sidebarToggle.izzy-navbar-menu-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px;
    width:38px;
    min-width:38px;
    height:34px;
    margin:0 6px 0 4px;
    padding:0;
    border:1px solid #183d70;
    border-radius:9px;
    background:#17345b;
    color:#fff;
    box-shadow:0 2px 6px rgba(11,31,82,.14);
    transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.sb-topnav #sidebarToggle.izzy-navbar-menu-toggle i {
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    opacity:1!important;
    font-size:17px;
    line-height:1;
    pointer-events:none;
}

.sb-topnav #sidebarToggle.izzy-navbar-menu-toggle:hover {
    background:#245c9c;
    border-color:#245c9c;
    box-shadow:0 4px 10px rgba(11,31,82,.19);
    transform:translateY(-1px);
}

/* Menú principal móvil/tablet */
.sb-topnav .mobile-mainmenu-wrapper {
    flex:0 0 auto!important;
    min-width:0;
    margin:0 4px;
}

.sb-topnav #mobile-mainmenu-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    border:1px solid #d9e2ec;
    border-radius:9px;
    background:#f7f9fc;
    color:#0b1f52;
    box-shadow:0 2px 7px rgba(11,31,82,.08);
    white-space:nowrap;
}

.sb-topnav #mobile-mainmenu-btn i {
    color:#114bc7!important;
    -webkit-text-fill-color:#114bc7!important;
    opacity:1!important;
}

.sb-topnav #mobile-mainmenu-btn .izzy-mainmenu-text {
    color:#0b1f52;
    font-weight:700;
    white-space:nowrap;
}

/* Fullscreen */
.sb-topnav #izzy-persistent-fullscreen {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px!important;
    width:38px;
    min-width:38px!important;
    height:34px!important;
    margin-left:4px!important;
    padding:0!important;
    border-radius:9px!important;
    background:#1098ea!important;
    border-color:#1098ea!important;
    color:#fff!important;
    box-shadow:0 2px 7px rgba(16,152,234,.22);
}

/* Usuario */
.sb-topnav .navbar-nav-user {
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex:0 1 auto;
    min-width:0;
    margin-left:auto!important;
}

.sb-topnav .navbar-nav-user > .nav-item.dropdown:last-child {
    min-width:0;
}

.sb-topnav .navbar-nav-user #userDropdown {
    display:flex!important;
    align-items:center!important;
    gap:6px;
    min-width:0;
    max-width:220px;
    overflow:hidden;
    white-space:nowrap;
}

.sb-topnav .navbar-nav-user #userDropdown > i {
    flex:0 0 auto;
}

.sb-topnav .navbar-nav-user #user_session {
    display:inline-block;
    min-width:0;
    max-width:165px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Fullscreen persistente */
html.izzy-fs-shell-root,
html.izzy-fs-shell-root body {
    overflow:hidden!important;
}

body.izzy-fs-shell > :not(#izzyFullscreenFrame) {
    display:none!important;
}

#izzyFullscreenFrame {
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    display:block!important;
    border:0!important;
    background:#f5f8fc;
    z-index:2147483647!important;
}

/* Tablet y móvil */
@media (max-width:991.98px) {
    .sb-topnav {
        background:#fff!important;
        border-bottom:1px solid #e6edf5!important;
        box-shadow:0 4px 14px rgba(11,31,82,.08)!important;
    }

    .sb-topnav .logo-container { order:0!important; }
    .sb-topnav .mobile-mainmenu-wrapper { order:1!important; }
    .sb-topnav #sidebarToggle.izzy-navbar-menu-toggle { order:2!important; }
    .sb-topnav #izzy-persistent-fullscreen { order:3!important; }
    .sb-topnav .navbar-nav-user { order:4!important; }

    .sb-topnav #mobile-mainmenu-btn {
        width:auto!important;
        min-width:72px!important;
        padding:0 10px!important;
        gap:6px!important;
    }

    .sb-topnav #mobile-mainmenu-btn .izzy-mainmenu-text {
        display:inline-block!important;
        margin:0!important;
        font-size:12px!important;
        line-height:1!important;
    }

    .sb-topnav .navbar-nav-user {
        flex:1 1 auto!important;
        min-width:0!important;
    }

    .sb-topnav .navbar-nav-user #userDropdown {
        width:auto!important;
        min-width:0!important;
        max-width:100%!important;
        min-height:34px!important;
        padding:5px 8px!important;
        border:1px solid #d9e2ec!important;
        border-radius:10px!important;
        background:#f7f9fc!important;
        color:#0b1f52!important;
        box-shadow:0 2px 7px rgba(11,31,82,.07)!important;
    }

    .sb-topnav .navbar-nav-user #userDropdown > i {
        margin:0!important;
        color:#114bc7!important;
        -webkit-text-fill-color:#114bc7!important;
        font-size:17px!important;
    }

    .sb-topnav .navbar-nav-user #user_session {
        flex:1 1 auto!important;
        max-width:140px!important;
        margin:0!important;
        color:#0b1f52!important;
        -webkit-text-fill-color:#0b1f52!important;
        font-size:12px!important;
        font-weight:700!important;
    }

    .sb-topnav .navbar-nav-user #userDropdown::after {
        flex:0 0 auto!important;
        margin-left:2px!important;
        border-top-color:#0b1f52!important;
    }
}

/* Móvil */
@media (max-width:576px) {
    .sb-topnav {
        box-sizing:border-box!important;
        width:100%!important;
        max-width:100vw!important;
        min-height:60px!important;
        padding:0 7px!important;
        gap:5px!important;
        overflow:visible!important;
    }

    .sb-topnav .logo-container {
        flex:0 0 auto!important;
        width:auto!important;
        max-width:84px!important;
        margin:0!important;
        padding:0!important;
    }

    .sb-topnav .logo-container .logo {
        width:82px!important;
        max-width:82px!important;
        height:32px!important;
        object-fit:contain!important;
    }

    .sb-topnav .mobile-mainmenu-wrapper {
        flex:0 0 auto!important;
        width:auto!important;
        min-width:0!important;
        height:34px!important;
        margin:0!important;
    }

    .sb-topnav #mobile-mainmenu-btn {
        width:auto!important;
        min-width:68px!important;
        max-width:76px!important;
        height:34px!important;
        padding:0 9px!important;
        border-radius:10px!important;
    }

    .sb-topnav #mobile-mainmenu-btn .izzy-mainmenu-text {
        font-size:11.5px!important;
    }

    .sb-topnav #sidebarToggle.izzy-navbar-menu-toggle,
    .sb-topnav #izzy-persistent-fullscreen {
        flex:0 0 34px!important;
        width:34px!important;
        min-width:34px!important;
        max-width:34px!important;
        height:34px!important;
        margin:0!important;
    }

    .sb-topnav #mobile-mainmenu-btn i,
    .sb-topnav #sidebarToggle.izzy-navbar-menu-toggle i,
    .sb-topnav #izzy-persistent-fullscreen i {
        font-size:16px!important;
        line-height:1!important;
    }

    .sb-topnav .navbar-nav-user {
        flex:1 1 0!important;
        width:auto!important;
        min-width:0!important;
        margin:0 0 0 1px!important;
    }

    .sb-topnav .navbar-nav-user > .nav-item.dropdown:last-child {
        display:flex!important;
        justify-content:flex-end!important;
        width:100%!important;
        min-width:0!important;
    }

    .sb-topnav .navbar-nav-user #userDropdown {
        width:auto!important;
        max-width:124px!important;
        height:34px!important;
        min-height:34px!important;
        padding:4px 7px!important;
        gap:5px!important;
    }

    .sb-topnav .navbar-nav-user #user_session {
        display:block!important;
        max-width:76px!important;
        font-size:11px!important;
    }

    .sb-topnav .user-dropdown {
        right:0!important;
        left:auto!important;
        max-width:calc(100vw - 14px)!important;
    }
}

/* Teléfonos angostos */
@media (max-width:390px) {
    .sb-topnav {
        padding-left:4px!important;
        padding-right:4px!important;
        gap:3px!important;
    }

    .sb-topnav .logo-container {
        max-width:74px!important;
    }

    .sb-topnav .logo-container .logo {
        width:72px!important;
        max-width:72px!important;
        height:30px!important;
    }

    .sb-topnav #mobile-mainmenu-btn {
        min-width:61px!important;
        max-width:65px!important;
        height:32px!important;
        padding:0 7px!important;
    }

    .sb-topnav #mobile-mainmenu-btn .izzy-mainmenu-text {
        font-size:10.5px!important;
    }

    .sb-topnav #sidebarToggle.izzy-navbar-menu-toggle,
    .sb-topnav #izzy-persistent-fullscreen {
        flex-basis:32px!important;
        width:32px!important;
        min-width:32px!important;
        max-width:32px!important;
        height:32px!important;
    }

    .sb-topnav .navbar-nav-user #userDropdown {
        max-width:105px!important;
        height:32px!important;
        min-height:32px!important;
        padding:4px 5px!important;
    }

    .sb-topnav .navbar-nav-user #user_session {
        max-width:60px!important;
        font-size:10px!important;
    }
}

@media (max-width:340px) {
    .sb-topnav .navbar-nav-user #userDropdown {
        max-width:88px!important;
    }

    .sb-topnav .navbar-nav-user #user_session {
        max-width:44px!important;
    }
}

@media (prefers-reduced-motion:reduce) {
    .sb-topnav #sidebarToggle.izzy-navbar-menu-toggle {
        transition:none;
    }
}


/* ============================================================
   IZZY | MENÚ USUARIO - CONTENCIÓN RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .sb-topnav .navbar-nav-user .user-dropdown {
        position:absolute!important;
        right:0!important;
        left:auto!important;
        width:min(300px, calc(100vw - 16px))!important;
        max-width:calc(100vw - 16px)!important;
        min-width:0!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
    }

    .sb-topnav .navbar-nav-user .user-dropdown .dropdown-item {
        white-space:normal!important;
        overflow-wrap:anywhere!important;
    }
}

@media (max-width: 576px) {
    .sb-topnav .navbar-nav-user .user-dropdown {
        right:0!important;
        left:auto!important;
        width:min(290px, calc(100vw - 12px))!important;
        max-width:calc(100vw - 12px)!important;
    }
}

/* ============================================================
   IZZY | MENÚ USUARIO - POSICIÓN BAJO EL ICONO
   El dropdown nace visualmente desde el control del usuario.
   ============================================================ */
.sb-topnav .navbar-nav-user > .nav-item.dropdown:last-child{
    position:relative!important;
}

.sb-topnav .navbar-nav-user .user-dropdown{
    top:calc(100% + 6px)!important;
    right:0!important;
    left:auto!important;
    margin-top:0!important;
    transform:none!important;
    transform-origin:top right!important;
}

/* En móvil queda pegado al icono sin invadir el borde superior. */
@media (max-width:576px){
    .sb-topnav .navbar-nav-user .user-dropdown{
        top:calc(100% + 5px)!important;
        right:0!important;
        left:auto!important;
    }
}