/* ============================================================================
   PORTAL DA NATUREZA — TELAS (Camada 5)
   ----------------------------------------------------------------------------
   Composições de layout das telas reais, montadas SOBRE os tokens (Camada 1)
   e os componentes (Camada 4). Carregar depois de tokens.css e components.css.

   O que vive aqui: o casco de navegação (topo desktop + barra inferior mobile),
   as grades de página, os leiautes de cada tela e o rodapé-citação.
   O que NÃO vive aqui: componentes (são da Camada 4) e cores novas
   (zero hex — só var(--...) dos tokens).

   Mobile-first: tudo nasce em coluna única; 768px (md) e 1024px (lg)
   abrem as grades. Referências: as 5 telas-conceito aprovadas em
   lookbook/amostras/ e o perfil de gosto (sdd/2026-07-03-perfil-de-gosto.md).
   ============================================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* O atributo [hidden] precisa vencer componentes que fixam display (ex.: .aviso
   usa display:flex). Sem isto, esconder por [hidden] não funciona nesses casos. */
[hidden] { display: none !important; }

body {
  font-family: var(--tipo-leitura);
  font-size: var(--tipo-corpo);
  line-height: var(--tipo-altura-corpo);
  color: var(--tinta-corpo);
}

img { max-width: 100%; }

.molde {
  width: 100%;
  max-width: var(--grade-max);
  margin: 0 auto;
  padding: 0 var(--grade-margem);
}

/* ==========================================================================
   1. CASCO — topo fixo + barra inferior (mobile)
   ========================================================================== */

.casco-topo { position: sticky; top: 0; z-index: var(--z-topo); }

/* No mobile os destinos moram na barra inferior; o topo fica com a marca
   e as ações. APPS, PERFIL e ADMIN entram pelo avatar e pela tela de Início. */
.nav-links { display: none; }

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-inferior { display: none; }
}

@media (max-width: 1023.98px) {
  main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

main { display: block; }

/* ==========================================================================
   2. CABEÇAS DE PÁGINA E DE SEÇÃO
   ========================================================================== */

.pagina-cabeca { padding: var(--esp-8) 0 var(--esp-6); }
.pagina-cabeca-fila {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--esp-4);
}
.pagina-titulo {
  font-family: var(--tipo-marca); font-size: var(--tipo-display-2);
  font-weight: 500; line-height: var(--tipo-altura-titulo);
  color: var(--tinta-titulo);
}
.pagina-mote {
  margin-top: var(--esp-2); max-width: 56ch;
  font-size: var(--tipo-corpo-p); color: var(--tinta-suave);
}
.pagina-acoes { display: flex; gap: var(--esp-3); flex-wrap: wrap; }

.secao { padding: var(--esp-6) 0; }
.secao-cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--esp-4); margin-bottom: var(--esp-4);
}
.secao-titulo {
  display: flex; align-items: center; gap: var(--esp-2);
  font-family: var(--tipo-marca); font-size: var(--tipo-titulo-1);
  font-weight: 600; color: var(--tinta-titulo);
}
.secao-titulo .ic { width: 20px; height: 20px; color: var(--tinta-primaria); }

/* Trilha de pão (migalhas) */
.migalhas {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-1);
  padding: var(--esp-5) 0 0;
  font-family: var(--tipo-rotulo); font-size: var(--tipo-rotulo-p);
  font-weight: 500; letter-spacing: var(--tipo-espaco-rotulo); text-transform: uppercase;
}
.migalhas a { color: var(--tinta-suave); text-decoration: none; }
.migalhas a:hover { color: var(--tinta-primaria); }
.migalhas .ic { width: 13px; height: 13px; color: var(--tinta-apagada); }
.migalhas b { color: var(--tinta-primaria); font-weight: 600; }

/* ==========================================================================
   3. HERO DO BOTICÁRIO (entrada e início) — prancha à esquerda, voz à direita
   ========================================================================== */

.hero-boticario {
  background: var(--sup-cartao); border: 1px solid var(--borda-sutil);
  border-radius: var(--raio-xg); box-shadow: var(--sombra-1);
  padding: var(--esp-6); margin-top: var(--esp-6);
  display: grid; gap: var(--esp-8); grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .hero-boticario { padding: var(--esp-8); } }
