/*
 * Visual espelhado no painel da Loja Integrada, que e onde o lojista ja passa
 * o dia: fundo claro, texto em azul quase preto, teal como cor de acao e
 * cartoes de borda suave. O tema escuro existe porque o painel deles tambem
 * tem, e sai sozinho por prefers-color-scheme.
 */
:root{
  --fundo:#f7f7f9; --superficie:#ffffff; --barra:#ffffff;
  --linha:#e7e7ee; --linha-forte:#d9d9e3;
  --tinta:#2c2c46; --fraco:#71718c;
  --acento:#41bfbb; --acento-fundo:#41bfbb; --acento-tinta:#ffffff;
  --acento-suave:#e6f7f6; --acento-texto:#2c8f8c;
  --lima:#d8f34f;
  --bom:#1f9d63; --bom-fundo:#e6f6ee;
  --ruim:#cf3b32; --ruim-fundo:#fdecea;
  --atencao:#9a6207; --atencao-fundo:#fdf3df;
  --escuro:#22223a;
  --sombra:0 1px 2px rgba(44,44,70,.06);
  /*
   * Fundo da tela de previa. Escuro nos dois temas de proposito: ele
   * representa a loja do cliente, nao o painel, e precisa se distinguir do
   * cartao em volta. Sem isso a previa fica transparente e o botao parece
   * solto no meio do nada, em vez de num canto.
   */
  --previa-fundo:#22223a;
}
@media (prefers-color-scheme: dark){
  :root{
    --fundo:#15171c; --superficie:#1d2027; --barra:#101217;
    --linha:#2a2e38; --linha-forte:#353a46;
    --tinta:#e9ebf0; --fraco:#8d94a1;
    --acento:#41bfbb; --acento-fundo:#2f9c99; --acento-tinta:#ffffff;
    --acento-suave:#173330; --acento-texto:#5fd3cf;
    --bom:#4ecf8f; --bom-fundo:#12301f;
    --ruim:#f08279; --ruim-fundo:#361a18;
    --atencao:#f0b95a; --atencao-fundo:#33280f;
    --escuro:#e9ebf0;
    --sombra:none;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     color:var(--tinta);background:var(--fundo);-webkit-font-smoothing:antialiased}
a{color:var(--acento-texto)}
svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------------------------------------------------------------- entrada */
#entrada{min-height:100vh;display:grid;place-items:center;padding:24px}
#form-entrada,#form-esqueci,#form-nova-senha{background:var(--superficie);border:1px solid var(--linha);border-radius:14px;
  padding:30px;width:100%;max-width:370px;box-shadow:var(--sombra)}
.marca-grande{font-size:26px;font-weight:800;letter-spacing:-1px;color:var(--tinta)}
.marca-grande::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--acento);margin-left:3px;vertical-align:baseline}
.sub{color:var(--fraco);margin-bottom:22px}
label{display:block;font-size:12px;color:var(--fraco);margin-bottom:14px}
input,select,textarea{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--linha-forte);
  border-radius:8px;font:inherit;font-size:15px;background:var(--superficie);color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px var(--acento-suave)}
button{font:inherit;font-weight:600;padding:10px 18px;border:0;border-radius:8px;
  background:var(--acento-fundo);color:var(--acento-tinta);cursor:pointer}
button:hover{filter:brightness(1.06)}
button.secundario{background:transparent;color:var(--tinta);border:1px solid var(--linha-forte)}
button.secundario:hover{background:var(--fundo);filter:none}
button:disabled{opacity:.5;cursor:default;filter:none}
#botao-entrada{width:100%;margin-top:8px;padding:12px}
.aceite{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.45;color:var(--texto);margin-bottom:16px}
.aceite input{width:auto;margin:2px 0 0;flex:none}
.aceite a{color:var(--acento-texto)}
.troca{margin-top:16px;font-size:13px;text-align:center}
.troca .sep{color:var(--fraco);margin:0 6px}
.form-config{max-width:560px}
.form-config .linha-check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--texto);margin-bottom:16px}
.form-config .linha-check input{width:auto;margin:0}
.erro{color:var(--ruim);font-size:13px;margin-bottom:10px}

