/* ===========================================================================
   1967 Woodworks — estilo do APP, por cima do modulos/visual/estilo-rustico.css
   Regras de quem usa (README, 3ª mensagem; planta §4 e §6):
     • tudo em rem: 1rem = 20 px × a escala do "Aa Letra" (Normal 1 · Grande 1,15 · Maior 1,3)
     • nenhuma caixa de altura fixa com texto dentro: botão e cartão crescem com a letra
     • nada atrás do topo nem da barra de abas; env(safe-area-inset-*) em cima e embaixo
     • sem rolagem para o lado; palavra comprida quebra, não vaza
     • textura só no fundo (a mesa); todo texto mora em superfície lisa
   =========================================================================== */

html{font-size:calc(20px * var(--r-escala, 1));-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root{
  /* As bordas do iPhone (ilha e indicador de início). Separadas em variável para o
     teste poder simular um iPhone Pro Max em modo tela de início. */
  --seguro-topo:env(safe-area-inset-top, 0px);
  --seguro-baixo:env(safe-area-inset-bottom, 0px);
  --seguro-esq:env(safe-area-inset-left, 0px);
  --seguro-dir:env(safe-area-inset-right, 0px);
  --app-topo:84px;
}
body.r-app{overflow-x:hidden;min-width:0}
.r-app main{display:block}

/* Variáveis que o editor e os modelos ainda leem com o nome do app antigo. */
.r-app{
  --fundo:var(--r-papel); --fundo-2:var(--r-papel); --fundo-3:var(--r-papel-2);
  --texto:var(--r-tinta); --texto-2:var(--r-tinta-2); --borda:var(--r-borda);
  --cor-marca:var(--r-couro); --cor-marca-suave:rgba(92,50,20,.14); --raio:var(--r-raio);
  --papel:#FFFFFF; --papel-borda:var(--r-borda); --topo-altura:var(--app-topo);
}

/* ---------------------------------------------------------- topo e abas */
/* Topo e abas mais baixos (eram 27% da tela do Pro Max): "Aa Letra" numa linha só, 44 px;
   sem 8 px a mais embaixo das abas; nas telas com "‹ Voltar" a logo vira a peça "1967★"
   CENTRALIZADA de verdade (a horizontal, com o BUILT BY HAND ilegível, ficava fora do meio). */
.r-cabecalho.app-topo{
  padding-top:calc(6px + var(--seguro-topo));padding-bottom:6px;
  padding-left:calc(12px + var(--seguro-esq));padding-right:calc(12px + var(--seguro-dir));
}
#btnVoltar[hidden] ~ .r-logo{margin-left:0}
.app-topo .r-cabecalho-linha{gap:8px;min-height:48px;position:relative}
.app-topo .r-logo--horizontal{width:min(171px, 42vw)}
.app-topo .r-voltar{min-height:48px;padding:0 14px 0 8px}
.app-topo .r-btn-letra{flex-direction:row;gap:6px;min-height:44px;padding:2px 10px}
.app-topo .r-btn-letra-aa{font-size:22px}
.app-topo .app-logo-curta{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);margin:0;height:40px;width:auto}
#btnVoltar:not([hidden]) ~ .r-logo--horizontal{display:none}
#btnVoltar[hidden] ~ .app-logo-curta{display:none}
.r-abas{
  padding-top:6px;padding-bottom:max(6px, var(--seguro-baixo));
  padding-left:calc(6px + var(--seguro-esq));padding-right:calc(6px + var(--seguro-dir));
}
.r-aba{padding-left:6px;padding-right:6px;min-height:56px}
.r-aba > span{display:block;max-width:100%;overflow-wrap:break-word}
.r-pagina{margin-left:calc(8px + var(--seguro-esq));margin-right:calc(8px + var(--seguro-dir))}
@media (min-width:776px){ .r-pagina{margin-left:auto;margin-right:auto} }

/* ---------------------------------------------------------- texto comum */
.app-frase{font-size:1.1rem;font-weight:700;line-height:1.4;margin:0 0 1rem;color:var(--r-tinta)}
.app-titulo-secao{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:1.6rem 0 .7rem;font-family:var(--r-fonte-titulo);font-weight:400;
  font-size:1.25rem;line-height:1.25;color:var(--r-tinta);
}
.app-titulo-secao .r-ic{width:1.5rem;height:1.5rem}
.app-titulo-pequeno{font-weight:700;font-size:1rem;line-height:1.35;margin:1rem 0 .5rem;color:var(--r-tinta)}
.r-subtitulo{font-size:1.4rem;overflow-wrap:break-word}
.r-ajuda{font-size:1rem}
.r-ajuda strong{color:var(--r-tinta)}

/* botões: a palavra quebra linha em vez de sair do botão */
.r-btn{max-width:100%;font-size:1.1rem}
.r-btn .app-btn-texto{min-width:0;overflow-wrap:break-word}
.r-btn .r-ic{width:1.4rem;height:1.4rem;flex:0 0 auto}
.r-btn-principal{min-height:3.2rem}
.r-btn{min-height:max(var(--r-botao), 3rem)}
.r-pilha-botoes{gap:.8rem;margin-top:1rem}
.r-btn[aria-busy="true"]{cursor:progress}
.app-dois{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:.6rem}
.app-dois .r-btn{width:100%;min-width:0;padding-left:8px;padding-right:8px}
:root[data-letra="maior"] .app-dois.app-dois-solto{grid-template-columns:1fr}
.app-pilha-campos{display:flex;flex-direction:column;gap:1.2rem}

/* recado que fica num lugar da tela */
.app-recado{margin:0}
.r-aviso p{margin:0;overflow-wrap:break-word}
.r-aviso{font-size:1rem}
.app-aviso-maquina{margin:.8rem 0 0}

/* "Mais opções" */
.r-mais-opcoes > summary{font-size:1.1rem;min-height:3rem}
.r-mais-conteudo .r-ajuda{margin-top:.8rem}

/* tela que está carregando */
.app-carregando{text-align:center}

