/* =====================================================================
   Cartilha dos relatórios do Domínio — estende `/estilo.css`.
   Os tokens (--verde, --preto, --papel, --tinta…) vêm de lá; aqui ficam
   só as peças que só existem nesta página: a trilha do menu, a tabela de
   campos e o cartão numerado de cada relatório.
   ===================================================================== */

/* Coluna de leitura. Cartilha é para SEGUIR, não para varrer com o olho:
   linha longa demais faz perder o lugar entre uma etapa e a seguinte. */
.dentro.ct-coluna{max-width:820px}

.ct-oculto{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap
}

/* ------------------------------------------------------------- capa */
.capa-cartilha{background:var(--preto);padding:48px 0 40px}
.capa-cartilha .rot{color:var(--verde)}
.capa-cartilha h1{
  font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:#fff;
  max-width:22ch;margin:0 0 12px;text-wrap:balance
}
.capa-cartilha .ct-sub{font-size:1.0625rem;color:var(--claro);max-width:60ch;margin:0 0 10px}
.capa-cartilha .ct-origem{
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:#8B919A;margin:0
}

/* Índice: atalho para quem já sabe qual dos quatro quer. */
.ct-indice{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:26px 0 0}
.ct-indice a{
  display:flex;align-items:center;gap:8px;padding:8px 13px;
  border:1px solid #2C3037;border-radius:var(--r);
  color:var(--claro);text-decoration:none;font-size:13px;line-height:1.3
}
.ct-indice a:hover{border-color:var(--verde);color:#fff}
.ct-indice span{
  display:grid;place-items:center;width:19px;height:19px;flex:none;
  border-radius:50%;background:var(--verde);color:#052E1D;
  font-size:11px;font-weight:700
}

/* --------------------------------------------------- regras e passos */
.ct-regras{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.ct-regras li{
  padding:14px 16px;background:var(--papel2);border:1px solid var(--papel3);
  border-radius:var(--r);font-size:14px;color:var(--tinta2);line-height:1.55
}
.ct-regras strong{display:block;color:var(--tinta);margin-bottom:3px;font-weight:600}

.ct-depois{margin:22px 0 0;padding-left:22px;display:grid;gap:9px}
.ct-depois li{font-size:14px;color:var(--tinta2);line-height:1.55}

.barra-cartilha{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* ------------------------------------------ o cartão de cada relatório */
.ct-cartao{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;
  padding:22px;margin-top:18px;
  background:var(--papel2);border:1px solid var(--papel3);border-radius:var(--r);
  scroll-margin-top:80px
}
.ct-num{
  display:grid;place-items:center;width:32px;height:32px;
  border-radius:50%;background:var(--verde);color:#052E1D;
  font-size:15px;font-weight:700
}
.ct-corpo{min-width:0}
.ct-cartao .ct-modulo{
  font-size:11px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--tinta3);margin-bottom:4px
}
.ct-cartao h3{font-size:1.125rem;margin:0 0 14px;color:var(--tinta)}

/* A TRILHA DO MENU. É o coração da cartilha: quem está com o Domínio
   aberto procura estas palavras na tela, nesta ordem. Rola dentro de si
   mesma no celular em vez de empurrar a página para o lado. */
.ct-trilha{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:11px 13px;border-radius:var(--r);
  background:var(--papel);border:1px solid var(--papel3);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px
}
.ct-trilha .ct-passo{color:var(--tinta2)}
.ct-trilha .ct-alvo{color:var(--tinta);font-weight:600;box-shadow:inset 0 -2px 0 var(--verde)}
.ct-trilha .ct-seta{color:var(--tinta3)}

.ct-janela{margin:14px 0 6px;font-size:13.5px;color:var(--tinta2)}

/* ---------------------------------------------------- o que preencher */
.ct-campos{width:100%;border-collapse:collapse;margin-top:8px}
.ct-campos th,.ct-campos td{
  text-align:left;vertical-align:top;padding:9px 0;
  border-top:1px solid var(--papel3);font-size:13.5px
}
.ct-campos tr:first-child th,.ct-campos tr:first-child td{border-top:0}
.ct-campos th{width:38%;padding-right:14px;font-weight:600;color:var(--tinta)}
.ct-campos .ct-valor{
  display:inline-block;padding:1px 7px;border-radius:2px;
  background:var(--verde-fraco);color:var(--verde-texto);
  font-weight:600;font-size:12.5px
}
.ct-campos .ct-nota{display:block;margin-top:4px;color:var(--tinta2);line-height:1.5}

/* Numa tela estreita, rótulo em cima do valor: 38% de uma coluna de 320px
   não cabe nem o rótulo mais curto. */
@media (max-width:560px){
  .ct-campos th,.ct-campos td{display:block;width:auto;padding:0}
  .ct-campos th{border-top:1px solid var(--papel3);padding-top:10px}
  .ct-campos td{padding-bottom:10px}
}

/* ------------------------------------------------------- observações */
.ct-obs{
  margin-top:16px;padding:13px 15px;border-radius:var(--r);
  border-left:3px solid;font-size:13.5px;line-height:1.55
}
.ct-obs strong{display:block;margin-bottom:4px}
.ct-obs p{margin:0;color:var(--tinta2)}
.ct-obs.ct-atencao{background:var(--ambar-bg);border-color:var(--ambar)}
.ct-obs.ct-atencao strong{color:var(--ambar)}
/* Sem azul na paleta do site — e inventar uma cor so para um aviso faria
   este bloco parecer de outro produto. O neutro basta: a borda separa, o
   titulo em tinta cheia chama, e a atencao de verdade continua sendo a
   ambar, que fica sozinha no papel de alerta. */
.ct-obs.ct-info{background:var(--papel);border-color:var(--tinta3)}
.ct-obs.ct-info strong{color:var(--tinta)}

/* ------------------------------------------- onde entra no TaxCerto */
.ct-destino{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--papel3)
}
.ct-destino .ct-etiqueta{
  flex:none;padding:2px 8px;border-radius:2px;
  background:var(--preto);color:#fff;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase
}
.ct-destino strong{display:block;font-size:14px;color:var(--tinta)}
.ct-destino p{margin:3px 0 0;font-size:13px;color:var(--tinta2);line-height:1.5}

@media (max-width:560px){
  .ct-cartao{grid-template-columns:1fr;gap:12px;padding:18px}
  .ct-destino{flex-direction:column;gap:8px}
}

/* Secundario ao lado do botao: link de texto, nao um segundo botao. Dois
   botoes lado a lado disputam a mesma decisao; aqui uma so acao e a
   principal. */
.link-cartilha{
  align-self:center;font-size:14px;font-weight:600;
  color:var(--verde-texto);text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--verde-fraco)
}
.link-cartilha:hover{box-shadow:inset 0 -2px 0 var(--verde)}

/* --------------------------------------------- as capturas do Domínio
   Duas por passo, quando há duas: o menu e a janela. Lado a lado onde
   couber, empilhadas no celular — que é onde esta página mais é lida,
   com o Domínio aberto na outra tela. */
.ct-telas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px;margin-top:14px
}
.ct-tela{margin:0}
.ct-tela img{
  display:block;width:100%;height:auto;
  border:1px solid var(--papel3);border-radius:var(--r);
  background:var(--papel)
}
.ct-tela figcaption{
  margin-top:6px;font-size:12px;color:var(--tinta3);line-height:1.45
}