/* Pele visual (guia-visual.md, seção 2). As cores da marca ficam em marca.css;
   o cabeçalho e o menu lateral, em plataforma.css. */
* {
  box-sizing: border-box;
}

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

/* Campos e botões não herdam a fonte por padrão. Só a família: o tamanho continua o de antes. */
button,
input,
select,
textarea {
  font-family: inherit;
}

h1,
h2,
h3 {
  color: var(--cor-titulo);
}

a {
  color: var(--cor-primaria-texto);
}

/* Plataforma por dentro (com o menu lateral): fundo cinza-azulado claro, com os
   blocos (quadrantes, cartões, campos) em branco por cima. O mock-up 2 tinha fundo
   branco; Thiago preferiu o cinza, que deixa o todo mais harmônico (2026-10-16). */
body.com-menu-lateral {
  background: var(--cor-fundo);
}

.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.55rem 0.75rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
}

/* Foco dos campos (segunda entrega visual): borda azul e um anel claro, no
   lugar do contorno padrão do navegador. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-foco);
}

.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: var(--cor-texto-suave);
  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-acao);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.link-botao {
  background: none;
  color: var(--cor-primaria-texto);
  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 1rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 10px;
  font-size: 0.9rem;
}

.guia-etapa[open] {
  padding-bottom: 0.75rem;
}

.guia-etapa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cor-titulo);
  cursor: pointer;
}

.guia-etapa summary::-webkit-details-marker {
  display: none;
}

/* Seta para baixo; aberta, para cima. */
.guia-etapa summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.guia-etapa[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.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: var(--cor-texto-suave);
  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: var(--cor-texto-suave);
}

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

.rotulo-etapa {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

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

.aviso-pendencia {
  margin: 1.5rem 0 -0.75rem;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  text-align: right;
}

.rotulo-opcional {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

/* 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: 1.25rem;
  gap: 1rem;
}

.cabecalho-etapa h1 {
  margin: 0;
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.etapa-de-total {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

/* Indicador de autosave */

.autosave-status {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  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-texto);
  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;
  /* Voltar/Avançar logo abaixo do conteúdo, e não abaixo da caixa do
     Assistente, que ocupa as duas linhas (Thiago, 2026-10-16). A segunda linha
     em 1fr absorve a sobra de altura da caixa, e o rodapé fica no topo dela. */
  grid-template-rows: auto 1fr;
}

.layout-etapa > .caixa-ia {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.layout-etapa > .rodape-etapa {
  grid-column: 1;
  /* Desfaz o gap da grade: a distância até o conteúdo é a margem das ações. */
  margin-top: -1.5rem;
}

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

  /* Em uma coluna, a ordem volta a ser conteúdo, Assistente e ações. */
  .layout-etapa > .caixa-ia,
  .layout-etapa > .rodape-etapa {
    grid-column: auto;
    grid-row: auto;
  }
}

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

.texto-auxiliar {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  margin-top: -0.5rem;
}

.rodape-aviso {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
  text-align: center;
}

/* Título de seção dentro da etapa (segunda entrega visual, a partir do Propósito). */
.titulo-secao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Fora de um formulário (que já tem o espaço entre os filhos), o texto de
   apoio logo abaixo do título precisa do seu respiro. */
div.conteudo-etapa > .titulo-secao {
  margin-bottom: 0.5rem;
}

div.conteudo-etapa > .titulo-secao + .texto-auxiliar {
  margin-top: 0;
}

.titulo-secao .rotulo-opcional {
  margin-left: 0;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--cor-linha);
  font-size: 0.75rem;
  font-weight: 500;
}

/* A partir da segunda seção, uma linha fina separa uma da outra. */
.titulo-secao ~ .titulo-secao {
  margin-top: 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cor-linha);
}

/* Business Model Canvas — layout clássico de 9 blocos. Cada bloco é um cartão
   e o campo ocupa o cartão sem caixa própria: a borda azul aparece no cartão
   quando se escreve nele (segunda entrega visual, 2026-10-16). */

.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.625rem;
}

@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.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cor-titulo);
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 10px;
  padding: 0.65rem 0.5rem 0.4rem 0.75rem;
}

.canvas-bloco:hover {
  border-color: var(--cor-borda-campo);
}

/* Só ao escrever no bloco: o foco no "?" (balão de ajuda) não acende o cartão. */
.canvas-bloco:has(textarea:focus) {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-foco);
}

.canvas-bloco .rotulo-com-ajuda {
  justify-content: space-between;
  align-items: flex-start;
  line-height: 1.3;
}

.canvas-bloco textarea {
  flex: 1 1 auto;
  min-height: 90px;
  margin-left: -0.25rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cor-texto);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.45;
  resize: vertical;
}

.canvas-bloco textarea:focus-visible {
  border: 0;
  box-shadow: none;
}

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

/* A Proposta de Valor, no centro, é o coração do Canvas. */
.bloco-proposta {
  background: var(--cor-acao-clara);
  border-color: #cfe3f0;
}

.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.
   A pergunta de cada campo fica à vista, e não só dentro dele. */

.campo-missao-visao-valores label {
  gap: 0.15rem;
}

.rotulo-campo {
  font-size: 0.9375rem;
  color: var(--cor-titulo);
}

.dica-campo {
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--cor-texto-suave);
}

.campo-missao-visao-valores textarea {
  width: 100%;
  min-height: 80px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cor-texto);
  resize: vertical;
}

.nota-sugestao-ia {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.75rem;
  background: white;
  border-left: 3px solid var(--cor-acao);
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
  color: var(--cor-texto-medio);
}

/* Plano concluído ou congelado: os campos ficam travados, mas o texto continua
   legível (o cinza padrão do navegador apagava a letra). */
.conteudo-etapa textarea:disabled,
.conteudo-etapa input:disabled {
  color: var(--cor-texto);
  -webkit-text-fill-color: var(--cor-texto);
  opacity: 1;
}

.campo-missao-visao-valores textarea:disabled,
.campo-objetivo-geral:disabled,
.campo-prazo input:disabled {
  background: #eaeff4;
  border-color: var(--cor-linha);
}

.botao-secundario {
  background: var(--cor-acao-clara);
  color: var(--cor-primaria-texto);
  border: 0;
  margin-bottom: 1.5rem;
}

.botao-secundario:hover {
  background: #d5e9f5;
}

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

/* Ações de IA (análise, crítica): azul-marinho com a lâmpada amarela, para não
   competir com o azul do Avançar (guia-visual.md, mock-up 2). */
.botao-analise-ia {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.15rem;
  background: var(--cor-titulo);
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(35, 52, 82, 0.28);
}

.botao-analise-ia .icone-lampada {
  flex: none;
  color: #f4d88a;
}

.botao-analise-ia:hover {
  background: #2c3f60;
}

.botao-analise-ia:disabled {
  background: #5f6b7a;
  box-shadow: none;
  cursor: wait;
}

.acoes-etapa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cor-linha);
}

.link-voltar-etapa {
  padding: 0.75rem 0.25rem;
  color: var(--cor-titulo);
  font-weight: 600;
  text-decoration: none;
}

.link-voltar-etapa:hover {
  text-decoration: underline;
}

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

.campo-objetivo-geral {
  width: 100%;
  min-height: 72px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cor-texto);
  resize: vertical;
}

.campo-prazo {
  align-self: flex-start;
}

.campo-prazo input {
  max-width: 200px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  font-weight: 400;
  color: var(--cor-texto);
}

/* Botão de IA no meio de um formulário: do tamanho do texto, e não da largura toda. */
form > .botao-analise-ia {
  align-self: flex-start;
}

.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: var(--cor-texto-suave);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: help;
}

/* Balão do "?" (public/js/comum.js): abre no clique, também no celular. */
.icone-ajuda[data-ajuda] {
  cursor: pointer;
}

.icone-ajuda[aria-expanded="true"] {
  border-color: var(--cor-acao);
  background: var(--cor-acao);
  color: white;
}

.icone-ajuda[data-ajuda]:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}

.balao-ajuda {
  position: absolute;
  z-index: 50;
  max-width: min(18rem, calc(100vw - 16px));
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: var(--cor-titulo);
  color: white;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}

.balao-ajuda[hidden] {
  display: none;
}

/* 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;
  }
}

/* Cada quadrante é um cartão com a faixa e a letra na sua cor (mock-up 2). */
.quadrante-forca { grid-area: forca; --cor-quadrante: var(--cor-swot-forca); --cor-quadrante-texto: var(--cor-swot-forca-texto); --cor-quadrante-fundo: var(--cor-swot-forca-fundo); }
.quadrante-oportunidade { grid-area: oportunidade; --cor-quadrante: var(--cor-swot-oportunidade); --cor-quadrante-texto: var(--cor-swot-oportunidade-texto); --cor-quadrante-fundo: var(--cor-swot-oportunidade-fundo); }
.quadrante-fraqueza { grid-area: fraqueza; --cor-quadrante: var(--cor-swot-fraqueza); --cor-quadrante-texto: var(--cor-swot-fraqueza-texto); --cor-quadrante-fundo: var(--cor-swot-fraqueza-fundo); }
.quadrante-ameaca { grid-area: ameaca; --cor-quadrante: var(--cor-swot-ameaca); --cor-quadrante-texto: var(--cor-swot-ameaca-texto); --cor-quadrante-fundo: var(--cor-swot-ameaca-fundo); }

.quadrante-swot .item-swot .numero-item {
  color: var(--cor-quadrante-texto);
}

.quadrante-swot {
  background: white;
  border: 1px solid var(--cor-linha);
  border-top: 4px solid var(--cor-quadrante);
  border-radius: 12px;
  padding: 1rem 1.125rem;
}

.quadrante-swot h3 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  color: var(--cor-titulo);
}

.letra-quadrante {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--cor-quadrante-fundo);
  color: var(--cor-quadrante-texto);
  font-size: 0.875rem;
  font-weight: 700;
}

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

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

/* O "+" fica discreto: o Enter é o caminho principal. */
.lista-rapida-form button {
  padding: 0 0.85rem;
  background: var(--cor-acao-clara);
  color: var(--cor-primaria-texto);
  font-size: 1.1rem;
}

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

/* Item como texto corrido: a caixa do campo só aparece ao passar o mouse e ao
   editar. A borda à esquerda é a cor de quem incluiu (transparente para o editor). */
.item-swot {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  border-left: 5px solid transparent;
  border-radius: 3px;
  padding-left: 0.4rem;
}

.item-swot .numero-item {
  flex-shrink: 0;
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  width: 1.6rem;
}

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

.item-swot textarea {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--cor-texto);
  font-size: 0.9375rem;
  font-family: inherit;
  line-height: 1.45;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

.item-swot textarea:hover:not(:disabled):not([readonly]) {
  border-color: var(--cor-linha);
}

.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 */

/* Mesmos cartões da SWOT (letra e faixa na cor do quadrante); cada item é o
   texto com o código na cor do quadrante e, embaixo, o seletor (segunda
   entrega visual, 2026-10-16). */
.lista-itens-priorizacao {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.item-priorizacao {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--cor-linha);
}

.item-priorizacao:first-child {
  padding-top: 0.25rem;
}

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

.item-priorizacao-cabecalho {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.item-priorizacao-cabecalho .numero-item {
  flex-shrink: 0;
  width: 1.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.quadrante-swot .item-priorizacao-cabecalho .numero-item {
  color: var(--cor-quadrante-texto);
}

/* O seletor começa onde começa o texto, e não embaixo do código. */
.item-priorizacao .seletor-relevancia {
  padding-left: 2.1rem;
}

/* Botão segmentado: as opções lado a lado numa peça só, com a escolhida
   preenchida na cor da relevância. */
.seletor-relevancia {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.opcao-relevancia {
  cursor: pointer;
}

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

/* Alvo de toque de no mínimo 32 px (Thiago, 2026-09-28). */
.opcao-relevancia span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  min-width: 4rem;
  padding: 0 0.75rem;
  border: 1px solid var(--cor-borda-campo);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cor-texto-medio);
  background: white;
}

.opcao-relevancia + .opcao-relevancia span {
  margin-left: -1px;
}

.opcao-relevancia:first-of-type span {
  border-radius: 8px 0 0 8px;
}

.opcao-relevancia:last-of-type span {
  border-radius: 0 8px 8px 0;
}

.opcao-relevancia:hover input:not(:checked):not(:disabled) + span {
  background: var(--cor-faixa);
}

.opcao-relevancia input:focus-visible + span {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--cor-acao);
  outline-offset: 1px;
}

.opcao-relevancia input:checked + span {
  position: relative;
  font-weight: 600;
}

.seletor-relevancia .autosave-status {
  margin-left: 0.6rem;
}

.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 (segunda entrega visual, 2026-10-16) */

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

/* Cada ação é um cartão branco; a borda à esquerda é a cor de quem incluiu
   (transparente para o editor), como nos itens da SWOT. */
.card-plano-acao {
  border: 1px solid var(--cor-linha);
  border-left: 5px solid transparent;
  border-radius: 12px;
  padding: 0.75rem 1rem 0.75rem 0.85rem;
  background: white;
}

.card-plano-acao.item-com-autor {
  border-left-width: 5px;
  border-left-style: solid;
  padding-left: 0.85rem;
  border-radius: 12px;
}

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

.card-plano-acao-cabecalho .numero-item {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cor-primaria-texto);
  width: 1.75rem;
}

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

/* A ação parece texto; a caixa do campo só aparece ao passar o mouse e ao editar. */
.card-plano-acao-cabecalho input[type="text"] {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
}

.card-plano-acao-cabecalho input[type="text"]:hover:not(:disabled) {
  border-color: var(--cor-linha);
}

.rotulo-vinculos {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  margin-right: 0.25rem;
}

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

.rotulo-filtro {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cor-texto-medio);
  margin: 0 0 0.35rem;
}

.filtro-relevancia {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

/* Os itens priorizados ficam em lista dentro do quadrante, um por linha, para
   o texto longo não quebrar dentro de uma pílula. */
.matriz-itens-priorizados {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.item-matriz {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--cor-linha);
  border-radius: 8px;
  background: white;
  color: var(--cor-texto);
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
}

.item-matriz:hover:not(:disabled) {
  border-color: var(--cor-borda-campo);
  background: var(--cor-faixa);
}

.item-matriz.selecionado,
.item-matriz.selecionado:hover {
  border-color: var(--cor-acao);
  background: var(--cor-acao-clara);
  box-shadow: inset 0 0 0 1px var(--cor-acao);
}

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

/* Plano congelado ou admin: os itens continuam à vista, só sem clique (o modo
   leitura esconde os botões travados, e os quadrantes ficavam vazios). */
.item-matriz.bloqueado-leitura:not([hidden]) {
  display: flex;
  cursor: default;
}

.letra-relevancia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.05rem;
  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). Etiquetas claras, com um ponto na cor da relevância. */

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

.chip-vinculo-leitura {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--cor-linha);
  border-radius: 999px;
  background: var(--cor-faixa);
  font-size: 0.75rem;
  color: var(--cor-texto-medio);
}

.chip-vinculo-leitura::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #6b7280;
}

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

/* Etapa 6 — Matriz Esforço x Impacto (segunda entrega visual, 2026-10-16) */

/* As rodadas como botão segmentado, no mesmo formato do seletor de relevância. */
.abas-rodada {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
}

.aba-rodada {
  min-width: 6.5rem;
  background: white;
  color: var(--cor-texto-medio);
  border: 1px solid var(--cor-borda-campo);
  border-radius: 0;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}

.aba-rodada + .aba-rodada {
  margin-left: -1px;
}

.aba-rodada:first-child {
  border-radius: 8px 0 0 8px;
}

.aba-rodada:last-child {
  border-radius: 0 8px 8px 0;
}

.aba-rodada:hover:not(:disabled):not(.aba-rodada-ativa) {
  background: var(--cor-faixa);
}

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

.aba-rodada:disabled {
  color: var(--cor-texto-suave);
  background: var(--cor-faixa);
  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 0.6rem 1rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
}

.linha-classificacao .numero-item {
  flex-shrink: 0;
  width: 1.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cor-primaria-texto);
}

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

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

.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: var(--cor-primaria-texto); }
.badge-quadrante-avaliar { background: #d97706; }
.badge-quadrante-evitar { background: #b91c1c; }

/* Resultado como a própria matriz: quatro cartões em 2 × 2, com a faixa na cor
   do quadrante. */
.resultado-matriz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cor-linha);
}

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