/* ----------------------------------------------- aba Desenhos: faixa da data */
.app-faixa-data{
  display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem;width:100%;
  margin:0 0 1.2rem;padding:.7rem 1rem;min-height:3.2rem;text-align:left;
  background:var(--r-plaquinha);color:var(--r-tinta);
  border:3px solid var(--r-couro);border-left-width:12px;border-radius:12px;
  box-shadow:0 3px 0 var(--r-borda);font-weight:700;font-size:1.1rem;line-height:1.3;
}
.app-faixa-icone{font-size:1.5rem;line-height:1}
.app-faixa-txt{flex:1 1 9rem;min-width:0}
.app-faixa-ver{color:var(--r-tinta);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* busca grande */
.app-busca{display:flex;flex-direction:column;gap:.4rem;margin:0 0 .4rem}
.app-busca-linha{position:relative}
.app-busca-linha .r-ic{position:absolute;left:14px;top:50%;width:1.5rem;height:1.5rem;transform:translateY(-50%);pointer-events:none;color:var(--r-tinta)}
.app-busca-campo{min-height:3.2rem;padding-left:calc(1.5rem + 26px);font-size:1.2rem;-webkit-appearance:none;appearance:none}
.app-busca-campo::-webkit-search-cancel-button{display:none}
.app-busca-ex{margin:0}
.app-busca-limpar{margin-top:.2rem}
.sugestoes{margin:.4rem 0 .6rem}

/* temas: blocos grandes que quebram linha (nada de rolar para o lado) */
.app-temas{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:.6rem}
@media (min-width:640px){ .app-temas{grid-template-columns:repeat(3, minmax(0, 1fr))} }
.app-tema{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:3rem;padding:.5rem .6rem;min-width:0;
  background:var(--r-papel);color:var(--r-tinta);
  border:3px solid var(--r-borda);border-radius:12px;box-shadow:0 3px 0 var(--r-borda);
  font-weight:700;font-size:1rem;line-height:1.25;overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual;
}
.app-tema[aria-pressed="true"]{background:var(--r-couro);color:var(--r-couro-texto);border-color:var(--r-couro-borda)}
.app-tema:active{transform:translateY(2px);box-shadow:0 1px 0 var(--r-borda)}
.app-tema-escolhido{display:flex;flex-direction:column;gap:.6rem;margin:1rem 0 .4rem;padding:.8rem 1rem;background:var(--r-papel-2);border-left:8px solid var(--r-couro);border-radius:8px}
.app-tema-escolhido-txt{margin:0;font-size:1.1rem;font-weight:400}

/* grade de desenhos: 2 por linha no celular */
.app-grade{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:.7rem}
@media (min-width:700px){ .app-grade{grid-template-columns:repeat(3, minmax(0, 1fr))} }
.app-cartao{
  display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:0;text-align:left;
  background:var(--r-papel);color:var(--r-tinta);
  border:3px solid var(--r-borda);border-radius:12px;overflow:hidden;box-shadow:0 3px 0 var(--r-borda);
}
.app-cartao:active{transform:translateY(2px);box-shadow:0 1px 0 var(--r-borda)}
/* a moldura branca é QUADRADA sempre (o desenho em pé não estica o cartão) e os nomes de
   cartões vizinhos começam na mesma altura */
.app-cartao-papel{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1/1;min-height:0;overflow:hidden;background:#FFFFFF;border-bottom:3px solid var(--r-borda)}
.app-cartao-papel img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain}
.app-cartao-sem{color:#21170F;font-weight:700;font-size:1rem;padding:.5rem;text-align:center}
.app-cartao-nome{display:block;min-height:calc(2 * 1.25em + .9rem);padding:.45rem .6rem .55rem;font-weight:700;font-size:1rem;line-height:1.25;overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual}
.app-cartao-fav{
  display:flex;align-items:center;gap:.3rem;margin-top:auto;padding:.35rem .6rem;
  background:var(--r-couro);color:var(--r-couro-texto);font-weight:700;font-size:1rem;line-height:1.2;
}
.app-cartao-fav .r-ic{width:1.2rem;height:1.2rem;fill:currentColor}
.app-mais{margin-top:1rem}
.app-vazio{margin-top:.6rem}

/* ----------------------------------------------------- ficha do desenho */
.app-ficha-papel{
  display:grid;place-items:center;margin:0 0 1.2rem;padding:12px;
  background:#FFFFFF;border:3px solid var(--r-borda);border-radius:12px;
}
/* o desenho encolhe (JS: App.caberAteOBotao) para o "Guardar nas Fotos" caber na 1ª vista */
.app-ficha-papel{margin-bottom:.8rem;padding:10px}
.app-ficha-img{max-width:100%;max-height:min(28vh, 270px);width:auto;height:auto;object-fit:contain}
.app-ficha-sem{margin:0;padding:1rem;font-weight:700;text-align:center;color:#21170F}
.app-espelhado{transform:scaleX(-1)}
.app-na-madeira{margin:.5rem 0 .3rem;font-size:1.05rem}
.app-na-madeira strong{white-space:nowrap}
/* a largura: os tamanhos prontos à vista; "Outra" abre o campo − + (o mesmo controle na
   ficha, na escrita e em "Minha imagem") */
.app-largura{margin:0}
.app-largura-rotulo{margin:0 0 .4rem}
/* os 3 tamanhos + "Outra" numa fileira só (a letra do botão tem teto de 22 px) */
.app-atalhos{display:grid;grid-template-columns:repeat(var(--app-n-atalhos, 4), minmax(0, 1fr));gap:.45rem;margin:0 0 .3rem}
.app-atalho{width:100%;min-width:0;min-height:max(var(--r-botao), 3rem);padding:6px 2px;font-size:min(1rem, 22px);white-space:nowrap}
.app-atalho[aria-pressed="true"]{background:var(--r-couro);color:var(--r-couro-texto);border-color:var(--r-couro-borda)}
.app-largura-campo{margin-top:.5rem}
.app-sem-quebra{white-space:nowrap}
.app-aviso-corpo{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.app-btn-maior{margin:0}
.app-btn-fav[aria-pressed="true"] .r-ic{fill:currentColor}
.app-creditos{overflow-wrap:break-word}
.r-medida-rotulo{font-size:1.1rem}
.r-medida-ajuda{font-size:1rem}

/* -------------------------------------------------- aba Fazer peça: cardápio */
.app-tarefa-principal{border-width:4px;border-color:var(--r-couro);box-shadow:0 5px 0 var(--r-couro)}
.r-tarefa{min-width:0;height:auto}
.r-tarefa-nome{font-size:1.2rem;overflow-wrap:break-word}
.r-tarefa-desc{font-size:1rem;overflow-wrap:break-word}
.app-modelos{display:grid;grid-template-columns:1fr;gap:.6rem;margin:0 0 .8rem}
@media (min-width:560px){ .app-modelos{grid-template-columns:repeat(2, minmax(0, 1fr))} }
.app-modelo{
  display:flex;flex-direction:column;gap:.15rem;width:100%;min-width:0;padding:.6rem .9rem;text-align:left;
  background:var(--r-plaquinha);color:var(--r-tinta);
  border:3px solid var(--r-borda);border-radius:10px;box-shadow:0 3px 0 var(--r-borda);
}
.app-modelo:active{transform:translateY(2px);box-shadow:0 1px 0 var(--r-borda)}
.app-modelo-nome{font-weight:700;font-size:1.1rem;line-height:1.25}
.app-modelo-ex{font-size:1rem;line-height:1.3;color:var(--r-tinta-2);overflow-wrap:break-word}

/* modelo pronto: uma pergunta por vez, caixa enorme */
.app-pergunta-n{margin:0 0 1rem}
.app-pergunta{font-size:1.3rem;line-height:1.3}
.app-pergunta-campo{min-height:3.6rem;font-size:1.5rem;font-weight:700}
.app-pergunta-dica{margin:.2rem 0 0}

/* ------------------------------------------------------ a peça (passos) */
.app-passos{margin:0 0 1rem}
.app-passos .r-passos-agora{margin-top:.6rem}
.app-passos .r-passos-agora:focus,.app-passos .r-passos-agora:focus-visible,.esc .r-passos-agora:focus-visible{outline:none;box-shadow:none}
.app-peca .app-frase{margin-top:0}
.app-passos .r-passos-agora.app-passos-continuando{border-left-color:var(--r-ok-borda);background:var(--r-ok-fundo)}
.app-peca-fim{margin-top:1.6rem}
/* A barra do passo: presa logo acima das abas EM TODOS OS PASSOS — "‹ Voltar" pequeno à
   esquerda e, à direita, o botão do que vem agora ("Próximo: …"; no passo 4, "Mandar para
   o cliente" ou "Guardar nas Fotos"), como a barra de ferramentas de um app de iPhone.
   Altura fixa de botão (56 px, a medida mínima de toque da planta), sem crescer com a
   letra: a barra nunca engole a tela. O recado dela fica numa fileira inteira, em cima. */
.app-peca-barra{
  position:sticky;bottom:var(--r-abas-medida, calc(var(--r-abas-altura) + var(--seguro-baixo)));z-index:8;
  display:grid;grid-template-columns:auto minmax(0, 1fr);gap:.4rem .5rem;align-items:stretch;
  margin:1rem -16px -28px;padding:6px 12px 6px;
  background:var(--r-papel);border-top:3px solid var(--r-borda);box-shadow:0 -6px 10px -8px rgba(0,0,0,.45);
}
.app-peca-barra .r-btn{margin:0;width:auto;min-height:56px;padding:4px 12px;font-size:min(1.1rem, 22px);line-height:1.15}
.app-peca-barra .r-btn .r-ic{width:1.3rem;height:1.3rem}
.app-peca-barra .app-btn-linha1{font-size:inherit}
.app-peca-barra .app-btn-linha2{font-size:min(1rem, 20px)}
.app-peca-barra .app-btn-fotos:is([data-estado="normal"], [data-estado="naocabe"]) .app-btn-linha2{display:none}
/* o recado da barra (erro do "Próximo", "Enviado.", "Quase lá…"): a fileira inteira, em
   cima dos botões, com letra de teto — curto, nunca mais de 2 linhas */
.app-peca-barra > .app-recado, .app-peca-barra-recado{grid-column:1 / -1}
.app-peca-barra > .app-recado{padding:6px 10px;font-size:20px;line-height:1.25}
.app-peca-barra > .app-recado .r-ic{width:1.3rem;height:1.3rem}
.app-peca-barra-recado[hidden]{display:none}
/* os recados de baixo (Visual.avisar) sobem acima da barra do passo */
.r-app.r-com-abas .r-avisos-pilha{bottom:calc(var(--r-abas-medida, calc(var(--r-abas-altura) + var(--seguro-baixo))) + var(--app-barra-passo, 0px) + 12px)}
@media (min-width:700px){ .app-peca-barra .r-btn{min-width:0} }

/* o editor, embutido na tela (não é mais uma folha por cima de tudo) */
.ed-raiz.ed-embutido{
  position:static;inset:auto;z-index:auto;overflow:visible;padding:0;
  background:transparent;color:var(--r-tinta);font-size:1rem;
}
.ed-embutido .ed-corpo{max-width:none;margin:0;padding:0}
.ed-embutido .ed-corpo > .ed-modelo,
.ed-embutido .ed-corpo > .ed-linha-foto,
.ed-embutido .ed-corpo > .ed-dica-antes,
.ed-embutido .ed-corpo > .ed-secao-titulo,
.ed-embutido .ed-corpo > .ed-adicionar,
.ed-embutido .ed-corpo > .ed-saidas,
.ed-embutido .ed-vazio{display:none!important}
.ed-embutido .ed-fixo{position:static;margin:0;padding:0 0 .4rem;background:var(--r-papel);box-shadow:none}
.ed-embutido[data-passo="3"] .ed-fixo{
  position:sticky;top:var(--app-topo);z-index:5;
  margin:0 -16px;padding:.4rem 16px .5rem;
  box-shadow:0 10px 10px -10px rgba(0,0,0,.4);
}
.ed-embutido[data-passo="4"] .ed-fixo{display:none!important}
.ed-embutido:not([data-passo="3"]) :is(.ed-chips, .ed-ferramentas, .ed-ajustes, .ed-mais, .ed-encaixe-meio){display:none!important}
.ed-embutido[data-passo="1"] :is(.ed-linha-info, .ed-alerta-fixa){display:none!important}
.ed-embutido:is([data-passo="1"], [data-passo="2"]) .ed-mesa{pointer-events:none}
.ed-embutido:is([data-passo="1"], [data-passo="2"]) .ed-selecao{display:none!important}
.ed-embutido .ed-mesa{background:var(--r-papel-2);border:3px solid var(--r-borda);border-radius:12px}
/* medida e aviso: crescem com a letra (nada de altura fixa com texto dentro) */
.ed-embutido .ed-info{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:1rem;color:var(--r-tinta)}
.ed-embutido .ed-alerta-fixa{height:auto;min-height:calc(1.3em + 12px);display:block;-webkit-line-clamp:unset;overflow:visible}
.ed-embutido .ed-alerta{font-size:1rem;background:var(--r-erro-fundo);color:var(--r-tinta);border:3px solid var(--r-erro-borda)}
.ed-embutido .ed-alerta-ok{background:var(--r-papel-2);color:var(--r-tinta);border:3px solid var(--r-borda);font-weight:700}
.ed-embutido .ed-linha-info{flex-wrap:wrap}
.ed-embutido .ed-btn-desfazer{flex:0 0 auto}
.ed-embutido .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:3rem;padding:4px 14px;
  background:var(--r-papel-2);color:var(--r-tinta);border:3px solid var(--r-borda);border-radius:12px;
  box-shadow:0 3px 0 var(--r-borda);font-weight:700;font-size:1rem;line-height:1.15;
}
.ed-embutido .btn[disabled]{box-shadow:none;border-style:dashed;color:var(--r-tinta-2);background:var(--r-papel)}
.ed-embutido .btn svg{width:1.3rem;height:1.3rem}
/* "qual parte mexer": os nomes quebram linha, nada rola para o lado */
.ed-embutido .ed-chips{flex-wrap:wrap;overflow:visible;gap:.5rem;margin-top:.6rem}
.ed-embutido .ed-chips .chip{
  flex:0 1 auto;max-width:100%;white-space:normal;text-overflow:clip;overflow:visible;text-align:left;
  min-height:3rem;padding:.35rem .9rem;border:3px solid var(--r-borda);border-radius:999px;
  background:var(--r-papel);color:var(--r-tinta);font-weight:700;font-size:1rem;line-height:1.2;overflow-wrap:break-word;
}
.ed-embutido .ed-chips .chip[aria-pressed="true"]{background:var(--r-couro);color:var(--r-couro-texto);border-color:var(--r-couro-borda)}
.ed-embutido .ed-secao-titulo{font-size:1rem;margin:1rem 0 .4rem}
.ed-embutido .ed-ferr{
  min-height:3.3rem;padding:6px 4px;border:3px solid var(--r-borda);border-radius:12px;
  background:var(--r-papel);color:var(--r-tinta);font-size:1rem;font-weight:700;line-height:1.15;
  box-shadow:0 3px 0 var(--r-borda);min-width:0;overflow-wrap:break-word;
}
.ed-embutido .ed-ferr svg{width:1.4rem;height:1.4rem}
.ed-embutido .ed-ferr[disabled]{box-shadow:none;border-style:dashed;color:var(--r-tinta-2)}
.ed-embutido .ed-ferr:active:not([disabled]){transform:translateY(2px);box-shadow:0 1px 0 var(--r-borda);background:var(--r-plaquinha)}
.ed-embutido .ed-ferr-apagar{color:var(--r-perigo)}
.ed-embutido .ed-ferr-2 .ed-ferr{min-height:3.3rem}
.ed-embutido .ed-cruz .ed-ferr{min-height:3.3rem}
/* letra Grande/Maior: as setas viram 2 colunas largas (a palavra "Esquerda" não cabe em 1/3) */
:root:is([data-letra="grande"], [data-letra="maior"]) .ed-embutido .ed-cruz{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-areas:"cima baixo" "esq dir" "meio meio";
}
@media (min-width:560px){ :root:is([data-letra="grande"], [data-letra="maior"]) .ed-embutido .ed-cruz{grid-template-columns:repeat(3, minmax(0, 1fr));grid-template-areas:". cima ." "esq meio dir" ". baixo ."} }
.ed-embutido .ed-ajustes{background:var(--r-papel-2);border:3px solid var(--r-borda);border-radius:12px;padding:.8rem}
.ed-embutido .ed-ajustes .rotulo{display:block;font-weight:700;font-size:1rem;margin:0 0 .4rem;color:var(--r-tinta)}
.ed-embutido .ed-ajuste .linha-medida{gap:.5rem}
.ed-embutido .ed-largura{width:5.5rem;min-height:3rem;height:auto;border:3px solid var(--r-borda);border-radius:10px;background:var(--r-papel);color:var(--r-tinta);font-size:1.2rem}
.ed-embutido .unidade,.ed-embutido .altura-calc{font-size:1rem;font-weight:700;color:var(--r-tinta)}
.ed-embutido .ed-mais{border:3px solid var(--r-borda);border-radius:12px;background:var(--r-papel)}
.ed-embutido .ed-mais-titulo{min-height:3rem;font-size:1.05rem}
.ed-embutido .ed-giro{min-height:3rem}
.ed-embutido .ed-giro-valor{min-height:3rem;height:auto;border:3px solid var(--r-borda);background:var(--r-papel);color:var(--r-tinta);font-size:1rem}
/* Espelhar · Para a frente · Fazer cópia: um por linha (em 3 colunas "Espelhar" não cabe com letra Grande) */
.ed-embutido .ed-ferr-3{grid-template-columns:1fr}
.ed-embutido .ed-ferr-3 .ed-ferr{flex-direction:row;gap:.6rem;min-height:3.1rem}
.ed-embutido .ed-encaixe-meio{margin-top:.6rem}
.app-dica-mexer{margin:.8rem 0 0}
/* "Pôr tudo no meio da tábua": a gravação inteira (o "No meio" da cruz é só da parte) */
.ed-embutido .ed-ferr-tudo-meio{display:flex;flex-direction:row;gap:.5rem;width:100%;margin-top:.6rem;min-height:3.1rem;font-size:min(1rem, 22px)}

/* Passo 3 (a primeira vista tem que ter os nomes das partes e o Menor/Maior): a medida e o
   "✓ dentro da margem" numa linha só, o Desfazer na fileira dos botões de mexer, os nomes
   das partes e os botões com letra de teto (22 px) — a tábua presa mede o que sobra (JS). */
.ed-embutido .ed-alerta-fixa{display:none!important}
.ed-embutido .ed-linha-info{margin-top:6px}
.ed-embutido .ed-info{display:block;font-size:min(1rem, 22px);line-height:1.3;font-weight:700}
.ed-info-medida{white-space:nowrap}
.ed-info-estado{white-space:nowrap;padding:0 .4rem;border-radius:6px;background:var(--r-ok-fundo);border:2px solid var(--r-ok-borda)}
.ed-info-estado--ruim{background:var(--r-erro-fundo);border-color:var(--r-erro-borda)}
.ed-embutido[data-passo="3"] .ed-chips{margin-top:.4rem;gap:.4rem}
.ed-embutido[data-passo="3"] .ed-chips .chip{min-height:48px;padding:.25rem .8rem;font-size:min(1rem, 22px)}
.ed-embutido[data-passo="3"] .ed-secao-titulo{margin:.5rem 0 .3rem;font-size:min(1rem, 22px)}
.ed-embutido[data-passo="3"] .ed-ferr-2 .ed-ferr{min-height:min(3.3rem, 64px);font-size:min(1rem, 22px)}
.ed-embutido[data-passo="3"] .ed-cruz .ed-ferr, .ed-embutido[data-passo="3"] .ed-ferr-outros .ed-ferr{font-size:min(1rem, 22px)}
.ed-embutido[data-passo="3"] .app-dica-mexer{margin:.5rem 0 0;font-size:min(1rem, 22px)}
.ed-embutido[data-passo="3"] .ed-encaixe-topo .app-frase{margin-bottom:.4rem}
.ed-embutido .ed-ferr-outros{grid-template-columns:repeat(auto-fit, minmax(max(6.6rem, 110px), 1fr))}
.ed-embutido .ed-ferr-outros .ed-ferr{flex-direction:row;gap:.5rem;min-height:3.1rem}
.ed-embutido .ed-btn-desfazer{color:var(--r-tinta)}
/* a tábua presa no alto: teto de 34% da tela (o resto é dos botões) */
.ed-embutido[data-passo="3"] .ed-fixo{padding-top:.3rem;padding-bottom:.3rem}

/* passo 1: as tábuas */
.app-tabuas{display:flex;flex-direction:column;gap:.6rem;margin:0 0 .8rem}
.app-tabua{
  display:flex;align-items:center;gap:.7rem;width:100%;min-width:0;padding:.6rem .7rem;text-align:left;
  background:var(--r-papel);color:var(--r-tinta);
  border:3px solid var(--r-borda);border-radius:12px;box-shadow:0 3px 0 var(--r-borda);
}
.app-tabua[aria-pressed="true"]{border-width:5px;border-color:var(--r-couro);background:var(--r-papel-2)}
.app-tabua-desenho{flex:0 0 auto;display:grid;place-items:center}
.app-tabua-desenho svg{width:56px;height:56px}
/* o texto nunca fica mais estreito que a medida ("30 × 20 cm" não parte): sem lugar, o selo
   "✓ Esta" desce para a linha de baixo em vez de espremer o texto */
.app-tabua{flex-wrap:wrap}
.app-tabua-txt{display:flex;flex-direction:column;flex:1 1 6.5rem;min-width:min(6.5rem, 100%)}
.app-tabua-txt > .app-tabua-desc{overflow-wrap:normal}
.app-tabua-marca{margin-left:auto}
.app-tabua-nome{font-weight:700;font-size:1.05rem;line-height:1.25;overflow-wrap:break-word}
.app-tabua-desc{font-size:1rem;line-height:1.3;color:var(--r-tinta-2);overflow-wrap:break-word}
.app-tabua-marca{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.2rem;padding:.15rem .6rem;border-radius:999px;
  background:var(--r-couro);color:var(--r-couro-texto);font-weight:700;font-size:1rem;
}
.app-tabua-marca .r-ic{width:1.1rem;height:1.1rem}
.mo-desenho .mo-desenho-tabua{fill:var(--r-plaquinha);stroke:var(--r-tinta);stroke-width:1.5}
.mo-desenho .mo-desenho-margem{fill:none;stroke:var(--r-tinta);stroke-width:.9;stroke-dasharray:2 2}
.app-medidas-secao,.app-foto-secao{margin-top:1.4rem}
.app-medidas-resumo{display:flex;flex-direction:column;gap:.6rem}
.app-medidas-resumo-txt{margin:0;font-size:1.05rem;line-height:1.4}
.app-medidas-resumo-txt strong{white-space:nowrap}
.app-btn-guardar-tabua{margin-top:.8rem}
.app-desenho-medidas{max-width:17rem;margin:0 auto 1rem;color:var(--r-tinta);font-family:var(--r-fonte-texto)}
.r-medidas{gap:1.2rem}
.app-numero-medida{
  display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;margin-right:.45rem;border-radius:50%;
  background:var(--r-couro);color:var(--r-couro-texto);font-size:1rem;line-height:1;vertical-align:.1em;
}
.r-medida-caixa{min-height:3.4rem;grid-template-columns:3.2rem minmax(0, 1fr) 3.2rem}
.r-medida-campo{font-size:1.5rem;height:auto;min-height:3.1rem;max-width:6ch}
.r-medida-menos,.r-medida-mais{min-width:3.2rem;font-size:1.7rem}
.r-escolha > button{font-size:1rem;min-height:3rem;line-height:1.25}

/* passo 2: o que vai gravado */
.app-camadas{list-style:none;margin:0 0 .6rem;padding:0;display:flex;flex-direction:column;gap:.7rem}
.app-camada{
  display:flex;flex-direction:column;gap:.6rem;padding:.6rem;
  background:var(--r-papel-2);border:3px solid var(--r-borda);border-radius:12px;
}
.app-camada-topo{display:flex;align-items:center;gap:.7rem;min-width:0}
.app-camada-papel{flex:0 0 auto;width:4rem;height:4rem;display:grid;place-items:center;background:#FFFFFF;border:2px solid var(--r-borda);border-radius:8px}
.app-camada-papel{overflow:hidden}
.app-camada-papel img{max-width:86%;max-height:86%;object-fit:fill}
.app-camada-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.app-camada-tipo{font-size:1rem;font-weight:700;color:var(--r-queimado);text-transform:uppercase;letter-spacing:.04em}
.app-camada-nome{font-size:1.05rem;font-weight:700;line-height:1.25;overflow-wrap:break-word}
.app-camada-medida{font-size:1rem;color:var(--r-tinta-2)}
.app-camadas-vazio{margin:0 0 .6rem}
.app-por{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:.6rem}
.app-por .r-btn{width:100%;min-width:0;flex-direction:column;gap:.2rem;padding:8px 6px;line-height:1.2}
.app-btn-tirar{color:var(--r-perigo);border-color:var(--r-perigo)}

/* passo 4: a escolha no topo [Para o cliente | Para a máquina] e UM cartão por vez */
.app-escolha-saida{grid-template-columns:repeat(2, minmax(0, 1fr));gap:.5rem;margin:0 0 .2rem}
.app-escolha-saida > button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-width:0;padding:.5rem .4rem;line-height:1.2;font-size:min(1rem, 24px);overflow-wrap:break-word}
.app-escolha-saida > button .r-ic{width:1.6rem;height:1.6rem}
.app-escolha-saida > button[aria-pressed="true"]::before{content:none}
.app-escolha-saida > button > span{text-wrap:balance}
/* o escolhido: o ✓ é ÍCONE, no lugar do ícone dele (a palavra fica com a largura toda: r4-tio-3) */
.app-escolha-saida > button .app-escolha-ic-sim{display:none}
.app-escolha-saida > button[aria-pressed="true"] .app-escolha-ic-sim{display:block}
.app-escolha-saida > button[aria-pressed="true"] .app-escolha-ic{display:none}
.app-cartao-saida[hidden]{display:none}
.app-cartao-saida{
  margin:1rem 0 0;padding:1rem .9rem 1.1rem;
  background:var(--r-papel);border:3px solid var(--r-borda);border-radius:14px;box-shadow:0 3px 0 var(--r-borda);
}
.app-cartao-saida .app-titulo-secao{margin-top:0}
.app-btn-forte{border-width:4px;border-color:var(--r-couro)}
.app-quadro-arquivo{display:grid;place-items:center;margin:.8rem 0 0;padding:10px;background:#FFFFFF;border:2px solid var(--r-borda);border-radius:10px}
.app-img-arquivo{max-width:100%;max-height:min(36vh, 320px);width:auto;height:auto;box-shadow:0 0 0 1px #4A3828}
.app-quadro-previa{display:grid;place-items:center;min-height:6rem;margin:1rem 0 0;overflow:hidden;background:var(--r-papel-2);border:2px solid var(--r-borda);border-radius:10px}
.app-img-previa{display:block;width:100%;height:auto}
.app-espera{margin:0;padding:1rem;font-weight:700;text-align:center}
.app-pdf-previa{display:block;width:100%;height:auto;margin:0 0 1rem;border:2px solid var(--r-borda);border-radius:8px}

/* ------------------------------------------------------------- Favoritos */
.app-fav-bloco{margin:0 0 .4rem}
.app-fav-conta{font-family:var(--r-fonte-texto);font-weight:700;font-size:1rem}
.app-fav-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.app-fav-item{display:flex;flex-direction:column;gap:.5rem;padding:.6rem;background:var(--r-papel-2);border:3px solid var(--r-borda);border-radius:12px}
.app-fav-abre{display:flex;align-items:center;gap:.7rem;width:100%;min-width:0;min-height:3rem;padding:0;text-align:left;background:none;border:0;color:var(--r-tinta)}
.app-fav-papel{flex:0 0 auto;width:4.4rem;height:4.4rem;display:grid;place-items:center;overflow:hidden;background:#FFFFFF;border:2px solid var(--r-borda);border-radius:8px}
.app-fav-papel img{max-width:90%;max-height:90%;object-fit:contain}
.app-fav-papel--madeira{background:var(--r-plaquinha)}
.app-fav-papel .app-fav-escrita{width:90%;height:70%}
.app-fav-papel .mo-desenho{width:3.4rem;height:3.4rem}
.app-fav-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.app-fav-tipo{font-size:1rem;font-weight:700;color:var(--r-queimado);text-transform:uppercase;letter-spacing:.04em}
.app-fav-nome{font-size:1.05rem;font-weight:700;line-height:1.25;overflow-wrap:break-word}
.app-fav-escrita-txt{font-size:1.05rem;font-weight:700;line-height:1.25;color:var(--r-queimado);overflow-wrap:break-word}
.app-fav-detalhe{font-size:1rem;line-height:1.3;color:var(--r-tinta-2);overflow-wrap:break-word}
.app-fav-vazio{margin:0 0 .6rem}

/* ---------------------------------------------------- escrever um nome */
.app-escrever .esc{padding:0;background:transparent;max-width:none;--esc-topo:var(--app-topo)}
.esc-titulo{font-size:1.4rem}
.esc-folha{padding-left:var(--seguro-esq);padding-right:var(--seguro-dir)}
.esc-folha .esc-folha-corpo.esc{padding:16px 16px 24px}
.esc-folha-topo{padding-top:calc(8px + var(--seguro-topo))}
.esc-folha-voltar{border-color:var(--r-topo-texto);background:transparent;color:var(--r-topo-texto)}
.esc-folha{padding-bottom:calc(30px + var(--seguro-baixo))}

/* ------------------------------------------------- folha por cima (app) */
.app-folha{
  position:fixed;inset:0;z-index:75;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background-color:var(--r-mesa);background-image:var(--r-textura-tabuas),var(--r-textura-veio);
  padding-bottom:calc(24px + var(--seguro-baixo));
}
body.app-com-folha{overflow:hidden}
.app-folha-topo{
  position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:8px;
  padding:calc(8px + var(--seguro-topo)) calc(12px + var(--seguro-dir)) 10px calc(12px + var(--seguro-esq));
  background:var(--r-topo);color:var(--r-topo-texto);box-shadow:0 2px 0 rgba(0,0,0,.35);
}
.app-folha-voltar{max-width:100%}
.app-folha .r-pagina{margin-top:16px;margin-bottom:calc(16px + var(--seguro-baixo))}
/* a barra presa no pé da folha (o "Pôr nesta peça" da escrita, sempre à vista) */
.app-folha--com-barra{padding-bottom:0}
.app-folha--com-barra .r-pagina{margin-bottom:16px}
.app-folha-barra{position:sticky;bottom:0;z-index:7;padding:.6rem calc(12px + var(--seguro-dir)) calc(.7rem + var(--seguro-baixo)) calc(12px + var(--seguro-esq));background:var(--r-papel);border-top:3px solid var(--r-borda);box-shadow:0 -6px 10px -8px rgba(0,0,0,.45)}
.app-folha-barra:empty{display:none}
.app-folha-barra .r-btn{margin:0}
.app-fav-escolha{margin:0 0 1rem}
.app-fav-escolha .app-titulo-secao{margin-top:0}
.r-letra-opcao{height:auto}

/* -------------------------------------- folhas do editor (marcar a tábua) */
.ed-folha .ed-topo{background:var(--r-topo);color:var(--r-topo-texto);border-bottom:0;padding-top:calc(4px + var(--seguro-topo));box-shadow:0 2px 0 rgba(0,0,0,.35)}
.ed-folha .ed-titulo{color:var(--r-topo-texto);font-family:var(--r-fonte-titulo);font-weight:400;font-size:1.2rem;-webkit-line-clamp:unset;overflow:visible}
.ed-folha .btn-voltar{display:inline-flex;align-items:center;gap:6px;min-height:3rem;padding:0 14px 0 8px;background:transparent;color:var(--r-topo-texto);border:3px solid currentColor;border-radius:12px;font-weight:700;font-size:min(1.1rem, 24px)}
.ed-folha .btn-voltar svg{color:currentColor;width:1.3rem;height:1.3rem;stroke:currentColor;fill:none;stroke-width:2.4}
.ed-folha{padding-bottom:calc(28px + var(--seguro-baixo))}
.ed-folha .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:3rem;padding:8px 14px;background:var(--r-papel);color:var(--r-tinta);
  border:3px solid var(--r-borda);border-radius:12px;font-weight:700;font-size:1.05rem;line-height:1.2;
}
.ed-folha .btn svg{width:1.3rem;height:1.3rem;stroke:currentColor;fill:none;stroke-width:2.2}
.ed-folha .btn-primario{background:var(--r-couro);color:var(--r-couro-texto);border-color:var(--r-couro-borda)}
.ed-folha .ed-dica-foto,.ed-folha .ed-alerta{font-size:1rem;color:var(--r-tinta)}
.ed-folha .ed-alerta{background:var(--r-erro-fundo);border:3px solid var(--r-erro-borda)}

/* Ícones de traço dentro dos módulos (editor) */
.ed-raiz svg:not(.ed-guias):not(.mo-desenho), .ed-folha svg{stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ed-guias{stroke:none}

@media (prefers-reduced-motion:reduce){ .app-cartao,.app-tema,.app-modelo{transition:none} }

/* ------------------------------------------------------ usar minha imagem */
.app-minha-papel{overflow:hidden}
.app-minha-previa{display:block;max-width:100%;max-height:min(30vh, 300px);width:auto;height:auto}
/* a prévia presa no alto enquanto ele ajusta (ao tocar "Mais escuro" ele vê a imagem mudar) */
.app-minha-papel--presa{position:sticky;top:calc(var(--app-topo) + 4px);z-index:4;box-shadow:0 8px 10px -8px rgba(0,0,0,.45)}
.app-folha .app-minha-papel--presa{top:calc(var(--app-folha-topo, 70px) + 4px)}
/* com o cartão "Agora no MKSLaser" aberto, a prévia presa solta (não cobre o "Digite 150 mm") */
.app-presos-soltos :is(.app-minha-papel--presa, .esc-palco-fixo){position:static;box-shadow:none}
.app-escolha-nome{display:block;font-weight:700;font-size:1.05rem;line-height:1.25}
.app-escolha-desc{display:block;font-weight:400;font-size:1rem;line-height:1.3}
.app-minha-tipo > button{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.6rem .8rem;text-align:center}
.app-minha-tipo > button[aria-pressed="true"]::before{content:none}
.app-minha-tipo > button[aria-pressed="true"] .app-escolha-nome::before{content:"✓ "}

/* ---------------------------------------- "Guardar nas Fotos" (MKSLaser) */
.app-maquina{display:flex;flex-direction:column;gap:.8rem}
.app-btn-duas{display:flex;flex-direction:column;align-items:center;gap:.1rem;text-align:center}
.app-btn-linha1{font-size:1.15rem;line-height:1.2}
.app-btn-linha2{font-size:1rem;font-weight:400;line-height:1.25}
.app-btn-fotos{flex-wrap:nowrap}
.app-maquina-depois{
  padding:.9rem .9rem 1rem;background:var(--r-ok-fundo);color:var(--r-tinta);
  border:3px solid var(--r-ok-borda);border-left-width:10px;border-radius:12px;
}
.app-maquina-depois .app-titulo-secao{margin:0 0 .6rem}
.app-maquina-mini{display:grid;place-items:center;margin:0 0 .6rem;padding:8px;background:#FFFFFF;border:2px solid var(--r-borda);border-radius:8px}
.app-maquina-mini img{max-width:100%;max-height:min(24vh, 200px);width:auto;height:auto}
.app-maquina-mm{margin:.2rem 0 0;font-size:1.5rem;font-weight:700;line-height:1.25}
.app-maquina-mm strong{font-size:1.8rem;white-space:nowrap}
.app-maquina-alt{margin:0 0 .6rem;font-size:1.2rem;font-weight:700}
.app-maquina-alt .app-sem-quebra{white-space:nowrap}
.app-maquina-depois{scroll-margin-top:calc(var(--app-topo) + 8px)}
.app-maquina-depois .r-ajuda{color:var(--r-tinta)}
.app-maquina-reserva{display:flex;flex-direction:column;gap:.6rem}
.app-maquina-segure{margin:0;padding:.6rem .8rem;background:var(--r-atencao-fundo);border:3px solid var(--r-atencao-borda);border-radius:10px;font-size:1.15rem;font-weight:700;color:var(--r-tinta)}
.app-maquina-grande{display:block;width:100%;height:auto;background:#FFFFFF;border:2px solid var(--r-borda);-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto}
.app-passos-mks{margin:.6rem 0 0;padding-left:1.6rem;display:flex;flex-direction:column;gap:.5rem;font-size:1rem;line-height:1.4}
.app-avisos-mks{margin:0;padding-left:1.4rem;display:flex;flex-direction:column;gap:.4rem;font-size:1rem;line-height:1.4}
.app-maquina-ajuda{margin-top:1rem}
/* o último "Guardar nas Fotos" (6 horas, só quando o app abriu de novo depois do Guardar):
   UMA faixa baixa — ícone, "Rena com selvagem: digite 150 mm no MKSLaser" e [Fechar] —
   abaixo da busca de Desenhos e no alto de Fazer peça. Nunca empurra a busca para baixo. */
.app-ultimo-lugar{margin:.2rem 0 .9rem}
.app-ultimo-fotos{
  display:flex;align-items:center;gap:.5rem;padding:.35rem .4rem .35rem .7rem;background:var(--r-ok-fundo);color:var(--r-tinta);
  border:3px solid var(--r-ok-borda);border-left-width:8px;border-radius:12px;
}
.app-ultimo-fotos > .r-ic{flex:0 0 auto;width:1.3rem;height:1.3rem}
.app-ultimo-txt{flex:1 1 auto;min-width:0;margin:0;font-size:min(1rem, 22px);font-weight:400;line-height:1.25;overflow-wrap:normal}
.app-ultimo-nome{font-weight:700}
.app-ultimo-txt strong{font-weight:700}
.app-ultimo-fechar.r-btn{flex:0 0 auto;width:auto;min-width:0;margin:0!important;min-height:48px;padding:2px 10px;font-size:min(1rem, 22px)}
.app-ultimo-fechar .r-ic{width:1.1rem;height:1.1rem}
.ed-folha .ed-titulo:focus{outline:none}

/* O fim da tela nunca fica atrás da barra de abas: o espaço da barra é um "padding" do
   conteúdo (a margem da folha às vezes não cria rolagem quando a tela é curta). */
.r-app.r-com-abas #conteudo{padding-bottom:calc(var(--r-abas-medida, calc(var(--r-abas-altura) + var(--seguro-baixo))) + 8px)}
.r-app.r-com-abas #conteudo > .r-pagina{margin-bottom:16px}

/* Palavra comprida ("Woodworks", "Namorados") com a letra Maior em coluna estreita:
   a letra do cartão tem teto (24 px, nunca menos de 20) e, em último caso, a palavra quebra. */
.app-cartao-nome,.app-tema,.app-cartao-fav{font-size:min(1rem, 24px);overflow-wrap:break-word}
.app-camada-nome,.app-fav-nome,.app-tabua-nome,.app-modelo-nome{overflow-wrap:break-word}

/* 375 × 667 com letra Maior: a caixa de confirmar começa abaixo da barra de status e o
   título tem teto; o selo "✓ Esta" das letras quebra em vez de vazar. */
.r-caixa-fundo{padding-top:calc(16px + var(--seguro-topo))}
.r-caixa-titulo{font-size:min(calc(30px * var(--r-escala)), 32px)}
.r-caixa-texto{font-size:min(calc(22px * var(--r-escala)), 26px)}
.esc-fonte-topo{flex-wrap:wrap}
.esc-fonte-marca{max-width:100%}

/* Passo 3: a medida e o aviso presos junto da tábua com teto de letra (22 px, nunca menos
   de 20), para o bloco preso não engolir a tela com a letra Maior. */
.ed-embutido[data-passo="3"] .ed-info,.ed-embutido[data-passo="3"] .ed-alerta{font-size:min(1rem, 22px)}
.ed-embutido[data-passo="3"] .ed-btn-desfazer{font-size:min(1rem, 22px)}

/* ======================================================================= rodada 3 */

/* O passo a passo (peça e "Escrever um nome") mais baixo, como a barra de passos de um app de
   iPhone: bolinhas de 44 px (a atual 48), a frase "Passo 3 de 4: Posição" logo embaixo, com
   letra de teto. Sobra lugar para a tábua do passo 3 e para os campos do cliente no passo 4. */
:is(.app-passos, .esc .r-passos-caixa){margin-bottom:.7rem}
:is(.app-passos, .esc .r-passos-caixa) .r-passo-num{width:44px;height:44px;font-size:min(calc(24px * var(--r-escala)), 26px)}
:is(.app-passos, .esc .r-passos-caixa) .r-passo--atual .r-passo-num{width:48px;height:48px;margin-top:-2px;margin-bottom:-2px;box-shadow:0 0 0 3px var(--r-papel),0 0 0 6px var(--r-couro)}
:is(.app-passos, .esc .r-passos-caixa) .r-passo--feito .r-passo-num{font-size:0}
:is(.app-passos, .esc .r-passos-caixa) .r-passo--feito .r-passo-num::before{font-size:min(calc(26px * var(--r-escala)), 28px)}
:is(.app-passos, .esc .r-passos-caixa) .r-passo:not(:last-child)::after{top:15px;left:calc(50% + 26px);right:calc(-50% + 26px)}
.app-passos .r-passos-agora, .esc .r-passos-agora{margin:.5rem 8px 0;padding:5px 12px;font-size:min(calc(22px * var(--r-escala)), 26px)}

/* Passo 3: os nomes das partes com letra de 20 px (o mínimo do app) e menos folga — "Motivo de
   Natal 10" e "Feliz Natal" cabem na mesma fileira e a tábua presa fica maior (novo-tio-6). */
.ed-embutido[data-passo="3"] .ed-chips .chip{padding:.15rem .6rem;font-size:20px}
.ed-embutido[data-passo="3"] .app-dica-mexer{margin:.4rem 0 0}
/* a nota calma embaixo da medida da parte escolhida (traço fino) */
.ed-embutido .ed-nota{margin:.2rem 0 0;padding:0 .5rem;border-left:5px solid var(--r-couro);border-radius:4px;background:var(--r-papel-2);color:var(--r-tinta);font-size:20px;line-height:1.3;font-weight:400}
.ed-embutido:not([data-passo="3"]) .ed-nota{display:none}
/* "Esta parte no meio": duas linhas no meio da cruz, sem partir palavra */
.ed-embutido .ed-seta-meio{overflow-wrap:normal}

/* traço fino na ficha (embaixo do tamanho) e na lista do passo 2: aviso calmo, sem cor de alerta */
.app-nota-fino{margin:.5rem 0 0;background:var(--r-papel-2);border-color:var(--r-borda)}
.app-camada-nota{display:block;margin-top:.2rem;font-size:1rem;line-height:1.3;color:var(--r-tinta)}
/* "No MKSLaser: digite 150 mm de largura" — antes de guardar, embaixo do "Na madeira" */
.app-na-mks{margin:0 0 .3rem;font-size:1.05rem}
.app-na-mks strong{white-space:nowrap}
.app-maquina-comeco{margin:0 0 .6rem;font-size:1.05rem;font-weight:700;line-height:1.35}
.app-passos-provisorio{margin:.6rem 0 0;font-style:italic}
/* passo 4, cartão do cliente: a nota "Pode deixar vazio…" fica entre os campos e a prévia */
.app-cartao-nota{margin:1rem 0 0}
/* o cartão de depois do "Guardar nas Fotos" quando o tamanho NÃO cabe na máquina: vermelho,
   sem o "Digite N mm" (não ensina a fazer o que não dá certo) */
.app-maquina-depois--naocabe{background:var(--r-erro-fundo);border-color:var(--r-erro-borda)}
.app-maquina-naocabe{margin:0 0 .8rem;font-size:1.1rem;font-weight:700;line-height:1.4}
/* na barra do passo, o "Guardar nas Fotos" é sempre UMA linha (a barra nunca cresce): o "não
   cabe na máquina" mora no aviso acima dela, com o botão que resolve (r3.1-tio-2) */

/* iPhone pequeno (375) com letra Grande/Maior: palavra inteira desce, nunca se parte no meio
   (r3-encaixe-2). Colunas estreitas ganham letra com teto e os pares de botões viram pilha. */
/* (no 440 com a letra Maior, o nome do cartão tem teto de 22 px: "Ornamentada" inteira) */
:root[data-letra="maior"] .app-cartao-nome{font-size:min(1rem, 22px);padding:.45rem .45rem .55rem}
@media (max-width:400px){
  :root:is([data-letra="grande"], [data-letra="maior"]) .app-cartao-nome{font-size:20px;padding:.4rem .4rem .5rem}
  :root:is([data-letra="grande"], [data-letra="maior"]) .app-cartao-fav{font-size:20px;padding:.3rem .4rem}
  :root:is([data-letra="grande"], [data-letra="maior"]) .app-fav-papel{width:3.4rem;height:3.4rem}
  :root:is([data-letra="grande"], [data-letra="maior"]) :is(.app-fav-nome, .app-fav-escrita-txt){font-size:min(1.05rem, 24px)}
  :root:is([data-letra="grande"], [data-letra="maior"]) :is(.app-camada, .app-minha-oficina) .app-dois{grid-template-columns:1fr}
  /* (os tamanhos prontos não: eles têm a letra deles, 22 px e 20 px no "16,5 cm" — r4-encaixe-1) */
  :root:is([data-letra="grande"], [data-letra="maior"]) .r-btn:not(.app-atalho){font-size:min(1.1rem, 24px)}
  :root:is([data-letra="grande"], [data-letra="maior"]) .app-btn-linha2{font-size:min(1rem, 22px)}
}
/* passo 4: [Para o cliente | Para a máquina] com o ícone ao lado da palavra (mais baixos: os
   campos do cliente aparecem acima da barra do passo) */
.app-escolha-saida > button{flex-direction:row;gap:.4rem;min-height:3.2rem;padding:.4rem .5rem;text-align:left}
.app-escolha-saida > button .r-ic{flex:0 0 auto;width:1.4rem;height:1.4rem}
/* "16,5 cm" na fileira de 4 tamanhos: letra de 20 px (o mínimo), sem encostar na borda */
.app-atalho.app-atalho--longo{font-size:20px;padding-left:1px;padding-right:1px}
/* ficha: "Na madeira" e "No MKSLaser" juntos, sem folga a mais (o "Guardar nas Fotos" cabe na
   1ª vista do 440 nas 3 letras) */
.app-ficha .app-na-madeira{margin:.4rem 0 .1rem}
.app-ficha .app-na-mks{margin:0}
.app-ficha > .r-pilha-botoes{margin-top:.7rem}
/* "Os dois celulares iguais" (modulos/sincronia): o título de cada tela de ligar recebe o foco
   (leitor de tela), sem o anel amarelo de teclado em volta */
.sinc-titulo:focus, .sinc-titulo:focus-visible{outline:none;box-shadow:none}

/* ======================================================================= rodada 3, passada 2 */

/* Passo 3: a nota de traço fino mora no lugar da dica "Toque na parte que quer mexer:" (fora do
   bloco preso), numa linha curta — a tábua fica do tamanho que tem sem ela (r3.1-encaixe-2) */
.ed-embutido[data-passo="3"] .ed-encaixe-meio .ed-nota{margin:.4rem 0 0;padding:0 8px;border-left-width:5px;font-size:20px;line-height:1.3}
/* "Escrever um nome", passo 4: "Usar o maior que cabe" junto do aviso, na prévia presa (r3.1-tio-2) */
.esc-btn-maior-fixo{margin-top:.5rem!important;min-height:48px;font-size:min(1rem, 22px)}
/* Letra Grande/Maior: os botões de "Mais opções" moram dentro de cartões —
   menos recuo em volta deles, para "Arquivo para o computador" e "(computador)" descerem
   inteiros (nada de "o" ou ")" sozinho na linha: r3-encaixe-2) */
:root:is([data-letra="grande"], [data-letra="maior"]) .r-mais-conteudo{padding-left:10px;padding-right:10px}
:root:is([data-letra="grande"], [data-letra="maior"]) .r-mais-conteudo .r-btn{padding-left:10px;padding-right:10px;gap:8px}
.r-mais-conteudo .r-btn .app-btn-texto{text-wrap:balance}
/* Passo 3: quando os nomes das partes são compridos ("Papai Noel (1933)", "Rena com selvagem",
   "Logo completa" ocupavam uma fileira cada e a tábua encolhia até 165 px — r3.1-encaixe-2),
   eles viram uma grade de 2 colunas, cada nome inteiro no seu botão. O app só usa a grade
   quando ela fica MAIS BAIXA que os nomes soltos (telas/fazer-peca.js, arrumarNomes). Nunca
   rola para o lado. */
.ed-embutido[data-passo="3"] .ed-chips.app-nomes-grade{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 150px), 1fr));gap:.4rem}
.ed-embutido[data-passo="3"] .ed-chips.app-nomes-grade .chip{display:flex;align-items:center;justify-content:center;min-width:0;max-width:none;text-align:center;padding:.15rem .45rem;overflow-wrap:normal}
/* a medida da parte escolhida e o "✓ dentro da margem" cabem numa linha com a letra Maior (20 px,
   o mínimo do app): "7,9 × 10,2 cm" não pode quebrar a linha e encolher a tábua */
.ed-embutido[data-passo="3"] .ed-linha-info .ed-info{font-size:20px}
.ed-embutido[data-passo="3"] .ed-info-estado{padding:0 .3rem}
/* A barra do passo com a letra Maior: o ícone tem teto (26 px) e o "‹ Voltar" é compacto, para
   "Guardar nas Fotos" caber numa linha no 440 nas 3 letras (a barra fica com a mesma altura do
   "Próximo"). A letra dos botões da barra tem teto de 22 px também no iPhone pequeno (a regra do
   375 subia para 24 px e "Mandar para o cliente" ia a 3 linhas). */
.r-app .app-peca-barra .r-btn{font-size:min(1.1rem, 22px);gap:8px;padding-left:10px;padding-right:10px}
.r-app .app-peca-barra .r-btn .r-ic{width:min(1.3rem, 26px);height:min(1.3rem, 26px)}
.r-app .app-peca-barra .app-peca-voltar{padding-left:8px;padding-right:10px}
.r-app .app-peca-barra .app-btn-linha2{font-size:min(1rem, 20px)}
/* "Escrever um nome", passo 4: a prévia rola com a página (o aviso e o botão nunca ficam presos
   atrás da barra no iPhone pequeno) */
.app-escrever-p4 .esc-palco-fixo{position:static;box-shadow:none}
/* O aviso com o botão que resolve ("Usar o maior que cabe", "Pôr tudo no meio da tábua"): o
   texto ao lado do ícone e o botão na largura INTEIRA do aviso (dentro do cartão da peça, no
   iPhone pequeno com a letra Maior, ele ia a 5 linhas numa coluna de 180 px) */
.r-aviso > .app-aviso-corpo{display:contents}
.r-aviso > .app-aviso-corpo > p{grid-column:2;margin:2px 0 0}
.r-aviso > .app-aviso-corpo > .r-btn{grid-column:1 / -1;margin:.2rem 0 0;width:100%}
/* ficha: o "Guardar nas Fotos" (com "No MKSLaser: 150 mm" na 2ª linha) logo embaixo do "Na
   madeira" — inteiro na 1ª vista do 440 e do 430 nas 3 letras (r3.1-encaixe-1) */
.app-ficha > .r-pilha-botoes{margin-top:.45rem}

/* ======================================================================= rodada 4 */

/* "Mudou no outro celular", no lugar da linha do passo (nada empurra a tábua nem os botões) e a
   frase dentro do cartão "Agora no MKSLaser", acima do "Digite" (planta §10, rodada 4) */
.app-passos .r-passos-agora.app-passos-mudou{border-left-color:var(--r-atencao-borda);background:var(--r-atencao-fundo)}
/* (o iPhone pequeno com a letra Maior: uma linha só, com a mesma altura da linha de sempre) */
@media (max-width:400px){ .app-passos .r-passos-agora.app-passos-mudou{font-size:min(calc(22px * var(--r-escala)), 22px);line-height:calc(min(calc(22px * var(--r-escala)), 26px) * 1.3)} }
.r-app .app-cartao-saida .r-aviso.app-maquina-aviso{margin:0 0 .6rem;padding:8px 10px;grid-template-columns:26px 1fr;gap:8px;border-left-width:8px;font-size:min(1rem, 22px);line-height:1.3}
.app-maquina-aviso > .r-ic{width:26px;height:26px;margin-top:1px}
.app-maquina-aviso p{margin:0}
/* (iPhone pequeno: a frase com a largura toda do cartão, para o "Digite" não descer tanto) */
@media (max-width:400px){
  .r-app .app-cartao-saida .r-aviso.app-maquina-aviso{grid-template-columns:1fr;font-size:20px}
  .app-maquina-aviso > .r-ic{display:none}
}
/* "Passou de 30 cm: toque em Menor", no lugar da frase ou da dica do passo 3 (uma linha, a mesma
   altura: o Menor/Maior não sai de debaixo do dedo) */
.app-peca .app-frase.app-frase--passou, .ed-embutido[data-passo="3"] .app-dica-mexer--passou{padding:0 8px;border-left:5px solid var(--r-atencao-borda);border-radius:4px;background:var(--r-atencao-fundo);font-size:min(1rem, 22px);line-height:1.3}
.app-peca .app-frase.app-frase--passou:not([hidden]){display:flex;align-items:center}
.app-meio-passou .ed-nota{display:none!important}
@media (max-width:400px){ .app-peca .app-frase.app-frase--passou, .ed-embutido[data-passo="3"] .app-dica-mexer--passou{padding:0 4px;border-left-width:3px;font-size:20px} }
/* ficha: "Espelhado" em cima do desenho virado (à vista na 1ª tela, sem empurrar nada: r4-tio-2) */
.app-ficha-papel:not(.app-minha-papel--presa){position:relative}
.app-selo-espelho{position:absolute;top:8px;left:8px;padding:2px 12px;border-radius:999px;background:var(--r-couro);color:var(--r-couro-texto);font-weight:700;font-size:20px;line-height:1.4;box-shadow:0 0 0 2px #FFFFFF}
.app-selo-espelho[hidden]{display:none}
/* os tamanhos prontos que não cabem numa fileira de 4 (o "16,5 cm" no iPhone pequeno com a letra
   Grande ou Maior): 2 por linha, cada número inteiro e longe da borda (o app mede: r4-encaixe-1) */
.app-atalhos.app-atalhos--menor .app-atalho{font-size:20px;padding-left:1px;padding-right:1px}
.app-atalhos.app-atalhos--duas{grid-template-columns:repeat(2, minmax(0, 1fr))}
.app-atalhos.app-atalhos--duas .app-atalho{font-size:min(1rem, 22px)}
/* "Usar o maior que cabe (30 cm)" / "Pôr tudo no meio da tábua": a MESMA letra na peça, na ficha
   e na escrita (22 px, a dos botões da barra), em no máximo 2 linhas no 440 (r4-tio-5) */
.r-app .app-btn-maior{font-size:min(1rem, 22px);gap:8px;padding-left:10px;padding-right:10px}
.r-app .app-btn-maior .r-ic{width:min(1.3rem, 26px);height:min(1.3rem, 26px)}
.r-app .app-cartao-saida .r-aviso{padding:12px 12px;grid-template-columns:30px 1fr;gap:10px}
/* a faixa do último "Guardar nas Fotos" quando a peça mudou DEPOIS: atenção, sem o número velho */
.app-ultimo-fotos.app-ultimo-fotos--mudou{background:var(--r-atencao-fundo);border-color:var(--r-atencao-borda)}
/* "Ver todos os temas": cada grupo com o nome dele em cima (Country, Animais, Esporte…) */
.app-temas-grupos[hidden]{display:none}
.app-temas-grupo + .app-temas-grupo{margin-top:.4rem}
.app-temas-grupo-nome{margin:.9rem 0 .45rem}
.app-temas-grupo:first-child .app-temas-grupo-nome{margin-top:.2rem}

/* ======================================================================= rodada 4, passada 2 */

/* A caixa de confirmar no iPhone pequeno (375 × 667), nas 3 letras: cabe sem rolar, com a saída à
   vista desde o começo. O título diz o essencial; a letra dos botões tem teto de 22 px (a regra do
   375 subia para 24 px e os botões iam a 2 e 3 linhas: r4.1-encaixe-6). */
@media (max-height:740px){
  .r-caixa-fundo{padding-top:calc(8px + var(--seguro-topo));padding-bottom:calc(8px + env(safe-area-inset-bottom));padding-left:10px;padding-right:10px}
  .r-caixa{padding:12px 12px 12px;border-width:3px}
  .r-caixa-icone{width:48px;height:48px;margin-bottom:6px}
  .r-caixa-icone .r-ic{width:28px;height:28px}
  .r-caixa-titulo{margin-bottom:6px;font-size:min(calc(26px * var(--r-escala)), 28px)}
  .r-caixa-texto{margin-bottom:12px;font-size:min(calc(20px * var(--r-escala)), 22px);line-height:1.3}
  .r-caixa-botoes{gap:10px}
  :root .r-caixa-fundo .r-caixa-botoes .r-btn{min-height:56px;padding:6px 10px;gap:8px;font-size:min(1rem, 22px);line-height:1.2}
  .r-caixa-botoes .r-btn .r-ic{width:24px;height:24px;flex:0 0 auto}
}
/* ficha com o campo "Outra" aberto, depois que o teclado fecha: a frase sai e o "Guardar nas Fotos"
   volta à vista, no 440 e no 430, nas 3 letras (r4.1-tio-5) */
.app-ficha--outra > .app-frase, .app-ficha--outra > .app-largura > .app-largura-rotulo{display:none}
.app-ficha--outra .app-nota-fino{margin-top:.3rem;padding:6px 10px;grid-template-columns:26px 1fr;gap:8px;font-size:min(1rem, 22px);line-height:1.3}
.app-ficha--outra .app-nota-fino p{margin:0}
.app-ficha--outra .app-nota-fino > .r-ic{width:26px;height:26px}