/* ==========================================================================
   Visual comum ao gerador e ao verificador.

   Duas decisões que valem pra tudo aqui:

   1. Duas famílias de fonte. Sans para texto que se lê, mono para dado que
      se confere (RA, e-mail, turma, número). O contraste entre as duas é o
      que cria hierarquia — antes era tudo mono no mesmo tamanho, e por isso
      a tela parecia despejo de terminal.

   2. Cor significa gravidade, não decoração. Vermelho = grave, âmbar =
      atenção, verde = tudo certo. A cor da turma (--turma) aparece em dois
      lugares e só: o filete do topo e o seletor. Assim ninguém confunde
      "laranja porque é RB3" com "laranja porque tem problema".
   ========================================================================== */

:root {
  /* Superfícies: grafite levemente frio, em camadas distinguíveis. */
  --fundo:      #14161a;
  --painel:     #1b1e24;
  --painel-alt: #22262e;
  --linha:      #2e333c;
  --linha-viva: #3c434f;

  /* Texto */
  --tinta:       #e8eaed;
  --tinta-media: #a8aeb9;
  --tinta-fraca: #6e7683;

  /* Gravidade */
  --grave:   #f2645a;
  --atencao: #e0a33e;
  --certo:   #4fb477;
  --info:    #6ba6e8;

  /* Identidade da turma — definida por JS. */
  --turma: #4fb477;

  --sans: -apple-system, "Segoe UI Variable Text", "Segoe UI", system-ui,
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas,
          "Liberation Mono", monospace;

  --raio: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Filete da turma no topo da janela: identidade sem ocupar espaço. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--turma);
  z-index: 10;
}

.pagina {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

@media (max-width: 640px) { .pagina { padding: 28px 16px 56px; } }

a { color: var(--info); }

/* ---------------------------------------------------------- cabeçalho -- */

header { margin-bottom: 36px; }

.voltar {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--tinta-fraca);
  font-size: 13px;
  text-decoration: none;
}
.voltar:hover { color: var(--info); }

.titulo-linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

h1 {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.turma-nome {
  margin: 5px 0 0;
  color: var(--tinta-media);
  font-size: 14px;
}

/* Seletor de turma */
#seletor { display: flex; gap: 6px; flex: none; }

.turma-btn {
  padding: 6px 15px;
  border: 1px solid var(--linha-viva);
  border-radius: 6px;
  background: transparent;
  color: var(--tinta-media);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s;
}
.turma-btn:hover { border-color: var(--turma); color: var(--tinta); }
.turma-btn.ativa {
  border-color: var(--turma);
  background: var(--turma);
  color: var(--fundo);
}

/* -------------------------------------------------------------- passos -- */

.passo { margin-bottom: 32px; }

.passo-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 600;
}

/* O processo É uma sequência, então numerar carrega informação. */
.passo-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--linha-viva);
  border-radius: 50%;
  color: var(--tinta-fraca);
  font-family: var(--mono);
  font-size: 12px;
}

.nota {
  margin-top: 12px;
  color: var(--tinta-fraca);
  font-size: 13px;
  max-width: 68ch;
}

/* ------------------------------------------------------------- uploads -- */

.uploads { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.uploads.tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .uploads, .uploads.tres { grid-template-columns: 1fr; }
}

.upload {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px dashed var(--linha-viva);
  border-radius: var(--raio);
  background: var(--painel);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.upload:hover { border-color: var(--info); }
.upload.arrastando { border-color: var(--info); background: var(--painel-alt); }
.upload.pronto { border-style: solid; border-color: var(--turma); }

.upload-icone { font-size: 17px; line-height: 1.3; flex: none; }
.upload-texto { min-width: 0; }
.upload-rotulo { font-weight: 600; font-size: 14px; }
.upload-dica {
  margin-top: 2px;
  color: var(--tinta-fraca);
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-word;
}
.upload-explica { margin-top: 3px; color: var(--tinta-media); font-size: 13px; }
.upload-opcional { color: var(--tinta-fraca); font-weight: 400; font-size: 12px; }
.upload input[type="file"] { display: none; }

/* ------------------------------------------------------------- botões -- */

/* Serve em <button> e em <a> — o link "abrir o verificador" é uma ação. */
.btn {
  display: inline-block;
  border: none;
  border-radius: 6px;
  background: var(--turma);
  color: var(--fundo);
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.12s;
}
.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:disabled {
  background: var(--painel-alt);
  color: var(--tinta-fraca);
  cursor: not-allowed;
}

.btn-secundario {
  background: transparent;
  border: 1px solid var(--linha-viva);
  color: var(--tinta-media);
}
.btn-secundario:hover:not(:disabled) {
  border-color: var(--info); color: var(--tinta); filter: none;
}

:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

/* ---------------------------------------------------------- resultado -- */

/* A faixa é o herói: o que aconteceu e o que fazer agora, no topo. */
.faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--turma);
  border-radius: var(--raio);
  background: var(--painel);
  margin-bottom: 14px;
}
.faixa.tem-grave { border-left-color: var(--grave); }
.faixa-titulo { font-size: 19px; font-weight: 600; }
.faixa-sub { color: var(--tinta-media); font-size: 13.5px; margin-top: 2px; }

/* Números em linha, mono, sem virar tabela. */
.numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  padding: 0 22px 18px;
  margin: -8px 0 22px;
}
.numero { padding-top: 10px; }
.numero b {
  display: block;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}
