/* =====================================================================
   TESTES BÍBLICOS — visual. A cor de cada teste vem de testes.php ('cor').
   Leve: sem animações contínuas.
   ===================================================================== */
#tb-pagina [hidden] { display: none !important; }
.tb-selo { display: inline-flex; align-items: center; gap: .4rem; margin: .4rem 0 0; font-size: .85rem; font-weight: 700; color: var(--dourado); text-transform: uppercase; letter-spacing: .08em; }

/* Cartões dos testes */
.tb-cartoes { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.tb-cartao { display: flex; align-items: center; gap: 1rem; padding: 1.1rem; border-radius: var(--raio); text-decoration: none; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda); border-left: 6px solid var(--tb-cor); box-shadow: var(--sombra); }
.tb-cartao:hover { border-color: var(--tb-cor); }
.tb-cartao-emoji { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 18px; font-size: 2rem;
  background: color-mix(in srgb, var(--tb-cor) 14%, transparent); }
.tb-cartao-txt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.tb-cartao-txt strong { font-size: 1.05rem; line-height: 1.3; }
.tb-cartao-txt small { color: var(--texto-2); font-size: .84rem; }
.tb-cartao-seta { margin-left: auto; color: var(--texto-2); }

/* Caixa do teste */
.tb-app { margin: 1rem 0 1.5rem; padding: 1.4rem 1.1rem; border-radius: 24px; background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra);
  border-top: 6px solid var(--tb-cor); scroll-margin-top: calc(var(--topo-h) + 10px); }
@media (min-width: 700px) { .tb-app { padding: 2rem 2.2rem; } }
.tb-inicio { text-align: center; }
.tb-emoji { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto .6rem; border-radius: 50%; font-size: 3rem;
  background: color-mix(in srgb, var(--tb-cor) 14%, transparent); }
.tb-meta { color: var(--texto-2); font-size: .92rem; }
.tb-aviso { max-width: 52ch; margin: 0 auto 1rem; padding: .8rem 1rem; border-radius: var(--raio-p); background: var(--dourado-suave); font-size: .92rem; line-height: 1.5; }
.tb-anterior { font-size: .92rem; color: var(--primaria); font-weight: 600; }
.tb-comecar { max-width: 360px; width: 100%; background: var(--tb-cor); font-size: 1.05rem; min-height: 54px; }
.tb-privado { margin: .8rem 0 0; font-size: .82rem; color: var(--texto-2); }

/* Perguntas */
.tb-topo-perg { display: flex; align-items: center; gap: .4rem; }
.tb-contador { font-size: .88rem; font-weight: 700; color: var(--texto-2); }
.tb-barra { height: 8px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; margin: .5rem 0 1.2rem; }
.tb-barra span { display: block; height: 100%; width: 0; background: var(--tb-cor); transition: width .25s; }
.tb-enunciado { font-size: clamp(1.25rem, 4.6vw, 1.6rem); margin: 0 0 1.1rem; outline: none; }
.tb-opcoes { display: grid; gap: .6rem; }
.tb-opcao { text-align: left; width: 100%; min-height: 56px; padding: .9rem 1.1rem; border-radius: 16px; border: 1.5px solid var(--borda); background: var(--fundo);
  font-size: 1rem; line-height: 1.4; cursor: pointer; color: var(--texto); }
.tb-opcao:hover { border-color: var(--tb-cor); }
.tb-opcao:active { transform: scale(.99); }
.tb-opcao[aria-pressed="true"] { border-color: var(--tb-cor); background: color-mix(in srgb, var(--tb-cor) 12%, var(--fundo)); font-weight: 650; }
.tb-escala .tb-opcao { text-align: center; font-weight: 600; }
@media (min-width: 700px) { .tb-escala { grid-template-columns: repeat(4, 1fr); } .tb-escala .tb-opcao { min-height: 64px; } }