@media (min-width: 1024px) {
  .hero-boticario { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
}

/* A prancha emoldurada — momento-arte do herbário */
.prancha-quadro {
  background: var(--sup-pergaminho); padding: var(--esp-3);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-m);
  box-shadow: var(--sombra-prancha);
}
.prancha-quadro img { display: block; width: 100%; border: 1px solid var(--borda-media); border-radius: 4px; }

.hero-lema {
  display: flex; align-items: center; gap: var(--esp-2);
  font-family: var(--tipo-rotulo); font-size: var(--tipo-rotulo-m); font-weight: 500;
  letter-spacing: var(--tipo-espaco-rotulo-g); text-transform: uppercase;
  color: var(--tinta-primaria); margin-bottom: var(--esp-4);
}
.hero-lema .ic { width: 18px; height: 18px; }
.hero-titulo {
  font-family: var(--tipo-marca); font-size: var(--tipo-display-1);
  font-weight: 500; line-height: var(--tipo-altura-titulo); color: var(--tinta-titulo);
}
.hero-texto { margin-top: var(--esp-4); max-width: 52ch; color: var(--tinta-corpo); }
.hero-botoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-6); }

/* Fita de estatísticas (membros · cursos · lives · conteúdos) */
.fita-estatisticas {
  display: grid; gap: var(--esp-3); margin-top: var(--esp-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .fita-estatisticas { grid-template-columns: repeat(4, 1fr); } }
.estatistica {
  display: flex; align-items: center; gap: var(--esp-3);
  background: var(--sup-fundo); border: 1px solid var(--borda-sutil);
  border-radius: var(--raio-m); padding: var(--esp-3) var(--esp-4);
}
.estatistica .ic { width: 20px; height: 20px; color: var(--tinta-primaria); }
.estatistica b {
  display: block; font-family: var(--tipo-marca); font-size: var(--tipo-titulo-2);
  font-weight: 600; line-height: 1.1; color: var(--tinta-titulo);
}
.estatistica span { font-size: var(--tipo-legenda); color: var(--tinta-suave); }

/* ==========================================================================
   4. GRADES E LEIAUTES DE DUAS COLUNAS
   ========================================================================== */

.grade-cartoes { display: grid; gap: var(--grade-vao); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grade-cartoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grade-cartoes { grid-template-columns: repeat(3, 1fr); }
  .grade-cartoes.grade-4 { grid-template-columns: repeat(4, 1fr); }
  .grade-cartoes.grade-2 { grid-template-columns: repeat(2, 1fr); } }

/* Conteúdo principal + coluna lateral (comunidade, lives, aula) */
.com-lateral { display: grid; gap: var(--grade-vao); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .com-lateral { grid-template-columns: minmax(0, 1fr) 340px; }
  .com-lateral.lateral-esquerda { grid-template-columns: 280px minmax(0, 1fr); }
  .com-lateral > aside.gruda { position: sticky; top: 88px; }
}
.lateral-bloco + .lateral-bloco { margin-top: var(--grade-vao); }

/* ==========================================================================
   5. CURSOS — trilha de estudo e cabeça de curso
   ========================================================================== */

.painel-trilha {
  display: grid; gap: var(--esp-6); grid-template-columns: 1fr;
  padding: var(--esp-6);
}
@media (min-width: 1024px) {
  .painel-trilha { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
}
.painel-trilha .prancha-quadro { width: 96px; transform: rotate(-2deg); }
.painel-trilha .passos { margin-top: var(--esp-5); }
.trilha-atual { font-size: var(--tipo-corpo-p); color: var(--tinta-suave); margin-top: 2px; }
.trilha-atual b { color: var(--tinta-primaria); font-weight: 600; }

.curso-cabeca {
  display: grid; gap: var(--esp-6); grid-template-columns: 1fr;
  padding: var(--esp-6); margin-top: var(--esp-6);
}
@media (min-width: 768px) {
  .curso-cabeca { grid-template-columns: 280px minmax(0, 1fr); padding: var(--esp-8); align-items: center; }
}
.curso-cabeca .prancha-quadro { max-width: 280px; }
.curso-meta {
  display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5);
  margin-top: var(--esp-4); font-size: var(--tipo-corpo-p); color: var(--tinta-suave);
}
.curso-meta span { display: inline-flex; align-items: center; gap: var(--esp-2); }
.curso-meta .ic { width: 16px; height: 16px; }

/* Lista de aulas dentro do módulo */
.aula-item {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-m);
  color: inherit; text-decoration: none;
  transition: background var(--transicao-rapida);
}
.aula-item:hover { background: var(--acao-superficie); }
.aula-item:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.aula-marco {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sup-rebaixo); color: var(--tinta-suave);
  border: 1px solid var(--borda-sutil);
}
.aula-marco .ic { width: 16px; height: 16px; }
.aula-item.feita .aula-marco { background: var(--acao-nevoa); color: var(--retorno-sucesso-tinta); border-color: transparent; }
.aula-item.atual .aula-marco { background: var(--acao-primaria); color: var(--acao-primaria-tinta); border-color: transparent; }
.aula-nome { flex: 1; min-width: 0; font-size: var(--tipo-corpo-p); font-weight: 500; color: var(--tinta-titulo); }
.aula-nome small { display: block; font-size: var(--tipo-legenda); font-weight: 400; color: var(--tinta-suave); }
.aula-item.atual .aula-nome { color: var(--tinta-primaria); }

