/* ANDAIME DE DEMONSTRAÇÃO — não faz parte do produto.
 *
 * Tudo neste arquivo existe para o dono poder clicar pelo esqueleto sem
 * backend: a barra que troca de perfil e de estado, e a marcação do conteúdo
 * de exemplo. Deliberadamente FEIO e fora do sistema visual, para nunca ser
 * confundido com tela do produto. Este arquivo é descartado quando as telas
 * passarem a ler dado de verdade. */

.demo {
  background: #2b2f36;
  color: #ffffff;
  font-family: var(--fonte);
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
  padding: var(--e-2) var(--e-3);
  display: flex;
  gap: var(--e-3);
  align-items: center;
  flex-wrap: wrap;
}

.demo a {
  color: #9ec3ff;
}

.demo__marca {
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: var(--espacamento-caixa-alta);
  flex: none;
}

.demo__grupo {
  display: flex;
  gap: var(--e-2);
  align-items: center;
  flex-wrap: wrap;
}

.demo__grupo-rotulo {
  opacity: 0.7;
}

.demo__opcao {
  padding: var(--e-1) var(--e-2);
  border: 1px solid #5a606b;
  border-radius: var(--raio-etiqueta);
  text-decoration: none;
  color: #ffffff;
}

.demo__opcao[aria-current="true"] {
  background: #ffffff;
  color: #2b2f36;
  font-weight: var(--peso-forte);
}

.demo__opcao[data-bloqueada="true"] {
  opacity: 0.55;
  border-style: dashed;
  cursor: not-allowed;
}

/* Conteúdo de exemplo: sempre entre ‹ ›, sempre sublinhado tracejado.
 * Nenhum dado de produto foi inventado — o que parece dado é isto aqui. */
.exemplo {
  border-bottom: 1px dashed #b06b00;
  background: rgb(253 243 226 / 0.6);
}

.exemplo::before {
  content: "‹";
  color: #b06b00;
}

.exemplo::after {
  content: "›";
  color: #b06b00;
}

/* Índice e vitrine: grade simples para navegar o esqueleto. */
.demo-indice {
  max-width: var(--largura-formulario);
  margin: 0 auto;
  padding: var(--e-8) var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}

.vitrine {
  display: flex;
  flex-direction: column;
  gap: var(--e-8);
}

.vitrine__secao {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.vitrine__amostra {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.vitrine__legenda-da-amostra {
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
  color: var(--cor-texto-fraco);
  text-transform: uppercase;
  letter-spacing: var(--espacamento-caixa-alta);
  font-weight: var(--peso-forte);
}

.vitrine__linha {
  display: flex;
  gap: var(--e-3);
  flex-wrap: wrap;
  align-items: center;
}

.vitrine__amostra-de-cor {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.vitrine__quadrado {
  width: var(--e-8);
  height: var(--e-8);
  border-radius: var(--raio-etiqueta);
  border: 1px solid var(--cor-borda-controle);
  flex: none;
}

/* A pergunta aberta DENTRO da tela (instrumento de decisão, não preview).
   Deliberadamente no estilo do andaime — nunca confundível com produto. */
.demo-decisao {
  border: 2px dashed #b02418;
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff6f5;
  font-size: 13px;
  line-height: 18px;
  display: grid;
  gap: 4px;
}
.demo-decisao__titulo { font-weight: 700; color: #b02418; }