/* ============================================================
   MOLDURA APP — ferramenta de moldura de apoio (3 opções)
   Estilo próprio, todo escopado dentro de .moldura-app para não
   colidir com o restante do site. Usa as variáveis de cor do
   style.css (--green-mid, --signal, --amber...) para acompanhar
   automaticamente a paleta oficial da campanha.
   ============================================================ */

.moldura-app{
  --ma-bg-card: #ffffff;
  --ma-bg-quadro: #f1f5f3;
  --ma-texto: #111827;
  --ma-subtexto: #6b7280;
  --ma-borda: #e5e7eb;
  --ma-verde: var(--green-mid);
  --ma-verde-hover: var(--green-deep);
  --ma-alerta-bg: #fef9c3;
  --ma-alerta-texto: #854d0e;
  --ma-radius-lg: 20px;
  --ma-radius-md: 12px;
  --ma-radius-sm: 8px;
  --ma-sombra: 0 10px 34px -8px rgba(0,0,0,.16);

  position: relative;
  border-radius: var(--radius-l);
  background: var(--ma-bg-quadro);
  padding: 28px 22px 8px;
  overflow: hidden;
}

.moldura-app::before{
  content:'';
  position:absolute; top:0; left:0; width:100%; height:5px;
  background: repeating-linear-gradient(90deg, var(--green-mid) 0 22px, var(--signal) 22px 44px);
}