/* Resultado */
.tb-res-cabeca { text-align: center; }
.tb-res-rotulo { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dourado); }
.tb-res-nome { font-size: clamp(1.7rem, 6.5vw, 2.4rem); margin: .2rem 0 .4rem; outline: none; }
.tb-res-frase { font-family: var(--fonte-titulo); font-style: italic; font-size: 1.1rem; color: var(--texto-2); max-width: 40ch; margin: 0 auto 1rem; }

.tb-dist { list-style: none; padding: 0; margin: 1rem auto; max-width: 520px; display: grid; gap: .45rem; font-size: .9rem; }
.tb-dist li { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr auto; align-items: center; gap: .6rem; }
.tb-dist-barra { height: 8px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.tb-dist-barra span { display: block; height: 100%; background: var(--tb-cor); }

.tb-perfil { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tb-perfil li { display: grid; justify-items: center; text-align: center; gap: .2rem; padding: .8rem .5rem; border-radius: 16px; background: var(--fundo); border: 1px solid var(--borda); }
.tb-perfil li.tb-convite-item { border-color: var(--tb-cor); border-width: 2px; }
.tb-perfil-emoji { font-size: 1.8rem; line-height: 1; }
.tb-perfil-nome { font-weight: 650; font-size: .92rem; line-height: 1.25; }
.tb-perfil small { color: var(--texto-2); font-size: .78rem; }
.tb-pontos { display: flex; gap: 4px; }
.tb-pontos i { width: 10px; height: 10px; border-radius: 50%; background: var(--superficie-2); border: 1px solid var(--borda); }
.nv0 .tb-pontos i:nth-child(-n+1), .nv1 .tb-pontos i:nth-child(-n+2), .nv2 .tb-pontos i { background: var(--tb-cor); border-color: var(--tb-cor); }

.tb-bloco { margin-top: 1.4rem; }
.tb-bloco h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.tb-bloco p { margin: 0 0 .6rem; }
.tb-bloco-convite { padding: 1.1rem; border-radius: 18px; background: color-mix(in srgb, var(--tb-cor) 9%, transparent); }
.tb-verso, .tb-base { margin: .8rem 0 0; padding: 1rem 1.2rem; border-left: 4px solid var(--dourado); border-radius: 0 var(--raio-p) var(--raio-p) 0; background: var(--superficie); }
.tb-verso p, .tb-base p { margin: 0 0 .35rem; font-family: var(--fonte-titulo); font-style: italic; font-size: 1.08rem; }
.tb-verso cite, .tb-base cite { font-style: normal; font-weight: 700; color: var(--dourado); font-size: .9rem; }
.tb-oracao { font-family: var(--fonte-titulo); font-size: 1.05rem; }

.tb-plano { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .45rem; }
.tb-plano label { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; border-radius: 14px; background: var(--fundo); border: 1px solid var(--borda); cursor: pointer; line-height: 1.45; font-size: .95rem; }
.tb-plano input { width: 22px; height: 22px; margin-top: .1rem; flex: none; accent-color: var(--tb-cor); }
.tb-plano input:checked + span { color: var(--texto-2); text-decoration: line-through; }
.tb-links { font-size: .9rem; color: var(--texto-2); }

.tb-imagem canvas { display: block; width: 100%; max-width: 320px; height: auto; margin: .8rem auto; border-radius: 18px; box-shadow: var(--sombra); }
.tb-nome-campo { max-width: 360px; }
.tb-botoes { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.tb-convidar { text-align: center; }
.tb-fim { margin-top: 1.6rem; }
.tb-graca { margin-top: 1.4rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--dourado-suave); font-size: .95rem; }
.tb-graca p { margin: 0; }
.tb-graca cite { font-style: normal; font-weight: 700; color: var(--dourado); }
.tb-afiliado { margin-top: 1.4rem; padding: 1.1rem; border-radius: 16px; border: 1.5px dashed var(--borda); text-align: center; }

/* Texto da página */
.tb-lista-res { padding-left: 0; list-style: none; }
.tb-lista-res li { margin-bottom: .55rem; }
.tb-grupo li { margin-bottom: .4rem; }
.tb-outros { margin-top: 2.4rem; }