/* ======================================================================
   Pack no computador (telas a partir de 1024 px)
   Menu lateral no lugar da barra de baixo, conteúdo largo em colunas e
   janelas centralizadas. O celular continua como está (este arquivo só
   vale com media="(min-width:1024px)").
   ====================================================================== */
:root{--side:248px}
body:has(#tabbar:not([hidden])){padding-left:var(--side)}

/* ---- menu lateral ---- */
#tabbar{left:0;right:auto;top:0;bottom:0;width:var(--side);padding:92px 14px 100px;border-top:0;border-right:1px solid var(--line);background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;overflow-y:auto}
#tabbar nav,#tabbar nav.n4{max-width:none;height:auto;display:flex;flex-direction:column;gap:4px;margin:0}
.tab{flex-direction:row;justify-content:flex-start;gap:14px;height:46px;padding:0 14px;border-radius:12px;font-size:15px;color:var(--t2)}
.tab:hover{background:var(--s1);color:var(--t1)}
.tab.on{background:var(--s2);color:var(--t1)}
.tab svg{width:22px;height:22px;flex:none}
#dkBrand,#dkUser{display:none}
#tabbar:not([hidden])~#dkBrand{display:flex;position:fixed;left:0;top:0;width:var(--side);height:84px;align-items:center;gap:12px;padding:0 24px;z-index:21;color:var(--t1);text-decoration:none;font-weight:900;font-stretch:75%;font-size:22px;letter-spacing:.28em}
#tabbar:not([hidden])~#dkBrand svg{width:30px;height:30px;flex:none}
#tabbar:not([hidden])~#dkUser{display:flex;position:fixed;left:14px;bottom:16px;width:calc(var(--side) - 28px);align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line2);border-radius:14px;background:var(--s1);color:var(--t1);text-decoration:none;z-index:21}
#dkUser:hover{background:var(--s2)}
#dkUser .av{width:38px;height:38px;border-radius:50%;background:var(--s3);display:grid;place-items:center;font-weight:800;overflow:hidden;flex:none}
#dkUser .av img{width:100%;height:100%;object-fit:cover}
#dkUser b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dkUser small{display:block;font-size:12px;color:var(--t2)}
#dkUser .tx{min-width:0}

/* ---- conteúdo ---- */
#main{max-width:1180px;margin:0 auto;padding:36px 48px 80px;box-sizing:border-box;min-height:100vh}
.h1{font-size:34px}

/* telas de 1024 a 1279 px: uma coluna só, centralizada */
body[data-v=inicio] #main,body[data-v=nutricao] #main,body[data-v=treino] #main,body[data-v=perfil] #main,body[data-v=cliente] #main{max-width:820px}

/* a partir de 1280 px: painéis em duas colunas */
@media (min-width:1280px){
body[data-v=inicio] #main,body[data-v=nutricao] #main,body[data-v=treino] #main,body[data-v=perfil] #main,body[data-v=cliente] #main{column-count:2;column-gap:44px}
body[data-v=inicio] #main>*,body[data-v=nutricao] #main>*,body[data-v=treino] #main>*,body[data-v=perfil] #main>*,body[data-v=cliente] #main>*{break-inside:avoid}
body[data-v] #main>header.top,body[data-v] #main>.seg,body[data-v] #main>.verdict,body[data-v] #main>.guest,body[data-v] #main>.stats,body[data-v] #main>.chips:first-of-type{column-span:all}
body[data-v=inicio] #main>div:not([class]),body[data-v=perfil] #main>.pf{column-span:all}

}

/* telas de leitura: coluna única, mais larga que o celular, centralizada */
body[data-v=desafios] #main,body[data-v=clientes] #main,body[data-v=mensagens] #main,body[data-v=equipe] #main{max-width:880px}
.post-img{max-height:520px;object-fit:cover}

/* botão Registrar: flutua no canto */
.dock{left:auto;right:40px;bottom:32px;padding:0;background:none}
.dock>div{max-width:none}
.dock .btn{width:auto;min-width:220px;padding:0 36px}

/* janelas (sheets) no centro da tela */
.sheet-wrap{align-items:center}
.sheet{max-width:600px;max-height:88%;border:1px solid var(--line2);border-radius:22px;padding:22px 26px 28px;animation:fade .2s}
.grab{display:none}
#toast{bottom:32px;left:calc(50% + var(--side)/2)}