/*
|--------------------------------------------------------------------------
| F53 R9 · GLOBAL SHELL / NAVIGATION / RESPONSIVE FOUNDATION
|--------------------------------------------------------------------------
| Capa estructural global, no destructiva.
| - Desktop rail + mobile bottom navigation
| - Global app bar
| - Ancho útil premium
| - Safe-area / responsive / accessibility
| - Compatible con experiencias F360 oscuras y dashboards claros
*/

:root{
    --r9-shell-h:64px;
    --r9-rail-w:224px;
    --r9-mobile-nav-h:72px;
    --r9-bg:#eef3f6;
    --r9-panel:#ffffff;
    --r9-panel-soft:#f7fafb;
    --r9-text:#102b3b;
    --r9-muted:#6f8795;
    --r9-line:rgba(16,43,59,.12);
    --r9-accent:#0aa78f;
    --r9-accent-strong:#087f72;
    --r9-navy:#071923;
    --r9-shadow:0 18px 50px rgba(10,38,52,.10);
}

[data-theme="dark"]{
    --r9-bg:#050c13;
    --r9-panel:#0a1823;
    --r9-panel-soft:#0d202d;
    --r9-text:#f5fbff;
    --r9-muted:#9db3c1;
    --r9-line:rgba(174,207,224,.15);
    --r9-accent:#50e1bd;
    --r9-accent-strong:#50e1bd;
    --r9-shadow:0 22px 60px rgba(0,0,0,.30);
}

html{
    scroll-padding-top:calc(var(--r9-shell-h) + 18px);
}

body.f53-r9-authenticated{
    min-height:100vh;
    padding:0;
    background:
        radial-gradient(circle at 8% 4%,rgba(10,167,143,.07),transparent 23%),
        linear-gradient(180deg,var(--r9-bg),var(--r9-bg));
    color:var(--r9-text);
}

body.f53-r9-authenticated *{
    min-width:0;
}

body.f53-r9-authenticated img,
body.f53-r9-authenticated svg,
body.f53-r9-authenticated video,
body.f53-r9-authenticated canvas{
    max-width:100%;
}

.f53-r9-skip{
    position:fixed;
    left:16px;
    top:-60px;
    z-index:100050;
    padding:10px 14px;
    border-radius:10px;
    background:#fff;
    color:#062d38;
    font-weight:900;
    text-decoration:none;
    transition:top .16s ease;
}

.f53-r9-skip:focus{
    top:10px;
}

/* Global top bar */
.f53-r9-shellbar{
    position:fixed;
    inset:0 0 auto 0;
    z-index:99950;
    height:var(--r9-shell-h);
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    padding:0 18px;
    border-bottom:1px solid var(--r9-line);
    background:color-mix(in srgb,var(--r9-panel) 90%,transparent);
    color:var(--r9-text);
    box-shadow:0 8px 30px rgba(7,25,35,.06);
    backdrop-filter:blur(20px) saturate(1.2);
}

.f53-r9-brand{
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
}

