/* ==========================================================================
   SGP — Camada 11: mídia no WhatsApp (F37)
   O seletor de TIPO DE MENSAGEM do compositor de campanha de WhatsApp: cartões
   de rádio com ícone (texto, imagem, imagem com legenda, áudio, vídeo) e a área
   de arquivo que eles revelam.
   Só o que é específico desta tela entra aqui; o resto vem de .campo/.alerta.
   ========================================================================== */

.tipo-mensagem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--esp-2);
  margin-top: var(--esp-2);
}

/* O cartão inteiro é o alvo do clique — não só o pontinho do rádio. */
.tipo-mensagem__opcao {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;              /* sem isto o rótulo longo estoura a coluna do grid */
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-elevado);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

.tipo-mensagem__opcao:hover { border-color: var(--cor-borda-forte); }

/* :has é a forma de pintar o cartão pelo estado do rádio sem uma linha de JS.
   Onde não houver suporte, o rádio marcado continua visível — degrada sozinho. */
.tipo-mensagem__opcao:has(input:checked) {
  border-color: var(--cor-acao);
  background: var(--cor-acao-suave);
}

.tipo-mensagem__opcao:has(input:focus-visible) {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}

.tipo-mensagem__icone {
  flex: none;
  color: var(--cor-texto-suave);
}

.tipo-mensagem__opcao:has(input:checked) .tipo-mensagem__icone { color: var(--cor-acao-forte); }

.tipo-mensagem__rotulo {
  font-size: var(--texto-sm);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.midia-campo[hidden],
.midia-aviso[hidden],
.campo-texto[hidden] { display: none; }

.midia-campo__atual {
  display: block;
  margin-top: var(--esp-1);
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
  overflow-wrap: anywhere;
}

.midia-aviso {
  margin-top: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-sm);
  border: 1px solid var(--sgp-atencao);
  background: var(--sgp-atencao-suave);
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .tipo-mensagem { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}