.resultado-matriz > .titulo-secao,
.resultado-matriz > .texto-auxiliar {
  grid-column: 1 / -1;
  margin: 0;
}

.grupo-resultado {
  --cor-grupo: var(--cor-texto-suave);
  margin: 0;
  padding: 0.9rem 1rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-top: 4px solid var(--cor-grupo);
  border-radius: 12px;
}

.grupo-resultado:has(.badge-quadrante-fazer_agora) { --cor-grupo: #16a34a; }
.grupo-resultado:has(.badge-quadrante-projetos) { --cor-grupo: var(--cor-primaria-texto); }
.grupo-resultado:has(.badge-quadrante-avaliar) { --cor-grupo: #d97706; }
.grupo-resultado:has(.badge-quadrante-evitar) { --cor-grupo: #b91c1c; }

.grupo-resultado h3 {
  margin: 0;
}

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

.lista-resultado:empty::after {
  content: "Nenhuma ação aqui.";
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

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

@media (max-width: 700px) {
  .resultado-matriz {
    grid-template-columns: 1fr;
  }
}

/* Etapa 7 — 5W2H */

.card-5w2h {
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #fafafa;
  /* A largura do card depende de o Assistente estar ao lado; ver @container do Quando. */
  container-type: inline-size;
}

.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;
}

/* Onde | Quando (Início e Fim) | Quem | Quanto custa: o Quando ocupa o espaço de dois. */
.grade-5w2h-campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.6rem;
  margin: 0;
}

.campo-quando {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.campo-quando legend {
  padding: 0;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.datas-quando {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.4rem;
}

/* "Início" e "Fim" dentro do Quando: rótulo pequeno, ao lado da caixa. */
.datas-quando label {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  font-weight: 400;
}

.datas-quando .rotulo-data {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

/* Mais específico que ".grade-5w2h-campos input" (width: 100%), que somaria à
   largura do rótulo e empurraria o Fim para cima do Quem. */
.grade-5w2h-campos .datas-quando input {
  flex: 1;
  width: auto;
  min-width: 0;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

/* Card estreito: as duas datas não cabem na coluna do Quando sem cortar o texto.
   Onde, Quem e Quanto custa ficam numa linha e o Quando ganha a linha de baixo.
   Vem antes da regra de 800px, que vale no celular. */
@container (max-width: 780px) {
  .grade-5w2h-campos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
  }

  .campo-quando {
    grid-column: 1 / -1;
  }

  .datas-quando {
    max-width: 24rem;
  }
}

/* Celular: "Início" e "Fim" acima da caixa, para a data caber inteira. */
@container (max-width: 480px) {
  .datas-quando label {
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
  }
}

@media (max-width: 800px) {
  /* "dense": o Quem sobe para o lado do Onde, sem deixar buraco antes do Quando. */
  .grade-5w2h-campos {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
  }

  .campo-quando {
    grid-column: 1 / -1;
  }
}

/* Por que e Perspectiva lado a lado: a perspectiva é parte de por que a ação existe. */
.linha-por-que-perspectiva {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 0.6rem;
}

@media (max-width: 800px) {
  .linha-por-que-perspectiva {
    grid-template-columns: 1fr;
  }
}

/* Listas de escolha dentro de grades (5W2H e Indicadores): mesmo visual dos campos de texto. */
.linha-por-que-perspectiva select,
.grade-indicador-campos select {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  background: white;
  font-weight: 400;
}

/* Tarefas de uma ação: entre o form de cima (O que…Como) e o da Observação. */
.bloco-tarefas-5w2h {
  margin: 1rem 0;
}

.rotulo-tarefas-5w2h {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.bloco-tarefas-5w2h .texto-auxiliar {
  margin: 0 0 0.5rem;
}

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

/* Mesmas colunas no cabeçalho e em cada tarefa: número, O que, Quem, Quando, remover. */
.cabecalho-tarefas-5w2h,
.item-tarefa-5w2h form:first-of-type {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem 9.5rem;
  gap: 0.4rem;
}

.cabecalho-tarefas-5w2h {
  grid-template-columns: 1.1rem minmax(0, 1fr) 11rem 9.5rem 1.6rem;
  margin: 0.6rem 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.cabecalho-tarefas-5w2h[hidden] {
  display: none;
}

.item-tarefa-5w2h {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.item-tarefa-5w2h .numero-item {
  flex-shrink: 0;
  width: 1.1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cor-texto-suave);
}

.item-tarefa-5w2h form:first-of-type {
  flex: 1;
}

.item-tarefa-5w2h .form-remover-item {
  flex-shrink: 0;
  width: 1.6rem;
}

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

@media (max-width: 800px) {
  .cabecalho-tarefas-5w2h {
    display: none;
  }

  .item-tarefa-5w2h {
    align-items: flex-start;
  }

  /* A data com a largura dela; o Quem fica com o resto. */
  .item-tarefa-5w2h form:first-of-type {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .item-tarefa-5w2h input[name="o_que"] {
    grid-column: 1 / -1;
  }
}

/* Segunda entrega visual (2026-10-16): cada ação num cartão branco, campos no
   padrão (borda fina, canto 8 px) e as tarefas separadas por uma linha. Vem
   depois das regras acima, que cuidam só da grade. */
.card-5w2h {
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1.25rem;
  background: white;
}

.card-5w2h h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.codigo-acao {
  flex: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cor-primaria-texto);
}

.card-5w2h label,
.campo-quando legend,
.rotulo-tarefas-5w2h {
  font-size: 0.875rem;
  color: var(--cor-titulo);
}

.card-5w2h textarea,
.card-5w2h input[type="text"],
.card-5w2h input[type="date"],
.card-5w2h select {
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  background: white;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
}

.card-5w2h textarea {
  padding: 0.5rem 0.7rem;
  line-height: 1.5;
}

.card-5w2h input[type="text"],
.card-5w2h select {
  padding: 0.5rem 0.7rem;
}

.card-5w2h input[type="date"] {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.card-5w2h textarea:disabled,
.card-5w2h input:disabled,
.card-5w2h select:disabled {
  background: #eaeff4;
  border-color: var(--cor-linha);
  opacity: 1;
}

.bloco-tarefas-5w2h {
  margin: 1.1rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--cor-linha);
  border-bottom: 1px solid var(--cor-linha);
}

.item-tarefa-5w2h .numero-item {
  font-weight: 600;
  color: var(--cor-primaria-texto);
}

.item-tarefa-5w2h input {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
}

/* 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: var(--cor-texto-suave);
}

.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: var(--cor-texto-suave);
  font-style: italic;
}

/* Grade de 12 colunas: na primeira linha, unidade, valor atual, meta e prazo
   (3 colunas cada); na segunda, polaridade, perspectiva e frequência (4 cada,
   Thiago, 2026-09-28).
   No celular, 2 colunas: os números aos pares e as três listas em linha inteira. */
.grade-indicador-campos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.6rem;
  align-items: end;
}

.grade-indicador-campos > label {
  grid-column: span 3;
}

.grade-indicador-campos > .campo-polaridade-indicador,
.grade-indicador-campos > .campo-perspectiva-indicador,
.grade-indicador-campos > .campo-frequencia-indicador {
  grid-column: span 4;
}

/* Card estreito (notebook pequeno, com a caixa do Assistente ao lado): as três
   listas não cabem numa linha sem cortar a polaridade; voltam a meia largura. */
.card-indicador form {
  container-type: inline-size;
}

@container (max-width: 720px) {
  .grade-indicador-campos > .campo-polaridade-indicador,
  .grade-indicador-campos > .campo-perspectiva-indicador,
  .grade-indicador-campos > .campo-frequencia-indicador {
    grid-column: span 6;
  }
}

/* Indicadores do Acompanhamento: o mês da linha de base ("outubro de 2026")
   não cabe em um quarto de card estreito; os números vão aos pares. */
@container (max-width: 720px) {
  .pagina-indicadores-acompanhamento .grade-indicador-campos > label {
    grid-column: span 6;
  }
}

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

  .grade-indicador-campos > label {
    grid-column: span 1;
  }

  .grade-indicador-campos > .campo-polaridade-indicador,
  .grade-indicador-campos > .campo-perspectiva-indicador,
  .grade-indicador-campos > .campo-frequencia-indicador {
    grid-column: span 2;
  }
}

.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: var(--cor-texto-suave);
  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;
}

.botao-limpar {
  background: white;
  color: var(--cor-texto-medio);
  border: 1px solid var(--cor-borda-campo);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}

.botao-limpar:hover {
  color: var(--cor-erro);
  border-color: var(--cor-erro);
}

.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;
}

/* Na SWOT, a explicação é da análise, que fica à direita. */
.linha-acoes-swot + .texto-auxiliar {
  text-align: right;
}

.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.8rem 1.5rem;
  background: var(--cor-acao);
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
}

.botao-avancar:hover {
  background: #0a6799;
}

/* 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 — 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;
}

/* Modalidade do acesso (teste, cortesia, piloto; 2026-10-16): linha própria,
   opções lado a lado, nenhuma marcada de início. */
.escolha-modalidade {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.escolha-modalidade legend {
  width: 100%;
  margin-bottom: 0.35rem;
  padding: 0;
}

.form-novo-usuario .opcao-modalidade {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
}

.opcao-modalidade input {
  width: auto;
  margin: 0;
}

.form-modalidade-acesso {
  max-width: 32rem;
}

.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-linha);
  border-radius: 12px;
  padding: 1rem;
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.caixa-ia h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
}

.caixa-ia h2 .icone-lampada {
  flex: none;
}

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

.caixa-ia-topo h2 {
  white-space: nowrap;
}

.uso-ia {
  margin-left: auto;
  color: var(--cor-texto-suave);
  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: var(--cor-texto-suave);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.caixa-ia-mensagens {
  min-height: 140px;
  max-height: 55vh;
  overflow-y: auto;
  background: var(--cor-faixa);
  border-radius: 8px;
  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;
  line-height: 1.55;
  white-space: pre-line;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
}

.ia-msg-usuario {
  align-self: flex-end;
  max-width: 90%;
  background: var(--cor-acao-clara);
}

.ia-msg-assistente {
  background: white;
  border: 1px solid var(--cor-linha);
  color: var(--cor-texto-medio);
}

.ia-msg-aguardando,
.ia-msg-erro {
  padding: 0;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  font-style: italic;
}

.caixa-ia-placeholder {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

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

.caixa-ia-form textarea {
  min-height: 60px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  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;
}

/* Cada sugestão é um cartão branco com o Aplicar (mock-up 2). */
.lista-sugestoes-ia li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 10px;
  font-size: 0.875rem;
}

.lista-sugestoes-ia li .botao-secundario {
  margin-bottom: 0;
  padding: 0.45rem 0.85rem;
  font-size: 0.8125rem;
}

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

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

/* Pessoa-chave com a franquia esgotada (v1.1): texto, não botão. */
.aviso-franquia-esgotada {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.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;
}

/* Etapa 9 — Revisão do Plano (Diagnóstico) */

.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;
}

/* Itens novos de pessoas-chave sem decisão do editor (v1.1): primeiros da Revisão. */
.lista-pontos-atencao > li.ponto-obrigatorio {
  padding: 0.5rem 0.75rem;
  border-left: 4px solid var(--cor-erro);
}

.rotulo-obrigatorio {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cor-erro);
}

.aviso-aguardando-editor {
  padding: 0.5rem 0.75rem;
  border-left: 4px solid var(--cor-erro);
  font-size: 0.9rem;
}

.etiqueta-novo {
  margin-left: 0.5rem;
  padding: 0 0.4rem;
  border-left: 4px solid;
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--cor-texto-suave);
}

.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: var(--cor-texto-suave);
}

/* Bloco "Direcionadores" da Revisão (1.2.0), depois das observações. */
.bloco-direcionadores-ia {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cor-borda);
}

.bloco-direcionadores-ia h3 {
  margin: 0 0 0.25rem;
}

.bloco-direcionadores-ia h4 {
  margin: 1.25rem 0 0.25rem;
}

.lista-sugestoes-direcionadores {
  list-style: none;
  padding: 0;
}

.lista-sugestoes-direcionadores > li {
  margin-bottom: 1rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--cor-borda);
}

.lista-sugestoes-direcionadores p {
  margin: 0.25rem 0;
}

.bloco-direcionadores-ia .botao-secundario {
  margin: 0.35rem 0 0;
}

.sugestao-aplicada {
  font-size: 0.85rem;
  font-weight: 600;
  /* O verde da paleta (o da Força na SWOT). */
  color: var(--cor-swot-forca-texto);
}

/* Revisão na segunda entrega visual (2026-10-16): cada ponto, observação e
   sugestão é um cartão branco; o link para a etapa fica no pé do cartão. */
.conteudo-etapa > .aviso-diagnostico {
  padding: 0.65rem 0.9rem;
  background: #fdf8e8;
  border: 1px solid #f1e3b0;
  border-radius: 10px;
  color: var(--cor-texto-medio);
}