/* ==========================================================================
   6. AULA — leitura e anexos
   ========================================================================== */

.prosa { max-width: 68ch; }
.prosa h2 {
  font-family: var(--tipo-marca); font-size: var(--tipo-titulo-1); font-weight: 600;
  color: var(--tinta-titulo); margin: var(--esp-8) 0 var(--esp-3);
}
.prosa h3 {
  font-family: var(--tipo-marca); font-size: var(--tipo-titulo-2); font-weight: 600;
  color: var(--tinta-titulo); margin: var(--esp-6) 0 var(--esp-2);
}
.prosa p { margin: var(--esp-3) 0; }
.prosa em { font-family: var(--tipo-marca); font-style: italic; }
.prosa ul { margin: var(--esp-3) 0 var(--esp-3) var(--esp-5); }
.prosa li + li { margin-top: var(--esp-2); }

.anexo-item {
  display: flex; align-items: center; gap: var(--esp-4);
  padding: var(--esp-4); border: 1px solid var(--borda-sutil);
  border-radius: var(--raio-m); background: var(--sup-cartao);
}
.anexo-item + .anexo-item { margin-top: var(--esp-3); }
.anexo-selo {
  width: 42px; height: 42px; flex: none; border-radius: var(--raio-s);
  background: var(--sup-pergaminho); border: 1px solid var(--borda-sutil);
  color: var(--cor-cacau-2); display: flex; align-items: center; justify-content: center;
}
.anexo-selo .ic { width: 20px; height: 20px; }
.anexo-nome { flex: 1; min-width: 0; font-size: var(--tipo-corpo-p); font-weight: 600; color: var(--tinta-titulo); }
.anexo-nome small { display: block; font-weight: 400; font-size: var(--tipo-legenda); color: var(--tinta-suave); }

/* ==========================================================================
   7. COMUNIDADE — listas da coluna lateral
   ========================================================================== */

.topico-item {
  display: flex; align-items: center; gap: var(--esp-3);
  min-height: 44px; padding: var(--esp-1) 0;
  color: inherit; text-decoration: none;
}
.topico-item .ic { width: 17px; height: 17px; color: var(--tinta-primaria); }
.topico-nome { flex: 1; min-width: 0; font-size: var(--tipo-corpo-p); font-weight: 500; color: var(--tinta-corpo); }
.topico-item:hover .topico-nome { color: var(--tinta-primaria); }
.topico-total {
  font-size: var(--tipo-legenda); font-weight: 600; color: var(--tinta-suave);
  background: var(--sup-rebaixo); border-radius: var(--raio-pilula);
  padding: 2px var(--esp-2); min-width: 34px; text-align: center;
}

.membro-item { display: flex; align-items: center; gap: var(--esp-3); min-height: 48px; }
.membro-nome { flex: 1; min-width: 0; font-size: var(--tipo-corpo-p); font-weight: 600; color: var(--tinta-titulo); }
.membro-nome small { display: block; font-weight: 400; font-size: var(--tipo-legenda); color: var(--tinta-suave); }

