/* [M161] Layout v2 do app do colaborador — menu lateral no desktop (≥1024px), mesmo sistema visual do
   painel. No celular (<1024px) nada muda: cabeçalho + abas inferiores. Só layout e navegação;
   as telas, regras e IDs continuam os mesmos (o JS existente não é alterado). */
@font-face{font-family:'Chakra Petch';font-weight:600;font-display:swap;src:url(painel/fonts/chakra-petch-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-weight:700;font-display:swap;src:url(painel/fonts/chakra-petch-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(painel/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(painel/fonts/inter-latin-600-normal.woff2) format('woff2')}

@media (min-width:1024px){
  body.lv2 #app{display:grid !important;grid-template-columns:240px minmax(0,1fr);min-height:100vh;background:linear-gradient(90deg,var(--bg2) 240px,transparent 240px)}
  body.lv2 .hud{display:none}                 /* cabeçalho antigo some: tudo vai pro menu lateral */
  body.lv2 nav.nav{display:contents}          /* a faixa de abas deixa de existir como faixa… */
  body.lv2 .nav .nav-inner{display:none}      /* …e o #main-nav é movido para o aside pelo JS */

  body.lv2 #lv2-side{
    grid-row:1 / span 3;
    background:var(--bg2);border-right:1px solid var(--border);
    padding:18px 14px;position:sticky;top:0;height:100vh;
    display:flex;flex-direction:column;gap:4px;overflow-y:auto;z-index:60;
  }
  body.lv2 .lv2-logo{width:188px;max-width:100%;margin:2px auto 8px;display:block;filter:drop-shadow(0 0 10px rgba(225,29,72,.45))}
  body.lv2 .lv2-me{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--bg3);margin:4px 0 8px;cursor:pointer}
  body.lv2 .lv2-me .row{display:flex;gap:10px;align-items:center}
  body.lv2 .lv2-me .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--red),#7c1332);display:grid;place-items:center;font-size:18px;flex:none}
  body.lv2 .lv2-me .nm{font-weight:700;font-size:13px;line-height:1.2;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.lv2 .lv2-me .rk{font-family:'Chakra Petch',sans-serif;font-size:11px;color:var(--gold);letter-spacing:.06em;text-transform:uppercase}
  body.lv2 .lv2-me .xp{height:6px;background:rgba(127,127,127,.18);border-radius:99px;margin:8px 0 6px;overflow:hidden}
  body.lv2 .lv2-me .xp i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .4s}
  body.lv2 .lv2-me .pills{display:flex;gap:6px;font-size:11.5px;color:var(--ink);flex-wrap:wrap}
  body.lv2 .lv2-me .pills span{background:var(--bg2);border:1px solid var(--border);border-radius:99px;padding:2px 8px;white-space:nowrap}
  body.lv2 .lv2-lbl{font-family:'Chakra Petch',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:10px 10px 4px}

  /* o #main-nav original vira menu vertical (mesmos botões, mesmos handlers, mesmo data-screen do tour) */
  body.lv2 #lv2-navhost{position:static;background:none;border:0;z-index:auto}
  body.lv2 #lv2-side .nav-inner{display:flex !important;flex-direction:column;gap:3px;padding:0;overflow:visible;max-width:none;margin:0}
  body.lv2 #lv2-side .nav-inner button{
    font-family:'Chakra Petch',sans-serif;display:flex;align-items:center;gap:10px;padding:9px 12px;
    color:var(--ink-soft);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;
    border-radius:10px;border:0;border-left:3px solid transparent;background:transparent;text-align:left;white-space:nowrap;cursor:pointer;transition:.15s;
  }
  body.lv2 #lv2-side .nav-inner button.active{background:linear-gradient(90deg,rgba(225,29,72,.22),rgba(245,158,11,.10));color:var(--ink);border-left-color:var(--gold)}
  body.lv2 #lv2-side .nav-inner button:hover:not(.active){background:var(--bg3);color:var(--ink)}
  body.lv2 #lv2-side .nav-inner .lv2-lbl{padding:0}

  body.lv2 .lv2-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--border)}
  body.lv2 .lv2-foot .row{display:flex;gap:8px;align-items:center}
  body.lv2 .lv2-foot .theme-btn,body.lv2 .lv2-foot .notif-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:var(--bg3);font-size:15px;position:relative;cursor:pointer;color:var(--ink)}
  body.lv2 .lv2-foot .notif-wrap{position:relative}
  body.lv2 .lv2-foot .notif-panel{position:fixed;top:auto;bottom:24px;left:252px;right:auto}  /* fora do aside (que tem overflow) */
  body.lv2 .lv2-foot .lv2-btn,body.lv2 .lv2-foot .hud-logout{
    flex:1;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
    border:1px solid var(--border);background:var(--bg3);color:var(--ink-soft);padding:8px 10px;border-radius:9px;cursor:pointer;text-align:center;margin:0;
  }
  body.lv2 .lv2-foot .lv2-btn:hover,body.lv2 .lv2-foot .hud-logout:hover{color:var(--ink);border-color:var(--border-bright)}

  /* conteúdo: largo, com respiro do painel */
  body.lv2 main.wrap{max-width:none;padding:22px 28px 110px;grid-column:2}
  body.lv2 .three-col{grid-template-columns:280px minmax(0,1fr) 300px;gap:18px}
  body.lv2 .pod-player{left:240px}             /* mini-player não cobre o menu */
  body.lv2 .lv2-ver{font-size:10px;color:var(--ink-soft);opacity:.7;text-align:center;font-family:monospace}
  /* barra de rolagem do menu: invisível (o menu continua rolando com a roda/toque se faltar altura) */
  body.lv2 #lv2-side{scrollbar-width:none;-ms-overflow-style:none}
  body.lv2 #lv2-side::-webkit-scrollbar{display:none}
  /* telas baixas (notebook): menu compacto para caber sem rolar — logo e bloco do perfil ficam
     iguais (só a fonte do perfil um pouco menor); o que encolhe são espaçamentos, itens e rodapé */
  @media (max-height:860px){
    body.lv2 #lv2-side{padding:12px 12px;gap:2px}
    body.lv2 .lv2-logo{margin:0 auto 4px}
    body.lv2 .lv2-me{padding:8px 10px;margin:2px 0 4px}
    body.lv2 .lv2-me .nm{font-size:12px}
    body.lv2 .lv2-me .rk{font-size:10px}
    body.lv2 .lv2-me .pills{font-size:10.5px;gap:4px}
    body.lv2 .lv2-me .pills span{padding:1px 7px}
    body.lv2 .lv2-me .xp{margin:6px 0 4px;height:5px}
    body.lv2 .lv2-lbl{margin:6px 10px 2px}
    body.lv2 #lv2-side .nav-inner button{padding:7px 12px;font-size:12px}
    body.lv2 .lv2-foot{padding-top:8px;gap:6px}
  }
  @media (max-height:720px){
    body.lv2 #lv2-side .nav-inner button{padding:6px 12px}
    body.lv2 .lv2-ver{display:none}
    body.lv2 .lv2-lbl{margin:4px 10px 1px;font-size:10px}
  }
  @media (max-height:560px){
    body.lv2 .lv2-lbl{display:none}
    body.lv2 #lv2-side .nav-inner button{padding:5px 12px;font-size:11.5px}
    body.lv2 .lv2-foot .lv2-btn,body.lv2 .lv2-foot .hud-logout{padding:6px 10px}
  }
    body.lv2 .lv2-lbl{display:none}
    body.lv2 .lv2-me .xp{display:none}
    body.lv2 #lv2-side .nav-inner button{padding:5px 12px;font-size:11.5px}
  }
}