.lista-pontos-atencao,
.lista-observacoes-ia,
.lista-sugestoes-direcionadores {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.lista-pontos-atencao > li,
.lista-observacoes-ia > li,
.lista-sugestoes-direcionadores > li {
  margin: 0;
  padding: 0.9rem 1.15rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
}

.lista-pontos-atencao > li.ponto-obrigatorio {
  padding: 0.9rem 1.15rem;
  border-left: 4px solid var(--cor-erro);
}

.titulo-ponto-atencao,
.titulo-observacao-ia {
  color: var(--cor-titulo);
}

.lista-pontos-atencao > li > a,
.lista-observacoes-ia > li > a {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.lista-pontos-atencao > li > a::after,
.lista-observacoes-ia > li > a::after {
  content: " →";
}

.lista-pontos-atencao > li > a:hover,
.lista-observacoes-ia > li > a:hover {
  text-decoration: underline;
}

.lista-observacoes-ia p,
.lista-sugestoes-direcionadores p {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.bloco-direcionadores-ia {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cor-linha);
}

.bloco-direcionadores-ia h3 {
  font-size: 1.0625rem;
}

.bloco-direcionadores-ia h4 {
  font-size: 0.9375rem;
  color: var(--cor-titulo);
}

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

#mensagem-convite {
  width: 100%;
}

/* Celular e tablet: campos com 16 px. Abaixo disso o Safari do iPhone dá zoom
   a cada toque num campo, e a página "pula" (Thiago, 2026-09-28). */
@media (max-width: 900px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Atalho para o Assistente no celular (partials/caixa-ia.ejs). No computador a
   caixa já fica ao lado da etapa. */
.botao-ir-assistente {
  display: none;
}

@media (max-width: 900px) {
  .botao-ir-assistente {
    display: inline-flex;
    align-items: center;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 20;
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: var(--cor-primaria);
    color: white;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }

  .botao-ir-assistente.escondido {
    display: none;
  }

  /* Sem sticky no celular: com o rodapé dentro da grade, a caixa grudava no
     topo ao rolar e cobria o Voltar/Avançar quando havia conversa (Thiago,
     2026-10-16). */
  .caixa-ia {
    position: static;
    scroll-margin-top: 1rem;
  }
}

/* Etapa 8: objetivo geral no topo, para conferir ao marcar o indicador que o
   mede, e a marcação no card (Thiago, 2026-09-28). */
.objetivo-referencia {
  border-left: 3px solid var(--cor-primaria);
  background: #f8fafc;
  padding: 0.6rem 0.9rem;
  margin: 1rem 0;
}

.objetivo-referencia p {
  margin: 0 0 0.3rem;
}

.objetivo-referencia .texto-auxiliar {
  margin: 0;
}

/* Reuniões de Acompanhamento (Etapa 8): uma pergunta para o plano inteiro, abaixo dos indicadores. */
.bloco-reunioes-acompanhamento {
  margin: 1.5rem 0 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
}

.bloco-reunioes-acompanhamento .texto-auxiliar {
  margin: 0 0 0.3rem;
  font-weight: 400;
}

.bloco-reunioes-acompanhamento select {
  max-width: 14rem;
}

.marca-mede-objetivo {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.85rem;
}

.marca-meta-soma {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.85rem;
}

.marca-meta-soma[hidden] {
  display: none;
}

/* Lançamentos do Acompanhamento (2026-10-20): uma grade como planilha, um
   indicador por linha e os meses de Jan a Dez nas colunas. A página usa a
   largura da tela (Thiago: a grade estava espremida nos 720px); o texto fica
   na largura de leitura. Quando a grade não cabe, os meses rolam para o lado e
   a coluna do indicador fica parada. Cada linha é um formulário, por isso a
   grade é de divs, e não <table>. */
.container.pagina-lancamentos {
  max-width: 1680px;
}

/* O texto acompanha a largura da grade (Thiago, 2026-10-20: na largura de
   leitura, a quebra curta ficava estranha ao lado da grade larga). */
.pagina-lancamentos > .texto-auxiliar,
.grupo-lancamentos > .texto-auxiliar {
  max-width: none;
}

/* Alerta mensal do sino (passo 5): a frase e o "Dispensar" numa linha só. */
.dispensar-aviso-lancamentos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

.seletor-ano-lancamentos {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.6rem;
  margin: 1rem 0 0;
}

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

.seletor-ano-lancamentos select {
  min-width: 7rem;
}

.seletor-ano-lancamentos .botao-secundario {
  margin-bottom: 0;
}

.grupo-lancamentos {
  margin-top: 1.25rem;
}

.grade-lancamentos-rolagem {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  margin-top: 0.6rem;
  background: #fff;
}

/* Todas as linhas com a mesma largura (a da tela ou o mínimo), para as
   colunas em fr ficarem alinhadas de uma linha para a outra. */
.grade-lancamentos {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 94rem;
}

.pagina-lancamentos .grade-linha {
  display: grid;
  grid-template-columns: minmax(13rem, 1.6fr) repeat(12, minmax(6.75rem, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--cor-borda);
}

.grade-cabecalho {
  border-top: 0;
  background: var(--cor-faixa);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cor-texto-medio);
}

.grade-indicador {
  position: sticky;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.6rem;
  background: #fff;
  border-right: 1px solid var(--cor-borda);
  font-size: 0.85rem;
}

.grade-cabecalho .grade-indicador {
  background: var(--cor-faixa);
  justify-content: center;
}

.grade-nome {
  font-weight: 600;
  color: var(--cor-texto);
}

.grade-indicador small {
  color: var(--cor-texto-medio);
  font-size: 0.75rem;
}

.grade-indicador small.grade-hora-de-medir {
  color: var(--cor-primaria-texto);
  font-weight: 600;
}

.grade-indicador .autosave-status:empty {
  display: none;
}

.grade-celula {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.3rem;
  border-right: 1px solid var(--cor-borda);
  text-align: center;
}

.grade-celula:last-child {
  border-right: 0;
}

.grade-cabecalho .grade-celula small {
  font-weight: 400;
  font-size: 0.7rem;
}

.grade-em-andamento {
  background: #f6fafd;
}

.grade-futuro {
  background: #f4f4f4;
}

.grade-cabecalho .grade-futuro {
  color: var(--cor-texto-suave);
}

.grade-celula input {
  width: 100%;
  padding: 0.35rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  text-align: right;
  font: inherit;
  font-size: 0.85rem;
}

.grade-celula input:hover {
  border-color: var(--cor-borda);
}

.grade-celula input:focus {
  border-color: var(--cor-foco);
  background: #fff;
  outline: none;
}

.grade-celula span {
  min-width: 0;
  overflow: hidden;
  font-size: 0.85rem;
  text-align: right;
}

/* Número que não cabe na célula (milhões em reais): a letra diminui um pouco,
   em vez de alargar todas as colunas (acompanhamento-lancamentos.js). */
.grade-celula .celula-apertada {
  font-size: 0.72rem;
  letter-spacing: -0.01em;
}

.grade-manter {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cor-primaria-texto);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}

.pagina-lancamentos form[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .grade-lancamentos {
    min-width: 87.5rem;
  }

  .pagina-lancamentos .grade-linha {
    grid-template-columns: 9.5rem repeat(12, minmax(6.5rem, 1fr));
  }
}

/* Indicadores na segunda entrega visual (2026-10-16): mesmo cartão e mesmos
   campos do 5W2H; objetivo geral e Reuniões em cartões brancos. Vem depois das
   regras da Etapa 8, que cuidam só da grade. */
.card-indicador {
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  background: white;
}

.card-indicador-cabecalho .numero-item {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cor-primaria-texto);
}

/* O nome do indicador parece título; a caixa só aparece ao passar o mouse e ao editar. */
.card-indicador-cabecalho input[name="nome"] {
  padding: 0.35rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--cor-titulo);
  font-size: 1rem;
  font-weight: 600;
}

.card-indicador-cabecalho input[name="nome"]:hover:not(:disabled) {
  border-color: var(--cor-linha);
}

.card-indicador-cabecalho input[name="nome"]:disabled {
  background: transparent;
}

.grade-indicador-campos label,
.bloco-reunioes-acompanhamento label {
  font-size: 0.875rem;
  color: var(--cor-titulo);
}

.grade-indicador-campos input,
.grade-indicador-campos select,
.bloco-reunioes-acompanhamento select {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  background: white;
  color: var(--cor-texto);
  font-size: 0.9375rem;
  font-weight: 400;
}

.grade-indicador-campos input:disabled,
.grade-indicador-campos select:disabled,
.bloco-reunioes-acompanhamento select:disabled {
  background: #eaeff4;
  border-color: var(--cor-linha);
  opacity: 1;
}

.objetivo-referencia {
  border: 1px solid var(--cor-linha);
  border-left: 4px solid var(--cor-acao);
  border-radius: 12px;
  background: white;
  padding: 0.9rem 1.25rem;
  margin: 0 0 1.25rem;
}

.bloco-reunioes-acompanhamento {
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
  background: white;
  padding: 1rem 1.25rem;
}

/* Etapa 5: "o seu objetivo ainda faz sentido?" (Thiago, 2026-09-28). */
.confirmacao-objetivo {
  border: 1px solid var(--cor-linha);
  border-left: 4px solid var(--cor-acao);
  border-radius: 12px;
  background: white;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}

.confirmacao-objetivo h2 {
  font-size: 1.0625rem;
  margin: 0 0 0.5rem;
}

.objetivo-confirmacao-texto {
  margin: 0 0 0.75rem;
}

.objetivo-ajustar {
  margin-top: 0.75rem;
}

.objetivo-ajustar p {
  margin: 0 0 0.5rem;
}

/* Linha acima do título das etapas: "← Painel" à esquerda e "Como fazer um
   bom plano" à direita (Thiago, 2026-09-28). */
.cabecalho-etapa > div:first-child {
  flex: 1;
}

.linha-topo-etapa {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Página "Como fazer um bom plano" */
.texto-orientacoes h2 {
  font-size: 1.1rem;
  margin: 1.6rem 0 0.4rem;
}

.texto-orientacoes li {
  margin-bottom: 0.4rem;
  line-height: 1.5;
}

.texto-orientacoes ul ul {
  margin-top: 0.4rem;
}

.rodape-orientacoes {
  margin: 2rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cor-borda);
}

/* Painel: com o link "Como fazer um bom plano", os botões descem para a linha
   de baixo no celular em vez de espremer o texto. */
.cabecalho-painel {
  flex-wrap: wrap;
  column-gap: 1rem;
}

.acoes-painel .link-voltar {
  white-space: nowrap;
}

/* "Quanto custa" do 5W2H em reais: prefixo R$ dentro da caixa (Thiago, 2026-09-28). */
.campo-reais {
  position: relative;
  display: block;
}

.prefixo-reais {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cor-texto-suave);
  pointer-events: none;
}

.grade-5w2h-campos .campo-reais input {
  padding-left: 2.1rem;
}

/* Participantes (v1.1): editor e pessoas-chave, com a cor de cada uma */
.pagina-participantes {
  max-width: 720px;
}

.lista-participantes {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.5rem;
}

.lista-participantes li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
}

.lista-participantes.removidos li {
  color: var(--cor-texto-suave);
}

.amostra-cor-participante {
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}

.amostra-cor-participante.sem-cor {
  border: 2px solid var(--cor-borda);
  background: white;
}

.dados-participante {
  flex: 1;
  min-width: 12rem;
}

.dados-participante small {
  display: block;
  color: var(--cor-texto-suave);
  overflow-wrap: anywhere;
}

.situacao-participante {
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

.acoes-participante {
  display: flex;
  gap: 1rem;
  width: 100%;
  justify-content: flex-end;
}

.form-convite-participante {
  max-width: 420px;
}

.link-reserva-convite {
  margin: 1rem 0;
}

.link-reserva-convite input {
  width: 100%;
}

.links-topo-etapa {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.acoes-participante {
  align-items: center;
}

.form-cor-participante label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

.form-cor-participante select {
  width: auto;
}

/* Executores (Execução, passo 4a): blocos de acesso na linha */
.form-acessos-executor {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  width: 100%;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

.form-acessos-executor label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.form-acessos-executor select {
  width: auto;
}

/* As duas caixas de leitura (relatório e mapa) ficam juntas, uma embaixo da
   outra, ao lado da escolha das ações (Thiago, 2026-10-19). */
.acessos-executor-blocos {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.acessos-executor-leitura {
  width: 100%;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

/* Autoria nas Etapas 3 e 5 (v1.1): borda na cor da pessoa-chave que incluiu */
.item-com-autor {
  border-left: 5px solid;
  padding-left: 0.4rem;
  border-radius: 3px;
}

.legenda-participantes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 1rem 0;
  font-size: 0.8125rem;
  color: var(--cor-texto-medio);
}

.legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.legenda-item .amostra-cor-participante {
  width: 5px;
  height: 16px;
  border-radius: 2px;
}

.legenda-item .amostra-cor-participante.sem-cor {
  border: 1.5px dashed #8c99a8;
}

/* Modo leitura da pessoa-chave: botões travados somem (Limpar, remover item de
   outra pessoa, gerar); campos travados ficam visíveis, só para leitura. */
button.bloqueado-leitura {
  display: none;
}

/* Primeiro acesso do editor (v1.1): "Há sócios a convidar?", no mesmo jeito dos outros campos. */
.pergunta-convidar-socios {
  margin: 0;
  padding: 0;
  border: 0;
}

.pergunta-convidar-socios legend {
  padding: 0;
  font-weight: 600;
}

.pergunta-convidar-socios .texto-auxiliar {
  margin: 0.25rem 0 0.5rem;
}

.pergunta-convidar-socios label.checkbox {
  font-weight: 400;
}

/* Confirmação da transferência da condução do plano (v1.1). */
.lista-consequencias-transferencia li + li {
  margin-top: 0.5rem;
}

/* Página da remoção com repasse (Execução, passo 4c). */
.lista-repasse {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.lista-repasse li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--cor-borda);
}

.lista-repasse label {
  flex: 1 1 260px;
  min-width: 0;
}

.lista-repasse label small {
  display: block;
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
}

.lista-repasse select,
.passar-tudo-remocao select {
  width: auto;
  max-width: 100%;
}

.passar-tudo-remocao {
  align-items: flex-start;
  margin: 0.5rem 0 1rem;
}

.acoes-transferencia {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Pessoas-chave no detalhe do plano, no admin (v1.1). */
.tabela-admin .amostra-cor-participante {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4rem;
}

.acoes-participante-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Cabeçalho no celular (v1.1): logo menor e botões mais justos, para o logo,
   Anotações, o sino, "Reportar" e "Sair" caberem numa linha (360 px). */
@media (max-width: 600px) {
  .barra-marca {
    padding: 0.5rem 0.75rem;
  }

  .barra-marca {
    gap: 0.5rem;
  }

  .barra-marca > a img {
    height: 32px;
    width: auto;
  }

  .barra-marca-acoes {
    gap: 0.4rem;
  }

  .botao-sair {
    padding: 0.35rem 0;
  }
}

/* Entrevista individual (v1.1, parte 3): aviso de confidencialidade no topo. */
/* Entrevista com o plano congelado: as próprias respostas, só para ler. */
.respostas-entrevista dt {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--cor-titulo);
}

.respostas-entrevista dd {
  margin: 0.25rem 0 0;
  white-space: pre-line;
}

.aviso-entrevista-confidencial {
  padding: 0.5rem 0.75rem;
  border-left: 4px solid var(--cor-primaria-texto, #0b6a9e);
  background: var(--cor-fundo, #f4f7fa);
  font-size: 0.9rem;
}

/* Entrevista na segunda entrega visual (2026-10-16): a pergunta num cartão
   branco, com a barra de progresso; avisos e respostas no padrão das etapas. */
.conteudo-entrevista #bloco-perguntas,
.conteudo-entrevista #bloco-concluido,
.conteudo-entrevista .respostas-entrevista {
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
}

.conteudo-entrevista #bloco-perguntas[hidden],
.conteudo-entrevista #bloco-concluido[hidden] {
  display: none;
}

.conteudo-entrevista .progresso-entrevista {
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
}

.barra-entrevista {
  display: block;
  width: 100%;
  height: 6px;
  margin: 0 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--cor-linha);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

.barra-entrevista::-webkit-progress-bar {
  background: var(--cor-linha);
  border-radius: 999px;
}

.barra-entrevista::-webkit-progress-value {
  background: var(--cor-acao);
  border-radius: 999px;
}

.barra-entrevista::-moz-progress-bar {
  background: var(--cor-acao);
  border-radius: 999px;
}

.conteudo-entrevista .texto-pergunta-atual {
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--cor-titulo);
}

.conteudo-entrevista #campo-resposta-entrevista {
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  font-size: 0.9375rem;
  line-height: 1.5;
  min-height: 120px;
}

.conteudo-entrevista .navegacao-entrevista {
  justify-content: space-between;
  margin-top: 1rem;
}

.conteudo-entrevista .mensagem-conclusao-entrevista {
  padding: 0.75rem 1rem;
  background: var(--cor-swot-forca-fundo);
  color: var(--cor-swot-forca-texto);
  border-radius: 8px;
}

.conteudo-entrevista .aviso-entrevista-confidencial {
  padding: 0.65rem 0.9rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-left: 4px solid var(--cor-acao);
  border-radius: 10px;
  color: var(--cor-texto-medio);
}

.conteudo-entrevista .respostas-entrevista dt:first-child {
  margin-top: 0;
}

/* Etapa 10, Validação (v1.1, parte 4). */
.secao-validacao {
  margin: 1.5rem 0;
}

.aviso-validacao {
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--cor-swot-forca-texto);
  background: var(--cor-fundo);
}

.lista-validacao {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-validacao li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--cor-borda);
}

.situacao-validacao {
  margin-left: 0.5rem;
  color: var(--cor-texto-suave);
}

.situacao-validou {
  color: var(--cor-swot-forca-texto);
  font-weight: 600;
}

.situacao-nao-validou {
  color: var(--cor-swot-fraqueza-texto);
  font-weight: 600;
}

.motivo-validacao,
.mensagem-pedido-validacao p:last-child {
  margin: 0.3rem 0 0;
  white-space: pre-line;
}

.mensagem-pedido-validacao {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--cor-primaria-texto);
  background: var(--cor-fundo);
}

.mensagem-pedido-validacao p:first-child {
  margin: 0;
}

.form-validacao fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}

.form-validacao legend {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.opcao-validacao {
  display: block;
  margin: 0.3rem 0;
}

.form-validacao > label {
  display: block;
  margin: 0.75rem 0 0.3rem;
}

.form-validacao textarea,
.form-validacao select {
  width: 100%;
  max-width: 40rem;
  box-sizing: border-box;
}

.form-validacao button {
  margin-top: 1rem;
}

.titulo-resumo-validacao {
  margin-top: 2rem;
}

/* O form global é flex em coluna: aqui os botões ficam do tamanho do texto. */
.pagina-validacao form {
  align-items: flex-start;
}

/* Validação na segunda entrega visual (2026-10-16): cada bloco num cartão
   branco, campos no padrão e o resumo do plano em cartões com a tabela clara.
   O resumo é o mesmo do admin; o novo visual vale só aqui. */
.pagina-validacao .secao-validacao {
  padding: 1.1rem 1.25rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
}

.pagina-validacao .secao-validacao h2,
.pagina-validacao .secao-admin h2 {
  margin: 0 0 0.6rem;
  font-size: 1.125rem;
}

.pagina-validacao .aviso-validacao {
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-left: 4px solid var(--cor-swot-forca);
  border-radius: 12px;
}

.pagina-validacao .lista-validacao li {
  border-bottom-color: var(--cor-linha);
}

.pagina-validacao .lista-validacao li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pagina-validacao .mensagem-pedido-validacao {
  background: var(--cor-faixa);
  border-left-color: var(--cor-acao);
  border-radius: 0 8px 8px 0;
}

.pagina-validacao .form-validacao textarea,
.pagina-validacao .form-validacao select {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  background: white;
  font-size: 0.9375rem;
}

.pagina-validacao .titulo-resumo-validacao {
  margin: 2rem 0 0.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cor-linha);
}

