/* ============================================================================
 * Construtor de formulários — Fase 3B do plano de âncoras.
 *
 * Estilos das quatro telas da cadeia de criação (Título → Formulário → Tópico
 * → Pergunta). Ficam num arquivo próprio, e não dentro de um <style> na tela,
 * porque as mesmas peças aparecem em mais de uma delas: a barra de ação da
 * lista, os blocos numerados do editor e os cartões de tipo de resposta.
 *
 * Cores: só tokens que já existem no projeto (--primaria, --secundaria e
 * derivados, definidos em assets/css/ace.min.css). O mockup propunha uma
 * paleta própria; usar a do projeto evita a tela nascer com um azul que não
 * é o azul do Athena.
 * ========================================================================= */

/* --- Barra que fica acima da lista, com o botão de criar ------------------ */
/* `clear: both` porque os campos do editor são colunas do Bootstrap, que
   flutuam: sem isto a barra de Salvar/Cancelar sobe pro lado dos campos em vez
   de ficar embaixo deles. */
.construtor-barra-acoes {
  clear: both;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 10px 14px;
}

/* --- Editor (o painel que substitui a lista quando se cria/edita) --------- */
/* `flow-root` pelo mesmo motivo do clear acima: o editor precisa envolver a
   altura das colunas flutuantes, senão o rodapé da página sobe por cima. */
.construtor-editor {
  display: flow-root;
  padding: 4px 10px 10px;
}

.construtor-editor-titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--primaria);
  margin: 4px 0 14px;
}

/* Link discreto "‹ Voltar para a lista": é <button> e não <a> porque não
   navega — só troca qual painel está visível na mesma tela. */
.construtor-voltar {
  border: none;
  background: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--secundaria-dark);
  text-decoration: underline;
  cursor: pointer;
}

.construtor-voltar:hover {
  color: var(--primaria);
}

/* --- Blocos numerados ("Passo 1", "Passo 2"...) --------------------------- */
.construtor-grupo {
  display: flow-root;
  border: 1px solid #e3e2db;
  border-radius: 9px;
  padding: 14px 16px 4px;
  margin-bottom: 14px;
  background: #fff;
}

.construtor-grupo-titulo {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--secundaria-dark);
  margin-bottom: 10px;
}

/* Texto de apoio embaixo de um campo — explica a consequência da escolha,
   não repete o rótulo. */
.construtor-ajuda {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8a8781;
  margin-top: 4px;
}

/* "(opcional)" ao lado do nome do campo. Precisa ser um <span> aninhado dentro
   do mesmo item porque .body-label é flex-column: solto, viraria uma linha só
   dele. */
.construtor-opcional {
  font-weight: 400;
  font-size: 11.5px;
  color: #8a8781;
}

.construtor-rotulo {
  display: block;
  font-weight: 700;
  margin-bottom: 5px;
}

/* --- Cartões de tipo de resposta (achado A20) ----------------------------- */
/* Os seis tipos são os mesmos <input type="radio"> de sempre; o que muda é que
   deixam de morar dentro de um dropdown fechado e ficam todos à vista, com a
   explicação de cada um ao lado. */
.construtor-tipos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.construtor-tipo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #e3e2db;
  border-radius: 8px;
  padding: 9px 12px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
  background: #fff;
  transition: border-color .2s, background .2s;
}

.construtor-tipo:hover {
  border-color: var(--secundaria);
}

/* :has() em vez de uma classe trocada por JavaScript: assim o cartão marcado
   acompanha o rádio sozinho, inclusive quando o <button type="reset"> limpa o
   formulário depois de salvar. */
.construtor-tipo:has(input:checked) {
  border-color: var(--secundaria);
  background: var(--secundaria-light);
}

.construtor-tipo input[type="radio"] {
  margin: 3px 0 0;
  flex-shrink: 0;
}

.construtor-tipo img {
  margin-top: 2px;
  flex-shrink: 0;
}

