/* ============================================================
   TuringTec — Central de Ajuda (/ajuda)
   CSS próprio da página: nao depende do Tailwind compilado
   (que só contém as classes já usadas pelo resto do site).
   Usa a identidade: navy #050E1F, ciano #06B6D4, azul #3B82F6.
   ============================================================ */

.aj {
  --aj-fundo: #050E1F;
  --aj-card: rgba(255, 255, 255, .04);
  --aj-card-forte: rgba(255, 255, 255, .07);
  --aj-borda: rgba(148, 163, 184, .22);
  --aj-texto: #E7EDF7;
  --aj-suave: #9FB0C7;
  --aj-ciano: #06B6D4;
  --aj-azul: #3B82F6;
  --aj-ambar: #F59E0B;
  background: var(--aj-fundo);
  color: var(--aj-texto);
  padding: 0 0 5rem;
}

.aj * { box-sizing: border-box; }
.aj a { color: var(--aj-ciano); text-decoration: none; }
.aj a:hover { text-decoration: underline; }
.aj code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: rgba(148, 163, 184, .14);
  padding: .1rem .35rem;
  border-radius: .3rem;
}

/* ---------- hero ---------- */
.aj-hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 1.75rem;
  border-bottom: 1px solid var(--aj-borda);
}
.aj-hero__selo {
  display: inline-block;
  margin: 0 0 .6rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aj-ciano);
}
.aj-hero h1 {
  margin: 0 0 .6rem;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  line-height: 1.15;
  font-weight: 700;
}
.aj-hero__resumo {
  margin: 0;
  max-width: 62ch;
  color: var(--aj-suave);
  font-size: 1.02rem;
  line-height: 1.6;
}
.aj-hero__rascunho {
  margin: 1rem 0 0;
  padding: .6rem .85rem;
  border: 1px dashed rgba(245, 158, 11, .5);
  border-radius: .6rem;
  background: rgba(245, 158, 11, .08);
  color: #FCD34D;
  font-size: .85rem;
}

/* ---------- corpo: índice + conteúdo ---------- */
.aj-corpo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.25rem 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.aj-indice {
  position: sticky;
  top: 1.25rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 1rem 1rem 1.25rem;
  border: 1px solid var(--aj-borda);
  border-radius: .9rem;
  background: var(--aj-card);
}
.aj-indice__titulo {
  margin: 0 0 .75rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aj-suave);
}
.aj-indice__grupo {
  margin: 1rem 0 .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
}
.aj-indice__grupo:first-of-type { margin-top: 0; }
.aj-indice ul { margin: 0; padding: 0; list-style: none; }
.aj-indice li { margin: .18rem 0; }
.aj-indice a {
  display: block;
  padding: .3rem .5rem;
  border-radius: .45rem;
  color: var(--aj-suave);
  font-size: .88rem;
  line-height: 1.3;
}
.aj-indice a:hover { background: var(--aj-card-forte); color: #fff; text-decoration: none; }
.aj-indice a[aria-current="true"] {
  background: rgba(6, 182, 212, .16);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--aj-ciano);
}
.aj-indice__sub { margin: .1rem 0 .35rem !important; padding-left: .55rem !important; }
.aj-indice__sub a {
  padding: .22rem .5rem;
  font-size: .8rem;
  color: #8FA3BD;
  border-left: 1px solid rgba(148, 163, 184, .25);
  border-radius: 0 .45rem .45rem 0;
}
.aj-indice__sub a[aria-current="true"] { box-shadow: none; border-left-color: var(--aj-ciano); }

/* ---------- conteúdo ---------- */
.aj-conteudo { min-width: 0; }
.aj-resumo-geral {
  margin: 0 0 1.75rem;
  color: var(--aj-suave);
  font-size: .82rem;
}
.aj-metade { margin: 0 0 3rem; scroll-margin-top: 1rem; }
.aj-metade__titulo {
  margin: 0 0 .4rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--aj-borda);
  font-size: 1.5rem;
  font-weight: 700;
}
.aj-metade__resumo { margin: .6rem 0 1.5rem; color: var(--aj-suave); }

