/* ==========================================================================
   Briefings Lumos — etapas, escopo, condicionais e cards visuais
   Complementa o CSS embutido em cada briefing-*.html.
   Usa os mesmos tokens: --ink --paper --white --gold --gold-light --muted --border
   ========================================================================== */

/* ---------- Etapas ---------- */
.bf-step{display:none}
.bf-step.ativa{display:block}

.bf-nav{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.25rem;flex-wrap:wrap;
}
.bf-nav-passo{
  font-size:.72rem;font-weight:600;letter-spacing:1px;color:var(--muted);
  text-transform:uppercase;order:-1;width:100%;
}
.bf-btn{
  font-family:inherit;font-size:.78rem;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;padding:.9rem 2rem;border-radius:2px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;border:1px solid var(--border);
  background:var(--white);color:var(--ink);
}
.bf-btn:hover{border-color:var(--gold);color:var(--gold)}
.bf-btn-principal{background:var(--gold);border-color:var(--gold);color:var(--white)}
.bf-btn-principal:hover{background:var(--navy);border-color:var(--navy);color:var(--white)}
.bf-btn[disabled]{opacity:.4;cursor:not-allowed}
.bf-btn-oculto{visibility:hidden}

/* ---------- Etapa de escopo ---------- */
.bf-escopo{padding:1.5rem 1.75rem;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.bf-escopo-nota{
  grid-column:1/-1;font-size:.8rem;color:var(--muted);line-height:1.6;
  margin-bottom:.25rem;font-weight:300;
}
.bf-check{
  display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;cursor:pointer;
  border:1px solid var(--border);border-radius:2px;background:var(--white);
  transition:border-color .2s,background .2s;
}
.bf-check:hover{border-color:var(--gold-light)}
.bf-check input{width:18px;height:18px;accent-color:var(--gold);flex:none;margin:0}
.bf-check span{font-size:.85rem;color:var(--ink);line-height:1.4}
.bf-check.marcado{border-color:var(--gold);background:var(--paper)}

/* ---------- Campos condicionais ---------- */
.bf-group.bf-oculto{display:none}

/* ---------- Cards visuais de escolha ---------- */
.bf-opcoes{
  display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.bf-opcao{
  border:1px solid var(--border);border-radius:2px;background:var(--white);
  cursor:pointer;overflow:hidden;transition:border-color .2s,box-shadow .2s;
  display:flex;flex-direction:column;text-align:left;padding:0;font-family:inherit;
}
.bf-opcao:hover{border-color:var(--gold-light)}
.bf-opcao.marcada{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.bf-opcao svg{display:block;width:100%;height:auto;background:var(--paper)}
.bf-opcao-txt{padding:.7rem .85rem;display:flex;flex-direction:column;gap:.2rem}
.bf-opcao-nome{font-size:.8rem;font-weight:600;color:var(--ink);line-height:1.3}
.bf-opcao-obs{font-size:.72rem;color:var(--muted);line-height:1.4;font-weight:300}
.bf-opcao.marcada .bf-opcao-nome{color:var(--gold)}

/* opção sem ilustração (Não sei / Não se aplica) — centraliza para não
   virar um retângulo vazio ao lado dos cards ilustrados */
.bf-opcao.bf-opcao-simples{justify-content:center;align-items:center;min-height:64px}
.bf-opcao.bf-opcao-simples .bf-opcao-txt{padding:.9rem .85rem;text-align:center;align-items:center}

/* ---------- Diagramas ---------- */
.bf-diagrama{
  grid-column:1/-1;background:var(--paper);border:1px solid var(--border);
  border-radius:2px;padding:1rem;margin-bottom:.25rem;
}
.bf-diagrama svg{display:block;width:100%;height:auto;max-width:520px;margin:0 auto}

/* ---------- Aviso de rascunho ---------- */
.bf-rascunho{
  background:var(--paper);border:1px solid var(--gold);border-left-width:3px;
  border-radius:2px;padding:.9rem 1.1rem;margin-bottom:1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.bf-rascunho p{font-size:.82rem;color:var(--ink);line-height:1.5;font-weight:300;margin:0}
.bf-rascunho button{
  font-family:inherit;font-size:.72rem;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;background:none;border:none;color:var(--gold);
  cursor:pointer;text-decoration:underline;padding:0;
}

/* ---------- Mobile ---------- */
@media(max-width:640px){
  .bf-escopo{grid-template-columns:1fr}
  .bf-opcoes{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .bf-nav{gap:.75rem}
  .bf-btn{flex:1;padding:.9rem 1rem;text-align:center}
}