/* Wizard do diagnóstico + tela de Resultado. A seção-pai (#diagnostico) é
   .secao--escura; o wizard e o resultado vivem num painel claro por cima,
   então aqui anulamos as regras de .secao--escura (h3/p/botão--secundário
   brancos) para o conteúdo dentro desses painéis. */

.diagnostico-texto-seguranca {
  font-size: 0.9rem;
  margin-top: var(--espaco-sm);
}

.diagnostico-wizard,
.diagnostico-resultado {
  background-color: var(--cor-cinza-gelo);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-elevada);
  padding: var(--espaco-lg) var(--espaco-md);
  max-width: 720px;
  margin-inline: auto;
}

.diagnostico-resultado {
  max-width: 960px;
}

.diagnostico-wizard h3,
.diagnostico-resultado h2,
.diagnostico-resultado h3 {
  color: var(--cor-petroleo-escuro);
}

.diagnostico-wizard p,
.diagnostico-resultado p {
  color: var(--cor-texto-principal);
}

/* .campo-erro-msg (components.css) tem especificidade menor que a regra
   acima — reafirma o vermelho de erro dentro dos painéis do diagnóstico. */
.diagnostico-wizard .campo-erro-msg,
.diagnostico-resultado .campo-erro-msg {
  color: #B3261E;
}

.diagnostico-wizard .botao--secundario,
.diagnostico-resultado .botao--secundario {
  color: var(--cor-petroleo-escuro);
}

/* Etapas */
.diagnostico-etapa h3 {
  margin-bottom: var(--espaco-md);
}

.diagnostico-etapa-campos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}

.campo-titulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cor-petroleo-escuro);
  margin-bottom: 0.4rem;
}

.campo--outro-texto {
  margin-top: -0.2rem;
  margin-left: 1.6rem;
}

/* Etapa 3 — checklist compacto com select por item */
.controle-lista {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.controle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--cor-borda);
  border-radius: var(--raio-borda-pequeno);
  background-color: var(--cor-branco);
}

.controle-item label {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cor-petroleo-escuro);
}

.controle-item select {
  font-family: var(--fonte-texto);
  font-size: 0.95rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--raio-borda-pequeno);
  border: 1.5px solid var(--cor-borda);
  background-color: var(--cor-branco);
  min-height: 44px;
  min-width: 220px;
}

.controle-item.campo--erro select {
  border-color: #B3261E;
}

@media (max-width: 480px) {
  .controle-item select {
    width: 100%;
    min-width: 0;
  }
}

/* Navegação */
.diagnostico-navegacao {
  display: flex;
  justify-content: space-between;
  gap: var(--espaco-sm);
  margin-top: var(--espaco-lg);
}

.diagnostico-navegacao #diagnostico-botao-avancar {
  margin-left: auto;
}

/* Tela de Resultado */
.resultado-cabecalho {
  text-align: left;
  max-width: none;
  margin-bottom: var(--espaco-lg);
}

.resultado-classificacoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--espaco-sm) 0;
}

.resultado-grade {
  margin-bottom: var(--espaco-lg);
}

.resultado-bloco h3 {
  font-size: 1.05rem;
  margin-bottom: var(--espaco-sm);
}

/* .lista-check (components.css) não define cor de texto própria — herdava o
   branco de .secao--escura quando usada dentro do painel de Resultado. */
.resultado-bloco .lista-check li span {
  color: var(--cor-texto-principal);
}

.lista-neutra {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lista-neutra li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--cor-texto-suave);
}

.lista-neutra li::before {
  content: '–';
  flex-shrink: 0;
  color: var(--cor-petroleo-claro);
  font-weight: 700;
}

p.resultado-solucao-frase {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--cor-petroleo-escuro);
  font-size: 1.1rem;
}

.resultado-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-sm);
  margin-top: var(--espaco-md);
}

p.resultado-aviso {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  margin-top: var(--espaco-lg);
  text-align: center;
}