.aj-capitulo { margin: 0 0 2.5rem; scroll-margin-top: 1rem; }
.aj-capitulo__titulo {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
}
.aj-capitulo__titulo::before {
  content: "";
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: .5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--aj-ciano), var(--aj-azul));
  vertical-align: middle;
}

.aj-secao {
  scroll-margin-top: 1rem;
  margin: 0 0 1.75rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--aj-borda);
  border-radius: .9rem;
  background: var(--aj-card);
}
.aj-secao--pendente { opacity: .72; border-style: dashed; }
.aj-secao__titulo { margin: 0 0 .6rem; font-size: 1.02rem; font-weight: 600; }
.aj-texto { margin: 0 0 .8rem; line-height: 1.65; color: var(--aj-texto); }
.aj-texto:last-child { margin-bottom: 0; }

.aj-badge {
  margin-left: .4rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, .16);
  color: #FCD34D;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* passos */
.aj-passos {
  margin: .2rem 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}
.aj-passos li {
  position: relative;
  margin: 0 0 .5rem;
  padding: .1rem 0 .1rem 2.1rem;
  line-height: 1.55;
  counter-increment: passo;
}
.aj-passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(6, 182, 212, .18);
  color: #67E8F9;
  font-size: .78rem;
  font-weight: 700;
}