.pagina-validacao .secao-admin {
  margin-bottom: 1rem;
  padding: 1.1rem 1.25rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
}

.pagina-validacao .tabela-admin {
  margin: 0.5rem 0 0;
}

.pagina-validacao .tabela-admin th,
.pagina-validacao .tabela-admin td {
  padding: 0.55rem 0.7rem;
  border-color: var(--cor-linha);
}

.pagina-validacao .tabela-admin th {
  background: var(--cor-faixa);
  color: var(--cor-titulo);
  font-weight: 600;
}

.pagina-perfil {
  max-width: 560px;
}

.pagina-perfil h2 {
  margin-top: 2rem;
}

.pagina-perfil .autosave-status {
  white-space: normal;
}

.perfil-foto {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1rem;
}

.perfil-foto-acoes .texto-auxiliar {
  margin: 0 0 0.6rem;
}

.perfil-foto-botoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.perfil-foto-status {
  margin: 0.4rem 0 0;
  color: var(--cor-erro);
  font-size: 0.9rem;
}

.perfil-foto-status:empty {
  display: none;
}

.campo-arroba {
  display: flex;
  align-items: stretch;
}

.prefixo-arroba {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  border: 1px solid var(--cor-borda);
  border-right: none;
  border-radius: 4px 0 0 4px;
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  font-weight: 400;
}

.campo-arroba input {
  flex: 1;
  min-width: 0;
  border-radius: 0 4px 4px 0;
}

.form-perfil .texto-auxiliar {
  margin: -0.5rem 0 0;
}

.form-senha-perfil {
  align-items: flex-start;
}

.form-senha-perfil label {
  align-self: stretch;
}

.perfil-leitura {
  margin: 1.5rem 0 0;
}

.perfil-leitura > div + div {
  margin-top: 0.75rem;
}

.perfil-leitura dt {
  font-weight: 600;
}

.perfil-leitura dd {
  margin: 0.15rem 0 0;
  overflow-wrap: anywhere;
}

.perfil-leitura small {
  display: block;
  color: var(--cor-texto-suave);
}

/* Recorte da foto: quadro quadrado com a imagem posicionada por transform
   (public/js/perfil-foto.js). */
.dialogo-recorte {
  width: min(400px, calc(100vw - 2rem));
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 1.25rem;
  color: var(--cor-texto);
  background: white;
}

.dialogo-recorte::backdrop {
  background: rgba(27, 31, 39, 0.45);
}

.dialogo-recorte h2 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.recorte-quadro {
  position: relative;
  width: min(280px, 100%);
  aspect-ratio: 1;
  margin: 1rem auto;
  overflow: hidden;
  border-radius: 6px;
  background: var(--cor-fundo);
  cursor: grab;
  touch-action: none;
}

.recorte-quadro.arrastando {
  cursor: grabbing;
}

/* Guia redonda: a foto aparece num círculo; o canto do quadro também vai, mas fica escondido. */
.recorte-quadro::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.recorte-imagem {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
}

.recorte-zoom {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.recorte-zoom input {
  flex: 1;
}

.recorte-status {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.recorte-status:empty {
  display: none;
}

.recorte-botoes {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* Notificações por canal (2026-10-21): tabela com um botão On|Off por canal. */
.pagina-perfil.pagina-notificacoes {
  max-width: 920px;
}

.legenda-canais {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.legenda-canais li + li {
  margin-top: 0.2rem;
}

.form-notificacoes {
  margin-top: 0.5rem;
}

.tabela-notificacoes {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
}

.tabela-notificacoes thead th {
  padding: 0.6rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-align: center;
  border-bottom: 1px solid var(--cor-borda);
}

.tabela-notificacoes thead th:first-child {
  text-align: left;
  padding-left: 1rem;
}

.tabela-notificacoes .grupo-notificacoes th {
  padding: 0.85rem 1rem 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cor-titulo);
  text-align: left;
  background: var(--cor-faixa);
  border-top: 1px solid var(--cor-borda);
}

.tabela-notificacoes tbody th[scope="row"] {
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}

.tabela-notificacoes tbody th[scope="row"] strong {
  display: block;
  font-weight: 600;
}

.tabela-notificacoes tbody th[scope="row"] small {
  display: block;
  color: var(--cor-texto-suave);
}

.tabela-notificacoes tbody tr + tr:not(.grupo-notificacoes) > * {
  border-top: 1px solid var(--cor-linha);
}

.tabela-notificacoes td {
  width: 6.5rem;
  padding: 0.5rem;
  text-align: center;
  vertical-align: middle;
}

.canal-sempre-texto {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cor-primaria-texto);
}

.canal-nenhum-texto {
  color: var(--cor-texto-suave);
}

/* Interruptor On|Off: a caixa fica por baixo (acessível pelo teclado), o
   trilho e o texto mostram o estado. */
.interruptor {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.interruptor input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.interruptor-trilho {
  position: relative;
  flex: none;
  width: 2.2rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--cor-borda);
  transition: background 0.15s;
}

.interruptor-trilho::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}

.interruptor-texto {
  min-width: 1.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-align: left;
}

.interruptor-texto::after {
  content: "Off";
}

.interruptor input:checked ~ .interruptor-trilho {
  background: var(--cor-acao);
}

.interruptor input:checked ~ .interruptor-trilho::after {
  transform: translateX(0.95rem);
}

.interruptor input:checked ~ .interruptor-texto {
  color: var(--cor-acao);
}

.interruptor input:checked ~ .interruptor-texto::after {
  content: "On";
}

.interruptor input:focus-visible ~ .interruptor-trilho {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

/* Celular: cada linha vira um cartão, com os quatro canais embaixo. */
@media (max-width: 640px) {
  .tabela-notificacoes thead {
    display: none;
  }

  .tabela-notificacoes,
  .tabela-notificacoes tbody,
  .tabela-notificacoes tr {
    display: block;
  }

  .tabela-notificacoes tbody tr:not(.grupo-notificacoes) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: 0.6rem;
  }

  .tabela-notificacoes .grupo-notificacoes th {
    display: block;
  }

  .tabela-notificacoes tbody th[scope="row"] {
    grid-column: 1 / -1;
    padding: 0.6rem 0.75rem 0.4rem;
  }

  .tabela-notificacoes tbody tr + tr:not(.grupo-notificacoes) > td {
    border-top: none;
  }

  .tabela-notificacoes td {
    width: auto;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  /* Duas linhas sempre, para os botões ficarem alinhados ("E-mail na hora" quebra). */
  .tabela-notificacoes td::before {
    content: attr(data-canal);
    display: flex;
    align-items: flex-end;
    min-height: 2.4em;
    font-size: 0.72rem;
    color: var(--cor-texto-suave);
    text-align: center;
    line-height: 1.2;
  }
}

/* Comunicados e novidades: caixa abaixo da tabela, com um botão só. */
.caixa-notificacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
}

.caixa-notificacao h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cor-titulo);
}

.caixa-notificacao .texto-auxiliar {
  margin: 0.15rem 0 0;
}

.interruptor-com-rotulo {
  flex: none;
}

.interruptor-rotulo {
  margin-left: 0.15rem;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .caixa-notificacao {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

.lista-sempre-chegam {
  margin: 0;
  padding-left: 1.25rem;
}

.lista-sempre-chegam li + li {
  margin-top: 0.35rem;
}

/* Participantes: foto ou iniciais, com um anel na cor que marca os itens da pessoa. */
.anel-participante {
  display: inline-flex;
  flex: none;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 50%;
}

.anel-participante.sem-cor {
  border-color: var(--cor-borda);
}

.arroba-participante {
  font-weight: 500;
}

/* "X" das telas laterais: volta à tela de onde a pessoa veio (partials/fechar-lateral). */
.botao-fechar-lateral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: -0.4rem -0.4rem 0 auto;
  border-radius: 50%;
  color: var(--cor-texto-suave);
  font-size: 1.75rem;
  line-height: 1;
  text-decoration: none;
}

.botao-fechar-lateral:hover,
.botao-fechar-lateral:focus-visible {
  background: white;
  color: var(--cor-titulo);
}

/* Execução (documento-referencia-projeto.md, seção 8, fase 5). Layout cru
   até o piloto: blocos simples, com as cores da paleta. */

/* Plano congelado: aviso no topo das telas do plano e convite no painel. */
/* No cinza do fundo e com a letra suave: é informação, não alerta (Thiago, 2026-10-16). */
.aviso-plano-congelado {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--cor-linha);
  border-radius: 10px;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
}

.convite-execucao {
  margin: 1.5rem 0 0;
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-primaria);
  border-radius: 4px;
}

.convite-execucao p {
  margin: 0 0 0.75rem;
}

/* Início na segunda entrega visual (2026-10-16): título como o das etapas,
   instruções do piloto na mesma linha recolhível do "Como fazer esta etapa",
   convites em cartões. A lista de etapas saiu do Início em 2026-10-19. */
.com-menu-lateral .cabecalho-painel h1 {
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.painel-instrucoes.guia-etapa {
  margin-top: 1rem;
}

.painel-instrucoes.guia-etapa > :not(summary) {
  color: var(--cor-texto-medio);
}

.rotulo-etapa {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--cor-faixa);
  font-weight: 500;
}

.rotulo-etapa-concluida {
  background: var(--cor-swot-forca-fundo);
  color: var(--cor-swot-forca-texto);
}

.convite-execucao {
  padding: 1rem 1.25rem;
  border-color: var(--cor-linha);
  border-left: 4px solid var(--cor-acao);
  border-radius: 12px;
}

.convite-pesquisa {
  padding: 0.9rem 1.15rem;
  background: #fdf8e8;
  border-color: #f1e3b0;
  border-radius: 12px;
}

/* Início como painel (Thiago, 2026-10-19; painel.ejs): saudação, o ciclo
   PDCA e duas colunas, a principal com uns 2/3. Abaixo de
   900 px, uma coluna, a principal primeiro. Cada bloco é um cartão próprio,
   para o Início personalizável de depois. */
.container.inicio {
  max-width: 1080px;
}

.com-menu-lateral .container.inicio {
  padding: 28px 40px 32px;
}

.inicio-saudacao {
  margin-bottom: 1.5rem;
}

.inicio-saudacao h1 {
  margin: 0;
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.inicio-saudacao p {
  margin: 0.3rem 0 0;
  color: var(--cor-texto-suave);
  font-size: 0.9375rem;
}

.inicio .convite-tutorial,
.inicio .missoes-teste {
  margin: 0 0 1.5rem;
}

/* Ciclo PDCA (2026-10-19): círculo de 210 px no meio, cartões nos cantos.
   Quadrantes: o módulo da vez em azul de ação com a letra branca; concluído
   em azul-claro com o check verde; em espera, azul bem claro; em breve, cinza. */
.inicio-ciclo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
  grid-template-areas: "p roda d" "a roda c";
  gap: 12px 16px;
  align-items: center;
  margin: 0 0 1.5rem;
}

.ciclo-roda {
  grid-area: roda;
  width: 210px;
  height: 210px;
}

.ciclo-quadrante path {
  stroke: var(--cor-fundo);
  stroke-width: 4;
}

.ciclo-quadrante text {
  font-size: 34px;
  font-weight: 600;
  font-family: Inter, system-ui, sans-serif;
}

