/* ------------------------------------------------------------ O RAIO-X (Pista C1b, 21/08)
 * O farol e' a peca que ele mais pediu: bolinha verde/ambar/vermelha DEPOIS do numero, e
 * ANEL VAZADO onde nao ha meta — farol sem meta e' o desenhista inventando alvo. */
.farol {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle; margin-left: 4px;
}
.farol.verde { background: var(--ok); }
.farol.ambar { background: var(--aviso); }
.farol.vermelho { background: var(--ruim); }
.farol.vazado { background: transparent; border: 2px solid var(--ok); width: 8px; height: 8px; }

.fileira-de-farois { display: flex; gap: var(--f3); flex-wrap: wrap; }
.farolzinho {
  flex: 1; min-width: 150px; border: 1px solid var(--line);
  border-radius: var(--raio); padding: 12px 16px;
}
.farolzinho .numero { font-variant-numeric: tabular-nums; }

/* AS COLUNAS DO FUNIL: o numero da etapa em cima da forma, cada um no centro da sua
 * coluna — e a % ACUMULADA sobre a boca embaixo, miuda. */
.colunas-do-funil { display: flex; margin-top: var(--f3); }
.coluna-do-funil { flex: 1; text-align: center; min-width: 0; }
.coluna-do-funil b { display: block; font-size: var(--texto-g); font-variant-numeric: tabular-nums; }
.coluna-do-funil .rotulo { display: block; }

/* O QUE FAZER PRIMEIRO: o ganho e' o heroi do card — grande e verde, com o problema
 * embaixo em frase inteira (a correcao dele: "precisa ficar claro o que significa"). */
.farolzinho .ganho-do-card { display: block; font-size: 26px; font-weight: 800; color: var(--ok); }
.sanfona-do-card summary {
  cursor: pointer; list-style: none; font-size: var(--texto-pp); color: var(--roxo);
  font-weight: 600; margin-top: 6px;
}
.sanfona-do-card summary::-webkit-details-marker { display: none; }

/* A FAIXA DO RESULTADO fecha o funil; respiro proprio em cima. */
.faixa-do-resultado { margin-top: var(--f4); }

/* ------------------------------------------------------- A ESTANTE E A VISÃO (C2a, 21/08)
 * A cor da familia e' identidade — o olho aprende sem ler (a regra da paleta). Ela entra
 * por CLASSE de familia, nunca por style= na tela. */
