/* Boletim — folha única, sem dependências externas. */

:root {
  --tinta: #1d1c19;
  --fundo: #f4f3f0;
  --papel: #ffffff;
  --linha: #e2e0da;
  --sub: #6b6862;
  --acento: #0f766e;
  --acento-escuro: #0b5952;
  --ok-fundo: #e7f5f1;
  --ok-tinta: #0b5952;
  --erro-fundo: #fdeceb;
  --erro-tinta: #a3231b;
  --verde-aprovado: #166534;
}

/* Total do boletim: neutro abaixo de 6, verde escuro quando aprovado (≥6). */
.total { font-weight: 600; }
.total.aprovado { color: var(--verde-aprovado); }
.metrica.total-metrica .valor { font-weight: 700; }
.metrica.total-metrica.aprovado .valor { color: var(--verde-aprovado); }

/* Grade consolidada: cabeçalho de grupo por disciplina (5 sub-colunas). */
.grade th.grupo-disc {
  text-align: center;
  border-left: 2px solid var(--linha);
  font-size: 0.78rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Topo */
.topo {
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  padding: 12px 0;
  margin-bottom: 28px;
}
.topo .wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.marca { font-weight: 700; font-size: 1.15rem; color: var(--tinta); text-decoration: none; }
.nav { display: flex; gap: 16px; flex: 1; }
.nav a { color: var(--acento); text-decoration: none; font-size: 0.9rem; }
.nav a:hover { color: var(--acento-escuro); text-decoration: underline; }
.quem { font-size: 0.85rem; color: var(--sub); }
.papel {
  background: var(--fundo); border: 1px solid var(--linha);
  border-radius: 999px; padding: 1px 8px; font-size: 0.75rem; margin-left: 4px;
}

h1 { font-size: 1.6rem; margin: 0 0 20px; }
h2 { font-size: 1.05rem; margin: 0 0 14px; }
/* Título de seção com ação à direita (ex.: "Alunos ... Baixar planilha") */
h2:has(> .botao-secundario) { display: flex; align-items: center; gap: 12px; }
.botao-secundario {
  margin-left: auto; font-size: 0.82rem; font-weight: 500; white-space: nowrap;
  padding: 6px 12px; border: 1px solid var(--linha); border-radius: 6px;
  text-decoration: none;
}
.botao-secundario:hover { background: var(--fundo); }
/* Mesma diagramação quando a ação fica na linha de ajuda (ex.: "N pendências
   em M alunos ... Baixar lista de contato"). */
.ajuda:has(> .botao-secundario) { display: flex; align-items: center; gap: 12px; }

a { color: var(--acento); }
a:hover { color: var(--acento-escuro); }

.volta { margin: 0 0 12px; font-size: 0.9rem; }
.volta a { text-decoration: none; }

/* Cartões */
.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.dados dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 16px; margin: 0; }
.dados dt { color: var(--sub); font-size: 0.85rem; }
.dados dd { margin: 0; }

