/* criativo.css — Estilos dos recursos criativos: lousa, carimbos, quebra-cabeça. */

.dc-criativo-barra { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dc-criativo-palco {
  border: 2px solid var(--dc-borda); border-radius: var(--dc-raio-medio);
  background: #fff; touch-action: none; max-width: 100%; height: auto; display: block;
}
.dc-criativo-palco-wrap { text-align: center; }

/* Paleta de cores */
.dc-paleta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.dc-cor {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--dc-borda); cursor: pointer; padding: 0;
}
.dc-cor.ativa { box-shadow: 0 0 0 3px var(--dc-azul); transform: scale(1.1); }
.dc-cor-personalizada { width: 34px; height: 30px; padding: 0; border: none; background: none; cursor: pointer; }

/* Botões de ferramenta (pincel, borracha, tamanho) */
.dc-ferramenta {
  border: 1.5px solid var(--dc-borda); background: #fff; border-radius: var(--dc-raio-medio);
  padding: .4rem .7rem; cursor: pointer; font-size: .95rem; color: var(--dc-texto);
}
.dc-ferramenta.ativa { background: var(--dc-azul); color: #fff; border-color: var(--dc-azul); }
.dc-tamanho-ponto { display: inline-block; border-radius: 50%; background: currentColor; vertical-align: middle; }

/* Bandeja de carimbos */
.dc-carimbos { display: flex; flex-wrap: wrap; gap: .4rem; }
.dc-carimbo {
  width: 48px; height: 48px; font-size: 26px; line-height: 1; display: flex;
  align-items: center; justify-content: center; border: 1.5px solid var(--dc-borda);
  border-radius: var(--dc-raio-medio); background: #fff; cursor: pointer;
}
.dc-carimbo.ativa { border-color: var(--dc-azul); box-shadow: 0 0 0 2px var(--dc-azul); }

/* Botão "Fixar na folha": aparece só quando há carimbos e chama atenção
 * (verde, maior, pulsando) — pensado para crianças que ainda não leem. */
.dc-btn-fixar {
  border: 0; border-radius: var(--dc-raio-medio); cursor: pointer;
  background: var(--dc-verde); color: #fff; font-weight: 700; font-size: 1.05rem;
  padding: .55rem 1.1rem; display: inline-flex; align-items: center; gap: .45rem;
  box-shadow: var(--dc-sombra-card); animation: dc-fixar-pulse 1.3s ease-in-out infinite;
}
.dc-btn-fixar i { font-size: 1.35rem; }
.dc-btn-fixar:hover { filter: brightness(1.05); }
@keyframes dc-fixar-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(68,182,120,.55); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(68,182,120,0); }
}
@media (prefers-reduced-motion: reduce) { .dc-btn-fixar { animation: none; } }

/* Quebra-cabeça */
.dc-qc-area { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: flex-start; }
.dc-qc-tabuleiro, .dc-qc-pecas {
  position: relative; border: 2px dashed var(--dc-borda); border-radius: var(--dc-raio-medio);
  background: #fbfcff;
}
.dc-qc-pecas { border-style: solid; background: #f2f6ff; }
.dc-qc-peca { position: absolute; cursor: grab; touch-action: none; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.dc-qc-peca.arrastando { cursor: grabbing; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.dc-qc-peca.encaixada { box-shadow: none; cursor: default; }
.dc-qc-sucesso { color: var(--dc-verde); font-weight: 800; }

/* Correção: .card (Bootstrap) força flex-direction:column. Forçar linha nas barras. */
.dc-paleta, .dc-criativo-barra, .dc-carimbos { flex-direction: row; }
.dc-criativo-palco { margin-left: auto; margin-right: auto; }

/* Botões de ferramenta não devem encolher nem quebrar o texto. */
.dc-ferramenta { white-space: nowrap; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; }
.dc-criativo-barra { row-gap: .5rem; }

/* Garante que os botões nunca sejam cortados: largura mínima = conteúdo. */
.dc-criativo-barra .dc-ferramenta {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* Canvas ocupa toda a largura disponível (igual às barras acima). */
.dc-criativo-palco { width: 100%; }

/* Visual mais suave das barras de cores e ferramentas (sem a borda dura do card). */
.dc-paleta.card, .dc-criativo-barra.card, .dc-carimbos.card {
  border: none !important;
  background: #eef3ff;
  border-radius: 14px;
  box-shadow: none;
  padding: .6rem .8rem !important;
}

/* Miniaturas dos favoritos usados como carimbo */
.dc-carimbo-img { padding: 3px; }
.dc-carimbo-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Quebra-cabeça: modelo + tabuleiro lado a lado, peças numa bandeja embaixo */
.dc-qc-topo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: center; margin-bottom: 1rem; }
.dc-qc-legenda { font-size: .85rem; color: var(--dc-texto-suave); margin-bottom: .3rem; text-align: center; font-weight: 700; }
.dc-qc-modelo img { display: block; border: 2px solid var(--dc-borda); border-radius: 8px; }
.dc-qc-tabuleiro { position: relative; }
.dc-qc-bandeja { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; padding: 12px; background: #eef3ff; border-radius: 12px; min-height: 90px; }
.dc-qc-peca { position: static; cursor: grab; touch-action: none; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.12); background: #fff; }
.dc-qc-peca canvas { display: block; border-radius: 2px; }
.dc-qc-peca.arrastando { cursor: grabbing; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.dc-qc-peca.encaixada { box-shadow: none; cursor: default; }
.dc-qc-ph { background: transparent; }