/* Estructura compartida para que todas las cabeceras tengan la misma escala. */
:root{
    --ts-shell-width:1300px;
    --ts-header-height:76px;
    --ts-header-height-mobile:68px;
    --ts-brand-size:42px;
    --ts-brand-size-mobile:38px;
}

html:not(.ts-session-ready) .header-principal-login,
html.ts-session-loading .header-principal-login{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

body > #headerPrincipalTrader,
body > header.topbar,
body > #adminHeader{
    box-sizing:border-box !important;
    width:100% !important;
    min-height:var(--ts-header-height) !important;
}

body > #headerPrincipalTrader .header-principal-inner,
body > header.topbar .topbar-inner,
body > #adminHeader .admin-header-inner{
    box-sizing:border-box !important;
    width:min(
        var(--ts-shell-width),
        calc(100% - 30px)
    ) !important;
    min-height:var(--ts-header-height) !important;
    margin:0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
}

body > #headerPrincipalTrader .header-principal-brand,
body > header.topbar .brand,
body > #adminHeader .admin-brand{
    min-width:0 !important;
    flex:1 1 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    overflow:hidden !important;
}

body > #headerPrincipalTrader .header-principal-brand span,
body > header.topbar .brand-text,
body > #adminHeader .admin-brand-name{
    min-width:0 !important;
    font-size:20px !important;
    line-height:1.05 !important;
    letter-spacing:.01em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.ts-session-actions,
.admin-user-area{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    min-width:0 !important;
}

.ts-session-button{
    box-sizing:border-box !important;
    min-height:40px !important;
    width:auto !important;
    margin:0 !important;
    padding:9px 14px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #3a3b40 !important;
    border-radius:9px !important;
    background:#17181b !important;
    color:#fff !important;
    font:800 13px/1 Arial,sans-serif !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    cursor:pointer !important;
}

.ts-session-panel{
    border-color:#b33842 !important;
    background:linear-gradient(180deg,#b52f3a,#8f2029) !important;
}

body > #headerPrincipalTrader .header-principal-brand img,
body > header.topbar .header-logo,
body > header.topbar .ts-logo,
body > #adminHeader .admin-brand-logo{
    box-sizing:border-box !important;
    width:var(--ts-brand-size) !important;
    min-width:var(--ts-brand-size) !important;
    max-width:var(--ts-brand-size) !important;
    height:var(--ts-brand-size) !important;
    min-height:var(--ts-brand-size) !important;
    max-height:var(--ts-brand-size) !important;
    flex:0 0 var(--ts-brand-size) !important;
    border-radius:9px !important;
    object-fit:cover !important;
    transform:none !important;
}

@media(max-width:700px){
    body > #headerPrincipalTrader,
    body > header.topbar,
    body > #adminHeader{
        min-height:var(--ts-header-height-mobile) !important;
    }

    body > #headerPrincipalTrader .header-principal-inner,
    body > header.topbar .topbar-inner,
    body > #adminHeader .admin-header-inner{
        width:calc(100% - 18px) !important;
        min-height:var(--ts-header-height-mobile) !important;
        gap:6px !important;
    }

    body > #headerPrincipalTrader .header-principal-brand img,
    body > header.topbar .header-logo,
    body > header.topbar .ts-logo,
    body > #adminHeader .admin-brand-logo{
        width:var(--ts-brand-size-mobile) !important;
        min-width:var(--ts-brand-size-mobile) !important;
        max-width:var(--ts-brand-size-mobile) !important;
        height:var(--ts-brand-size-mobile) !important;
        min-height:var(--ts-brand-size-mobile) !important;
        max-height:var(--ts-brand-size-mobile) !important;
        flex-basis:var(--ts-brand-size-mobile) !important;
    }

    body > #headerPrincipalTrader .header-principal-brand,
    body > header.topbar .brand,
    body > #adminHeader .admin-brand{
        gap:6px !important;
    }

    body > #headerPrincipalTrader .header-principal-brand span,
    body > header.topbar .brand-text,
    body > #adminHeader .admin-brand-name{
        font-size:13px !important;
        letter-spacing:0 !important;
    }

    body > header.topbar .topbar-inner > div:last-child,
    .ts-session-actions,
    .admin-user-area{
        width:auto !important;
        max-width:none !important;
        gap:5px !important;
    }

    #userEmail,
    #adminEmail,
    .admin-email{
        display:none !important;
    }

    .ts-session-button,
    #logoutButton,
    .admin-logout-button,
    .small-button{
        box-sizing:border-box !important;
        min-width:0 !important;
        width:auto !important;
        max-width:none !important;
        min-height:36px !important;
        height:36px !important;
        margin:0 !important;
        padding:8px 9px !important;
        border-radius:8px !important;
        font-size:11px !important;
        line-height:1 !important;
        white-space:nowrap !important;
    }
}

@media(max-width:380px){
    body > #headerPrincipalTrader .header-principal-brand span,
    body > header.topbar .brand-text,
    body > #adminHeader .admin-brand-name{
        max-width:102px !important;
        font-size:11px !important;
    }

    .ts-session-button,
    #logoutButton,
    .admin-logout-button,
    .small-button{
        padding-inline:7px !important;
        font-size:10px !important;
    }
}

/* Identidad visual única en páginas públicas, panel y administración. */
body > #headerPrincipalTrader .header-principal-brand img,
body > header.topbar .ts-logo,
body > #adminHeader .admin-brand-logo{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    flex:0 0 42px !important;
    border:0 !important;
    border-radius:9px !important;
    background:
        #111 url("/assets/Logo.jpg?v=brand-unified-1")
        center/cover no-repeat !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.12) !important;
    object-fit:cover !important;
}

body > header.topbar .ts-logo{
    overflow:hidden !important;
    color:transparent !important;
    font-size:0 !important;
}

body > #headerPrincipalTrader .header-principal-brand span,
body > header.topbar .brand-text,
body > #adminHeader .admin-brand-name{
    margin:0 !important;
    color:#f5f5f5 !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:20px !important;
    font-style:normal !important;
    font-weight:800 !important;
    line-height:1 !important;
    letter-spacing:.01em !important;
    text-shadow:none !important;
}

body > #headerPrincipalTrader .header-principal-brand strong,
body > header.topbar .brand-text > span,
body > #adminHeader .admin-brand-name strong{
    color:#d52f3b !important;
    font:inherit !important;
}

@media(max-width:700px){
    body > #headerPrincipalTrader .header-principal-brand img,
    body > header.topbar .ts-logo,
    body > #adminHeader .admin-brand-logo{
        width:38px !important;
        min-width:38px !important;
        max-width:38px !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        flex-basis:38px !important;
    }

    body > #headerPrincipalTrader .header-principal-brand span,
    body > header.topbar .brand-text,
    body > #adminHeader .admin-brand-name{
        font-size:13px !important;
    }
}