/* Mesa de Modelagem (Molde Digital) — layout estilo Canva (20/09/2026, 2ª versão).
   Barra de ferramentas VERTICAL à esquerda (recolhível), quadro grande no centro,
   painel compacto à direita (recolhível). Cores da marca: terracota #9b492b,
   petróleo #334f50, bege #beab92. */
/* --mesa-topo = quanto os painéis ficam abaixo do topo da janela com a página no início (cabeçalho +
   respiro). A altura máxima deles desconta isso, senão o fim do painel (ex.: "Baixar SVG") cai FORA da
   tela e parece cortado: rolar por dentro não adianta, porque a caixa toda está abaixo do viewport. */
#mesa-root { --mesa-borda: rgba(51,79,80,.16); --mesa-larg-tools: 176px; --mesa-larg-lado: 244px; --mesa-topo: 96px; display: block; }
.mesa-app { display: grid; grid-template-columns: var(--mesa-larg-tools) minmax(0, 1fr) var(--mesa-larg-lado); gap: 10px; align-items: stretch; }
.mesa-app.tools-recolhidas { --mesa-larg-tools: 56px; }
.mesa-app.lado-recolhido { --mesa-larg-lado: 44px; }

/* Com a MESA aberta a página não deve rolar: o body da ferramenta tem pb-24 (96px) do Tailwind
   congelado, e só esse respiro já empurrava ~91px de rolagem. Some só nesta view (o estúdio e a
   biblioteca continuam com o respiro normal). */
