/* Páginas da assinatura online (03/10/2026): /assinar, /bem-vinda e /controle.
   Carrega DEPOIS do vendas.css e usa os mesmos tokens (.pv): tinta, ouro,
   papel, linha. Só o que é de formulário mora aqui. */

.as-casca { max-width: 720px; margin: 0 auto; padding: 40px 20px 80px }
.as-casca.larga { max-width: 1180px }
.as-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; max-width: 1180px; margin: 0 auto }
.as-topo a.volta { font-size: 14px; color: var(--tinta-2); text-decoration: none }
.as-topo a.volta:hover { color: var(--tinta) }

.as-titulo { font-size: clamp(30px, 5vw, 42px); font-weight: 800; letter-spacing: -.015em; line-height: 1.1; margin: 0 0 12px; text-wrap: balance }
.as-sub { color: var(--tinta-2); font-size: 17px; margin: 0 0 30px; max-width: 58ch }

.as-bloco { background: var(--branco); border: 1px solid var(--linha); border-radius: 10px; padding: 24px; display: grid; gap: 18px; margin-bottom: 18px }
.as-bloco h2 { margin: 0; font-size: 18px; font-weight: 700 }
.as-bloco > p { margin: 0; color: var(--tinta-2); font-size: 15px }
.as-passo { font-family: var(--fonte-dado), monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ouro) }

/* planos como escolha */
.as-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px }
.as-plano { position: relative; display: grid; gap: 6px; padding: 18px 18px 16px; border: 1.5px solid var(--linha); border-radius: 10px; cursor: pointer; background: var(--branco); transition: border-color .15s, box-shadow .15s }
.as-plano:hover { border-color: var(--ouro-fraco) }
.as-plano input { position: absolute; opacity: 0; pointer-events: none }
.as-plano:has(input:checked) { border-color: var(--ouro); box-shadow: 0 0 0 3px var(--ouro-fundo) }
.as-plano:has(input:focus-visible) { outline: 2px solid var(--ouro); outline-offset: 2px }
.as-plano .nome { font-weight: 700; font-size: 16px }
.as-plano .preco { font-size: 28px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums }
.as-plano .preco small { font-size: 14px; font-weight: 500; color: var(--tinta-3) }
.as-plano .nota { font-size: 14px; color: var(--tinta-2); line-height: 1.45 }
.as-plano .marca-ok { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--linha) }
.as-plano:has(input:checked) .marca-ok { border-color: var(--ouro); background: radial-gradient(circle, var(--ouro) 0 5px, transparent 6px) }

/* campos */
.as-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px }
.as-campos .cheio { grid-column: 1 / -1 }
.as-campo { display: grid; gap: 6px; min-width: 0 }
.as-campo label { font-size: 14px; font-weight: 600; color: var(--tinta) }
.as-campo label .opc { font-weight: 400; color: var(--tinta-3) }
.as-campo input[type=text], .as-campo input[type=email], .as-campo input[type=tel], .as-campo input[type=url],
.as-campo input[type=password], .as-campo textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--tinta); background: var(--branco);
  border: 1.5px solid var(--linha); border-radius: 8px; padding: 11px 12px; min-height: 46px
}
.as-campo textarea { min-height: 90px; resize: vertical }
.as-campo input:focus, .as-campo textarea:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px var(--ouro-fundo) }
.as-campo.erro input, .as-campo.erro textarea { border-color: #b4372a }
.as-campo .ajuda { font-size: 13px; color: var(--tinta-3); margin: 0 }
.as-campo .msg { font-size: 13px; color: #b4372a; margin: 0 }
.as-prefixo { display: flex; align-items: stretch; border: 1.5px solid var(--linha); border-radius: 8px; overflow: hidden; background: var(--branco) }
.as-prefixo span { display: flex; align-items: center; padding: 0 10px; background: var(--papel); color: var(--tinta-3); font-family: var(--fonte-dado), monospace; font-size: 14px; white-space: nowrap }
.as-prefixo input { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; min-width: 0 }
.as-prefixo:focus-within { border-color: var(--ouro); box-shadow: 0 0 0 3px var(--ouro-fundo) }

/* cupom */
.as-cupom { display: flex; gap: 8px }
.as-cupom input { text-transform: uppercase; letter-spacing: .06em; font-family: var(--fonte-dado), monospace !important }
.as-cupom button { flex: none }
.as-cupom-ok { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--ouro-fundo); color: #6e5414; font-size: 14.5px; line-height: 1.45 }

/* resumo */
.as-resumo { display: grid; gap: 8px; padding: 18px; border-radius: 10px; background: var(--fundo-forte); color: #e9eef5 }
.as-resumo .linha { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: #b9c6d6 }
.as-resumo .linha b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right }
.as-resumo .total { border-top: 1px solid rgba(255,255,255,.14); padding-top: 10px; margin-top: 2px; font-size: 17px; color: #fff }
.as-resumo .total b { color: var(--ouro-claro); font-size: 22px }

/* condições */
.as-cond { font-size: 14.5px; color: var(--tinta-2) }
.as-cond ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px }
.as-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer }
.as-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ouro); flex: none }

