diff --git a/public/app.js b/public/app.js
index d82775d..f5dfa88 100644
--- a/public/app.js
+++ b/public/app.js
@@ -10046,14 +10046,21 @@ document.addEventListener('DOMContentLoaded', () => {
   const canvasFontFamily = document.getElementById('canvasFontFamily');
   const canvasFontSize = document.getElementById('canvasFontSize');
   const canvasTextColor = document.getElementById('canvasTextColor');
+  const canvasBorderColor = document.getElementById('canvasBorderColor');
+  const canvasBorderWidth = document.getElementById('canvasBorderWidth');
   const canvasBgColorInput = document.getElementById('canvasBgColor');
+  const btnCanvasBgTransparent = document.getElementById('btnCanvasBgTransparent');
   const canvasRotation = document.getElementById('canvasRotation');
   const canvasOpacity = document.getElementById('canvasOpacity');
+  
+  const btnCanvasZIndexFront = document.getElementById('btnCanvasZIndexFront');
   const btnCanvasZIndexUp = document.getElementById('btnCanvasZIndexUp');
   const btnCanvasZIndexDown = document.getElementById('btnCanvasZIndexDown');
+  const btnCanvasZIndexBack = document.getElementById('btnCanvasZIndexBack');
+  const canvasItemZIndexBadge = document.getElementById('canvasItemZIndexBadge');
   const btnCanvasDelete = document.getElementById('btnCanvasDelete');
 
-  // Novos controles do Painel de Assets Lateral
+  // Controles do Painel de Assets Lateral
   const canvasAssetSearch = document.getElementById('canvasAssetSearch');
   const canvasAssetsContainer = document.getElementById('canvasAssetsContainer');
   const btnTabAssetPostits = document.getElementById('btnTabAssetPostits');
@@ -10064,42 +10071,51 @@ document.addEventListener('DOMContentLoaded', () => {
   let selectedCanvasItem = null;
   let isDraggingCanvas = false;
   let isResizingCanvas = false;
-  let dragStartX, dragStartY;
-  let dragStartLeft, dragStartTop;
-  let dragStartWidth, dragStartHeight;
+  let dragStartX = 0, dragStartY = 0;
+  let dragStartLeft = 0, dragStartTop = 0;
+  let dragStartWidth = 0, dragStartHeight = 0;
   let activeAssetTab = 'postit';
 
-  // --- ESTÚDIO DE CENAS EM CAMADAS (novo layer manager) ---
+  // --- ESTÚDIO DE CENAS EM CAMADAS (LAYER MANAGER) ---
   const btnDecomposeScene = document.getElementById('btnDecomposeScene');
   const btnAddSceneLayer = document.getElementById('btnAddSceneLayer');
   const sceneLayerManagerList = document.getElementById('sceneLayerManagerList');
   const sceneDecomposeLoader = document.getElementById('sceneDecomposeLoader');
   const sceneDecomposeStatus = document.getElementById('sceneDecomposeStatus');
 
-  // Estado das camadas
   let sceneLayers = [];
   let sceneLayerCounter = 0;
 
-  // Cria uma linha de camada no painel
+  // Cria uma linha de camada no painel lateral
   function createSceneLayerRow(id, isBackground) {
     const row = document.createElement('div');
     row.dataset.layerId = id;
     row.style.cssText = `display:flex; align-items:center; gap:6px; padding:6px 8px;
-      background:rgba(255,255,255,0.04); border:1px solid rgba(139,92,246,0.2);
-      border-radius:8px; transition: border-color 0.2s;`;
+      background:rgba(255,255,255,0.04); border:1px solid rgba(139,92,246,0.25);
+      border-radius:8px; transition: border-color 0.2s, background 0.2s; cursor:pointer;`;
+
+    // Clique na linha foca/seleciona o elemento no canvas
+    row.addEventListener('click', (e) => {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON') return;
+      const layer = sceneLayers.find(l => l.id === id);
+      if (layer && layer.canvasItem) {
+        layer.canvasItem.click();
+        layer.canvasItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+    });
 
     const badge = document.createElement('div');
-    badge.style.cssText = `min-width:22px; height:22px; border-radius:50%; 
-      background:${isBackground ? 'rgba(16,163,127,0.3)' : 'rgba(139,92,246,0.3)'};
-      display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700;
-      color:${isBackground ? '#10a37f' : '#a78bfa'}; flex-shrink:0;`;
+    badge.style.cssText = `min-width:24px; height:24px; border-radius:50%; 
+      background:${isBackground ? 'rgba(16,185,129,0.25)' : 'rgba(139,92,246,0.25)'};
+      display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700;
+      color:${isBackground ? '#34d399' : '#c4b5fd'}; flex-shrink:0;`;
     badge.textContent = isBackground ? '🌄' : sceneLayers.filter(l => !l.isBackground).length;
 
     const input = document.createElement('input');
     input.type = 'text';
     input.placeholder = isBackground
-      ? 'Cenário de fundo (Ex: parque de diversões)'
-      : 'Elemento (Ex: menino de 6 anos)';
+      ? 'Cenário de fundo (Ex: sala de aula acolhedora)'
+      : 'Elemento (Ex: professora com 3 crianças)';
     input.style.cssText = `flex:1; background:transparent; border:none; outline:none; 
       color:var(--text-primary); font-size:0.82rem; padding:2px 0; min-width:0;`;
     input.addEventListener('input', () => {
@@ -10107,68 +10123,128 @@ document.addEventListener('DOMContentLoaded', () => {
       if (layer) layer.description = input.value;
     });
 
-    // Botões de ação
+    // Botões de reordenação de camada (Mover para Cima / Baixo)
+    const btnUp = document.createElement('button');
+    btnUp.title = 'Trazer camada para a frente (subir na ordem)';
+    btnUp.innerHTML = '▲';
+    btnUp.style.cssText = `background:none; border:none; cursor:pointer; font-size:0.72rem; color:var(--text-secondary); padding:2px 4px; flex-shrink:0; border-radius:4px;`;
+    btnUp.addEventListener('click', (e) => {
+      e.stopPropagation();
+      reorderSceneLayer(id, -1);
+    });
+
+    const btnDown = document.createElement('button');
+    btnDown.title = 'Enviar camada para trás (descer na ordem)';
+    btnDown.innerHTML = '▼';
+    btnDown.style.cssText = `background:none; border:none; cursor:pointer; font-size:0.72rem; color:var(--text-secondary); padding:2px 4px; flex-shrink:0; border-radius:4px;`;
+    btnDown.addEventListener('click', (e) => {
+      e.stopPropagation();
+      reorderSceneLayer(id, 1);
+    });
+
+    // Botão Visibilidade (Olho)
     const btnVisibility = document.createElement('button');
-    btnVisibility.title = 'Ocultar/Mostrar camada no canvas';
+    btnVisibility.title = 'Ocultar / Mostrar camada no canvas';
     btnVisibility.innerHTML = '👁️';
-    btnVisibility.style.cssText = `background:none; border:none; cursor:pointer; font-size:0.9rem; 
-      padding:2px; opacity:1; transition:opacity 0.2s; flex-shrink:0;`;
+    btnVisibility.style.cssText = `background:none; border:none; cursor:pointer; font-size:0.85rem; padding:2px; flex-shrink:0; transition:opacity 0.2s;`;
     let visible = true;
-    btnVisibility.addEventListener('click', () => {
+    btnVisibility.addEventListener('click', (e) => {
+      e.stopPropagation();
       const layer = sceneLayers.find(l => l.id === id);
       if (!layer || !layer.canvasItem) return;
       visible = !visible;
       layer.visible = visible;
       layer.canvasItem.style.display = visible ? '' : 'none';
-      btnVisibility.style.opacity = visible ? '1' : '0.3';
+      btnVisibility.style.opacity = visible ? '1' : '0.35';
       btnVisibility.title = visible ? 'Ocultar camada' : 'Mostrar camada';
+      showToast(visible ? `Camada visível.` : `Camada ocultada.`, 'info');
     });
 
+    // Botão Fixar / Desafixar posição
     const btnPin = document.createElement('button');
-    btnPin.title = 'Fixar posição (impede arrastar)';
+    btnPin.title = 'Fixar posição da camada';
     btnPin.innerHTML = '📌';
-    btnPin.style.cssText = `background:none; border:none; cursor:pointer; font-size:0.9rem; 
-      padding:2px; opacity:0.4; transition:opacity 0.2s; flex-shrink:0;`;
+    btnPin.style.cssText = `background:none; border:none; cursor:pointer; font-size:0.85rem; padding:2px; opacity:0.4; flex-shrink:0; transition:opacity 0.2s;`;
     let pinned = false;
-    btnPin.addEventListener('click', () => {
+    btnPin.addEventListener('click', (e) => {
+      e.stopPropagation();
       const layer = sceneLayers.find(l => l.id === id);
       if (!layer || !layer.canvasItem) return;
       pinned = !pinned;
       layer.pinned = pinned;
-      layer.canvasItem.style.pointerEvents = pinned ? 'none' : '';
       layer.canvasItem.style.cursor = pinned ? 'default' : 'move';
       btnPin.style.opacity = pinned ? '1' : '0.4';
       btnPin.title = pinned ? 'Desafixar posição' : 'Fixar posição';
     });
 
+    // Botão Excluir
     const btnDelete = document.createElement('button');
     btnDelete.title = 'Remover camada';
     btnDelete.innerHTML = '🗑️';
-    btnDelete.style.cssText = `background:none; border:none; cursor:pointer; font-size:0.9rem; 
-      padding:2px; opacity:0.6; transition:opacity 0.2s; flex-shrink:0;`;
-    btnDelete.addEventListener('mouseenter', () => btnDelete.style.opacity = '1');
-    btnDelete.addEventListener('mouseleave', () => btnDelete.style.opacity = '0.6');
-    btnDelete.addEventListener('click', () => {
-      // Remove do canvas se já gerado
+    btnDelete.style.cssText = `background:none; border:none; cursor:pointer; font-size:0.85rem; padding:2px; opacity:0.6; flex-shrink:0;`;
+    btnDelete.addEventListener('click', (e) => {
+      e.stopPropagation();
       const layer = sceneLayers.find(l => l.id === id);
       if (layer?.canvasItem) layer.canvasItem.remove();
-      // Remove do state
       sceneLayers = sceneLayers.filter(l => l.id !== id);
-      // Remove do DOM
       row.remove();
-      // Reindexar badges dos elementos
       reindexLayerBadges();
+      syncSceneLayersZIndex();
     });
 
     row.appendChild(badge);
     row.appendChild(input);
+    if (!isBackground) {
+      row.appendChild(btnUp);
+      row.appendChild(btnDown);
+    }
     row.appendChild(btnVisibility);
     row.appendChild(btnPin);
-    if (!isBackground) row.appendChild(btnDelete); // Fundo não pode ser deletado da lista
+    if (!isBackground) row.appendChild(btnDelete);
 
     return { row, input, badge };
   }
 
+  function reorderSceneLayer(id, direction) {
+    const idx = sceneLayers.findIndex(l => l.id === id);
+    if (idx === -1) return;
+    const targetIdx = idx + direction;
+    // O fundo sempre permanece no índice 0
+    if (targetIdx < 1 || targetIdx >= sceneLayers.length) return;
+
+    const [moved] = sceneLayers.splice(idx, 1);
+    sceneLayers.splice(targetIdx, 0, moved);
+
+    // Reordenar no DOM do painel lateral
+    if (sceneLayerManagerList) {
+      sceneLayerManagerList.innerHTML = '';
+      sceneLayers.forEach(l => {
+        const { row, input, badge } = createSceneLayerRow(l.id, l.isBackground);
+        input.value = l.description || '';
+        l.rowInput = input;
+        l.rowBadge = badge;
+        sceneLayerManagerList.appendChild(row);
+      });
+    }
+
+    reindexLayerBadges();
+    syncSceneLayersZIndex();
+  }
+
+  function syncSceneLayersZIndex() {
+    let z = 10;
+    sceneLayers.forEach(l => {
+      if (l.isBackground) {
+        if (l.canvasItem) l.canvasItem.style.zIndex = '1';
+      } else {
+        if (l.canvasItem) {
+          l.canvasItem.style.zIndex = String(z++);
+        }
+      }
+    });
+    if (selectedCanvasItem) updateToolbarForSelected();
+  }
+
   function reindexLayerBadges() {
     let elIdx = 0;
     sceneLayers.forEach(l => {
@@ -10201,7 +10277,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
-  // ===== REMOÇÃO DE FUNDO BRANCO VIA CANVAS API =====
+  // Remoção de fundo branco via Canvas API (PNG com transparência real)
   async function removeWhiteBackground(imgUrl, threshold = 235) {
     return new Promise((resolve) => {
       const img = new Image();
@@ -10237,7 +10313,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
-  // ===== ADICIONA ITEM DE CAMADA NO CANVAS =====
+  // ADICIONA ITEM DE CAMADA NO CANVAS (Preservando alça de resize e eventos)
   function addSceneLayerToCanvas(layerData) {
     if (!cartazPrintableArea) return null;
 
@@ -10245,34 +10321,39 @@ document.addEventListener('DOMContentLoaded', () => {
     item.className = 'canvas-item canvas-scene-layer';
     item.setAttribute('data-layer-name', layerData.name || '');
     item.setAttribute('data-rotation', '0');
-    item.style.cssText = `position:absolute; background:transparent; box-sizing:border-box;`;
-    item.style.zIndex = layerData.isBackground ? '0' : String(10 + (layerData.zOffset || 0));
+    item.setAttribute('data-is-bg', layerData.isBackground ? 'true' : 'false');
+    item.style.position = 'absolute';
+    item.style.background = 'transparent';
+    item.style.boxSizing = 'border-box';
 
-    // Cria a imagem SEM usar innerHTML (preserva o handle de resize)
+    // Fundo fica na camada 1; elementos ficam de 10 em diante
+    item.style.zIndex = layerData.isBackground ? '1' : String(10 + (layerData.zOffset || 0));
+
+    // Elemento de imagem com transparência
     const imgEl = document.createElement('img');
     imgEl.style.cssText = `width:100%; height:100%; object-fit:${layerData.isBackground ? 'cover' : 'contain'}; pointer-events:none; display:block;`;
     imgEl.src = layerData.url;
     item.appendChild(imgEl);
 
-    // Handle de resize — criado uma única vez e permanece
+    // Alça de redimensionamento (Bolinha azul no canto inferior direito)
     const handle = document.createElement('div');
     handle.className = 'canvas-resize-handle';
     item.appendChild(handle);
 
     if (layerData.isBackground) {
-      item.style.left = '0';
-      item.style.top = '0';
+      item.style.left = '0%';
+      item.style.top = '0%';
       item.style.width = '100%';
       item.style.height = '100%';
       item.title = '🖼️ Cenário de Fundo';
     } else {
-      item.style.left = (layerData.left || 10) + '%';
-      item.style.top = (layerData.top || 10) + '%';
-      item.style.width = (layerData.width || 30) + '%';
-      item.style.height = (layerData.height || 30) + '%';
+      item.style.left = (layerData.left || 15) + '%';
+      item.style.top = (layerData.top || 20) + '%';
+      item.style.width = (layerData.width || 32) + '%';
+      item.style.height = (layerData.height || 32) + '%';
       item.title = '🎬 ' + (layerData.name || 'Elemento');
 
-      // Remove fundo branco: atualiza apenas o src da img (preserva o handle)
+      // Atualiza apenas a imagem de forma assíncrona SEM recriar o HTML ou destruir o handle
       removeWhiteBackground(layerData.url).then(transparentUrl => {
         imgEl.src = transparentUrl;
       });
@@ -10283,10 +10364,9 @@ document.addEventListener('DOMContentLoaded', () => {
     return item;
   }
 
-  // ===== BOTÃO CRIAR CENA =====
+  // BOTÃO CRIAR CENA (IA)
   if (btnDecomposeScene) {
     btnDecomposeScene.addEventListener('click', async () => {
-      // Validar que há pelo menos fundo + 1 elemento com descrição
       const bgLayer = sceneLayers.find(l => l.isBackground);
       if (!bgLayer?.description?.trim()) {
         showToast('Descreva o cenário de fundo (Camada 🌄)!', 'warning');
@@ -10310,37 +10390,26 @@ document.addEventListener('DOMContentLoaded', () => {
       btnDecomposeScene.style.opacity = '0.6';
       if (sceneDecomposeLoader) sceneDecomposeLoader.style.display = 'flex';
 
-      // Remover camadas anteriores do canvas
+      // Limpar camadas anteriores de cena do canvas
       cartazPrintableArea.querySelectorAll('.canvas-scene-layer').forEach(el => el.remove());
       sceneLayers.forEach(l => { l.canvasItem = null; });
 
-      // Gerar cada camada individualmente (uma por uma para acompanhar progresso)
-      const totalLayers = 1 + elementLayers.length; // fundo + elementos
-      let done = 0;
-
-      const updateStatus = () => {
-        done++;
-        if (sceneDecomposeStatus) sceneDecomposeStatus.textContent = `Gerando camada ${done}/${totalLayers}...`;
-      };
-
       try {
-        const titulo = activeCartazData?.titulo || '';
+        const titulo = cartazTituloInput?.value || activeCartazData?.titulo || '';
         const token = localStorage.getItem('token');
 
-        // Gera todas as imagens em paralelo via API (usando os prompts diretos das camadas)
         const allPrompts = [
           { isBackground: true, description: bgLayer.description, layerRef: bgLayer },
           ...elementLayers.map(l => ({ isBackground: false, description: l.description, layerRef: l }))
         ];
 
-        if (sceneDecomposeStatus) sceneDecomposeStatus.textContent = `Enviando para a IA...`;
+        if (sceneDecomposeStatus) sceneDecomposeStatus.textContent = 'Gerando elementos da cena com IA...';
 
         const response = await fetch('/api/cartazes/decompose-scene', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
           body: JSON.stringify({
             titulo,
-            // Mandamos a estrutura de camadas diretamente (novo campo layers_manual)
             layers_manual: allPrompts.map(p => ({
               isBackground: p.isBackground,
               description: p.description
@@ -10358,17 +10427,17 @@ document.addEventListener('DOMContentLoaded', () => {
 
         if (sceneDecomposeStatus) sceneDecomposeStatus.textContent = 'Montando as camadas no canvas...';
 
-        // Fundo
+        // Montar Fundo
         if (data.backgroundUrl && bgLayer) {
           bgLayer.canvasItem = addSceneLayerToCanvas({
             url: data.backgroundUrl, name: bgLayer.description, isBackground: true
           });
         }
 
-        // Elementos
+        // Montar Elementos individuais
         const spread = [
-          { left: 8, top: 32 }, { left: 42, top: 38 },
-          { left: 64, top: 28 }, { left: 22, top: 56 }
+          { left: 10, top: 30 }, { left: 45, top: 35 },
+          { left: 65, top: 25 }, { left: 25, top: 55 }
         ];
         if (Array.isArray(data.layers)) {
           data.layers.forEach((layer, idx) => {
@@ -10379,14 +10448,14 @@ document.addEventListener('DOMContentLoaded', () => {
               url: layer.url,
               name: layer.name || elLayerRef?.description || `Elemento ${idx + 1}`,
               isBackground: false,
-              left: pos.left, top: pos.top, width: 30, height: 30,
+              left: pos.left, top: pos.top, width: 32, height: 32,
               zOffset: idx + 1
             });
             if (elLayerRef) elLayerRef.canvasItem = canvasItem;
           });
         }
 
-        showToast('🎬 Cena montada! Use os botões 👁️ 📌 🗑️ para controlar cada camada.', 'success');
+        showToast('🎬 Cena montada com sucesso! Arraste e redimensione os elementos livremente.', 'success');
 
       } catch (err) {
         console.error('[Cenas em Camadas]', err);
@@ -10399,252 +10468,69 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
-  // Cria um item de camada de imagem direto no canvas (background ou sticker)
-  // Remoção de fundo branco via Canvas API — gera PNG com transparência real
-  async function removeWhiteBackground(imgUrl, threshold = 235) {
-    return new Promise((resolve) => {
-      const img = new Image();
-      img.crossOrigin = 'anonymous'; // necessário para getImageData funcionar
-      img.onload = () => {
-        const offscreen = document.createElement('canvas');
-        offscreen.width = img.naturalWidth;
-        offscreen.height = img.naturalHeight;
-        const ctx = offscreen.getContext('2d', { willReadFrequently: true });
-        ctx.drawImage(img, 0, 0);
-
-        const imageData = ctx.getImageData(0, 0, offscreen.width, offscreen.height);
-        const data = imageData.data;
-        // threshold: pixels com R,G,B >= threshold são considerados "fundos a remover"
-        // softRange: faixa de suavização para bordas anti-aliased
-        const softRange = 20;
-
-        for (let i = 0; i < data.length; i += 4) {
-          const r = data[i];
-          const g = data[i + 1];
-          const b = data[i + 2];
-
-          // Pega o mínimo dos canais (garante que só pixels "esbranquiçados" sejam afetados)
-          const minChannel = Math.min(r, g, b);
-
-          if (minChannel >= threshold) {
-            // Área central do branco: totalmente transparente
-            data[i + 3] = 0;
-          } else if (minChannel >= threshold - softRange) {
-            // Zona de borda: transição linear suave para preservar contornos
-            const ratio = (minChannel - (threshold - softRange)) / softRange;
-            data[i + 3] = Math.round((1 - ratio) * data[i + 3]);
-          }
-          // Pixels abaixo do threshold - softRange: mantém opacidade original
-        }
-
-        ctx.putImageData(imageData, 0, 0);
-        resolve(offscreen.toDataURL('image/png'));
-      };
-      img.onerror = () => {
-        console.warn('[removeWhiteBackground] Falha ao carregar imagem, usando original:', imgUrl);
-        resolve(imgUrl);
-      };
-      img.src = imgUrl;
-    });
+  // --- GERENCIAMENTO DE CAMADAS E PROFUNDIDADE (Z-INDEX) ---
+  function getAllCanvasItems() {
+    if (!cartazPrintableArea) return [];
+    return Array.from(cartazPrintableArea.querySelectorAll('.canvas-item'));
   }
 
-  function addSceneLayerToCanvas(layerData) {
-    if (!canvasModeActive || !cartazPrintableArea) return;
+  function getSortedZIndexItems() {
+    const items = getAllCanvasItems();
+    return items.map(el => ({
+      el,
+      z: parseInt(el.style.zIndex) || 1
+    })).sort((a, b) => a.z - b.z);
+  }
 
-    const item = document.createElement('div');
-    item.className = 'canvas-item canvas-scene-layer';
-    item.setAttribute('data-layer-name', layerData.name || '');
-    item.setAttribute('data-rotation', '0');
-    item.style.position = 'absolute';
-    item.style.left = (layerData.left || 10) + '%';
-    item.style.top = (layerData.top || 10) + '%';
-    item.style.width = (layerData.width || 35) + '%';
-    item.style.height = (layerData.height || 35) + '%';
-    item.style.zIndex = layerData.isBackground ? '0' : String(10 + (layerData.zOffset || 0));
-    item.style.background = 'transparent';
-
-    if (layerData.isBackground) {
-      item.style.left = '0';
-      item.style.top = '0';
-      item.style.width = '100%';
-      item.style.height = '100%';
-      item.style.zIndex = '0';
-      item.style.pointerEvents = 'none';
-      item.innerHTML = `<img src="${layerData.url}" 
-        style="width:100%; height:100%; object-fit:cover; pointer-events:none; display:block;">`;
-      item.title = '🖼️ Cenário de Fundo';
-
-      const handle = document.createElement('div');
-      handle.className = 'canvas-resize-handle';
-      item.appendChild(handle);
-      cartazPrintableArea.appendChild(item);
-      item.style.pointerEvents = 'auto';
-      setupCanvasItemEvents(item);
+  function bringCanvasItemToFront(item) {
+    if (!item) return;
+    const sorted = getSortedZIndexItems();
+    const maxZ = sorted.length > 0 ? Math.max(...sorted.map(s => s.z)) : 1;
+    const newZ = Math.max(maxZ + 1, 35);
+    item.style.zIndex = String(newZ);
+    updateToolbarForSelected();
+    showToast(`Elemento trazido para a frente de tudo (Nível ${newZ})`, 'info');
+  }
 
+  function sendCanvasItemToBack(item) {
+    if (!item) return;
+    if (item.getAttribute('data-is-bg') === 'true') {
+      item.style.zIndex = '1';
     } else {
-      // Adiciona o item ao canvas com um placeholder de loading
-      item.innerHTML = `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0.4;">
-        <span style="font-size:1.5rem;animation:spin 1s linear infinite;">⏳</span>
-      </div>`;
-      item.title = '🎬 ' + (layerData.name || 'Elemento');
-
-      const handle = document.createElement('div');
-      handle.className = 'canvas-resize-handle';
-      item.appendChild(handle);
-      cartazPrintableArea.appendChild(item);
-      setupCanvasItemEvents(item);
-
-      // Remove o fundo branco de forma assíncrona via Canvas API
-      removeWhiteBackground(layerData.url).then(transparentDataUrl => {
-        item.innerHTML = `<img src="${transparentDataUrl}" 
-          style="width:100%; height:100%; object-fit:contain; pointer-events:none; display:block;">`;
-        const newHandle = document.createElement('div');
-        newHandle.className = 'canvas-resize-handle';
-        item.appendChild(newHandle);
-      });
+      item.style.zIndex = '2'; // Diretamente acima do fundo
     }
-
-    return item;
+    updateToolbarForSelected();
+    showToast(`Elemento enviado para trás (Nível ${item.style.zIndex})`, 'info');
   }
 
-  // Renderiza a lista de camadas no painel lateral
-  function renderSceneLayers(layers) {
-    if (!sceneLayersItems) return;
-    sceneLayersItems.innerHTML = '';
-
-    const allLayers = [{ name: '🖼️ Cenário de Fundo', isBackground: true }, ...layers.map(l => ({ ...l }))];
-    allLayers.forEach((layer, index) => {
-      const chip = document.createElement('div');
-      chip.style.cssText = `display:flex; align-items:center; gap:8px; padding:5px 8px; 
-        background:rgba(255,255,255,0.05); border:1px solid rgba(139,92,246,0.2); 
-        border-radius:6px; font-size:0.78rem; color:var(--text-primary); cursor:pointer;`;
-      chip.innerHTML = `
-        <span style="font-size:1rem;">${layer.isBackground ? '🌄' : '✨'}</span>
-        <span style="flex:1;">${layer.name}</span>
-        <span style="font-size:0.68rem; color:var(--text-secondary);">Camada ${index}</span>
-      `;
-      chip.title = `${layer.isBackground ? 'Fundo da cena' : 'Elemento: ' + layer.name}`;
-      sceneLayersItems.appendChild(chip);
-    });
+  function stepCanvasItemZIndexUp(item) {
+    if (!item) return;
+    const sorted = getSortedZIndexItems();
+    const currentZ = parseInt(item.style.zIndex) || 1;
+    const higher = sorted.find(i => i.z > currentZ && i.el !== item);
+    const newZ = higher ? higher.z + 1 : currentZ + 1;
+    item.style.zIndex = String(newZ);
+    updateToolbarForSelected();
+    showToast(`Nível avançado para ${newZ}`, 'info');
   }
 
-  if (btnDecomposeScene) {
-    btnDecomposeScene.addEventListener('click', async () => {
-      const prompt = sceneDecomposePrompt ? sceneDecomposePrompt.value.trim() : '';
-      if (!prompt) {
-        showToast('Descreva a cena antes de gerar!', 'warning');
-        return;
-      }
-
-      // Garantir que o modo canvas está ativo
-      if (!canvasModeActive) {
-        if (cartazEditArea && cartazEditArea.style.display !== 'none') {
-          btnEditCartazToggle && btnEditCartazToggle.click();
-        }
-        enterCanvasMode();
-      }
-
-      // Mostrar loading
-      btnDecomposeScene.disabled = true;
-      btnDecomposeScene.style.opacity = '0.6';
-      if (sceneDecomposeLoader) {
-        sceneDecomposeLoader.style.display = 'flex';
-      }
-      if (sceneLayersList) sceneLayersList.style.display = 'none';
-
-      const statusSteps = [
-        'Planejando a cena com IA...',
-        'Identificando elementos e cenário...',
-        'Gerando imagem de fundo...',
-        'Gerando elementos individuais...',
-        'Montando as camadas no canvas...'
-      ];
-      let stepIdx = 0;
-      const statusInterval = setInterval(() => {
-        if (sceneDecomposeStatus && stepIdx < statusSteps.length) {
-          sceneDecomposeStatus.textContent = statusSteps[stepIdx++];
-        }
-      }, 3500);
-
-      try {
-        const titulo = activeCartazData?.titulo || '';
-        const response = await fetch('/api/cartazes/decompose-scene', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`
-          },
-          body: JSON.stringify({ tema: prompt, titulo })
-        });
-
-        clearInterval(statusInterval);
-
-        if (!response.ok) {
-          const errData = await response.json().catch(() => ({}));
-          throw new Error(errData.error || 'Erro na geração da cena.');
-        }
-
-        const data = await response.json();
-        if (!data.success) throw new Error('Resposta inválida do servidor.');
-
-        if (sceneDecomposeStatus) sceneDecomposeStatus.textContent = 'Montando as camadas no canvas...';
-
-        // Limpar canvas antes de montar (remover outros items de cena se houver)
-        const oldLayers = cartazPrintableArea.querySelectorAll('.canvas-scene-layer');
-        oldLayers.forEach(l => l.remove());
-
-        // Adicionar background
-        if (data.backgroundUrl) {
-          addSceneLayerToCanvas({ url: data.backgroundUrl, name: 'Cenário de Fundo', isBackground: true });
-        }
-
-        // Adicionar cada elemento com posição escalonada
-        if (Array.isArray(data.layers)) {
-          data.layers.forEach((layer, idx) => {
-            if (layer.url) {
-              const spread = [
-                { left: 10, top: 30 },
-                { left: 38, top: 35 },
-                { left: 62, top: 28 },
-                { left: 25, top: 55 }
-              ];
-              const pos = spread[idx % spread.length];
-              addSceneLayerToCanvas({
-                url: layer.url,
-                name: layer.name || `Elemento ${idx + 1}`,
-                isBackground: false,
-                left: pos.left,
-                top: pos.top,
-                width: 28,
-                height: 28,
-                zOffset: idx + 1
-              });
-            }
-          });
-
-          // Renderizar lista de camadas no painel
-          renderSceneLayers(data.layers);
-          if (sceneLayersList) sceneLayersList.style.display = 'flex';
-        }
-
-        showToast('🎬 Cena montada em camadas! Clique nos elementos para mover, girar e redimensionar.', 'success');
-
-      } catch (err) {
-        clearInterval(statusInterval);
-        console.error('[Decompose Scene]', err);
-        showToast('Erro ao criar a cena em camadas: ' + err.message, 'error');
-      } finally {
-        btnDecomposeScene.disabled = false;
-        btnDecomposeScene.style.opacity = '1';
-        if (sceneDecomposeLoader) sceneDecomposeLoader.style.display = 'none';
-      }
-    });
+  function stepCanvasItemZIndexDown(item) {
+    if (!item) return;
+    const sorted = getSortedZIndexItems().reverse();
+    const currentZ = parseInt(item.style.zIndex) || 1;
+    const minAllowed = item.getAttribute('data-is-bg') === 'true' ? 1 : 2;
+    const lower = sorted.find(i => i.z < currentZ && i.el !== item);
+    const newZ = lower ? Math.max(minAllowed, lower.z - 1) : Math.max(minAllowed, currentZ - 1);
+    item.style.zIndex = String(newZ);
+    updateToolbarForSelected();
+    showToast(`Nível recuado para ${newZ}`, 'info');
   }
 