body:has(#card-mesa:not(.hidden)) { padding-bottom: 0; }
body:has(#card-mesa:not(.hidden)) #card-mesa { margin-bottom: 6px; }   /* o mb-4 (16px) ainda sobrava 5px de rolagem */

/* ---- barra de ferramentas (esquerda) ---- */
.mesa-tools-lado { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--mesa-borda); border-radius: 16px; background: rgba(255,255,255,.85); padding: 8px 8px 14px; min-width: 0; align-self: start; position: sticky; top: 8px; max-height: calc(100vh - var(--mesa-topo)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(51,79,80,.32) transparent; }
/* rolagem VISÍVEL (antes era width:0 e o conteúdo parecia cortado em tela baixa) */
.mesa-tools-lado::-webkit-scrollbar { width: 7px; }
.mesa-tools-lado::-webkit-scrollbar-track { background: transparent; }
.mesa-tools-lado::-webkit-scrollbar-thumb { background: rgba(51,79,80,.28); border-radius: 999px; }
.mesa-tools-lado::-webkit-scrollbar-thumb:hover { background: rgba(51,79,80,.5); }
.mesa-tools-cab { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 2px 2px 6px; border-bottom: 1px solid var(--mesa-borda); margin-bottom: 4px; }
.mesa-tools-cab b { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #9b492b; white-space: nowrap; overflow: hidden; }
.mesa-toggle { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--mesa-borda); background: white; color: #334f50; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mesa-toggle i { font-size: 16px; transition: transform .2s; }
.mesa-foto { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 8px 10px; margin-bottom: 6px; border-radius: 12px; border: 0; background: #9b492b; color: white; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(155,73,43,.25); }
.mesa-foto i { font-size: 20px; flex: none; }
.mesa-foto:hover { background: #874025; }
.mesa-base { background: #334f50; box-shadow: 0 4px 12px rgba(51,79,80,.25); }
.mesa-base:hover { background: #263c3d; }
.mesa-tool { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 6px 9px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: #334f50; font-size: 12.5px; font-weight: 600; line-height: 1.1; cursor: pointer; text-align: left; transition: background .12s, color .12s; }
.mesa-tool i { font-size: 19px; flex: none; width: 20px; text-align: center; }
.mesa-tool:hover { background: rgba(51,79,80,.07); }
.mesa-tool.on { background: #9b492b; color: white; }
.mesa-sep { height: 1px; background: var(--mesa-borda); margin: 4px 2px; }
/* recolhida: só ícones, centralizados; rótulos e textos somem */
.tools-recolhidas .mesa-tools-cab b, .tools-recolhidas .mesa-tool span, .tools-recolhidas .mesa-foto span { display: none; }
.tools-recolhidas .mesa-tool, .tools-recolhidas .mesa-foto { justify-content: center; gap: 0; padding: 8px 0; }
.tools-recolhidas .mesa-tools-cab { justify-content: center; }
.tools-recolhidas .mesa-toggle i { transform: rotate(180deg); }

/* ---- centro (ações + dica + quadro) ---- */
.mesa-centro { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mesa-acoes { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; border: 1px solid var(--mesa-borda); border-radius: 12px; background: rgba(255,255,255,.85); padding: 5px 8px; }
.mesa-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #334f50; font-size: 12px; font-weight: 600; cursor: pointer; }
.mesa-btn:hover { background: rgba(51,79,80,.07); }
.mesa-btn i { font-size: 17px; }
.mesa-acoes .mesa-sep { width: 1px; height: 22px; margin: 0 3px; }
.mesa-acoes .mesa-btn { padding: 5px 6px; }   /* 17 botões + 3 caixas numa linha só a partir de 1366 px */
.mesa-zoom-pct { font-size: 11px; font-weight: 700; min-width: 38px; text-align: center; color: #334f50; }
.mesa-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #334f50; padding: 4px; cursor: pointer; white-space: nowrap; }
.mesa-chk input { accent-color: #9b492b; width: 15px; height: 15px; }
.mesa-dica { font-size: 12px; color: #334f50; opacity: .8; margin: 0; min-height: 16px; padding: 0 2px; }
/* páginas do arquivo (gradações vinculadas ao molde): faixa fina embaixo do quadro, preenchida pela página.
   O quadro é flex: 1, então a faixa só tira ~40 px dele: nada de rolagem nova. */
.mesa-paginas { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px; overflow-x: auto; scrollbar-width: thin; flex: none; }
.mesa-paginas:empty { display: none; }
.mesa-paginas .mp-tit { font-size: 12px; font-weight: 700; color: #334f50; white-space: nowrap; margin-right: 2px; }
.mesa-paginas .mp-pag, .mesa-paginas .mp-vincular { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--mesa-borda); background: white; color: #334f50; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mesa-paginas .mp-pag.on { background: #334f50; border-color: #334f50; color: white; cursor: default; }
.mesa-paginas .mp-pag:not(.on):hover, .mesa-paginas .mp-vincular:hover { border-color: #9b492b; color: #9b492b; }
.mesa-paginas .mp-vincular { border-style: dashed; margin-left: auto; }
.mesa-paginas .mp-vincular i { font-size: 15px; }
@media (hover: none), (pointer: coarse) { .mesa-paginas .mp-pag, .mesa-paginas .mp-vincular { min-height: 44px; padding: 4px 14px; } }
@media (max-width: 1023px) { .mesa-paginas { flex-wrap: wrap; overflow-x: visible; padding: 2px; } .mesa-paginas .mp-vincular { margin-left: 0; } }   /* celular: a página rola, a faixa quebra a linha */
.mesa-canvas-wrap { position: relative; border: 1px solid var(--mesa-borda); border-radius: 16px; overflow: hidden; background: #fbfbf8; min-width: 0; flex: 1; box-shadow: 0 6px 22px rgba(51,79,80,.08); }
/* altura amarrada à janela: a mesa inteira cabe sem a PÁGINA rolar (o Raul não quer barra de rolagem).
   Desconta o topo (--mesa-topo) + a faixa de ações + a linha da dica + respiros. */
.mesa-canvas { display: block; width: 100%; height: calc(100vh - var(--mesa-topo) - 104px); max-height: 760px; min-height: 340px; touch-action: none; user-select: none; -webkit-user-select: none; }
.mesa-canvas text { user-select: none; }
.mesa-hud { position: absolute; left: 10px; top: 10px; background: rgba(255,255,255,.9); border: 1px solid var(--mesa-borda); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; color: #334f50; font-variant-numeric: tabular-nums; pointer-events: none; white-space: pre; }
.mesa-form { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; align-items: flex-end; background: rgba(255,255,255,.96); border: 1px solid #9b492b; border-radius: 12px; padding: 8px 10px; box-shadow: 0 6px 18px rgba(51,79,80,.15); z-index: 2; max-width: calc(100% - 20px); flex-wrap: wrap; }
.mesa-form label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #334f50; }
.mesa-form input { width: 96px; padding: 6px 8px; border: 1px solid var(--mesa-borda); border-radius: 8px; font-size: 14px; font-weight: 600; color: #334f50; background: white; }
.mesa-form-ok { min-width: 40px; min-height: 40px; border-radius: 10px; border: 0; background: #9b492b; color: white; font-size: 18px; cursor: pointer; }
/* controle do fundo (foto importada, para traçar por cima) */
.mesa-fundo-ctrl { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.94); border: 1px solid var(--mesa-borda); border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 600; color: #334f50; box-shadow: 0 3px 10px rgba(51,79,80,.12); }
.mesa-fundo-ctrl.hidden { display: none; }
.mesa-fundo-ctrl input[type=range] { width: 88px; accent-color: #9b492b; }
.mesa-fundo-ctrl button { border: 0; background: transparent; color: #b91c1c; cursor: pointer; font-size: 15px; display: flex; }
/* banner "Nós agrupados" (Reverter / Cancelar) — canto inferior direito p/ não colidir com a foto de fundo */
.mesa-agrup-ctrl { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.96); border: 1px solid var(--mesa-borda); border-radius: 999px; padding: 5px 8px 5px 14px; font-size: 11px; font-weight: 700; color: #334f50; box-shadow: 0 3px 10px rgba(51,79,80,.14); z-index: 5; }
.mesa-agrup-ctrl.hidden { display: none; }
.mesa-agrup-ctrl > i { color: #9b492b; font-size: 15px; }
.mesa-agrup-ctrl button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--mesa-borda); background: #fff; color: #334f50; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; }
.mesa-agrup-ctrl button:hover { background: rgba(51,79,80,.07); }
.mesa-agrup-ctrl button[data-acao="agrup-reverter"] { color: #9b492b; border-color: rgba(155,73,43,.4); }
.mesa-agrup-ctrl button i { font-size: 13px; }
/* banner da moldura de tamanho de referência (topo direito) */
.mesa-moldura-ctrl { position: absolute; right: 10px; top: 10px; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.96); border: 1px solid var(--mesa-borda); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 11px; font-weight: 700; color: #334f50; box-shadow: 0 3px 10px rgba(51,79,80,.14); z-index: 5; }
.mesa-moldura-ctrl.hidden { display: none; }
.mesa-moldura-ctrl > i { color: #334f50; font-size: 15px; }
.mesa-moldura-ctrl button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--mesa-borda); background: #fff; color: #334f50; border-radius: 50%; cursor: pointer; }
.mesa-moldura-ctrl button:hover { background: rgba(51,79,80,.07); }
.mesa-moldura-ctrl button.travada { background: #334f50; color: #fff; border-color: #334f50; }
.mesa-moldura-ctrl button.mold-rem { color: #b91c1c; }
.mesa-moldura-ctrl button i { font-size: 14px; }
/* formulário do tamanho de referência (SweetAlert) */
.mesa-mold-form { text-align: left; display: flex; flex-direction: column; gap: 10px; }
.mesa-mold-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #334f50; }
.mesa-mold-form select, .mesa-mold-form input[type=number] { padding: 9px 10px; border: 1px solid var(--mesa-borda); border-radius: 10px; font-size: 16px; color: #334f50; background: #fff; }
.mesa-mold-wh { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mesa-mold-chk { flex-direction: row !important; align-items: center; gap: 8px !important; cursor: pointer; }
.mesa-mold-chk input { accent-color: #9b492b; width: 17px; height: 17px; }
.mesa-mold-nota { font-size: 11.5px; font-weight: 500; color: #334f50; opacity: .75; margin: 0; }

/* ---- painel da direita (compacto, recolhível) ---- */
.mesa-lado { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-self: start; position: sticky; top: 8px; max-height: calc(100vh - var(--mesa-topo)); overflow-y: auto; padding-bottom: 14px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(51,79,80,.32) transparent; }
/* rolagem VISÍVEL: sem isto o último botão (Baixar SVG) ficava cortado e ninguém via que dava para rolar */
.mesa-lado::-webkit-scrollbar { width: 7px; }
.mesa-lado::-webkit-scrollbar-track { background: transparent; }
.mesa-lado::-webkit-scrollbar-thumb { background: rgba(51,79,80,.28); border-radius: 999px; }
.mesa-lado::-webkit-scrollbar-thumb:hover { background: rgba(51,79,80,.5); }
.mesa-lado-cab { display: flex; align-items: center; justify-content: flex-end; }
.mesa-bloco, .mesa-props { border: 1px solid var(--mesa-borda); border-radius: 12px; padding: 10px; background: rgba(255,255,255,.85); }
.mesa-props-tit { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #9b492b; margin: 0 0 5px; display: flex; align-items: center; gap: 5px; }
.mesa-props-tit + .mesa-props-tit, .mesa-props-txt + .mesa-props-tit, .mesa-props-btns + .mesa-props-tit { margin-top: 10px; }
.mesa-props-txt { font-size: 11.5px; color: #334f50; margin: 0 0 5px; line-height: 1.4; }
.mesa-props-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 7px; }
.mesa-props-grid label, .mesa-props-sel { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #334f50; margin-bottom: 7px; }
.mesa-props input, .mesa-props select { padding: 6px 7px; border: 1px solid var(--mesa-borda); border-radius: 8px; font-size: 13px; font-weight: 600; color: #334f50; background: white; text-transform: none; letter-spacing: 0; width: 100%; }
.mesa-props input:disabled { opacity: .55; }
.mesa-props-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 5px; }
.mesa-props-btns button { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--mesa-borda); background: white; color: #334f50; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.mesa-props-btns button:hover { background: rgba(51,79,80,.06); }
.mesa-props-btns button:disabled { opacity: .45; cursor: default; }
.mesa-props-btns button.perigo { color: #b91c1c; border-color: rgba(185,28,28,.3); }
.mesa-peca { display: flex; flex-direction: column; gap: 5px; padding: 7px 0; border-top: 1px dashed var(--mesa-borda); }
.mesa-peca:first-child { border-top: 0; padding-top: 0; }
.mesa-peca-info { display: flex; flex-direction: column; font-size: 11.5px; color: #334f50; }
.mesa-peca-info b { font-size: 12.5px; }
.mesa-peca-info span { opacity: .75; font-size: 10.5px; }
.mesa-peca-btns { display: flex; gap: 5px; }
.mesa-peca-btns button { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--mesa-borda); background: white; color: #334f50; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.mesa-peca-btns .mesa-peca-abrir { background: #9b492b; color: white; border-color: #9b492b; flex: 1; justify-content: center; }
.mesa-peca-abrir2, .mesa-btn-w { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; min-height: 38px; margin-top: 7px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--mesa-borda); background: white; color: #334f50; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mesa-btn-w:first-of-type { background: #9b492b; color: white; border-color: #9b492b; }
.mesa-btn-w + .mesa-btn-w { margin-top: 6px; }
/* botões do Desenho em 2 colunas: 8 botões em 5 linhas em vez de 8 (cabe sem rolar) */
.mesa-arquivo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mesa-arquivo-grid .mesa-btn-w { margin-top: 0; min-height: 36px; padding: 5px 6px; font-size: 11.5px; gap: 4px; white-space: nowrap; }
.mesa-arquivo-grid .mesa-btn-w + .mesa-btn-w { margin-top: 0; }
.mesa-arquivo-grid .mesa-btn-w i { font-size: 15px; flex: none; }
.mesa-arquivo-grid .mesa-col2 { grid-column: 1 / -1; }
/* recolhido: some tudo menos o botão de expandir */
.lado-recolhido .mesa-lado > :not(.mesa-lado-cab) { display: none; }
.lado-recolhido .mesa-lado-cab { justify-content: center; }
.mesa-swal-2 { display: grid; gap: 8px; text-align: left; }
.mesa-swal-2 label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: #334f50; }
.mesa-swal-2 input { padding: 8px; border: 1px solid var(--mesa-borda); border-radius: 8px; font-size: 16px; }

/* ---- tela cheia ---- */
#mesa-root.mesa-cheia { position: fixed; inset: 0; z-index: 8000; background: #f1f2ee; padding: 8px; overflow: auto; --mesa-topo: 28px; }
#mesa-root.mesa-cheia .mesa-canvas { height: calc(100vh - 120px); }
body.trava-rolagem { overflow: hidden; }

/* ---- celular e tablet: barra vira faixa horizontal no topo, painel embaixo ---- */
@media (max-width: 1023px) {
    .mesa-app, .mesa-app.tools-recolhidas, .mesa-app.lado-recolhido { display: flex; flex-direction: column; }
    .mesa-tools-lado { position: static; max-height: none; flex-direction: row; align-items: center; gap: 4px; overflow-x: auto; order: 2; align-self: stretch; min-width: 0; width: 100%; }
    .mesa-tools-lado::-webkit-scrollbar { height: 0; }
    .mesa-tools-cab { display: none; }
    .mesa-foto { width: auto; margin: 0; flex-direction: column; gap: 2px; min-height: 54px; min-width: 62px; padding: 6px 8px; font-size: 10px; flex: none; }
    .mesa-foto i { font-size: 18px; }
    .mesa-foto span { display: block; }
    .mesa-tool { width: auto; flex: none; flex-direction: column; gap: 2px; min-width: 60px; min-height: 54px; padding: 6px 4px; font-size: 10px; text-align: center; }
    .mesa-tool span { display: block; }
    .mesa-tool i { font-size: 20px; }
    .mesa-sep { width: 1px; height: 26px; margin: 0 4px; }
    .mesa-centro { order: 1; }
    .mesa-acoes { overflow-x: auto; flex-wrap: nowrap; }
    .mesa-acoes .mesa-btn, .mesa-chk { flex: none; min-height: 40px; }
    .mesa-canvas { height: 56vh; min-height: 320px; }
    .mesa-lado { position: static; max-height: none; order: 3; }
    .mesa-lado-cab { display: none; }
    .lado-recolhido .mesa-lado > :not(.mesa-lado-cab) { display: block; }   /* no celular o painel sempre aparece embaixo */
    .mesa-form { left: 8px; right: 8px; top: auto; bottom: 8px; }
    .mesa-form input { font-size: 16px; width: 100%; }
    .mesa-form label { flex: 1; min-width: 110px; }
    .mesa-props input, .mesa-props select { font-size: 16px; }
    #mesa-root.mesa-cheia .mesa-canvas { height: calc(100vh - 210px); }
}
@media (hover: none) and (pointer: coarse) {
    .mesa-tool, .mesa-foto { min-height: 54px; }
}

/* Limpar tudo (vermelho, painel Desenho) */
.mesa-btn-limpar { color: #b91c1c !important; border-color: rgba(185,28,28,.35) !important; background: white !important; }
.mesa-btn-limpar:hover { background: rgba(185,28,28,.06) !important; }

/* ===== barra agrupada por categoria (grade compacta) + favoritos ===== */
.mesa-tools-corpo { display: flex; flex-direction: column; gap: 7px; }
.mesa-grupo { display: flex; flex-direction: column; gap: 4px; }
.mesa-grupo-tit { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #9b492b; opacity: .8; padding: 1px 3px; display: flex; align-items: center; }
.mesa-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
/* tile: ícone em cima, rótulo curto embaixo (metade da altura das linhas antigas → cabe sem rolar) */
.mesa-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; padding: 6px 3px; border-radius: 10px; border: 1px solid var(--mesa-borda); background: rgba(255,255,255,.55); color: #334f50; font-size: 10.5px; font-weight: 600; line-height: 1.05; text-align: center; cursor: pointer; transition: background .12s, border-color .12s; }
.mesa-tile i { font-size: 19px; line-height: 1; }
.mesa-tile span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa-tile:hover { background: rgba(51,79,80,.08); border-color: rgba(51,79,80,.28); }
.mesa-tile.on { background: #9b492b; color: #fff; border-color: #9b492b; }
.mesa-acaba { color: #9b492b; }
/* fontes (Foto do molde / Molde base): coloridas e ocupam a linha inteira do grid 2-col */
.mesa-fonte { color: #fff; border: 0; }
.mesa-fonte-foto { background: #9b492b; }
.mesa-fonte-foto:hover { background: #874025; }
.mesa-fonte-base { background: #334f50; }
.mesa-fonte-base:hover { background: #263c3d; }
/* recolhida: 1 coluna, só ícones */
.tools-recolhidas .mesa-tools-corpo { gap: 4px; }
.tools-recolhidas .mesa-grupo-tit { display: none; }
.tools-recolhidas .mesa-tiles { grid-template-columns: 1fr; gap: 4px; }
.tools-recolhidas .mesa-tile { min-height: 40px; padding: 7px 0; }
.tools-recolhidas .mesa-tile span { display: none; }
/* celular: barra agrupada vira faixa horizontal rolável (este @media vem DEPOIS das regras base
   acima, senão o grid base venceria por ordem — media query não muda especificidade) */
@media (max-width: 1023px) {
    .mesa-tools-corpo { flex-direction: row; align-items: stretch; gap: 6px; flex: none; }
    .mesa-grupo { flex: none; flex-direction: row; align-items: center; gap: 5px; }
    .mesa-grupo + .mesa-grupo { border-left: 1px solid var(--mesa-borda); padding-left: 6px; }
    .mesa-grupo-tit { display: none; }
    .mesa-tiles { display: flex; flex: none; flex-direction: row; gap: 5px; }
    .mesa-tile { flex: none; min-width: 62px; min-height: 54px; }
}
/* tela baixa (notebook 768/720): tiles menores para a barra continuar cabendo SEM rolar */
@media (min-width: 1024px) and (max-height: 900px) {
    .mesa-tools-lado { padding: 6px 6px 12px; }
    .mesa-tools-corpo { gap: 5px; }
    .mesa-grupo { gap: 3px; }
    .mesa-grupo-tit { font-size: 8.5px; padding: 0 3px; }
    .mesa-tiles { gap: 4px; }
    .mesa-tile { min-height: 40px; padding: 4px 3px; gap: 1px; font-size: 9.5px; }
    .mesa-tile i { font-size: 16px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
    .mesa-tile { min-height: 36px; font-size: 9px; }
    .mesa-tile i { font-size: 15px; }
}
.mesa-acaba i { color: #9b492b; }
.mesa-acaba.on { color: white; } .mesa-acaba.on i { color: white; }
.mesa-btn-loja { background: #334f50 !important; color: white !important; border-color: #334f50 !important; }
.mesa-btn-loja:hover { background: #26403f !important; }
.tools-recolhidas .mesa-grupo-tit { display: none; }
@media (max-width: 1023px) { .mesa-grupo-tit { display: none; } .mesa-acaba span { display: block; } }

/* botão traçar automático no controle do fundo */
.mesa-fundo-ctrl .fundo-tracar { display: inline-flex; align-items: center; gap: 4px; background: #9b492b; color: white; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; }
.mesa-fundo-ctrl .fundo-tracar:hover { background: #874025; }
.mesa-fundo-ctrl .fundo-tracar i { color: white; font-size: 14px; }

/* Aproveita a faixa de baixo: em vez de altura fixa no quadro (que deixava folga e tinha teto de
   760px), a GRADE ocupa a janela e o quadro estica no que sobrar. Assim a dica quebrando em 2 linhas
   não empurra rolagem, e em monitor grande o quadro cresce de verdade. */
@media (min-width: 1024px) {
    .mesa-app { height: calc(100vh - 92px); }
    .mesa-centro { min-height: 0; }
    .mesa-canvas-wrap { flex: 1; min-height: 0; }
    .mesa-canvas { height: 100%; min-height: 0; max-height: none; }
    .mesa-tools-lado, .mesa-lado { max-height: 100%; }
}
/* giro estilo CorelDRAW: alças de canto e pivô */
.mesa-alca-girar { cursor: grab; }
.mesa-alca-girar:active { cursor: grabbing; }
.mesa-pivo { cursor: move; }
.mesa-props-btns button.on { background: #334f50; color: white; border-color: #334f50; }
.mesa-props-chk { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #334f50; cursor: pointer; }
.mesa-props-chk input { width: auto !important; margin: 0; }
.mesa-giro-chips button { min-width: 44px; justify-content: center; }
/* alças quadradas de redimensionar (modo escala, estilo CorelDRAW) */
.mesa-alca-escala { cursor: pointer; }
.mesa-alca-escala[data-h="no"], .mesa-alca-escala[data-h="se"] { cursor: nwse-resize; }
.mesa-alca-escala[data-h="ne"], .mesa-alca-escala[data-h="so"] { cursor: nesw-resize; }
.mesa-alca-escala[data-h="n"], .mesa-alca-escala[data-h="s"] { cursor: ns-resize; }
.mesa-alca-escala[data-h="e"], .mesa-alca-escala[data-h="o"] { cursor: ew-resize; }
/* foto de fundo editável (mover/redimensionar/girar) */
.mesa-foto-alca { cursor: nwse-resize; }
.mesa-foto-alca[data-h="ne"], .mesa-foto-alca[data-h="so"] { cursor: nesw-resize; }
.mesa-foto-rot { cursor: grab; }
.mesa-fundo-ctrl button.on { background: #334f50; color: #fff; }
/* corte da foto de fundo */
.mesa-corte-ok, .mesa-corte-cancelar { display: none; }
.mesa-fundo-ctrl.cortando .mesa-corte-ok, .mesa-fundo-ctrl.cortando .mesa-corte-cancelar { display: inline-flex; }
.mesa-fundo-ctrl.cortando .fundo-tracar, .mesa-fundo-ctrl.cortando .mesa-foto-editar, .mesa-fundo-ctrl.cortando .mesa-foto-cortar, .mesa-fundo-ctrl.cortando [data-acao="fundo-travar"], .mesa-fundo-ctrl.cortando [data-acao="fundo-ocultar"], .mesa-fundo-ctrl.cortando [data-acao="fundo-remover"], .mesa-fundo-ctrl.cortando [data-op="fundoOpac"] { display: none; }
.mesa-corte-ok { background: #334f50 !important; color: #fff; }
.mesa-crop-alca { cursor: nwse-resize; }
.mesa-crop-alca[data-h="ne"], .mesa-crop-alca[data-h="so"] { cursor: nesw-resize; }