/* ============================================================
   ESTILO EXTRA — só das páginas de estudo.
   Este arquivo entra DEPOIS do estilo.css, então ele só
   acrescenta coisas novas. Seu estilo.css continua intocado.
   ============================================================ */

/* --- etiquetas (grátis / idioma / nível) --- */
.etiqueta {
  display: inline-block;
  font-size: 11px;
  line-height: 1.4;
  padding: 0 4px;
  margin-left: 4px;
  border: 1px solid var(--sombra);
  background: #EFEDE7;
  vertical-align: middle;
  white-space: nowrap;
}
.etiqueta.gratis { background: var(--destaque); }
.etiqueta.pt { background: #DCE7F5; }
.etiqueta.en { background: #F5E2DC; }
.etiqueta.fr { background: #E8DCF5; }
.etiqueta.conta { background: #F2EFD6; }

/* --- lista de recursos --- */
.recursos { list-style: none; padding-left: 0; }
.recursos li {
  border-bottom: 1px dotted var(--sombra);
  padding: .45rem .2rem;
  margin: 0;
}
.recursos li:last-child { border-bottom: none; }
.recursos .oq { display: block; font-size: 13px; color: #4a4a44; }

/* --- cartões das trilhas --- */
.trilhas { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }
.trilhas a {
  flex: 1 1 200px;
  display: block;
  text-decoration: none;
  color: var(--texto);
  padding: .6rem .7rem;
  background: var(--fundo-janela);
  border: 2px solid;
  border-color: var(--luz) var(--sombra) var(--sombra) var(--luz);
}
.trilhas a:hover { border-color: var(--sombra) var(--luz) var(--luz) var(--sombra); }
.trilhas b { display: block; font-size: 15px; margin-bottom: .15rem; }
.trilhas span { font-size: 13px; color: #4a4a44; }

/* --- fases numeradas (a ordem importa de verdade aqui) --- */
.fases { list-style: none; padding-left: 0; counter-reset: fase; }
.fases > li {
  counter-increment: fase;
  position: relative;
  padding: .5rem 0 .5rem 2.4rem;
  border-bottom: 1px solid var(--sombra);
}
.fases > li::before {
  content: counter(fase);
  position: absolute;
  left: 0; top: .5rem;
  width: 1.7rem; height: 1.4rem;
  display: grid; place-items: center;
  font-size: 12px; font-weight: bold;
  background: var(--barra-inicio); color: #fff;
}
.fases > li:last-child { border-bottom: none; }
.fases b { display: block; }
.fases small { color: #4a4a44; }

/* --- resposta escondida --- */
details {
  border: 1px solid var(--sombra);
  background: rgba(255,255,255,.4);
  padding: .3rem .6rem;
  margin: .5rem 0;
}
details summary { cursor: pointer; font-size: 13px; font-weight: bold; }
details[open] summary { border-bottom: 1px solid var(--sombra); margin-bottom: .4rem; padding-bottom: .3rem; }

/* --- grade de campo minado (usada na página de lógica) --- */
.grade { border-collapse: collapse; width: auto; margin: .8rem 0; }
.grade td {
  width: 32px; height: 32px;
  text-align: center; vertical-align: middle;
  font-family: "Courier New", monospace;
  font-weight: bold; font-size: 15px;
  padding: 0;
  border: 1px solid var(--sombra);
}
.grade .aberta { background: #EFEDE7; }
.grade .fechada {
  background: var(--fundo-janela);
  border: 2px solid;
  border-color: var(--luz) var(--sombra) var(--sombra) var(--luz);
}
.grade .mina { background: #F0B6B6; }
.grade .segura { background: var(--destaque); }
.grade caption { caption-side: bottom; font-size: 12px; padding-top: .3rem; color: #4a4a44; }

/* --- controle de progresso --- */
.painel {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-bottom: 1rem;
}
.painel div {
  flex: 1 1 120px;
  text-align: center;
  padding: .5rem;
  border: 1px solid;
  border-color: var(--sombra) var(--luz) var(--luz) var(--sombra);
  background: rgba(255,255,255,.4);
}
.painel strong { display: block; font-size: 24px; line-height: 1.2; }
.painel span { font-size: 12px; color: #4a4a44; }

.marcador { width: 100%; font-size: 13px; }
.marcador th { font-weight: bold; }
.marcador td { text-align: center; padding: 2px; }
.marcador td:first-child, .marcador th:first-child { text-align: left; white-space: nowrap; }
.marcador input[type="checkbox"] { width: 17px; height: 17px; }
.marcador .hoje { background: #FFF6C9; }

.botao {
  font-family: inherit;
  font-size: 13px;
  padding: .25rem .8rem;
  background: var(--fundo-janela);
  border: 2px solid;
  border-color: var(--luz) var(--sombra) var(--sombra) var(--luz);
  cursor: pointer;
}
.botao:active { border-color: var(--sombra) var(--luz) var(--luz) var(--sombra); }

textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: .4rem;
  background: #fff;
  border: 1px solid;
  border-color: var(--sombra) var(--luz) var(--luz) var(--sombra);
}