/* ==========================================================================
   8. LIVES — chat próprio ao lado do player
   ========================================================================== */

.chat { display: flex; flex-direction: column; max-height: 520px; }
.chat-corpo { flex: 1; overflow-y: auto; padding: var(--esp-2) 0; }
.chat-mensagem { display: flex; gap: var(--esp-3); padding: var(--esp-2) 0; }
.chat-quem { display: flex; align-items: baseline; gap: var(--esp-2); }
.chat-autor { font-size: var(--tipo-legenda); font-weight: 600; color: var(--tinta-titulo); }
.chat-hora { font-size: 11px; color: var(--tinta-apagada); }
.chat-texto { font-size: var(--tipo-corpo-p); color: var(--tinta-corpo); }
.chat-envio { display: flex; gap: var(--esp-2); padding-top: var(--esp-3); border-top: 1px solid var(--borda-sutil); }
.chat-envio .campo-entrada { border-radius: var(--raio-pilula); }
.chat-envio .botao-icone { background: var(--acao-primaria); color: var(--acao-primaria-tinta); }
.chat-envio .botao-icone:hover { background: var(--acao-primaria-flutuo); }

/* ==========================================================================
   9. BIBLIOTECA — categorias e coleções
   ========================================================================== */

.categoria-item {
  display: flex; align-items: center; gap: var(--esp-3);
  min-height: 44px; padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-m); color: inherit; text-decoration: none;
  transition: background var(--transicao-rapida);
}
.categoria-item .ic { width: 17px; height: 17px; color: var(--tinta-suave); }
.categoria-item:hover { background: var(--acao-superficie); }
.categoria-nome { flex: 1; min-width: 0; font-size: var(--tipo-corpo-p); font-weight: 500; }
.categoria-item.ativa { background: var(--acao-primaria); color: var(--acao-primaria-tinta); }
.categoria-item.ativa .ic, .categoria-item.ativa .topico-total { color: inherit; background: none; }

.colecao-item {
  display: flex; align-items: center; gap: var(--esp-3);
  min-height: 56px; padding: var(--esp-2) 0; color: inherit; text-decoration: none;
}
.colecao-item + .colecao-item { border-top: 1px solid var(--borda-sutil); }
.colecao-capa {
  width: 44px; height: 44px; flex: none; border-radius: var(--raio-s);
  background: var(--sup-pergaminho); border: 1px solid var(--borda-sutil);
  overflow: hidden; padding: 3px;
}
.colecao-capa img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; }

/* ==========================================================================
   10. PERFIL
   ========================================================================== */

.perfil-cabeca {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-5);
  padding: var(--esp-6); margin-top: var(--esp-6);
}
.perfil-quem { flex: 1; min-width: 240px; }
.perfil-nome {
  font-family: var(--tipo-marca); font-size: var(--tipo-titulo-1); font-weight: 600;
  color: var(--tinta-titulo); display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
}
.perfil-bio { margin-top: var(--esp-1); font-size: var(--tipo-corpo-p); color: var(--tinta-suave); max-width: 52ch; }
.perfil-meta {
  display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5);
  margin-top: var(--esp-2); font-size: var(--tipo-legenda); color: var(--tinta-suave);
}
.perfil-meta span { display: inline-flex; align-items: center; gap: var(--esp-1); }
.perfil-meta .ic { width: 14px; height: 14px; }

/* ==========================================================================
   11. ADMIN — navegação lateral + seções
   ========================================================================== */

.admin-nav { display: flex; gap: var(--esp-1); overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--esp-2); }
@media (min-width: 1024px) {
  .admin-nav { flex-direction: column; overflow: visible; padding-bottom: 0; }
}
.admin-nav a {
  display: flex; align-items: center; gap: var(--esp-3);
  min-height: 44px; padding: var(--esp-2) var(--esp-4);
  border-radius: var(--raio-m); text-decoration: none; white-space: nowrap;
  font-family: var(--tipo-rotulo); font-size: var(--tipo-rotulo-m); font-weight: 500;
  letter-spacing: var(--tipo-espaco-rotulo); text-transform: uppercase;
  color: var(--tinta-suave);
  transition: background var(--transicao-rapida), color var(--transicao-rapida);
}
.admin-nav a .ic { width: 18px; height: 18px; }
.admin-nav a:hover { background: var(--acao-superficie); color: var(--tinta-corpo); }
.admin-nav a.ativa { background: var(--acao-nevoa); color: var(--tinta-primaria); }

