/* ============================================
   ELEVA AMAPÁ — global-assuntos.css
   Reutilizável em QUALQUER página de assunto individual
   (Redação, ENEM, Educação Financeira...).
   Reaproveita dashboard.css (sidebar/header/fade-in) —
   aqui só ficam as classes do CONTEÚDO da página de assunto.

   Convenção de cores por nível (mesma em todos os módulos):
     Essencial        → verde-esmeralda
     Muito Importante  → âmbar/dourado
     Importante        → laranja
   ============================================ */

/* ---------- Cabeçalho do assunto (breadcrumb + badge + título) ---------- */
.assunto-breadcrumb {
  font-size: 0.8rem;
  color: #71717a;
}
.assunto-breadcrumb a {
  color: #71717a;
  text-decoration: none;
  transition: color 0.15s ease;
}
.assunto-breadcrumb a:hover {
  color: #f59e0b;
}

.assunto-badge-nivel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.8rem;
  border-radius: 9999px;
  margin-bottom: 0.9rem;
}
.badge-essencial {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.badge-muito-importante {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge-importante {
  background: rgba(249, 115, 22, 0.12);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.assunto-titulo {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.assunto-resumo {
  color: #a1a1aa;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ---------- Blocos de conteúdo genéricos ---------- */
.secao-assunto {
  margin-bottom: 1.75rem;
}
.secao-assunto-titulo {
  font-size: 1rem;
  font-weight: 800;
  color: #f4f4f5;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.secao-assunto-texto {
  color: #d4d4d8;
  font-size: 0.9rem;
  line-height: 1.7;
}
.secao-assunto-texto + .secao-assunto-texto {
  margin-top: 0.75rem;
}

/* Caixa de regra/explicação principal (neutra) */
.box-explicacao {
  background: #18181b;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.9rem;
  padding: 1.1rem 1.3rem;
}

/* Caixa de exemplo (verde — "faça assim") */
.box-exemplo {
  background: rgba(16, 185, 129, 0.06);
  border-left: 3px solid #10b981;
  border-radius: 0.6rem;
  padding: 0.9rem 1.2rem;
  font-size: 0.875rem;
  color: #d4d4d8;
}
.box-exemplo strong {
  color: #34d399;
}

/* Caixa de erro comum (vermelho — "evite isso") */
.box-erro {
  background: rgba(239, 68, 68, 0.06);
  border-left: 3px solid #ef4444;
  border-radius: 0.6rem;
  padding: 0.9rem 1.2rem;
  font-size: 0.875rem;
  color: #d4d4d8;
}
.box-erro strong {
  color: #f87171;
}

/* Caixa de dica (dourado — reforço/mnemônico) */
.box-dica {
  background: rgba(245, 158, 11, 0.06);
  border-left: 3px solid #f59e0b;
  border-radius: 0.6rem;
  padding: 0.9rem 1.2rem;
  font-size: 0.875rem;
  color: #d4d4d8;
}
.box-dica strong {
  color: #fbbf24;
}

/* Lista com marcador dourado (reaproveitada em várias páginas) */
.lista-assunto {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.lista-assunto li {
  font-size: 0.875rem;
  color: #a1a1aa;
  line-height: 1.55;
  padding-left: 1.1rem;
  position: relative;
}
.lista-assunto li::before {
  content: '•';
  position: absolute;
  left: 0.2rem;
  color: #f59e0b;
  font-weight: 900;
}

/* ---------- Exercício rápido (com resposta escondida) ---------- */
.exercicio-card {
  background: #18181b;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.9rem;
  padding: 1.1rem 1.3rem;
}
.exercicio-enunciado {
  font-size: 0.9rem;
  color: #e4e4e7;
  font-weight: 600;
  margin-bottom: 0.9rem;
  line-height: 1.5;
}
.exercicio-opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.exercicio-opcao {
  font-size: 0.85rem;
  color: #a1a1aa;
  background: #0c0c0e;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.6rem;
  padding: 0.6rem 0.9rem;
}
.btn-mostrar-resposta {
  font-size: 0.78rem;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 9999px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-mostrar-resposta:hover {
  background: rgba(245, 158, 11, 0.18);
}
.resposta-exercicio {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.85rem;
  color: #d4d4d8;
  line-height: 1.6;
}
.resposta-exercicio.aberta {
  display: block;
}

/* ---------- Navegação entre assuntos (anterior / próximo) ---------- */
.assunto-nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
}
.assunto-nav a {
  flex: 1;
  background: #18181b;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.9rem;
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.assunto-nav a:hover {
  border-color: rgba(245, 158, 11, 0.3);
  transform: translateY(-2px);
}
.assunto-nav-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #71717a;
  margin-bottom: 0.25rem;
}
.assunto-nav-nome {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #e4e4e7;
}
.assunto-nav-proximo {
  text-align: right;
}

/* ---------- Overlay de bloqueio (acesso direto sem ser Estudante) ---------- */
/* Protege contra o aluno Free tentando entrar direto pela URL, já
   que o clique na lista já é travado — essa é a segunda camada de
   segurança, agora na própria página de conteúdo. */
#lock-assunto {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 1.5rem;
  background: rgba(9, 9, 11, 0.94);
  backdrop-filter: blur(4px);
}
#lock-assunto .lock-icone {
  font-size: 2.75rem;
}
#lock-assunto .lock-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
  max-width: 26rem;
}
#lock-assunto .lock-texto {
  font-size: 0.875rem;
  color: #a1a1aa;
  max-width: 26rem;
  line-height: 1.55;
}