.grade-da-estante {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--f4); margin-top: var(--f4);
}
.cartao-da-estante { cursor: pointer; border-top: 3px solid var(--line); }
.cartao-da-estante.lancamento { border-top-color: var(--agua); }
.cartao-da-estante.desenvolvimento { border-top-color: var(--roxo); }
.cartao-da-estante.arquivo { border-top-color: #e8b06a; }
.cartao-da-estante:hover { box-shadow: inset 0 1px 0 var(--gg-brilho), 0 10px 30px rgba(21, 23, 43, .10); }

/* A FONTE VEM DA ESCALA e a classe fica composta com .rotulo na tela — classe de uma
 * palavra com font-size rouba a fonte de quem a usar por dentro (a licao inventariada). */
.rotulo.rotulo-de-familia {
  display: block; margin: var(--f5) 0 var(--f1); font-weight: 800; letter-spacing: .1em;
}
.rotulo-de-familia.lancamento { color: #12705d; }
.rotulo-de-familia.desenvolvimento { color: var(--roxo); }
.rotulo-de-familia.arquivo { color: #8a540d; }

/* O TRILHO MINI do cartao: o andamento do DNA numa linha de 6px. */
.trilho-mini {
  display: block; height: 6px; background: var(--soft); border-radius: 4px;
  overflow: hidden; margin-top: var(--f2);
}
.trilho-mini span { display: block; height: 6px; border-radius: 4px; background: var(--roxo); }
.cartao-da-estante.lancamento .trilho-mini span { background: var(--agua); }
.cartao-da-estante.arquivo .trilho-mini span { background: #e8b06a; }

/* OS ATALHOS DA VISAO: cada cartao e' porta para a tela que aprofunda. */
.fileira-de-atalhos { display: flex; gap: var(--f3); flex-wrap: wrap; margin-top: var(--f4); }
.atalho-da-visao {
  flex: 1; min-width: 170px; border: 1px solid var(--line); border-radius: var(--raio);
  padding: 14px 16px;
}
.atalho-da-visao b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }

/* A LEGENDA E O INTERRUPTOR do grafico: serie desligada esmaece o botao e some a linha. */
.legenda-do-grafico { display: flex; gap: var(--f2); flex-wrap: wrap; margin-top: var(--f2); }
.legenda-do-grafico .btn[aria-pressed="false"] { opacity: .4; }
.serie-do-raiox[data-desligada="1"] { display: none; }

/* O PAR DE LEITURA — a linha rotulo·valor da gaveta de leitura: para LER um registro sem
 * abrir edicao. O valor em negrito a direita, porque e' ele que se procura. */
.par-de-leitura {
  display: flex; justify-content: space-between; gap: var(--f3);
  padding: 8px 0; border-top: 1px solid var(--line);
}
.par-de-leitura:first-of-type { border-top: 0; }
/* A FONTE FICA NOS FILHOS, e nao na linha: classe de uma palavra com `font-size` rouba a
 * fonte de quem a usar por dentro — a licao inventariada no test_catalogo_de_medidas. */
.par-de-leitura .de { font-size: var(--texto-p); color: var(--muted); }
.par-de-leitura .valor { font-size: var(--texto-p); font-weight: 600; text-align: right; }

/* ------------------------------------------------------- O FUNIL DO PROJETO (C2b, 21/08)
 * A arquitetura em 4 blocos: cada bloco com a cor de identidade na barra do rotulo, e a
 * linha da etapa e' um botao — clicar abre a gaveta de leitura dela. */
.fileira-do-projeto { margin-bottom: var(--f3); }
.grade-do-funil {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--f3); align-items: start; margin-top: var(--f4);
}
.bloco-de-etapas { border: 1px solid var(--line); border-radius: var(--raio); padding: 12px 16px; }
.bloco-de-etapas .rotulo-do-bloco { margin-top: 0; border-left: 3px solid var(--roxo); padding-left: 8px; }
.bloco-de-etapas.verde .rotulo-do-bloco { border-color: var(--ok); color: var(--ok); }
.bloco-de-etapas.ambar .rotulo-do-bloco { border-color: var(--aviso); color: var(--aviso); }
.bloco-de-etapas.vermelho .rotulo-do-bloco { border-color: var(--ruim); color: var(--ruim); }
.bloco-de-etapas.roxo .rotulo-do-bloco { color: var(--roxo); }
.etapa-do-funil {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--f2);
  width: 100%; padding: 7px 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; border-radius: 0; text-align: left; cursor: pointer;
}
.etapa-do-funil:last-child { border-bottom: 0; }
.etapa-do-funil:hover .nome { color: var(--roxo); }
/* A FONTE FICA NOS FILHOS, pela mesma licao do par-de-leitura. */
.etapa-do-funil .nome { font-size: var(--texto-p); }
.etapa-do-funil .meta {
  font-size: var(--texto-p); font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* AS REGUAS DA CASA: as tres regras que explicam a tela, lado a lado no rodape. */
.reguas-do-funil { display: flex; gap: var(--f3); flex-wrap: wrap; margin-top: var(--f4); }
.regua-da-casa {
  flex: 1; min-width: 230px; border: 1px solid var(--line); border-radius: var(--raio);
  background: var(--soft); padding: 12px 16px;
}
/* A FONTE ESCOPADA na fileira, nao na classe: classe generica com font-size rouba a
 * fonte de quem a usar por dentro — a licao do test_catalogo_de_medidas. */
.reguas-do-funil .regua-da-casa { font-size: var(--texto-pp); }
.regua-da-casa .rotulo { display: block; color: var(--roxo); margin-bottom: 2px; }
/* O ATALHO QUE ABRE (a porta ja' construida) se distingue do que so' conta. */
.atalho-da-visao.abre { cursor: pointer; }
.atalho-da-visao.abre:hover { border-color: var(--roxo); }

/* OS CODIGOS DE EMERGENCIA (item 185): mostrados UMA vez, e por isso legiveis de longe —
 * a pessoa vai copiar para um papel ou um gerenciador de senhas. */
.codigos-de-emergencia {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--f2); margin-top: var(--f3);
}
.codigos-de-emergencia code {
  background: var(--soft); border: 1px solid var(--line); border-radius: var(--raio);
  padding: 10px 12px; text-align: center; letter-spacing: .06em;
  font-family: ui-monospace, monospace;
}

/* -------------------------------------------------------------- O FAQ (21/08/2026)
 * A busca vem antes das perguntas: quem abre o FAQ ja tem a duvida na cabeca. */
.busca-do-faq { margin-bottom: var(--f4); }
.busca-do-faq input { width: 100%; box-sizing: border-box; }
.pe-da-pergunta {
  display: flex; align-items: center; gap: var(--f3); flex-wrap: wrap;
  margin-top: var(--f3); padding-top: var(--f2); border-top: 1px solid var(--line);
}

/* ----------------------------------- O CONSTRUTOR DE PAGINAS (item 168, 21/08/2026)
 * O estoque dos 28 blocos, na ordem em que uma pagina convence. */
.grade-de-blocos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--f2); margin-bottom: var(--f3);
}
.bloco-do-estoque {
  border: 1px solid var(--line); border-radius: var(--raio); padding: 10px 12px;
  background: var(--soft);
}
.bloco-do-estoque b { display: block; font-family: ui-monospace, monospace; }
.bloco-do-estoque b { font-size: var(--texto-pp); }
.bloco-do-estoque .dita-do-gatilho { font-size: var(--texto-selo); }
.receita-de-pagina { cursor: default; }

