/* T-0661 Studio (STU-1): editor de camadas. So classes .stu-*, sobre os tokens do app.css; sem estilo inline (CSP).
   Computador: cena a esquerda (cabe na altura da tela, sem esticar), paineis a direita. Celular (ate 700 px): uma coluna,
   alvos de 48 px, campos de 16 px, a pagina rola por cima da cena (arrastar livre so no computador). */
.stu-lista{max-width:960px}
.stu-barra{margin:0 0 16px;align-items:center}
.stu-barra .tsp{flex:1}
.stu-sep{width:1px;align-self:stretch;background:var(--line2);margin:0 4px}
.stu-estado{font-size:13px;font-weight:600;color:var(--warn)}
.stu-estado:empty{display:none}
.stu-gira svg{transform:scaleX(-1)}
.stu-cima svg{transform:rotate(-90deg)}
.stu-baixo svg{transform:rotate(90deg)}
.stu-cima,.stu-baixo,.stu-gira{display:inline-flex}

.stu-grade{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.stu-palco{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;background:var(--bg2)}
/* --stu-alto: espaco da posicao do canvas ate o pe da janela, calculado pelo studio.js (a cena inteira cabe na primeira tela) */
.stu-canvas{display:block;width:auto;height:auto;max-width:100%;max-height:var(--stu-alto,max(320px,calc(100vh - 300px)));background:#fff;border-radius:4px;box-shadow:var(--sh);touch-action:none;cursor:default}
.stu-canvas:focus{outline:none}
.stu-canvas:focus-visible{outline:3px solid #142e4f;outline-offset:3px}
.stu-lado{display:grid;gap:16px;min-width:0}
.stu-painel{padding:18px}
.stu-painel .ch{margin-bottom:10px}

.stu-cams{list-style:none;margin:0;padding:0}
.stu-cam{padding:8px;border-bottom:1px solid var(--line);border-radius:10px}
.stu-cam:last-child{border-bottom:0}
.stu-cam.on{background:var(--info-bg);border-bottom-color:transparent}
.stu-nome{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;width:100%;min-height:40px;padding:4px 6px;border-radius:8px}
.stu-nome:hover{background:var(--bg)}
.stu-cam.on .stu-nome:hover{background:transparent}
.stu-nome:focus-visible{outline:2px solid #142e4f;outline-offset:1px}
.stu-nome b{flex:1 1 9rem;min-width:0;font-weight:650;overflow-wrap:anywhere}
.stu-tipo{flex:none;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold2)}
.stu-ac{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.stu-ord{min-width:40px;padding:0 8px}

.stu-cor{display:flex;align-items:center;gap:8px}
.stu-amostra{width:30px;height:30px;flex:none;border-radius:8px;border:1px solid var(--line2)}
.stu input[type=number]{width:100%;font:inherit;font-size:15px;padding:10px 12px;min-height:44px;border:1px solid var(--bc,#8a8678);border-radius:9px;background:var(--surf);color:var(--txt)}
.stu input[type=number]:focus{outline:none;border-color:#142e4f;box-shadow:0 0 0 3px rgba(20,46,79,.25)}
.stu input[type=number]:disabled{background:var(--bg);color:var(--mut);cursor:not-allowed}
.stu .rule{margin-bottom:14px}
.stu .rule .btn{margin-left:6px}

.stu-janela{width:min(440px,calc(100vw - 32px));border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh2);color:var(--txt);background:var(--surf)}
.stu-janela::backdrop{background:rgba(10,12,16,.5)}
.stu-janela h3{margin-bottom:8px}

@media(max-width:1100px){
  .stu-grade{grid-template-columns:minmax(0,1fr) 320px}
}
@media(max-width:980px){
  .stu-grade{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  .stu-barra{gap:8px}
  .stu-barra .btn{flex:1 1 calc(50% - 4px);min-width:0}
  .stu-barra .btn.pri{flex-basis:100%}
  .stu-sep,.stu-barra .tsp{display:none}
  .stu-estado{flex-basis:100%;text-align:center}
  .stu-palco{padding:12px}
  .stu-canvas{touch-action:auto;max-height:64vh}
  .stu-nome{min-height:48px}
  .stu-ac .btn{flex:1 1 auto}
  .stu-ord{min-width:48px}
  .stu input[type=number]{min-height:48px;font-size:16px}
  .stu .rule .btn{margin:8px 0 0;width:100%}
  .stu-janela{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:24px max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
}

/* T-0662 carrossel (STU-2): painel Slides com miniaturas 4:5, ordem e titulo do slide aberto.
   Computador: cena a esquerda nas duas linhas, Slides em cima dos paineis a direita. Ate 980 px: Slides, cena e paineis em uma coluna
   (o celular troca de slide antes de ver a cena). Miniaturas em grade de 5, sem rolagem lateral; alvos de 48 px ate 980 px (tablet e celular). */
.stu-car{grid-template-rows:auto 1fr}
.stu-car .stu-palco{grid-column:1;grid-row:1 / span 2}
.stu-car .stu-slides{grid-column:2;grid-row:1}
.stu-car .stu-lado{grid-column:2;grid-row:2}
.stu-tiras{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.stu-tira{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:block;width:100%;padding:3px;border:2px solid var(--line2);border-radius:8px;background:var(--bg)}
.stu-tira:hover{border-color:var(--mut)}
.stu-tira.on{border-color:#142e4f;box-shadow:0 0 0 2px rgba(20,46,79,.25)}
.stu-tira:focus-visible{outline:3px solid #142e4f;outline-offset:2px}
.stu-mini{display:block;width:100%;height:auto;aspect-ratio:4 / 5;border-radius:4px;background:#fff}
.stu-num{position:absolute;left:5px;bottom:5px;min-width:20px;padding:0 5px;border-radius:6px;background:rgba(14,17,22,.78);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center}
.stu-tira.on .stu-num{background:#142e4f}
.stu-sac{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.stu-sac .btn:not(.stu-ord){flex:1 1 auto}
.stu-slides .ajuda{margin:-4px 0 12px}
@media(max-width:980px){
  .stu-car{grid-template-rows:none}
  .stu-car .stu-palco,.stu-car .stu-slides,.stu-car .stu-lado{grid-column:auto;grid-row:auto}
  .stu-tiras{grid-template-columns:repeat(10,minmax(0,1fr))}
  .stu-tira{min-height:48px}
  .stu-sac .btn{min-height:48px}
  .stu-sac .stu-ord{min-width:48px}
}
@media(max-width:700px){
  .stu-tiras{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* T-0663 variacoes A/B (STU-3): grupo da peca acima do editor, compacto para a cena continuar na primeira tela. Computador: cartoes
   lado a lado (miniatura 4:5 de 56 px e texto), quantos couberem na linha; celular (ate 700 px): lista de uma coluna, sem rolagem
   lateral, alvo de toque de 64 px. */
.stu-vars{margin:0 0 16px}
.stu-vars-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.stu-var{min-width:0}
.stu-var-link{display:flex;align-items:center;gap:12px;height:100%;min-height:64px;box-sizing:border-box;padding:6px 10px 6px 6px;border:2px solid var(--line2);border-radius:10px;background:var(--bg);color:var(--txt);text-decoration:none}
.stu-var-link:hover{border-color:var(--mut)}
.stu-var-link:focus-visible{outline:3px solid #142e4f;outline-offset:2px}
.stu-var.on .stu-var-link{border-color:#142e4f;box-shadow:0 0 0 2px rgba(20,46,79,.25)}
.stu-var-img{display:block;flex:none;width:44px;height:55px;object-fit:cover;border-radius:5px;background:var(--surf)}
.stu-var-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.stu-var-txt b{font-weight:650}
.stu-var-txt .small{overflow-wrap:anywhere}
@media(max-width:700px){
  .stu-vars-lista{grid-template-columns:minmax(0,1fr);gap:8px}
  .stu-var-link{min-height:68px}
}