/* ============================================================
   Shell v2 (Fase A2 do redesign) - a CASCA nova do app.
   Mobile: tab bar fixa + FAB central. Desktop: sidebar clara.
   Transplante visual do mockup mockups/app-v2 (styles.css + desktop.css),
   usando os tokens do styles.css do app (whitelabel --brand continua
   funcionando: AppContext sobrescreve --brand e as derivadas reagem).
   Nunca travessão, só hífen.
   ============================================================ */

/* ---------- grid da casca ---------- */
.shell.v2{grid-template-columns:232px 1fr}

/* ---------- sidebar desktop (clara, como no mockup) ---------- */
.sidev2{background:var(--creme2);border-right:1px solid var(--linha);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:16px 12px 14px}
.sv2-brand{display:flex;align-items:center;gap:10px;padding:2px 6px 14px;min-width:0}
.sv2-brand img{width:40px;height:40px;border-radius:12px;object-fit:contain;flex:0 0 auto;background:var(--brand-softer)}
.sv2-brand .col{min-width:0}
.sv2-brand .nome{display:block;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--marrom);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv2-brand small{display:block;font-size:11px;color:var(--suave);margin-top:1px}

.sv2-new{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;border-radius:14px;border:none;background:var(--brand);color:var(--on-brand);font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(12,29,27,.14);transition:background .12s ease,transform .12s ease}
.sv2-new:hover{background:var(--brand-strong)}
.sv2-new:active{transform:scale(.97)}
.sv2-new i{font-size:18px}

.sv2-nav{display:flex;flex-direction:column;gap:3px;margin-top:14px;flex:1;overflow-y:auto}
.sv2-item{display:flex;align-items:center;gap:11px;min-height:44px;padding:0 12px;border-radius:12px;color:var(--suave);font-size:13.5px;font-weight:600;transition:background .12s ease,color .12s ease}
.sv2-item i{font-size:20px}
.sv2-item:hover{background:var(--creme);color:var(--marrom)}
.sv2-item.active{background:var(--brand-soft);color:var(--brand-strong)}
.sv2-item.active i{color:var(--brand-ink)}

.sv2-foot{margin-top:auto;border-top:1px solid var(--linha);padding-top:10px;display:flex;flex-direction:column;gap:2px}
/* o "Sair" é <button> (ação, não destino) e usa a mesma linha dos links */
.sv2-foot a,.sv2-foot button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border:none;border-radius:11px;background:transparent;font-family:var(--sans);color:var(--suave);font-size:12.5px;font-weight:600;text-align:left;cursor:pointer}
.sv2-foot a i,.sv2-foot button i{font-size:17px}
.sv2-foot a:hover,.sv2-foot button:hover{background:var(--creme);color:var(--marrom)}
.sv2-foot .sv2-cta{border:1px dashed var(--linha);border-radius:11px}
.sv2-foot .sv2-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);margin-left:auto;flex:none}
.sv2-role{padding:4px 12px 0;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}

/* ---------- menu recolhido (só desktop) ----------
   A sidebar vira uma trilha de ícones e devolve ~160px pro conteúdo. O estado
   mora no localStorage (eng_nav_min) e o botão fica na topbar. Tudo dentro do
   min-width de propósito: no mobile a sidebar já não existe, e sem a barreira
   a coluna de 74px sobraria como um vão vazio na tela do celular. */
@media(min-width:781px){
  .shell.v2.navmin{grid-template-columns:74px 1fr}
  .navmin .sidev2{padding:16px 9px 14px}
  .navmin .sv2-brand{justify-content:center;padding:2px 0 14px}
  .navmin .sv2-brand .col{display:none}
  .navmin .sv2-new{gap:0}
  .navmin .sv2-item{justify-content:center;gap:0;padding:0}
  .navmin .sv2-item span{display:none}
  .navmin .sv2-foot a,.navmin .sv2-foot button{justify-content:center;gap:0;padding:0}
  .navmin .sv2-lbl{display:none}
  .navmin .sv2-foot .sv2-cta{position:relative}
  .navmin .sv2-foot .sv2-dot{position:absolute;top:5px;right:5px;margin:0}
  .navmin .sv2-role{display:none}
}