/* ------------------------------------- AS RECEITAS DE LANCAMENTO (item 197, 21/08/2026)
 * A estante de fabrica: cada receita e' um cartao que se LE antes de instalar. A do
 * LANCAMENTO LAUNIVO tem a borda de agua — e' a da casa, e vem primeiro. */
.grade-de-receitas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--f3); margin-top: var(--f4); align-items: start;
}
.receita-da-estante { cursor: pointer; }
.receita-da-estante:hover { border-color: var(--roxo); }
/* O ESBOCO NAO SE ESCONDE, se anuncia: receita meio pronta que se instala e' pior. */
.receita-da-estante.esboco { opacity: .72; }
.o-que-a-receita-traz {
  display: flex; gap: var(--f3); flex-wrap: wrap; margin-top: var(--f3);
  padding-top: var(--f3); border-top: 1px solid var(--line); color: var(--muted);
}
.o-que-a-receita-traz span { font-size: var(--texto-pp); }
.o-que-a-receita-traz b { color: var(--ink); }
/* A REGUA NA GAVETA: uma peca por linha, com o momento a esquerda. */
.regua-da-receita { margin: var(--f2) 0 var(--f4); }
.peca-da-regua { border-left: 2px solid var(--line); padding: 6px 0 6px 12px; margin-bottom: 6px; }
.peca-da-regua .quando { color: var(--roxo); font-weight: 800; }
.peca-da-regua b { display: block; }
.peca-da-regua p { margin: 2px 0 0; color: var(--muted); }
.peca-da-regua .quando { font-size: var(--texto-selo); }
.peca-da-regua b { font-size: var(--texto-p); }
.peca-da-regua p { font-size: var(--texto-pp); }
.pe-da-receita {
  display: flex; align-items: center; gap: var(--f3); flex-wrap: wrap;
  margin-top: var(--f4); padding-top: var(--f3); border-top: 1px solid var(--line);
}

/* ---------------------------------------------- AS REDES SOCIAIS (item 170, 21/08/2026)
 * As abas das redes e os cartoes de gatilho. A aba desligada NAO some: ela diz "em breve"
 * — prometer aba que nao abre e' pior do que nao ter a aba, e some-la esconderia o plano. */
.abas-de-rede { margin-bottom: var(--f3); }
.recado-da-conexao { margin-top: var(--f3); }
.abas-de-rede button:disabled { color: var(--muted); background: var(--soft); cursor: default; }
.fileira-de-gatilhos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--f3); margin-top: var(--f4);
}
.cartao-de-gatilho {
  border: 1px solid var(--line); border-radius: var(--raio); padding: 12px 16px;
  background: var(--surface);
}
.cartao-de-gatilho .simbolo { display: block; color: var(--roxo); }
.cartao-de-gatilho b { display: block; margin-top: 4px; }
.dita-do-gatilho { display: block; color: var(--muted); }
/* A FONTE ESCOPADA nos filhos, e nao nas classes — a licao do catalogo de medidas. */
.cartao-de-gatilho .simbolo { font-size: 20px; }
.cartao-de-gatilho b { font-size: var(--texto-p); }
.cartao-de-gatilho .dita-do-gatilho { font-size: var(--texto-pp); }

/* ------------------------------------------- O ANDAMENTO — as 49 etapas (item 155, 21/08)
 * A escada do trabalho em 6 fases. O MESMO botao marca e desmarca: existir a marcacao e'
 * estar feita, e por isso nao ha caixa desmarcada com nome de alguem colado nela. */
