/* Versão B · Celular primeiro: a camisa ocupa a tela, os controles ficam numa gaveta para o polegar. */
:root{--barra:3.4rem;--cta:4.4rem;--gaveta-min:4.1rem;--seguro:env(safe-area-inset-bottom,0px)}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body.app{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--fundo)}
.barra{display:flex;align-items:center;justify-content:space-between;gap:.6rem;height:var(--barra);padding:0 .9rem;flex:0 0 auto;background:rgba(6,20,31,.85);border-bottom:1px solid var(--linha);backdrop-filter:blur(10px);z-index:5}
.marca{font-size:1.5rem}.marca img{height:30px}
.selo-versao{font-size:.68rem;color:var(--mudo);text-align:center;line-height:1.2}
.preco-pill{margin:0;white-space:nowrap;display:flex;align-items:baseline;gap:.35rem;background:var(--painel);border:1px solid var(--linha);border-radius:99px;padding:.2rem .8rem;font-size:.7rem;color:var(--mudo)}
.preco-pill b{font:400 1.5rem/1 var(--titulo);color:var(--txt);letter-spacing:.03em}
.app-main{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.vista{position:relative;flex:1 1 auto;min-height:0;background:radial-gradient(110% 80% at 50% 25%,#fff 0,#f4f7f9 60%,#e6ecf0 100%)}
#tela3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.plano{position:absolute;left:50%;top:50%;width:min(96%,560px);transform:translate(-50%,-50%);border-radius:.8rem}
.aviso-3d{position:absolute;left:.6rem;right:.6rem;bottom:.6rem;margin:0;background:rgba(2,16,25,.92);border:1px solid var(--linha);border-radius:.6rem;padding:.5rem .8rem;font-size:.8rem;color:var(--mudo)}
.flutuantes{position:absolute;inset:.5rem .5rem auto .5rem;display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;pointer-events:none}
.flutuantes>*{pointer-events:auto}
.papeis{display:flex;gap:.25rem;background:rgba(6,20,31,.78);backdrop-filter:blur(8px);border:1px solid var(--linha);border-radius:.8rem;padding:.2rem}
.papeis button{min-height:44px;min-width:5.2rem;background:transparent;color:var(--mudo);border:0;border-radius:.6rem;font:400 1.15rem/1 var(--titulo);letter-spacing:.05em;cursor:pointer}
.papeis button[aria-selected="true"]{background:var(--azul);color:#00131d}
.lado{display:flex;flex-direction:column;gap:.3rem}
.lado .mini{background:rgba(6,20,31,.78);backdrop-filter:blur(8px);min-width:4.2rem;min-height:44px}
/* gaveta */
.gaveta{position:relative;flex:0 0 auto;height:var(--alt,46dvh);display:flex;flex-direction:column;background:var(--painel);border-top:1px solid var(--linha);border-radius:1.2rem 1.2rem 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.4);transition:height .28s cubic-bezier(.2,.8,.2,1);z-index:4;margin-bottom:calc(var(--cta) + var(--seguro))}
.gaveta[data-estado="recolhida"]{--alt:var(--gaveta-min)}
.gaveta[data-estado="meia"]{--alt:44dvh}
.gaveta[data-estado="cheia"]{--alt:calc(100dvh - var(--barra) - var(--cta) - var(--seguro) - 7rem)}
.gaveta.arrastando{transition:none}
.alca{flex:0 0 auto;height:44px;background:none;border:0;cursor:grab;touch-action:none;display:grid;place-items:center;padding:0}
.alca span{width:2.8rem;height:.3rem;border-radius:99px;background:var(--linha)}
.abas{flex:0 0 auto;display:flex;gap:.3rem;overflow-x:auto;padding:0 .7rem .5rem;scroll-snap-type:x proximity;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{flex:0 0 auto;scroll-snap-align:center;min-height:var(--toque);padding:.4rem 1rem;background:var(--painel2);color:var(--mudo);border:1px solid var(--linha);border-radius:99px;font:400 1.2rem/1 var(--titulo);letter-spacing:.05em;cursor:pointer;white-space:nowrap}
.aba[aria-selected="true"]{background:var(--azul);border-color:var(--azul);color:#00131d}
.abas-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.4rem 1rem 1.5rem}
.gaveta[data-estado="recolhida"] .abas-corpo{display:none}
.painel-aba[hidden]{display:none}
.painel-aba h2{font-size:1.8rem;line-height:1;margin-bottom:.4rem}
details.prontos{border:1px solid var(--linha);border-radius:var(--raio);padding:.2rem .8rem;margin:1rem 0}
details.prontos summary{cursor:pointer;min-height:var(--toque);display:flex;align-items:center;color:var(--azul);font:400 1.2rem/1 var(--titulo);letter-spacing:.05em}
/* barra de pedido: vem de ../nucleo/base.css (.cta), aqui só a posição */
.cta{position:absolute;left:0;right:0;bottom:0;height:calc(var(--cta) + var(--seguro))}
/* tela larga ou celular deitado: a gaveta vira barra lateral e a camisa fica inteira ao lado */
@media (min-width:1000px),(orientation:landscape) and (max-height:520px){
  .app-main{flex-direction:row}
  .vista{flex:1 1 auto}
  .gaveta{flex:0 0 min(30rem,46vw);height:100%;margin-bottom:var(--cta);border-radius:0;border-top:0;border-left:1px solid var(--linha);box-shadow:none;--alt:100%}
  .gaveta[data-estado]{--alt:100%}
  .gaveta[data-estado="recolhida"] .abas-corpo{display:block}
  .alca{display:none}
  .abas{padding-top:.8rem;flex-wrap:wrap;overflow:visible}
  .cta{left:auto;width:min(30rem,46vw);right:0}
  .selo-versao{font-size:.78rem}
}
@media (orientation:landscape) and (max-height:520px){
  :root{--barra:2.6rem;--cta:3.8rem}
  .marca{font-size:1.2rem}.marca img{height:24px}.selo-versao{display:none}.preco-pill b{font-size:1.2rem}
  .flutuantes{flex-direction:column;align-items:flex-start}
  .papeis button{min-height:44px}
}
@media (max-height:620px) and (max-width:999px){.gaveta[data-estado="meia"]{--alt:52dvh}}
@media (prefers-reduced-motion:reduce){.gaveta{transition:none}}

@media (max-width:520px){.selo-versao .mais{display:none}.selo-versao{font-size:.75rem;font-weight:600;color:var(--azul)}.marca{font-size:1.35rem}.marca img{height:28px}}
@media (orientation:landscape) and (max-height:520px){.aba{min-height:44px;padding:.2rem .85rem;font-size:1.05rem}.abas{gap:.25rem;padding-top:.4rem}.painel-aba h2{font-size:1.5rem}}
@media (max-height:700px) and (orientation:portrait){.papeis button{min-width:3.4rem;padding:0 .6rem;font-size:1rem}.lado .mini{min-width:3.6rem;padding:.2rem .5rem;font-size:.8rem}}
/* reserva a altura das abas antes do JS criá-las (o corpo descia 101 px no desktop, onde elas quebram em 2 linhas) */
.abas{min-height:3.7rem}
@media (min-width:1000px){.abas{min-height:7rem;align-content:flex-start}}