/* 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); padding-left: var(--esp-5); position: relative; }
.assinar-itens li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%;
  background: var(--es-primaria); }
.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); }