/* alerta de boas-vindas */
.ma-banner{
  width:100%; box-sizing:border-box;
  background: var(--green-mid); color:#fff;
  font-size:13px; font-weight:600;
  padding:10px 18px; border-radius: var(--ma-radius-sm);
  text-align:center; display:none; align-items:center; justify-content:center; gap:12px;
  margin-bottom: 16px;
  animation: ma-slide .35s ease;
}
.ma-banner.visivel{ display:flex; }
.ma-banner.saindo{ animation: ma-fade .5s ease forwards; }
.ma-banner-fechar{ background:none; border:none; color:#fff; font-size:18px; line-height:1; cursor:pointer; padding:0 4px; }
@keyframes ma-slide{ from{ transform: translateY(-12px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes ma-fade{ from{ opacity:1; max-height:60px; } to{ opacity:0; max-height:0; padding:0; margin:0; } }

/* barra superior: alto contraste + contagem regressiva */
.ma-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom: 20px;
}
.ma-btn-contraste{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; color: var(--ma-subtexto);
  background:transparent; border:1px solid var(--ma-borda);
  padding:5px 12px; border-radius:999px; cursor:pointer;
}
.ma-btn-contraste:hover, .ma-btn-contraste[aria-pressed="true"]{ border-color: var(--ma-verde); color: var(--ma-verde); }
.ma-contador{ display:flex; align-items:center; gap:10px; }
.ma-contador-rotulo{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--ma-subtexto); }
.ma-contador-numeros{ display:flex; gap:6px; }
.ma-contador-item{ display:flex; flex-direction:column; align-items:center; background: var(--ma-bg-card); border:1px solid var(--ma-borda); border-radius:7px; min-width:44px; padding:5px 4px; }
.ma-contador-item strong{ font-size:15px; font-weight:800; color: var(--ma-verde); line-height:1; }
.ma-contador-item span{ font-size:8.5px; color: var(--ma-subtexto); text-transform:uppercase; letter-spacing:.04em; }

/* grade principal: palco (canvas) + painel (upload/ações) */
.ma-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items:start;
  padding-bottom: 28px;
}
@media (max-width: 860px){ .ma-grid{ grid-template-columns: 1fr; gap:22px; } }

.palco{
  position:relative;
  background: var(--ma-bg-card);
  border: 1px solid var(--ma-borda);
  border-radius: var(--ma-radius-lg);
  padding: 20px;
  box-shadow: var(--ma-sombra);
}

.seletor-moldura{ margin-bottom:16px; }
.seletor-moldura-titulo{ font-size:11px; font-weight:700; color: var(--ma-subtexto); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
.seletor-moldura-opcoes{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.opcao-moldura{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 6px 10px; border-radius: var(--ma-radius-md);
  border:2px solid var(--ma-borda); background: var(--ma-bg-quadro);
  cursor:pointer; transition: border-color .2s, background .2s;
}
.opcao-moldura:hover{ border-color: var(--ma-verde-hover); }
.opcao-moldura.selecionada{ border-color: var(--ma-verde); background: rgba(0,0,0,.06); }
.opcao-moldura-miniatura{ position:relative; width:100%; aspect-ratio:1/1; border-radius: var(--ma-radius-sm); overflow:hidden; background:#cbd5e1; flex-shrink:0; }
.opcao-moldura-miniatura canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.opcao-moldura-rotulo{ font-size:11px; font-weight:600; color: var(--ma-texto); text-align:center; line-height:1.3; }
.opcao-moldura.selecionada .opcao-moldura-rotulo{ color: var(--ma-verde); }
@media (max-width:420px){ .seletor-moldura-opcoes{ gap:8px; } .opcao-moldura-rotulo{ font-size:9.5px; } }

.quadro{
  position:relative; width:100%; aspect-ratio:1/1;
  border-radius: var(--ma-radius-md); overflow:hidden;
  background: var(--ma-bg-quadro); touch-action: pan-y; cursor:grab;
}
.quadro.tem-foto{ touch-action:none; }
.quadro.arrastando{ cursor:grabbing; }
.quadro:focus-visible{ outline: 3px solid var(--ma-verde); outline-offset:2px; }
.quadro canvas{ position:absolute; inset:0; width:100%; height:100%; }

.placeholder-vazio{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:24px; color: var(--ma-subtexto); pointer-events:none; }
.placeholder-vazio svg{ opacity:.4; margin-bottom:4px; }
.placeholder-vazio strong{ color: var(--ma-texto); font-size:14px; font-weight:600; }
.placeholder-vazio span{ font-size:12px; }

.carregando-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(248,250,249,.92); color: var(--ma-texto); font-size:13px; font-weight:600; z-index:2; }
.spinner{ width:32px; height:32px; border-radius:50%; border:3px solid var(--ma-borda); border-top-color: var(--ma-verde); animation: ma-girar .8s linear infinite; }
@keyframes ma-girar{ to{ transform:rotate(360deg); } }

.dica{ margin-top:12px; font-size:12.5px; color: var(--ma-subtexto); text-align:center; display:flex; align-items:center; justify-content:center; gap:6px; }
.dica svg{ flex-shrink:0; opacity:.7; }
.dica-teclado{ margin-top:4px; font-size:11px; opacity:.8; }
.dica-teclado kbd{ display:inline-block; padding:1px 6px; border-radius:4px; border:1px solid var(--ma-borda); background: var(--ma-bg-quadro); font-family:inherit; font-size:11px; }

.controles{ margin-top:20px; display:flex; flex-direction:column; gap:16px; }
.controle-bloco{ display:flex; flex-direction:column; gap:8px; }
.controle-cabecalho{ display:flex; align-items:center; justify-content:space-between; }
.controle-cabecalho label{ font-size:11px; font-weight:700; color: var(--ma-subtexto); text-transform:uppercase; letter-spacing:.05em; }
.controle-cabecalho span{ font-size:12px; font-weight:700; color: var(--ma-verde); }
.zoom-row{ display:flex; align-items:center; gap:10px; }
.btn-icone{ flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1px solid var(--ma-borda); background:#fff; color: var(--ma-texto); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.btn-icone:hover{ border-color: var(--ma-verde); color: var(--ma-verde); }
.rotacao-row{ display:flex; gap:8px; flex-wrap:wrap; }
.btn-chip{ padding:7px 12px; border-radius:999px; border:1px solid var(--ma-borda); background:#fff; color: var(--ma-texto); font-size:12px; font-weight:600; cursor:pointer; }
.btn-chip:hover{ border-color: var(--ma-verde); color: var(--ma-verde); }
.btn-chip.ativo{ border-color: var(--ma-verde); background: rgba(0,0,0,.1); color: var(--ma-verde); }

.moldura-app input[type="range"]{ -webkit-appearance:none; width:100%; height:4px; border-radius:2px; background: var(--ma-borda); outline:none; }
.moldura-app input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background: var(--ma-verde); cursor:pointer; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.moldura-app input[type="range"]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background: var(--ma-verde); cursor:pointer; border:2px solid #fff; }

/* painel de upload e ações */
.painel{ background: var(--ma-bg-card); border:1px solid var(--ma-borda); border-radius: var(--ma-radius-lg); padding:24px; box-shadow: var(--ma-sombra); }
.painel h2{ font-family: var(--f-display); font-size:19px; font-weight:700; margin-bottom:4px; color: var(--ma-texto); }
.painel > p.descricao{ color: var(--ma-subtexto); font-size:13px; margin-bottom:20px; }

.upload-box{ border:2px dashed var(--ma-borda); border-radius: var(--ma-radius-md); padding:26px 20px; text-align:center; background: var(--ma-bg-quadro); transition: all .2s ease; }
.upload-box.arrastando-arquivo{ border-color: var(--ma-verde); background: rgba(0,0,0,.04); }
.upload-box svg{ color: var(--ma-verde); margin-bottom:8px; }
.upload-box strong{ display:block; font-size:14px; color: var(--ma-texto); margin-bottom:2px; }
.upload-box span{ font-size:12px; color: var(--ma-subtexto); }
.btn-escolher{ display:inline-block; margin-top:14px; padding:8px 20px; border-radius: var(--ma-radius-sm); background: var(--ma-texto); border:none; color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
.btn-escolher:hover{ background:#000; }
.moldura-app input[type="file"]{ display:none; }

.mensagem{ display:none; margin-top:14px; padding:10px 14px; border-radius: var(--ma-radius-sm); font-size:13px; line-height:1.4; }
.mensagem.visivel{ display:block; }
.mensagem.aviso{ background: var(--ma-alerta-bg); color: var(--ma-alerta-texto); }
.mensagem.erro{ background:#fee2e2; color:#991b1b; }
.mensagem.sucesso{ background: rgba(0,0,0,.06); color: var(--ma-texto); font-weight:600; border:1px solid rgba(0,0,0,.14); }

.campo-nome{ margin-top:20px; }
.campo-nome label{ display:block; font-size:11px; font-weight:700; color: var(--ma-subtexto); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em; }
.campo-nome input{ width:100%; padding:10px 12px; border-radius: var(--ma-radius-sm); border:1px solid var(--ma-borda); background:#fff; color: var(--ma-texto); font-size:14px; outline:none; }
.campo-nome input:focus{ border-color: var(--ma-verde); }

.ma-checkbox{ margin-top:16px; display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.ma-checkbox input[type="checkbox"]{ margin-top:2px; width:16px; height:16px; flex-shrink:0; accent-color: var(--ma-verde); cursor:pointer; }
.ma-checkbox span{ font-size:12.5px; color: var(--ma-subtexto); line-height:1.5; }
.ma-checkbox a{ color: var(--ma-verde); font-weight:600; text-decoration:underline; }

.ma-acoes{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.btn-primario{ width:100%; padding:12px 18px; border-radius: var(--ma-radius-sm); border:none; background: var(--ma-verde); color:#fff; font-size:15px; font-weight:700; cursor:pointer; transition: background .2s; }
.btn-primario:hover:not(:disabled){ background: var(--ma-verde-hover); }
.btn-primario:disabled{ background: var(--ma-borda); color: var(--ma-subtexto); cursor:not-allowed; }
.btn-whatsapp{ width:100%; padding:11px 18px; border-radius: var(--ma-radius-sm); border:1px solid #25d366; background: rgba(37,211,102,.08); color:#128c7e; font-size:14px; font-weight:600; cursor:pointer; display:none; align-items:center; justify-content:center; gap:8px; }
.btn-secundario{ width:100%; padding:10px 18px; border-radius: var(--ma-radius-sm); border:1px solid var(--ma-borda); background:transparent; color: var(--ma-subtexto); font-size:13px; font-weight:600; cursor:pointer; }
.aviso-config{ margin-top:20px; padding:10px 12px; border-radius: var(--ma-radius-sm); background: var(--ma-alerta-bg); color: var(--ma-alerta-texto); font-size:12px; }

.contador-downloads{ margin-top:12px; text-align:center; font-size:12px; color: var(--ma-subtexto); }
.contador-downloads strong{ color: var(--ma-verde); }

.cartao-legenda{ margin-top:20px; padding:16px; border-radius: var(--ma-radius-md); background: var(--ma-bg-quadro); border:1px solid var(--ma-borda); }
.cartao-legenda-titulo{ font-size:11px; font-weight:700; color: var(--ma-subtexto); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.cartao-legenda-texto{ font-size:13.5px; color: var(--ma-texto); line-height:1.5; margin-bottom:12px; white-space:pre-wrap; }
.cartao-legenda .btn-secundario{ width:auto; padding:8px 16px; }
.cartao-legenda .btn-secundario.copiado{ border-color: var(--ma-verde); color: var(--ma-verde); }

/* alto contraste */
body.alto-contraste .moldura-app{ --ma-bg-card:#000; --ma-bg-quadro:#000; --ma-texto:#fff; --ma-subtexto:#fff; --ma-borda:#fff; --ma-verde:#00ff66; --ma-verde-hover:#00cc52; }
body.alto-contraste .moldura-app *{ text-shadow:none !important; box-shadow:none !important; }
body.alto-contraste .btn-escolher, body.alto-contraste .btn-primario{ background:#ff0; color:#000; border:2px solid #fff; }

/* tela comemorativa + confete */
.tela-sucesso{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background: rgba(10,10,10,.72); padding:20px; }
.tela-sucesso.visivel{ display:flex; }
.confete-canvas{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; }
.tela-sucesso-cartao{ position:relative; z-index:1; background:#fff; border-radius: 20px; padding:32px 28px; text-align:center; max-width:320px; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.tela-sucesso-cartao h2{ font-family: var(--f-display); font-size:22px; margin-bottom:8px; color:#111; }
.tela-sucesso-cartao p{ font-size:14px; color:#6b7280; margin-bottom:20px; }
.tela-sucesso-cartao .btn-primario{ width:auto; padding:10px 24px; }