/* ---------- tab bar (mobile) ---------- */
.tabbar-v2{display:none}
/* `.topbar` na frente porque `.tb-mob` sozinho EMPATA com o `.iconbtn` do
   styles.css e perde por ordem de cascata - sem isso o "+" do topo aparece
   tambem no computador, ao lado do "+ Pedido" da barra lateral (dois botoes
   iguais fazendo a mesma coisa na mesma tela) */
.topbar .tb-mob{display:none}

@media(max-width:780px){
  .shell.v2{grid-template-columns:1fr}
  .sidev2{display:none}
  /* 5 abas iguais e nada no meio: o "novo pedido" mudou pra topbar, ao lado
     da lupa, justamente pra barra parar de ter um slot que nao centraliza */
  .tabbar-v2{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:stretch;background:var(--creme2);border-top:1px solid var(--linha);padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:50}
  /* 10px e sem letter-spacing porque o lado de 3 abas fica com ~49px cada e
     "Produção" cortava em 10,5px - o preço de ter o "+" no centro exato */
  .tab-v2{flex:1;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--suave);font-size:10px;font-weight:600;letter-spacing:0;border-radius:12px;-webkit-tap-highlight-color:transparent}
  .tab-v2 i{font-size:23px;line-height:1}
  .tab-v2 span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tab-v2.active{color:var(--brand-strong)}
  .tab-v2.active i{color:var(--brand-ink)}
  /* "+" da topbar: cheio da cor da marca pra ler como acao, ao lado da lupa
     que e so contorno */
  .topbar .tb-mob{display:inline-flex!important}
  /* .topbar na frente de propósito: sem isso o .iconbtn do styles.css empata em
     especificidade e ganha por ordem de cascata (mesmo truque da lupa da busca) */
  .topbar .tb-novo{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-size:22px}
  .topbar .tb-novo:hover{background:var(--brand-strong);border-color:var(--brand-strong);color:var(--on-brand)}
  /* o conteúdo não pode morrer atrás da tab bar */
  .shell.v2 .content{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  /* topbar mobile enxuta: só nome, privacidade e sair */
  .shell.v2 .tb-desk{display:none!important}
}

/* modo TV e impressão: a casca some, como a v1 fazia */
body.tv .sidev2, body.tv .tabbar-v2{display:none!important}
@media print{.sidev2,.tabbar-v2{display:none!important}}

/* ---------- hub Meu negócio ---------- */
.hubv2-head{display:flex;align-items:center;gap:13px;padding:2px 0 16px}
.hubv2-head img{width:54px;height:54px;border-radius:17px;object-fit:contain;background:var(--brand-softer);flex:0 0 auto}
.hubv2-head h1{font-size:22px;margin:0}
.hubv2-head .verloja{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--brand-ink);margin-top:2px}
.hubv2-head .verloja i{font-size:14px}

.hubv2-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:781px){.hubv2-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
.hubv2-card{background:var(--creme2);border:1px solid var(--linha);border-radius:16px;box-shadow:var(--shadow-sm);padding:15px 14px;color:var(--marrom);display:flex;flex-direction:column;gap:10px;min-height:108px;transition:transform .12s ease,box-shadow .12s ease}
.hubv2-card:active{transform:scale(.97)}
@media(min-width:781px){.hubv2-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}
.hubv2-card .ic{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand-strong);display:flex;align-items:center;justify-content:center;font-size:21px}
.hubv2-card h3{font-size:14.5px;font-weight:600;margin:0}
.hubv2-card p{font-size:12px;color:var(--suave);line-height:1.35;margin:2px 0 0}

/* card do nível (segmented) */


/* ---------- modal de escolha do nível (primeira entrada do dono) ---------- */