.numero span { color: var(--tinta-fraca); font-size: 12.5px; }
.numero.destaque b { color: var(--atencao); }

.secao {
  margin-bottom: 26px;
}
.secao-titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
}
.secao-titulo em {
  color: var(--tinta-fraca);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
}

/* ------------------------------------------- ocupação das turmas ------- */

/* O elemento visual da ferramenta: 300 vagas, quem está dentro, quem está
   reservado. É a pergunta que a pessoa realmente tem. */
.ocupacao { display: grid; gap: 3px; }

.turma-linha {
  display: grid;
  grid-template-columns: 84px 1fr 92px;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
}
@media (max-width: 640px) {
  .turma-linha { grid-template-columns: 64px 1fr 78px; gap: 10px; }
}

.turma-id { font-family: var(--mono); font-size: 13px; color: var(--tinta-media); }

.trilha {
  display: flex;
  height: 14px;
  border-radius: 3px;
  background: var(--painel-alt);
  overflow: hidden;
}
.cheio { background: var(--certo); }
.cheio.quase { background: var(--atencao); }
.cheio.estourou { background: var(--grave); }
/* Reservado = pendente com vaga guardada. Listrado pra ler como "ainda não". */
.reserva {
  background-image: repeating-linear-gradient(
    -45deg, var(--linha-viva) 0 4px, transparent 4px 8px);
  border-left: 1px solid var(--fundo);
}

.turma-conta { font-family: var(--mono); font-size: 13px; text-align: right; }
.turma-conta b { font-weight: 600; }
.turma-conta i { color: var(--tinta-fraca); font-style: normal; }

.turma-aviso {
  grid-column: 2 / -1;
  margin-top: -4px;
  color: var(--tinta-fraca);
  font-size: 12.5px;
}
.turma-aviso.grave { color: var(--grave); }

.legenda {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: var(--tinta-fraca);
  font-size: 12.5px;
}
.legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }

/* ---------------------------------------------------- linhas dobradas -- */

/* Uma lista de 44 nomes não pode empurrar o resto da página pra baixo.
   Fica dobrada, com a contagem visível, e abre no clique. */
.dobra { border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 8px; }
.dobra.grave { border-color: rgba(242, 100, 90, 0.4); }

.dobra-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: none;
  background: var(--painel);
  border-radius: var(--raio);
  color: inherit;
  font-family: var(--sans);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.dobra-topo:hover { background: var(--painel-alt); }
.dobra-topo[aria-expanded="true"] { border-radius: var(--raio) var(--raio) 0 0; }
.dobra-topo.sem-clique { cursor: default; }
.dobra-topo.sem-clique:hover { background: var(--painel); }

.conta {
  flex: none;
  min-width: 34px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  text-align: right;
}
.conta.grave { color: var(--grave); }
.conta.atencao { color: var(--atencao); }
.conta.certo { color: var(--certo); }
.conta.neutra { color: var(--tinta-fraca); }

.dobra-rotulo { flex: 1; min-width: 0; }
.dobra-seta { flex: none; color: var(--tinta-fraca); font-size: 11px; }

.dobra-corpo {
  padding: 4px 16px 16px;
  background: var(--painel);
  border-radius: 0 0 var(--raio) var(--raio);
}
.dobra-explica {
  margin: 0 0 12px;
  color: var(--tinta-media);
  font-size: 13px;
  max-width: 72ch;
}

/* ------------------------------------------------------------ tabelas -- */

.rolagem { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
th {
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta-fraca);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
td {
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid rgba(46, 51, 60, 0.6);
  vertical-align: top;
}
tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------- avisos -- */

.erro, .aviso {
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
  margin-bottom: 18px;
  font-size: 14px;
}
.erro { border-left: 3px solid var(--grave); }
.aviso { border-left: 3px solid var(--atencao); }
.erro-titulo { font-weight: 600; margin-bottom: 5px; }
.erro ul, .aviso ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--tinta-media);
  font-size: 13px;
}
.erro li, .aviso li { margin-bottom: 4px; }

.escolher-aba { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.escolher-aba select {
  padding: 7px 10px;
  border: 1px solid var(--linha-viva);
  border-radius: 6px;
  background: var(--painel-alt);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 13px;
}

/* -------------------------------------------------------- verificador -- */

.cartoes-num {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
  margin-bottom: 22px;
}

/* ------------------------------------------------------------- rodapé -- */

.rodape {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
  color: var(--tinta-fraca);
  font-size: 12.5px;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* -------------------------------------------------------------- capa -- */

.ferramentas { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .ferramentas { grid-template-columns: 1fr; } }

.ferramenta {
  padding: 22px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
}
.ferramenta h2 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.ferramenta h2 span { color: var(--tinta-fraca); font-family: var(--mono); font-size: 14px; }
.ferramenta p { margin: 0; color: var(--tinta-media); font-size: 13.5px; max-width: 44ch; }
.ferramenta-links { display: flex; gap: 6px; margin-top: 16px; }

.roteiro { display: grid; gap: 1px; margin-top: 26px; }
.roteiro li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 14px;
}
.roteiro li:last-child { border-bottom: none; }
.roteiro ol { margin: 0; padding: 0; list-style: none; }
.roteiro .n { flex: none; color: var(--tinta-fraca); font-family: var(--mono); font-size: 13px; }