/* teste-gratis.css — formulário público do teste grátis da rádio indoor (Fase 2, bloco 6). Vem depois de sgi-pele.css, do
   tema da marca e de app.css; só o que é desta página. Uma coluna no celular (375 px sem rolar de lado). */

body.tg { padding: 16px; }
.tg-topo { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px auto 16px; max-width: 720px; }
.tg-topo .logo { display: block; height: 48px; width: auto; max-width: 200px; object-fit: contain; }
.tg-estudio { margin: 0; font-size: 13px; color: var(--sgi-fraco); text-align: center; }

.tg-caixa {
  width: 100%; max-width: 720px; margin: 0 auto 32px; padding: 24px 20px;
  background: var(--cor-superficie); border-radius: 16px; box-shadow: var(--sgi-sombra);
  min-width: 0;
}
html:not(.pele-compacta) .tg-caixa h1 { margin: 0 0 4px; font-size: 22px; line-height: 1.3; }
.tg-caixa > .sub { margin: 0 0 20px; color: var(--sgi-fraco); }
.tg-caixa .destaque { margin: 0 0 16px; }
.tg-caixa input:not([type="checkbox"]):not([type="radio"]), .tg-caixa select { min-height: 44px; }

/* gêneros e programetes: caixas de marcar em grade que quebra sozinha */
.tg-generos { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.tg-generos legend { padding: 0; margin: 0 0 4px; font-size: 14px; color: var(--sgi-texto); }
.tg-generos .marcas, .tg-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 0 16px; }
.tg-lista .marca { align-items: flex-start; padding: 6px 0; }
.tg-lista .marca input { margin-top: 3px; }
.tg-lista .marca small { display: block; }
.tg-sim-nao { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.tg-sim-nao legend { padding: 0; margin: 0 0 4px; font-size: 14px; color: var(--sgi-texto); }
.tg-sim-nao .marca { margin-right: 20px; }

/* isca: fora da tela, sem ocupar espaço (o display none denunciaria a isca a robô que lê o CSS) */
.tg-isca { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.tg-termo { border: 1px solid var(--sgi-linha); border-radius: var(--sgi-r-card); padding: 12px 16px; margin: 0 0 12px; background: var(--sgi-chao); }
html:not(.pele-compacta) .tg-termo h2 { margin: 0 0 4px; font-size: 16px; }
.tg-termo-texto { max-height: 280px; overflow-y: auto; overflow-wrap: anywhere; }
html:not(.pele-compacta) .tg-termo-texto h3 { margin: 12px 0 4px; font-size: 14px; }
.tg-termo-texto p { margin: 4px 0; font-size: 13px; }
.tg-minuta {
  display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--cor-ambar-claro); color: var(--cor-ambar);
}
.tg-aceite { margin: 0 0 12px; align-items: flex-start; }
.tg-aceite input { margin-top: 3px; }
html .tg-caixa .acoes button.principal { min-height: 44px; }
.tg-programetes { margin-top: 16px; padding: 16px 0 0; box-shadow: none; }
.tg-caixa [aria-invalid="true"] { border-color: var(--sgi-vermelho); }
fieldset[aria-invalid="true"] legend { color: var(--sgi-vermelho); }

@media (max-width: 480px) {
  body.tg { padding: 8px; }
  .tg-caixa { padding: 16px 14px; border-radius: 12px; }
}

/* fechado (D-123): o botão do WhatsApp logo abaixo do aviso */
.tg-fechado-acao { margin: 0 0 16px; }