/* ══════════════════════════════════════════════════════════════════════════
simulador-3d/mockup.css — a pele do simulador.
É o CSS da JANELA DO EDITOR do sublimarker (`apresentacao/index.php` com
`?embutido=1`), o mockup que o CW já usa para mostrar a peça ao cliente.
Veio de lá inteiro, e não redesenhado: a tela já estava resolvida — palco
claro de catálogo, barra lateral fixa de duas abas, pílulas de vista
flutuando sobre a peça — e um segundo desenho seria um segundo lugar para
consertar quando o primeiro mudasse.
DUAS COISAS MUDARAM, e as duas por esta página ser PÚBLICA:
1. TUDO MORA DENTRO DE `#app`. Lá o arquivo é a folha da casa inteira e
pode falar `.bt` no vazio. Aqui ele divide a página com o cabeçalho,
o menu e o rodapé do site — e `.bt`, `.grupo`, `.lin` são
nomes comuns demais para soltar num site que já tem os seus.
2. A PORTA DE ENTRADA VOLTOU. Na janela do editor o "⬆ Carregar imagem"
é escondido de propósito: a arte de lá vem da mesa do editor, e uma
segunda porta criaria duas verdades sobre a mesma camisa. Aqui ele é
A ÚNICA porta — quem chega não tem trabalho aberto nem mesa: tem cinco
arquivos no computador dele. Ver o fim do arquivo.
══════════════════════════════════════════════════════════════════════════ */
/* A PALETA DA CASA, e o tema CLARO já posto.
A folha do sublimarker nasce escura e clareia em `body.embutido`; aqui não
há o escuro para clarear — a janela é a página, e ela é clara desde o
primeiro pixel. As cores de significado (roxo do que está escolhido,
laranja da aba acesa) são as mesmas, e é o que faz esta tela parecer a
mesma tela. */
#app{
--escuro:#ffffff; --escuro2:#f2f4f8; --linha:#d9dee8;
--texto:#1c2030; --fraco:#697084;
--roxo:#6c5ce7; --roxo-cl:#8b7bf0;
--laranja:#f0621a; --verde:#22a06b; --vermelho:#e03e3e;
--fundo:#ffffff; --cartao:#ffffff;
--r:10px;
}
/* O `hidden` TEM DE ESCONDER — e sozinho ele não esconde.
*
* O atributo age pelo `display:none` da folha do NAVEGADOR, a mais fraca de
* todas: qualquer regra de classe com `display` ganha dela em silêncio. O
* HTML fica com `hidden`, o inspetor mostra `hidden`, e o elemento continua
* na tela.
*
* É a regra que faz a aba "Luz e tecido" funcionar. Trocar de aba põe
* `hidden` no `#ajusteCorpo` — e `.mk-ajuste-corpo` é `display:flex`, que
* ganha da folha do navegador: a página da arte não saía, e os controles de
* luz iam para baixo dela, fora da vista de quem não rolasse. Ela mora no
* ALTO do `app.css` (linha 31), fora do trecho do mockup que veio para cá —
* foi assim que ficou para trás.
*
* É o único `!important` do arquivo, e é o lugar certo dele: não está
* vencendo uma decisão de estilo, está devolvendo ao atributo o significado
* que ele já tem em HTML. */
#app [hidden]{display:none !important}
/* O reset é RASO de propósito: só o que o mockup pressupõe. Um `*{margin:0}`
aqui dentro é inofensivo — nada fora de `#app` o alcança. */
#app *{box-sizing:border-box}
#app{
color:var(--texto);
font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
-webkit-font-smoothing:antialiased;
}
#app h1,#app h2,#app h3,#app p{margin:0}
#app button{font-family:inherit}
/* ---------------------------------------------------------- genéricas
As poucas classes da casa que o HTML do mockup usa por fora de
`.mk-corpo`. Vieram do topo do `app.css`, sem retoque. */
#app .cresce{flex:1}
#app .sub{color:var(--fraco); margin:0 0 22px; font-size:14px}
#app .bt{
display:inline-flex; align-items:center; gap:6px;
padding:8px 14px; border-radius:8px; border:1px solid var(--linha);
background:var(--escuro2); color:var(--texto);
font-size:14px; cursor:pointer; font-family:inherit;
}
#app .bt:hover{background:#e6e9f0; text-decoration:none}
#app .bt.fino{padding:6px 11px; font-size:13px}
#app .bt.acao{background:var(--roxo); border-color:var(--roxo); color:#fff; font-weight:500}
#app .bt.acao:hover{background:var(--roxo-cl)}
#app .bt.perigo{color:#a83a3c; border-color:#e6c6c7}
#app .bt.perigo:hover{background:var(--vermelho); border-color:var(--vermelho); color:#fff}
#app .bt[disabled]{opacity:.45; cursor:not-allowed}
/* O seletor de arquivo fica invisível POR CIMA do rótulo inteiro: assim o
clique cai nele em qualquer ponto do botão, e não só no texto. */
#app .arqbt{position:relative; overflow:hidden; cursor:pointer}
#app .arqbt input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; font-size:100px}
/* ══════════════════════════════════════════════════════════════════════════
DAQUI PARA BAIXO É O `app.css` DO SUBLIMARKER (linhas 894–1359), escopado.
══════════════════════════════════════════════════════════════════════════ */
#app .mk-cab{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:14px}#app .mk-cab h1{margin:0 0 3px}#app .mk-salvo{
font-size:12.5px; color:var(--fraco); padding:5px 11px; border-radius:20px;
border:1px solid var(--linha); background:var(--escuro2); white-space:nowrap;
}#app .mk-salvo.ok{border-color:#1d5c3c; background:#12301f; color:#8ee0b4}#app .mk-salvo.sujo{border-color:#6b5326; background:#2b2312; color:#f0c98a}#app .mk-salvo.ruim{border-color:#6b2426; background:#331617; color:#f3a7a8}
/* A altura e' calculada, e nao 100vh: o topo, a trilha e o cabecalho da
tela continuam visiveis. Perder o nome do cliente de vista para ganhar
90 px de camisa nao e' troca boa. */#app{
display:flex; gap:14px;
height:calc(100vh - 250px); min-height:540px;
}#app:fullscreen{height:100vh; min-height:0; gap:0; background:var(--fundo)}#app .mk-palco{
position:relative; flex:1; min-width:0;
background:#0b0d13; border:1px solid var(--linha); border-radius:var(--r);
overflow:hidden;
}#app .mk-palco canvas{display:block; width:100%; height:100%; outline:none; touch-action:none}#app .mk-flut{
position:absolute; top:12px; right:12px; z-index:20;
width:36px; height:36px; border-radius:9px; cursor:pointer;
background:#191c27dd; border:1px solid var(--linha); color:var(--texto);
display:flex; align-items:center; justify-content:center;
backdrop-filter:blur(8px); font-size:16px;
}#app .mk-flut:hover{background:#242a3aee}#app .mk-hud{
position:absolute; top:12px; left:12px; z-index:20;
font-size:11px; color:var(--fraco); line-height:1.6; pointer-events:none;
background:#191c27b0; border:1px solid var(--linha); border-radius:8px;
padding:6px 10px; backdrop-filter:blur(8px); font-variant-numeric:tabular-nums;
}#app .mk-hud b{color:var(--laranja); font-weight:600}#app .mk-vistas{
position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:20;
display:flex; gap:4px; padding:5px; border-radius:11px;
background:#191c27d8; border:1px solid var(--linha);
backdrop-filter:blur(10px); box-shadow:0 6px 26px #0007;
}#app .mk-vistas button{
background:none; border:0; color:var(--fraco); padding:6px 12px; border-radius:7px;
font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap;
}#app .mk-vistas button:hover{background:#ffffff10; color:var(--texto)}#app .mk-vistas button.on{background:var(--roxo); color:#fff}
/* ══════════════════════════════════════════════════════════════════════════
EMBUTIDA NA JANELA DO EDITOR: o palco toma tudo e o painel sai de cena.
O painel de seis abas não sai do HTML — os botões da barra curta apertam os
controles dele, e uma cópia dos ouvintes aqui seria um segundo lugar para
consertar. Ele fica fora da vista, e é só isso.
══════════════════════════════════════════════════════════════════════════ */
/* E A JANELA É CLARA.
*
* A casa é escura porque o painel escuro deixa a arte falar — o olho compara
* cor com o que está em volta, e cinza-escuro é o fundo neutro de toda mesa de
* luz. Mas ali dentro não há painel: há a camisa, e ela é mostrada AO
* CLIENTE. Roupa se aprova em fundo claro, como em qualquer catálogo, e uma
* caixa preta no meio do editor claro lia como "outro programa abriu".
*
* A troca é feita nas variáveis, e não regra a regra: assim tudo o que já
* existe — a barrinha, a pílula das vistas, os botões — vira claro junto, e o
* que nascer amanhã nasce claro sem ninguém lembrar. */#app#app{
--escuro:#ffffff; --escuro2:#f2f4f8; --linha:#d9dee8;
--texto:#1c2030; --fraco:#697084;
--fundo:#ffffff; --cartao:#ffffff;
}#app#app{height:100vh; min-height:0; gap:0}#app#app .mk-painel,
#app#app #toggle{display:none}
/* Da linha do envio sobra só o "⬇ Ver os arquivos". Carregar imagem por aqui
poria na camisa uma arte que não está na mesa do editor — a janela deixaria
de ser a conferência do desenho e viraria um segundo lugar de desenhar. */#app#app .mk-envio .arqbt,
#app#app .mk-envio .mk-arq{display:none}#app#app .mk-palco{border:0; border-radius:0; background:#eef0f4}
/* As pílulas flutuantes eram vidro escuro sobre palco escuro. Sobre palco
claro elas somem — então viram vidro claro, com o traço de sempre. */#app#app .mk-vistas{background:#ffffffdc; box-shadow:0 6px 26px #0000001f}#app#app .mk-carrega{background:#f5f6f9; color:var(--texto)}#app#app .mk-hud{background:#ffffffcc}
/* O `:hover` dos botões é a única cor escrita à mão no arquivo — as variáveis
não alcançam um valor cravado. Aqui ele vira o claro correspondente. */#app#app .bt:hover{background:#e6e9f0}
/* A janela do editor nao tem mais barra flutuante sobre o palco: os
controles moram na lateral fixa (.mk-ajuste), logo abaixo. */#app .mk-carrega{background:#f5f6f9; color:var(--texto)}#app#app .mk-hud{background:#ffffffcc}
/* O `:hover` dos botões é a única cor escrita à mão no arquivo — as variáveis
não alcançam um valor cravado. Aqui ele vira o claro correspondente. */#app#app .bt:hover{background:#e6e9f0}
/* A BARRA LATERAL DA JANELA DO EDITOR — fixa, ao lado do palco.
*
* Era gaveta, e gaveta escondia a única coisa que se abre a janela para fazer:
* ajustar a arte. Um clique a mais para chegar ao trabalho, e um botão a mais
* para explicar. Fixa, ela está sempre onde a mão espera. */
/* A barra NÃO rola inteira: quem rola é a página aberta. Rolando por fora, as
cores e os botões do pé desciam junto com a luz e sumiam da tela — e são
justamente eles que precisam estar sempre à mão. */#app .mk-ajuste{
width:372px; flex:0 0 372px; display:flex; flex-direction:column; gap:8px;
padding:12px; min-height:0; overflow:hidden;
background:var(--cartao); border-left:1px solid var(--linha);
}
/* As duas abas da barra lateral. Herdam o traço laranja das abas do painel
(`.abas`), e só mudam o tamanho: são duas, e não seis. */#app .mk-ajuste-abas{
display:flex; flex:0 0 auto; margin:-10px -12px 10px;
border-bottom:1px solid var(--linha);
}#app .mk-ajuste-abas button{
flex:1; padding:11px 4px; background:none; border:0; border-bottom:2px solid transparent;
color:var(--fraco); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}#app .mk-ajuste-abas button:hover{color:var(--texto)}#app .mk-ajuste-abas button.on{color:var(--laranja); border-bottom-color:var(--laranja)}
/* As duas páginas rolam por dentro: a da luz é comprida, e sem isto ela
empurraria as cores e os botões para fora da janela. */#app .mk-ajuste-corpo{display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow-y:auto}
/* Quem esconde estas duas é o `[hidden]` lá do alto, que vale para a folha
inteira — foi esta aba que revelou a falta dele. */#app .mk-ajuste-luz{margin:0 -12px; padding:0}
/* AS DUAS PÁGINAS DAQUI FICAM ACESAS, sempre. Dentro do painel quem acende
uma página é a aba de lá, e ela apaga as outras; aqui não há aba de página
nenhuma — a barra mostra as duas empilhadas. Duas classes vencem o
`.mk-corpo .pag{display:none}` sem precisar de `!important`, e sem depender
de nenhum código lembrar de pôr o `on` de volta. */#app .mk-ajuste-luz.mk-corpo .pag{display:block; padding:2px 12px 14px}
/* A chapa mudou de casa e traz as margens da antiga: aqui a última não pode
empurrar a dica para fora da vista. */#app .mk-ajuste-corpo > *:last-child{margin-bottom:0}#app .mk-ajuste .dica{margin:0}#app .mk-ajuste-pe{display:flex; align-items:center; gap:7px; flex-wrap:wrap}#app .mk-ajuste-pe .bt{padding:6px 11px; font-size:12px; line-height:1}#app .mk-ajuste-pe .bt.on{background:var(--roxo); border-color:var(--roxo); color:#fff}#app .mk-ajuste-cor{
display:flex; align-items:center; gap:6px; padding:2px 8px 2px 3px;
border:1px solid var(--linha); border-radius:7px;
font-size:11.5px; color:var(--fraco); cursor:pointer;
}#app .mk-ajuste-cor input[type=color]{
width:28px; height:22px; padding:0; border:0; border-radius:5px;
background:none; cursor:pointer;
}#app .mk-carrega{
position:absolute; inset:0; z-index:60; background:#0b0d13;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:16px; transition:opacity .5s;
}#app .mk-carrega.sumiu{opacity:0; pointer-events:none}#app .mk-carrega .aro{
width:44px; height:44px; border:3px solid var(--linha); border-top-color:var(--laranja);
border-radius:50%; animation:mk-gira .85s linear infinite;
}@keyframes mk-gira{to{transform:rotate(360deg)}}#app .mk-carrega p{font-size:13px; color:var(--fraco); margin:0}#app #barra{width:210px; height:3px; background:var(--escuro2); border-radius:2px; overflow:hidden}#app #barra i{display:block; height:100%; width:0; background:var(--laranja); transition:width .25s}#app #erro{max-width:520px; text-align:center; font-size:12.5px; color:#f3a7a8; line-height:1.7; display:none; padding:0 20px}#app #erro code{background:#00000060; padding:2px 6px; border-radius:4px; color:#ffd08a; font-size:11.5px}
/* --------------------------------------------------------- o painel */#app .mk-painel{
width:352px; flex:0 0 352px; display:flex; flex-direction:column;
background:var(--cartao); border:1px solid var(--linha); border-radius:var(--r);
overflow:hidden; transition:margin-right .28s cubic-bezier(.4,0,.2,1);
}#app .mk-painel.oculto{margin-right:-352px}#app .mk-abas{display:flex; border-bottom:1px solid var(--linha); background:var(--escuro)}#app .mk-abas button{
flex:1; padding:11px 2px; background:none; border:0; border-bottom:2px solid transparent;
color:var(--fraco); font-size:11.5px; font-weight:600; cursor:pointer; font-family:inherit;
}#app .mk-abas button:hover{color:var(--texto); background:#ffffff06}#app .mk-abas button.on{color:var(--laranja); border-bottom-color:var(--laranja); background:#ffffff08}#app .mk-corpo{flex:1; overflow-y:auto; overscroll-behavior:contain}#app .mk-corpo::-webkit-scrollbar{width:9px}#app .mk-corpo::-webkit-scrollbar-thumb{background:#333a4a; border-radius:5px; border:2px solid var(--cartao)}#app .mk-corpo .pag{display:none; padding:14px 15px 26px}#app .mk-corpo .pag.on{display:block}#app .mk-corpo .grupo{margin-bottom:16px}#app .mk-corpo .grupo>h3{
font-size:10px; font-weight:750; letter-spacing:1.1px; text-transform:uppercase;
color:#6f7889; margin:0 0 9px; display:flex; align-items:center; gap:7px;
}#app .mk-corpo .grupo>h3::after{content:""; flex:1; height:1px; background:var(--linha)}#app .mk-corpo .lin{display:flex; align-items:center; gap:9px; margin-bottom:9px}#app .mk-corpo .lin label{flex:0 0 96px; font-size:11.5px; color:var(--fraco); line-height:1.25}#app .mk-corpo .lin .val{
flex:0 0 48px; text-align:right; font-size:10.5px; color:var(--laranja);
font-variant-numeric:tabular-nums; font-weight:600;
}/* ─── A BARRINHA É A NATIVA, E ISSO COMEÇA AQUI ─── (11/09/2026)
Esta regra desligava o desenho do navegador (`appearance:none`) e pintava
um trilho escuro à mão. O bloco lá embaixo já tinha decidido voltar ao
nativo — mas voltava por cima, mandando `appearance:auto` e apagando os
polegares. No Chrome dava certo; no FIREFOX, não: lá o `::-moz-range-thumb`
com `background:none` some, e a barrinha ficava INVISÍVEL — rótulo, valor,
e nada entre eles. O CW viu a tela assim.
Não desligar é mais simples que desligar e religar. */
#app .mk-corpo input[type=range]{
flex:1; outline:none; cursor:pointer; min-width:0;
}#app .mk-corpo select,
#app .mk-corpo input[type=text]{
flex:1; background:var(--escuro2); border:1px solid var(--linha); color:var(--texto);
border-radius:6px; padding:6px 8px; font-size:11.5px; font-family:inherit;
outline:none; min-width:0;
}#app .mk-corpo select:focus{border-color:var(--roxo)}#app .mk-corpo input[type=color]{
flex:0 0 42px; height:26px; background:none; border:1px solid var(--linha);
border-radius:6px; padding:1px; cursor:pointer;
}#app .mk-corpo .bts{display:grid; gap:6px; grid-template-columns:repeat(3,1fr)}#app .mk-corpo .bts.c2{grid-template-columns:repeat(2,1fr)}#app .mk-corpo .bts.c1{grid-template-columns:1fr}#app .mk-corpo .bts .bt{justify-content:center; text-align:center; padding:7px 5px; font-size:11.5px}#app .mk-corpo .bt.on{background:var(--laranja); border-color:var(--laranja); color:#fff; font-weight:600}#app .mk-corpo .chk{display:flex; align-items:center; gap:8px; margin-bottom:8px; cursor:pointer; user-select:none}#app .mk-corpo .chk input{
appearance:none; -webkit-appearance:none; width:33px; height:18px; border-radius:10px;
background:#39404d; position:relative; cursor:pointer; transition:.18s; flex:0 0 auto; border:0;
}#app .mk-corpo .chk input::after{
content:""; position:absolute; top:2px; left:2px; width:14px; height:14px;
border-radius:50%; background:#aab2c0; transition:.18s;
}#app .mk-corpo .chk input:checked{background:var(--roxo)}#app .mk-corpo .chk input:checked::after{left:17px; background:#fff}#app .mk-corpo .chk span{font-size:11.5px; color:var(--fraco)}#app .mk-corpo .chk input:checked + span{color:var(--texto)}#app .mk-corpo .dica{font-size:10.8px; color:#69707e; line-height:1.55; margin:-2px 0 11px}#app .mk-corpo .dica.ruim{color:#f3a7a8}#app .mk-corpo .dica b{color:var(--fraco)}
/* O seletor de arquivo fica invisivel POR CIMA do rotulo inteiro: assim o
clique cai nele em qualquer ponto do botao, e nao so' no texto. */#app .arqbt{position:relative; overflow:hidden; cursor:pointer}#app .arqbt input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; font-size:100px}
/* --------------------------------------------- as partes e a chapa */#app .mk-partes{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:11px}#app .mk-parte{
position:relative; padding:6px 11px; border-radius:7px; cursor:pointer;
background:var(--escuro2); border:1px solid var(--linha); color:var(--fraco);
font-size:11.5px; font-weight:600; font-family:inherit;
}#app .mk-parte:hover{color:var(--texto); background:#272b3b}#app .mk-parte.on{background:var(--roxo); border-color:var(--roxo); color:#fff}
/* O pontinho diz "esta parte ja' tem estampa". Sem ele, a manga que
ninguem mandou so' aparece na peca pronta. */#app .mk-parte.tem::after{
content:""; position:absolute; top:4px; right:4px;
width:6px; height:6px; border-radius:50%; background:var(--verde);
}#app .mk-parte.on.tem::after{background:#fff}
/* A MESA DA CHAPA É O XADREZ DE "SEM FUNDO".
Ela era quase preta, e num painel escuro isso deixa a peça bonita — mas a
peça é branca, e branco sobre preto lê como se a malha tivesse um contorno
luminoso que ela não tem. Cinza liso resolvia isso e ainda parecia uma
mesa de verdade, com cor própria. O xadrez não parece nada: é a convenção
de "aqui não há fundo", que qualquer um que mexe com PNG lê de longe — e
por isso não compete com nenhuma cor de malha, do branco ao preto.
O mesmo xadrez é desenhado DENTRO do canvas (`desenhaChapa`), com o mesmo
passo e as mesmas duas cores: a caixa e o desenho têm de ser uma superfície
só, e não uma moldura em volta de outra coisa. */#app .mk-chapa-cx{
position:relative;
display:flex; justify-content:center; align-items:center;
border:1px solid var(--linha); border-radius:9px;
padding:10px; margin-bottom:8px; min-height:150px;
background-color:#e6e8ec;
background-image:
linear-gradient(45deg, #ced3db 25%, transparent 25%, transparent 75%, #ced3db 75%),
linear-gradient(45deg, #ced3db 25%, transparent 25%, transparent 75%, #ced3db 75%);
background-size:16px 16px;
background-position:0 0, 8px 8px;
}#app #chapa{
display:block; border-radius:4px; touch-action:none; cursor:move;
box-shadow:0 1px 5px #00000022;
}#app #chapa.sobre{outline:2px dashed var(--roxo); outline-offset:3px}#app #chapa.passeando{cursor:grabbing}
/* A LUPA — flutua no canto da mesa da chapa.
Cores claras porque a caixa embaixo é o xadrez cinza-claro de "sem fundo",
e não o painel escuro: o resto da paleta da casa sumiria ali dentro. */#app .mk-lupa{
position:absolute; top:6px; right:6px; z-index:2;
display:flex; align-items:center; gap:2px;
padding:2px; border-radius:7px;
background:#ffffffdd; border:1px solid #00000022;
box-shadow:0 1px 4px #00000022;
font-size:11px; color:#2a2f3a; font-variant-numeric:tabular-nums;
/* Apagada enquanto ninguém a procura: aproximada, a janela ocupa a caixa
inteira e a botoeira passa a ficar em cima do desenho. Some do caminho
sem sumir do lugar — quem já sabe onde ela está a encontra no escuro. */
opacity:.5; transition:opacity .15s;
}#app .mk-chapa-cx:hover .mk-lupa,
#app .mk-lupa:hover,
#app .mk-lupa:focus-within{opacity:1}#app .mk-lupa button{
width:22px; height:20px; padding:0; line-height:1;
border:0; border-radius:5px; background:transparent;
color:#2a2f3a; font-size:13px; cursor:pointer;
}#app .mk-lupa button:hover:not(:disabled){background:#0000000f}/* O OLHO DA ESTAMPA SAIU DAQUI (11/09/2026). Ele era desta folha porque era
do uniforme, a unica peca que o tinha. Passou a ser dos oito simuladores, e
com isso foi para o `sim3d.css`, que as oito carregam — junto do
`olho_estampa.js`, que monta o botao. As regras ficaram sem HTML no dia em
que a `.mk-olho-arte` deixou de ser escrita nas paginas, e CSS sem dono e'
o tipo de coisa que sobrevive anos sem ninguem saber se pode sair. */#app .mk-lupa button:disabled{opacity:.32; cursor:default}#app .mk-lupa span{min-width:34px; text-align:center; padding:0 1px}#app .mk-medidas{
display:flex; align-items:center; gap:8px; margin-bottom:9px;
font-size:11.5px; color:var(--fraco); font-variant-numeric:tabular-nums;
}#app .mk-medidas b{color:var(--texto); font-weight:600}
/* AS TRÊS CORES DA CAMISA, na barra lateral: malha, gola e avesso. Numa
linha só porque quem escolhe uma olha as outras — gola preta em malha
branca é a decisão mais comum do dia. */#app .mk-ajuste-cores{
display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:8px;
}#app .mk-ajuste-cores .bt{padding:6px 10px; font-size:11.5px; line-height:1}
/* Na barra lateral a coluna é estreita: o rótulo de 96 px do painel come
metade da linha e a barrinha vira um toco. Aqui ele encolhe. */#app .mk-ajuste-luz .lin label{flex:0 0 76px}
/* A barra de ferramentas da chapa cabia em duas linhas e a lixeira sobrava
sozinha na segunda. Botões flexíveis: enchem a linha e quebram parelho. */#app .mk-ajuste-corpo .mk-ferra{display:flex; flex-wrap:wrap; gap:5px}#app .mk-ajuste-corpo .mk-ferra .bt{flex:1 1 auto; min-width:34px; justify-content:center}#app .mk-cor-peca{
display:flex; align-items:center; gap:8px; margin-bottom:9px;
font-size:11.5px; color:var(--fraco);
}#app .mk-cor-peca label{white-space:nowrap}#app .mk-cor-peca input[type=color]{
width:34px; height:24px; padding:0; border-radius:6px;
border:1px solid var(--linha); background:none; cursor:pointer;
}#app .mk-cor-nota{color:var(--fraco); font-style:italic}#app .mk-cor-nota.propria{color:var(--texto); font-style:normal}#app .mk-ferra{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px}#app .mk-ferra .bt{padding:6px 9px; font-size:14px; line-height:1}#app .mk-envio{display:flex; align-items:center; gap:9px; margin-bottom:8px}#app .mk-envio .bt{flex:0 0 auto}#app .mk-arq{
font-size:11px; color:var(--fraco); overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; min-width:0;
}
/* A GAVETA DOS ARQUIVOS — o que está no 3D, para ver e baixar.
Ela nasce em `document.body`, então dentro do quadro do editor cobre só o
quadro: é a janela do 3D que se abre para mostrar as próprias peças, e não
uma terceira janela por cima do editor inteiro. */#app .mk-sacola{
position:fixed; inset:0; z-index:60;
display:flex; align-items:center; justify-content:center;
padding:3vh 3vw; background:#0b0e13a8;
}#app .mk-sacola-cx{
display:flex; flex-direction:column; min-height:0;
width:min(760px, 96vw); max-height:94vh;
background:var(--cartao); color:var(--texto);
border:1px solid var(--linha); border-radius:13px; overflow:hidden;
box-shadow:0 22px 70px #00000055;
}#app .mk-sacola-topo{
display:flex; align-items:center; gap:10px; flex:0 0 auto;
padding:10px 13px; border-bottom:1px solid var(--linha);
}#app .mk-sacola-topo b{font-size:14.5px}#app .mk-sacola-pe{font-size:11.5px; color:var(--fraco)}#app .mk-sacola-corpo{flex:1; min-height:0; overflow:auto; padding:12px 13px; display:grid; gap:10px}#app .mk-sacola-item{
display:flex; gap:12px; align-items:flex-start;
padding:10px; border:1px solid var(--linha); border-radius:10px;
}
/* O XADREZ ATRÁS DA MINIATURA: quase toda peça chega com fundo transparente, e
sobre branco liso não dá para saber se a faixa clara é do arquivo ou da
caixa. É justamente essa a pergunta que traz alguém até aqui. */#app .mk-sacola-th{
flex:0 0 auto; width:120px; height:120px; display:flex;
align-items:center; justify-content:center; overflow:hidden;
border:1px solid var(--linha); border-radius:8px;
background-color:#e6e8ec;
background-image:
linear-gradient(45deg, #ced3db 25%, transparent 25%, transparent 75%, #ced3db 75%),
linear-gradient(45deg, #ced3db 25%, transparent 25%, transparent 75%, #ced3db 75%);
background-size:14px 14px; background-position:0 0, 7px 7px;
}#app .mk-sacola-th img,
#app .mk-sacola-th canvas{max-width:100%; max-height:100%; display:block}#app .mk-sacola-txt{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}#app .mk-sacola-txt b{font-size:13.5px}#app .mk-sacola-txt span{font-size:11.5px; color:var(--fraco); line-height:1.45}#app .mk-sacola-arq{
font-family:ui-monospace,Consolas,monospace; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap;
}#app .mk-sacola-txt .bt{align-self:flex-start; margin-top:5px}#app .mk-sacola-atlas{background:var(--escuro2)}#app .mk-finos summary{
cursor:pointer; font-size:11.5px; color:var(--fraco); user-select:none;
padding:6px 0; font-weight:600;
}#app .mk-finos summary:hover{color:var(--texto)}#app .mk-finos[open] summary{margin-bottom:8px}
/* ------------------------------------------------- as cinco miniaturas */#app .thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:5px}#app .thumb{
aspect-ratio:1; background:#0b0d13; border:1px solid var(--linha); border-radius:6px;
overflow:hidden; display:flex; align-items:center; justify-content:center;
position:relative; cursor:pointer;
}#app .thumb:hover{border-color:var(--roxo-cl)}#app .thumb.on{border-color:var(--roxo); box-shadow:0 0 0 1px var(--roxo)}#app .thumb.vazia{border-style:dashed}#app .thumb img{max-width:100%; max-height:100%; object-fit:contain}#app .thumb b{
position:absolute; bottom:0; left:0; right:0; background:#000a; font-size:7.5px;
text-align:center; padding:2px 0; font-weight:600; letter-spacing:.2px; color:#cfd5df;
}@media (max-width:980px){#app{flex-direction:column; height:auto}#app .mk-palco{height:52vh; min-height:320px}#app .mk-painel{width:100%; flex:0 0 auto; max-height:70vh}#app .mk-painel.oculto{margin-right:0}
}@media (prefers-reduced-motion:reduce){#app .mk-carrega .aro{animation:none}#app .mk-painel{transition:none}
}
/* ══════════════════════════════════════════════════════════════════════════
O QUE MUDA POR ESTA PÁGINA SER PÚBLICA — e só isto.
Tudo aqui fala `#app#app`, e não `#app`. Não é enfeite: o que estas regras
corrigem foi escrito lá em cima como `body.embutido X`, que virou
`#app#app X` ao ser escopado (ver o cabeçalho do `escopa.py`). Escritas com
um id só, elas perderiam a disputa e não fariam nada.
E A ORDEM IMPORTA. Com a especificidade toda igual, quem decide é quem vem
depois — por isso o `@media` do telefone é a ÚLTIMA coisa do arquivo. Uma
regra de desktop escrita abaixo dele passaria a valer no telefone também.
══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
A JANELA CRESCE COM O QUE TEM DENTRO — não tem fundo fixo.
No editor ela ocupa `100vh` porque é um iframe: ali não há nada em volta, e
um fundo fixo é o certo. Aqui teve `min(78vh, 860px)`, e o preço apareceu
na barra: a chapa da frente é alta (52 × 72 cm de peça), e dentro de uma
altura cravada ela só cabia de dois jeitos ruins — encolhendo até virar um
selo, ou deixando a barra ROLAR.
Rolagem ali é pior do que parece. As alças, a lupa e as ferramentas
trabalham NA chapa: rolando para alcançar um botão, o desenho sai da tela
justamente na hora de olhar para ele.
Então a altura passa a ser o CONTEÚDO. A barra pede o tamanho de que
precisa, o palco acompanha (é irmão dela num `flex`, e estica junto), e
quem rola é a PÁGINA — que é o que uma página faz. O 3D se reajusta
sozinho: o `mockup.js` já observa o palco com um `ResizeObserver`.
O mínimo continua, para o simulador não virar uma faixa inutilizável
enquanto o modelo ainda está carregando e a barra está quase vazia.
══════════════════════════════════════════════════════════════════════════ */
#app#app{
height:auto; min-height:560px; gap:0;
border:1px solid var(--linha); border-radius:14px;
/* CLIP, e não HIDDEN. Os dois cortam igual nos cantos arredondados, mas
`hidden` faz do `#app` um container de rolagem — e um container de
rolagem PRENDE o `position:sticky` dos filhos nele, matando o palco
grudado logo abaixo. `clip` corta sem virar container. */
overflow:clip;
/* O palco tem altura própria e a barra pode passar dele; o vão que sobra
embaixo fica com a cor do palco, e não com um branco que não é de
ninguém. */
background:var(--sim-palco);
}
/* ══════════════════════════════════════════════════════════════════════════
O PALCO NÃO ESTICA — ELE FICA PRESO EM CIMA.
Enquanto a janela tinha altura fixa, palco e barra eram do mesmo tamanho e
ninguém reparava. Quando a barra passou a crescer, o palco veio junto
(num `flex`, o padrão é `stretch`) — e na aba "Luz e tecido", que é uma
coluna comprida de controles, ele chegou a mais de mil e quinhentos
pixels. A camisa continuava lá, centrada num palco desse tamanho: fora da
tela, e com o 3D desenhando pixel que ninguém ia ver (daí os 10 fps).
De fora, o 3D tinha sumido.
Agora ele tem a altura da JANELA DO NAVEGADOR, descontado o cabeçalho
verde do site, que é `fixed`. E gruda: rolando para alcançar um controle
lá embaixo, a peça continua à vista — que é o ponto de mexer na luz.
══════════════════════════════════════════════════════════════════════════ */
#app#app .mk-palco{
align-self:flex-start;
height:min(calc(100vh - var(--altura-header, 80px) - 40px), 860px);
position:sticky;
top:calc(var(--altura-header, 80px) + 12px);
}
/* E a barra cresce à vontade, do tamanho que a chapa pedir. */
#app#app .mk-ajuste{align-self:stretch}
/* E ninguém rola por dentro. As duas vinham do modo iframe, onde a janela
tem fundo e o miolo precisa caber nele; aqui o miolo é que dá a altura, e
um `overflow` no meio do caminho reintroduziria a barrinha que acabou de
sair. */
#app#app .mk-ajuste{overflow:visible}
#app#app .mk-ajuste-corpo{overflow-y:visible; min-height:0}
/* E O `#ajusteLuz` TAMBÉM NÃO — ele ficou de fora quando as outras duas foram
consertadas, e era o que travava a roda do mouse.
Ele carrega a classe `.mk-corpo` de propósito (é ela que veste barrinhas,
rótulos e grupos, e sem ela seriam vinte e cinco regras repetidas aqui) —
mas `.mk-corpo` vem do painel de seis abas, onde ela É a coluna que rola:
`flex:1; overflow-y:auto; overscroll-behavior:contain`.
O `contain` é o que se sente: com o cursor sobre a aba "Luz e tecido", que
é a página mais comprida da barra, a roda rolava por DENTRO dela e, ao
chegar ao fim, parava ali em vez de passar a vez para a página. Para quem
está usando, o site simplesmente travou.
Aqui a coluna volta a ser um bloco comum: quem rola é a página, que é o que
ela faz. Vale para o `#ajusteLuz` e para o painel das duas peças, que tem a
mesma classe pelo mesmo motivo. */
#app#app .mk-ajuste .mk-corpo{
flex:0 0 auto; min-height:0;
overflow:visible; overscroll-behavior:auto;
}
/* A regra de cima é `#app#app` (dois ids) e a de tela cheia, escrita lá em
cima, é `#app:fullscreen` (um id e uma pseudo-classe) — a de cima ganha, e
a tela cheia nasceria com 78% de altura e uma borda no meio do monitor.
Aqui ela é repetida com o mesmo peso, e mais abaixo. */
#app#app:fullscreen{height:100vh; min-height:0; border:0; border-radius:0}
/* ── A PORTA DE ENTRADA, DE VOLTA ──
*
* `body.embutido .mk-envio .arqbt{display:none}` some com o "⬆ Carregar
* imagem" — e lá isso está certo: a arte chega da mesa do editor, e uma
* segunda porta poria na camisa um desenho que não é o do trabalho.
*
* Aqui é o contrário, e é o motivo desta página existir: não há mesa nem
* trabalho, há um visitante com os arquivos das CINCO PARTES no computador
* dele. Sem este botão a tela seria uma camisa crua que não se pode vestir. */
#app#app .mk-envio{flex-wrap:wrap}
#app#app .mk-envio .arqbt{
display:inline-flex;
background:var(--roxo); border-color:var(--roxo); color:#fff; font-weight:500;
flex:1 1 auto; justify-content:center;
}
#app#app .mk-envio .arqbt:hover{background:var(--sim-hover)}
#app#app .mk-envio .mk-arq{
display:block; font-size:11.5px; color:var(--fraco);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
/* A PROMESSA DA PÁGINA, logo acima da porta de entrada: a arte não sai do
computador de quem a mandou. É a pergunta que todo mundo faz antes de
escolher o arquivo, e respondê-la no lugar em que ela é feita vale mais que
um parágrafo no rodapé que ninguém rola até.
Um id só basta: esta regra não disputa com nada — a classe é daqui. */
#app .sim-promessa{
flex:0 0 100%; order:-1;
display:flex; align-items:flex-start; gap:7px;
font-size:11px; line-height:1.5; color:var(--fraco);
background:#fdf4f7; border:1px solid #f3d3dd; border-radius:8px;
padding:7px 9px; margin:0 0 10px;
}
#app .sim-promessa b{color:var(--verde)}
/* ══════════════════════════════════════════════════════════════════════════
O VERDE DA CASA, NO PASSAR DO MOUSE.
O `app.css` do sublimarker é escuro, e os `:hover` dos botões são a única
coisa nele escrita com a cor CRAVADA em vez de variável — `#272b3b`, um
cinza-quase-preto que some no painel escuro de lá. Sobre esta tela clara
ele vira um retângulo preto com a letra ilegível dentro.
Lá isso foi remendado só para o `.bt` (`body.embutido .bt:hover{#e6e9f0}`);
as pílulas das partes e as das vistas ficaram de fora, e são justamente as
que mais se aponta. Aqui todas acendem no VERDE DA MARCA, com a letra
branca — o mesmo verde do cabeçalho do site (`--cor-marca` do `base.css`).
Duas ficam de fora, e de propósito:
· a LIXEIRA continua vermelha — o vermelho ali é aviso, não enfeite;
· o "⬆ Carregar imagem" continua roxo, que é a cor cheia dele parado.
══════════════════════════════════════════════════════════════════════════ */
#app#app{ --cw-verde:#e2507d; --cw-verde-esc:#be2d59 }
/* ─── A ELEVAÇÃO DA CASA, NUM LUGAR SÓ (08/09/2026) ───
Card de controle e barra de abas são a MESMA superfície: fundo `--cartao`,
borda de 1 px, raio 12 — e por isso têm de flutuar à mesma altura. Com o
número escrito nos dois lugares, mudar um e esquecer o outro é questão de
tempo, e o sintoma seria sutil: dois brancos a alturas diferentes sobre o
gelo, que se lê como desalinho sem se saber por quê.
SÃO TRÊS CAMADAS, e cada uma faz uma coisa:
· 1 px, quase opaca — desenha a quina, e segura a borda num monitor onde
a linha de 1 px some;
· 5 px — o contato, o que diz que a superfície está POUSADA;
· 16 px, bem aberta — o levantamento, que é o que se lê como
profundidade a um palmo da tela.
Uma sombra só, forte o bastante para separar, sairia dura e sujaria o
branco. Três fracas somam a mesma separação sem sujar.
A cor é `#0f172a` (o azul-tinta da paleta) e não preto: preto sobre branco
acinzenta, e o painel inteiro perde a limpeza. */
/* ── OS DOIS TOKENS MUDARAM DE CASA EM 08/09/2026 ──
`--sim-elevacao` e `--sim-hover` são declarados agora no `sim3d.css`, na
seção "A PELE COMUM DOS SIMULADORES". Eles deixaram de ser só da malha: o
boné, a garrafa e a caneca passaram a usar os mesmos, e o `sim3d.css` é o
único arquivo que as vinte páginas carregam.
O que ficou aqui é a EXPLICAÇÃO deles, junto das regras que os usam — que
é onde ela serve. Só as duas linhas de declaração saíram. */
#app#app{
/* ─── UMA COR DE HOVER PARA TODOS OS BOTÕES (08/09/2026) ───
Antes eram DUAS, e o resultado era incoerente. Medido na tela:
botão claro em repouso -> escurecia para #e2507d
botão JÁ VERDE -> CLAREAVA para #f0759b
pílula de vista / aba -> não mudava nada
O CW viu o do meio: "esse que está aceso aí na imagem trocar para uma
mais escura", e pediu a mesma cor em todos.
Ficou o `--cw-verde-esc` (#be2d59), que já existia na paleta. Com ele o
gesto passa a ser UM só: passar o mouse ESCURECE, venha o botão de onde
vier. Um botão que clareia e outro que escurece na mesma tela fazem a
pessoa duvidar se os dois são clicáveis do mesmo jeito.
A LIXEIRA fica de fora, e continua vermelha: ali a cor é aviso, e não
resposta ao ponteiro. */
}
#app#app .bt:hover{
background:var(--sim-hover); border-color:var(--sim-hover); color:#fff;
text-decoration:none;
}
/* A de baixo é AVISO, e por isso é a única que escapa do verde. Ela precisa
do mesmo peso da regra acima para não ser engolida por ela. */
#app#app .bt.perigo:hover{background:var(--vermelho); border-color:var(--vermelho); color:#fff}
/* AS CINCO PÍLULAS DAS PARTES — a que ficava preta.
A ABERTA respondia CLAREANDO, com o argumento de que "um botão aceso
clareia". O argumento é bom sozinho e ruim no conjunto: na mesma tela, o
botão do lado escurecia. Agora as duas escurecem — ver o `--sim-hover`. */
#app#app .mk-parte:hover,
#app#app .mk-parte.on:hover{
background:var(--sim-hover); border-color:var(--sim-hover); color:#fff;
}
/* AS PÍLULAS DE VISTA, flutuando sobre a peça. O hover delas era branco a
6% — sobre o palco claro, invisível: não dava para saber se o botão
respondia antes de clicar. */
#app#app .mk-vistas button:hover{background:var(--sim-hover); color:#fff}
#app#app .mk-vistas button.on:hover{background:var(--sim-hover); color:#fff}
/* OS BOTÕES DA LUPA, no canto da mesa da chapa. */
#app#app .mk-lupa button:hover:not(:disabled){background:var(--sim-hover); color:#fff}
/* ══════════════════════════════════════════════════════════════════════════
A BARRA MAIS LARGA, PARA A CHAPA CABER MAIS CAMISA.
A chapa toma a largura da caixa e calcula a altura pela proporção do painel
no molde: a frente é 52 × 72 cm, então ela é mais alta que larga e quem
mandava era o teto de altura, e não a largura. Subir só o teto (feito no
`mockup.js`) faz a peça crescer até encostar nas beiras; alargar a barra
junto faz as beiras irem mais longe. São 52 px tirados do palco, que sobra.
══════════════════════════════════════════════════════════════════════════ */
#app#app .mk-ajuste{width:424px; flex:0 0 424px}
/* O SIMULADOR VEM PRIMEIRO, e o texto desce.
O título e a explicação moram DEPOIS da janela no HTML (ver o `index.php`):
quem chega nesta página veio ver a camisa, e três linhas de texto antes
dela empurravam o palco para fora da primeira tela. Em cima sobra só o
respiro — nem o dobro, nem colado no cabeçalho verde do site. */
#app#app{margin-top:20px}
/* ══════════════════════════════════════════════════════════════════════════
A MESA DA CHAPA NÃO ENCOLHE.
`#ajusteCorpo` é uma coluna flex, e todo filho de coluna flex nasce com
`flex-shrink: 1`: quando a soma não cabe, o navegador aperta os filhos. A
caixa da chapa era apertada — mas o CANVAS dentro dela não, porque a altura
dele está escrita em pixel pelo `medeChapa`. O resultado é o que se viu: o
desenho passando por cima das pílulas, dos botões e da promessa, como se
estivesse solto na tela.
Ela para de encolher, então, e quem passa a ceder é a barra, que já sabe
rolar (`overflow-y: auto`). É a ordem certa das coisas: a peça aberta na
mesa tem o tamanho que tem, e o resto se acomoda em volta.
══════════════════════════════════════════════════════════════════════════ */
#app#app .mk-chapa-cx{flex:0 0 auto}
/* E o canvas não é espremido na largura pela mesma razão, do outro lado: a
conta que o dimensiona já desconta os 10 px de folga (ver `chapaBase`), e
um encolhimento por cima disso acharia a camisa sem avisar. */
#app#app #chapa{flex:0 0 auto; max-width:100%}
/* ══════════════════════════════════════════════════════════════════════════
O SELETOR DE COR DA CASA (ver `seletor-cores.js`)
Ele substitui a janela cinza do Windows que o `` abre
sozinho — a mesma família de diálogo nativo que já travou neste projeto.
O `` continua ali, com o id que o motor lê; o que muda é só quem
aparece quando se clica nele.
══════════════════════════════════════════════════════════════════════════ */
#app .sim-cor{
position:fixed; z-index:70; width:236px;
display:flex; flex-direction:column; gap:9px;
padding:11px; border-radius:12px;
background:var(--cartao); border:1px solid var(--linha);
box-shadow:0 14px 40px #0f172a2e;
}
/* O QUADRADO. Ele é uma cor pura (o matiz da barrinha) com dois degradês por
cima: branco da esquerda para a direita tira a saturação, preto de cima
para baixo tira a luz. Feito assim, em CSS, ele não custa um canvas nem
um redesenho a cada movimento do dedo. */
#app .sim-cor-sv{
position:relative; height:132px; border-radius:8px; cursor:crosshair;
border:1px solid var(--linha); touch-action:none;
background:
linear-gradient(to top, #000, transparent),
linear-gradient(to right, #fff, transparent),
hsl(var(--h, 0) 100% 50%);
}
/* A bolinha carrega a cor escolhida por dentro: sobre um fundo claro ou
escuro, é o anel branco com sombra que a mantém visível. */
#app .sim-cor-sv i{
position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px;
border-radius:50%; border:2px solid #fff; pointer-events:none;
box-shadow:0 0 0 1px #00000055, 0 1px 4px #00000055;
}
/* A BARRINHA DO MATIZ — o arco-íris inteiro, que é onde a mão vai primeiro
quando a cor pedida não está nos atalhos. */
#app .sim-cor-h{
-webkit-appearance:none; appearance:none;
width:100%; height:12px; border-radius:6px; padding:0; margin:0; cursor:pointer;
border:1px solid var(--linha);
background:linear-gradient(to right,
#f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
#app .sim-cor-h::-webkit-slider-thumb{
-webkit-appearance:none; width:14px; height:14px; border-radius:50%;
background:#fff; border:2px solid #ffffff; cursor:pointer;
box-shadow:0 0 0 1px #00000055, 0 1px 4px #00000055;
}
#app .sim-cor-h::-moz-range-thumb{
width:14px; height:14px; border-radius:50%;
background:#fff; border:2px solid #ffffff; cursor:pointer;
box-shadow:0 0 0 1px #00000055, 0 1px 4px #00000055;
}
/* OS DEZESSEIS ATALHOS. Oito neutros em cima, oito cores de time embaixo —
é com essas que a maioria das peças se resolve, e num clique. */
#app .sim-cor-atalhos{display:grid; grid-template-columns:repeat(8, 1fr); gap:4px}
#app .sim-cor-atalhos button{
aspect-ratio:1; padding:0; border-radius:5px; cursor:pointer;
border:1px solid #00000022;
}
#app .sim-cor-atalhos button:hover{
transform:scale(1.16);
box-shadow:0 0 0 2px var(--cw-verde, #e2507d);
}
#app .sim-cor-pe{display:flex; align-items:center; gap:7px}
#app .sim-cor-amostra{
width:24px; height:24px; flex:0 0 auto; border-radius:6px;
border:1px solid var(--linha);
}
#app .sim-cor-hex{
width:88px; padding:5px 7px; border-radius:7px;
border:1px solid var(--linha); background:var(--escuro2); color:var(--texto);
font:12.5px/1 ui-monospace,"Cascadia Code",Consolas,monospace;
}
#app .sim-cor-hex:focus{outline:none; border-color:var(--roxo)}
/* ══════════════════════════════════════════════════════════════════════════
O CONVITE NO MEIO DA PEÇA VAZIA.
Onde havia a frase "sem imagem nesta parte", desenhada dentro do canvas.
Frase desenhada não se clica: ela dizia o que falta sem oferecer o que
fazer, e o caminho ficava a uma descida de olhos dali, num botão que fala
de "imagem" sem dizer de qual das cinco peças.
Ele flutua sobre a mesa, no centro — que é para onde já se está olhando.
══════════════════════════════════════════════════════════════════════════ */
#app .sim-vazio{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
z-index:2; display:flex; align-items:center; gap:9px;
padding:11px 15px; border-radius:11px; cursor:pointer;
background:#ffffffee; border:1px dashed var(--linha); color:var(--fraco);
font:inherit; font-size:12px; line-height:1.35; text-align:left;
box-shadow:0 4px 18px #0f172a1f;
transition:border-color .15s, color .15s, background .15s;
}
#app .sim-vazio b{
font-size:21px; line-height:1; font-weight:400;
width:30px; height:30px; flex:0 0 auto; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--roxo); color:#fff;
}
/* O nome da peça é a informação, e não o enfeite: a tela tem cinco, e é essa
a dúvida de quem está com o arquivo na mão. */
#app .sim-vazio i{font-style:normal; font-weight:650; color:var(--texto)}
#app .sim-vazio:hover{
background:#fff; border-color:var(--cw-verde, #e2507d); color:var(--texto);
}
#app .sim-vazio:hover b{background:var(--sim-hover, #be2d59)}
/* ══════════════════════════════════════════════════════════════════════════
OS BOTÕES DE LEVAR A PEÇA DAQUI — flutuando à esquerda do palco.
Eles moravam no pé da barra, do outro lado da tela: para salvar era preciso
atravessar a coluna de ajustes com os olhos. Aqui ficam ao lado do que vai
ser salvo, empilhados na ordem em que se decide — primeiro o recorte, que é
o mais pedido, e o vídeo por último, que é o mais demorado.
Vidro claro sobre palco claro, como as pílulas de vista do outro canto: a
peça continua sendo o que se vê, e eles não disputam com ela.
══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
A COLUNA DA ESQUERDA E AS PÍLULAS DE VISTA NÃO DIVIDEM MAIS A LINHA DE BAIXO.
Elas nasceram as duas em `bottom:14px`, uma à esquerda e outra centrada, e
combinaram enquanto o palco era largo. Num palco estreito não combinam de
jeito nenhum, e davam DOIS defeitos ao mesmo tempo:
· O "Com cenário", no pé da coluna, encostava na pílula "Frente" — dois
controles diferentes colados um no outro, sem nada dizendo que são de
assuntos diferentes.
· E a tentativa de evitar isso pela largura (`max-width:calc(100% - 300px)`
nas pílulas) VAZAVA. `max-width` aperta a caixa, mas os botões são
`white-space:nowrap` e não encolhem abaixo do próprio texto: num palco
de 345 px o limite virava 45 px e as seis pílulas — 690 px de texto —
saíam pelos dois lados do palco, porque a fileira é centrada por
`translateX(-50%)`. O texto aparecia fora da peça, sobre a página.
O conserto é separar as duas em ALTURA, e não em largura. A coluna sobe o
bastante para passar por cima da fileira; a fileira, que agora tem a linha
só para ela, recupera a largura inteira do palco. E o que ainda assim não
couber ROLA — nenhuma vista fica inalcançável, e nada mais vaza.
══════════════════════════════════════════════════════════════════════════ */
/* A ALTURA DA FILEIRA DE PÍLULAS, escrita UMA VEZ. Duas regras dependem
dela — a coluna que sobe e a folga de quem passa por baixo —, e duas
escritas do mesmo número divergem no dia em que alguém mexe numa só.
O valor é a caixa fechada: 5 de recheio + 27 de botão + 5 + as duas
bordas. */
#app{ --vistas-alt:39px; }
#app .sim-salvar{
position:absolute; left:14px;
/* ACIMA DA FILEIRA, e não ao lado dela: 14 de respiro do pé do palco, a
fileira inteira, e mais 12 entre as duas. */
bottom:calc(14px + var(--vistas-alt) + 12px);
/* 21, e não 3. O HUD e as pílulas de vista, que já moravam no palco, são
`z-index:20` — com 3 estes botões ficavam ATRÁS deles. A altura agora
os separa, mas a ordem continua valendo para o HUD. */
z-index:21;
display:flex; flex-direction:column; align-items:flex-start; gap:6px;
/* A coluna continua não crescendo para a direita além do que a peça
permite — agora por causa da PEÇA, e não das pílulas. */
max-width:min(46%, 260px);
}
#app#app .mk-vistas{
/* ══════════════════════════════════════════════════════════════════════
ELA É CENTRADA POR `left:0; right:0; margin:auto`, E NÃO POR `left:50%`
— E ISSO CUSTOU O BOTÃO "AS DUAS" NO FIREFOX.
A regra de cima ainda diz `left:50%; transform:translateX(-50%)`, que é
a receita de sempre para centrar um absoluto. O problema é que, num
absoluto sem largura, a LARGURA DISPONÍVEL para o encolhimento vai do
`left` até a beira do contentor — com `left:50%`, METADE DO PALCO.
O Chrome deixa a fileira passar disso; o Firefox não. E como logo
abaixo há `overflow-x:auto` com a barra de rolagem escondida, o que não
coube não transborda: ele ROLA para fora, sem nada na tela dizendo que
está lá. Resultado medido na máquina da casa: seis botões no Chrome,
CINCO no Firefox, com o "As duas" inalcançável.
Não é teoria — o mesmo acontece no Chrome quando o palco aperta.
Medido, com a fileira de seis:
palco 804 px área visível 540 conteúdo 540 todos visíveis
palco 524 px área visível 496 conteúdo 540 "As duas" FORA
Com `left:0; right:0` a largura disponível passa a ser o palco inteiro,
e `margin-inline:auto` centra do mesmo jeito — nos dois navegadores.
══════════════════════════════════════════════════════════════════════ */
left:0; right:0;
margin-inline:auto;
width:max-content;
transform:none;
/* A LINHA DE BAIXO É SÓ DELA, então ela usa o palco inteiro menos o
respiro das beiras. O `calc(100% - 300px)` de antes reservava espaço
para uma coluna que não está mais aqui embaixo. */
max-width:calc(100% - 24px);
/* E O QUE NÃO COUBER QUEBRA A LINHA, EM VEZ DE ROLAR ESCONDIDO.
*
* Rolar era a escolha anterior, e ela tem uma falha que só aparece no dia
* em que alguém procura um botão: com a barra de rolagem apagada, uma
* fileira que rola é IDÊNTICA a uma fileira que acabou. Foi exatamente
* assim que o "As duas" sumiu — ele estava lá, rolado para fora, e a tela
* não tinha como dizer isso.
*
* Quebrando, o pior caso é a fileira ocupar duas linhas sobre a peça num
* palco estreito. Duas linhas se veem; um botão fora da rolagem, não.
* O `overflow-x` fica de rede: se um dia um botão sozinho for mais largo
* que o palco, ele ainda pode ser arrastado. */
flex-wrap:wrap;
justify-content:center;
overflow-x:auto;
overscroll-behavior-x:contain;
/* A BARRA DE ROLAGEM SOME, O ARRASTO FICA. Uma barra cinza atravessada
no pé de uma fileira de vidro sobre a peça é feia, e agora ela quase
nunca teria o que fazer — a quebra de linha resolve antes. */
scrollbar-width:none;
}
#app#app .mk-vistas::-webkit-scrollbar{ display:none }
/* E AS PÍLULAS NÃO ENCOLHEM. Sem isto o navegador tenta espremê-las para
caber e corta "Manga E" no meio — um botão cortado não é um botão. Elas
ficam do tamanho que são, e quem rola é a fileira. */
#app#app .mk-vistas button{ flex:0 0 auto }
#app .sim-salvar > button,
#app .sim-girar > #ecGira{
display:inline-flex; align-items:center; gap:7px;
padding:8px 12px; border-radius:9px; cursor:pointer;
background:#ffffffdc; border:1px solid var(--linha); color:var(--texto);
font:inherit; font-size:12px; line-height:1; white-space:nowrap;
box-shadow:0 6px 26px #0000001f;
transition:background .15s, border-color .15s, color .15s;
}
#app .sim-salvar > button:hover,
#app .sim-girar > #ecGira:hover{
background:var(--cw-verde, #e2507d); border-color:var(--cw-verde, #e2507d); color:#fff;
}
/* O GIRO E AS VELOCIDADES numa linha só: são uma decisão, e não duas. */
#app .sim-girar{display:flex; align-items:center; gap:6px}
/* Girar é interruptor, e o botão tem de PARECER ligado — sem o aceso, quem
apertou e viu a camisa rodar não sabe onde desligar. O `.on` é posto pelo
`mockup.js`, que já cuidava disso quando o botão morava na barra. */
#app .sim-girar > #ecGira.on{
background:var(--roxo); border-color:var(--roxo); color:#fff; font-weight:600;
}
#app .sim-vel{
display:flex; gap:2px; padding:3px; border-radius:9px;
background:#ffffffdc; border:1px solid var(--linha);
box-shadow:0 6px 26px #0000001f;
}
#app .sim-vel button{
padding:5px 9px; border:0; border-radius:6px; cursor:pointer;
background:none; color:var(--fraco);
font:inherit; font-size:11.5px; font-weight:600; line-height:1;
}
#app .sim-vel button:hover{background:#00000010; color:var(--texto)}
#app .sim-vel button.on{background:var(--roxo); color:#fff}
/* No telefone o palco é baixo e os quatro empilhados comeriam a peça: eles
encostam no canto e viram uma linha que quebra. */
@media (max-width:980px){
#app#app .sim-salvar{left:10px; right:10px; bottom:10px; flex-direction:row; flex-wrap:wrap}
/* ─── NO TELEFONE A BARRA SAI DE CIMA DA PEÇA ─── (12/09/2026)
A regra acima tentava fazer caber no palco, e não havia como: são nove
controles — o pad, girar com as três velocidades, as duas imagens, o
tamanho, o vídeo, a velocidade do vídeo, todas as vistas e o cenário —,
418 px de coluna num palco de 340. E ela nem chegava a virar linha: o
`max-width:min(46%, 260px)` do computador continuava valendo, 46% de 350
são 161 px, e a "linha" quebrava a cada botão. Medido na sonda de
celular, a coluna saía por cima do palco, cobria a camisa, o HUD e as
pílulas de vista.
Agora, abaixo de 980 px, o `salvar_celular.js` tira o `#salvar` de
dentro do palco e o põe logo DEPOIS dele, e a classe `s3-fer-card` a faz virar um
card do fluxo: a peça fica limpa, e as ferramentas continuam a
um polegar de distância, logo embaixo dela. */
/* O CARD EM SI MORA NO `sim3d.css` (`.s3-fer-card`), junto das outras três
famílias: o pedido seguinte foi "a opção mobile tem que funcionar padrão
em todos os simuladores", e uma pele por família seriam quatro para
desencontrar. */
/* ─── E O OLHO DO PALCO SOBE PARA O CANTO DE CIMA ─── (12/09/2026)
No telefone as pílulas de vista quebram em duas linhas, e a segunda
chega ao canto de baixo à direita — onde mora o olho. Medido: 960 px²
de pílula debaixo do botão. O canto de CIMA à direita está livre (o HUD
fica à esquerda), então é para lá que ele vai.
Isto quebra um pouco a regra dos "dois olhos, dois cantos iguais" do
`olho_palco.js`, e é consciente: num palco de 340 px, perder um canto é
melhor que ter um botão por cima de outro. */
#app#app .s3-olho{ top:10px; bottom:auto }
}
/* ══════════════════════════════════════════════════════════════════════════
A COR DO PALCO, NUM LUGAR SÓ.
Branco, por escolha do CW. Fica o registro do que isso custa, para não
ser redescoberto: sobre branco a camisa BRANCA — a mais comum — perde o
contorno, e o que se vê dela é a sombra. Quem for conferir uma peça clara
troca o fundo em "Luz e tecido → Fundo", e a escolha manual manda.
E é UMA variável porque a cor é usada em três lugares que precisam bater:
o fundo do palco, o vão da janela em volta dele e o CENÁRIO DO 3D — este
último lido daqui pelo `mockup.js` (`getComputedStyle(palco)`), justamente
para não haver um quarto valor escrito à mão que divergisse no primeiro
dia em que alguém trocasse a cor. Mudar aqui muda os três.
Quem quiser outro fundo troca em "Luz e tecido → Fundo", e a escolha manual
continua mandando.
══════════════════════════════════════════════════════════════════════════ */
/* DUAS CORES, e não uma. Elas já foram a mesma variável — para não
divergirem —, mas amarrar uma na outra amarrou o que não queria ficar
junto:
· `--sim-palco` é a MOLDURA: o fundo da janela e o vão que sobra
embaixo do palco. Claro, para não brigar com a página do site.
· `--sim-cenario` é o que fica ATRÁS DA PEÇA dentro do 3D. Verde,
porque é sobre ele que a camisa BRANCA — a mais comum e a mais difícil
— aparece inteira, com a barra e as costuras visíveis.
A segunda é lida daqui pelo `mockup.js`, e vira um DEGRADÊ: o motor clareia
o topo e escurece o pé a partir dela. Trocar a cor aqui muda o 3D junto. */
#app#app{ --sim-palco:#ffffff; --sim-cenario:#ff9dbb }
#app#app .mk-palco{background:var(--sim-palco)}
/* ══════════════════════════════════════════════════════════════════════════
OS ÍCONES DOS BOTÕES (o sprite está no `index.php`)
`currentColor` é o ponto: o desenho é da cor da LETRA do botão, então ele
escurece, clareia e vira branco no `hover` verde junto com ela, sem uma
única regra a mais. Era o que emoji não fazia — vinha colorido e chapado,
e destoava toda vez que o botão acendia.
══════════════════════════════════════════════════════════════════════════ */
#app#app .ic{
width:17px; height:17px; flex:0 0 auto;
/* INLINE-BLOCK, e não `block`. Como bloco ele tomava a linha inteira e
empurrava o nome para baixo — era o ícone em cima e o texto embaixo, em
toda aba e toda pílula. Inline, ele fica ao lado da palavra, e o
`vertical-align` o desce o tanto que falta para os dois centros
coincidirem: `middle` alinha pelo meio da letra minúscula, que fica alto
demais para um desenho quadrado.
E funciona em QUALQUER botão — inclusive nos que não são `flex`, como as
predefinições de luz. */
display:inline-block; vertical-align:-0.2em;
/* Sem `fill`, sem `stroke` e sem `stroke-width` aqui: cada desenho traz os
seus, e uma regra geral neste ponto apagaria as cores de todos eles. */
}
/* Onde o botão JÁ é uma caixa flex, o alinhamento é pelo eixo, que é mais
exato que o `vertical-align`: o desenho e o nome centram um no outro. */
#app#app .mk-parte,
#app#app .mk-ajuste-abas button,
#app#app .mk-vistas button,
#app#app .sim-salvar > button,
#app#app .sim-girar > #ecGira{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
#app#app .mk-parte .ic,
#app#app .mk-ajuste-abas button .ic,
#app#app .mk-vistas button .ic,
#app#app .sim-salvar > button .ic,
#app#app .sim-girar > #ecGira .ic{vertical-align:0}
/* O nome não encolhe nem quebra ao lado do desenho. */
#app#app .mk-parte > span,
#app#app .mk-ajuste-abas button > span,
#app#app .mk-vistas button > span{flex:0 0 auto; white-space:nowrap}
/* Nos botões que são SÓ o ícone — as dez ferramentas da chapa e a lupa — ele
é o botão inteiro, e por isso um pouco maior e centrado. */
#app .mk-ferra .bt .ic{width:17px; height:17px}
#app .mk-ferra .bt{justify-content:center}
/* ══════════════════════════════════════════════════════════════════════════
A FILEIRA DE FERRAMENTAS EM DUAS LINHAS DE CINCO (08/09/2026).
O `mk-escopado.css` a monta como `flex` com `wrap`: os botões ficam do
tamanho do desenho de cada um e quebram onde couberem. Numa coluna de 424 px
isso dava NOVE numa linha e a lixeira sozinha na segunda, esticada — uma
fileira apertada e um botão gigante embaixo dela, que ainda por cima era o
único destrutivo do grupo.
Pedido do CW: duas linhas de cinco, distribuídos. Vira GRADE — e com
`1fr` por coluna os dez ficam do MESMO tamanho, que é o que "distribuídos"
quer dizer. A lixeira volta a ser um botão como os outros.
São dez botões e cinco colunas: a conta fecha exata, sem sobra na segunda
linha. Se um décimo primeiro entrar um dia, ele nasce sozinho numa terceira
linha — e aí é hora de rever o número de colunas, não de deixar acontecer.
`#app#app` para ganhar do gerado, que é `#app` simples. O `mk-escopado.css`
não se toca (ver `_fonte/LEIA.md`).
══════════════════════════════════════════════════════════════════════════ */
#app#app .mk-ferra{
display:grid; grid-template-columns:repeat(5, 1fr); gap:5px;
}
/* No `flex` o botão encolhia até o desenho; na grade ele recebe a coluna
inteira, e sem isto o ícone ficaria colado à esquerda dela. */
#app#app .mk-ferra .bt{ width:100%; padding-left:0; padding-right:0 }
#app .mk-lupa button .ic{width:14px; height:14px; margin:auto}
/* Nas pílulas de vista, que são pequenas e ficam sobre a peça, o desenho
entra menor para não virar o assunto do botão. */
#app .mk-vistas button .ic{width:15px; height:15px}
#app .mk-ajuste-abas button .ic{width:16px; height:16px}
/* ══════════════════════════════════════════════════════════════════════════
"COMO USAR", embaixo da janela — NÃO MORA MAIS AQUI.
A trilha, o título, a explicação e os cartões do guia são a CASCA das
páginas de simulador, e são iguais nesta e na da caneca. Foram para
`../sim3d.css`, que as duas carregam; as classes no HTML passaram de
`.sim-guia` para `.s3-guia`.
Eram duas escritas do mesmo desenho — `.sim-*` aqui, `.cn-*` lá — e já
tinham divergido no tamanho do h2, do ícone, do cartão e da coluna. Cada
peça nova acrescentaria uma terceira cópia, parecida com uma das duas.
As ANIMAÇÕES dos ícones continuam definidas no sprite (`../icones.php`) e
são acesas de lá, pela mesma variável herdada.
══════════════════════════════════════════════════════════════════════════ */
/* O painel das duas peças, na barra. Ele usa `.mk-corpo` para herdar o
visual das barrinhas e dos grupos, mas sem o `flex:1` e o `overflow` de
lá: é um bloco a mais na coluna, e não uma página que rola por dentro. */
#app#app .sim-dupla{flex:0 0 auto; overflow:visible; margin:0 -12px}
#app#app .sim-dupla .grupo{margin:0; padding:2px 12px 4px}
/* ══════════════════════════════════════════════════════════════════════════
A ALÇA DA LARGURA DO CENÁRIO.
Um traço fino encostado na beira direita da moldura. Discreto parado —
ela não é uma ferramenta que se usa a toda hora —, e evidente quando o
dedo chega perto: engrossa, ganha cor e mostra os dois traços do meio, que
é como toda alça de redimensionar do mundo se anuncia.
A área de PEGAR é mais larga que o traço que se vê: acertar dois pixels
com o mouse é o tipo de exigência que faz a pessoa achar que a alça não
funciona. O `::before` invisível estende o alvo para os lados.
══════════════════════════════════════════════════════════════════════════ */
#app .sim-alca{
position:absolute; z-index:22; width:3px; margin-left:-1px;
cursor:ew-resize; touch-action:none;
background:#ffffff66;
transition:background .15s, width .15s, margin-left .15s;
}
/* o alvo do ponteiro, invisível e generoso */
#app .sim-alca::before{
content:""; position:absolute; top:0; bottom:0; left:-9px; right:-9px;
}
/* O PUNHO FICA À VISTA, SEMPRE. Ele já dependeu do `:hover`, e alça que só
aparece quando o mouse chega perto é alça que ninguém descobre — a pessoa
precisa passar o dedo por cima de uma linha de três pixels sem ter motivo
para isso. Parado ele é discreto; no `:hover` ganha a cor e o corpo. */
#app .sim-alca i{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:16px; height:34px; border-radius:5px;
background:#ffffffee; box-shadow:0 2px 10px #0000002e;
transition:transform .15s, box-shadow .15s;
}
#app .sim-alca:hover i, #app .sim-alca.puxando i{
transform:translate(-50%,-50%) scale(1.12);
box-shadow:0 3px 14px #00000040;
}
/* os dois risquinhos do meio, que dizem "isto se arrasta" */
#app .sim-alca i::before, #app .sim-alca i::after{
content:""; position:absolute; top:9px; bottom:9px; width:2px; border-radius:1px;
background:#4c3fd6;
}
#app .sim-alca i::before{left:5px}
#app .sim-alca i::after {right:5px}
#app .sim-alca{background:#ffffff8c}
#app .sim-alca:hover, #app .sim-alca.puxando{
width:5px; margin-left:-2px; background:var(--cw-verde, #e2507d);
}
/* ══════════════════════════════════════════════════════════════════════════
A CRUZ QUE MOVE A PEÇA NO CENÁRIO.
Uma cruz e um ponto, e não um quadrado com um alvo dentro: a cruz DIZ os
eixos em que a coisa anda, e o cruzamento marca o meio — para onde os dois
cliques devolvem a peça. Sem ela seria uma caixa vazia com uma bolinha, e
ninguém adivinharia que arrastar ali move o que está no palco.
O ponto ganha cor quando sai do centro: parado no meio ele é neutro, e
deslocado avisa que o enquadramento não está mais no automático.
══════════════════════════════════════════════════════════════════════════ */
#app .sim-pad{
position:relative; width:96px; height:96px; border-radius:12px;
background:#ffffffdc; border:1px solid var(--linha);
box-shadow:0 6px 26px #0000001f;
cursor:crosshair; touch-action:none;
transition:border-color .15s;
}
#app .sim-pad:hover, #app .sim-pad.puxando{border-color:var(--cw-verde, #e2507d)}
/* os dois braços, encostando nas beiras */
#app .sim-pad-h, #app .sim-pad-v{position:absolute; background:#22d3ee; border-radius:3px}
#app .sim-pad-h{left:9px; right:9px; top:50%; height:5px; margin-top:-2.5px}
#app .sim-pad-v{top:9px; bottom:9px; left:50%; width:5px; margin-left:-2.5px}
/* o ponto que se arrasta — `left`/`top` vêm do JS, em porcentagem */
#app .sim-pad b{
position:absolute; left:50%; top:50%; width:15px; height:15px;
margin:-7.5px 0 0 -7.5px; border-radius:50%;
background:#be2d59; border:2px solid #fff;
box-shadow:0 1px 6px #00000055; pointer-events:none;
transition:background .15s, transform .12s;
}
#app .sim-pad.mexido b{background:var(--roxo)}
#app .sim-pad.puxando b{transform:scale(1.18)}
/* ══════════════════════════════════════════════════════════════════════════
E POR ÚLTIMO O TELEFONE — último de propósito, ver o topo do arquivo.
As duas colunas viram duas linhas, e o palco vem primeiro: a peça é o que
se veio ver.
══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
OS GRUPOS COMO CARDS — recolher e reordenar
O comportamento mora no `painel_cards.js`, à parte, porque o `mockup.js` vem
do sublimarker e vai receber correções de lá. Aqui ficam só as regras, e elas
ficam no `rodape.css` por ser o arquivo escrito à mão desta página — o
`mk-escopado.css` é gerado e a próxima geração o sobrescreve (ver LEIA.md).
É o mesmo desenho do simulador de caneca, que virou o padrão da casa.
═══════════════════════════════════════════════════════════════════════════ */
/* DOIS GESTOS, DOIS ALVOS: os pontinhos da esquerda arrastam, o resto do
cabeçalho recolhe. Cada um com o seu cursor — é o cursor que conta o que
aquele pedaço faz. */
#app#app .grupo > h3.mk-tit-card{
display:flex; align-items:center; gap:8px;
cursor:pointer; user-select:none;
}
/* Os pontinhos são desenhados em CSS, e não escritos com o ⠿ do braille: ele
resolve em fonte diferente em cada sistema, e num deles vira um retângulo
vazio. Uma grade de pontos é a mesma coisa em toda parte. */
#app#app .mk-pega{
flex:0 0 auto; width:10px; height:15px;
background-image:radial-gradient(var(--linha) 1.15px, transparent 1.2px);
background-size:5px 5px; background-position:0 2px;
cursor:grab; touch-action:none;
}
#app#app .mk-pega:hover{background-image:radial-gradient(var(--fraco) 1.15px, transparent 1.2px)}
#app#app .mk-pega:active{cursor:grabbing}
/* A setinha vai depois do risco que o `h3` já desenha com o `::after`, e por
isso ela é um `::before` do próprio risco — assim não briga com ele. */
#app#app .grupo > h3.mk-tit-card::after{
flex:1; height:1px; background:var(--linha);
}
#app#app .grupo > h3.mk-tit-card .mk-seta{
/* ENCOSTADA NA BEIRA DIREITA. Ela ficava colada no título porque quem a
empurrava para lá era o RISCO do `::after` do `h3`, que estica com
`flex:1` — e o risco foi desligado quando o grupo virou card (o card já
separa; a régua era a segunda divisória a dizer o mesmo).
`margin-left:auto` faz o mesmo trabalho sem desenhar nada: a folga que
sobra na linha vai toda para a esquerda dela. É onde a setinha está no
simulador de caneca. */
flex:0 0 auto; margin-left:auto;
color:var(--fraco); font-size:11px; transition:transform .15s;
}
/* Fechado: some tudo menos o próprio cabeçalho, e a margem dele vai junto —
senão o card fechado fica com um vão embaixo do título. */
#app#app .grupo.mk-fechado > *:not(h3){display:none !important}
#app#app .grupo.mk-fechado > h3{margin-bottom:0}
#app#app .grupo.mk-fechado > h3.mk-tit-card::after{background:var(--linha)}
/* O CARD LEVANTADO. Sai do fluxo e segue o ponteiro; `pointer-events:none`
para não tapar a conta de onde ele deve cair, que é feita medindo os irmãos
por baixo dele. */
#app#app .grupo.mk-arrastando{
z-index:80; pointer-events:none; opacity:.94;
padding:8px 10px; border-radius:var(--r);
background:var(--cartao); border:1px solid var(--roxo);
box-shadow:0 12px 28px #0f172a2e; transform:rotate(-.4deg);
}
/* E O RETÂNGULO QUE GUARDA O LUGAR. Ele responde à única pergunta do gesto:
"se eu soltar agora, onde ele cai?". */
#app#app .mk-vao{
border:2px dashed var(--verde); border-radius:var(--r);
background:#22a06b14; box-sizing:border-box; margin-bottom:16px;
}
/* Enquanto se arrasta, a página inteira para de selecionar texto e o cursor de
agarrar acompanha o ponteiro mesmo fora da alça. */
body.mk-arrastando-pg{user-select:none; cursor:grabbing}
/* ═══════════════════════════════════════════════════════════════════════════
AS DUAS ABAS, NO DESENHO DA CANECA
Pílulas dentro de uma caixa arredondada, e a aberta preenchida no verde da
marca — o mesmo `.cn-abas` do simulador de caneca, que virou o padrão do
site. Antes eram duas abas sublinhadas, herança do sublimarker.
O VERDE VEM CRAVADO, e não de `var(--cor-marca)`: aquela variável mora no
`assets/css/base.css`, que é a folha do site, e esta página reescopa
a folha do sublimarker em `#app` — dentro dele a variável não chega. Repetir
o número aqui é feio e é honesto; buscá-la e não achar daria cinza.
═══════════════════════════════════════════════════════════════════════════ */
#app#app .mk-ajuste-abas{
display:flex; gap:4px; padding:4px; margin-bottom:10px;
border:1px solid var(--linha); border-radius:12px;
background:var(--cartao);
/* A MESMA ALTURA DOS CARDS, e pelo mesmo motivo: sobre o gelo ela é uma
superfície branca como eles, e uma superfície branca sem sombra ao lado
de outras com sombra parece afundada — não neutra. */
box-shadow:var(--sim-elevacao);
}
#app#app .mk-ajuste-abas button{
flex:1 1 0; min-width:0;
border:0; border-radius:9px; background:transparent;
padding:9px 10px;
font-size:13px; font-weight:700; color:var(--fraco);
cursor:pointer; transition:background-color .12s, color .12s;
}
#app#app .mk-ajuste-abas button:hover{background:var(--escuro2); color:var(--texto)}
/* A ABA ABERTA não respondia ao ponteiro: ela já é verde, e a regra acima
só valia para as apagadas. Agora ela escurece como todo o resto. */
#app#app .mk-ajuste-abas button.on:hover{background:var(--sim-hover); color:#fff}
#app#app .mk-ajuste-abas button.on{background:#e2507d; color:#fff}
/* O desenho do ícone acompanha a cor do texto da aba aberta — sem isto ele
fica com a cor de origem e some no verde. */
#app#app .mk-ajuste-abas button.on .ic{color:#fff; fill:currentColor; stroke:currentColor}
/* ═══════════════════════════════════════════════════════════════════════════
O PAINEL NO VISUAL DA CANECA
O que se via antes era o desenho do sublimarker: cada grupo separado por um
risco fino, cada botão com a sua borda, cada linha com o rótulo espremido em
96px à esquerda do controle. Muita divisória para pouca informação — a tela
parecia uma planilha.
A caneca resolveu de outro jeito, e virou o padrão do site: CADA GRUPO É UM
CARD, com fundo próprio e uma borda só; o rótulo vai ACIMA do controle, com o
valor do outro lado da mesma linha; e as divisórias internas somem, porque o
card já separa.
Tudo aqui é sobrescrita: o `mk-escopado.css` é gerado e não se toca (LEIA.md).
Por isso o `#app#app`, que ganha dele por especificidade.
═══════════════════════════════════════════════════════════════════════════ */
/* ── o grupo vira card ── */
/* `.mk-ajuste > .grupo` é o card das cores, que mora na barra e não numa das
abas — ele é montado pelo `painel_cards.js`, como os outros três da aba
Arte. */
#app#app .mk-corpo .grupo,
#app#app .mk-ajuste > .grupo,
#app#app .mk-ajuste-corpo .grupo{
margin-bottom:12px; padding:12px 13px;
background:var(--cartao); border:1px solid var(--linha); border-radius:12px;
/* A SOMBRA. O card nasceu branco sobre branco e a única coisa que o
separava era a linha de 1 px — o CW viu antes de qualquer medida ("está
quase difundindo com o fundo"). O que separa de verdade é o fundo gelo,
lá embaixo; esta sombra é o que diz a ALTURA. As três camadas e a escolha
da cor estão no `--sim-elevacao`. */
box-shadow:var(--sim-elevacao);
}
/* Sem o risco depois do título: o card já separa um grupo do outro, e a régua
era a segunda divisória a dizer a mesma coisa. */
#app#app .grupo > h3::after{display:none !important}
#app#app .mk-corpo .grupo > h3,
#app#app .mk-ajuste > .grupo > h3,
#app#app .mk-ajuste-corpo .grupo > h3{
display:flex; align-items:center; gap:8px;
margin:0 0 10px; padding:0; border:0;
font-size:12.5px; font-weight:700; letter-spacing:0;
text-transform:none; color:var(--texto);
}
/* ── a linha: rótulo em cima, controle embaixo ── */
/* Só nas linhas que têm uma BARRINHA. Nas outras — seletores, caixas de cor,
pares de botões — o rótulo ao lado continua sendo o certo, e mudá-las de
forma quebraria o alinhamento que elas já têm. */
#app#app .mk-corpo .lin:has(input[type=range]){
display:grid; grid-template-columns:1fr auto;
gap:3px 8px; margin-bottom:11px;
}
#app#app .mk-corpo .lin:has(input[type=range]) > label{
grid-column:1; grid-row:1; flex:0 0 auto;
font-size:12px; color:var(--fraco);
}
#app#app .mk-corpo .lin:has(input[type=range]) > .val{
grid-column:2; grid-row:1; text-align:right;
font-size:12px; font-weight:700; color:var(--texto);
background:none; border:0; padding:0; min-width:0;
}
#app#app .mk-corpo .lin:has(input[type=range]) > input[type=range]{
grid-column:1 / -1; grid-row:2; width:100%;
accent-color:#e2507d;
}
/* ── as pílulas de parte, mais leves ── */
/* Sem borda e sem sombra: são cinco botões lado a lado, e cinco bordas viram
uma grade. O que a aberta precisa é de PESO, não de contorno. */
#app#app .mk-parte{
border:0; background:var(--escuro2); color:var(--fraco);
border-radius:9px; box-shadow:none;
}
#app#app .mk-parte:hover{background:#e7ebf2; color:var(--texto)}
#app#app .mk-parte.on{background:#e2507d; color:#fff}
#app#app .mk-parte.on .ic{color:#fff; fill:currentColor; stroke:currentColor}
/* ── as pílulas de vista, sobre a peça ── */
#app#app .mk-vistas button.on{background:#e2507d; color:#fff; border-color:#e2507d}
#app#app .mk-vistas button.on .ic{color:#fff; fill:currentColor; stroke:currentColor}
/* ── os campos ── */
#app#app .mk-corpo select,
#app#app .mk-corpo input[type=text],
#app#app .mk-corpo input[type=number]{
border:1px solid var(--linha); border-radius:8px; background:var(--escuro2);
}
/* O botão comum perde a borda dura e ganha a mesma cara dos da caneca. */
#app#app .mk-corpo .bt.fino{
border:1px solid var(--linha); border-radius:8px; background:var(--cartao);
box-shadow:none;
}
#app#app .mk-corpo .bt.fino:hover{background:var(--escuro2)}
/* A dica dentro do card não precisa de caixa: ela já está dentro de uma. */
#app#app .mk-corpo .dica{
border:0; background:none; padding:0; margin-top:8px;
font-size:11.5px; line-height:1.45; color:var(--fraco);
}
/* ═══════════════════════════════════════════════════════════════════════════
AS DUAS COLUNAS, INDEPENDENTES — como na caneca
O palco tinha a altura da JANELA (até 860px), e a barra ao lado esticava para
acompanhar a coluna mais alta. Resultado: com a aba "Luz e tecido" aberta, o
palco ficava muito mais alto que a camisa e sobrava um vão branco embaixo
dela; e o vão mudava de tamanho conforme a aba, que é o pior tipo de layout
— o que se mexe sozinho.
A caneca resolveu com uma caixa de PROPORÇÃO FIXA: 5 por 3, e cada coluna com
a sua altura. É o que entra aqui.
O QUE NÃO MUDA É O `sticky`. Ele foi posto para consertar um defeito real
(ver o bloco acima: o palco chegava a mil e quinhentos pixels e a peça saía
da tela), e continua sendo o que mantém a camisa à vista enquanto se rola
atrás de um controle lá embaixo. A caneca não tem isso porque o painel dela
é curto — não é uma escolha melhor, é um problema que ela não tem.
═══════════════════════════════════════════════════════════════════════════ */
#app#app .mk-palco{
height:auto;
aspect-ratio:5 / 3;
max-height:min(calc(100vh - var(--altura-header, 80px) - 40px), 860px);
}
/* E a barra deixa de esticar: cada coluna termina onde o conteúdo dela
termina, que é o que faz as duas serem independentes de verdade. */
#app#app .mk-ajuste{align-self:flex-start}
/* ═══════════════════════════════════════════════════════════════════════════
A CAIXA MÃE PERDE A BORDA — duas colunas soltas, como na caneca
Esta é a última diferença de LAYOUT entre os dois simuladores, e era a que
se via de longe. A caneca é um grid de duas colunas: a caixa do palco de um
lado, o painel do outro, e um vão de 20px entre eles — cada um com o seu
contorno, sobre o branco da página. A camisa era o contrário: UMA moldura
em volta de tudo, com o palco e a barra colados por dentro dela e separados
por um risco. Duas telas irmãs que não pareciam da mesma casa.
O contorno desce um nível: sai do `#app` e vai para o `.mk-palco`, que passa
a ser a caixa do palco — o `.cn-palco-caixa` de lá. E a barra fica sem fundo
e sem borda, porque os grupos dentro dela já são cards brancos: uma caixa em
volta de caixas é uma divisória a mais dizendo o que já estava dito.
─── GRID, E NÃO FLEX ───
É o que a caneca usa, e aqui ele resolve uma coisa a mais: a largura da
coluna passa a ser do CONTAINER, e não da barra. Antes o número (424px)
estava escrito na `.mk-ajuste` e o palco ficava com o resto; a coluna e o
que mora nela deixam de ter de concordar.
Só há dois filhos para as duas colunas: `#curtaVideo` mora DENTRO da barra,
e o painel de seis abas é `display:none` neste modo — um `display:none` não
ocupa célula de grid.
─── AS MARGENS NEGATIVAS ───
A barra tinha `padding:12px`, e três coisas sangravam para fora dele com
margem negativa: as abas, a gaveta de luz e o painel das duas peças. Sem o
padding elas ficariam para fora da coluna — por isso as três são zeradas
logo abaixo. É o tipo de conserto que só aparece depois de tirar o padding,
e é por isso que ele está escrito aqui, junto do motivo.
═══════════════════════════════════════════════════════════════════════════ */
#app#app{
display:grid;
grid-template-columns:1fr 424px;
align-items:start;
gap:20px;
border:0; border-radius:0; background:transparent;
/* `clip` existia para cortar o que passasse dos cantos arredondados da
moldura. Sem moldura não há o que cortar — e `visible` é a única palavra
que não arrisca prender o `sticky` do palco. */
overflow:visible;
min-height:0;
/* A mesma largura do texto que vem embaixo (`--s3-larg`, do `sim3d.css`) e
a mesma da caneca. O valor de reserva é o miolo do `.cw-container`. */
max-width:var(--s3-larg, 1248px);
margin-left:auto; margin-right:auto;
}
/* O PALCO VIRA A CAIXA — é ele que leva o contorno agora. */
#app#app .mk-palco{
border:1px solid var(--linha);
border-radius:14px;
background:var(--sim-palco);
}
/* O ARREDONDAMENTO É REPETIDO NO CANVAS, e não deixado a cargo do
`overflow:hidden` do palco: um canvas de WebGL é desenhado pela placa de
vídeo, numa camada própria, e várias combinações de navegador e driver
ignoram o recorte do pai — os cantos saíam quadrados sobre um fundo que
deveria ser redondo. É a mesma regra do `caneca.css`. */
#app#app .mk-palco canvas{border-radius:13px}
/* E o fundo do palco é o degradê da caneca, no lugar do branco chapado. Ele
só aparece antes de o 3D subir e nas beiras — mas é justamente o primeiro
pixel que a pessoa vê ao abrir a página.
`--sim-cenario`, que é o fundo DENTRO do 3D e é lido pelo `mockup.js`, não
muda: continua o verde da marca, o mesmo da caneca. */
#app#app{--sim-palco:linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%)}
/* A BARRA, SEM CAIXA — os cards dentro dela já são as caixas. */
#app#app .mk-ajuste{
width:auto; min-width:0;
padding:0; background:transparent; border-left:0;
}
/* As três que sangravam para fora do padding que acabou de sair. */
#app#app .mk-ajuste-abas{margin:0 0 12px}
#app#app .mk-ajuste-luz{margin:0}
#app#app .mk-ajuste-luz.mk-corpo .pag{padding:2px 0 14px}
#app#app .sim-dupla{margin:0}
/* ═══════════════════════════════════════════════════════════════════════════
AS QUATRO ABAS (12/09/2026) — Arte · Cor da arte · Peça · Estúdio
Quatro botões numa coluna de 424 px dão uns cem pixels para cada um, e o
desenho ao LADO do nome não cabe: "Cor da arte" em negrito, mais o ícone,
mais o respiro, passa de cento e dez — o nome sairia cortado. Com o desenho
EM CIMA do nome, o mais largo fica em uns setenta, e sobra folga até na
largura de celular.
═══════════════════════════════════════════════════════════════════════════ */
#app#app .mk-ajuste-abas button{
flex-direction:column; gap:3px;
padding:7px 4px; font-size:12px; line-height:1.15;
}
#app#app .mk-ajuste-abas button .ic{width:17px; height:17px}
/* O PÉ DAS PREFERÊNCIAS — abaixo das quatro abas, à vista em todas: o botão
guarda tudo, e dentro de uma aba parecia guardar só o que estava nela.
Veste o mesmo card dos outros; não é casa do `painel_cards.js`, então não
recolhe nem anda — um pé que anda acabaria dentro de uma aba de novo. */
#app#app .mk-ajuste-prefs .grupo{
margin-bottom:12px; padding:12px 13px;
background:var(--cartao); border:1px solid var(--linha); border-radius:12px;
box-shadow:var(--sim-elevacao);
}
#app#app .mk-ajuste-prefs .grupo > h3{
display:flex; align-items:center; gap:8px;
margin:0 0 10px; padding:0; border:0;
font-size:12.5px; font-weight:700; letter-spacing:0;
text-transform:none; color:var(--texto);
}
/* ═══════════════════════════════════════════════════════════════════════════
O SELETOR DO "TODAS AS VISTAS", na barra do palco
Com cenário ou PNG recortado — a mesma escolha que os dois botões acima dele
oferecem um a um. Ele veste a pílula de vidro dos vizinhos porque está na
mesma barra: um controle com desenho próprio ali no meio leria como coisa de
fora. O `