.admin-secao { padding: var(--esp-8) 0 var(--esp-2); scroll-margin-top: 96px; }
.admin-secao > .secao-titulo { margin-bottom: var(--esp-1); }
.admin-secao > .pagina-mote { margin-bottom: var(--esp-4); }

.denuncia {
  border-left: 3px solid var(--retorno-aviso);
}
.denuncia .cartao-corpo { display: flex; flex-direction: column; gap: var(--esp-3); }
.denuncia-motivo {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  font-size: var(--tipo-legenda); font-weight: 600; color: var(--retorno-aviso-tinta);
}
.denuncia-motivo .ic { width: 15px; height: 15px; }
.denuncia-trecho {
  background: var(--sup-rebaixo); border-radius: var(--raio-s);
  padding: var(--esp-3) var(--esp-4); font-size: var(--tipo-corpo-p); color: var(--tinta-corpo);
}
.denuncia-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

.config-linha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4);
  padding: var(--esp-4) 0;
}
.config-linha + .config-linha { border-top: 1px solid var(--borda-sutil); }
.config-rotulo { font-size: var(--tipo-corpo-p); font-weight: 600; color: var(--tinta-titulo); }
.config-rotulo small { display: block; font-weight: 400; font-size: var(--tipo-legenda); color: var(--tinta-suave); max-width: 46ch; }

/* ==========================================================================
   12. RODAPÉ-CITAÇÃO — o fecho de todas as telas
   ========================================================================== */

.rodape-citacao {
  margin-top: var(--esp-10); border-top: 1px solid var(--borda-sutil);
  padding: var(--esp-10) 0 var(--esp-12); text-align: center;
}
.rodape-ornamento {
  display: flex; align-items: center; justify-content: center; gap: var(--esp-3);
  margin-bottom: var(--esp-3); color: var(--tinta-apagada);
}
.rodape-ornamento::before, .rodape-ornamento::after {
  content: ''; height: 1px; width: min(120px, 20vw); background: var(--borda-media);
}
.rodape-ornamento .ic { width: 15px; height: 15px; }
.rodape-citacao blockquote {
  font-family: var(--tipo-marca); font-style: italic;
  font-size: var(--tipo-titulo-3); color: var(--tinta-suave);
}
.rodape-citacao cite {
  display: block; margin-top: var(--esp-2); font-style: normal;
  font-family: var(--tipo-rotulo); font-size: var(--tipo-rotulo-p); font-weight: 500;
  letter-spacing: var(--tipo-espaco-rotulo-g); text-transform: uppercase;
  color: var(--tinta-apagada);
}

/* ==========================================================================
   13. MIÚDOS
   ========================================================================== */

.so-desktop { display: none; }
@media (min-width: 1024px) { .so-desktop { display: flex; } .so-mobile { display: none; } }

.empurra { flex: 1; }

/* Barra de topo em telas estreitas: a marca cede tracking/tamanho para caber
   ao lado de um CTA de texto (entrada, admin). Nas 5 áreas o topo só tem
   ícones e já cabe; aqui o ganho é folga extra, nunca prejuízo. */
@media (max-width: 639.98px) {
  .nav-topo .marca { font-size: var(--tipo-rotulo-m); letter-spacing: 0.1em; gap: var(--esp-1); }
  .nav-topo .marca .ic { width: 19px; height: 19px; }
  /* rótulos que viram só-ícone quando o dedo aperta (o ícone e o aria-label ficam) */
  .rotulo-mini { display: none; }
  /* o selo "Painel" ao lado da marca é redundante com o H1 no mobile */
  .casco-topo .selo-projeto-bar { display: none; }
}

/* Faixa "continue de onde parou" (biblioteca / início) */
.continuar-item { display: flex; align-items: center; gap: var(--esp-4); min-width: 0; }
.continuar-item .colecao-capa { width: 52px; height: 52px; }
.continuar-info { flex: 1; min-width: 0; }
.continuar-nome {
  font-size: var(--tipo-corpo-p); font-weight: 600; color: var(--tinta-titulo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.continuar-item .progresso { margin-top: var(--esp-2); }