/* Gerenciar: a tela de montagem do convite.
   Cara de ferramenta, neutra de propósito: quem tem cor é o convite ao lado. */

.cvtg, .cvtg-portao{
  --fundo:#F3F1EC; --painel:#FFFFFF; --linha:#E4E0D8; --linha-forte:#CFC9BE;
  --tinta:#1F2328; --suave:#5E6670; --fraco:#8A9099;
  --azul:#2563A6; --azul-claro:#E8F0FA; --verde:#23784A; --verde-claro:#E2F3E8;
  --perigo:#B3261E; --perigo-claro:#FDECEA; --ambar:#8A5A00; --ambar-claro:#FFF4D6;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-family:var(--sans); font-size:15px; line-height:1.45; color:var(--tinta);
  -webkit-font-smoothing:antialiased;
}
.cvtg *, .cvtg-portao *{box-sizing:border-box}
.cvtg h1, .cvtg h2, .cvtg h3, .cvtg p, .cvtg-portao h1, .cvtg-portao p{margin:0}
.cvtg ul{list-style:none; margin:0; padding:0}
.cvtg a{color:inherit; text-decoration:none}
.cvtg button, .cvtg input, .cvtg select, .cvtg textarea, .cvtg-portao button, .cvtg-portao input{font-family:inherit; font-size:inherit; letter-spacing:normal; text-transform:none}
.cvtg button{cursor:pointer}
.cvtg [hidden], .cvtg-portao [hidden]{display:none !important}
body.cvt-app:has(.cvtg){background:#F3F1EC !important; overflow:hidden}

.cvtg{display:flex; flex-direction:column; height:100vh; height:100dvh; background:var(--fundo)}

/* ---------- topo ---------- */
.cvtg-topo{
  flex:none; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:10px 18px; background:var(--painel); border-bottom:1px solid var(--linha);
}
.cvtg-marca p{font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fraco)}
.cvtg-marca h1{font-size:18px; font-weight:750; letter-spacing:-.01em}
.cvtg-segmento{display:flex; padding:3px; border-radius:10px; background:var(--fundo); margin-left:auto}
.cvtg-segmento button{
  display:inline-flex; align-items:center; gap:6px; border:0; background:transparent;
  padding:7px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--suave);
}
.cvtg-segmento button[aria-pressed="true"]{background:var(--painel); color:var(--tinta); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.cvtg-links{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.cvtg-links a{padding:7px 10px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--suave)}
.cvtg-links a:hover{background:var(--fundo); color:var(--tinta)}
.cvtg-links a:first-child{color:var(--azul)}
.cvtg-links .cvtg-sair{color:var(--fraco)}

/* ---------- corpo ---------- */
.cvtg-corpo{flex:1; min-height:0; display:flex}
.cvtg-palco{flex:1; min-width:0; display:flex; flex-direction:column; padding:12px 18px 18px}
.cvtg-dica{flex:none; font-size:13px; color:var(--suave); margin-bottom:8px}
.cvtg-moldura{
  position:relative; flex:1; min-height:0; margin:0 auto; width:100%;
  border-radius:14px; overflow:hidden; background:#FFFFFF;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.10);
  transition:max-width .25s ease;
}
.cvtg[data-aparelho="celular"] .cvtg-moldura{max-width:390px; border-radius:30px; box-shadow:0 0 0 10px #1F2328, 0 18px 40px rgba(0,0,0,.25)}
.cvtg-quadro{position:absolute; inset:0; width:100%; height:100%; border:0; background:#FFFFFF; visibility:hidden}
.cvtg-quadro.cvtg-quadro-ativo{visibility:visible}
.cvtg-atualizando{
  position:absolute; top:10px; right:10px; z-index:2; padding:5px 11px; border-radius:99px;
  background:rgba(31,35,40,.82); color:#FFFFFF; font-size:12px; font-weight:600;
}

/* ---------- painel ---------- */
.cvtg-painel{
  flex:none; width:430px; display:flex; flex-direction:column; min-height:0;
  background:var(--painel); border-left:1px solid var(--linha);
}
.cvtg-form, .cvtg-painel > .cvtg-secao{flex:1; min-height:0; overflow:auto; padding:18px 20px 24px}
.cvtg-form:has(> .cvtg-inicio:not([hidden])), .cvtg-form:has(> .cvtg-secao:not([hidden])){display:block}
.cvtg-painel > .cvtg-secao[hidden]{display:none}
.cvtg-form:not(:has(> :not([hidden]):not(input))){display:none}

.cvtg-inicio h2, .cvtg-secao-topo h2{font-size:20px; font-weight:750; letter-spacing:-.01em}
.cvtg-apoio, .cvtg-secao-topo p{margin-top:4px; color:var(--suave)}
.cvtg-subtitulo{margin:22px 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fraco)}
.cvtg-partes{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.cvtg-subtitulo + .cvtg-partes{margin-top:0}
.cvtg-parte{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  padding:12px 14px; border-radius:12px; border:1px solid var(--linha); background:var(--painel);
}
.cvtg-parte:hover{border-color:var(--azul); background:var(--azul-claro)}
.cvtg-parte span{flex:1; min-width:0}
.cvtg-parte strong{display:block; font-size:15px; font-weight:700}
.cvtg-parte small{display:block; margin-top:1px; font-size:13px; color:var(--suave)}
.cvtg-parte i{font-style:normal; font-size:22px; color:var(--fraco)}
.cvtg-conta{min-width:26px; padding:2px 8px; border-radius:99px; background:var(--fundo); font-size:12.5px; text-align:center; color:var(--suave)}

.cvtg-secao-topo{margin-bottom:16px}
.cvtg-voltar{border:0; background:none; padding:4px 0; margin-bottom:6px; color:var(--azul); font-weight:650; font-size:14px}

/* ---------- campos ---------- */
.cvtg-campos{display:flex; flex-wrap:wrap; gap:16px 14px}
.cvtg-campo{flex:1 1 100%; padding:2px; border-radius:10px}
.cvtg-campo-curto{flex:1 1 170px}
.cvtg-campo.cvtg-piscar{animation:cvtg-piscar 1.4s ease}
@keyframes cvtg-piscar{0%,60%{background:var(--azul-claro); box-shadow:0 0 0 6px var(--azul-claro)}100%{background:transparent; box-shadow:none}}
.cvtg-rotulo{display:block; margin-bottom:6px; font-size:13.5px; font-weight:700; color:var(--tinta)}
.cvtg-ajuda{margin-top:5px; font-size:12.5px; color:var(--fraco)}
.cvtg-ajuda code{font-size:12px; background:var(--fundo); padding:1px 5px; border-radius:4px}
.cvtg-entrada{
  width:100%; min-height:42px; padding:9px 12px; border-radius:10px;
  border:1px solid var(--linha-forte); background:#FFFFFF; color:var(--tinta);
  font-size:15px; outline:0;
}
textarea.cvtg-entrada{resize:vertical; line-height:1.45}
.cvtg-entrada:focus{border-color:var(--azul); box-shadow:0 0 0 3px rgba(37,99,166,.16)}
.cvtg-entrada-curta{max-width:140px}
.cvtg-entrada-codigo{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px}
.cvtg-entrada-pequena{min-height:36px; padding:6px 10px; margin-top:8px}

.cvtg-chave{display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:650; padding:6px 0}
.cvtg-chave input{position:absolute; opacity:0; width:1px; height:1px}
.cvtg-chave-trilho{flex:none; position:relative; width:42px; height:24px; border-radius:99px; background:var(--linha-forte); transition:background .15s}
.cvtg-chave-trilho span{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s}
.cvtg-chave input:checked + .cvtg-chave-trilho{background:var(--verde)}
.cvtg-chave input:checked + .cvtg-chave-trilho span{transform:translateX(18px)}
.cvtg-chave input:focus-visible + .cvtg-chave-trilho{box-shadow:0 0 0 3px rgba(37,99,166,.3)}

.cvtg-faixa{display:flex; align-items:center; gap:12px}
.cvtg-faixa input{flex:1; accent-color:var(--azul)}
.cvtg-faixa output{flex:none; min-width:48px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:var(--suave)}

.cvtg-opcoes{display:flex; flex-direction:column; gap:8px}
.cvtg-opcoes-2{margin-bottom:12px}
.cvtg-opcao{
  position:relative; display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:11px 12px; border-radius:12px; border:1px solid var(--linha-forte); background:#FFFFFF;
}
.cvtg-opcao input{accent-color:var(--azul); width:18px; height:18px; flex:none; margin:0}
.cvtg-opcao:has(input:checked){border-color:var(--azul); background:var(--azul-claro); box-shadow:0 0 0 1px var(--azul) inset}
.cvtg-opcao-texto{font-weight:650; font-size:14.5px}
.cvtg-opcao-texto strong{display:block}
.cvtg-opcao-texto small{display:block; font-weight:500; font-size:12.5px; color:var(--suave)}

/* amostras de cor dos temas */
.cvtg-amostra{display:flex; flex:none}
.cvtg-amostra i{width:20px; height:20px; border-radius:50%; border:2px solid #FFFFFF; margin-left:-6px; box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.cvtg-amostra i:first-child{margin-left:0}
.cvtg-opcao-jardim .cvtg-amostra i:nth-child(1){background:#F3C6D3}
.cvtg-opcao-jardim .cvtg-amostra i:nth-child(2){background:#C6DBEE}
.cvtg-opcao-jardim .cvtg-amostra i:nth-child(3){background:#7E9E76}
.cvtg-opcao-realeza .cvtg-amostra i:nth-child(1){background:#F6CFCB}
.cvtg-opcao-realeza .cvtg-amostra i:nth-child(2){background:#C79A4B}
.cvtg-opcao-realeza .cvtg-amostra i:nth-child(3){background:#C4676A}
.cvtg-opcao-sunshine .cvtg-amostra i:nth-child(1){background:#F3C95E}
.cvtg-opcao-sunshine .cvtg-amostra i:nth-child(2){background:#F7C6CD}
.cvtg-opcao-sunshine .cvtg-amostra i:nth-child(3){background:#E07A89}

.cvtg-imagem{display:flex; gap:14px; align-items:flex-start}
.cvtg-imagem-previa{
  flex:none; width:96px; aspect-ratio:344/400; border-radius:48px 48px 10px 10px; overflow:hidden;
  background:var(--fundo); border:1px solid var(--linha);
}
.cvtg-imagem-previa.cvtg-imagem-deitada{width:150px; aspect-ratio:1200/630; border-radius:10px}
.cvtg-imagem-previa img{width:100%; height:100%; object-fit:cover; display:block}
.cvtg-imagem-lado{flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:8px}
.cvtg-imagem-lado .cvtg-entrada{flex:1 1 100%}

/* ---------- botões ---------- */
.cvtg-btn, .cvtg-portao .cvtg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:40px; padding:0 14px; border-radius:10px;
  border:1px solid var(--linha-forte); background:#FFFFFF; color:var(--tinta);
  font-weight:650; font-size:14px; text-align:center; cursor:pointer;
}
.cvtg-btn:hover{border-color:var(--fraco)}
.cvtg-btn-primario{background:var(--azul); border-color:var(--azul); color:#FFFFFF}
.cvtg-btn-primario:hover{background:#1D5290; border-color:#1D5290}
.cvtg-btn-perigo{background:var(--perigo); border-color:var(--perigo); color:#FFFFFF}
.cvtg-btn[disabled]{opacity:.45; cursor:default}
.cvtg-btn-largo{width:100%; min-height:44px; margin-top:12px}
.cvtg-link-perigo{border:0; background:none; color:var(--perigo); font-weight:650; font-size:13px; padding:6px}

/* ---------- barra de salvar ---------- */
.cvtg-barra{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:12px 20px; border-top:1px solid var(--linha); background:#FBFAF7;
}
.cvtg-barra p{flex:1; font-size:13.5px; color:var(--suave)}
.cvtg-barra p.cvtg-pendente{color:var(--ambar); font-weight:700}
.cvtg.cvtg-sem-barra .cvtg-barra{display:none}

.cvtg-aviso{margin:14px 20px 0; padding:10px 14px; border-radius:10px; font-size:14px; font-weight:600}
.cvtg-aviso-ok{background:var(--verde-claro); color:var(--verde)}
.cvtg-aviso-erro{background:var(--perigo-claro); color:var(--perigo)}

/* ---------- prévia do WhatsApp ---------- */
.cvtg-zap{margin-bottom:18px; padding:14px; border-radius:14px; background:#E8DFD3}
.cvtg-zap-bolha{max-width:330px; margin-left:auto; padding:4px; border-radius:10px; background:#D9FDD3; box-shadow:0 1px 1px rgba(0,0,0,.1)}
.cvtg-zap-bolha img{display:block; width:100%; aspect-ratio:1200/630; object-fit:cover; border-radius:7px 7px 0 0}
.cvtg-zap-bolha div{padding:7px 9px; background:#F7F8FA; border-radius:0 0 7px 7px}
.cvtg-zap-bolha strong{display:block; font-size:13.5px}
.cvtg-zap-bolha span{display:block; font-size:12.5px; color:#54656F}
.cvtg-zap-bolha em{display:block; margin-top:3px; font-style:normal; font-size:12px; color:#8696A0}
.cvtg-zap .cvtg-ajuda{color:#5E5446}

/* ---------- acessos e novo evento ---------- */
.cvtg-caixa{margin-top:16px; padding:16px; border-radius:14px; border:1px solid var(--linha); background:#FFFFFF}
.cvtg-caixa h3{font-size:15.5px; font-weight:750; margin-bottom:10px}
.cvtg-caixa .cvtg-rotulo{margin-top:12px}
.cvtg-caixa-perigo{border-color:#F1C7C3; background:#FFFBFA}
.cvtg-linha{display:flex; gap:8px}
.cvtg-linha .cvtg-entrada{flex:1}
.cvtg-lembrar{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:14px; color:var(--suave)}
.cvtg-pronto{padding:14px; border-radius:14px; background:var(--verde-claro); margin-bottom:6px}
.cvtg-pronto .cvtg-btn{margin-top:10px}
.cvtg-contas{display:flex; flex-direction:column; border:1px solid var(--linha); border-radius:14px; overflow:hidden}
.cvtg-contas li{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--linha)}
.cvtg-contas li:last-child{border-bottom:0}
.cvtg-contas li > div{flex:1; min-width:0}
.cvtg-contas strong{display:block; font-size:14.5px}
.cvtg-contas span{display:block; font-size:12.5px; color:var(--suave); overflow:hidden; text-overflow:ellipsis}
.cvtg-selo{font-style:normal; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:99px}
.cvtg-selo-familia{background:var(--azul-claro); color:var(--azul)}
.cvtg-selo-recepcao{background:var(--ambar-claro); color:var(--ambar)}
.cvtg-vazio{color:var(--suave)}
.cvtg-numeros{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.cvtg-numeros li{padding:10px; border-radius:10px; background:var(--fundo); text-align:center}
.cvtg-numeros b{display:block; font-size:22px}
.cvtg-numeros span{font-size:12px; color:var(--suave)}

/* ---------- entrada ---------- */
.cvtg-portao{min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; background:#F3F1EC}
.cvtg-portao-caixa{width:100%; max-width:380px; padding:28px 24px; border-radius:18px; background:#FFFFFF; box-shadow:0 12px 32px rgba(0,0,0,.08)}
.cvtg-portao-marca{font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fraco)}
.cvtg-portao h1{font-size:24px; margin:4px 0 8px}
.cvtg-portao p{color:var(--suave)}
.cvtg-portao .cvtg-aviso{margin:14px 0 0}
.cvtg-entrar label{display:block; margin:14px 0 6px; font-weight:700; font-size:13.5px; color:var(--tinta)}
.cvtg-entrar .cvtg-lembrar{font-weight:500; color:var(--suave)}
.cvtg-portao-pe{margin-top:14px; font-size:13.5px}
.cvtg-portao-pe a{color:var(--azul)}
.cvtg-portao .cvtg-btn-primario{margin-top:16px}

/* ---------- telas menores ---------- */
@media (max-width:980px){
  body.cvt-app:has(.cvtg){overflow:auto}
  .cvtg{height:auto; min-height:100vh}
  .cvtg-corpo{flex-direction:column}
  .cvtg-palco{height:72vh; padding:10px 12px 12px}
  .cvtg-painel{width:auto; border-left:0; border-top:1px solid var(--linha)}
  .cvtg-form, .cvtg-painel > .cvtg-secao{overflow:visible}
  .cvtg-barra{position:sticky; bottom:0; z-index:5}
  .cvtg-segmento{margin-left:0}
}
@media (max-width:560px){
  .cvtg-topo{padding:10px 12px}
  .cvtg-links a{padding:6px 8px; font-size:13px}
  .cvtg-imagem{flex-direction:column}
}
.cvtg[data-aparelho="celular"] .cvtg-moldura{margin-top:12px; margin-bottom:10px}

/* lista de itens (sugestões de presente) */
.cvtg-lista-itens{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
.cvtg-lista-itens li{display:flex; align-items:center; gap:8px}
.cvtg-lista-ponto{flex:none; width:8px; height:8px; border-radius:50%; background:var(--azul)}
.cvtg-lista-itens .cvtg-entrada{flex:1}
.cvtg-lista-tirar{flex:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--linha-forte); background:#FFFFFF; color:var(--perigo); font-size:22px; line-height:1}
.cvtg-lista-tirar:hover{background:var(--perigo-claro)}
.cvtg-lista-cru[hidden]{display:none}