.construtor-tipo-texto b {
  display: block;
  font-size: 13px;
  color: #0b0b0b;
}

.construtor-tipo-texto small {
  display: block;
  font-size: 11px;
  color: #8a8781;
  line-height: 1.4;
}

/* --- Bloco de consentimento do tópico (achado A12) ------------------------ */
/* Fica visualmente separado do resto porque não é mais um campo de
   identificação: marcar isto muda o que o respondente vê antes de entrar no
   bloco (ADR-013, consentimentos_sensiveis). */
.construtor-grupo-consentimento {
  border-color: #f0c8c2;
  background: #fbeae8;
}

.construtor-grupo-consentimento .construtor-grupo-titulo {
  color: #c0392b;
}

.construtor-opcao {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #e3e2db;
  border-radius: 8px;
  padding: 9px 12px;
  margin: 0 0 7px;
  font-weight: 400;
  cursor: pointer;
  background: #fff;
}

.construtor-opcao:has(input:checked) {
  border-color: var(--secundaria);
  background: var(--secundaria-light);
}

.construtor-opcao input[type="radio"] {
  margin: 3px 0 0;
  flex-shrink: 0;
}

/* --- Passo 3 inativo em múltipla escolha ---------------------------------- */
/* O grupo aparece nos três tipos que pedem opções, para a tela não parecer
   arbitrária, mas fica apagado onde a âncora não teria efeito. O motivo é o
   dashboard: escolha única e lista suspensa viram gráfico divergente e usam os
   rótulos da âncora; múltipla escolha vira lista de categorias e a ignora. */
.construtor-grupo-inativo {
  opacity: .62;
  background: #faf9f6;
}

.construtor-grupo-inativo select {
  cursor: not-allowed;
  background: #f2f1ec;
}

.ancora-indisponivel {
  color: #8a6416;
}

/* --- Régua da âncora (Passo 2) -------------------------------------------- */
/* Substitui os campos digitáveis quando a pergunta tem âncora. Os degraus são
   mostrados, não editados: a validação da Fase 2 já recusa qualquer valor
   diferente de 1..N, então um campo aberto ali só convidava a um erro que o
   salvamento ia barrar. Mostrar o rótulo junto põe "o que o respondente lê" no
   lugar onde a decisão é tomada. */
.construtor-regua-caixa {
  padding: 0;
}

.construtor-regua {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
}

.construtor-degrau {
  flex: 1 1 92px;
  min-width: 76px;
  border: 1px solid var(--linha, #e3e2db);
  border-radius: 7px;
  background: #f2f1ec;
  padding: 8px 6px;
  text-align: center;
}

.construtor-degrau b {
  display: block;
  font-size: 14px;
  color: #0b0b0b;
}

.construtor-degrau span {
  display: block;
  font-size: 10.5px;
  color: #8a8781;
  line-height: 1.3;
  margin-top: 2px;
  min-height: 14px;
}

.construtor-regua-origem {
  font-size: 11.5px;
  color: #8a8781;
  margin: 8px 0 12px;
}

/* Os escapes SÃO decisão de quem monta — por isso caixa de marcar, e não texto
   livre. Digitados, já produziram degrau com espaço colado e 22 perguntas sem
   nenhuma saída para o respondente. */
.construtor-escapes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.construtor-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--linha, #e3e2db);
  border-radius: 20px;
  background: #fff;
  padding: 6px 13px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  cursor: pointer;
}

.construtor-chip:has(input:checked) {
  border-color: var(--secundaria);
  background: var(--secundaria-light);
}

