/* ============================================================
   EXERCICIOS — estilos específicos de exercicios.html
   Reaproveita a base de artigo de material.css (mesmo layout de
   página, cabeçalho e variáveis de tema.css); este arquivo só
   acrescenta o que é específico da lista de exercícios.
   ============================================================ */

.exercicio {
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 22px;
  background: var(--cor-fundo-alt);
}

.exercicio-cabecalho {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.exercicio-numero {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ifpe-verde-escuro);
}

.dificuldade {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  display: none;
}

.dificuldade--facil {
  background: color-mix(in srgb, var(--ifpe-verde) 20%, transparent);
  color: var(--ifpe-verde-escuro);
}

.dificuldade--media {
  background: color-mix(in srgb, #e6c15a 25%, transparent);
  color: #8a6a12;
}

.dificuldade--dificil {
  background: color-mix(in srgb, var(--ifpe-vermelho-texto) 15%, transparent);
  color: var(--ifpe-vermelho-texto);
}

.exercicio-topico {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

.enunciado {
  margin: 0 0 14px;
}

/* Enunciado com dado em destaque (um painel, uma leitura de sensor). */
.destaque-enunciado {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 10px 16px;
  text-align: center;
}

/* ---------- Alternativas de múltipla escolha ----------
   A letra vem do próprio marcador da lista (A, B, C...), então o
   gabarito pode citar "alternativa C" sem que a letra precise ser
   digitada à mão em cada item. */

.alternativas {
  list-style-type: upper-alpha;
  margin: 0 0 4px;
  padding-left: 2em;
}

.alternativas li {
  margin-bottom: 7px;
  padding-left: 4px;
}

.alternativas li::marker {
  font-weight: 700;
  color: var(--ifpe-verde-escuro);
}

.exercicio details {
  margin-top: 14px;
}

.exercicio summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ifpe-verde-escuro);
  outline: none;
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--ifpe-verde-escuro);
  border-radius: 6px;
  background: var(--cor-fundo);
  list-style: none;
}

.exercicio summary::-webkit-details-marker {
  display: none;
}

.exercicio summary:hover {
  background: color-mix(in srgb, var(--ifpe-verde) 15%, transparent);
}

.exercicio details[open] summary {
  margin-bottom: 4px;
}

.exercicio summary::before {
  content: "▸ ";
}

.exercicio details[open] summary::before {
  content: "▾ ";
}

.exercicio .rotulo-aberto {
  display: none;
}

.exercicio details[open] .rotulo-fechado {
  display: none;
}

.exercicio details[open] .rotulo-aberto {
  display: inline;
}

.exercicio summary::marker {
  color: var(--ifpe-verde-escuro);
}

.resolucao {
  margin-top: 12px;
}

.resolucao p {
  margin: 0 0 10px;
}

.resposta-final {
  border-left: 5px solid var(--ifpe-vermelho-texto);
  background: color-mix(in srgb, var(--ifpe-vermelho-texto) 6%, transparent);
  padding: 8px 16px;
  margin-top: 10px;
  font-weight: 600;
}

.legenda-dificuldade {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
  margin: 4px 0 32px;
  align-items: center;
}

/* Lembrete das regras de derivação, no topo da lista. */
.lembrete-regras {
  border: 1px solid var(--cor-borda);
  border-left: 5px solid var(--ifpe-verde-escuro);
  border-radius: 10px;
  background: var(--cor-fundo-alt);
  padding: 18px 26px 8px;
  margin-bottom: 26px;
}

.lembrete-regras h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ifpe-verde-escuro);
}

.lembrete-regras p {
  font-size: 0.92rem;
  color: var(--cor-texto-suave);
  margin: 0 0 12px;
}

/* Letra da resposta, no topo de cada resolução. */
.resposta-letra {
  font-size: 1.05rem;
  color: var(--ifpe-verde-escuro);
  margin: 0 0 12px;
}

/* ---------- Gabarito ---------- */

.gabarito {
  margin-top: 40px;
  padding: 20px 26px;
  border: 1px solid var(--ifpe-verde-escuro);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ifpe-verde) 8%, transparent);
  scroll-margin-top: 20px;
}

.gabarito h2 {
  margin: 0 0 14px;
  font-size: 1.2rem;
  color: var(--ifpe-verde-escuro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tabela-gabarito {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tabela-gabarito td {
  padding: 8px 6px;
  text-align: center;
  border: 1px solid var(--cor-borda);
}

@media (max-width: 560px) {
  .tabela-gabarito,
  .tabela-gabarito tbody,
  .tabela-gabarito tr {
    display: block;
  }

  .tabela-gabarito td {
    display: inline-block;
    width: 30%;
  }
}