/* ----------------------------------------------------------- barra do topo */
#app{min-height:100vh;display:flex;flex-direction:column}
.barra{display:flex;align-items:center;gap:18px;padding:0 20px;height:60px;flex:none;
  background:var(--barra);border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:20}
.marca{font-size:19px;font-weight:800;letter-spacing:-.6px;color:var(--tinta);flex:none}
.marca::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--acento);margin-left:2px}
.busca{flex:1;max-width:440px;position:relative;display:flex;align-items:center}
.busca svg{position:absolute;left:12px;color:var(--fraco);width:17px;height:17px}
.busca input{margin:0;padding:9px 12px 9px 37px;font-size:14px;border-radius:999px;background:var(--fundo)}
.acoes-barra{margin-left:auto;display:flex;align-items:center;gap:14px}
.icone{background:transparent;color:var(--fraco);padding:7px;border-radius:50%;position:relative;
  display:grid;place-items:center}
.icone:hover{background:var(--fundo);color:var(--tinta);filter:none}
.conta-badge{position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--ruim);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;line-height:1}
.chip-conta{display:flex;align-items:center;gap:9px;padding-left:14px;border-left:1px solid var(--linha)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--acento-suave);color:var(--acento-texto);
  font-size:12px;font-weight:700;display:grid;place-items:center;flex:none;letter-spacing:.3px}
.nome-conta{font-size:13px;font-weight:600;max-width:160px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
#sair,#trocar-senha{background:transparent;color:var(--fraco);font-size:13px;font-weight:500;padding:6px 10px}
#sair:hover,#trocar-senha:hover{color:var(--tinta);background:var(--fundo);filter:none}

/* ---------------------------------------------------------------- estrutura */
.corpo{display:grid;grid-template-columns:224px 1fr;flex:1;min-height:0}
aside{background:var(--barra);border-right:1px solid var(--linha);padding:16px 12px;
  display:flex;flex-direction:column;gap:16px}
nav{display:flex;flex-direction:column;gap:2px}
nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;
  color:var(--tinta);text-decoration:none;font-weight:500;font-size:14px}
nav a svg{color:var(--fraco)}
nav a:hover{background:var(--fundo)}
nav a.ativo{background:var(--acento-suave);color:var(--acento-texto);font-weight:600}
nav a.ativo svg{color:var(--acento-texto)}
.rodape-lateral{margin-top:auto}
.cartao-plano{background:var(--lima);border-radius:12px;padding:14px}
.cartao-plano *{color:#22223a}
.rotulo-plano{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.cartao-plano p{font-size:13px;margin-top:4px;line-height:1.4}
main{padding:26px 30px;min-width:0}

/* ------------------------------------------------------------------ telas */
h2{font-size:21px;letter-spacing:-.4px;margin-bottom:3px}
.legenda{color:var(--fraco);margin-bottom:22px}
.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:12px;
  padding:20px;margin-bottom:16px;box-shadow:var(--sombra)}
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.cartoes .cartao{margin:0}
.numero{font-size:29px;font-weight:700;letter-spacing:-1px;margin-top:2px}
.rotulo{color:var(--fraco);font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.cartao > .rotulo:not(:first-child){display:block;margin-top:20px}

.rolagem{overflow-x:auto;border:1px solid var(--linha);border-radius:12px;background:var(--superficie);
  box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--linha);white-space:nowrap}
th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--fraco);font-weight:600}
tbody tr:last-child td{border-bottom:0}
tbody tr.clicavel{cursor:pointer}
tbody tr.clicavel:hover{background:var(--fundo)}

.selo{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600}
.selo.auto,.selo.criado{background:var(--bom-fundo);color:var(--bom)}
.selo.manual{background:var(--atencao-fundo);color:var(--atencao)}
.selo.bloqueado,.selo.falhou{background:var(--ruim-fundo);color:var(--ruim)}
.selo.pendente{background:var(--fundo);color:var(--fraco)}