+  // --- ATIVAR / DESATIVAR MODO CANVAS ---
   function enterCanvasMode() {
     canvasModeActive = true;
     if (btnCanvasModeToggle) {
-      btnCanvasModeToggle.textContent = '💾 Salvar Canvas';
+      btnCanvasModeToggle.textContent = '💾 Concluir Design';
       btnCanvasModeToggle.style.background = '#10a37f';
       btnCanvasModeToggle.style.color = 'white';
     }
@@ -10656,22 +10542,20 @@ document.addEventListener('DOMContentLoaded', () => {
     if (configPanel) configPanel.style.display = 'none';
     if (canvasPanel) canvasPanel.style.display = 'flex';
     
-    // Iniciar na aba correspondente de assets
     selectAssetTab(activeAssetTab);
     
     cartazPrintableArea.style.position = 'relative';
     const rectParent = cartazPrintableArea.getBoundingClientRect();
     
     const items = [];
+    if (cartazPreviewBadge && cartazPreviewBadge.style.display !== 'none') items.push(cartazPreviewBadge);
     if (cartazPreviewTitle) items.push(cartazPreviewTitle);
     if (cartazPreviewImageContainer && cartazPreviewImageContainer.style.display !== 'none') {
       items.push(cartazPreviewImageContainer);
     }
     
     const cards = Array.from(cartazPreviewContent.children);
-    cards.forEach(card => {
-      items.push(card);
-    });
+    cards.forEach(card => items.push(card));
     
     const clientRects = items.map(item => item.getBoundingClientRect());
     
@@ -10685,12 +10569,15 @@ document.addEventListener('DOMContentLoaded', () => {
       
       item.classList.add('canvas-item');
       item.style.position = 'absolute';
-      item.style.left = `${leftPercent}%`;
-      item.style.top = `${topPercent}%`;
-      item.style.width = `${widthPercent}%`;
-      item.style.height = `${heightPercent}%`;
+      item.style.left = `${Math.max(0, leftPercent).toFixed(2)}%`;
+      item.style.top = `${Math.max(0, topPercent).toFixed(2)}%`;
+      item.style.width = `${Math.min(100, widthPercent).toFixed(2)}%`;
+      item.style.height = `${Math.min(100, heightPercent).toFixed(2)}%`;
       item.style.margin = '0';
       
+      // CRÍTICO: Textos, títulos e cartões iniciam na frente do fundo (1) e das camadas (10+)
+      item.style.zIndex = String(30 + index);
+      item.setAttribute('data-rotation', '0');
       item.setAttribute('contenteditable', 'true');
       
       if (!item.querySelector('.canvas-resize-handle')) {
@@ -10707,19 +10594,18 @@ document.addEventListener('DOMContentLoaded', () => {
     });
     
     cartazPreviewContent.style.display = 'none';
-    showToast('Modo Design Canvas ativado! Adicione elementos e ajuste o mural livremente.', 'info');
+    showToast('Modo Design Canvas ativado! Clique nos itens para editar, mover ou redimensionar.', 'info');
   }
 
   function exitCanvasMode() {
     canvasModeActive = false;
     if (btnCanvasModeToggle) {
-      btnCanvasModeToggle.textContent = '🎨 Design Canvas';
+      btnCanvasModeToggle.textContent = '🎨 Canvas';
       btnCanvasModeToggle.style.background = 'transparent';
       btnCanvasModeToggle.style.color = 'var(--text-secondary)';
     }
     if (canvasControlPanel) canvasControlPanel.style.display = 'none';
 
-    // Alternar painéis de volta
     const configPanel = document.getElementById('cartazLeftConfigPanel');
     const canvasPanel = document.getElementById('cartazLeftCanvasPanel');
     if (configPanel) configPanel.style.display = 'flex';
@@ -10735,92 +10621,52 @@ document.addEventListener('DOMContentLoaded', () => {
       item.removeAttribute('contenteditable');
     });
 
-    // Limpar o HTML para persistência (remover seleções/handles)
-    const tempContainer = document.createElement('div');
-    tempContainer.innerHTML = cartazPrintableArea.innerHTML;
-    tempContainer.querySelectorAll('.canvas-resize-handle').forEach(h => h.remove());
-    tempContainer.querySelectorAll('.canvas-item').forEach(el => {
-      el.classList.remove('active-item');
-      el.removeAttribute('contenteditable');
-      if (el.style.border && el.style.border.includes('dashed')) {
-        el.style.border = 'none';
-      }
-    });
-    const cleanHtml = tempContainer.innerHTML;
-
-    // Persistir alterações de canvas no banco
-    if (activeCartazData && activeCartazData.id) {
-      fetch(`/api/cartazes/${activeCartazData.id}`, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${localStorage.getItem('token')}`
-        },
-        body: JSON.stringify({
-          conteudo: cleanHtml,
-          corFundo: cartazBgColor.value,
-          corTexto: cartazTextColor.value
-        })
-      }).then(res => {
-        if (res.ok) {
-          showToast('Layout do Canvas salvo no servidor!', 'success');
-          loadCartazesHistory();
-        } else {
-          showToast('Erro ao salvar layout no servidor.', 'error');
-        }
-      }).catch(e => {
-        console.error(e);
-        showToast('Erro de conexão ao salvar canvas.', 'error');
-      });
-    } else {
-      showToast('Layout salvo temporariamente. Crie o cartaz para salvar definitivamente.', 'warning');
-    }
+    showToast('Design do Canvas pronto para exportação!', 'success');
   }
 
+  // CONFIGURAÇÃO COMPLETA DE EVENTOS DE DRAG, RESIZE E SELEÇÃO
   function setupCanvasItemEvents(item) {
+    // Clique: Seleciona o item
     item.addEventListener('click', (e) => {
       if (!canvasModeActive) return;
       e.stopPropagation();
       
-      if (selectedCanvasItem) {
+      if (selectedCanvasItem && selectedCanvasItem !== item) {
         selectedCanvasItem.classList.remove('active-item');
       }
       selectedCanvasItem = item;
       item.classList.add('active-item');
-      
       updateToolbarForSelected();
     });
 
-    // Clique duplo para focar e editar texto
+    // Clique duplo: Edição de texto
     item.addEventListener('dblclick', (e) => {
       if (!canvasModeActive) return;
-      if (item.querySelector('img')) return; // Evita editar imagens
+      if (item.querySelector('img')) return;
       
       e.stopPropagation();
       item.setAttribute('contenteditable', 'true');
       item.focus();
-      
-      // Coloca o cursor de digitação no texto
-      const range = document.createRange();
-      range.selectNodeContents(item);
-      range.collapse(false);
-      const sel = window.getSelection();
-      sel.removeAllRanges();
-      sel.addRange(range);
     });
     
+    // Mousedown para Drag do elemento
     item.addEventListener('mousedown', (e) => {
       if (!canvasModeActive) return;
       if (e.target.classList.contains('canvas-resize-handle')) return;
       
-      // Se o item já estiver focado/editando, permite seleção de texto livre sem arrastar
+      // Se for fundo bloqueado, não arrasta
+      if (item.getAttribute('data-is-bg') === 'true') return;
+      
+      // Se já estiver editando texto com cursor ativo, permite digitação
       if (item.getAttribute('contenteditable') === 'true' && document.activeElement === item) {
         return;
       }
       
       e.preventDefault();
+      if (selectedCanvasItem && selectedCanvasItem !== item) {
+        selectedCanvasItem.classList.remove('active-item');
+      }
       selectedCanvasItem = item;
-      document.querySelectorAll('.canvas-item').forEach(el => el.classList.remove('active-item'));
       item.classList.add('active-item');
       updateToolbarForSelected();
       
@@ -10833,24 +10679,22 @@ document.addEventListener('DOMContentLoaded', () => {
       
       dragStartLeft = ((itemRect.left - parentRect.left) / parentRect.width) * 100;
       dragStartTop = ((itemRect.top - parentRect.top) / parentRect.height) * 100;
-
-      // Previne o highlight azul do browser durante o drag
-      document.body.style.userSelect = 'none';
       
+      document.body.style.userSelect = 'none';
       document.addEventListener('mousemove', handleCanvasDrag);
       document.addEventListener('mouseup', stopCanvasDrag);
     });
     
+    // Touchstart para Mobile / Touchscreen Drag
     item.addEventListener('touchstart', (e) => {
       if (!canvasModeActive) return;
       if (e.target.classList.contains('canvas-resize-handle')) return;
+      if (item.getAttribute('data-is-bg') === 'true') return;
       
-      if (item.getAttribute('contenteditable') === 'true' && document.activeElement === item) {
-        return;
+      if (selectedCanvasItem && selectedCanvasItem !== item) {
+        selectedCanvasItem.classList.remove('active-item');
       }
-      
       selectedCanvasItem = item;
-      document.querySelectorAll('.canvas-item').forEach(el => el.classList.remove('active-item'));
       item.classList.add('active-item');
       updateToolbarForSelected();
       
@@ -10869,59 +10713,44 @@ document.addEventListener('DOMContentLoaded', () => {
       document.addEventListener('touchend', stopCanvasDrag);
     });
     
+    // CONFIGURAÇÃO DA ALÇA DE REDIMENSIONAMENTO (BOLINHA AZUL)
     const handle = item.querySelector('.canvas-resize-handle');
     if (handle) {
-      handle.addEventListener('mousedown', (e) => {
+      const initResize = (clientX, clientY, e) => {
         if (!canvasModeActive) return;
         e.stopPropagation();
         e.preventDefault();
 
-        // Garante que o item clicado seja o selecionado
-        document.querySelectorAll('.canvas-item').forEach(el => el.classList.remove('active-item'));
+        if (selectedCanvasItem && selectedCanvasItem !== item) {
+          selectedCanvasItem.classList.remove('active-item');
+        }
         selectedCanvasItem = item;
         item.classList.add('active-item');
         updateToolbarForSelected();
 
         isResizingCanvas = true;
-        dragStartX = e.clientX;
-        dragStartY = e.clientY;
+        dragStartX = clientX;
+        dragStartY = clientY;
 
         const parentRect = cartazPrintableArea.getBoundingClientRect();
         const itemRect = item.getBoundingClientRect();
 
+        dragStartLeft = ((itemRect.left - parentRect.left) / parentRect.width) * 100;
+        dragStartTop = ((itemRect.top - parentRect.top) / parentRect.height) * 100;
         dragStartWidth = (itemRect.width / parentRect.width) * 100;
         dragStartHeight = (itemRect.height / parentRect.height) * 100;
 
-        // Previne seleção de texto durante o drag de resize
         document.body.style.userSelect = 'none';
-
         document.addEventListener('mousemove', handleCanvasResize);
         document.addEventListener('mouseup', stopCanvasResize);
-      });
-
-      handle.addEventListener('touchstart', (e) => {
-        if (!canvasModeActive) return;
-        e.stopPropagation();
-        e.preventDefault();
-
-        document.querySelectorAll('.canvas-item').forEach(el => el.classList.remove('active-item'));
-        selectedCanvasItem = item;
-        item.classList.add('active-item');
-        updateToolbarForSelected();
-
-        isResizingCanvas = true;
-        const touch = e.touches[0];
-        dragStartX = touch.clientX;
-        dragStartY = touch.clientY;
-
-        const parentRect = cartazPrintableArea.getBoundingClientRect();
-        const itemRect = item.getBoundingClientRect();
-
-        dragStartWidth = (itemRect.width / parentRect.width) * 100;
-        dragStartHeight = (itemRect.height / parentRect.height) * 100;
-
         document.addEventListener('touchmove', handleCanvasTouchResize, { passive: false });
         document.addEventListener('touchend', stopCanvasResize);
+      };
+
+      handle.addEventListener('mousedown', (e) => initResize(e.clientX, e.clientY, e));
+      handle.addEventListener('touchstart', (e) => {
+        const touch = e.touches[0];
+        initResize(touch.clientX, touch.clientY, e);
       });
     }
   }
@@ -10931,23 +10760,20 @@ document.addEventListener('DOMContentLoaded', () => {
     const dx = e.clientX - dragStartX;
     const dy = e.clientY - dragStartY;
     const parentRect = cartazPrintableArea.getBoundingClientRect();
+    if (!parentRect.width || !parentRect.height) return;
+
     const dxPercent = (dx / parentRect.width) * 100;
     const dyPercent = (dy / parentRect.height) * 100;
     
-    let newLeft = dragStartLeft + dxPercent;
-    let newTop = dragStartTop + dyPercent;
-    
     const itemRect = selectedCanvasItem.getBoundingClientRect();
     const itemWPercent = (itemRect.width / parentRect.width) * 100;
     const itemHPercent = (itemRect.height / parentRect.height) * 100;
     
-    if (newLeft < 0) newLeft = 0;
-    if (newTop < 0) newTop = 0;
-    if (newLeft + itemWPercent > 100) newLeft = 100 - itemWPercent;
-    if (newTop + itemHPercent > 100) newTop = 100 - itemHPercent;
+    let newLeft = Math.max(0, Math.min(100 - itemWPercent, dragStartLeft + dxPercent));
+    let newTop = Math.max(0, Math.min(100 - itemHPercent, dragStartTop + dyPercent));
     
-    selectedCanvasItem.style.left = `${newLeft}%`;
-    selectedCanvasItem.style.top = `${newTop}%`;
+    selectedCanvasItem.style.left = `${newLeft.toFixed(2)}%`;
+    selectedCanvasItem.style.top = `${newTop.toFixed(2)}%`;
   }
   
   function handleCanvasTouchDrag(e) {
@@ -10957,56 +10783,50 @@ document.addEventListener('DOMContentLoaded', () => {
     const dx = touch.clientX - dragStartX;
     const dy = touch.clientY - dragStartY;
     const parentRect = cartazPrintableArea.getBoundingClientRect();
+    if (!parentRect.width || !parentRect.height) return;
+
     const dxPercent = (dx / parentRect.width) * 100;
     const dyPercent = (dy / parentRect.height) * 100;
     
-    let newLeft = dragStartLeft + dxPercent;
-    let newTop = dragStartTop + dyPercent;
-    
     const itemRect = selectedCanvasItem.getBoundingClientRect();
     const itemWPercent = (itemRect.width / parentRect.width) * 100;
     const itemHPercent = (itemRect.height / parentRect.height) * 100;
     
-    if (newLeft < 0) newLeft = 0;
-    if (newTop < 0) newTop = 0;
-    if (newLeft + itemWPercent > 100) newLeft = 100 - itemWPercent;
-    if (newTop + itemHPercent > 100) newTop = 100 - itemHPercent;
+    let newLeft = Math.max(0, Math.min(100 - itemWPercent, dragStartLeft + dxPercent));
+    let newTop = Math.max(0, Math.min(100 - itemHPercent, dragStartTop + dyPercent));
     
-    selectedCanvasItem.style.left = `${newLeft}%`;
-    selectedCanvasItem.style.top = `${newTop}%`;
+    selectedCanvasItem.style.left = `${newLeft.toFixed(2)}%`;
+    selectedCanvasItem.style.top = `${newTop.toFixed(2)}%`;
   }
   
   function stopCanvasDrag() {
     isDraggingCanvas = false;
-    document.body.style.userSelect = ''; // Restaura seleção de texto
+    document.body.style.userSelect = '';
     document.removeEventListener('mousemove', handleCanvasDrag);
     document.removeEventListener('mouseup', stopCanvasDrag);
     document.removeEventListener('touchmove', handleCanvasTouchDrag);
     document.removeEventListener('touchend', stopCanvasDrag);
   }
   
+  // REDIMENSIONAMENTO PRECISO (AMPLIAR / REDUZIR PELA BOLINHA AZUL)
   function handleCanvasResize(e) {
     if (!isResizingCanvas || !selectedCanvasItem) return;
     const dx = e.clientX - dragStartX;
     const dy = e.clientY - dragStartY;
     const parentRect = cartazPrintableArea.getBoundingClientRect();
+    if (!parentRect.width || !parentRect.height) return;
+
     const dxPercent = (dx / parentRect.width) * 100;
     const dyPercent = (dy / parentRect.height) * 100;
     
-    let newWidth = dragStartWidth + dxPercent;
-    let newHeight = dragStartHeight + dyPercent;
+    const maxAvailableWidth = 100 - dragStartLeft;
+    const maxAvailableHeight = 100 - dragStartTop;
     
-    if (newWidth < 10) newWidth = 10;
-    if (newHeight < 5) newHeight = 5;
+    let newWidth = Math.min(maxAvailableWidth, Math.max(4, dragStartWidth + dxPercent));
+    let newHeight = Math.min(maxAvailableHeight, Math.max(3, dragStartHeight + dyPercent));
     
-    const itemLeft = parseFloat(selectedCanvasItem.style.left) || 0;
-    const itemTop = parseFloat(selectedCanvasItem.style.top) || 0;
-    
-    if (itemLeft + newWidth > 100) newWidth = 100 - itemLeft;
-    if (itemTop + newHeight > 100) newHeight = 100 - itemTop;
-    
-    selectedCanvasItem.style.width = `${newWidth}%`;
-    selectedCanvasItem.style.height = `${newHeight}%`;
+    selectedCanvasItem.style.width = `${newWidth.toFixed(2)}%`;
+    selectedCanvasItem.style.height = `${newHeight.toFixed(2)}%`;
   }
   
   function handleCanvasTouchResize(e) {
@@ -11016,28 +10836,24 @@ document.addEventListener('DOMContentLoaded', () => {
     const dx = touch.clientX - dragStartX;
     const dy = touch.clientY - dragStartY;
     const parentRect = cartazPrintableArea.getBoundingClientRect();
+    if (!parentRect.width || !parentRect.height) return;
+
     const dxPercent = (dx / parentRect.width) * 100;
     const dyPercent = (dy / parentRect.height) * 100;
     
-    let newWidth = dragStartWidth + dxPercent;
-    let newHeight = dragStartHeight + dyPercent;
+    const maxAvailableWidth = 100 - dragStartLeft;
+    const maxAvailableHeight = 100 - dragStartTop;
     
-    if (newWidth < 10) newWidth = 10;
-    if (newHeight < 5) newHeight = 5;
+    let newWidth = Math.min(maxAvailableWidth, Math.max(4, dragStartWidth + dxPercent));
+    let newHeight = Math.min(maxAvailableHeight, Math.max(3, dragStartHeight + dyPercent));
     
-    const itemLeft = parseFloat(selectedCanvasItem.style.left) || 0;
-    const itemTop = parseFloat(selectedCanvasItem.style.top) || 0;
-    
-    if (itemLeft + newWidth > 100) newWidth = 100 - itemLeft;
-    if (itemTop + newHeight > 100) newHeight = 100 - itemTop;
-    
-    selectedCanvasItem.style.width = `${newWidth}%`;
-    selectedCanvasItem.style.height = `${newHeight}%`;
+    selectedCanvasItem.style.width = `${newWidth.toFixed(2)}%`;
+    selectedCanvasItem.style.height = `${newHeight.toFixed(2)}%`;
   }
   
   function stopCanvasResize() {
     isResizingCanvas = false;
-    document.body.style.userSelect = ''; // Restaura seleção de texto
+    document.body.style.userSelect = '';
     document.removeEventListener('mousemove', handleCanvasResize);
     document.removeEventListener('mouseup', stopCanvasResize);
     document.removeEventListener('touchmove', handleCanvasTouchResize);
@@ -11045,7 +10861,7 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   function rgbToHex(rgb) {
-    if (!rgb || rgb === 'transparent') return '#ffffff';
+    if (!rgb || rgb === 'transparent' || rgb === 'rgba(0, 0, 0, 0)') return '#ffffff';
     if (rgb.startsWith('#')) return rgb;
     const match = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
     if (!match) return '#ffffff';
@@ -11055,28 +10871,107 @@ document.addEventListener('DOMContentLoaded', () => {
     return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
   }
 
+  // SINCRONIZA A TOOLBAR COM O ITEM SELECIONADO
   function updateToolbarForSelected() {
-    if (!selectedCanvasItem) return;
+    if (!selectedCanvasItem) {
+      if (canvasItemZIndexBadge) canvasItemZIndexBadge.textContent = 'Camada: --';
+      return;
+    }
     
-    const ff = window.getComputedStyle(selectedCanvasItem).fontFamily.replace(/['"]/g, '').split(',')[0].trim();
+    const computed = window.getComputedStyle(selectedCanvasItem);
+
+    // Indicador da Camada (Z-Index)
+    const zVal = selectedCanvasItem.style.zIndex || computed.zIndex || '1';
+    if (canvasItemZIndexBadge) {
+      canvasItemZIndexBadge.textContent = `Camada: ${zVal}`;
+    }
+
+    // Tipografia
+    const ff = computed.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
     if (canvasFontFamily) canvasFontFamily.value = ff;
     
-    const fs = parseFloat(window.getComputedStyle(selectedCanvasItem).fontSize);
-    if (canvasFontSize) canvasFontSize.value = Math.round(fs);
+    const fs = parseFloat(computed.fontSize);
+    if (canvasFontSize && !isNaN(fs)) canvasFontSize.value = Math.round(fs);
     
-    const col = rgbToHex(window.getComputedStyle(selectedCanvasItem).color);
+    // Cores de Texto e Preenchimento
+    const col = rgbToHex(computed.color);
     if (canvasTextColor) canvasTextColor.value = col;
     
-    const bg = rgbToHex(window.getComputedStyle(selectedCanvasItem).backgroundColor);
+    const bg = rgbToHex(selectedCanvasItem.style.backgroundColor || computed.backgroundColor);
     if (canvasBgColorInput) canvasBgColorInput.value = bg;
 
+    // Contorno / Borda (Linha) e Espessura
+    const borderCol = rgbToHex(selectedCanvasItem.style.borderColor || computed.borderColor || computed.borderTopColor);
+    if (canvasBorderColor) canvasBorderColor.value = borderCol;
+
+    const bWidth = parseFloat(selectedCanvasItem.style.borderWidth || computed.borderWidth || computed.borderTopWidth) || 0;
+    if (canvasBorderWidth) canvasBorderWidth.value = Math.round(bWidth);
+
+    // Rotação e Opacidade
     const rot = selectedCanvasItem.getAttribute('data-rotation') || '0';
     if (canvasRotation) canvasRotation.value = rot;
 
-    const op = window.getComputedStyle(selectedCanvasItem).opacity || '1';
+    const op = computed.opacity || '1';
     if (canvasOpacity) canvasOpacity.value = Math.round(parseFloat(op) * 100);
   }
 
+  // --- OUVINTES DOS 3 RECURSOS PEDIDOS PELO USUÁRIO (LINHA, ESPESSURA E PREENCHIMENTO) ---
+  
+  // 1. Cor da Linha de Contorno
+  if (canvasBorderColor) {
+    canvasBorderColor.addEventListener('input', () => {
+      if (!selectedCanvasItem) return;
+      const color = canvasBorderColor.value;
+      selectedCanvasItem.style.borderColor = color;
+      if (selectedCanvasItem.style.borderTopColor) selectedCanvasItem.style.borderTopColor = color;
+      // Se não havia borda ativa, define estilo solid
+      if (!selectedCanvasItem.style.borderStyle || selectedCanvasItem.style.borderStyle === 'none') {
+        selectedCanvasItem.style.borderStyle = 'solid';
+      }
+    });
+  }
+
+  // 2. Alargar / Afinar Linhas (Espessura do Contorno em Pixels)
+  if (canvasBorderWidth) {
+    canvasBorderWidth.addEventListener('input', () => {
+      if (!selectedCanvasItem) return;
+      const widthVal = parseInt(canvasBorderWidth.value) || 0;
+      if (widthVal <= 0) {
+        selectedCanvasItem.style.borderWidth = '0px';
+        selectedCanvasItem.style.border = 'none';
+      } else {
+        const curColor = canvasBorderColor ? canvasBorderColor.value : '#2d3748';
+        selectedCanvasItem.style.border = `${widthVal}px solid ${curColor}`;
+        selectedCanvasItem.style.borderWidth = `${widthVal}px`;
+      }
+    });
+  }
+
+  // 3. Preenchimento de Cor (Fundo da Forma)
+  if (canvasBgColorInput) {
+    canvasBgColorInput.addEventListener('input', () => {
+      if (!selectedCanvasItem) return;
+      selectedCanvasItem.style.backgroundColor = canvasBgColorInput.value;
+    });
+  }
+
+  // Botão Sem Fundo (Preenchimento Transparente)
+  if (btnCanvasBgTransparent) {
+    btnCanvasBgTransparent.addEventListener('click', () => {
+      if (!selectedCanvasItem) return;
+      selectedCanvasItem.style.backgroundColor = 'transparent';
+      showToast('Preenchimento transparente aplicado.', 'info');
+    });
+  }
+
+  // Cor do Texto
+  if (canvasTextColor) {
+    canvasTextColor.addEventListener('input', () => {
+      if (selectedCanvasItem) selectedCanvasItem.style.color = canvasTextColor.value;
+    });
+  }
+
+  // Tipografia e Tamanho da Fonte
   if (canvasFontFamily) {
     canvasFontFamily.addEventListener('change', () => {
       if (selectedCanvasItem) selectedCanvasItem.style.fontFamily = canvasFontFamily.value;
@@ -11087,16 +10982,8 @@ document.addEventListener('DOMContentLoaded', () => {
       if (selectedCanvasItem) selectedCanvasItem.style.fontSize = `${canvasFontSize.value}px`;
     });
   }
-  if (canvasTextColor) {
-    canvasTextColor.addEventListener('input', () => {
-      if (selectedCanvasItem) selectedCanvasItem.style.color = canvasTextColor.value;
-    });
-  }
-  if (canvasBgColorInput) {
-    canvasBgColorInput.addEventListener('input', () => {
-      if (selectedCanvasItem) selectedCanvasItem.style.backgroundColor = canvasBgColorInput.value;
-    });
-  }
+
+  // Giro / Rotação
   if (canvasRotation) {
     canvasRotation.addEventListener('input', () => {
       if (selectedCanvasItem) {
@@ -11106,52 +10993,65 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     });
   }
+
+  // Opacidade
   if (canvasOpacity) {
     canvasOpacity.addEventListener('input', () => {
       if (selectedCanvasItem) {
-        const val = canvasOpacity.value;
-        selectedCanvasItem.style.opacity = parseFloat(val) / 100;
+        selectedCanvasItem.style.opacity = parseFloat(canvasOpacity.value) / 100;
       }
     });
   }
+
+  // BOTÕES DE CONTROLE DE CAMADA (Z-INDEX)
+  if (btnCanvasZIndexFront) {
+    btnCanvasZIndexFront.addEventListener('click', () => {
+      if (selectedCanvasItem) bringCanvasItemToFront(selectedCanvasItem);
+    });
+  }
   if (btnCanvasZIndexUp) {
     btnCanvasZIndexUp.addEventListener('click', () => {
-      if (selectedCanvasItem) {
-        const currentZ = parseInt(selectedCanvasItem.style.zIndex) || 1;
-        selectedCanvasItem.style.zIndex = currentZ + 1;
-      }
+      if (selectedCanvasItem) stepCanvasItemZIndexUp(selectedCanvasItem);
     });
   }
   if (btnCanvasZIndexDown) {
     btnCanvasZIndexDown.addEventListener('click', () => {
-      if (selectedCanvasItem) {
-        const currentZ = parseInt(selectedCanvasItem.style.zIndex) || 1;
-        selectedCanvasItem.style.zIndex = Math.max(1, currentZ - 1);
-      }
+      if (selectedCanvasItem) stepCanvasItemZIndexDown(selectedCanvasItem);
     });
   }
+  if (btnCanvasZIndexBack) {
+    btnCanvasZIndexBack.addEventListener('click', () => {
+      if (selectedCanvasItem) sendCanvasItemToBack(selectedCanvasItem);
+    });
+  }
+
+  // Excluir Elemento
   if (btnCanvasDelete) {
     btnCanvasDelete.addEventListener('click', () => {
       if (selectedCanvasItem) {
         selectedCanvasItem.remove();
         selectedCanvasItem = null;
+        updateToolbarForSelected();
+        showToast('Elemento removido.', 'info');
       }
     });
   }
   
+  // Adicionar Texto Rápido
   if (btnCanvasAddText) {
     btnCanvasAddText.addEventListener('click', () => {
       if (!canvasModeActive) return;
       const textItem = document.createElement('div');
       textItem.className = 'canvas-item';
       textItem.innerHTML = 'Novo Texto (Clique duplo para editar)';
-      textItem.style.left = '10%';
-      textItem.style.top = '15%';
-      textItem.style.width = '50%';
-      textItem.style.height = '8%';
-      textItem.style.fontSize = '20px';
-      textItem.style.color = cartazTextColor.value || '#2d3748';
-      textItem.style.fontFamily = cartazFontSelect.value || 'Fredoka';
+      textItem.style.left = '15%';
+      textItem.style.top = '20%';
+      textItem.style.width = '55%';
+      textItem.style.height = '10%';
+      textItem.style.fontSize = '22px';
+      textItem.style.color = cartazTextColor ? cartazTextColor.value : '#2d3748';
+      textItem.style.fontFamily = cartazFontSelect ? cartazFontSelect.value : 'Fredoka';
+      textItem.style.zIndex = '35';
       textItem.setAttribute('contenteditable', 'true');
       
       const handle = document.createElement('div');
@@ -11164,21 +11064,24 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
   
+  // Adicionar Card Rápido
   if (btnCanvasAddCard) {
     btnCanvasAddCard.addEventListener('click', () => {
       if (!canvasModeActive) return;
       const cardItem = document.createElement('div');
       cardItem.className = 'canvas-item';
-      cardItem.style.background = 'rgba(255, 255, 255, 0.4)';
-      cardItem.style.border = '2px dashed ' + (cartazTextColor.value || '#2d3748');
+      cardItem.style.background = 'rgba(255, 255, 255, 0.6)';
+      cardItem.style.backdropFilter = 'blur(6px)';
+      cardItem.style.border = '2px dashed ' + (cartazTextColor ? cartazTextColor.value : '#2d3748');
       cardItem.style.borderRadius = '12px';
       cardItem.style.left = '20%';
       cardItem.style.top = '25%';
-      cardItem.style.width = '45%';
-      cardItem.style.height = '20%';
-      cardItem.style.padding = '15px';
-      cardItem.innerHTML = '<h3>Novo Card</h3><p>Edite este texto...</p>';
-      cardItem.style.fontFamily = cartazFontSelect.value || 'Fredoka';
+      cardItem.style.width = '50%';
+      cardItem.style.height = '22%';
+      cardItem.style.padding = '14px';
+      cardItem.style.zIndex = '35';
+      cardItem.innerHTML = '<h3>Novo Card</h3><p>Edite este texto aqui...</p>';
+      cardItem.style.fontFamily = cartazFontSelect ? cartazFontSelect.value : 'Fredoka';
       cardItem.setAttribute('contenteditable', 'true');
       
       const handle = document.createElement('div');
@@ -11191,19 +11094,21 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
+  // Toggle do Modo Canvas
   if (btnCanvasModeToggle) {
     btnCanvasModeToggle.addEventListener('click', () => {
       if (canvasModeActive) {
         exitCanvasMode();
       } else {
         if (cartazEditArea && cartazEditArea.style.display !== 'none') {
-          btnEditCartazToggle.click();
+          btnEditCartazToggle && btnEditCartazToggle.click();
         }
         enterCanvasMode();
       }
     });
   }
 
+  // Clique no fundo do cartaz desmarca item
   if (cartazPrintableArea) {
     cartazPrintableArea.addEventListener('click', (e) => {
       if (!canvasModeActive) return;
@@ -11211,11 +11116,13 @@ document.addEventListener('DOMContentLoaded', () => {
         if (selectedCanvasItem) {
           selectedCanvasItem.classList.remove('active-item');
           selectedCanvasItem = null;
+          updateToolbarForSelected();
         }
       }
     });
   }
 
+  // Abas de Assets do Canvas (Post-its, Stickers, Formas)
   function selectAssetTab(tab) {
     activeAssetTab = tab;
     [btnTabAssetPostits, btnTabAssetStickers, btnTabAssetFormas].forEach(btn => {
@@ -11223,8 +11130,8 @@ document.addEventListener('DOMContentLoaded', () => {
       const tabIdName = `btnTabAsset${tab.charAt(0).toUpperCase() + tab.slice(1)}s`;
       if (btn.id === tabIdName) {
         btn.classList.add('active');
-        btn.style.background = 'rgba(59, 130, 246, 0.1)';
-        btn.style.color = 'var(--text-primary)';
+        btn.style.background = 'rgba(59, 130, 246, 0.15)';
+        btn.style.color = '#3b82f6';
         btn.style.fontWeight = 'bold';
       } else {
         btn.classList.remove('active');
@@ -11246,9 +11153,10 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
+  // Carrega a galeria de assets
   async function loadCanvasAssets(tipo, busca = '') {
     if (!canvasAssetsContainer) return;
-    canvasAssetsContainer.innerHTML = '<div style="grid-column: 1/-1; text-align: center; color: var(--text-secondary); font-size: 0.8rem; padding: 20px;">Carregando...</div>';
+    canvasAssetsContainer.innerHTML = '<div style="grid-column: 1/-1; text-align: center; color: var(--text-secondary); font-size: 0.8rem; padding: 20px;">Carregando elementos...</div>';
     
     try {
       const res = await fetch(`/api/biblioteca-assets?tipo=${tipo}&busca=${encodeURIComponent(busca)}`, {
@@ -11258,7 +11166,7 @@ document.addEventListener('DOMContentLoaded', () => {
       canvasAssetsContainer.innerHTML = '';
       
       if (!data || data.length === 0) {
-        canvasAssetsContainer.innerHTML = '<div style="grid-column: 1/-1; text-align: center; color: var(--text-muted); font-size: 0.75rem; padding: 20px;">Nenhum item encontrado.</div>';
+        canvasAssetsContainer.innerHTML = '<div style="grid-column: 1/-1; text-align: center; color: var(--text-muted); font-size: 0.75rem; padding: 20px;">Nenhum elemento encontrado.</div>';
         return;
       }
       
@@ -11266,7 +11174,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const item = document.createElement('div');
         item.style.cursor = 'pointer';
         item.style.padding = '8px';
-        item.style.borderRadius = '6px';
+        item.style.borderRadius = '8px';
         item.style.background = 'var(--bg-tertiary)';
         item.style.border = '1px solid var(--border-light)';
         item.style.display = 'flex';
@@ -11274,13 +11182,13 @@ document.addEventListener('DOMContentLoaded', () => {
         item.style.alignItems = 'center';
         item.style.justifyContent = 'center';
         item.style.gap = '6px';
-        item.style.transition = 'all 0.2s';
+        item.style.transition = 'transform 0.15s ease, border-color 0.15s ease';
         item.style.aspectRatio = '1';
         item.title = asset.nome;
         
         item.addEventListener('mouseenter', () => {
-          item.style.transform = 'scale(1.05)';
-          item.style.borderColor = 'rgba(59, 130, 246, 0.5)';
+          item.style.transform = 'scale(1.06)';
+          item.style.borderColor = '#3b82f6';
         });
         item.addEventListener('mouseleave', () => {
           item.style.transform = 'scale(1)';
@@ -11294,21 +11202,21 @@ document.addEventListener('DOMContentLoaded', () => {
           previewHtml = `<img src="${asset.url}" style="width: 36px; height: 36px; object-fit: contain;">`;
         } else if (asset.tipo === 'forma') {
           if (asset.url === 'rect') {
-            previewHtml = `<div style="width: 36px; height: 24px; border: 2px solid var(--text-primary); border-radius: 2px;"></div>`;
+            previewHtml = `<div style="width: 36px; height: 24px; border: 2px solid var(--text-primary); border-radius: 3px;"></div>`;
           } else if (asset.url === 'square') {
-            previewHtml = `<div style="width: 30px; height: 30px; border: 2px solid var(--text-primary); border-radius: 2px;"></div>`;
+            previewHtml = `<div style="width: 28px; height: 28px; border: 2px solid var(--text-primary); border-radius: 3px;"></div>`;
           } else if (asset.url === 'circle') {
-            previewHtml = `<div style="width: 32px; height: 32px; border: 2px solid var(--text-primary); border-radius: 50%;"></div>`;
+            previewHtml = `<div style="width: 30px; height: 30px; border: 2px solid var(--text-primary); border-radius: 50%;"></div>`;
           } else if (asset.url === 'ellipse') {
             previewHtml = `<div style="width: 36px; height: 22px; border: 2px solid var(--text-primary); border-radius: 50%;"></div>`;
           } else if (asset.url === 'line') {
-            previewHtml = `<div style="width: 36px; height: 2px; background: var(--text-primary); margin: 15px 0;"></div>`;
+            previewHtml = `<div style="width: 36px; height: 3px; background: var(--text-primary); margin: 15px 0;"></div>`;
           } else if (asset.url === 'triangle') {
             previewHtml = `<div style="width: 32px; height: 32px; background: var(--text-primary); clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>`;
           } else if (asset.url === 'star') {
-            previewHtml = `<div style="font-size: 24px; color: var(--text-primary); display: flex; align-items: center; justify-content: center; height: 32px;">⭐</div>`;
+            previewHtml = `<div style="font-size: 24px;">⭐</div>`;
           } else if (asset.url === 'arrow') {
-            previewHtml = `<div style="font-size: 24px; color: var(--text-primary); display: flex; align-items: center; justify-content: center; height: 32px;">➡️</div>`;
+            previewHtml = `<div style="font-size: 24px;">➡️</div>`;
           }
         }
         
@@ -11326,22 +11234,27 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
+  // ADICIONA ASSET (POST-IT, STICKER OU FORMA) NO CANVAS COM OS NOVOS CONTROLES DE LINHA E PREENCHIMENTO
   function addAssetToCanvas(asset) {
     if (!canvasModeActive) return;
     
     const item = document.createElement('div');
     item.className = 'canvas-item';
     item.style.position = 'absolute';
-    item.style.left = '35%';
-    item.style.top = '35%';
+    item.style.left = '32%';
+    item.style.top = '30%';
     item.style.width = '30%';
-    item.style.height = '15%';
-    item.style.zIndex = '10';
+    item.style.height = '18%';
+    item.style.zIndex = '35'; // Sempre em cima do fundo e das camadas
     
+    const curBorderColor = canvasBorderColor ? canvasBorderColor.value : '#2d3748';
+    const curBorderWidth = canvasBorderWidth ? parseInt(canvasBorderWidth.value) || 3 : 3;
+    const curBg = canvasBgColorInput ? canvasBgColorInput.value : 'transparent';
+
     if (asset.tipo === 'postit') {
       item.style.background = asset.url;
       item.style.color = '#2d3748';
-      item.style.boxShadow = '3px 5px 10px rgba(0,0,0,0.15)';
+      item.style.boxShadow = '3px 5px 12px rgba(0,0,0,0.15)';
       item.style.borderRadius = '4px';
       const randomRot = Math.round(Math.random() * 8 - 4);
       item.style.transform = `rotate(${randomRot}deg)`;
@@ -11351,62 +11264,71 @@ document.addEventListener('DOMContentLoaded', () => {
       item.style.fontSize = '22px';
       item.innerHTML = 'Anotação...';
       item.setAttribute('contenteditable', 'true');
-      item.style.width = '35%';
+      item.style.width = '34%';
       item.style.height = '20%';
     } else if (asset.tipo === 'sticker') {
       item.style.background = 'transparent';
-      item.innerHTML = `<img src="${asset.url}" style="width: 100%; height: 100%; object-fit: contain; pointer-events: none;">`;
-      item.style.width = '20%';
-      item.style.height = '20%';
+      item.innerHTML = `<img src="${asset.url}" style="width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block;">`;
+      item.style.width = '22%';
+      item.style.height = '22%';
       item.setAttribute('data-rotation', '0');
     } else if (asset.tipo === 'forma') {
-      item.style.background = 'transparent';
-      item.style.border = '3px solid ' + (cartazTextColor.value || '#2d3748');
+      item.setAttribute('data-is-shape', 'true');
       item.setAttribute('data-rotation', '0');
+      item.style.background = 'transparent';
+      item.style.border = `${curBorderWidth}px solid ${curBorderColor}`;
+
       if (asset.url === 'rect') {
-        item.style.borderRadius = '4px';
+        item.style.borderRadius = '6px';
+        item.style.width = '36%';
+        item.style.height = '22%';
       } else if (asset.url === 'square') {
-        item.style.borderRadius = '4px';
-        item.style.width = '20%';
-        item.style.height = '20%';
-      } else if (asset.url === 'circle' || asset.url === 'ellipse') {
+        item.style.borderRadius = '6px';
+        item.style.width = '24%';
+        item.style.height = '24%';
+      } else if (asset.url === 'circle') {
         item.style.borderRadius = '50%';
-        item.style.width = '20%';
-        item.style.height = '20%';
+        item.style.width = '24%';
+        item.style.height = '24%';
+      } else if (asset.url === 'ellipse') {
+        item.style.borderRadius = '50%';
+        item.style.width = '35%';
+        item.style.height = '22%';
       } else if (asset.url === 'line') {
         item.style.border = 'none';
-        item.style.borderTop = '4px solid ' + (cartazTextColor.value || '#2d3748');
-        item.style.height = '10px';
+        item.style.borderTop = `${curBorderWidth}px solid ${curBorderColor}`;
+        item.style.height = '8px';
         item.style.width = '40%';
       } else if (asset.url === 'triangle') {
         item.style.border = 'none';
-        item.style.background = cartazTextColor.value || '#2d3748';
+        item.style.background = curBorderColor;
         item.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)';
-        item.style.width = '20%';
-        item.style.height = '20%';
+        item.style.width = '24%';
+        item.style.height = '24%';
       } else if (asset.url === 'star') {
         item.style.border = 'none';
-        item.style.color = cartazTextColor.value || '#2d3748';
+        item.style.color = curBorderColor;
         item.style.fontSize = '48px';
         item.style.display = 'flex';
         item.style.alignItems = 'center';
         item.style.justifyContent = 'center';
         item.innerHTML = '⭐';
-        item.style.width = '20%';
-        item.style.height = '20%';
+        item.style.width = '22%';
+        item.style.height = '22%';
       } else if (asset.url === 'arrow') {
         item.style.border = 'none';
-        item.style.color = cartazTextColor.value || '#2d3748';
+        item.style.color = curBorderColor;
         item.style.fontSize = '48px';
         item.style.display = 'flex';
         item.style.alignItems = 'center';
         item.style.justifyContent = 'center';
         item.innerHTML = '➡️';
-        item.style.width = '20%';
-        item.style.height = '20%';
+        item.style.width = '22%';
+        item.style.height = '22%';
       }
     }
     
+    // Alça de redimensionamento (Bolinha azul)
     const handle = document.createElement('div');
     handle.className = 'canvas-resize-handle';
     item.appendChild(handle);
@@ -11414,6 +11336,7 @@ document.addEventListener('DOMContentLoaded', () => {
     cartazPrintableArea.appendChild(item);
     setupCanvasItemEvents(item);
     item.click();
+    showToast(`Elemento adicionado! Use a barra superior para ajustar contorno, espessura e preenchimento.`, 'success');
   }
 });
 
diff --git a/public/index.html b/public/index.html
index c3b5df8..c1fb508 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2770,15 +2770,15 @@
             </div>
 
             <!-- Painel de Controle do Canvas (Apenas visível no Modo Canvas) -->
-            <div id="canvasControlPanel" style="display: none; background: var(--bg-tertiary); border: 1px solid var(--border-light); padding: 10px 14px; border-radius: 10px; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px;">
-              <button id="btnCanvasAddText" class="btn-save-settings" style="background: #10a37f; color: white; border: none; padding: 5px 12px; font-size: 0.75rem; font-weight: 600; border-radius: 6px; cursor: pointer;">➕ Texto</button>
-              <button id="btnCanvasAddCard" class="btn-save-settings" style="background: #a855f7; color: white; border: none; padding: 5px 12px; font-size: 0.75rem; font-weight: 600; border-radius: 6px; cursor: pointer;">➕ Card</button>
+            <div id="canvasControlPanel" style="display: none; background: var(--bg-tertiary); border: 1px solid var(--border-light); padding: 8px 12px; border-radius: 10px; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgba(0,0,0,0.3);">
+              <button id="btnCanvasAddText" class="btn-save-settings" style="background: #10a37f; color: white; border: none; padding: 5px 11px; font-size: 0.74rem; font-weight: 600; border-radius: 6px; cursor: pointer;">➕ Texto</button>
+              <button id="btnCanvasAddCard" class="btn-save-settings" style="background: #a855f7; color: white; border: none; padding: 5px 11px; font-size: 0.74rem; font-weight: 600; border-radius: 6px; cursor: pointer;">➕ Card</button>
               
-              <div style="height: 20px; width: 1px; background: var(--border-light);"></div>
+              <div style="height: 18px; width: 1px; background: var(--border-light);"></div>
               
               <!-- Controles do Item Selecionado -->
-              <span style="font-size: 0.75rem; color: var(--text-secondary);">Item:</span>
-              <select id="canvasFontFamily" class="obs-select" style="padding: 3px 6px; font-size: 0.75rem; min-width: 90px; margin: 0;">
+              <span style="font-size: 0.73rem; color: var(--text-secondary);">Item:</span>
+              <select id="canvasFontFamily" class="obs-select" style="padding: 2px 6px; font-size: 0.74rem; min-width: 85px; margin: 0;">
                 <option value="Fredoka">Fredoka</option>
                 <option value="Outfit">Outfit</option>
                 <option value="Caveat">Caveat</option>
@@ -2786,32 +2786,51 @@
                 <option value="Arial">Arial</option>
               </select>
               
-              <input type="number" id="canvasFontSize" class="obs-input" style="width: 55px; padding: 3px 6px; font-size: 0.75rem; margin: 0;" min="8" max="72" value="16" title="Tamanho da fonte (px)">
+              <input type="number" id="canvasFontSize" class="obs-input" style="width: 50px; padding: 2px 5px; font-size: 0.74rem; margin: 0;" min="8" max="72" value="16" title="Tamanho da fonte (px)">
               
+              <!-- 1. Cor do Texto / Ícone -->
               <div style="display: flex; align-items: center; gap: 4px;">
-                <label style="font-size: 0.72rem; color: var(--text-secondary);">Cor:</label>
-                <input type="color" id="canvasTextColor" style="width: 24px; height: 24px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;">
+                <label style="font-size: 0.7rem; color: var(--text-secondary);">Texto:</label>
+                <input type="color" id="canvasTextColor" style="width: 22px; height: 22px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;" title="Cor do texto ou ícone">
+              </div>
+
+              <!-- 2. Cor da Linha de Contorno (Solicitado pelo usuário) -->
+              <div style="display: flex; align-items: center; gap: 4px;">
+                <label style="font-size: 0.7rem; color: var(--text-secondary);" title="Cor da linha de contorno">Linha:</label>
+                <input type="color" id="canvasBorderColor" value="#2d3748" style="width: 22px; height: 22px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;" title="Cor da linha / contorno">
+              </div>
+
+              <!-- 3. Espessura da Linha (Alargar / Afinar, solicitado pelo usuário) -->
+              <div style="display: flex; align-items: center; gap: 4px;">
+                <label style="font-size: 0.7rem; color: var(--text-secondary);" title="Alargar ou afinar as linhas">Espessura:</label>
+                <input type="number" id="canvasBorderWidth" class="obs-input" style="width: 44px; padding: 2px 4px; font-size: 0.74rem; margin: 0;" min="0" max="40" value="3" title="Espessura da linha em pixels">
+              </div>
+
+              <!-- 4. Preenchimento de Cor (Solicitado pelo usuário) -->
+              <div style="display: flex; align-items: center; gap: 4px;">
+                <label style="font-size: 0.7rem; color: var(--text-secondary);" title="Preencher com cor">Preencher:</label>
+                <input type="color" id="canvasBgColor" value="#ffffff" style="width: 22px; height: 22px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;" title="Cor de preenchimento">
+                <button type="button" id="btnCanvasBgTransparent" class="btn-save-settings" style="background: transparent; border: 1px dashed var(--border-light); color: var(--text-secondary); padding: 2px 6px; font-size: 0.66rem; border-radius: 4px; cursor: pointer;" title="Tornar o preenchimento transparente (vazado)">🚫 Sem Cor</button>
               </div>
 
               <div style="display: flex; align-items: center; gap: 4px;">
-                <label style="font-size: 0.72rem; color: var(--text-secondary);">Fundo:</label>
-                <input type="color" id="canvasBgColor" style="width: 24px; height: 24px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;">
+                <label style="font-size: 0.7rem; color: var(--text-secondary);" title="Rotação">Giro:</label>
+                <input type="range" id="canvasRotation" min="-180" max="180" value="0" style="width: 50px; height: 4px; cursor: pointer; margin: 0;">
               </div>
 
               <div style="display: flex; align-items: center; gap: 4px;">
-                <label style="font-size: 0.72rem; color: var(--text-secondary);" title="Rotação">Giro:</label>
-                <input type="range" id="canvasRotation" min="-180" max="180" value="0" style="width: 60px; height: 4px; cursor: pointer; margin: 0;">
+                <label style="font-size: 0.7rem; color: var(--text-secondary);" title="Opacidade">Opac.:</label>
+                <input type="range" id="canvasOpacity" min="10" max="100" value="100" style="width: 50px; height: 4px; cursor: pointer; margin: 0;">
               </div>
 
-              <div style="display: flex; align-items: center; gap: 4px;">
-                <label style="font-size: 0.72rem; color: var(--text-secondary);" title="Opacidade">Opac.:</label>
-                <input type="range" id="canvasOpacity" min="10" max="100" value="100" style="width: 60px; height: 4px; cursor: pointer; margin: 0;">
-              </div>
-
-              <div style="display: flex; gap: 4px; align-items: center;">
-                <button id="btnCanvasZIndexUp" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 3px 7px; font-size: 0.7rem; cursor: pointer;" title="Trazer para Frente">🔺</button>
-                <button id="btnCanvasZIndexDown" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 3px 7px; font-size: 0.7rem; cursor: pointer;" title="Enviar para Trás">🔻</button>
-                <button id="btnCanvasDelete" class="btn-save-settings" style="background: #ef4444; color: white; border: none; padding: 3px 8px; font-size: 0.7rem; font-weight: bold; border-radius: 4px; cursor: pointer;" title="Excluir Elemento">🗑️</button>
+              <!-- CONTROLE AVANÇADO DE CAMADAS / PROFUNDIDADE (Z-INDEX) -->
+              <div style="display: flex; gap: 3px; align-items: center; background: rgba(0,0,0,0.25); padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08);">
+                <span id="canvasItemZIndexBadge" style="font-size: 0.68rem; font-weight: 700; color: #a78bfa; padding: 1px 4px;" title="Ordem da camada do elemento">Camada: --</span>
+                <button id="btnCanvasZIndexFront" class="btn-save-settings" style="background: rgba(139,92,246,0.25); border: 1px solid rgba(139,92,246,0.4); color: #c4b5fd; padding: 2px 6px; font-size: 0.68rem; cursor: pointer; border-radius: 4px;" title="Trazer para Frente de Tudo (Topo)">⏫</button>
+                <button id="btnCanvasZIndexUp" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 2px 6px; font-size: 0.68rem; cursor: pointer; border-radius: 4px;" title="Avançar 1 Nível">🔺</button>
+                <button id="btnCanvasZIndexDown" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 2px 6px; font-size: 0.68rem; cursor: pointer; border-radius: 4px;" title="Recuar 1 Nível">🔻</button>
+                <button id="btnCanvasZIndexBack" class="btn-save-settings" style="background: rgba(100,116,139,0.25); border: 1px solid rgba(100,116,139,0.4); color: #94a3b8; padding: 2px 6px; font-size: 0.68rem; cursor: pointer; border-radius: 4px;" title="Enviar para Trás de Tudo (Fundo)">⏬</button>
+                <button id="btnCanvasDelete" class="btn-save-settings" style="background: #ef4444; color: white; border: none; padding: 2px 7px; font-size: 0.68rem; font-weight: bold; border-radius: 4px; cursor: pointer; margin-left: 2px;" title="Excluir Elemento">🗑️</button>
               </div>
             </div>
 
diff --git a/public/style.css b/public/style.css
index 9e20002..22fd610 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3988,24 +3988,41 @@ code {
 }
 
 .canvas-item.active-item {
-  border: 2.5px solid #3b82f6 !important;
-  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
-  z-index: 1000;
+  outline: 2.5px solid #3b82f6 !important;
+  outline-offset: 1px;
+  box-shadow: 0 0 16px rgba(59, 130, 246, 0.45) !important;
 }
 
 /* Alça de redimensionamento do card */
 .canvas-resize-handle {
   position: absolute;
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   background: #3b82f6;
-  border: 2px solid white;
+  border: 2.5px solid #ffffff;
   border-radius: 50%;
-  bottom: -7px;
-  right: -7px;
-  cursor: se-resize;
-  z-index: 10;
+  bottom: -8px;
+  right: -8px;
+  cursor: nwse-resize;
+  z-index: 9999;
   display: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  touch-action: none;
+  transition: transform 0.15s ease, background-color 0.15s ease;
+}
+
+/* Área de toque expandida para facilitar o clique em telas de toque e mouse */
+.canvas-resize-handle::after {
+  content: '';
+  position: absolute;
+  inset: -10px;
+  border-radius: 50%;
+}
+
+.canvas-resize-handle:hover,
+.canvas-resize-handle:active {
+  transform: scale(1.35);
+  background: #10b981;
 }
 
 .canvas-item.active-item .canvas-resize-handle {
@@ -4019,6 +4036,7 @@ code {
   }
   .canvas-item {
     border: none !important;
+    outline: none !important;
     box-shadow: none !important;
     cursor: default !important;
   }
@@ -4043,13 +4061,14 @@ code {
 }
 
 .canvas-scene-layer:hover {
-  border-color: rgba(139, 92, 246, 0.8);
+  outline: 1.5px dashed rgba(139, 92, 246, 0.7);
   box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
 }
 
 .canvas-scene-layer.active-item {
-  border: 2px dashed #8b5cf6 !important;
-  box-shadow: 0 0 14px rgba(139, 92, 246, 0.4);
+  outline: 2.5px dashed #8b5cf6 !important;
+  outline-offset: 1px;
+  box-shadow: 0 0 16px rgba(139, 92, 246, 0.5) !important;
 }
 
 /* Animação dos dots de loading */