.ciclo-quadrante.estado-foco path { fill: var(--cor-acao); }
.ciclo-quadrante.estado-foco text { fill: #fff; }
.ciclo-quadrante.estado-concluido path { fill: var(--cor-foco); }
.ciclo-quadrante.estado-concluido text { fill: var(--cor-titulo); }
.ciclo-quadrante.estado-espera path { fill: var(--cor-acao-clara); }
.ciclo-quadrante.estado-espera text { fill: #5f8fae; }
.ciclo-quadrante.estado-breve path { fill: #eef1f4; }
.ciclo-quadrante.estado-breve text { fill: var(--menu-texto-bloq); }

.ciclo-roda a:hover .ciclo-quadrante path {
  filter: brightness(0.96);
}

.ciclo-check-fundo { fill: var(--cor-swot-forca); }

.ciclo-check {
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ciclo-centro { fill: #fff; }

.ciclo-seta,
.ciclo-seta-ponta {
  fill: none;
  stroke: var(--cor-titulo);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ciclo-seta-ponta { stroke-width: 2; }

.ciclo-cartao {
  display: flex;
  gap: 0.6rem;
  min-height: 84px;
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
  color: var(--cor-texto-suave);
  text-decoration: none;
}

.ciclo-p { grid-area: p; }
.ciclo-d { grid-area: d; }
.ciclo-c { grid-area: c; }
.ciclo-a { grid-area: a; }

a.ciclo-cartao:hover,
a.ciclo-cartao:focus-visible {
  border-color: var(--cor-acao);
}

.ciclo-cartao.estado-foco {
  border: 1.5px solid var(--cor-acao);
}

.ciclo-cartao.estado-breve {
  background: transparent;
  border-style: dashed;
  border-color: var(--cor-borda);
}

.ciclo-texto {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.ciclo-texto strong {
  color: var(--cor-titulo);
  font-size: 0.95rem;
  font-weight: 600;
}

.estado-breve .ciclo-texto strong { color: var(--cor-texto-suave); }
.ciclo-texto .ok { color: var(--cor-swot-forca-texto); }
.ciclo-texto .forte { color: var(--cor-texto-medio); font-weight: 500; }
.ciclo-texto .alerta { color: var(--cor-erro); font-weight: 600; }
.ciclo-texto .destaque { color: var(--cor-acao); font-weight: 600; }

.ciclo-barra {
  display: block;
  height: 6px;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: var(--cor-linha);
  overflow: hidden;
}

.ciclo-barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cor-swot-forca);
}

/* A letra só aparece no celular, onde o cartão fica longe do quadrante. */
.ciclo-letra {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
}

.estado-foco .ciclo-letra { background: var(--cor-acao); color: #fff; }
.estado-concluido .ciclo-letra { background: var(--cor-foco); color: var(--cor-titulo); }
.estado-espera .ciclo-letra { background: var(--cor-acao-clara); color: #5f8fae; }
.estado-breve .ciclo-letra { background: #eef1f4; color: var(--menu-texto-bloq); }

@media (max-width: 640px) {
  .inicio-ciclo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "roda" "p" "d" "c" "a";
    gap: 8px;
  }

  .ciclo-roda {
    width: 150px;
    height: 150px;
    justify-self: center;
    margin-bottom: 0.25rem;
  }

  .ciclo-cartao {
    min-height: 0;
    align-items: center;
  }

  .ciclo-letra {
    display: inline-flex;
  }
}

.inicio-grade {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.inicio-principal,
.inicio-lateral {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.inicio-cartao {
  padding: 1rem 1.25rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
}

.inicio-cartao > p,
.inicio-cartao > ul {
  margin: 0 0 0.5rem;
}

.inicio-cartao > :last-child {
  margin-bottom: 0;
}

.inicio .convite-execucao,
.inicio .convite-pesquisa {
  margin: 0;
}

.inicio-rotulo {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.inicio-plano-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--cor-titulo);
  font-size: 1.125rem;
  font-weight: 600;
}

.inicio-plano-titulo .rotulo-etapa {
  margin-left: 0;
}

.inicio-barra {
  height: 8px;
  margin: 0.25rem 0 0.75rem;
  border-radius: 999px;
  background: var(--cor-linha);
  overflow: hidden;
}

.inicio-barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cor-swot-forca);
}

.inicio-cartao .botao-avancar {
  margin-top: 0.5rem;
}

.inicio-tarefas,
.inicio-avisos,
.inicio-pessoas {
  list-style: none;
  padding: 0;
}

.inicio-tarefas li + li,
.inicio-avisos li + li,
.inicio-pessoas li + li {
  border-top: 1px solid var(--cor-linha);
}

.inicio-tarefas a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  color: var(--cor-texto);
  text-decoration: none;
}

.inicio-tarefas a:hover .inicio-tarefa-texto,
.inicio-tarefas a:focus-visible .inicio-tarefa-texto {
  color: var(--cor-primaria-texto);
}

.inicio-tarefa-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-weight: 500;
}

.inicio-tarefa-texto small {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
}

.inicio-tarefas .etiqueta-prazo {
  flex-shrink: 0;
  margin-left: 0;
  white-space: nowrap;
}

.inicio-tarefas .etiqueta-prazo:not(.prazo-vencida):not(.prazo-vencendo) {
  background: var(--cor-faixa);
  color: var(--cor-texto-suave);
  font-weight: 500;
}

.inicio-mais {
  font-size: 0.875rem;
}

.inicio-numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.inicio-numeros a {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.15rem;
  padding: 0.75rem;
  border-radius: 10px;
  background: var(--cor-faixa);
  color: var(--cor-texto-suave);
  font-size: 0.8125rem;
  text-decoration: none;
}

.inicio-numeros strong {
  color: var(--cor-titulo);
  font-size: 1.5rem;
  line-height: 1.1;
}

.inicio-numeros a:hover,
.inicio-numeros a:focus-visible {
  box-shadow: inset 0 0 0 1px var(--cor-acao);
}

.inicio-numeros a.alerta {
  background: #fde8e8;
}

.inicio-numeros a.alerta strong {
  color: var(--cor-erro);
}

.inicio-avisos a {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.9rem;
}

.inicio-pessoas li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--cor-texto-medio);
}

.inicio-pessoas strong {
  color: var(--cor-titulo);
  font-weight: 600;
}

.inicio-lateral .inicio-cartao > p {
  font-size: 0.9rem;
}

.inicio .painel-instrucoes.guia-etapa {
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .inicio-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .com-menu-lateral .container.inicio {
    padding: 1.25rem 1rem 1.5rem;
  }

  .inicio-numeros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Perfil: como funcionam o acesso e os créditos (vinha do Início). */
.perfil-acesso {
  padding-left: 1.25rem;
  color: var(--cor-texto-medio);
  font-size: 0.9375rem;
}

.perfil-acesso li + li {
  margin-top: 0.5rem;
}

/* Início da execução */
.secao-inicio {
  margin: 1.5rem 0;
}

.pendencias-inicio {
  list-style: none;
  margin: 0;
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
}

.pendencias-inicio li {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.marca-pendencia {
  flex: 0 0 1.25rem;
  text-align: center;
  font-weight: 700;
}

.pendencia-ok .marca-pendencia {
  color: var(--cor-swot-forca-texto);
}

.pendencia-aberta .marca-pendencia {
  color: var(--cor-swot-fraqueza-texto);
}

.falta-pendencia {
  display: block;
  color: var(--cor-swot-fraqueza-texto);
}

.card-inicio-acao {
  margin-bottom: 1rem;
  padding: 1rem;
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
}

.card-inicio-acao h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.detalhes-inicio-acao {
  margin: 0 0 0.75rem;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

/* "Sem tarefas…" logo abaixo do campo: sem a margem negativa do .texto-auxiliar,
   que fazia o texto subir por cima do select. */
.card-inicio-acao > .texto-auxiliar {
  margin: 0.75rem 0 0;
}

/* Responsável e Fim da ação lado a lado; prazo vazio fica marcado (é pendência). */
.campos-inicio-acao {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.campo-prazo-inicio input,
.tabela-inicio-tarefas input[type="date"] {
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
  font-weight: 400;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
}

.campo-prazo-inicio input:invalid,
.tabela-inicio-tarefas input[type="date"]:invalid {
  border-color: var(--cor-swot-fraqueza-texto);
  background: #fdf3ee;
}

.campo-responsavel,
.linha-reunioes-inicio label {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.campo-responsavel select,
.linha-reunioes-inicio select,
.linha-reunioes-inicio input {
  min-width: 14rem;
  max-width: 100%;
  padding: 0.35rem 0.5rem;
  font-weight: 400;
}

.tabela-inicio-tarefas,
.tabela-execucao {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabela-inicio-tarefas {
  margin-top: 0.75rem;
}

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

.tabela-inicio-tarefas th,
.tabela-execucao th {
  background: #f1f5f9;
  font-weight: 600;
}

.tabela-inicio-tarefas select {
  min-width: 14rem;
  max-width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
}

.tarefa-sem-responsavel td:first-child {
  box-shadow: inset 4px 0 0 var(--cor-swot-fraqueza);
}

.acoes-definidas-inicio {
  margin-top: 1rem;
}

.acoes-definidas-inicio summary {
  margin-bottom: 0.75rem;
  color: var(--cor-primaria-texto);
  font-weight: 600;
  cursor: pointer;
}

/* Pessoas do plano no Início (Execução, passo 4b): uma linha por pessoa
   citada no "Quem"; a que ainda pede escolha fica marcada, como a tarefa sem
   responsável. */
.lista-pessoas-inicio {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.pessoa-inicio {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
}

.pessoa-inicio-aberta {
  box-shadow: inset 4px 0 0 var(--cor-swot-fraqueza);
}

.dados-pessoa-inicio {
  flex: 1 1 220px;
  min-width: 0;
}

/* Sem a margem negativa de .texto-auxiliar, que sobrepunha "No plano" à linha de cima. */
.dados-pessoa-inicio small {
  display: block;
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
}

.escolha-pessoa-inicio,
.convidado-inicio {
  flex: 2 1 320px;
  min-width: 0;
}

.convidado-inicio p {
  margin: 0 0 0.4rem;
}

.convidado-inicio small {
  margin-left: 0.4rem;
  color: var(--cor-texto-suave);
}

.form-destino-pessoa {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Os formulários são coluna por padrão: aqui os botões ficam do tamanho do texto. */
.convidado-inicio form,
.reinterpretar-inicio {
  align-items: flex-start;
}

.form-destino-pessoa select {
  width: auto;
  max-width: 100%;
}

.form-convite-inicio {
  max-width: 420px;
  margin-top: 0.75rem;
}

.incluir-pessoa-inicio summary {
  color: var(--cor-primaria-texto);
  font-weight: 600;
  cursor: pointer;
}

.sugestao-responsavel {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--cor-swot-fraqueza-texto);
}

.linha-reunioes-inicio {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.secao-iniciar {
  padding: 1rem;
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
}

.secao-iniciar h2 {
  margin-top: 0;
}

.secao-iniciar form {
  align-items: flex-start;
}

.secao-iniciar [data-aviso-iniciar] {
  margin: 0.5rem 0 0;
}

.secao-iniciar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Lista de tarefas */
.resumo-execucao {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.grupo-resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rotulo-resumo {
  color: var(--cor-texto-suave);
  font-weight: 600;
}

.filtros-execucao {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
}

/* Cada filtro abre uma lista de caixas (details/summary), no jeito do Excel. */
.filtro-multiplo {
  position: relative;
}

.filtro-multiplo summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 11rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  background: white;
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
}

.filtro-multiplo summary::-webkit-details-marker {
  display: none;
}

.filtro-multiplo summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--cor-texto-suave);
}

.nome-filtro {
  font-weight: 600;
}

.resumo-filtro {
  max-width: 14rem;
  overflow: hidden;
  color: var(--cor-texto-suave);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filtro-ativo summary {
  border-color: var(--cor-primaria);
  box-shadow: inset 0 0 0 1px var(--cor-primaria);
}

.filtro-ativo .resumo-filtro {
  color: var(--cor-primaria-texto);
}

.painel-filtro {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.25rem);
  left: 0;
  width: 16rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  background: white;
  box-shadow: 0 6px 18px rgba(27, 31, 39, 0.12);
}

.painel-filtro-largo {
  width: 24rem;
}

.painel-filtro .opcao-filtro {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.2rem 0;
  font-size: 0.9rem;
  font-weight: 400;
  cursor: pointer;
}

.painel-filtro .opcao-filtro input {
  margin-top: 0.2rem;
}

.painel-filtro .opcao-todos {
  margin-bottom: 0.25rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--cor-borda);
  font-weight: 600;
}

.periodo-filtro {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--cor-borda);
}

.periodo-filtro label {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
}

.periodo-filtro input {
  width: 100%;
  min-width: 0;
  padding: 0.25rem;
}

[data-filtro="prazo"] .painel-filtro {
  width: 20rem;
  overflow-x: hidden;
}

/* Mesma altura dos filtros: sem a margem de baixo do .botao-secundario e com a
   mesma altura de linha do summary. */
.filtros-execucao .botao-secundario {
  margin: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.painel-filtro .texto-auxiliar {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
}

.painel-filtro .link-botao {
  margin-top: 0.4rem;
  font-size: 0.85rem;
}

.tabela-execucao {
  background: white;
  border: 1px solid var(--cor-borda);
}

.tabela-execucao th button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.tabela-execucao th[aria-sort="ascending"] button::after {
  content: " ▲";
  font-size: 0.7em;
}

.tabela-execucao th[aria-sort="descending"] button::after {
  content: " ▼";
  font-size: 0.7em;
}

.tabela-execucao tr.linha-vencida td:first-child {
  box-shadow: inset 4px 0 0 var(--cor-erro);
}

.tabela-execucao tr.linha-vencendo td:first-child {
  box-shadow: inset 4px 0 0 #d97706;
}

.pessoa-execucao {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Status: cinza, azul e verde; prazo: vermelho (vencida) e âmbar (vencendo). */
.etiqueta-status,
.etiqueta-prazo {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.etiqueta-prazo {
  margin-left: 0.35rem;
}

.resumo-execucao .etiqueta-prazo {
  margin-left: 0;
}

.prazo-no_prazo {
  background: white;
  color: var(--cor-texto-suave);
  box-shadow: inset 0 0 0 1px var(--cor-borda);
}

.status-nao_iniciada {
  background: #eef1f4;
  color: var(--cor-texto-suave);
}

.status-em_andamento {
  background: #e0eff8;
  color: var(--cor-primaria-texto);
}

.status-ajuda {
  background: #f3e6f0;
  color: var(--cor-swot-ameaca-texto);
}

.status-concluida {
  background: #e7f0dc;
  color: var(--cor-swot-forca-texto);
}

.prazo-vencida {
  background: #fde8e8;
  color: var(--cor-erro);
}

.prazo-vencendo {
  background: #fdf0d5;
  color: #92400e;
}

.seletor-status {
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-weight: 600;
}

/* "Por status" (2026-10-16): um grupo por status da ação, com as contagens
   das tarefas em colunas estreitas; zero em cinza, vencida em vermelho. */
.legenda-por-status {
  margin: 0.25rem 0 1rem;
}

.grupo-por-status {
  margin-bottom: 1.75rem;
}

.titulo-grupo-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.titulo-grupo-status .etiqueta-status {
  font-size: 0.9rem;
  padding: 0.15rem 0.7rem;
}

.contagem-grupo-status {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  font-weight: 400;
}

.tabela-por-status th.coluna-numero,
.tabela-por-status td.coluna-numero {
  text-align: center;
  white-space: nowrap;
}

/* Em tela média, a tabela rola de lado em vez de espremer o nome da ação. */
.rolagem-por-status {
  overflow-x: auto;
}

/* Larguras fixas: as tabelas dos grupos ficam com as colunas alinhadas. */
.tabela-por-status {
  table-layout: fixed;
  min-width: 56rem;
}

.tabela-por-status th.coluna-responsavel {
  width: 10rem;
}

.tabela-por-status th.coluna-periodo {
  width: 9.5rem;
}

/* Início e Fim numa célula só, um embaixo do outro. */
.tabela-por-status .celula-periodo span {
  display: block;
  white-space: nowrap;
}

.tabela-por-status th.coluna-numero,
.tabela-por-status td.coluna-numero {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

.tabela-por-status th.coluna-numero {
  width: 4.5rem;
  font-size: 0.75rem;
  white-space: normal;
}

.tabela-por-status td.celula-sem-tarefas {
  text-align: left;
}

.tabela-por-status .numero-zero {
  color: #b4bdc8;
}

.tabela-por-status .numero-vencida {
  color: var(--cor-erro);
  font-weight: 600;
}

.tabela-por-status .numero-ajuda {
  color: var(--cor-swot-ameaca-texto);
  font-weight: 600;
}

.percentual-status {
  font-weight: 600;
}

.barra-percentual {
  display: block;
  height: 4px;
  margin: 0.3rem auto 0;
  max-width: 4.5rem;
  border-radius: 2px;
  background: #e5e9ee;
  overflow: hidden;
}

.barra-percentual span {
  display: block;
  height: 100%;
  background: var(--cor-swot-forca-texto);
}

@media (max-width: 640px) {
  /* No cartão, as contagens ficam lado a lado, cada uma com o seu rótulo. */
  .tabela-por-status td.coluna-numero {
    display: inline-block;
    width: 32%;
    padding-left: 0.5rem;
    text-align: left;
    vertical-align: top;
  }

  .tabela-por-status td.coluna-numero::before {
    font-weight: 400;
  }

  .tabela-por-status td.celula-sem-tarefas {
    display: block;
  }

  .tabela-por-status {
    min-width: 0;
  }

  .tabela-por-status .barra-percentual {
    margin-left: 0;
  }
}

/* Tela estreita: cada linha vira um cartão, com o rótulo de cada campo. */
@media (max-width: 640px) {
  .tabela-inicio-tarefas thead,
  .tabela-execucao thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabela-inicio-tarefas tr,
  .tabela-execucao tr {
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cor-borda);
  }

  .tabela-inicio-tarefas td,
  .tabela-execucao td {
    display: block;
    padding: 0.2rem 0.5rem;
    border: 0;
  }

  .tabela-inicio-tarefas td::before,
  .tabela-execucao td::before {
    content: attr(data-rotulo);
    display: block;
    color: var(--cor-texto-suave);
    font-size: 0.75rem;
  }

  .tabela-execucao tr.linha-vencida td:first-child,
  .tabela-execucao tr.linha-vencendo td:first-child {
    box-shadow: none;
  }

  .tabela-execucao tr.linha-vencida {
    box-shadow: inset 4px 0 0 var(--cor-erro);
  }

  .tabela-execucao tr.linha-vencendo {
    box-shadow: inset 4px 0 0 #d97706;
  }

  .campo-responsavel,
  .linha-reunioes-inicio label {
    width: 100%;
  }

  /* Filtros: um por linha, com a lista de caixas abrindo embaixo, sem sobrepor. */
  .filtro-multiplo {
    width: 100%;
  }

  .filtro-multiplo summary {
    width: 100%;
  }

  .painel-filtro,
  .painel-filtro-largo {
    position: static;
    width: auto;
    margin-top: 0.25rem;
    box-shadow: none;
  }

  .campo-responsavel select,
  .linha-reunioes-inicio select,
  .linha-reunioes-inicio input,
  .campo-prazo-inicio input,
  .tabela-inicio-tarefas select,
  .tabela-inicio-tarefas input[type="date"] {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

/* Execução, passo 3: abas, Kanban, "Por ação" e tela da ação */

/* O display dos cartões, blocos e formulários não pode vencer o [hidden] dos filtros. */
.pagina-execucao [hidden] {
  display: none !important;
}

.texto-execucao-iniciada {
  margin: 0.5rem 0 0;
}

.pagina-execucao textarea[data-auto-altura] {
  overflow: hidden;
}

.aviso-execucao {
  display: block;
  margin: 0.75rem 0 0;
}

.aviso-execucao-erro {
  margin: 0.75rem 0 0;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  background: #fde8e8;
  color: var(--cor-erro);
}

.barra-visoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
  border-bottom: 1px solid var(--cor-borda);
}

.abas-execucao {
  display: flex;
  gap: 0.25rem;
}

.aba-execucao {
  margin-bottom: -1px;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 6px 6px 0 0;
  color: var(--cor-texto-suave);
  font-weight: 600;
  text-decoration: none;
}

.aba-execucao:hover {
  color: var(--cor-primaria-texto);
}

.aba-execucao-ativa {
  border-color: var(--cor-borda);
  border-bottom-color: var(--cor-fundo);
  background: var(--cor-fundo);
  color: var(--cor-titulo);
}

.botao-nova-acao,
.bloco-nova-acao {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--cor-primaria-texto);
  border-radius: 4px;
  background: white;
  color: var(--cor-primaria-texto);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.barra-visoes .botao-nova-acao {
  margin-bottom: 0.4rem;
}

/* Cartões (Kanban e "Por ação") */
.cartao-execucao {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  background: white;
  font-size: 0.9rem;
}

.cartao-execucao[draggable="true"] {
  cursor: grab;
}

.cartao-arrastando {
  opacity: 0.5;
}

.cartao-vencida {
  box-shadow: inset 4px 0 0 var(--cor-erro);
}

.cartao-vencendo {
  box-shadow: inset 4px 0 0 #d97706;
}

.texto-cartao {
  margin: 0;
  overflow-wrap: anywhere;
}

.acao-cartao {
  color: var(--cor-primaria-texto);
  font-size: 0.8rem;
}

.marca-sem-tarefas {
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
  font-style: italic;
}

.info-cartao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
}

.info-cartao .pessoa-execucao {
  color: var(--cor-texto);
}

.rodape-cartao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.rodape-cartao .etiqueta-prazo {
  margin-left: 0;
}

.cartao-execucao .seletor-status {
  font-size: 0.8rem;
}

.form-cartao {
  gap: 0.35rem;
}

.form-cartao textarea,
.adicao-rapida-tarefa [name="o_que"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.9rem;
  resize: none;
}

.form-cartao textarea:hover,
.form-cartao textarea:focus {
  border-color: var(--cor-borda);
}

.campos-cartao {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.campos-cartao select,
.campos-cartao input {
  flex: 1 1 8rem;
  min-width: 0;
  padding: 0.2rem 0.3rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-size: 0.8rem;
}

/* Kanban */
.kanban-execucao {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.coluna-kanban {
  min-height: 8rem;
  padding: 0.6rem;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: #eef2f6;
}

.coluna-alvo {
  border-color: var(--cor-primaria);
  box-shadow: inset 0 0 0 1px var(--cor-primaria);
}

.titulo-coluna-kanban {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

.contagem-coluna {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.cartoes-coluna,
.cartoes-bloco {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 2rem;
}

/* "Por ação": blocos lado a lado, no estilo do Trello */
.blocos-execucao {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 0.75rem;
}

.bloco-acao {
  display: flex;
  flex: 0 0 18rem;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.6rem;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: #eef2f6;
}

.cabecalho-bloco h2 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  line-height: 1.3;
}

.cabecalho-bloco h2 a {
  color: var(--cor-titulo);
  text-decoration: none;
}

.cabecalho-bloco h2 a:hover {
  text-decoration: underline;
}

.cabecalho-bloco .rodape-cartao {
  margin-top: 0.4rem;
}

.progresso-bloco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
}

/* Adição rápida: descrição, responsável e Até (obrigatórios) e o botão Incluir. */
.adicao-rapida-tarefa {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.adicao-rapida-tarefa input,
.adicao-rapida-tarefa select {
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  background: white;
}

.campos-adicao-tarefa {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.campos-adicao-tarefa select,
.campos-adicao-tarefa input {
  flex: 1 1 8rem;
  min-width: 0;
  padding: 0.2rem 0.3rem;
  font-size: 0.8rem;
}

.botao-incluir-tarefa {
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--cor-borda);
  background: white;
  color: var(--cor-titulo);
  font-size: 0.8rem;
}

.botao-incluir-tarefa:hover {
  background: #f1f5f9;
}

/* Na tela da ação, nas mesmas colunas da lista de tarefas. */
.adicao-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem 9.5rem 14rem;
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0 0.5rem;
}

.adicao-linha .campos-adicao-tarefa {
  display: contents;
}

.adicao-linha input,
.adicao-linha select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.4rem;
  font-size: 0.9rem;
}

.adicao-linha .botao-incluir-tarefa {
  justify-self: start;
  font-size: 0.85rem;
}

.bloco-nova-acao {
  flex: 0 0 auto;
  align-self: flex-start;
}

/* Lista: canceladas */
.status-cancelada {
  background: #f1f1f1;
  color: #6b7280;
}

.linha-cancelada .texto-linha,
.texto-cancelado,
.titulo-cancelado {
  color: var(--cor-texto-suave);
  text-decoration: line-through;
}

/* Tela da ação: mais larga que o .container, para a linha da tarefa caber. */
.pagina-acao-execucao {
  max-width: 1040px;
}

.etiquetas-acao {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0 0;
}

.etiqueta-acao {
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: white;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
}

.aviso-acao-cancelada {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--cor-borda);
  border-left: 4px solid #6b7280;
  border-radius: 4px;
  background: white;
}

.aviso-acao-cancelada p {
  margin: 0 0 0.5rem;
}

.aviso-acao-cancelada form {
  align-items: flex-start;
}

.aviso-acao-cancelada .botao-secundario {
  margin: 0;
}

.secao-acao-execucao {
  margin: 1.25rem 0 0;
  padding: 1rem;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  background: white;
}

.form-acao-execucao fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-acao-execucao .campo-largo {
  grid-column: 1 / -1;
}

.form-acao-execucao textarea,
.form-acao-execucao input,
.form-acao-execucao select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 400;
  resize: vertical;
}

.form-acao-execucao fieldset:disabled textarea,
.form-acao-execucao fieldset:disabled input,
.form-acao-execucao fieldset:disabled select {
  background: #f8fafc;
  color: var(--cor-texto);
}

.botoes-nova-acao {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cabecalho-tarefas-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}

.cabecalho-tarefas-acao h2 {
  margin: 0;
  font-size: 1.1rem;
}

/* Sem a margem negativa do .texto-auxiliar, que subia o texto sobre o campo. */
.secao-acao-execucao > .texto-auxiliar {
  margin: 0.4rem 0 0;
}

.status-acao-sem-tarefas {
  margin: 0.5rem 0;
}

.status-acao-sem-tarefas .texto-auxiliar {
  margin: 0 0 0.4rem;
}

.lista-tarefas-acao {
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}

.titulos-tarefas-acao,
.linha-tarefa-acao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: 0.5rem 0.75rem;
  align-items: start;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--cor-borda);
}

.titulos-tarefas-acao {
  grid-template-columns: minmax(0, 1fr) 12rem 9.5rem 14rem;
  background: #f1f5f9;
  font-size: 0.85rem;
  font-weight: 600;
}

.form-tarefa-acao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem 9.5rem;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.9rem;
}

.form-tarefa-acao textarea,
.form-tarefa-acao select,
.form-tarefa-acao input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-size: 0.9rem;
  resize: none;
}

.controles-tarefa-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}

.controles-tarefa-acao .etiqueta-prazo {
  margin-left: 0;
}

.form-botao-tarefa {
  display: inline;
}

.form-botao-tarefa .link-botao {
  font-size: 0.85rem;
}

.tarefas-canceladas {
  margin-top: 1rem;
}

.tarefas-canceladas summary,
.cancelar-acao summary {
  color: var(--cor-primaria-texto);
  font-weight: 600;
  cursor: pointer;
}

.tarefas-canceladas ul {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.tarefas-canceladas li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--cor-borda);
  font-size: 0.9rem;
}

.tarefas-canceladas .texto-auxiliar {
  margin: 0;
}

.cancelar-acao form {
  align-items: flex-start;
  margin-top: 0.75rem;
}

.cancelar-acao label {
  width: 100%;
  font-weight: 500;
}

.cancelar-acao textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
}

.botao-perigo {
  background: var(--cor-erro);
}

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

  .titulos-tarefas-acao {
    display: none;
  }

  .linha-tarefa-acao {
    grid-template-columns: 1fr;
  }

  .form-tarefa-acao {
    grid-template-columns: 1fr 1fr;
  }

  .form-tarefa-acao textarea {
    grid-column: 1 / -1;
  }

  .adicao-linha {
    grid-template-columns: 1fr 1fr;
  }

  .adicao-linha [name="o_que"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .blocos-execucao {
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
  }

  .bloco-acao {
    flex-basis: auto;
  }

  .form-acao-execucao fieldset {
    grid-template-columns: 1fr;
  }

  .aba-execucao {
    padding: 0.5rem 0.6rem;
  }
}


/* Execução na segunda entrega visual (2026-10-16): abas com o sublinhado azul,
   colunas e blocos sem borda, cartões brancos de canto arredondado, tabela e
   seções em cartões, campos no padrão das etapas. */
.barra-visoes {
  border-bottom-color: var(--cor-linha);
}

.aba-execucao {
  padding: 0.55rem 0.9rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.aba-execucao:hover {
  color: var(--cor-acao);
}

.aba-execucao-ativa {
  border-bottom-color: var(--cor-acao);
  background: transparent;
  color: var(--cor-acao);
}

.botao-nova-acao,
.bloco-nova-acao {
  padding: 0.4rem 0.85rem;
  border-color: var(--cor-acao);
  border-radius: 8px;
  color: var(--cor-acao);
}

.botao-nova-acao:hover,
.bloco-nova-acao:hover {
  background: var(--cor-acao-clara);
}

.coluna-kanban,
.bloco-acao {
  padding: 0.75rem;
  border-color: transparent;
  border-radius: 12px;
  background: #e8edf2;
}

.coluna-kanban.coluna-alvo {
  border-color: var(--cor-acao);
  box-shadow: inset 0 0 0 1px var(--cor-acao);
  background: var(--cor-acao-clara);
}

.titulo-coluna-kanban {
  padding: 0 0.15rem;
}

.cartao-execucao {
  padding: 0.75rem 0.8rem;
  border-color: var(--cor-linha);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.cartao-execucao.cartao-vencida {
  box-shadow: inset 4px 0 0 var(--cor-erro), 0 1px 2px rgba(15, 23, 42, 0.05);
}

.cartao-execucao.cartao-vencendo {
  box-shadow: inset 4px 0 0 #d97706, 0 1px 2px rgba(15, 23, 42, 0.05);
}

.acao-cartao,
.tabela-execucao td[data-rotulo="Ação"] a {
  color: var(--cor-texto-medio);
  text-decoration: none;
}

.acao-cartao:hover,
.tabela-execucao td[data-rotulo="Ação"] a:hover {
  color: var(--cor-acao);
  text-decoration: underline;
}

/* O seletor de status não pode passar da largura do cartão. */
.cartao-execucao select,
.cartao-execucao input {
  max-width: 100%;
  box-sizing: border-box;
}

.seletor-status {
  border-radius: 6px;
}

.campos-cartao select,
.campos-cartao input,
.campos-adicao-tarefa select,
.campos-adicao-tarefa input,
.adicao-rapida-tarefa input,
.adicao-rapida-tarefa select {
  border-color: var(--cor-borda-campo);
  border-radius: 6px;
}

.botao-incluir-tarefa {
  border-color: var(--cor-borda-campo);
  border-radius: 6px;
}

.tabela-execucao {
  border-collapse: separate;
  border-spacing: 0;
  border-color: var(--cor-linha);
  border-radius: 12px;
}

.tabela-execucao th,
.tabela-execucao td {
  padding: 0.65rem 0.75rem;
  border-bottom-color: var(--cor-linha);
}

.tabela-execucao th {
  background: var(--cor-faixa);
  color: var(--cor-texto-medio);
  font-size: 0.8125rem;
}

.tabela-execucao th:first-child {
  border-top-left-radius: 12px;
}

.tabela-execucao th:last-child {
  border-top-right-radius: 12px;
}

.tabela-execucao tbody tr:last-child td {
  border-bottom: 0;
}

.secao-acao-execucao {
  padding: 1.25rem 1.5rem;
  border-color: var(--cor-linha);
  border-radius: 12px;
}

.etiqueta-acao {
  border-color: var(--cor-linha);
}

/* Os títulos das seções da ação no mesmo tamanho do "Tarefas". */
.secao-anotacoes-acao > h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.form-acao-execucao textarea,
.form-acao-execucao input,
.form-acao-execucao select,
.form-tarefa-acao textarea,
.form-tarefa-acao select,
.form-tarefa-acao input,
.cancelar-acao textarea {
  border-color: var(--cor-borda-campo);
  border-radius: 8px;
}

.form-acao-execucao textarea,
.form-acao-execucao input,
.form-acao-execucao select {
  padding: 0.5rem 0.7rem;
}

.form-acao-execucao fieldset:disabled textarea,
.form-acao-execucao fieldset:disabled input,
.form-acao-execucao fieldset:disabled select {
  background: #eaeff4;
  border-color: var(--cor-linha);
  opacity: 1;
}

.titulos-tarefas-acao {
  background: var(--cor-faixa);
  color: var(--cor-texto-medio);
  font-size: 0.8125rem;
  border-radius: 8px 8px 0 0;
}

.titulos-tarefas-acao,
.linha-tarefa-acao,
.tarefas-canceladas li {
  border-bottom-color: var(--cor-linha);
}

.aviso-acao-cancelada {
  border-color: var(--cor-linha);
  border-left-color: #6b7280;
  border-radius: 12px;
}

/* A lista de tarefas da ação empilha pela largura da seção, não da janela: com
   o menu lateral aberto, a descrição ficava espremida numa coluna estreita. */
.secao-acao-execucao[data-grupo-acao] {
  container-type: inline-size;
}

@container (max-width: 760px) {
  .titulos-tarefas-acao {
    display: none;
  }

  .linha-tarefa-acao {
    grid-template-columns: 1fr;
  }

  .form-tarefa-acao {
    grid-template-columns: 1fr 1fr;
  }

  .form-tarefa-acao textarea {
    grid-column: 1 / -1;
  }

  .adicao-linha {
    grid-template-columns: 1fr 1fr;
  }

  .adicao-linha [name="o_que"] {
    grid-column: 1 / -1;
  }
}

/* Com o menu lateral aberto, quatro colunas do Kanban não cabem até 1100px. */
@media (min-width: 901px) and (max-width: 1100px) {
  .com-menu-lateral:not(.menu-recolhido) .kanban-execucao {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Início da execução: pendências, ações e "Iniciar" em cartões; títulos das
   seções no tamanho dos das etapas. */
.pagina-inicio-execucao .secao-inicio > h2 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.pendencias-inicio,
.card-inicio-acao,
.secao-iniciar {
  border-color: var(--cor-linha);
  border-radius: 12px;
}

.pendencias-inicio {
  padding: 0.9rem 1.25rem;
}

.card-inicio-acao,
.secao-iniciar {
  padding: 1.25rem 1.5rem;
}

.campo-responsavel select,
.linha-reunioes-inicio select,
.linha-reunioes-inicio input,
.tabela-inicio-tarefas select,
.campo-prazo-inicio input,
.tabela-inicio-tarefas input[type="date"] {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
}

.tabela-inicio-tarefas th,
.tabela-inicio-tarefas td {
  border-bottom-color: var(--cor-linha);
}

.tabela-inicio-tarefas th {
  background: var(--cor-faixa);
  color: var(--cor-texto-medio);
  font-size: 0.8125rem;
}

/* No celular, as linhas da tabela já são cartões: mantém o espaçamento justo. */
@media (max-width: 640px) {
  .tabela-execucao td {
    padding: 0.2rem 0.75rem;
  }

  .aba-execucao {
    padding: 0.5rem 0.6rem;
  }
}

/* Execução: anotações nas tarefas e nas ações (passo 5a). O ícone com a
   contagem nos cartões, nas linhas e na tela da ação (em destaque quando há
   novas); o painel da tarefa, que reaproveita o .painel-anotacoes do bloco do
   plano (anotacoes.css), e a seção no pé da tela da ação. */
.botao-anotacoes-item {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.botao-anotacoes-item svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.botao-anotacoes-item:hover,
.botao-anotacoes-item:focus-visible {
  background: var(--cor-fundo);
  color: var(--cor-primaria-texto);
}

.botao-anotacoes-item.sem-anotacoes {
  opacity: 0.6;
}

.botao-anotacoes-item.com-novas,
.botao-anotacoes-item.com-novas:hover {
  background: var(--cor-primaria-texto);
  color: #fff;
  opacity: 1;
}

/* Texto da tarefa que abre o painel: parece texto, sublinha ao passar. */
.texto-cartao a,
a.texto-linha,
.form-tarefa-acao a,
.texto-cancelado a {
  color: inherit;
  text-decoration: none;
}

.texto-cartao a:hover,
a.texto-linha:hover,
.form-tarefa-acao a:hover,
.texto-cancelado a:hover {
  color: var(--cor-primaria-texto);
  text-decoration: underline;
}

.celula-tarefa {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.cabecalho-bloco .info-cartao .botao-anotacoes-item,
.controles-tarefa-acao .botao-anotacoes-item {
  margin-left: 0;
}

.tarefas-canceladas .botao-anotacoes-item {
  margin-left: 0;
}

/* Painel da tarefa: rola inteiro (dados, anotações e histórico). */
.painel-tarefa {
  overflow-y: auto;
}

.painel-tarefa .cabecalho-anotacoes {
  align-items: flex-start;
}

.painel-tarefa .cabecalho-anotacoes h2 {
  overflow-wrap: anywhere;
}

.dados-painel-tarefa {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--cor-borda);
  font-size: 0.9rem;
}

.dado-painel-tarefa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.rotulo-dado-painel {
  flex: none;
  width: 6.5rem;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
}

/* "Cancelar a tarefa" no painel: na coluna dos valores, abaixo do Status. */
.form-cancelar-painel {
  align-items: flex-start;
  margin: 0.15rem 0 0 7rem;
}

.form-cancelar-painel .link-botao {
  font-size: 0.85rem;
}

.etiquetas-painel-tarefa .etiqueta-prazo {
  margin-left: 0.35rem;
}

.painel-tarefa .secao-anotacoes,
.bloco-anotacoes-item {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0.4rem;
}

.painel-tarefa .lista-anotacoes,
.secao-anotacoes-acao .lista-anotacoes {
  flex: none;
  overflow: visible;
}

.secao-anotacoes-acao h2 {
  margin-top: 0;
}

.secao-anotacoes-acao .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.historico-item summary {
  color: var(--cor-titulo);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.lista-historico {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

.lista-historico li {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--cor-borda);
}

.quando-historico {
  flex: none;
  color: var(--cor-texto-suave);
  white-space: nowrap;
}

.tarefa-historico {
  color: var(--cor-texto-suave);
}

/* "Preciso de ajuda" (passo 5b): fotos de quem foi chamado e o "+", o sinal da
   ação com tarefa pedindo ajuda e a caixa do pedido. */
.ajuda-item {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

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

.pessoas-ajuda {
  display: inline-flex;
  align-items: center;
}

.avatar-ajuda {
  display: inline-flex;
  margin-left: -0.3rem;
  border: 2px solid white;
  border-radius: 50%;
}

.avatar-ajuda:first-child {
  margin-left: 0;
}

.botao-ajuda-mais {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px dashed var(--cor-swot-ameaca);
  border-radius: 50%;
  background: white;
  color: var(--cor-swot-ameaca-texto);
  font-size: 1rem;
  line-height: 1;
}

.botao-ajuda-mais:hover,
.botao-ajuda-mais:focus-visible {
  background: #f3e6f0;
}

.sinal-ajuda {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #f3e6f0;
  color: var(--cor-swot-ameaca-texto);
  font-size: 0.8rem;
  font-weight: 600;
}

.sinal-ajuda[hidden] {
  display: none;
}

.pessoas-ajuda-painel {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.dialogo-ajuda {
  width: min(460px, calc(100vw - 2rem));
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 1.25rem;
  color: var(--cor-texto);
  background: white;
}

.dialogo-ajuda::backdrop {
  background: rgba(27, 31, 39, 0.45);
}

.dialogo-ajuda h2 {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
}

.item-dialogo-ajuda {
  margin: 0 0 0.75rem;
}

.campo-dialogo-ajuda {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}

.campo-dialogo-ajuda[hidden] {
  display: none;
}

.campo-dialogo-ajuda label {
  font-weight: 600;
}

.campo-dialogo-ajuda textarea,
.campo-dialogo-ajuda input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-size: 0.95rem;
  resize: vertical;
}

.campo-dialogo-ajuda .texto-auxiliar {
  margin: 0;
  font-size: 0.8rem;
}

.chips-ajuda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips-ajuda[hidden] {
  display: none;
}

.chip-ajuda {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.2rem 0.15rem 0.2rem;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: #f7f9fb;
  font-size: 0.85rem;
}

.tirar-chip-ajuda {
  padding: 0 0.35rem;
  background: none;
  color: var(--cor-texto-suave);
  font-size: 1rem;
  line-height: 1;
}

.tirar-chip-ajuda:hover {
  color: var(--cor-erro);
}

.erro-dialogo-ajuda {
  margin: 0 0 0.75rem;
  color: var(--cor-erro);
}

.botoes-dialogo-ajuda {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Campos travados em cinza (Thiago, 2026-10-16): com o plano congelado, na
   leitura da pessoa-chave e na visualização do admin, toda caixa de texto que
   não pode ser alterada fica cinza, para ficar claro o que é só leitura.
   public/js/somente-leitura.js marca os campos com .bloqueado-leitura. No
   Canvas, a caixa é o próprio cartão do bloco. */
:is(body[data-plano-congelado], body[data-somente-leitura], body[data-visualizacao-admin])
  :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"])).bloqueado-leitura {
  border-color: var(--cor-linha);
  background-color: #eaeff4;
  color: var(--cor-texto);
  -webkit-text-fill-color: var(--cor-texto);
  opacity: 1;
  cursor: default;
}

:is(body[data-plano-congelado], body[data-somente-leitura], body[data-visualizacao-admin])
  .canvas-bloco:has(textarea.bloqueado-leitura) {
  background: #eaeff4;
}

:is(body[data-plano-congelado], body[data-somente-leitura], body[data-visualizacao-admin])
  .canvas-bloco:has(textarea.bloqueado-leitura) textarea {
  background: transparent;
}

/* Valor de uma caixa de uma linha travada, em texto que quebra linha (5W2H:
   Quem e tarefas). Mesma cara da caixa cinza acima; public/js/somente-leitura.js
   troca a caixa por este texto. */
.valor-travado {
  display: block;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--cor-linha);
  border-radius: 8px;
  background: #eaeff4;
  color: var(--cor-texto);
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: break-word;
}

/* Com o plano travado não há tarefa a incluir: some a caixa de adição. */
[data-quebrar-travado] .lista-rapida-form:has(input.bloqueado-leitura) {
  display: none;
}

@media (max-width: 800px) {
  /* Sem o "×" de remover, a tarefa usa a largura toda. No computador o espaço
     fica, para as colunas seguirem alinhadas ao cabeçalho. */
  [data-quebrar-travado] .form-remover-item:has(button.bloqueado-leitura) {
    display: none;
  }

  .item-tarefa-5w2h .valor-travado[data-nome="o_que"] {
    grid-column: 1 / -1;
  }
}

/* Direcionador da perspectiva escolhida, embaixo da lista
   (partials/select-perspectiva.ejs). */
.direcionador-perspectiva {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--cor-texto-medio);
}

.direcionador-perspectiva[hidden] {
  display: none;
}

/* Por que uma etapa está bloqueada (partials/topo-etapa.ejs): faixa de atenção
   em laranja claro, acima do título da etapa. */
.aviso-etapa-bloqueada {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-left: 4px solid var(--cor-swot-fraqueza);
  border-radius: 8px;
  background: var(--cor-swot-fraqueza-fundo);
  color: var(--cor-texto);
  font-size: 0.875rem;
  line-height: 1.45;
}

.aviso-etapa-bloqueada[hidden] {
  display: none;
}

.aviso-etapa-bloqueada a {
  color: var(--cor-swot-fraqueza-texto);
  font-weight: 600;
}

/* Cronograma da Execução (Thiago, 2026-10-20; views/execucao-cronograma.ejs):
   coluna das ações fixa à esquerda e a escala rolando de lado, com largura
   fixa por semana ou mês (--unidade). Cor pelo status; o atraso, em vermelho
   em volta. Posições em pixels (cronogramaExecucaoService). */
.crono-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 1rem 0 0.9rem;
}

.crono-alternar {
  display: inline-flex;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  overflow: hidden;
  background: white;
}

.crono-alternar a {
  padding: 0.35rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-decoration: none;
}

.crono-alternar a + a {
  border-left: 1px solid var(--cor-borda);
}

.crono-alternar a[aria-current] {
  background: var(--cor-acao-clara);
  color: var(--cor-primaria-texto);
}

.crono-rolagem {
  overflow-x: auto;
  border: 1px solid var(--cor-linha);
  border-radius: 8px;
  background: white;
}

.crono-rolagem:focus-visible {
  outline: 3px solid var(--cor-foco);
}

.crono {
  --coluna: 260px;
  position: relative;
  width: calc(var(--coluna) + var(--trilho));
  font-size: 0.85rem;
}

.crono-linha {
  display: grid;
  grid-template-columns: var(--coluna) var(--trilho);
  border-bottom: 1px solid var(--cor-linha);
}

.crono-linha:last-of-type {
  border-bottom: 0;
}

.crono-nome {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.45rem 0.75rem;
  background: white;
  border-right: 1px solid var(--cor-linha);
  min-width: 0;
}

.crono-trilho {
  position: relative;
  min-height: 2.75rem;
  background-image: repeating-linear-gradient(to right, var(--cor-linha) 0 1px, transparent 1px var(--unidade));
}

.crono-cab-grupos .crono-trilho,
.crono-cab-unidades .crono-trilho {
  min-height: 1.5rem;
  background-image: none;
}

.crono-cab-grupos .crono-trilho > span {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0.25rem 0.4rem 0;
  border-left: 1px solid var(--cor-borda);
  font-weight: 600;
  color: var(--cor-titulo);
  white-space: nowrap;
  overflow: hidden;
}

.crono-cab-unidades .crono-trilho > span {
  position: absolute;
  top: 0.2rem;
  width: var(--unidade);
  text-align: center;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

.crono-meses .crono-cab-unidades .crono-trilho > span {
  text-transform: uppercase;
}

.crono-cab-unidades .crono-virada {
  font-weight: 700;
  color: var(--cor-texto-medio);
}

.crono-carga {
  background: var(--cor-faixa);
}

.crono-carga .crono-nome {
  background: var(--cor-faixa);
}

.crono-carga .crono-trilho {
  min-height: 2rem;
}

.crono-titulo-carga {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.crono-carga-celula {
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  width: calc(var(--unidade) - 4px);
  margin-left: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  outline: none;
}

.crono-carga-celula:focus-visible {
  box-shadow: 0 0 0 2px var(--cor-primaria);
}

.crono-carga-celula.nivel-1 { background: #e3f0f8; color: var(--cor-primaria-texto); }
.crono-carga-celula.nivel-2 { background: #bcdcef; color: var(--cor-primaria-texto); }
.crono-carga-celula.nivel-3 { background: #7fbbe0; color: #0b3f5e; }
.crono-carga-celula.nivel-4 { background: #2f8cc4; color: white; }

.crono-titulo {
  font-weight: 600;
  color: var(--cor-titulo);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

a.crono-titulo {
  text-decoration: none;
}

a.crono-titulo:hover {
  text-decoration: underline;
}

.crono-detalhe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.5rem;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

.crono-etiqueta-atraso {
  color: var(--cor-erro);
  font-weight: 700;
}

/* Cores do status: as mesmas famílias das etiquetas da Execução. */
.crono-cor-nao_iniciada { background: #b8c3cf; }
.crono-cor-em_andamento { background: var(--cor-primaria); }
.crono-cor-concluida { background: var(--cor-swot-forca); }
.crono-cor-ajuda { background: var(--cor-swot-ameaca); }

.crono-barra {
  position: absolute;
  top: 10px;
  height: 12px;
  border-radius: 3px;
}

.crono-marco-acao {
  position: absolute;
  top: 10px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  transform: rotate(45deg);
}

.crono-tarefa {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  border: 2px solid white;
  box-sizing: content-box;
  z-index: 1;
}

.crono-atrasada {
  box-shadow: 0 0 0 2px var(--cor-erro);
}

.crono-tarefa.crono-atrasada {
  border-color: white;
  box-shadow: 0 0 0 2px var(--cor-erro);
}

.crono-barra:hover,
.crono-marco-acao:hover,
.crono-tarefa:hover,
.crono-barra:focus-visible,
.crono-marco-acao:focus-visible,
.crono-tarefa:focus-visible {
  outline: 2px solid var(--cor-titulo);
  outline-offset: 2px;
  z-index: 2;
}

.crono-concluida .crono-trilho > a,
.crono-concluida-item {
  opacity: 0.45;
}

.crono-concluida .crono-titulo {
  color: var(--cor-texto-suave);
}

.crono-objetivo .crono-titulo {
  color: var(--cor-texto-medio);
}

.crono-marco-objetivo {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  transform: rotate(45deg);
  border: 2px solid var(--cor-titulo);
  background: white;
  box-sizing: border-box;
}

.crono-cab-unidades .crono-unidade-hoje {
  font-weight: 700;
  color: var(--cor-erro);
}

/* Começa na faixa dos prazos: na escala, a semana (ou o mês) de hoje fica em
   vermelho. */
.crono-hoje {
  position: absolute;
  top: calc(3rem + 2px);
  bottom: 0;
  width: 0;
  border-left: 2px solid var(--cor-erro);
  z-index: 2;
  pointer-events: none;
}

.crono-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

.crono-legenda > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.crono-amostra {
  display: inline-block;
  width: 1rem;
  height: 0.6rem;
  border-radius: 2px;
}

.crono-amostra-atraso {
  background: white;
  box-shadow: 0 0 0 2px var(--cor-erro);
}

.crono-amostra-tarefa {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--cor-texto-suave);
}

.crono-amostra-marco {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  transform: rotate(45deg);
  background: var(--cor-texto-suave);
}

.crono-amostra-hoje {
  display: inline-block;
  width: 0;
  height: 0.9rem;
  border-left: 2px solid var(--cor-erro);
}

@media (max-width: 640px) {
  .crono {
    --coluna: 132px;
    font-size: 0.8rem;
  }

  .crono-nome {
    padding: 0.4rem 0.5rem;
  }

  .crono-titulo {
    -webkit-line-clamp: 3;
  }
}

/* Reuniões do Acompanhamento (passo 1, 2026-10-20; guia-visual.md): cartões
   brancos como os do Início; a próxima reunião com a faixa azul à esquerda e
   a pergunta "aconteceu?" com a faixa âmbar. Formulários abrem em <details>. */
.pagina-reunioes,
.pagina-registro {
  max-width: 820px;
}

.reunioes-secao {
  margin-top: 2rem;
}

.reunioes-secao > h2,
.reunioes-confirmar > h2,
.registro-novo > h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

.reunioes-cartao {
  margin-bottom: 0.75rem;
  padding: 1rem 1.25rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
}

.reunioes-proxima {
  /* A borda grossa não empurra o texto: o recuo desconta os 3px a mais. */
  padding-left: calc(1.25rem - 3px);
  border-left: 4px solid var(--cor-acao);
}

.reunioes-confirmar {
  margin-top: 1.25rem;
  padding-left: calc(1.25rem - 3px);
  border-left: 4px solid #d9a21b;
  background: #fffaf0;
}

.reunioes-quando {
  margin: -0.4rem 0 0.75rem;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.reunioes-data {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0;
}

.reunioes-data strong {
  font-size: 1.05rem;
  color: var(--cor-titulo);
}

.reunioes-data strong::first-letter {
  text-transform: uppercase;
}

.reunioes-data > span:not(.etiqueta-acao) {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.reunioes-respostas,
.reunioes-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.reunioes-acoes {
  margin-top: 0.75rem;
}

.reunioes-respostas > .texto-auxiliar {
  flex-basis: 100%;
  margin: 0;
}

.reunioes-resposta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.reunioes-resposta label {
  /* Na linha: o label global empilha o texto sobre o campo. */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 600;
}

.reunioes-resposta input[type="date"] {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  font: inherit;
  font-weight: 400;
}

.reunioes-resposta .botao-secundario {
  margin-bottom: 0;
}

.reunioes-detalhe > summary {
  color: var(--cor-primaria-texto);
  font-weight: 600;
  cursor: pointer;
}

.reunioes-detalhe[open] {
  flex-basis: 100%;
}

.reunioes-detalhe[open] > summary {
  margin-bottom: 0.5rem;
}

.reunioes-extra {
  margin-top: 1rem;
}

.reunioes-extra > .texto-auxiliar {
  margin: 0 0 0.5rem;
}

.reunioes-aviso {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--cor-acao-clara);
  color: var(--cor-texto-medio);
}

.reunioes-historico {
  list-style: none;
  margin: 0;
  padding: 0;
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
}

.reunioes-historico li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.65rem 1.25rem;
  border-top: 1px solid var(--cor-linha);
}

.reunioes-historico li:first-child {
  border-top: 0;
}

.reunioes-historico-data {
  min-width: 6.5rem;
  font-weight: 600;
  color: var(--cor-titulo);
}

.reunioes-historico small {
  margin-left: auto;
  color: var(--cor-texto-suave);
}

.reunioes-nao-aconteceu {
  color: var(--cor-texto-suave);
}

/* Registro do Acompanhamento (passo 2, 2026-10-20; guia-visual.md): o
   formulário de nova entrada num cartão, os filtros em pílulas e as entradas
   numa lista de cartões, com a etiqueta do tipo em cor própria. */
.registro-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0.5rem 0 0;
}

.registro-form fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.registro-form legend {
  margin-bottom: 0.4rem;
  padding: 0;
  font-weight: 600;
  color: var(--cor-titulo);
}

.registro-form fieldset[hidden] {
  display: none;
}

.registro-legenda-nota {
  font-weight: 400;
  color: var(--cor-texto-suave);
}

.registro-pilula {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 999px;
  background: white;
  font-weight: 500;
  cursor: pointer;
}

.registro-pilula:has(input:checked) {
  border-color: var(--cor-acao);
  background: var(--cor-acao-clara);
  color: var(--cor-primaria-texto);
}

.registro-opcao {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
}

.registro-campo textarea,
.registro-campo select,
.registro-opcao input[type="date"] {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  font: inherit;
  font-weight: 400;
}

.registro-campo textarea {
  width: 100%;
  resize: vertical;
}

.registro-campo-curto select {
  max-width: 22rem;
}

.registro-form-fim {
  display: flex;
  justify-content: flex-end;
}

.registro-form-fim button {
  margin: 0;
}

.registro-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.registro-filtro {
  padding: 0.25rem 0.8rem;
  border: 1px solid var(--cor-linha);
  border-radius: 999px;
  background: white;
  color: var(--cor-texto-medio);
  text-decoration: none;
}

.registro-filtro-atual {
  border-color: var(--cor-acao);
  background: var(--cor-acao-clara);
  color: var(--cor-primaria-texto);
  font-weight: 600;
}

.registro-filtro-total {
  color: var(--cor-texto-suave);
  font-weight: 400;
}

.registro-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.registro-entrada {
  margin-bottom: 0.75rem;
  padding: 0.9rem 1.25rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
}

.registro-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.5rem;
}

.registro-meta {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.registro-tipo {
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.registro-tipo-decisao {
  background: var(--cor-acao-clara);
  color: var(--cor-primaria-texto);
}

.registro-tipo-aprendizado {
  background: var(--cor-swot-forca-fundo);
  color: var(--cor-swot-forca-texto);
}

.registro-tipo-projecao {
  background: var(--cor-swot-ameaca-fundo);
  color: var(--cor-swot-ameaca-texto);
}

/* Atenção: o amarelo do cartão "A reunião aconteceu?", em tom claro. */
.registro-tipo-atencao {
  background: #fbf0cf;
  color: #7a5600;
}

.registro-tipo-ideia {
  background: var(--cor-swot-fraqueza-fundo);
  color: var(--cor-swot-fraqueza-texto);
}

.registro-texto {
  margin: 0;
  white-space: pre-wrap;
}

.registro-rever-quando {
  margin: 0.5rem 0 0;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

/* A data para rever chegou e ninguém anotou como ficou. */
.registro-rever-chegou {
  color: #8a5a00;
  font-weight: 600;
}

.registro-como-ficou {
  margin-top: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: var(--cor-faixa);
}

.registro-como-ficou small {
  display: block;
  margin-top: 0.2rem;
  color: var(--cor-texto-suave);
}

.registro-entrada .reunioes-acoes {
  margin-top: 0.75rem;
}

.reunioes-registros {
  font-size: 0.9rem;
}

/* Pauta da reunião (passo 3, 2026-10-20; guia-visual.md): um cartão por
   bloco, com o campo de um item por linha que cresce com o texto. Sem a
   pauta, o cartão explica o que o Assistente faz e mostra o custo. */
.reunioes-pauta {
  margin: 0.5rem 0 0;
  font-weight: 600;
}

.pauta-voltar {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}

.pauta-reuniao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: -0.25rem 0 1rem;
}

.pauta-reuniao strong {
  font-size: 1.05rem;
  color: var(--cor-titulo);
}

.pauta-reuniao > span:not(.etiqueta-acao) {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.pauta-preparar > h2,
.pauta-bloco > h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.pauta-preparar > p {
  margin: 0 0 0.75rem;
}

.pauta-form-preparar {
  /* Na linha: o form global empilha e centraliza. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0;
}

.pauta-form-preparar button {
  margin: 0;
}

.pauta-form-preparar .texto-auxiliar {
  margin: 0;
}

.pauta-preparando {
  flex-basis: 100%;
}

/* "Incluir os indicadores" (passo 6 dos indicadores): numa linha própria, acima do botão. */
.pauta-incluir-indicadores {
  flex-basis: 100%;
  margin: 0;
}

.pauta-meta {
  margin: 0.5rem 0 0.75rem;
}

.pauta-form {
  gap: 0.25rem;
  margin: 0;
}

.pauta-form .autosave-status {
  align-self: flex-end;
  min-height: 1.2em;
}

.pauta-campo {
  gap: 0.4rem;
  font-weight: 400;
}

.pauta-campo .texto-auxiliar {
  margin: 0;
}

.pauta-campo textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

.pauta-itens {
  margin: 0;
  padding-left: 1.25rem;
}

.pauta-itens li + li {
  margin-top: 0.3rem;
}

/* Rodapé da edição, como o das etapas: Preparar de novo à esquerda, OK à direita. */
.pauta-rodape {
  margin-top: 1.25rem;
}

.pauta-rodape .pauta-form-preparar {
  flex: 1 1 22rem;
}

/* Documento da pauta (Thiago, 2026-10-20): Editar e Imprimir no alto, à
   direita; a folha branca com os blocos em marcadores, que é o que sai na
   impressão (sem o menu, o cabeçalho e os botões). */
.pauta-ferramentas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* "Enviar por e-mail" (passo 4): o form não muda o alinhamento da fila. */
.pauta-ferramentas .pauta-form-enviar {
  display: flex;
  margin: 0;
}

.pauta-ferramentas .botao-secundario,
.pauta-ferramentas button {
  display: inline-block;
  margin: 0;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.pauta-documento {
  padding: 2rem 2.5rem;
  background: white;
  border: 1px solid var(--cor-linha);
  border-radius: 12px;
  line-height: 1.55;
}

.pauta-documento-cabecalho {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cor-linha);
}

.pauta-documento-cabecalho h2 {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
}

.pauta-documento-cabecalho p {
  margin: 0;
}

.pauta-documento-empresa {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pauta-documento-periodo {
  margin-top: 0.25rem !important;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.pauta-documento-bloco + .pauta-documento-bloco {
  margin-top: 1.25rem;
}

.pauta-documento-bloco h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.pauta-documento-bloco ul {
  margin: 0;
  padding-left: 1.25rem;
}

.pauta-documento-bloco li + li {
  margin-top: 0.3rem;
}

.pauta-documento-vazio {
  margin: 0;
  color: var(--cor-texto-suave);
}

.pauta-documento-rodape {
  margin-top: 1.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cor-linha);
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
}

/* Pauta: os avisos de reunião iniciada e de data mudada, e o "Iniciar reunião"
   embaixo do documento (Thiago, 2026-10-20). */
.pauta-em-andamento,
.pauta-data-mudou {
  margin-bottom: 1rem;
}

.pauta-iniciar .texto-auxiliar {
  flex: 1 1 18rem;
  margin: 0;
}

.pauta-form-iniciar,
.pauta-form-sem-pauta {
  margin: 0;
}

.pauta-form-sem-pauta {
  align-items: flex-start;
  margin-top: 0.75rem;
}

/* Reuniões: o "Iniciar reunião" e a reunião em andamento. */
.reunioes-iniciar {
  display: flex;
  margin: 0;
}

.reunioes-iniciar button {
  margin: 0;
}

.reunioes-em-andamento {
  border-color: var(--cor-acao);
  color: var(--cor-acao);
  font-weight: 600;
}

.reunioes-pauta-secundario {
  margin-left: 1rem;
  font-weight: 400;
}

/* A reunião acontecendo (Thiago, 2026-10-20; guia-visual.md): um cartão por
   bloco, cada assunto com o check à esquerda e a anotação logo abaixo do
   texto. O assunto discutido ganha o fundo verde claro das forças. */
.reuniao-orientacao {
  margin: 0 0 1rem;
}

.reuniao-bloco > h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.reuniao-bloco > .texto-auxiliar {
  margin: 0 0 0.5rem;
}

.reuniao-assuntos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.reuniao-assunto {
  margin: 0 -0.5rem;
  padding: 0.6rem 0.5rem;
  border-top: 1px solid var(--cor-linha);
  border-radius: 8px;
}

.reuniao-assunto:first-child {
  border-top: 0;
}

.reuniao-assunto-discutido {
  background: var(--cor-swot-forca-fundo);
}

.reuniao-assunto-form {
  gap: 0.35rem;
  margin: 0;
}

.reuniao-assunto-form .autosave-status {
  align-self: flex-end;
  min-height: 1em;
}

.reuniao-assunto-linha {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.reuniao-assunto-linha input[type="checkbox"] {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--cor-swot-forca-texto);
  cursor: pointer;
}

.reuniao-assunto-texto {
  margin: 0;
  line-height: 1.5;
}

.reuniao-assunto-origem {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
}

.reuniao-assunto-campo {
  flex: 1;
  min-width: 0;
}

.reuniao-anotacao {
  gap: 0.2rem;
  margin-left: 1.75rem;
  font-weight: 400;
}

.reuniao-anotacao > span {
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
}

.reuniao-anotacao textarea {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  background: white;
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

.reuniao-remover {
  align-items: flex-end;
  margin: 0;
}

.reuniao-remover .link-botao {
  font-size: 0.85rem;
}

/* As tarefas do assunto: a lista e o "+ Tarefa", alinhados com a anotação. */
.reuniao-tarefas {
  margin: 0.35rem 0 0 1.75rem;
}

.reuniao-tarefas-lista {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 0.4rem;
  padding: 0;
  list-style: none;
}

.reuniao-tarefa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  font-size: 0.92rem;
}

.reuniao-tarefa::before {
  content: "→";
  color: var(--cor-texto-suave);
}

.reuniao-tarefa-meta {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.reuniao-tarefa-cancelada > a {
  text-decoration: line-through;
}

.reuniao-tarefa-excluir {
  display: inline;
  margin: 0;
}

.reuniao-tarefa-excluir .link-botao {
  font-size: 0.85rem;
}

.reuniao-tarefa-nova > summary {
  display: inline-block;
  color: var(--cor-primaria-texto);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.reuniao-tarefa-form {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 14rem) 10rem auto;
  align-items: end;
  gap: 0.5rem;
  margin: 0.5rem 0 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--cor-linha);
  border-radius: 8px;
  background: white;
}

.reuniao-tarefa-form label {
  gap: 0.2rem;
  font-weight: 400;
}

.reuniao-tarefa-form label > span {
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
}

.reuniao-tarefa-form input,
.reuniao-tarefa-form select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 2.4rem;
  margin: 0;
  padding: 0 0.6rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  background: white;
  font: inherit;
  font-size: 0.95rem;
}

.reuniao-tarefa-form .botao-secundario {
  height: 2.4rem;
  margin: 0;
  padding: 0 1rem;
}

.reuniao-documento-tarefas {
  margin: 0.15rem 0 0;
  padding-left: 0 !important;
  list-style: none;
}

.reuniao-novo-assunto {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.reuniao-novo-assunto input[type="text"] {
  flex: 1 1 16rem;
}

.reuniao-novo-assunto button {
  margin: 0;
}

.reuniao-registros-lista {
  margin-bottom: 1rem;
}

.reuniao-data .reunioes-resposta {
  margin: 0;
}

.reuniao-nova-tarefa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0;
}

.reuniao-nova-tarefa .botao-secundario {
  display: inline-block;
  margin: 0;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.reuniao-nova-tarefa .texto-auxiliar,
.reuniao-rodape > .texto-auxiliar {
  margin: 0;
}

.reuniao-form-finalizar {
  margin: 0;
}

/* O resumo: cada assunto com a marca (✓ discutido, – sem discutir). */
.reuniao-documento-itens {
  padding-left: 0 !important;
  list-style: none;
}

.reuniao-documento-itens li {
  display: flex;
  gap: 0.5rem;
}

.reuniao-marca {
  flex: none;
  width: 1rem;
  font-weight: 700;
  color: var(--cor-swot-forca-texto);
}

.reuniao-item-pendente .reuniao-marca {
  color: var(--cor-texto-suave);
}

.reuniao-documento-assunto,
.reuniao-documento-anotacao,
.reuniao-documento-nota {
  margin: 0;
}

.reuniao-documento-anotacao {
  margin-top: 0.15rem;
  white-space: pre-wrap;
}

.reuniao-documento-nota {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.reuniao-nao-discutido {
  margin-left: 0.4rem;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
  font-style: italic;
}

@media (max-width: 600px) {
  .pauta-documento {
    padding: 1.25rem;
  }

  .reuniao-anotacao,
  .reuniao-tarefas {
    margin-left: 0;
  }
}

@media (max-width: 800px) {
  .reuniao-tarefa-form {
    grid-template-columns: 1fr 1fr;
  }

  .reuniao-tarefa-oque {
    grid-column: 1 / -1;
  }
}

@media print {
  .pagina-pauta .pauta-voltar,
  .pagina-pauta .cabecalho-etapa,
  .pagina-pauta .aviso-execucao,
  .pagina-pauta .pauta-iniciar,
  .pagina-pauta .reunioes-aviso,
  body:has(.pagina-pauta) .rodape-aviso {
    display: none !important;
  }

  body:has(.pagina-pauta) {
    background: white;
  }

  .pagina-pauta {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .pauta-documento {
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .pauta-documento-bloco {
    break-inside: avoid;
  }

  .pauta-documento-bloco h3 {
    break-after: avoid;
  }
}

/* Indicadores do Acompanhamento: o indicador novo (Thiago, 2026-10-21). O
   botão fica à direita do título; o cadastro é um card branco como os demais,
   com a borda azul da ação, acima da lista. */
.botao-novo-indicador {
  flex-shrink: 0;
}

.card-indicador-novo {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  border-color: var(--cor-acao);
  box-shadow: 0 2px 10px rgba(35, 52, 82, 0.06);
}

.card-indicador-novo[hidden] {
  display: none;
}

.card-indicador-novo h2 {
  margin: 0;
  font-size: 1.05rem;
}

.card-indicador-novo .texto-auxiliar {
  margin: 0;
}

.grade-indicador-novo {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 0.6rem;
}

.grade-indicador-novo label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.875rem;
  color: var(--cor-titulo);
}

.grade-indicador-novo input,
.grade-indicador-novo select {
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 8px;
  background: white;
  color: var(--cor-texto);
  font: inherit;
  font-size: 0.9375rem;
}

.acoes-indicador-novo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.acoes-indicador-novo .botao-secundario {
  margin-bottom: 0;
}

/* Valor atual, meta e prazo numa linha; polaridade e frequência na de baixo. */
.grade-indicador-novo-medida {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

/* O card do indicador na gestão (Thiago, 2026-10-21): nome e ficha para ler
   (mudam nos Ajustes); só a linha de base tem campos. */
.nome-indicador-gestao {
  margin: 0;
  padding: 0.35rem 0;
  color: var(--cor-titulo);
  font-size: 1rem;
  font-weight: 600;
}

.ficha-indicador-gestao {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
}

.ficha-indicador-gestao dt {
  color: var(--cor-texto-suave);
}

.ficha-indicador-gestao dd {
  margin: 0;
  color: var(--cor-texto);
  font-weight: 500;
}

.grade-linha-base > label {
  grid-column: span 4;
}

/* O card fica abaixo da barra fixa do alto ao ir até ele (#indicador-N), e o
   recém-criado ganha um destaque que se apaga. */
.pagina-indicadores-acompanhamento .card-indicador {
  scroll-margin-top: 5.5rem;
}

.card-indicador-recem-criado {
  animation: destaque-indicador-novo 2.4s ease-out;
}

@keyframes destaque-indicador-novo {
  from {
    border-color: var(--cor-acao);
    box-shadow: 0 0 0 4px var(--cor-acao-clara);
  }
}