#faixa{padding:13px 16px;border-radius:10px;margin-bottom:20px;font-size:13.5px}
#faixa.aviso{background:var(--atencao-fundo);color:var(--atencao)}
#faixa.erro{background:var(--ruim-fundo);color:var(--ruim)}

.passos{margin:14px 0 0 18px}
.passos li{margin-bottom:7px}
pre{background:var(--escuro);color:var(--superficie);padding:13px;border-radius:9px;overflow-x:auto;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:12px}
@media (prefers-color-scheme: dark){pre{background:#0c0e12;color:#dfe3ea}}
/*
 * Codigo com botao de copiar. O botao fica por cima do bloco, no canto, para
 * ficar junto do que ele copia e nao empurrar o layout. O pre ganha espaco a
 * direita para o texto nao passar por baixo dele.
 */
/*
 * A margem do pre sai para o .codigo, e o pre zera a dele. Sem isso a margem
 * colapsa para fora do .codigo, o topo dos dois deixa de coincidir e o botao
 * posicionado por cima cai para fora do bloco.
 */
.codigo{position:relative;margin-top:12px}
.codigo pre{margin-top:0;padding-right:92px}
/*
 * O botao fica sobre o bloco escuro, entao precisa das cores dele e nao das
 * do painel: com o estilo de botao claro ele some no fundo escuro, e o
 * lojista nao acha justamente o atalho que evita copiar a tag errada pelo
 * mouse. O `top` acompanha a margem do pre para alinhar com a primeira linha.
 */
.codigo > button{position:absolute;top:6px;right:6px;padding:5px 11px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.34);border-radius:7px;cursor:pointer}
.codigo > button:hover{background:rgba(255,255,255,.26)}

.linha-tempo{list-style:none;border-left:2px solid var(--linha);margin:14px 0 0 8px;padding-left:20px}
.linha-tempo li{position:relative;padding-bottom:16px}
.linha-tempo li:last-child{padding-bottom:0}
.linha-tempo li::before{content:"";position:absolute;left:-26px;top:5px;width:10px;height:10px;
  border-radius:50%;background:var(--acento);border:2px solid var(--superficie)}
.linha-tempo a,.acessos a{color:var(--texto);text-decoration:none;border-bottom:1px dotted var(--linha-forte)}
.linha-tempo a:hover,.acessos a:hover{color:var(--acento);border-bottom-color:var(--acento)}
.acessos{list-style:none;display:grid;gap:8px;margin:10px 0 16px}
.acessos li{padding:8px 11px;border-radius:9px;background:var(--fundo);border:1px solid var(--linha);font-size:13.5px}
.acessos li a{display:block;font-weight:600;border:0;overflow-wrap:anywhere}
.lead-navegacao{display:block;width:100%;text-align:left;margin:-4px 0 12px;padding:7px 11px;border-radius:9px;
  background:var(--bom-fundo);color:var(--bom);border:1px solid transparent;font-size:12.5px;cursor:pointer}
.lead-navegacao b{margin-right:6px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:10.5px}
.lead-navegacao:hover{border-color:var(--bom)}
.hora{font-size:12px;color:var(--fraco)}
.vazio{color:var(--fraco);padding:30px;text-align:center;background:var(--superficie);
  border:1px dashed var(--linha-forte);border-radius:12px}
.respostas{list-style:none;display:grid;gap:10px;margin-top:12px}
.respostas li{border-left:3px solid var(--acento);padding-left:11px}
.respostas b{display:block;font-size:12px;color:var(--fraco);font-weight:500}
.acoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.cupom-grande{font:700 21px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:2px;
  padding:13px 18px;border:2px dashed var(--acento);border-radius:10px;display:inline-block;
  margin-top:10px;color:var(--acento-texto)}
.plataformas{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:12px 0 4px}
.plataforma{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px 14px;
  background:var(--fundo);color:var(--texto);border:1px solid var(--linha);border-radius:10px;cursor:pointer}
.plataforma:hover{border-color:var(--acento)}
.plataforma.ativa{border-color:var(--acento);background:var(--acento-suave)}
.plataforma strong{font-size:14px}
.form-conexao{margin-top:16px;padding-top:16px;border-top:1px solid var(--linha)}
.form-conexao form{max-width:520px}
.form-conexao .rotulo{display:block;margin-bottom:10px}
.oauth-passo{background:var(--bom-fundo);border-radius:10px;padding:14px 16px;margin-bottom:16px}
.oauth-passo strong{display:block;margin-bottom:6px;color:var(--bom)}
.oauth-passo .legenda{margin-bottom:0}
.oauth-passo .botao-link{margin-top:4px}
.ok{color:var(--bom);font-weight:600;margin-bottom:16px}
.confirmar-loja{border-color:var(--acento);border-width:1.5px}
.chave-loja pre{user-select:all}
.instrucoes{margin-top:18px;padding-top:16px;border-top:1px solid var(--linha)}
.instrucoes textarea{margin-top:8px}
.titulo-conexao{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:2px}
.titulo-conexao strong{font-size:15px}

@media(max-width:820px){
  .corpo{grid-template-columns:1fr}
  .busca{display:none}
  .nome-conta{display:none}
  aside{border-right:0;border-bottom:1px solid var(--linha);padding:8px 10px;overflow-x:auto}
  nav{flex-direction:row;gap:4px}
  nav a{white-space:nowrap;padding:8px 12px;font-size:13px}
  nav a span{display:none}
  nav a svg{width:20px;height:20px}
  .rodape-lateral{display:none}
  main{padding:18px 14px}
  .barra{padding:0 14px;gap:12px}
}

/* ------------------------------------------- cartoes de numero, estilo LI */
.grade-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:22px}
.cartao-num{background:var(--superficie);border:1px solid var(--linha);border-radius:12px;
  box-shadow:var(--sombra);display:flex;flex-direction:column}