.resumo { display: flex; gap: 32px; flex-wrap: wrap; }
.metrica { display: flex; flex-direction: column; }
.metrica .rotulo { font-size: 0.78rem; color: var(--sub); text-transform: uppercase; letter-spacing: 0.04em; }
.metrica .valor { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.metrica.destaque .valor { color: var(--acento); }
.metrica .detalhe { font-size: 0.78rem; color: var(--sub); margin-top: 2px; }

/* Cartão de resumo do topo: as métricas quebram em linha antes de espremer */
.resumo-topo .resumo { gap: 28px 40px; }
.resumo-topo .ajuda:first-child { margin-top: 0; }
.resumo-topo .ajuda:last-child { margin-bottom: 0; }

/* Tabelas — rolam sozinhas em telas estreitas */
.cartao { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabela th, .tabela td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela th {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--sub); font-weight: 600; border-bottom-width: 2px; white-space: nowrap;
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .destaque { font-weight: 600; color: var(--acento); }
.sub { color: var(--sub); font-size: 0.85rem; }
.tag {
  background: var(--erro-fundo); color: var(--erro-tinta);
  border-radius: 4px; padding: 1px 5px; font-size: 0.7rem; font-weight: 600;
}
/* Etiqueta de filtro ativo: informa, não alerta — por isso não usa o vermelho
   da tag de turma. */
.tag-filtro { background: var(--ok-fundo); color: var(--ok-tinta); font-weight: 500; }

.lista-cursos { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-cursos a {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 8px;
  padding: 14px 16px; text-decoration: none; color: var(--tinta);
}
.lista-cursos a:hover { border-color: var(--acento); }

/* Formulários */
.form .linha, .form.linha { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--sub); }
.form label.cresce { flex: 1; min-width: 220px; }
.ajuda { font-size: 0.85rem; color: var(--sub); margin: 4px 0 10px; }

input[type="date"], input[type="number"], input[type="text"] {
  font: inherit; font-size: 0.92rem; padding: 7px 9px;
  border: 1px solid var(--linha); border-radius: 6px; background: var(--papel); color: var(--tinta);
}
input:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }

button {
  font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer;
  background: var(--acento); color: #fff; border: none;
  border-radius: 6px; padding: 8px 16px;
}
button:hover { background: var(--acento-escuro); }
button.risco { background: none; color: var(--erro-tinta); padding: 4px 6px; font-size: 0.82rem; }
button.risco:hover { background: var(--erro-fundo); }

.form-inline { display: flex; gap: 6px; align-items: center; margin: 0; }
.form-inline input[type="number"] { width: 72px; }
.form-inline input[type="text"] { width: 170px; }
/* Lançamento de falta na linha: a data é o campo mais largo da coluna. */
.form-inline input[type="date"] { width: 140px; }
.form-inline button { padding: 6px 12px; }

/* Grade consolidada: muitas colunas estreitas, rola dentro do .cartao */
.grade { font-size: 0.85rem; }
.grade th, .grade td { padding: 6px 8px; white-space: nowrap; }
.grade thead th.num { font-size: 0.78rem; }
.grade td.vazia { color: var(--linha); }

/* Faixa de fundo alternada por disciplina (grupo de 5 colunas), como no Excel.
   Pinta as próprias células, então acompanha a rolagem horizontal. Sutil o
   bastante para não competir com o verde do Total nem com os links.

   Escopo em `tbody` de propósito: como fundo semitransparente, esta regra em
   cima de uma célula CONGELADA deixaria o conteúdo passar por baixo ao rolar.
   O cabeçalho tem faixa própria, opaca, mais abaixo. */
.grade tbody .faixa { background: rgba(0, 0, 0, 0.035); }

/* A rolagem horizontal fica num wrapper SEM padding, para a coluna fixa grudar
   exatamente em x=0. Se o padding do .cartao ficasse no elemento que rola, o
   conteúdo apareceria numa fresta à esquerda do nome. O respiro fica no .cartao.

   A ALTURA MÁXIMA é o que permite congelar o cabeçalho. `position: sticky` se
   fixa no elemento que rola mais próximo, e este wrapper já é um (overflow-x
   auto torna o eixo Y "auto" também, por regra do CSS). Sem altura, ele nunca
   rola na vertical — a página é que rola — e o topo passaria por baixo do
   cabeçalho da tabela sem nunca prendê-lo. Com max-height, a grade vira um
   painel que rola nos dois eixos, como o "congelar painéis" do Excel, e a
   tabela pequena continua sem barra nenhuma. */
.grade-rolagem { overflow: auto; max-height: 78vh; }

/* Cabeçalho congelado. São DUAS linhas: nome da disciplina e, embaixo,
   P1/P2/AVA/Part/Total/Faltas. A segunda tem de parar exatamente onde a
   primeira termina, e `top` não aceita "a altura da linha de cima" — é número.

   Para o número não depender da métrica da fonte, a primeira linha tem altura E
   entrelinha fixas: com box-sizing: border-box (global), 30px é 30px, padding e
   borda inclusos. Mexeu no padding de .grade th? Acerte os dois valores juntos,
   senão abre uma fresta de 1px por onde as notas aparecem ao rolar. */
.grade thead th { position: sticky; z-index: 2; background-color: var(--papel); }
.grade thead tr:first-child th { top: 0; height: 30px; line-height: 18px; }
.grade thead tr:nth-child(2) th { top: 30px; }

/* A borda de baixo do cabeçalho é redesenhada como sombra interna. Com
   border-collapse: collapse a borda pertence à grade da tabela, não à célula, e
   por isso NÃO acompanha a célula congelada — ela rola embora e as linhas
   passam a encostar no cabeçalho. Mesmo truque que segura a borda da coluna
   "Aluno" congelada, logo abaixo. */
.grade thead tr:nth-child(2) th { box-shadow: inset 0 -2px 0 var(--linha); }
/* Aluno e Status ocupam as duas linhas (rowspan), então a borda de baixo é a do
   cabeçalho inteiro. Só o Aluno é congelado à esquerda — só ele mantém a borda
   direita e a sombra que indicam conteúdo passando por baixo. */
.grade thead tr:first-child th.col-aluno {
  box-shadow: inset -1px 0 0 var(--linha), inset 0 -2px 0 var(--linha),
              3px 0 5px -2px rgba(0, 0, 0, 0.12);
}
.grade thead tr:first-child th.col-status { box-shadow: inset 0 -2px 0 var(--linha); }

/* A faixa alternada do CABEÇALHO é opaca: fundo sólido embaixo, tinta por cima
   como imagem. As duas declarações vivem juntas nesta regra de propósito — a cor
   sozinha, herdada de outra regra, é o que deixava o conteúdo passar por trás
   enquanto rolava. Não troque por `background:` translúcido. */
.grade thead th.faixa {
  background-color: var(--papel);
  background-image: linear-gradient(rgba(0, 0, 0, 0.035), rgba(0, 0, 0, 0.035));
}

/* Mesma ideia nas tabelas simples (lista do professor): só o topo, porque não
   há coluna congelada à esquerda. */
.tabela-rolagem { overflow: auto; max-height: 78vh; }
.tabela-rolagem thead th {
  position: sticky; top: 0; z-index: 2;
  background-color: var(--papel);
  box-shadow: inset 0 -2px 0 var(--linha);
}

/* Coluna "Aluno" congelada à esquerda (como "congelar painéis"). Fundo sólido
   para as notas não vazarem por trás do nome, e z-index acima das células que
   rolam. A borda/sombra à direita indica que há conteúdo passando por baixo. */
.grade th.col-aluno, .grade td.col-aluno {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--papel);
  box-shadow: inset -1px 0 0 var(--linha), 3px 0 5px -2px rgba(0, 0, 0, 0.12);
}
/* O canto da grade: preso à esquerda E ao topo, logo acima de tudo o que passa
   por baixo dele nos dois eixos. */