.f53-r9-brand-mark{
    display:grid;
    place-items:center;
    width:44px;
    height:38px;
    border:1px solid color-mix(in srgb,var(--r9-accent) 42%,transparent);
    border-radius:13px;
    background:linear-gradient(145deg,var(--r9-navy),#10323b);
    color:#72f3d7;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 7px 22px rgba(0,0,0,.12);
    font-size:.78rem;
    font-weight:1000;
    letter-spacing:-.03em;
}

.f53-r9-brand-copy{
    display:grid;
    line-height:1.05;
}

.f53-r9-brand-copy b{
    color:var(--r9-text);
    font-size:.83rem;
}

.f53-r9-brand-copy small{
    margin-top:3px;
    color:var(--r9-muted);
    font-size:.58rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.f53-r9-workspace{
    min-width:0;
    display:grid;
    justify-items:start;
    padding-left:18px;
    border-left:1px solid var(--r9-line);
}

.f53-r9-workspace small{
    color:var(--r9-muted);
    font-size:.51rem;
    font-weight:1000;
    letter-spacing:.12em;
}

.f53-r9-workspace strong{
    overflow:hidden;
    max-width:100%;
    margin-top:2px;
    color:var(--r9-text);
    font-size:.78rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.f53-r9-shell-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}

.f53-r9-icon-action{
    display:grid!important;
    place-items:center;
    width:38px!important;
    height:38px!important;
    min-height:38px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid var(--r9-line)!important;
    border-radius:12px!important;
    background:var(--r9-panel-soft)!important;
    color:var(--r9-text)!important;
    text-decoration:none!important;
    font-size:.88rem!important;
    font-weight:900!important;
    box-shadow:none!important;
}

.f53-r9-icon-action:hover,
.f53-r9-icon-action:focus-visible{
    border-color:color-mix(in srgb,var(--r9-accent) 42%,var(--r9-line))!important;
    color:var(--r9-accent-strong)!important;
}

.f53-r9-user-chip{
    display:flex;
    align-items:center;
    gap:8px;
    height:40px;
    padding:4px 10px 4px 4px;
    border:1px solid var(--r9-line);
    border-radius:999px;
    background:var(--r9-panel-soft);
}

.f53-r9-user-chip>span{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--r9-accent),#3c79cf);
    color:#fff;
    font-size:.68rem;
    font-weight:1000;
}

.f53-r9-user-chip small{
    max-width:110px;
    overflow:hidden;
    color:var(--r9-text);
    font-size:.66rem;
    font-weight:900;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Main application stage */
body.f53-r9-authenticated > main.wrap.f53-r9-stage{
    width:min(1680px,calc(100vw - 32px))!important;
    max-width:1680px!important;
    min-height:calc(100vh - var(--r9-shell-h) - 30px);
    margin:calc(var(--r9-shell-h) + 18px) auto 94px!important;
    padding:clamp(10px,1.8vw,28px)!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
}

body.f53-r9-authenticated > main.wrap.f53-r9-stage > .status{
    position:relative;
    z-index:20;
    margin:0 auto 14px;
    width:min(100%,1480px);
    border:1px solid color-mix(in srgb,var(--r9-accent) 28%,var(--r9-line));
    background:color-mix(in srgb,var(--r9-accent) 8%,var(--r9-panel));
    color:var(--r9-text);
    box-shadow:var(--r9-shadow);
}

/* Generic surfaces get predictable width without changing their business UI. */
body.f53-r9-authenticated :is(.dashboard-shell,.visual-dashboard,.f53-page,.f360-player-hub,.child360-shell,.f53coach-shell,.f360-coach,.f360-execution){
    width:100%;
    max-width:100%;
}

body.f53-r9-authenticated .dashboard-shell{
    margin:0!important;
    border-radius:24px;
}

body.f53-r9-authenticated .visual-dashboard{
    max-width:1480px;
}

body.f53-r9-authenticated .f53-page{
    left:auto!important;
    width:100%!important;
    max-width:1520px!important;
    margin-inline:auto;
    transform:none!important;
}

body.f53-r9-authenticated :is(input,select,textarea,button,a){
    -webkit-tap-highlight-color:transparent;
}

body.f53-r9-authenticated :is(input,select,textarea,button,a):focus-visible{
    outline:2px solid color-mix(in srgb,var(--r9-accent) 76%,white);
    outline-offset:2px;
}

/* Navigation: desktop rail */
.f53-r9-nav-brand,
.f53-r9-nav-footer{
    display:none;
}

@media(min-width:1180px){
    body.f53-r9-authenticated{
        padding-left:var(--r9-rail-w);
    }

    body.f53-r9-authenticated .f53-r9-shellbar{
        left:var(--r9-rail-w);
    }

    body.f53-r9-authenticated > main.wrap.f53-r9-stage{
        width:min(1680px,calc(100vw - var(--r9-rail-w) - 34px))!important;
        margin-right:auto!important;
        margin-left:auto!important;
        margin-bottom:34px!important;
    }

    body.f53-r9-authenticated .bottom-nav.f53-r9-nav{
        position:fixed!important;
        inset:0 auto 0 0!important;
        z-index:99960!important;
        width:var(--r9-rail-w)!important;
        height:100vh!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        gap:5px!important;
        margin:0!important;
        padding:16px 12px 18px!important;
        border:0!important;
        border-right:1px solid rgba(152,189,207,.13)!important;
        border-radius:0!important;
        background:
            radial-gradient(circle at 50% 5%,rgba(80,225,189,.10),transparent 24%),
            linear-gradient(180deg,#07131d,#06101a 70%,#050c13)!important;
        color:#eef8fc!important;
        box-shadow:10px 0 38px rgba(0,0,0,.14)!important;
        backdrop-filter:none!important;
    }

    .f53-r9-nav-brand{
        display:flex;
        align-items:center;
        gap:10px;
        min-height:72px;
        margin-bottom:9px;
        padding:9px 8px 13px;
        border-bottom:1px solid rgba(174,207,224,.11);
    }

    .f53-r9-nav-brand>span{
        display:grid;
        place-items:center;
        width:46px;
        height:42px;
        flex:0 0 46px;
        border:1px solid rgba(80,225,189,.24);
        border-radius:14px;
        background:rgba(80,225,189,.08);
        color:#67e8ca;
        font-size:.75rem;
        font-weight:1000;
    }

    .f53-r9-nav-brand>div{
        display:grid;
        min-width:0;
    }

    .f53-r9-nav-brand b{
        overflow:hidden;
        color:#f5fbff;
        font-size:.69rem;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .f53-r9-nav-brand small{
        margin-top:3px;
        color:#7896a8;
        font-size:.52rem;
        font-weight:800;
    }

    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>a,
    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>form{
        width:100%;
        margin:0!important;
    }

    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>a{
        position:relative;
        display:grid!important;
        grid-template-columns:34px minmax(0,1fr)!important;
        align-items:center!important;
        justify-items:start!important;
        gap:10px!important;
        min-height:48px;
        padding:7px 10px!important;
        border:1px solid transparent;
        border-radius:13px;
        color:#a9c0ce!important;
        text-decoration:none;
        font-size:.69rem!important;
        font-weight:800;
        transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
    }

    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>a:hover{
        transform:translateX(2px);
        border-color:rgba(80,225,189,.10);
        background:rgba(255,255,255,.035);
        color:#fff!important;
    }

    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>a.active,
    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>a[data-r9-active="true"]{
        border-color:rgba(80,225,189,.18);
        background:linear-gradient(90deg,rgba(80,225,189,.13),rgba(80,225,189,.025));
        color:#6bf0d1!important;
        box-shadow:inset 3px 0 0 #50e1bd;
    }

    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>a span:first-child{
        display:grid;
        place-items:center;
        width:30px;
        height:30px;
        border-radius:10px;
        background:rgba(255,255,255,.035);
        color:inherit;
        font-size:1rem!important;
    }

    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>a span:last-child{
        justify-self:start;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>form button{
        display:grid!important;
        grid-template-columns:34px minmax(0,1fr)!important;
        align-items:center!important;
        justify-items:start!important;
        gap:10px!important;
        width:100%!important;
        min-height:48px!important;
        margin:0!important;
        padding:7px 10px!important;
        border:1px solid transparent!important;
        border-radius:13px!important;
        background:transparent!important;
        color:#8da7b7!important;
        font:inherit!important;
        font-size:.69rem!important;
        font-weight:800!important;
        box-shadow:none!important;
    }

    .f53-r9-nav-footer{
        display:grid;
        grid-template-columns:auto 1fr;
        align-items:center;
        gap:8px;
        margin-top:auto;
        padding:13px 8px 0;
        border-top:1px solid rgba(174,207,224,.10);
        color:#668596;
    }

    .f53-r9-nav-footer span{
        display:grid;
        place-items:center;
        width:27px;
        height:27px;
        border-radius:9px;
        background:rgba(80,225,189,.07);
        color:#50e1bd;
        font-size:.55rem;
        font-weight:1000;
    }

    .f53-r9-nav-footer small{
        font-size:.52rem;
        font-weight:800;
    }

    body.f53-r9-authenticated .f53-demo-masterbar,
    body.f53-r9-authenticated.f53-experience .f53-demo-masterbar{
        top:calc(var(--r9-shell-h) + 12px)!important;
        right:18px!important;
        bottom:auto!important;
    }
}

/* Mobile / tablet navigation */
@media(max-width:1179px){
    body.f53-r9-authenticated{
        padding-bottom:calc(var(--r9-mobile-nav-h) + env(safe-area-inset-bottom));
    }

    body.f53-r9-authenticated > main.wrap.f53-r9-stage{
        margin-top:calc(var(--r9-shell-h) + 12px)!important;
        margin-bottom:18px!important;
        padding-bottom:16px!important;
    }

    body.f53-r9-authenticated .bottom-nav.f53-r9-nav{
        position:fixed!important;
        inset:auto 0 0 0!important;
        z-index:99970!important;
        display:grid!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        gap:2px!important;
        width:100%!important;
        min-height:var(--r9-mobile-nav-h)!important;
        margin:0!important;
        padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
        border:0!important;
        border-top:1px solid var(--r9-line)!important;
        border-radius:0!important;
        background:color-mix(in srgb,var(--r9-panel) 94%,transparent)!important;
        box-shadow:0 -10px 35px rgba(7,25,35,.11)!important;
        backdrop-filter:blur(22px) saturate(1.15)!important;
    }

    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>a,
    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>form>button{
        display:grid!important;
        justify-items:center!important;
        align-content:center!important;
        gap:3px!important;
        min-height:54px!important;
        margin:0!important;
        padding:5px 2px!important;
        border:0!important;
        border-radius:12px!important;
        background:transparent!important;
        color:var(--r9-muted)!important;
        text-decoration:none!important;
        font-size:.60rem!important;
        font-weight:850!important;
        line-height:1.05!important;
        box-shadow:none!important;
    }

    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>a span:first-child,
    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>form>button span:first-child{
        font-size:1.08rem!important;
    }

    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>a.active,
    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>a[data-r9-active="true"]{
        background:color-mix(in srgb,var(--r9-accent) 9%,transparent)!important;
        color:var(--r9-accent-strong)!important;
    }

    .f53-r9-nav-brand,
    .f53-r9-nav-footer{
        display:none!important;
    }

    body.f53-r9-authenticated .f53-demo-masterbar,
    body.f53-r9-authenticated.f53-experience .f53-demo-masterbar{
        top:auto!important;
        right:10px!important;
        bottom:calc(var(--r9-mobile-nav-h) + env(safe-area-inset-bottom) + 10px)!important;
        max-width:calc(100vw - 20px)!important;
    }
}

@media(max-width:760px){
    :root{
        --r9-shell-h:58px;
        --r9-mobile-nav-h:68px;
    }

    .f53-r9-shellbar{
        gap:9px;
        padding-inline:10px;
    }

    .f53-r9-brand-mark{
        width:40px;
        height:36px;
    }

    .f53-r9-brand-copy{
        display:none;
    }

    .f53-r9-workspace{
        padding-left:10px;
    }

    .f53-r9-workspace small{
        display:none;
    }

    .f53-r9-workspace strong{
        font-size:.70rem;
    }

    .f53-r9-user-chip{
        width:36px;
        padding:3px;
        border-radius:12px;
    }

    .f53-r9-user-chip>span{
        width:28px;
        height:28px;
    }

    .f53-r9-user-chip small{
        display:none;
    }

    .f53-r9-icon-action{
        width:34px!important;
        height:34px!important;
        min-height:34px!important;
    }

    body.f53-r9-authenticated > main.wrap.f53-r9-stage{
        width:100%!important;
        margin-top:calc(var(--r9-shell-h) + 7px)!important;
        padding:7px!important;
    }

    body.f53-r9-authenticated .dashboard-shell{
        border-radius:18px;
    }

    body.f53-r9-authenticated .f53-page{
        padding-inline:7px!important;
    }
}

@media(max-width:390px){
    .f53-r9-shell-actions{
        gap:4px;
    }

    .f53-r9-shell-actions .f53-r9-icon-action:first-child{
        display:none!important;
    }

    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>a,
    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>form>button{
        font-size:.55rem!important;
    }
}

/* Dark cinematic profiles keep their identity inside the same shell. */
body.f53-r9-authenticated.f53-experience{
    --r9-bg:#030912;
    --r9-panel:#07131e;
    --r9-panel-soft:#0a1a27;
    --r9-text:#f5fbff;
    --r9-muted:#91aebe;
    --r9-line:rgba(163,197,215,.14);
    --r9-accent:#50e1bd;
    --r9-accent-strong:#5aebc8;
}

body.f53-r9-authenticated.f53-experience > main.wrap.f53-r9-stage{
    padding-inline:clamp(7px,1.4vw,20px)!important;
}

/* Make horizontal data surfaces safe on small screens instead of breaking layout. */
@media(max-width:900px){
    body.f53-r9-authenticated :is(.table-responsive,.f53-table-wrap,.data-table-wrap){
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}

@media(prefers-reduced-motion:reduce){
    .f53-r9-skip,
    body.f53-r9-authenticated .bottom-nav.f53-r9-nav>a{
        transition:none!important;
    }
}