.cartao-num > .rotulo{padding:16px 18px 0}
.linha-num{display:flex;align-items:center;gap:14px;padding:12px 18px 16px;flex:1}
.bolha{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--fundo);color:var(--fraco);border:1px solid var(--linha)}
.bolha svg{width:21px;height:21px}
.bolha.acento{background:var(--acento-suave);color:var(--acento-texto);border-color:transparent}
.bolha.bom{background:var(--bom-fundo);color:var(--bom);border-color:transparent}
.bolha.ruim{background:var(--ruim-fundo);color:var(--ruim);border-color:transparent}
.cartao-num .numero{font-size:26px;line-height:1.1}
.pe-cartao{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 18px;border-top:1px solid var(--linha);font-size:12.5px}
.link-acao{color:var(--acento-texto);font-weight:600;text-decoration:none;white-space:nowrap}
.link-acao:hover{text-decoration:underline}

/* ------------------------------------------------------- fila de leads */
.abas{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--linha)}
.aba{background:transparent;color:var(--fraco);padding:10px 14px;border-radius:0;font-weight:600;
  border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:8px}
.aba:hover{filter:none;color:var(--tinta)}
.aba.ativa{color:var(--acento-texto);border-bottom-color:var(--acento)}
.conta-aba{background:var(--fundo);color:var(--fraco);font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:999px;border:1px solid var(--linha)}
.aba.ativa .conta-aba{background:var(--acento-suave);color:var(--acento-texto);border-color:transparent}

.lead{background:var(--superficie);border:1px solid var(--linha);border-left:4px solid var(--linha);
  border-radius:12px;padding:16px 18px;margin-bottom:12px;box-shadow:var(--sombra)}
.lead.novo{border-left-color:var(--acento);background:linear-gradient(90deg,var(--acento-suave) 0,var(--superficie) 140px)}
.lead.feito{opacity:.82}
.lead-topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.lead-nome{background:transparent;color:var(--tinta);padding:0;font-size:16px;font-weight:700;
  text-align:left;border-radius:0}