/* dicas */
.aj-dicas {
  margin: 1rem 0 0;
  padding: .8rem .95rem;
  border-left: 3px solid var(--aj-azul);
  border-radius: 0 .6rem .6rem 0;
  background: rgba(59, 130, 246, .1);
}
.aj-dicas p { margin: 0 0 .45rem; font-size: .9rem; line-height: 1.55; color: #DBEAFE; }
.aj-dicas p:last-child { margin-bottom: 0; }

/* tabela */
.aj-tabela-wrap { overflow-x: auto; margin: .2rem 0 1rem; }
.aj-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.aj-tabela th, .aj-tabela td {
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--aj-borda);
  text-align: left;
  vertical-align: top;
}
.aj-tabela th { color: #fff; font-weight: 600; background: var(--aj-card-forte); }

/* prints */
.aj-print { margin: 1.1rem 0 .4rem; }
.aj-print__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--aj-borda);
  border-radius: .7rem;
  background: #0B1526;
  cursor: zoom-in;
  overflow: hidden;
}
.aj-print__zoom img { display: block; width: 100%; height: auto; }
.aj-print__falta {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  padding: 1rem;
  border: 1px dashed rgba(148, 163, 184, .4);
  border-radius: .7rem;
  background: repeating-linear-gradient(45deg, rgba(148, 163, 184, .05) 0 10px, transparent 10px 20px);
  color: var(--aj-suave);
  text-align: center;
}
.aj-print__falta-rot {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.aj-print figcaption { margin-top: .5rem; color: var(--aj-suave); font-size: .84rem; }

/* FAQ */
.aj-faq {
  margin: 0 0 .6rem;
  padding: .7rem .9rem;
  border: 1px solid var(--aj-borda);
  border-radius: .7rem;
  background: var(--aj-card);
}
.aj-faq summary { cursor: pointer; font-weight: 600; }
.aj-faq[open] summary { color: #fff; }
.aj-faq__resposta { margin-top: .75rem; }
.aj-faq__resposta .aj-secao {
  margin: 0;
  padding: .6rem .8rem;
  border: 0;
  background: transparent;
}

/* lightbox */
.aj-lightbox {
  width: min(96vw, 1400px);
  max-width: none;
  padding: 0;
  border: 1px solid var(--aj-borda);
  border-radius: .8rem;
  background: #0B1526;
}
.aj-lightbox::backdrop { background: rgba(2, 6, 16, .82); }
.aj-lightbox img { display: block; width: 100%; height: auto; }
.aj-lightbox__fechar {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--aj-borda);
  border-radius: 999px;
  background: rgba(5, 14, 31, .9);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

/* voltar ao topo */
.aj-topo {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--aj-borda);
  border-radius: 999px;
  background: rgba(5, 14, 31, .92);
  color: #fff;
  font-size: 1.1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.aj-topo--visivel { opacity: 1; pointer-events: auto; }
.aj-topo:hover { text-decoration: none; border-color: var(--aj-ciano); }

/* ---------- responsivo ---------- */
@media (max-width: 980px) {
  .aj-corpo { grid-template-columns: 1fr; gap: 1.5rem; }
  .aj-indice { position: static; max-height: none; }
  .aj-indice ul { display: flex; flex-wrap: wrap; gap: .25rem; }
  .aj-indice a { border: 1px solid var(--aj-borda); }
}
@media (max-width: 640px) {
  .aj-hero { padding-top: 2.25rem; }
  .aj-secao { padding: 1rem .95rem; }
  .aj-passos li { padding-left: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .aj-topo { transition: none; }
}

/* ---------- busca nas seções (F3) ---------- */
.aj-busca { margin: 1.5rem 0 0; max-width: 46rem; }
.aj-busca__rot {
  display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--aj-suave); margin-bottom: .45rem;
}
.aj-busca__linha { position: relative; }
.aj-busca__campo {
  width: 100%; padding: .9rem 3rem .9rem 1rem; border-radius: .8rem;
  border: 1px solid var(--aj-borda); background: var(--aj-card-forte);
  color: var(--aj-texto); font-size: 1rem; font-family: inherit;
}
.aj-busca__campo::placeholder { color: rgba(159, 176, 199, .75); }
.aj-busca__campo:focus {
  outline: none; border-color: var(--aj-ciano);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .18); background: rgba(6, 182, 212, .06);
}
.aj-busca__atalho {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  font-size: .72rem; color: var(--aj-suave); border: 1px solid var(--aj-borda);
  border-radius: .35rem; padding: 0 .4rem;
}
.aj-busca__campo:focus + .aj-busca__atalho { opacity: .3; }
.aj-busca__dica { margin: .55rem 0 0; font-size: .82rem; color: var(--aj-suave); }
.aj-busca__dica kbd {
  font-family: inherit; font-size: .76rem; border: 1px solid var(--aj-borda);
  border-bottom-width: 2px; border-radius: .3rem; padding: 0 .3rem;
}
.aj-busca__resultados {
  margin-top: .9rem; border: 1px solid var(--aj-borda); border-radius: .8rem;
  background: rgba(4, 11, 24, .72); overflow: hidden;
}
.aj-busca__cabecalho {
  margin: 0; padding: .6rem .9rem; font-size: .82rem; color: var(--aj-suave);
  border-bottom: 1px solid var(--aj-borda); background: var(--aj-card);
}
.aj-busca__lista { list-style: none; margin: 0; padding: .35rem; max-height: 26rem; overflow: auto; }
.aj-busca__item { display: block; padding: .6rem .7rem; border-radius: .55rem; color: var(--aj-texto); }
.aj-busca__item:hover, .aj-busca__item--ativo { background: rgba(6, 182, 212, .1); text-decoration: none; }
.aj-busca__item-titulo { display: block; font-weight: 600; color: #fff; font-size: .95rem; }
.aj-busca__item-tipo {
  display: inline-block; margin: .15rem 0 .3rem; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--aj-ciano); border: 1px solid rgba(6, 182, 212, .35);
  border-radius: 999px; padding: 0 .5rem;
}
.aj-busca__item-trecho { display: block; font-size: .84rem; color: var(--aj-suave); line-height: 1.45; }
.aj-busca mark { background: rgba(245, 158, 11, .3); color: #fff; border-radius: .2rem; padding: 0 .1rem; }

/* seção aberta pela busca: pisca para o olho achar onde caiu */
.aj-alvo { animation: aj-pisca 2.2s ease-out 1; }
@keyframes aj-pisca {
  0% { box-shadow: 0 0 0 3px rgba(6, 182, 212, .55); }
  100% { box-shadow: 0 0 0 3px rgba(6, 182, 212, 0); }
}
@media (max-width: 640px) {
  .aj-busca__lista { max-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
  .aj-alvo { animation: none; outline: 2px solid var(--aj-ciano); }
}