/* botões, reaproveitando o .pv-btn da página de vendas */
.as-enviar { width: 100%; min-height: 54px; font-size: 17px }
.as-enviar[disabled] { opacity: .6; cursor: progress }
.as-btn-sec { font: inherit; font-size: 15px; font-weight: 600; padding: 10px 16px; border-radius: 8px; border: 1.5px solid var(--linha); background: var(--branco); color: var(--tinta); cursor: pointer; min-height: 46px }
.as-btn-sec:hover { border-color: var(--tinta-3) }
.as-btn-sec:focus-visible, .as-enviar:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px }

.as-aviso { padding: 12px 14px; border-radius: 8px; font-size: 15px; line-height: 1.5; margin: 0 0 18px }
.as-aviso.erro { background: #fbeceb; color: #8a2a20 }
.as-aviso.ok { background: #e9f4ed; color: #22573a }
.as-aviso.info { background: var(--ouro-fundo); color: #6e5414 }
.as-rodape { margin-top: 22px; font-size: 13.5px; color: var(--tinta-3); text-align: center; line-height: 1.6 }
.as-rodape a { color: inherit; font-weight: 600 }

/* boas-vindas */
.as-status { display: flex; gap: 14px; align-items: flex-start }
.as-status .bola { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--ouro) }
.as-status .bola.ok { background: #2f7d4f }
.as-status .bola.espera { background: var(--tinta-3) }
.as-status .bola.espera::after { content: ""; width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: as-gira 0.9s linear infinite }
@keyframes as-gira { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .as-status .bola.espera::after { animation: none } }
.as-status h2 { margin: 0 0 4px; font-size: 20px }
.as-status p { margin: 0; color: var(--tinta-2) }

.as-escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.as-escolha button { text-align: left; display: grid; gap: 4px; padding: 16px; border-radius: 10px; border: 1.5px solid var(--linha); background: var(--branco); cursor: pointer; font: inherit; color: var(--tinta) }
.as-escolha button b { font-size: 16px }
.as-escolha button span { font-size: 14px; color: var(--tinta-2); line-height: 1.45 }
.as-escolha button[aria-pressed=true] { border-color: var(--ouro); box-shadow: 0 0 0 3px var(--ouro-fundo) }
.as-escolha button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px }

.as-arquivo { display: grid; gap: 8px; padding: 14px; border: 1.5px dashed var(--linha); border-radius: 8px; background: var(--papel) }
.as-arquivo input[type=file] { font: inherit; font-size: 14px; max-width: 100% }
.as-miniaturas { display: flex; flex-wrap: wrap; gap: 8px }
.as-miniaturas img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linha); background: #fff }
.as-cores { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.as-cores input[type=color] { width: 54px; height: 42px; border: 1.5px solid var(--linha); border-radius: 8px; padding: 3px; background: var(--branco); cursor: pointer }
.as-link-guardar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.as-link-guardar code { font-family: var(--fonte-dado), monospace; font-size: 13px; background: var(--papel); padding: 8px 10px; border-radius: 6px; word-break: break-all; flex: 1 1 260px; min-width: 0 }

@media (max-width: 600px) {
  .as-campos, .as-escolha { grid-template-columns: 1fr }
  .as-casca { padding-top: 24px }
  .as-bloco { padding: 18px }
}

/* /controle */
.ct-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 18px }
.ct-numeros { display: flex; flex-wrap: wrap; gap: 10px }
.ct-num { background: var(--branco); border: 1px solid var(--linha); border-radius: 8px; padding: 10px 14px; min-width: 120px }
.ct-num b { display: block; font-size: 24px; font-variant-numeric: tabular-nums }
.ct-num span { font-size: 12.5px; color: var(--tinta-3) }
.ct-lista { display: grid; gap: 12px }
.ct-item { background: var(--branco); border: 1px solid var(--linha); border-radius: 10px; padding: 16px 18px; display: grid; gap: 10px }
.ct-item header { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline }
.ct-item header h3 { margin: 0; font-size: 17px }
.ct-item .meta { font-size: 13.5px; color: var(--tinta-3) }
.ct-chip { font-family: var(--fonte-dado), monospace; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--papel); color: var(--tinta-2) }
.ct-chip.paga { background: #e3f1e8; color: #22573a }
.ct-chip.teste_gratis { background: #e6eef9; color: #1e4f8f }
.ct-chip.aguardando { background: #f3efe4; color: #6e5414 }
.ct-chip.atrasada, .ct-chip.contestada, .ct-chip.estornada { background: #fbe6e3; color: #8a2a20 }
.ct-chip.cancelada, .ct-chip.desistiu, .ct-chip.erro { background: #ececec; color: #555 }
.ct-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 18px; font-size: 14px; color: var(--tinta-2) }
.ct-grade b { color: var(--tinta); font-weight: 600 }
/* filtros do /controle: um botão por grupo, com a contagem; o escolhido fica escuro */
.ct-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px }
.ct-filtros button { font: inherit; font-size: 13.5px; padding: 7px 12px; border: 1px solid var(--linha); border-radius: 999px; background: var(--branco); color: var(--tinta); cursor: pointer; display: inline-flex; gap: 7px; align-items: center }
.ct-filtros button b { font-variant-numeric: tabular-nums; font-size: 12.5px; background: var(--papel); border-radius: 999px; padding: 1px 7px; color: var(--tinta-2) }
.ct-filtros button:hover { border-color: var(--tinta-3) }
.ct-filtros button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--branco) }
.ct-filtros button[aria-pressed="true"] b { background: rgba(255,255,255,.18); color: var(--branco) }
.ct-busca { width: 100%; max-width: 360px; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--branco); margin-bottom: 16px }
.ct-chip.teste7 { background: #e6eef9; color: #1e4f8f }
.ct-chip.vencido { background: #fbe6e3; color: #8a2a20 }
.ct-chip.suspensa, .ct-chip.manual { background: #ececec; color: #555 }
.ct-chip.parceiro { background: #f3efe4; color: #6e5414 }
.ct-cob[hidden] { display: none !important }   /* o form usa display:flex inline; sem isto o hidden não esconde */
.ct-acoes { display: flex; flex-wrap: wrap; gap: 8px }
.ct-acoes button, .ct-acoes a { font: inherit; font-size: 13.5px; padding: 6px 10px; border: 1px solid var(--linha); border-radius: 6px; background: var(--branco); color: var(--tinta); cursor: pointer; text-decoration: none }
.ct-acoes button:hover, .ct-acoes a:hover { border-color: var(--tinta-3) }
.ct-cmd { font-family: var(--fonte-dado), monospace; font-size: 12.5px; background: var(--papel); border-radius: 6px; padding: 10px; overflow-x: auto; white-space: pre; margin: 0 }