.lead-nome:hover{filter:none;color:var(--acento-texto);text-decoration:underline}
.selo.novo{background:var(--acento-fundo);color:var(--acento-tinta);text-transform:uppercase;
  letter-spacing:.6px;font-size:10px}
.lead-meio{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.resposta-chip{display:inline-flex;flex-direction:column;gap:1px;padding:7px 11px;border-radius:9px;
  background:var(--fundo);border:1px solid var(--linha);font-size:13px;font-weight:600}
.resposta-chip b{font-size:10.5px;font-weight:500;color:var(--fraco)}
.lead-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lead-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.botao-link{display:inline-block;padding:9px 16px;border-radius:8px;font-weight:600;text-decoration:none;
  background:var(--bom-fundo);color:var(--bom);font-size:13.5px}
.botao-link:hover{filter:brightness(.97)}
.lead-acoes button{padding:9px 16px;font-size:13.5px}
.marca-feito{margin-top:10px;font-size:12px;color:var(--fraco);border-top:1px dashed var(--linha);padding-top:8px}
.abas .exportar{margin-left:auto;align-self:center;padding:6px 0}

/* ---------------------------------------------------------- construtor */
.construtor-topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.construtor-topo select{width:auto;margin:0;padding:8px 32px 8px 12px;font-size:14px;font-weight:600}
.construtor-topo strong{font-size:15px}
.estado-publicacao{margin-left:auto}
.construtor-corpo{display:block}

/* O quadro ocupa a largura toda e os cartoes fluem para a direita e quebram
   para baixo, em vez de rolar na horizontal: o lojista precisa ver as
   perguntas inteiras para organiza-las. */
.quadro{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px 36px;align-items:start;
  padding:28px 24px 32px 46px;border:1px solid var(--linha);border-radius:14px;min-height:380px;
  background-color:var(--superficie);
  background-image:radial-gradient(var(--linha-forte) 1px,transparent 1px);background-size:18px 18px}
.ligacao{display:none}
.no{position:relative;width:auto;background:var(--superficie);border:1px solid var(--linha);border-radius:12px;
  box-shadow:0 2px 10px rgba(44,44,70,.08);cursor:pointer;transition:box-shadow .15s;text-align:left}
/* a ligacao tracejada vira um traco a esquerda de cada cartao, menos o primeiro */
.no:not(:first-child)::before{content:"";position:absolute;left:-36px;top:22px;width:36px;height:2px;
  background:repeating-linear-gradient(90deg,#8b7de0 0 5px,transparent 5px 9px)}
.no:not(:first-child)::after{content:"";position:absolute;left:-5px;top:19px;width:8px;height:8px;border-radius:50%;background:#8b7de0}
.no:hover{box-shadow:0 6px 18px rgba(44,44,70,.12)}
.no.selecionado{outline:2px solid var(--acento);outline-offset:1px}
.no > header{display:flex;align-items:center;gap:8px;padding:11px 15px;border-radius:12px 12px 0 0;
  font-size:12.5px;font-weight:700;border-bottom:1px solid var(--linha)}
.no > header > span:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.75;margin-right:8px}
.no.convite > header{background:var(--no-convite-fundo);color:var(--no-convite-tinta)}
.no.pergunta > header{background:var(--no-pergunta-fundo);color:var(--no-pergunta-tinta)}
.no.contato > header{background:var(--no-contato-fundo);color:var(--no-contato-tinta)}
.no.cupom > header{background:var(--acento-suave);color:var(--acento-texto)}
.no-fixo{margin-left:auto;font-size:10.5px;font-weight:600;opacity:.8;text-transform:uppercase;letter-spacing:.4px}
.no-acoes{margin-left:auto;display:flex;gap:2px}
.no-botao{background:transparent;color:inherit;padding:2px 7px;font-size:14px;border-radius:5px;opacity:.7}
.no-botao:hover{opacity:1;background:rgba(0,0,0,.06);filter:none}
.no-corpo{padding:14px 16px 16px}
.no-corpo label{margin-bottom:10px}
.no-corpo textarea{resize:vertical;min-height:64px;font-size:14px}
.no-corpo input,.no-corpo textarea{padding:9px 11px}
.no-corpo .rotulo{display:block;margin:8px 0 8px}
.no-corpo .nova-opcao{margin-top:8px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:6px 7px 6px 11px;border-radius:999px;
  background:var(--fundo);border:1px solid var(--linha-forte);font-size:13px;font-weight:600}
.chip.fixo{padding-right:11px;background:var(--atencao-fundo);border-color:transparent;color:var(--atencao)}
.chip-x{background:transparent;color:var(--fraco);padding:0 4px;font-size:14px;line-height:1;border-radius:50%}
.chip-x:hover{color:var(--ruim);filter:none}
.no.adicionar{background:transparent;border:2px dashed var(--linha-forte);box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:170px;color:var(--acento-texto);font:inherit;padding:16px}
.no.adicionar:hover{border-color:var(--acento);background:var(--acento-suave)}
.no.adicionar strong{font-size:14px}

.previa{background:var(--superficie);border:1px solid var(--linha);border-radius:14px;padding:16px 18px;
  margin-top:18px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:flex-start}
.previa > .rotulo{width:100%}
.previa-tela{width:360px;max-width:100%;margin:0;background:var(--previa-fundo);border-radius:12px;padding:14px;min-height:300px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;position:relative}
.previa > p.hora{flex:1;min-width:220px;align-self:center;font-size:13px;line-height:1.5}
.previa-loja{flex:1;width:100%}
.previa-botao{background:#111;color:#fff;font-weight:600;font-size:13px;padding:11px 16px;border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.25)}
/*
 * Na previa o botao sai do fluxo e vai para o canto escolhido, para o lojista
 * ver o lugar de verdade antes de publicar na loja dele. Os nomes das classes
 * acompanham os do widget de proposito: quem for mexer nos dois procura a
 * mesma palavra.
 */
.previa-botao{position:absolute;max-width:calc(100% - 28px)}
.previa-botao.lr{right:14px}
.previa-botao.ll{left:14px}
.previa-botao.vb{bottom:14px}
.previa-botao.vt{top:14px}
.previa-botao.vc{top:50%;transform:translateY(-50%)}
.previa-botao.rd{width:46px;height:46px;padding:0;border-radius:50%;display:grid;place-items:center}
.previa-botao.rd svg{width:22px;height:22px}

/* Escolha da posicao: seis celulas no desenho da tela, nao uma lista. */
.posicao-grade{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px;
  background:var(--previa-fundo,#1b1d24);border-radius:10px;padding:8px}
.posicao-grade button{border:1px solid transparent;background:rgba(255,255,255,.08);color:#cfd3dc;
  border-radius:7px;padding:9px 6px;font-size:11px;font-weight:600;cursor:pointer;line-height:1.2}
.posicao-grade button:hover{background:rgba(255,255,255,.16)}
.posicao-grade button[aria-pressed="true"]{background:var(--cor-widget,#15803d);color:#fff;border-color:rgba(255,255,255,.5)}
/* Explicacao sempre grudada no controle de cima, nunca no de baixo. */
.no-corpo > p.hora{margin:6px 0 12px}
.previa-painel{width:100%;background:#fff;color:#111;border-radius:14px;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.25);font-size:13px}
.previa-cab{background:#111;color:#fff;padding:11px 13px;display:flex;justify-content:space-between;
  align-items:center;font-size:13px}
.previa-corpo{padding:13px}
.previa-barra{height:3px;background:#eee;border-radius:2px;overflow:hidden;margin-bottom:12px}
.previa-barra i{display:block;height:100%;background:#111}
.previa-q{font-weight:500;margin-bottom:10px;line-height:1.4;font-size:14px}
.previa-op{border:1px solid #dcdcdc;border-radius:9px;padding:9px 12px;margin-bottom:6px}
.previa-rotulo{font-size:11px;color:#666;margin:8px 0 3px}
.previa-campo{border:1px solid #dcdcdc;border-radius:9px;padding:9px 11px;color:#999}
.previa-lgpd{font-size:10.5px;color:#777;line-height:1.4;margin:10px 0 8px}
.previa-enviar{background:#111;color:#fff;text-align:center;font-weight:600;padding:11px;border-radius:9px;margin-top:8px}
.previa-msg{color:#444;line-height:1.5;text-align:center}
.previa-cupom{font:700 20px/1 ui-monospace,Menlo,monospace;letter-spacing:2px;text-align:center;
  padding:12px;border:2px dashed #111;border-radius:10px;margin:10px 0}

/* modal de modelos */
.sobreposicao{position:fixed;inset:0;background:rgba(20,22,40,.45);z-index:50;display:grid;place-items:center;padding:20px}
.modal{background:var(--superficie);border-radius:14px;width:100%;max-width:520px;max-height:85vh;overflow:auto;
  padding:20px 22px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.modal-cab strong{font-size:17px}
.sanfona{border:1px solid var(--linha);border-radius:10px;margin-bottom:8px;overflow:hidden}
.sanfona-cab{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--fundo);
  color:var(--tinta);padding:12px 14px;border-radius:0;font-weight:600;text-align:left}
.sanfona-cab:hover{filter:none;background:var(--acento-suave)}
.sanfona.aberta .sanfona-cab{background:var(--acento-suave);color:var(--acento-texto)}
.seta{transition:transform .15s}
.sanfona.aberta .seta{transform:rotate(180deg)}
.sanfona-itens{display:none}
.sanfona.aberta .sanfona-itens{display:block}
.modelo{width:100%;display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  background:transparent;color:var(--tinta);padding:12px 14px;border-radius:0;border-top:1px solid var(--linha)}
.modelo:hover{background:var(--fundo);filter:none}
.modelo strong{font-size:14px}
.modelo .hora{white-space:normal;line-height:1.4}

@media(max-width:700px){.quadro{grid-template-columns:1fr;padding-left:24px}.no:not(:first-child)::before,.no:not(:first-child)::after{display:none}}

/* ------------------------------------------------------------ financeiro */
.planos-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.alternador{display:flex;gap:4px;background:var(--fundo);border:1px solid var(--linha);border-radius:999px;padding:3px}
.alternador .aba{border:0;margin:0;padding:6px 14px;border-radius:999px;font-size:13px}
.alternador .aba.ativa{background:var(--superficie);color:var(--acento-texto);box-shadow:var(--sombra)}
.planos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.plano{border:1px solid var(--linha);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:8px}
.plano.atual{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-suave)}
.plano-nome{font-weight:700;font-size:15px}
.plano-preco{font-size:28px;font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.plano-preco small{font-size:13px;font-weight:500;color:var(--fraco);margin-left:3px}
.plano-lista{list-style:none;display:grid;gap:6px;font-size:13.5px;margin:6px 0 10px;flex:1}
.plano-lista li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acento);margin-right:8px;vertical-align:middle}
.plano button{width:100%}
.plano-implantacao{font-size:13px;color:var(--fraco);padding:8px 10px;background:var(--fundo);border-radius:8px;margin-top:2px}

.cor-linha{display:flex;gap:8px;align-items:center;margin-top:5px}
.cor-linha input[type=color]{width:52px;height:36px;padding:2px;margin:0;border-radius:8px;cursor:pointer}
.cor-linha button{padding:7px 12px;font-size:12.5px}
.previa-tela{--cor-widget:#15803d}
.previa-botao,.previa-cab,.previa-enviar{background:var(--cor-widget)}
.previa-cupom{border-color:var(--cor-widget)}
.previa-barra i{background:var(--cor-widget)}