.grade thead th.col-aluno { z-index: 5; }

/* Escala da nota: "9,7/10" — o denominador varia muito entre disciplinas */
.escala { color: var(--sub); font-size: 0.8em; font-weight: 400; }
.tabela .destaque .escala, .metrica .escala { margin-left: 1px; }

/* Busca */
.busca { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.busca label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--sub); }
.busca label.cresce { flex: 1; min-width: 220px; }
.busca .limpar { font-size: 0.85rem; padding-bottom: 8px; }
.busca .contagem { font-size: 0.85rem; color: var(--sub); padding-bottom: 8px; margin-left: auto; }

/* Paginação */
.paginacao { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.paginacao a, .paginacao .atual {
  padding: 5px 11px; border-radius: 6px; font-size: 0.88rem; text-decoration: none;
  border: 1px solid var(--linha);
}
.paginacao a { color: var(--acento); background: var(--papel); }
.paginacao a:hover { border-color: var(--acento); }
.paginacao .atual { background: var(--acento); color: #fff; border-color: var(--acento); font-weight: 600; }
.paginacao .reticencias { color: var(--sub); padding: 0 2px; }

/* Avisos */
.aviso { border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: 0.92rem; }
.aviso.ok { background: var(--ok-fundo); color: var(--ok-tinta); }
.aviso.erro { background: var(--erro-fundo); color: var(--erro-tinta); }
.aviso h1 { font-size: 1.2rem; margin: 0 0 8px; }

.vazio { color: var(--sub); font-style: italic; margin: 0; }
.nota-rodape { font-size: 0.82rem; color: var(--sub); margin: 14px 0 0; }
.rodape { padding: 24px 20px 40px; font-size: 0.82rem; color: var(--sub); }

@media (max-width: 640px) {
  .resumo { gap: 20px; }
  .dados dl { grid-template-columns: 1fr; }
  .dados dt { margin-top: 8px; }
}