/* =====================================================================
   VISUAL DO EDITOR DE CORTE (classes .ct-)
   O resto (lista, opções, botões) vem de _nucleo/imagens.css.
   ===================================================================== */
.ct-editor { display: grid; gap: .7rem; padding: .8rem; }
.ct-palco { position: relative; overflow: hidden; border-radius: 12px; background: var(--superficie-2) repeating-conic-gradient(var(--borda) 0 25%, transparent 0 50%) 0 0 / 16px 16px; touch-action: none; user-select: none; -webkit-user-select: none; }
.ct-palco canvas { display: block; margin: 0 auto; }

/* Moldura: tudo fora dela fica escurecido; linhas dos terços por dentro */
.ct-caixa {
  position: absolute; box-sizing: border-box; cursor: move; touch-action: none;
  border: 2px solid #fff; outline: 1px solid rgba(0, 0, 0, .45);
  box-shadow: 0 0 0 9999px rgba(8, 14, 28, .55);
  background:
    linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.55) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255,255,255,.55) 0 calc(66.66% + .5px), transparent 0),
    linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.55) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255,255,255,.55) 0 calc(66.66% + .5px), transparent 0);
}
.ct-caixa:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ct-alca { position: absolute; width: 28px; height: 28px; touch-action: none; }
.ct-alca::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--marca-azul), 0 1px 4px rgba(0,0,0,.4); }
.ct-alca[data-alca="nw"] { left: -8px; top: -8px; cursor: nwse-resize; }
.ct-alca[data-alca="ne"] { right: -8px; top: -8px; cursor: nesw-resize; }
.ct-alca[data-alca="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; }
.ct-alca[data-alca="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }

.ct-medida { margin: 0; text-align: center; font-size: .86rem; font-weight: 700; color: var(--titulo); }
.ct-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.ct-botoes .btn span { font-size: 1.05rem; line-height: 1; }
.ct-dica { text-align: center; }
.ct-proporcoes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)); }