:root {
  color-scheme: light;
  --cor-texto: #1f2933;
  --cor-fundo: #f8fafc;
  --cor-borda: #d2d6dc;
  --cor-primaria: #2563eb;
  --cor-erro: #b91c1c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.container-estreito {
  max-width: 420px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
form > label > select {
  font-weight: 400;
  padding: 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
}

.campo-senha {
  position: relative;
  display: flex;
}

.campo-senha input {
  flex: 1;
  padding-right: 2.25rem;
}

.botao-mostrar-senha {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.25rem;
  margin: 0;
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
}

.botao-mostrar-senha:hover {
  color: var(--cor-texto);
}

.link-esqueci-senha {
  margin: -0.5rem 0 0;
  font-size: 0.85rem;
}

.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
}

button {
  padding: 0.6rem 1rem;
  background: var(--cor-primaria);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

.link-botao {
  background: none;
  color: var(--cor-primaria);
  padding: 0;
  font-weight: 400;
  text-decoration: underline;
}

.erro {
  color: var(--cor-erro);
}

.termo-consentimento {
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  padding: 1rem;
  background: white;
  font-size: 0.9rem;
}

.cabecalho-painel {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.acoes-painel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Instruções do piloto no painel: abertas no primeiro acesso, recolhíveis */

.painel-instrucoes {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  font-size: 0.9rem;
}

.painel-instrucoes summary {
  font-weight: 600;
  cursor: pointer;
}

.painel-instrucoes h2 {
  margin: 1rem 0 0.25rem;
  font-size: 0.95rem;
}

.painel-instrucoes ul {
  margin: 0;
  padding-left: 1.25rem;
}

.painel-instrucoes li + li {
  margin-top: 0.25rem;
}

/* Texto "Como fazer esta etapa" (partials/guia-etapa): aberto enquanto a etapa
   não está concluída, recolhido depois. */

.guia-etapa {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  font-size: 0.9rem;
}

.guia-etapa summary {
  font-weight: 600;
  cursor: pointer;
}

.guia-etapa-texto h2 {
  margin: 1rem 0 0.25rem;
  font-size: 0.95rem;
}

.guia-etapa-texto p {
  margin: 0.4rem 0;
}

.guia-etapa-texto ul {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

.guia-etapa-texto li + li {
  margin-top: 0.25rem;
}

/* Pesquisa de avaliação do piloto */

.convite-pesquisa {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 4px;
}

.convite-pesquisa p {
  margin: 0 0 0.5rem;
}

.pergunta-pesquisa {
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
}

/* float tira a legend da borda: com 2 linhas, ela cortava o contorno da caixa */
.pergunta-pesquisa legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.pergunta-pesquisa legend + * {
  clear: both;
}

.pergunta-pesquisa .texto-auxiliar {
  margin: 0.25rem 0 0;
}

.pergunta-pesquisa textarea,
.pergunta-pesquisa input[type="text"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font: inherit;
}

.opcao-pesquisa {
  flex-direction: row;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 400;
  padding: 0.2rem 0;
}

.comentario-pesquisa {
  margin-top: 0.5rem;
  font-weight: 400;
  font-size: 0.9rem;
  color: #4b5563;
}

.escala-pesquisa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.1rem;
  max-width: 28rem;
}

.escala-pesquisa label {
  align-items: center;
  gap: 0.1rem;
  font-weight: 400;
  min-width: 1.5rem;
}

.escala-pesquisa input {
  margin: 0;
}

/* Grade (uma escolha por etapa): tabela no computador; no celular, cada
   etapa com as quatro opções escritas embaixo do nome. */
.grade-pesquisa {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.linha-grade {
  display: grid;
  grid-template-columns: 1fr repeat(4, 5.5rem);
  align-items: center;
  padding: 0.35rem 0;
  border-top: 1px solid #e5e7eb;
}

.linha-grade label {
  align-items: center;
  font-weight: 400;
}

.cabecalho-grade {
  border-top: none;
  font-size: 0.8rem;
  color: #6b7280;
  text-align: center;
}

.rotulo-opcao-grade {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .cabecalho-grade {
    display: none;
  }

  .linha-grade {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.15rem 0.5rem;
  }

  .nome-linha-grade {
    grid-column: 1 / -1;
    font-weight: 600;
  }

  .linha-grade label {
    flex-direction: row;
    gap: 0.4rem;
  }

  .rotulo-opcao-grade {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

.legenda-escala {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 28rem;
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.lista-etapas {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.lista-etapas li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem;
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
}

.linha-etapa {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Fluxo sequencial: o que a etapa ainda precisa para liberar a seguinte */

.rotulo-etapa {
  margin-left: auto;
  font-size: 0.75rem;
  color: #6b7280;
}

.rotulo-etapa-concluida {
  color: #15803d;
}

.pendencia-etapa {
  margin: 0 0 0 2.5rem;
  font-size: 0.8rem;
  color: #6b7280;
}

.aviso-pendencia {
  margin: 1.5rem 0 -0.75rem;
  font-size: 0.85rem;
  color: #6b7280;
  text-align: right;
}

.aviso-relatorio {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.numero-etapa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--cor-primaria);
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
}

.rotulo-opcional {
  margin-left: auto;
  font-size: 0.75rem;
  color: #6b7280;
}

.etapa-indisponivel {
  opacity: 0.6;
}

.lista-etapas a {
  color: var(--cor-texto);
  text-decoration: none;
  font-weight: 600;
}

.lista-etapas a:hover {
  color: var(--cor-primaria);
}

/* Telas de etapa */

.container-larga {
  max-width: 1300px;
}

/* Etapa 1 (Canvas) sai do padrão das outras etapas — precisa de mais largura
   por ter 5 colunas de blocos, diferente do restante do fluxo. */
.container-canvas {
  max-width: 1413px;
}

.cabecalho-etapa {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1rem;
  gap: 1rem;
}

/* Barra de navegação entre etapas */

.stepper-etapas {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.stepper-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}

.stepper-item:hover {
  border-color: var(--cor-primaria);
}

.stepper-item-atual {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: white;
}

.stepper-item-indisponivel {
  opacity: 0.4;
  cursor: default;
}

.stepper-item-concluido:not(.stepper-item-atual) {
  border-color: #15803d;
  color: #15803d;
}

/* Indicador de autosave */

.autosave-status {
  font-size: 0.8rem;
  color: #6b7280;
  white-space: nowrap;
}

.autosave-status.autosave-salvo {
  color: #166534;
}

.autosave-status.autosave-erro {
  color: var(--cor-erro);
  font-weight: 600;
}

.link-voltar {
  color: var(--cor-primaria);
  text-decoration: none;
  font-size: 0.9rem;
}

.aviso-sucesso {
  background: #dcfce7;
  color: #166534;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  display: inline-block;
}

.layout-etapa {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .layout-etapa {
    grid-template-columns: 1fr;
  }
}

.conteudo-etapa {
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 1.5rem;
}

.texto-auxiliar {
  color: #6b7280;
  font-size: 0.9rem;
  margin-top: -0.5rem;
}

.rodape-aviso {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
  color: #6b7280;
  font-size: 0.8rem;
  text-align: center;
}

/* Business Model Canvas — layout clássico de 9 blocos */

.canvas-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(2, auto) auto;
  grid-template-areas:
    "parcerias parcerias atividades atividades proposta proposta relacionamento relacionamento segmentos segmentos"
    "parcerias parcerias recursos recursos proposta proposta canais canais segmentos segmentos"
    "custos custos custos custos custos receita receita receita receita receita";
  gap: 0.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 900px) {
  .canvas-grid {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .canvas-bloco {
    grid-area: auto !important;
  }
}

.canvas-bloco {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  background: #f1f5f9;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  padding: 0.5rem;
}

.canvas-bloco textarea {
  flex: none;
  min-height: 90px;
  font-weight: 400;
  font-size: 0.85rem;
  padding: 0.4rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  resize: vertical;
}

.bloco-parcerias textarea,
.bloco-proposta textarea,
.bloco-segmentos textarea {
  min-height: 200px;
}

.bloco-parcerias { grid-area: parcerias; }
.bloco-atividades { grid-area: atividades; }
.bloco-recursos { grid-area: recursos; }
.bloco-proposta { grid-area: proposta; }
.bloco-relacionamento { grid-area: relacionamento; }
.bloco-canais { grid-area: canais; }
.bloco-segmentos { grid-area: segmentos; }
.bloco-custos { grid-area: custos; }
.bloco-receita { grid-area: receita; }

/* Missão, Visão e Valores — o texto do empresário é o campo primário;
   a sugestão da IA (quando existir) aparece como nota abaixo, nunca antes. */

.campo-missao-visao-valores {
  margin-bottom: 1rem;
}

.campo-missao-visao-valores textarea {
  width: 100%;
  min-height: 80px;
  padding: 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-family: inherit;
  resize: vertical;
}

.nota-sugestao-ia {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.75rem;
  background: #f8fafc;
  border-left: 3px solid var(--cor-primaria);
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
  color: #475569;
}

.botao-secundario {
  background: white;
  color: var(--cor-primaria);
  border: 1px solid var(--cor-primaria);
  margin-bottom: 1.5rem;
}

.botao-secundario:disabled {
  color: #9ca3af;
  border-color: var(--cor-borda);
  cursor: not-allowed;
}

.acoes-etapa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
}

/* Etapa 2 — Objetivo Geral e Direcionadores Estratégicos */

.campo-objetivo-geral {
  width: 100%;
  min-height: 72px;
  padding: 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}

.campo-prazo input {
  max-width: 200px;
}

.direcionadores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
  .direcionadores-grid {
    grid-template-columns: 1fr;
  }
}

.rotulo-com-ajuda {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.icone-ajuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid #9ca3af;
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: help;
}

/* Etapa 3 — SWOT */

.grid-swot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "forca oportunidade"
    "fraqueza ameaca";
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 700px) {
  .grid-swot {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .quadrante-swot {
    grid-area: auto !important;
  }
}

.quadrante-forca { grid-area: forca; border-top: 3px solid #16a34a; }
.quadrante-oportunidade { grid-area: oportunidade; border-top: 3px solid #16a34a; }
.quadrante-fraqueza { grid-area: fraqueza; border-top: 3px solid #dc2626; }
.quadrante-ameaca { grid-area: ameaca; border-top: 3px solid #dc2626; }

.quadrante-swot {
  background: #fafafa;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  padding: 0.75rem;
}

.quadrante-swot h3 {
  margin-top: 0;
}

.lista-rapida-form {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.lista-rapida-form input {
  flex: 1;
  padding: 0.4rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-family: inherit;
}

.lista-rapida-form button {
  padding: 0 0.75rem;
}

.lista-itens-swot {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.item-swot {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.item-swot .numero-item {
  margin-top: 0.35rem;
}

.item-swot .numero-item {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  width: 1.5rem;
}

.item-swot form:first-of-type {
  flex: 1;
}

.item-swot textarea {
  width: 100%;
  padding: 0.35rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.4;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

.form-remover-item button {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.form-remover-item button:hover {
  color: var(--cor-erro);
}

/* Etapa 4 — Priorização por Relevância */

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

.item-priorizacao {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--cor-borda);
}

.item-priorizacao:last-child {
  border-bottom: none;
}

.item-priorizacao-cabecalho {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.item-priorizacao-cabecalho .numero-item {
  flex-shrink: 0;
  font-weight: 700;
  color: #6b7280;
}

.seletor-relevancia {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.opcao-relevancia {
  cursor: pointer;
}

.opcao-relevancia input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.opcao-relevancia span {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  font-size: 0.75rem;
  color: #6b7280;
  background: white;
}

.opcao-alta input:checked + span {
  background: #16a34a;
  border-color: #16a34a;
  color: white;
}

.opcao-media input:checked + span {
  background: #d97706;
  border-color: #d97706;
  color: white;
}

.opcao-baixa input:checked + span {
  background: #6b7280;
  border-color: #6b7280;
  color: white;
}

/* Etapa 5 — Plano de Ação */

.lista-planos-acao {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card-plano-acao {
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  padding: 0.75rem;
  background: #fafafa;
}

.card-plano-acao-cabecalho {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-plano-acao-cabecalho .numero-item {
  flex-shrink: 0;
  font-weight: 700;
  color: #6b7280;
  width: 1.75rem;
}

.card-plano-acao-cabecalho form:first-of-type {
  flex: 1;
}

.card-plano-acao-cabecalho input[type="text"] {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-family: inherit;
}

.rotulo-vinculos {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  margin-right: 0.25rem;
}

/* Filtro de relevância + matriz de itens selecionáveis */

.rotulo-filtro {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0 0 0.35rem;
}

.filtro-relevancia {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
}

.matriz-itens-priorizados {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.item-matriz {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: white;
  color: var(--cor-texto);
  font-size: 0.8rem;
  font-family: inherit;
  font-weight: 400;
  cursor: pointer;
  text-align: left;
}

.item-matriz.selecionado {
  border-color: var(--cor-primaria);
  background: #dbeafe;
}

.item-matriz[hidden] {
  display: none;
}

.letra-relevancia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.item-matriz-alta .letra-relevancia { background: #16a34a; }
.item-matriz-media .letra-relevancia { background: #d97706; }
.item-matriz-baixa .letra-relevancia { background: #6b7280; }

/* Vínculos já gravados numa ação — somente leitura (ver Etapa 5, seção 3 do documento) */

.vinculos-swot-somente-leitura {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--cor-borda);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.chip-vinculo-leitura {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  color: white;
}

.chip-vinculo-leitura.chip-relevancia-alta { background: #16a34a; }
.chip-vinculo-leitura.chip-relevancia-media { background: #d97706; }
.chip-vinculo-leitura.chip-relevancia-baixa { background: #6b7280; }

/* Etapa 6 — Matriz Esforço x Impacto */

.abas-rodada {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.aba-rodada {
  background: white;
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.aba-rodada-ativa {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: white;
}

.aba-rodada:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lista-classificacao {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.linha-classificacao {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: #fafafa;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
}

.linha-classificacao .numero-item {
  flex-shrink: 0;
  font-weight: 700;
  color: #6b7280;
}

.linha-classificacao .texto-item-priorizacao {
  flex: 1;
  font-size: 0.9rem;
}

.toggle-classificacao {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: 0.35rem;
}

.toggle-classificacao[hidden] {
  display: none;
}

.badge-quadrante {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
}

.badge-quadrante-fazer_agora { background: #16a34a; }
.badge-quadrante-projetos { background: #2563eb; }
.badge-quadrante-avaliar { background: #d97706; }
.badge-quadrante-evitar { background: #b91c1c; }

.resultado-matriz {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cor-borda);
}

.grupo-resultado {
  margin-bottom: 1rem;
}

.lista-resultado {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.linha-resultado {
  font-size: 0.9rem;
}

/* Etapa 7 — 5W2H */

.card-5w2h {
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #fafafa;
}

.card-5w2h h3 {
  margin-top: 0;
}

.card-5w2h form {
  gap: 0.6rem;
}

.card-5w2h textarea {
  width: 100%;
  min-height: 60px;
  padding: 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-family: inherit;
  resize: vertical;
}

.grade-5w2h-campos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin: 0;
}

@media (max-width: 800px) {
  .grade-5w2h-campos {
    grid-template-columns: 1fr 1fr;
  }
}

/* Etapa 8 — Indicadores */

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

.card-indicador {
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  padding: 0.75rem;
  background: #fafafa;
}

.card-indicador form {
  gap: 0.5rem;
}

.card-indicador-cabecalho {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-indicador-cabecalho .numero-item {
  flex-shrink: 0;
  font-weight: 700;
  color: #6b7280;
}

.card-indicador-cabecalho input[name="nome"] {
  flex: 1;
  padding: 0.4rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-family: inherit;
  font-weight: 600;
}

.origem-indicador {
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
  color: #6b7280;
  font-style: italic;
}

.grade-indicador-campos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

@media (max-width: 700px) {
  .grade-indicador-campos {
    grid-template-columns: 1fr 1fr;
  }
}

.grade-indicador-campos input {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-family: inherit;
}

.card-indicador .form-remover-item {
  margin-top: 0.4rem;
}

/* Etapa 0 — Entrevista Inicial */

.conteudo-entrevista {
  max-width: 640px;
  margin: 0 auto;
}

.progresso-entrevista {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
  margin: 1.5rem 0 0.5rem;
}

.texto-pergunta-atual {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

#campo-resposta-entrevista {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  font-family: inherit;
  resize: vertical;
  min-height: 90px;
}

.navegacao-entrevista {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.navegacao-entrevista .invisivel {
  visibility: hidden;
}

/* Botão "Limpar" — presente em várias etapas (Entrevista, Canvas, SWOT,
   Plano de Ação, Indicadores) */

.zona-limpar {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--cor-borda);
}

.botao-limpar {
  background: white;
  color: var(--cor-erro);
  border: 1px solid var(--cor-erro);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.linha-acoes-swot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.linha-acoes-swot .botao-secundario {
  margin-bottom: 0;
}

.zona-limpar .texto-auxiliar {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.botao-limpar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.navegacao-entrevista button:disabled {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
}

.mensagem-conclusao-entrevista {
  background: #dcfce7;
  color: #166534;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.card-indicador .form-remover-item button {
  background: none;
  border: none;
  color: var(--cor-erro);
  text-decoration: underline;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  font-size: 0.8rem;
}

.grade-5w2h-campos input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-family: inherit;
}

.botao-avancar:disabled {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
}

.botao-avancar {
  display: inline-block;
  padding: 0.6rem 1rem;
  background: var(--cor-primaria);
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}

/* Precisa vir depois de .botao-avancar: mesma especificidade, e é esta que
   tem de vencer quando a etapa ainda não liberou a seguinte. */
.botao-avancar-bloqueado {
  background: #cbd5e1;
  color: #64748b;
}

/* Admin — faixa de aviso quando um admin está "como" outro usuário */

.banner-admin-visualizacao {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.85rem;
  border-bottom: 1px solid #fde68a;
}

.banner-admin-visualizacao form {
  gap: 0;
}

.botao-voltar-admin {
  background: #92400e;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

/* Admin — tela de suporte (leitura do plano de um usuário) */

.tabela-admin {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1.5rem;
  font-size: 0.9rem;
}

.tabela-admin th,
.tabela-admin td {
  text-align: left;
  padding: 0.5rem;
  border: 1px solid var(--cor-borda);
  vertical-align: top;
}

.tabela-admin th {
  background: #f1f5f9;
  width: 220px;
}

/* Admin — respostas da pesquisa de avaliação */

.contagens-pesquisa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.contagens-pesquisa h2 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

.contagens-pesquisa ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.opcao-sem-voto {
  color: #9ca3af;
}

.rolagem-tabela {
  overflow-x: auto;
}

.tabela-pesquisa th {
  width: auto;
  min-width: 9rem;
}

.tabela-pesquisa td {
  min-width: 9rem;
}

.zona-ver-plano-completo {
  margin: 0.5rem 0 1.5rem;
}

.secao-admin {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cor-borda);
}

.zona-perigo {
  border: 1px solid var(--cor-erro);
  border-radius: 4px;
  padding: 1rem 1.25rem;
}

.zona-perigo h2 {
  margin-top: 0;
  color: var(--cor-erro);
}

.form-trocar-senha {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  min-width: 240px;
}

.form-trocar-senha .campo-senha {
  flex: 1;
}

.form-trocar-senha input {
  width: 100%;
}

.form-trocar-senha .botao-secundario {
  margin-bottom: 0;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
}

.form-novo-usuario {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.form-novo-usuario label {
  flex: 1 1 200px;
}

.form-novo-usuario .botao-secundario {
  margin-bottom: 0;
}

.acoes-pesquisa-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.acoes-pesquisa-admin a.botao-secundario {
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}

.acoes-pesquisa-admin .botao-limpar {
  margin: 0;
}

.tabela-rolavel {
  overflow-x: auto;
}

.tabela-rolavel .tabela-admin th {
  width: auto;
}

.card-admin-plano {
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  background: #fafafa;
}

/* Caixa de interação com a IA — placeholder de elemento, sem funcionalidade real ainda */

.caixa-ia {
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 1rem;
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.caixa-ia h2 {
  margin: 0;
  font-size: 1rem;
}

.caixa-ia-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.uso-ia {
  margin-left: auto;
  color: #6b7280;
  font-size: 0.8rem;
  white-space: nowrap;
}

.uso-ia-alto {
  color: #b45309;
  font-weight: 600;
}

.link-limpar-conversa {
  background: none;
  border: none;
  padding: 0;
  color: #6b7280;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.caixa-ia-mensagens {
  min-height: 140px;
  max-height: 55vh;
  overflow-y: auto;
  background: #f8fafc;
  border-radius: 4px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Mensagens da conversa: pre-line mantém as quebras de linha do texto. */
.ia-msg {
  font-size: 0.9rem;
  white-space: pre-line;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
}

.ia-msg-usuario {
  align-self: flex-end;
  max-width: 90%;
  background: #e0e7ff;
}

.ia-msg-assistente {
  background: white;
  border: 1px solid var(--cor-borda);
}

.ia-msg-aguardando,
.ia-msg-erro {
  padding: 0;
  color: #6b7280;
  font-size: 0.85rem;
  font-style: italic;
}

.caixa-ia-placeholder {
  margin: 0;
  color: #6b7280;
  font-size: 0.85rem;
}

.caixa-ia-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.caixa-ia-form textarea {
  min-height: 60px;
  padding: 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-family: inherit;
  resize: vertical;
}

.caixa-ia-form textarea:disabled,
.caixa-ia-form button:disabled {
  background: #f1f5f9;
  cursor: not-allowed;
}

/* Resposta de uma análise de IA dentro da caixa. pre-line mantém a linha em
   branco entre os pontos da análise (a IA separa cada ponto assim). */

.ia-resposta p {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  white-space: pre-line;
}

.lista-sugestoes-ia {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lista-sugestoes-ia li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem;
  background: #f8fafc;
  border-left: 3px solid var(--cor-primaria);
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
}

.lista-sugestoes-ia button {
  align-self: flex-start;
}

/* Franquia de IA esgotada: pedido para continuar, pelo WhatsApp de suporte */

.pedir-mais-ia {
  align-self: flex-start;
  margin-bottom: 0;
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* Diagnóstico do Plano */

.link-diagnostico-painel {
  display: inline-block;
  margin: 0 0.75rem 0.75rem 0;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}

.aviso-diagnostico {
  padding: 0.5rem 0.75rem;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 4px;
  font-size: 0.85rem;
}

.lista-pontos-atencao,
.lista-observacoes-ia {
  padding-left: 1.25rem;
}

.lista-pontos-atencao > li,
.lista-observacoes-ia > li {
  margin-bottom: 1rem;
}

.lista-pontos-atencao ul {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
}

.titulo-ponto-atencao,
.titulo-observacao-ia {
  margin: 0;
  font-weight: 600;
}

.lista-observacoes-ia p {
  margin: 0.25rem 0;
}

.nota-ia {
  font-size: 0.8rem;
  color: #6b7280;
}

.botao-gerar-diagnostico {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--cor-primaria);
  text-decoration: underline;
  cursor: pointer;
}