/* Identidade NeoVale: navy #0b1524, creme #f2f1ec, amarelo #f0ce46, azul #3e7fd9, vermelho #c23c2e */
:root {
  --fundo: #f2f1ec;
  --superficie: #ffffff;
  --texto: #0b1524;
  --texto-suave: #4a5568;
  --borda: #d9d6cc;
  --destaque: #3e7fd9;
  --destaque-texto: #ffffff;
  --amarelo: #f0ce46;
  --ok: #1f7a4d;
  --ok-fundo: #e3f3ea;
  --alerta: #8a5a00;
  --alerta-fundo: #fbf0cc;
  --erro: #c23c2e;
  --erro-fundo: #f8e1de;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0b1524;
    --superficie: #13213a;
    --texto: #f2f1ec;
    --texto-suave: #a9b4c6;
    --borda: #26385a;
    --destaque: #5b95e6;
    --ok: #6fd3a0;
    --ok-fundo: #12352a;
    --alerta: #f0ce46;
    --alerta-fundo: #3a3212;
    --erro: #ff8a7d;
    --erro-fundo: #3d1b18;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--destaque); }
h1 { font-size: 1.7rem; line-height: 1.2; margin: .6em 0 .4em; }
h2 { font-size: 1.2rem; margin: 1.6em 0 .5em; }
code { font-family: ui-monospace, "IBM Plex Mono", Menlo, monospace; font-size: .92em; }
table { border-collapse: collapse; }
th, td { border: 1px solid var(--borda); padding: .35rem .55rem; text-align: left; vertical-align: top; }

.topo {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between;
  padding: .7rem 1rem; background: var(--texto); color: var(--fundo);
}
.topo a { color: var(--fundo); }
.marca { font-weight: 800; text-decoration: none; letter-spacing: .02em; }
.marca::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .45em; background: var(--amarelo); border-radius: 2px; }
.quem { font-size: .92rem; }
.inline { display: inline; }
button.link { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; padding: 0 0 0 .4rem; }

.conteudo { max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 5rem; }
.estreito { max-width: 820px; }
.dica { color: var(--texto-suave); margin-top: 0; }
.aviso { padding: 1rem; border: 1px dashed var(--borda); border-radius: 8px; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.cartao {
  display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem; min-height: 120px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
  color: var(--texto); text-decoration: none;
}
.cartao:hover, .cartao:focus-visible { border-color: var(--destaque); }
.cartao .tipo { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.cartao .rodape { margin-top: auto; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .85rem; }
.selo { padding: .1rem .5rem; border-radius: 99px; background: var(--fundo); border: 1px solid var(--borda); font-size: .8rem; }
.selo.ok { background: var(--ok-fundo); color: var(--ok); border-color: transparent; }
.selo.alerta { background: var(--alerta-fundo); color: var(--alerta); border-color: transparent; }
.selo.erro { background: var(--erro-fundo); color: var(--erro); border-color: transparent; }
.prazo { color: var(--texto-suave); }

.faixa { padding: .7rem 1rem; border-radius: 8px; background: var(--superficie); border: 1px solid var(--borda); margin: .6rem 0; }
.faixa.ok { background: var(--ok-fundo); border-color: transparent; }
.faixa.alerta { background: var(--alerta-fundo); border-color: transparent; }
.faixa.erro { background: var(--erro-fundo); border-color: transparent; }
.destacar { outline: 3px solid var(--amarelo); outline-offset: 2px; }

.questao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: .2rem 1rem 1rem; margin: 1rem 0; }
.questao table { display: block; overflow-x: auto; }
.item { margin: 1rem 0; }
.item label { display: flex; gap: .4rem; }
.item label > div > p { margin: 0 0 .3rem; }
.letra { font-weight: 700; }
textarea, input[type="text"], input[type="password"], select {
  width: 100%; font: inherit; color: var(--texto); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px; padding: .55rem .65rem;
}
textarea { resize: vertical; min-height: 6rem; }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--destaque); outline-offset: 1px; }
textarea[readonly] { opacity: .85; }
.regras { color: var(--texto-suave); font-size: .92rem; }

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 1rem; align-items: center; justify-content: flex-end;
  padding: .7rem 1rem; background: var(--superficie); border-top: 1px solid var(--borda);
}
#estado-salvo { color: var(--texto-suave); font-size: .9rem; margin-right: auto; }
button { font: inherit; cursor: pointer; }
.primario { background: var(--destaque); color: var(--destaque-texto); border: 0; border-radius: 8px; padding: .55rem 1.1rem; font-weight: 600; }
.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; padding: .5rem 1rem; }
button:disabled { opacity: .5; cursor: not-allowed; }

.cartao-entrar { max-width: 420px; margin: 8vh auto; padding: 1.5rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; }
.cartao-entrar label { display: block; margin: .9rem 0 .3rem; font-weight: 600; }
.cartao-entrar .primario { width: 100%; margin-top: 1.2rem; }
.mensagem { min-height: 1.5em; margin-top: .8rem; color: var(--erro); }

.campo-encontro { display: block; max-width: 520px; font-weight: 600; }
.acoes { margin: 1rem 0; display: flex; gap: .6rem; flex-wrap: wrap; }
.linha-matriz { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: .8rem 1rem; margin: .7rem 0; }
.linha-matriz header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.linha-matriz dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: .6rem 0 0; }
.linha-matriz dt { color: var(--texto-suave); }
.linha-matriz dd { margin: 0; white-space: pre-wrap; }
dialog { width: min(760px, 96vw); border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); color: var(--texto); padding: 1rem 1.2rem; }
dialog::backdrop { background: rgba(11, 21, 36, .55); }
.formulario-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem 1rem; }
.formulario-linha label { display: flex; flex-direction: column; gap: .2rem; font-size: .92rem; font-weight: 600; }
.formulario-linha .largo { grid-column: 1 / -1; }

/* Painel do professor */
.painel { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; }
@media (max-width: 800px) { .painel { grid-template-columns: minmax(0, 1fr); } }
.painel .rolagem td { min-width: 8rem; }
.painel .rolagem td:first-child { min-width: 0; white-space: nowrap; }
.lista-turmas { list-style: none; padding: 0; margin: 0; }
.lista-turmas li { margin: .3rem 0; }
.lista-turmas button { width: 100%; text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: .5rem .7rem; color: var(--texto); }
.lista-turmas button[aria-current="true"] { border-color: var(--destaque); outline: 2px solid var(--destaque); }
.rolagem { overflow-x: auto; }
.ranking summary { font-size: 1.2rem; font-weight: 700; cursor: pointer; margin: 1rem 0 .3rem; }
.ranking td.numero { min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.tabela-alunos td button { background: none; border: 0; color: var(--destaque); text-decoration: underline; padding: 0; }
pre.json { max-height: 420px; overflow: auto; background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: .6rem; font-size: .8rem; }
details { margin: .4rem 0; }
.pre { white-space: pre-wrap; }