.trilho-do-andamento { margin: var(--f3) 0 var(--f4); height: 10px; }
.trilho-do-andamento span { height: 10px; }
.fases-do-andamento {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--f4); align-items: start;
}
.fase-do-andamento { border: 1px solid var(--line); border-radius: var(--raio); padding: 12px 16px; }
.fase-do-andamento .rotulo-do-bloco { margin-top: 0; color: var(--roxo); }
.etapa-marcavel {
  display: flex; align-items: flex-start; gap: var(--f2); width: 100%;
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: 8px 0; text-align: left; cursor: pointer;
}
.etapa-marcavel:hover b { color: var(--roxo); }
.etapa-marcavel .cresce { flex: 1; }
.etapa-marcavel b { font-weight: 600; }
.etapa-marcavel .marca {
  width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 5px;
  display: grid; place-items: center; flex: none; margin-top: 2px; color: transparent;
}
.etapa-marcavel.feita .marca { background: var(--ok); border-color: var(--ok); color: #fff; }
.etapa-marcavel.feita b { color: var(--muted); font-weight: 500; }
.dita-da-etapa { display: block; color: var(--muted); }
/* A FONTE ESCOPADA nos filhos, e nao nas classes — a licao do catalogo de medidas. */
.etapa-marcavel b { font-size: var(--texto-p); }
.etapa-marcavel .dita-da-etapa { font-size: var(--texto-selo); }

/* ------------------------------------------------- A FOLHINHA DO ANO (C2f, 21/08/2026)
 * Os 12 meses numa tela so', como a folhinha de parede — pedido dele em 20/08. Cada mes e'
 * um trilho, e a janela do lancamento e' pintada na fatia de dias que ela ocupa. */
.folhinha-do-ano {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--f3); margin-top: var(--f4);
}
.mes-da-folhinha {
  border: 1px solid var(--line); border-radius: var(--raio); padding: 10px 12px;
  background: var(--surface);
}
.mes-da-folhinha .rotulo { display: block; }
.trilho-do-mes {
  position: relative; height: 12px; border-radius: 6px; background: var(--soft);
  margin: 5px 0; overflow: hidden;
}
.janela-pintada { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
/* A SOBREPOSICAO HACHURADA: duas janelas no mesmo dia sao a informacao mais cara desta
 * tela — a casa nao toca dois lancamentos ao mesmo tempo. */
.janela-pintada.sobreposta {
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.55) 0 4px, transparent 4px 8px);
}
.quem-no-mes { display: block; }
.legenda-da-folhinha {
  display: flex; gap: var(--f4); flex-wrap: wrap; margin-top: var(--f3);
  padding-top: var(--f3); border-top: 1px solid var(--line);
}
.cor-do-projeto { display: inline-flex; align-items: center; gap: 6px; }
/* A FONTE ESCOPADA na legenda, e nao na classe — a mesma licao do catalogo de medidas. */
.legenda-da-folhinha .cor-do-projeto { font-size: var(--texto-p); }
.cor-do-projeto i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* O RECADO DA SEGUNDA PORTA, acima do Raio-X do projeto: precisa de respiro embaixo,
 * senao encosta no rotulo do seletor e as duas frases viram uma so. */
.recado-da-segunda-porta { margin-bottom: var(--f4); }

/* A OBSERVACAO DA PROPOSTA, na linha de baixo do titulo. */
.dita-da-proposta { display: block; color: var(--muted); }
.tabela .dita-da-proposta { font-size: var(--texto-pp); }
/* AS AUTOMAÇÕES DO DISPARO 1 A 1 (itens 31 a 33, acabamento de 23/10/2026): a cola do que dá
 * para escrever em cada linha, a caixa das etapas e o caminho da simulação. */
.gaveta .cola-das-etapas { border: 1px solid var(--line); border-radius: 8px; padding: var(--f2) var(--f3); }
.gaveta .cola-das-etapas summary { cursor: pointer; font-size: var(--texto-p); font-weight: 600; }
.gaveta .cola-das-etapas table { width: 100%; border-collapse: collapse; margin-top: var(--f2); }
.gaveta .cola-das-etapas td { padding: var(--f1) var(--f2) var(--f1) 0; vertical-align: top;
  font-size: var(--texto-pp); border-top: 1px solid var(--line); }
