/* Masthead para páginas sem sidebar; a navegação autenticada é definida abaixo. */
@media (min-width:1024px) {
    :root .app-shell .app-navigation {
        border-bottom:1px solid var(--h-border);
        box-shadow:0 8px 22px color-mix(in srgb, var(--h-bg) 82%, transparent);
    }

    :root .app-shell .app-masthead {
        display:grid;
        grid-template-columns:minmax(150px, 1fr) auto minmax(150px, 1fr);
        align-items:stretch;
        width:100%;
        min-height:76px;
        margin:0;
        padding:0 clamp(24px, 3vw, 52px);
        border:0;
    }

    :root .app-shell .app-masthead > .app-wordmark {
        align-self:center;
    }

    :root .app-shell .app-masthead > span:last-child {
        display:flex;
        align-items:center;
        justify-content:flex-end;
        white-space:nowrap;
    }

    :root .app-shell .app-masthead .tabbar {
        position:static;
        left:auto;
        right:auto;
        bottom:auto;
        transform:none;
        z-index:auto;
        display:flex;
        align-items:stretch;
        justify-content:center;
        width:auto;
        max-width:none;
        height:76px;
        min-height:76px;
        padding:0;
        overflow:visible;
        background:transparent;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    :root .app-shell .app-masthead .tabbar a {
        position:relative;
        flex:0 0 auto;
        min-width:68px;
        max-width:88px;
        min-height:76px;
        padding:10px 11px 8px;
        gap:4px;
        border-radius:0;
        color:var(--h-muted);
        font-size:10px;
        font-weight:600;
        line-height:1.15;
        text-align:center;
        transition:color .18s ease, background-color .18s ease;
    }

    :root .app-shell .app-masthead .tabbar a::after {
        position:absolute;
        right:16px;
        bottom:0;
        left:16px;
        height:3px;
        border-radius:3px 3px 0 0;
        background:var(--h-accent);
        content:"";
        opacity:0;
        transform:scaleX(.45);
        transition:opacity .18s ease, transform .18s ease;
    }

    :root .app-shell .app-masthead .tabbar a:hover {
        color:var(--h-text);
        background:color-mix(in srgb, var(--h-soft) 62%, transparent);
    }

    :root .app-shell .app-masthead .tabbar a.active {
        color:var(--h-accent);
        background:transparent;
    }

    :root .app-shell .app-masthead .tabbar a.active::after {
        opacity:1;
        transform:scaleX(1);
    }

    :root .app-shell .app-masthead .tabbar a img {
        width:21px;
        height:21px;
        opacity:.62;
        filter:brightness(0) invert(.8);
        transition:opacity .18s ease, transform .18s ease;
    }

    :root .app-shell .app-masthead .tabbar a:hover img,
    :root .app-shell .app-masthead .tabbar a.active img {
        opacity:1;
        transform:translateY(-1px);
    }

    :root[data-theme="light"] .app-shell .app-masthead .tabbar a img {
        filter:brightness(0) invert(.38);
    }

    :root .app-shell .app-content {
        padding-bottom:48px;
    }

    :root .app-shell .detail-navigation-fab {
        bottom:24px;
    }
}

/* Em larguras intermediárias, a assinatura não compete com os sete atalhos. */
@media (min-width:1024px) and (max-width:1240px) {
    :root .app-shell .app-masthead {
        grid-template-columns:148px auto;
        padding-inline:24px;
    }

    :root .app-shell .app-masthead > span:last-child { display:none; }
    :root .app-shell .app-masthead .tabbar a { min-width:62px; padding-inline:8px; }
}

/* No celular, o mesmo componente volta a ser a barra fixa inferior. */
@media (max-width:1023px) {
    :root .app-shell .app-masthead {
        display:contents !important;
    }

    :root .app-shell .app-masthead > :not(.tabbar) {
        display:none !important;
    }
}

/* A navegação principal fica na lateral no desktop e na base no celular. */
.drawer-menu a.active { background:var(--h-soft, #392b42); color:var(--h-accent, #b9a0ff); font-weight:700; }
.drawer-menu a:focus-visible, .drawer-more summary:focus-visible { outline:2px solid currentColor; outline-offset:-3px; }
.drawer-more button { width:100%; }
.profile-preferences { display:grid; gap:12px; padding:20px; margin-block:20px; }
.profile-preferences select { min-height:44px; color:inherit; background:var(--h-soft, #29232f); border:1px solid currentColor; border-radius:8px; padding:8px; }
.home-install-inline { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--h-border, #756780); border-radius:16px; margin-block:16px; }
.home-install-inline .install-open { display:flex; flex:1; gap:12px; text-align:left; align-items:center; background:none; color:inherit; border:0; cursor:pointer; }
.home-install-inline img { width:40px; height:40px; }
.home-install-inline .txt { display:grid; gap:4px; }
.home-install-inline .install-dismiss { min-width:44px; min-height:44px; background:none; color:inherit; border:0; cursor:pointer; font-size:24px; }
@media (min-width:1024px) {
    :root .app-shell.has-sidebar .drawer { display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; width:var(--nm-sidebar-width); height:100dvh; transform:none; visibility:visible; overflow-y:auto; z-index:100; }
    :root .app-shell.has-sidebar { --nm-sidebar-width:224px; padding-left:var(--nm-sidebar-width); }
    :root .app-shell.has-sidebar .app-content { margin-left:0; width:100%; }
    /* Sem masthead, metas e viagens não reservam mais os antigos 85px no topo.
       As páginas de detalhe (como perfil) continuam com cabeçalho no fluxo. */
    :root .app-shell.has-sidebar .page-header { top:var(--nm-safe-top,0px); }
    :root .app-shell.has-sidebar .app-navigation,
    :root .app-shell.has-sidebar .tabbar,
    :root .app-shell.has-sidebar .drawer-backdrop,
    :root .app-shell-home .page-header { display:none !important; }
}

/* Dimensões incluem padding: os destinos não crescem com a altura da sidebar. */
:root .app-shell .drawer,
:root .app-shell .drawer * { box-sizing:border-box; }
:root .app-shell .drawer > * { flex-shrink:0; }
:root .app-shell .drawer-header { padding:calc(20px + var(--nm-safe-top,0px)) 20px 16px; }
:root .app-shell .drawer-wordmark { min-height:40px; gap:8px; font-size:26px; }
:root .app-shell .drawer-wordmark > span:first-child { font-size:30px; color:var(--h-accent); }
:root .app-shell .drawer-user {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:14px 20px;
    border-left:0;
    border-right:0;
    background:none;
    color:inherit;
    font:inherit;
    text-align:left;
}
:root .app-shell .drawer-user:focus-visible { outline:2px solid var(--h-accent); outline-offset:-3px; }
:root .app-shell .drawer-user .avatar { width:36px; height:36px; }
:root .app-shell .drawer-menu {
    display:flex;
    flex:0 0 auto;
    flex-direction:column;
    gap:4px;
    margin:16px 0;
    padding:0 12px;
    list-style:none;
}
:root .app-shell .drawer-menu > li { flex:0 0 auto; margin:0; padding:0; }
:root .app-shell .drawer-menu :is(a, button, summary) {
    min-height:46px;
    padding:10px 12px;
    border:0;
    border-radius:10px;
    color:var(--h-muted);
    font:500 14px/24px var(--font-inter);
    text-decoration:none;
    cursor:pointer;
}
:root .app-shell .drawer-menu :is(a, button) {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    background:transparent;
}
:root .app-shell .drawer-menu a span { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:root .app-shell .drawer-menu :is(a, button, summary):hover { color:var(--h-text); background:var(--h-soft); }
:root .app-shell .drawer-menu a.active { color:var(--h-accent); background:var(--h-soft); font-weight:700; }
:root .app-shell .drawer-menu :is(a, button, summary):focus-visible { outline:2px solid var(--h-accent); outline-offset:-2px; }
:root .app-shell .drawer-nav-icon { width:20px; height:20px; flex:0 0 20px; object-fit:contain; filter:brightness(0) invert(.8); }
:root[data-theme="light"] .app-shell .drawer-nav-icon { filter:brightness(0) invert(.38); }
:root .app-shell .drawer-menu .icon { background-color:currentColor; }
/* Preserva o recolhimento nativo: o wrapper interno respeita o details fechado. */
:root .app-shell .drawer-more summary { list-style-position:inside; }
:root .app-shell .drawer-more summary::marker { color:var(--h-accent); }
:root .app-shell .drawer-more-items { padding-left:20px; }
:root .app-shell .drawer-footer { margin-top:auto; padding:12px 12px 20px; border-top:1px solid var(--h-border); }
:root .app-shell .drawer-support { border-radius:10px; color:var(--h-muted); }
@media (max-width:1023px) {
    :root .app-shell-home .app-navigation { display:contents !important; }
    :root .app-shell-home .tabbar { position:fixed !important; inset:auto 0 0 !important; display:flex !important; transform:none !important; opacity:1 !important; visibility:visible !important; padding-bottom:env(safe-area-inset-bottom, 0px) !important; min-height:calc(64px + env(safe-area-inset-bottom, 0px)); z-index:100; }
    :root .app-shell-home .app-content { padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }
    :root .app-shell-home .home-greeting { min-height:56px; box-sizing:border-box; }
    :root .app-shell-home .page-header { height:56px; min-height:56px; }
}

.tabbar .tabbar-more { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:44px; min-height:44px; border:0; background:transparent; color:inherit; font:inherit; font-size:10px; cursor:pointer; }
@media (max-width:1023px) {
    :root .app-shell-home .tabbar { width:100% !important; max-width:none !important; box-sizing:border-box; border-radius:0; }
}

/* Legibilidade e alvos de toque da navegação, inclusive no menu institucional. */
:root .app-shell .drawer-menu :is(a, button, summary),
:root .app-shell .drawer-user .sub,
:root .app-shell .drawer-support { font-size:14px; line-height:1.4; }
:root .app-shell .drawer-support {
    display:flex; align-items:center; justify-content:flex-start; gap:10px;
    width:100%; min-height:48px; height:auto; padding:10px 12px; text-align:left;
}
:root .app-shell .drawer-support span { min-width:0; overflow-wrap:anywhere; }
@media (max-width:1023px) {
    :root .app-shell .drawer-menu :is(a, button, summary),
    :root .app-shell .drawer-user,
    :root .app-shell .tabbar :is(a, button) { min-width:48px; min-height:48px; box-sizing:border-box; }
    :root .app-shell-home .app-masthead .tabbar a,
    :root .app-shell-home .app-masthead .tabbar a span { font-size:12px; line-height:1.25; }
}