/* ==========================================================================
   SGP — Camada 10 · Teste grátis (F29)

   Três superfícies, um assunto só:
     .teste-gratis  — a landing pública /experimente (layout "publico");
     .faixa-teste   — a faixa dentro do app (contagem e somente-leitura);
     .painel-teste  — o painel de estender/contratar na ficha do backoffice.

   Nada aqui redefine componente de outra camada: só compõe os tokens.
   ========================================================================== */

/* --- Landing pública ----------------------------------------------------- */
.teste-gratis {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  padding-block: var(--esp-6);
}

.teste-gratis__cabecalho {
  text-align: center;
}

.teste-gratis__titulo {
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-forte);
  line-height: var(--altura-apertada);
  color: var(--cor-texto);
}

.teste-gratis__subtitulo {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-md);
}

.teste-gratis__promessa {
  margin: 0;
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-acao);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  line-height: var(--altura-solta);
}

.teste-gratis__promessa strong {
  color: var(--cor-texto);
}

/* Honeypot: fora da tela, mas não `display: none` — robô que respeita CSS
   ignoraria o campo escondido e a isca não pegaria ninguém. */
.teste-gratis__isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.teste-gratis__lista {
  margin: 0;
  padding-left: var(--esp-5);
  display: grid;
  gap: var(--esp-2);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

.teste-gratis__rodape {
  margin: 0;
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

/* --- Faixa dentro do app ------------------------------------------------- */
.faixa-teste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  margin-bottom: var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--sgp-info-suave);
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  line-height: var(--altura-normal);
}

.faixa-teste__marca {
  flex: none;
  padding: 2px var(--esp-2);
  border-radius: var(--raio-pilula);
  background: var(--sgp-info);
  color: var(--sgp-neutro-0);
  font-size: var(--texto-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.faixa-teste__texto {
  flex: 1 1 16rem;
  min-width: 0;
}

.faixa-teste--urgente {
  background: var(--sgp-atencao-suave);
}

.faixa-teste--urgente .faixa-teste__marca {
  background: var(--sgp-atencao);
}

.faixa-teste--encerrada {
  background: var(--sgp-perigo-suave);
}

.faixa-teste--encerrada .faixa-teste__marca {
  background: var(--sgp-perigo);
}

/* --- Painel do backoffice ------------------------------------------------ */
.painel-teste__acoes {
  display: grid;
  gap: var(--esp-3);
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}

.painel-teste__forma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

.painel-teste__forma .campo__rotulo {
  margin: 0;
  flex: none;
}

.painel-teste__dias {
  width: 5.5rem;
  flex: none;
}

.painel-teste__unidade {
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

.painel-teste__forma .campo__selecao {
  flex: 1 1 14rem;
  min-width: 0;
}