.gaveta .cola-das-etapas td:first-child { white-space: nowrap; }
.gaveta .cola-das-etapas .exemplo-da-etapa { display: block; color: var(--muted);
  font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.gaveta [data-campo="etapas"] textarea { min-height: 220px; font-family: ui-monospace, monospace;
  font-size: var(--texto-p); }
.gaveta .passos-da-simulacao { list-style: none; margin: var(--f3) 0; padding: 0; display: grid; gap: var(--f1); }
.gaveta .passos-da-simulacao li { display: flex; gap: var(--f2); align-items: baseline; margin: 0;
  padding: var(--f2) var(--f3); border: 1px solid var(--line); border-radius: 8px;
  font-size: var(--texto-m); overflow-wrap: anywhere; }
.gaveta .passos-da-simulacao li.fim { color: var(--muted); border-style: dashed; }
.gaveta .passos-da-simulacao .simbolo-da-etapa { min-width: 18px; text-align: center; color: var(--muted); }
.gaveta .motivos-da-simulacao { margin: var(--f1) 0 0; padding-left: var(--f4); }
.gaveta .recado + .recado, .gaveta .passos-da-simulacao + .recado { margin-top: var(--f2); }
/* NO CELULAR A TABELA ROLA DE LADO, em vez de cortar: sem isto o Simular, o Ativar e o Pausar
 * ficavam fora do cartão, sem jeito de alcançar (medido a 390 px). */
@media (max-width: 650px) {
  #secao-automacoes .tabela { overflow-x: auto; scrollbar-width: thin; }
  #secao-automacoes .linha { min-width: 840px; }
}

/* ------------------------------------------------ AS FICHAS: PESQUISA E DNA (C2c, 21/08)
 * Um gene por linha, com o selo do estado a direita e a versao que vale por baixo. A
 * MESMA PECA serve as duas telas — o que muda e' a origem da ficha no molde. */
.genes-da-ficha { display: flex; flex-direction: column; gap: var(--f2); }
.gene-da-ficha {
  display: block; width: 100%; text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--raio); padding: 12px 16px;
  cursor: pointer;
}
.gene-da-ficha:hover { border-color: var(--roxo); }
.gene-da-ficha .cabeca { display: flex; align-items: baseline; gap: var(--f3); }
.gene-da-ficha .cresce { flex: 1; }
.gene-da-ficha b { display: block; font-size: var(--texto-m); }
.gene-da-ficha .dica { display: block; font-size: var(--texto-pp); color: var(--muted); }
.gene-da-ficha .texto {
  display: block; font-size: var(--texto-p); margin-top: var(--f2);
  padding-top: var(--f2); border-top: 1px solid var(--line);
}
/* O SELO DIZ QUAL DAS TRES SITUACOES: sem texto, rascunho (linha sem aprovacao) ou
 * aprovada. Sem ele a lista mostraria rascunho com cara de texto valendo. */
.marca-do-gene {
  font-weight: 800; border-radius: 99px; padding: 3px 10px; white-space: nowrap;
}
/* A FONTE ESCOPADA no gene, nao na classe: classe generica com font-size rouba a fonte de
 * quem a usar por dentro — a licao do test_catalogo_de_medidas, pela terceira vez hoje. */
.gene-da-ficha .marca-do-gene { font-size: var(--texto-selo); }
.marca-do-gene.aprovado { background: #e0f2ec; color: var(--ok); }
.marca-do-gene.rascunho { background: var(--roxo-soft); color: var(--roxo); }
.marca-do-gene.vazio { background: var(--soft); color: var(--muted); border: 1px dashed var(--line); }
.andamento-das-fichas { margin-top: var(--f4); }

/* O GENE, DE PERTO: o historico inteiro na gaveta — linha 1 ate a ultima, nada se apaga. */
.versao-do-gene {
  border: 1px solid var(--line); border-radius: var(--raio); padding: 10px 12px;
  margin-bottom: var(--f2);
}
.versao-do-gene.aprovada { border-color: var(--agua); background: #f2fbf8; }
.versao-do-gene .quando {
  display: flex; justify-content: space-between; align-items: center; gap: var(--f2);
  font-size: var(--texto-selo); color: var(--muted);
}
.versao-do-gene .e-aprovada { color: var(--ok); }
.versao-do-gene p { margin: 4px 0 0; font-size: var(--texto-p); }
.texto-novo-do-gene { margin-top: var(--f4); }
.texto-novo-do-gene textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line);
  border-radius: var(--raio); padding: 10px 12px; background: var(--surface-2);
  font: inherit; font-size: var(--texto-p);
}
.texto-novo-do-gene .pe {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--f3); margin-top: var(--f2);
}