.construtor-chip input { margin: 0; accent-color: var(--primaria); }
.construtor-chip small { color: #8a8781; font-size: 11px; }

/* Cartões de âncora e o par Sim/Não do Passo 4 ---------------------------
   Reusam .construtor-tipo inteiro — mesma borda, mesmo estado marcado, mesmo
   :has(). O que muda é só a densidade da grade: âncora não tem ícone e o texto
   é curto, então cabem mais por linha; o Sim/Não são dois e não devem esticar
   pela largura toda da tela. */
.construtor-ancoras {
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}

.construtor-binario {
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: start;
}

/* O resumo da âncora ("Discordo totalmente → Concordo totalmente") é a única
   coisa que distingue um cartão do outro — ele não pode ser truncado. */
.construtor-ancora .construtor-tipo-texto small {
  color: #57717a;
}

.construtor-ancora:has(input:checked) .construtor-tipo-texto small {
  color: #2f5560;
}

/* O grupo inteiro fica inativo em múltipla escolha (.construtor-grupo-inativo).
   Sem isto os cartões continuavam parecendo clicáveis. */
.construtor-grupo-inativo .construtor-tipo {
  opacity: .55;
  cursor: not-allowed;
}

.construtor-grupo-inativo .construtor-tipo:hover {
  border-color: #e3e2db;
}

/* Coluna "Ordem" ---------------------------------------------------------
   As setas eram as duas primeiras de quatro ações no fim da linha, e ali
   competiam com editar e excluir — dois pares de ícones parecidos, colados. Na
   primeira coluna elas ficam sozinhas, no lugar de uma numeração que só
   repetia o que a posição na tela já dizia.

   Nos extremos a seta não é desenhada (a primeira linha não sobe), mas o vão
   continua ocupando o mesmo espaço: sem isto os ícones escorregam para a
   esquerda na primeira e na última linha e a coluna inteira desalinha. */
.acao-vazia {
  display: inline-block;
  width: 24px;
}

.coluna-ordem {
  width: 78px;
  white-space: nowrap;
}

.celula-ordem {
  width: 78px;
  white-space: nowrap;
}

.botoes-ordem {
  display: flex;
  align-items: center;
  gap: 4px;
}

.botoes-ordem a {
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  padding: 2px;
}

.botoes-ordem a:hover {
  background: var(--secundaria-light);
}

/* Depois de mover, a linha pisca uma vez. Numa lista de 33 itens paginada de
   10 em 10, a pergunta pode ir parar em outra página — sem a marca, a pessoa
   não sabe para onde ela foi. */
@keyframes linha-movida {
  from { background: var(--secundaria-light); }
  to   { background: transparent; }
}

tr.linha-movida > td {
  animation: linha-movida 1.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  tr.linha-movida > td { animation: none; }
}

/* Módulos automáticos de currículo (modal de formulário) ------------------
   Nove caixas de marcar. Em coluna única viravam uma lista alta que empurrava
   o botão Salvar para fora da modal; em grade cabem em três linhas. */
.construtor-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 6px 14px;
  margin: 6px 0 8px;
}

.construtor-modulo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 6px;
  font-weight: 400;
  font-size: 13px;
  color: #0b0b0b;
  cursor: pointer;
}

.construtor-modulo:hover {
  background: var(--secundaria-light);
}

.construtor-modulo input[type="checkbox"] {
  margin: 2px 0 0;
  flex-shrink: 0;
}

/* Grupos dentro de modal ---------------------------------------------------
   `.body-div` (css-athena01.css) é `display:flex; flex-wrap:wrap;
   justify-content:center`. Sem largura declarada, cada `.construtor-grupo` vira
   um item de flex dimensionado pelo próprio conteúdo e centralizado: na modal
   de tópico, o grupo "Identificação" — que só tem o campo do nome — encolhia
   para a largura do input e ficava boiando no meio, enquanto o grupo
   "Consentimento", com um texto de ajuda longo, ocupava a linha inteira.

   Grupo é seção, não cartão: ocupa a linha toda, e aí o campo dentro dele
   também ocupa (o `.body-label` é flex-column). */
.body-div > .construtor-grupo {
  flex: 1 1 100%;
  width: 100%;
}