/* Estilos do módulo comercial: /assinar/ (lista de espera dos planos no MVP v1) e telas de planos do /admin.
   Só variáveis de tokens.css; mobile first; alvos de 44 px; sem rolagem horizontal em 390, 1440 e 1920 px. */

/* /assinar/ */
.assinar { display: grid; gap: var(--esp-6); align-items: start; }
@media (min-width: 960px) { .assinar { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--esp-7); } }
.assinar-plano { min-width: 0; }
.assinar-preco { font-size: var(--fs-xl); margin-bottom: var(--esp-2); }
.assinar-preco strong { font-size: var(--fs-2xl); }
.assinar-itens { list-style: none; padding: 0; margin: var(--esp-5) 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.assinar-itens li { display: flex; flex-direction: column; gap: var(--esp-1); }   /* marca: .itens-plano (componentes.css) */
.assinar-dica { max-width: 60ch; }
.assinar-definicoes { border-top: 1px solid var(--es-linha); padding-top: var(--esp-4); }
.assinar-definicoes summary { min-height: var(--alvo); display: flex; align-items: center; cursor: pointer; font-weight: var(--peso-ui);
  color: var(--es-destaque); }
.assinar-definicoes dl { margin: var(--esp-4) 0 0; }
.assinar-definicoes dt { font-weight: var(--peso-ui); margin-top: var(--esp-4); }
.assinar-definicoes dd { margin: var(--esp-1) 0 0; color: var(--es-texto-2); max-width: 72ch; }
.assinar-escolha { list-style: none; padding: 0; margin: var(--esp-5) 0 0; display: grid; gap: var(--esp-4); }
.assinar-escolha h2 { font-size: var(--fs-h3); margin-bottom: var(--esp-2); }
.assinar-escolha .btn { margin-top: var(--esp-2); }
.assinar-espera { min-width: 0; }
.assinar-espera h2 { font-size: var(--fs-h3); }
.assinar-nota { margin: var(--esp-3) 0 0; }
.assinar-confirmacao .alerta { font-size: var(--fs-corpo); }

/* grupo de opções (rádios) fora de .campo, para o rádio não herdar a largura dos campos de texto */
.escolha { border: 0; padding: 0; margin: 0 0 var(--esp-4); display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); }
.escolha legend { font-size: var(--fs-peq); font-weight: 500; color: var(--es-texto); margin-bottom: var(--esp-2); width: 100%; padding: 0; }
.escolha .check { align-items: center; }
.escolha .erro-campo { width: 100%; margin: 0; font-size: var(--fs-peq); color: var(--es-erro); font-weight: 500; }
.aceite { margin-bottom: var(--esp-4); }
.aceite .check span { font-size: var(--fs-corpo); }
.aceite .erro-campo { margin: var(--esp-2) 0 0; font-size: var(--fs-peq); color: var(--es-erro); font-weight: 500; }

/* /admin #planos */
.planos-admin { display: flex; flex-direction: column; gap: var(--esp-5); }
.planos-admin .tabela td .peq { display: block; }
.planos-admin .barra { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; justify-content: space-between; }
.planos-admin h2 { font-size: var(--fs-xl); }
.planos-admin h3 { font-size: var(--fs-ui); }
.planos-admin form .linha .campo { flex: 1 1 200px; margin-bottom: 0; }
.planos-admin .grade-campos { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.planos-admin .grade-campos .campo { margin-bottom: 0; }
.planos-admin .ent-valor { max-width: 160px; }
.planos-admin .tabela input, .planos-admin .tabela select { min-height: var(--alvo); width: 100%; padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--es-linha-forte); border-radius: var(--raio-sm); background: var(--es-fundo); color: var(--es-texto); }
.planos-admin .rolagem { overflow-x: auto; }
.planos-admin .acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-4); }

/* checkout (v2): quadro L.3, WhatsApp com DDI, volta do pagamento */
.assinar-quadro { margin: var(--esp-5) 0; border-top: 1px solid var(--es-linha); padding-top: var(--esp-4); }
.assinar-quadro h2 { font-size: var(--fs-h3); }
.assinar-quadro dl { margin: var(--esp-3) 0 0; display: grid; gap: var(--esp-3); }
.assinar-quadro-linha { display: grid; gap: var(--esp-1); }
@media (min-width: 640px) { .assinar-quadro-linha { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--esp-4); } }
.assinar-quadro dt { font-weight: var(--peso-ui); }
.assinar-quadro dd { margin: 0; color: var(--es-texto-2); max-width: 72ch; }
.linha-whatsapp { display: grid; gap: 0 var(--esp-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .linha-whatsapp { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); } }
.linha-whatsapp .campo-ddi input { width: 100%; }
.retorno { max-width: 44rem; margin: 0 auto; }
.retorno h1 { font-size: var(--fs-h2); }
.retorno-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin: var(--esp-4) 0; }

/* área do cliente #assinatura (v2) */
.assinatura-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-4); }
.assinatura-planos { list-style: none; padding: 0; margin: var(--esp-3) 0 0; display: grid; gap: var(--esp-3); }
.assinatura-planos label { display: flex; gap: var(--esp-3); align-items: flex-start; min-height: var(--alvo);
  padding: var(--esp-3); border: 1px solid var(--es-linha-forte); border-radius: var(--raio-sm); cursor: pointer; }
.assinatura-planos input { margin-top: .3em; }
.recibo dl { display: grid; gap: var(--esp-2); margin: 0; }
.recibo dt { font-weight: var(--peso-ui); }
.recibo dd { margin: 0 0 var(--esp-2); }
@media print {
  body * { visibility: hidden; }
  .recibo, .recibo * { visibility: visible; }
  .recibo { position: absolute; inset: 0; padding: var(--esp-5); }
  .recibo .nao-imprimir { display: none; }
}

/* /admin #assinaturas e #cobrancas (v2) */
.cobranca-admin { display: flex; flex-direction: column; gap: var(--esp-5); }
.cobranca-admin .barra { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: flex-end; justify-content: space-between; }
.cobranca-admin .rolagem { overflow-x: auto; }
.cobranca-admin pre { white-space: pre-wrap; word-break: break-word; max-width: 100%; font-size: var(--fs-peq);
  background: var(--es-suave); padding: var(--esp-3); border-radius: var(--raio-sm); }
.cobranca-admin .acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
/* tabela em cartões no celular: o rótulo não quebra no meio da palavra e as ações ficam à direita */
@media (max-width: 767px) {
  .cobranca-admin .tabela td::before, .planos-admin .tabela td::before { flex: none; }
  .cobranca-admin .tabela td .acoes, .planos-admin .tabela td .acoes { justify-content: flex-end; }
}