/* ── CELULAR (<1024px): cabeçalho compacto + abas fixas embaixo (montados por layout-v2.js) ── */
@media (max-width:1023px){
  body.lv2m .hud{display:none}
  body.lv2m nav.nav{display:none}
  body.lv2m #lv2-mhdr{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;background:var(--bg2);border-bottom:1px solid var(--border)}
  body.lv2m .lv2-mlogo{height:30px;width:auto;filter:drop-shadow(0 0 6px rgba(225,29,72,.4))}
  body.lv2m .lv2-mright{display:flex;gap:6px;align-items:center;min-width:0}
  body.lv2m .lv2-pill{display:flex;gap:6px;align-items:center;font-size:11.5px;background:var(--bg3);border:1px solid var(--border);border-radius:99px;padding:4px 9px 4px 4px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
  body.lv2m .lv2-pill .av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--red),#7c1332);display:grid;place-items:center;font-size:11px;flex:none}
  body.lv2m #lv2-mtools{display:flex;gap:4px;align-items:center}
  body.lv2m #lv2-mtools .notif-btn,body.lv2m #lv2-mtools .theme-btn{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:var(--bg3);font-size:14px;position:relative;cursor:pointer;color:var(--ink)}
  body.lv2m #lv2-mtools .notif-wrap{position:static}
  body.lv2m #lv2-mtools .notif-panel{position:fixed;left:12px;right:12px;width:auto;top:56px;max-height:70vh}
  body.lv2m #lv2-mtabs{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--bg2);border-top:1px solid var(--border);box-shadow:0 -6px 16px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom)}
  body.lv2m #lv2-mtabs .nav-inner{display:flex;padding:0;max-width:none;margin:0;overflow-x:auto}
  body.lv2m #lv2-mtabs .nav-inner button{flex:1 0 auto;min-width:52px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px 9px;font-family:'Chakra Petch',sans-serif;font-size:9.5px;letter-spacing:.02em;color:var(--ink-soft);border:0;border-bottom:0;background:transparent;white-space:nowrap;min-height:auto}
  body.lv2m #lv2-mtabs .nav-inner button .ico{font-size:18px;line-height:1}
  body.lv2m #lv2-mtabs .nav-inner button > span{pointer-events:none}  /* o clique tem que chegar no botão (o app lê e.target.dataset.screen) */
  body.lv2m #lv2-mtabs .nav-inner button.active{color:var(--gold);border-bottom:0}
  body.lv2m main.wrap{padding:14px 12px 96px}
  body.lv2m .pod-player{bottom:58px}
  body.lv2m .lv2-mlogout{display:block;width:100%;margin:18px 0 8px;padding:12px;border-radius:10px;border:1px solid var(--border);background:var(--bg2);color:var(--ink-soft);font-family:'Chakra Petch',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
}