/* ---------------------------------------------------------------------------
   atlas.css - a roupa HTML do Atlas do módulo (modulos/NN/NN_atlas.qmd).
   Regra: specs/documentos/atlas.md. Carregado pelos perfis HTML que publicam
   o Atlas (webaluno, webprof, bookaluno, bookprof). Nas saídas sem CSS (PDF,
   EPUB, DOCX), as classes abaixo simplesmente não se aplicam e o conteúdo
   sai em sequência, que é a roupa de papel prevista pela regra.
--------------------------------------------------------------------------- */

/* Peças ilustradas: o desenho tem fundo de papel próprio e não deve ser
   invertido no modo escuro. */
.atl-ilustracao img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

/* Cartões de memória: frente; um clique mostra o verso. */
.atl-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.9rem;
  margin: 1rem 0 1.5rem;
}
.atl-cartao {
  position: relative;
  min-height: 150px;
  padding: 1rem 1rem 1.6rem;
  border: 2px solid #2b5d8a;
  border-radius: 10px;
  background: #f3f8fd;
  color: #1f2430;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.4;
  user-select: none;
}
.atl-cartao:focus-visible {
  outline: 3px solid #e0a100;
  outline-offset: 2px;
}
.atl-cartao::after {
  content: "clique para virar";
  position: absolute;
  right: 0.7rem;
  bottom: 0.4rem;
  font-size: 0.72rem;
  opacity: 0.6;
}
.atl-cartao .atl-frente {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  text-align: center;
  font-size: 1.05rem;
}
.atl-cartao .atl-verso {
  display: none;
}
.atl-cartao.virado {
  background: #fffbea;
  border-color: #b8860b;
  animation: atl-virar 0.35s ease;
}
.atl-cartao.virado::after {
  content: "clique para voltar";
}
.atl-cartao.virado .atl-frente {
  display: none;
}
.atl-cartao.virado .atl-verso {
  display: block;
}
@keyframes atl-virar {
  from { transform: rotateY(90deg); }
  to { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .atl-cartao.virado { animation: none; }
}

/* Painel do conhecimento: áreas relacionadas, numa grade. */
.atl-painel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.9rem;
  margin: 1rem 0 1.5rem;
}
.atl-area {
  padding: 0.6rem 0.9rem 0.3rem;
  border-radius: 10px;
  border-top: 6px solid var(--atl-cor, #2b5d8a);
  background: rgba(127, 127, 127, 0.07);
}
.atl-area > p:first-child,
.atl-area > h4:first-child {
  margin-top: 0.2rem;
}
.atl-area ul {
  padding-left: 1.1rem;
  margin-bottom: 0.5rem;
}
.atl-area.conceitos { --atl-cor: #2b5d8a; }
.atl-area.exemplos { --atl-cor: #2f7d4a; }
.atl-area.diagrama { --atl-cor: #7a5bc4; grid-column: 1 / -1; }
.atl-area.evidencias { --atl-cor: #d1495b; }
.atl-area.referencias { --atl-cor: #8a6d1f; }
.atl-area.aplicacoes { --atl-cor: #d17a22; }

/* Folha de consulta: blocos compactos em colunas. */
.atl-folha {
  column-width: 330px;
  column-gap: 1.1rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.9rem;
}
.atl-bloco {
  break-inside: avoid;
  margin: 0 0 0.9rem;
  padding: 0.5rem 0.8rem 0.2rem;
  border: 1px solid rgba(127, 127, 127, 0.35);
  border-radius: 8px;
}
.atl-bloco table {
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}
.atl-bloco ul {
  padding-left: 1.1rem;
}

@media print {
  .atl-cartao .atl-verso { display: block; border-top: 1px dashed #999; margin-top: 0.6rem; padding-top: 0.6rem; }
  .atl-cartao::after { content: none; }
}

/* Folha de consulta compacta: tabelas sem o respiro padrão do tema. */
.atl-folha .atl-bloco table td,
.atl-folha .atl-bloco table th {
  padding: 0.15rem 0.45rem;
}
.atl-folha .atl-bloco ul {
  margin-bottom: 0.4rem;
}
.atl-folha .atl-bloco li {
  margin-bottom: 0.1rem;
}
.atl-folha {
  column-width: 290px;
}
.atl-area.diagrama svg {
  max-height: 460px;
}