main.turmas-main{
  display:flex;
  flex-direction:column;
  gap:20px;
}
/* h2/h3 sem reset ficam com a margem padrão do navegador, que soma com
   este gap (itens flex nunca colapsam margem entre si) — sem isso o
   espaço acima/abaixo do título dobra sozinho. */
main.turmas-main > h2{
  margin:0;
}
/* h2 de aluno.php fica dentro de #aluno-view, não como filho direto do
   flex acima — por isso não ganha o gap de 20px de graça e precisa do
   mesmo reset no topo (senão a margem padrão do navegador soma com o gap
   entre #aluno-view e o elemento anterior, ficando maior que nas outras
   páginas) e de uma margem própria embaixo, no mesmo valor do gap, pra
   manter a folga até o botão "Entrar numa turma". */
#aluno-view > h2{
  margin:0 0 20px;
}
/* Sobrescreve .modal-detail (shared/base.css, usada também nos modais dos
   jogos) só aqui dentro — o espaço abaixo do subtítulo de página tem que
   ser menor do que o usado num modal. */
main.turmas-main > p.modal-detail{
  margin-bottom:4px;
}
/* master.php: subtítulo + link "Ver auditoria" na mesma linha, um em cada
   ponta — mesmo motivo do override acima (.modal-detail de shared/base.css
   tem margem pensada pra modal, não pra esse espaçamento apertado). */
main.turmas-main > .turmas-titulo-linha{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
main.turmas-main > .turmas-titulo-linha > .modal-detail{
  margin:0;
}
/* .turmas-main é flex-column (align-items:stretch por padrão), então um
   botão direto esticaria pra largura toda da página — mesmo motivo do
   align-self em .turma-card-sub > .btn. */
main.turmas-main > .btn{
  align-self:flex-start;
}

.home-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}

.home-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:20px;
  text-decoration:none;
  color:var(--text);
  box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,.12));
  transition: box-shadow .15s ease, transform .15s ease;
}
.home-card:hover{
  box-shadow: var(--card-shadow-hover, 0 3px 8px rgba(0,0,0,.16));
  transform: translateY(-2px);
}

.home-card-titulo{
  font-family:var(--font-type);
  font-size:18px;
  letter-spacing:.04em;
  color:var(--accent-ink);
}

.home-card-desc{
  font-size:13px;
  color:var(--muted);
}

/* Eyebrow (Professor/Aluno) ao lado do título "Letrivo": reaproveita
   .modal-eyebrow mas com a fonte do logo (var(--font-type)) pra formar
   um "lockup" com o título, em vez da fonte de UI usada nos modais. */
.topbar-eyebrow{
  margin:0;
  font-family:var(--font-type);
}

/* Mesmo padrão de alinhamento da topbar dos jogos (ver shared/base.css):
   o primeiro badge do grupo à direita leva margin-left:auto, empurrando
   logo pra esquerda e o restante do grupo (+ topbar-controls) pra
   direita. Nenhuma página de turmas tem um badge extra entre a eyebrow e
   o #btn-auth, então é ele quem herda o papel de âncora (o #mode-badge dos
   jogos). Vale em qualquer largura — o combinador de irmão adjacente não
   depende de media query. */
.topbar-eyebrow + #btn-auth{ margin-left:auto; }

@media (max-width: 720px){
  #btn-auth{ order:3; }
}

.turmas-empty{
  color:var(--muted);
  font-size:13px;
}

.turmas-loading{
  display:flex;
  align-items:center;
  gap:8px;
}
/* .turmas-loading declara display próprio (flex) com a mesma
   especificidade de .hidden (shared/base.css) — sem este combo, a ordem
   de carregamento das folhas de estilo faria o display próprio vencer e
   o spinner nunca sumia de verdade (mesmo bug já visto em
   .turma-card-main/.turma-rename-form/#dashboard-view). */
.turmas-loading.hidden{
  display:none;
}

.spinner{
  display:inline-block;
  width:14px;
  height:14px;
  flex:none;
  border:2px solid var(--border);
  border-top-color:var(--accent-ink);
  border-radius:50%;
  animation:turmas-spin .7s linear infinite;
}

@keyframes turmas-spin{
  to{ transform:rotate(360deg); }
}

#login-required{
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:16px;
  color:var(--text);
  font-size:14px;
  text-align:center;
}

.criar-turma-form,
.admin-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:14px;
}
/* Mesmo bug de especificidade de .turma-card.hidden (ver comentário
   acima): .criar-turma-form declara display:flex com a mesma
   especificidade de .hidden, e turmas.css carrega depois de base.css —
   sem este combo, o botão "Criar turma" no topo de professor.php nunca
   escondia o form de verdade. */
.criar-turma-form.hidden{
  display:none;
}
/* Botão que revela o form de criar turma, direto dentro de #turmas-view
   (não é flex-column como main.turmas-main, então precisa de margem
   própria embaixo antes do form/lista). */
#btn-mostrar-criar-turma{
  margin-bottom:14px;
}
#criar-turma-form{
  margin-bottom:14px;
}

.form-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
  min-width:200px;
}
/* .form-row declara display próprio (flex) com a mesma especificidade de
   .hidden — sem este combo, o seletor de escola de admin.php (form-row
   também usado como "hidden" fora de formulário) nunca escondia de
   verdade (mesmo bug já visto em outros elementos deste arquivo). */
.form-row.hidden{
  display:none;
}

/* Modificadores de largura pra campos que precisam se destacar dos demais
   (ex.: nome da escola sozinho numa linha, endereço com o dobro do
   espaço do país ao lado) — usados junto de .form-row, nunca sozinhos. */
.form-row-full{
  flex-basis:100%;
}

.form-row-wide{
  flex-grow:2;
}

/* Agrupa dois .form-row numa linha própria dentro do form (ex.: endereço +
   país), preservando a proporção de largura entre eles (form-row-wide)
   independente de quantos outros campos existirem no restante do form. */
.form-row-pair{
  display:flex;
  gap:10px;
  flex-basis:100%;
}

.form-row label{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.form-row input,
.form-row select,
.form-row textarea{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:4px;
  padding:8px 10px;
  font-family:var(--font-ui);
  font-size:14px;
  box-sizing:border-box;
}

/* Mesma altura inicial pra input, select e textarea (box-sizing:border-box
   já garante que padding e borda entrem na conta) — também alinha com os
   botões do mesmo form, que não têm borda e por isso precisam da mesma
   regra — ver .criar-turma-form .btn etc. abaixo. textarea continua
   redimensionável verticalmente pra quem precisar de mais espaço. */
.form-row input,
.form-row select,
.form-row textarea{
  height:38px;
}

.form-row textarea{
  resize:vertical;
  min-height:38px;
}

.criar-turma-form .btn,
.admin-form .btn,
.entrar-form .btn{
  height:38px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
}

.form-erro{
  color:var(--red-ink);
  font-size:12px;
  margin:6px 0 0;
}

.turmas-section-title{
  font-size:16px;
  margin:14px 0 12px;
  color:var(--text);
}

/* Título de grupo de escola em #lista-turmas (ver renderListaTurmas em
   professor.js) — mesma classe base de .turmas-section-title, só com uma
   borda pra separar visualmente do grupo anterior quando há mais de um. */
.turmas-escola-titulo{
  padding-top:10px;
  border-top:1px solid var(--border);
}
.turmas-escola-titulo:first-child{
  padding-top:0;
  border-top:none;
}

.turma-card{
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:10px;
  box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,.12));
}
/* .hidden (shared/base.css) e .turma-card têm a mesma especificidade (uma
   classe); como turmas.css carrega depois, o display:flex do card venceria
   o display:none do .hidden na ordem da cascata. Par de classes aqui sobe a
   especificidade e garante que esconder sempre funcione, sem precisar de
   uma div extra só pra isolar o toggle do visual do card. */
.turma-card.hidden{
  display:none;
}

/* auditoria.php: mais respiro entre o botão "Atualizar" e a tabela abaixo
   dele do que o espaçamento padrão entre irmãos dentro de #auditoria-view
   (que não é flex, então não herda o gap de main.turmas-main). */
#btn-atualizar-limites{
  margin-bottom:16px;
}

.turma-card-main{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}

/* Indício visual de interatividade reaproveitado em qualquer texto que
   funcione como botão: nome da turma na lista (abre a turma) e título
   dentro da turma (edita o nome) — ver professor.js. */
.nome-clicavel{
  border-bottom:1px dashed transparent;
  transition:border-color .15s ease, color .15s ease;
}
.nome-clicavel:hover,
.nome-clicavel:focus-visible{
  color:var(--accent-ink);
  border-color:var(--accent-ink);
}

.turma-card-meta{
  font-size:12px;
  color:var(--muted);
}

/* Reflete o agrupamento endereço+país do formulário de escola (ver
   .form-row-pair em master.php) também na leitura do card — mesma linha,
   lado a lado. Largura por conteúdo (não pela proporção 2:1 do form): ali
   a proporção existe pra dar espaço de digitação no input; aqui é só
   texto, então esticar os dois deixaria um vão vazio entre eles. */
.turma-card-linha{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Lista de admins aninhada dentro do card da escola (master.js) —
   separada visualmente do resto dos dados por uma borda tracejada, no
   mesmo espírito do separador entre .turma-card-main e o corpo do card. */
.turma-card-sub{
  margin-top:4px;
  padding-top:10px;
  border-top:1px dashed var(--border);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.turma-card-sub-titulo{
  margin:0;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.turma-card-sub-item{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:13px;
}

/* .turma-card-sub é flex-column, então o botão "+ Adicionar admin" (filho
   direto) esticaria pra ocupar a largura toda do card — align-self trava
   ele no tamanho do conteúdo, igual aos outros botões da página. */
.turma-card-sub > .btn{
  align-self:flex-start;
}

.turma-card-codigo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
}

.turma-codigo-label{ color:var(--muted); font-size:11px; text-transform:uppercase; }
.turma-codigo-valor{
  font-family:var(--font-type);
  font-size:16px;
  letter-spacing:.08em;
  color:var(--accent-ink);
}

.turma-card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.turma-card-simples{
  padding:10px 14px;
}

/* Quadros de formulário revelados por botão (cadastro de escola em
   master.php, concessão de professor/dicionário em admin.php) reaproveitam
   o visual de .turma-card, mas sem borda nem padding — o respiro antes da
   lista abaixo já vem do margin-bottom de .turma-card. Sem isso, a caixa
   própria do .admin-form (mesmo background/border/padding) fica aninhada
   dentro da caixa do .turma-card, e dá pra ver as duas bordas/paddings
   somados — mais visível quanto mais campos o formulário tiver. */
#criar-escola-quadro,
#conceder-professor-quadro,
#criar-dicionario-quadro{
  border:none;
  padding:0;
  margin-bottom:10px;
}

/* admin.php não é flex-column como main.turmas-main, então os botões que
   revelam um quadro de formulário não ganham o gap automático entre
   irmãos — precisam de margem própria acima (do que vem antes: seletor de
   escola, ou a lista de dicionários) e abaixo (do quadro/lista seguinte). */
#btn-mostrar-conceder-professor,
#btn-mostrar-criar-dicionario{
  margin-top:20px;
  margin-bottom:20px;
}

.turma-card-inativa{
  opacity:.6;
}

.turma-card-tag{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--red-ink);
  color:var(--red-ink);
}

.btn-small{
  padding:5px 10px;
  font-size:12px;
  height:30px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
}

.btn-danger{
  border-color:var(--red-ink);
  color:var(--red-ink);
}

.turma-rename-form{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.turma-rename-input{
  flex:1;
  min-width:160px;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:4px;
  padding:6px 8px;
  font-family:var(--font-ui);
  font-size:14px;
  box-sizing:border-box;
  height:30px;
}

/* .turma-card-main e .turma-rename-form já declaram display próprio
   (flex) com a mesma especificidade de .hidden (shared/base.css) — sem
   esta combinação, a ordem de carregamento das folhas de estilo faria o
   display próprio vencer e o toggle de "editar nome" nunca escondia nada. */
.turma-card-main.hidden,
.turma-rename-form.hidden{
  display:none;
}

#dashboard-view{
  display:flex;
  flex-direction:column;
  gap:14px;
}
/* #dashboard-view declara display próprio (flex) com especificidade de ID,
   maior que a de .hidden (shared/base.css) — sem este combo, o formulário
   de adicionar aluno (e o resto do dashboard) fica visível mesmo sem
   nenhuma turma aberta, já que a classe "hidden" nunca vence sozinha. */
#dashboard-view.hidden{
  display:none;
}

.aluno-card{
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:14px;
  margin-bottom:10px;
}

.aluno-card-inativo{
  opacity:.6;
}

.aluno-card-header{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.aluno-card-email{
  font-size:12px;
  color:var(--muted);
}

.aluno-card-tag{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
}

.aluno-card-tag-inativo{
  color:var(--red-ink);
  border-color:var(--red-ink);
}

.aluno-card-tag-ativo{
  color:var(--online-ink);
  border-color:var(--online-ink);
}

.aluno-card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.aluno-card-jogos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:8px;
}

.dashboard-jogo{
  border:1px solid var(--border);
  border-radius:4px;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.dashboard-jogo-nome{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}

.dashboard-stat{
  font-size:12px;
  color:var(--text);
}
.dashboard-stat b{ color:var(--accent-ink); }

.dashboard-jogo-vazio,
.dashboard-jogo-erro{
  font-size:12px;
  color:var(--muted);
}

.dashboard-modo-toggle{
  display:flex;
  gap:8px;
}

.dashboard-modo-toggle .btn.is-active{
  color:var(--accent-ink);
  border-color:var(--accent-ink);
}

.dashboard-tabela{
  width:100%;
  border-collapse:collapse;
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
}

.dashboard-tabela th,
.dashboard-tabela td{
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  text-align:left;
}

.dashboard-tabela thead th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}

.dashboard-tabela thead th:not(:first-child){
  text-align:center;
}

.dashboard-tabela caption{
  caption-side:bottom;
  text-align:left;
  padding:8px 10px;
  font-size:11px;
  color:var(--muted);
}

.dashboard-tabela tbody tr:last-child td{
  border-bottom:none;
}

.dashboard-tabela-nome{
  font-weight:bold;
}

.dashboard-tabela td.dashboard-tabela-num{
  text-align:center;
}

.dashboard-tabela-erro{
  color:var(--muted);
}

.aluno-linha-inativa{
  opacity:.6;
}

.dashboard-tabela-nome-link{
  cursor:pointer;
}
.dashboard-tabela-nome-link:hover,
.dashboard-tabela-nome-link:focus-visible{
  text-decoration:underline;
}

/* .modal (shared/base.css) é position:absolute, pensado pra sobrepor a área
   de jogo (que já é relative) — aqui é um modal de página inteira, então
   precisa de position:fixed próprio, igual #howto-modal já faz. */
.aluno-detalhe-modal{
  position:fixed;
  inset:0;
  z-index:20;
}

.aluno-detalhe-card{
  width:min(480px, 92%);
  max-width:480px;
  max-height:82vh;
  overflow-y:auto;
  text-align:left;
  padding:20px 22px;
}

.entrar-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:14px;
  margin-bottom:14px;
}
/* Mesmo bug de especificidade de .turma-card.hidden/.criar-turma-form.hidden
   (ver comentários acima): .entrar-form declara display:flex com a mesma
   especificidade de .hidden, então precisa do combo pra esconder de
   verdade quando o botão "Entrar" no topo de aluno.php ainda não foi
   clicado. */
.entrar-form.hidden{
  display:none;
}
/* Botão que revela o form, direto dentro de #aluno-view (não é
   flex-column como main.turmas-main, então precisa de margem própria). */
#btn-mostrar-entrar{
  margin-bottom:14px;
}

.entrar-msg{
  font-size:13px;
  margin:8px 0 0;
}
.entrar-msg.hidden{ display:none; }
.entrar-msg-sucesso{ color:var(--online-ink); }

/* Painel de dicionários exclusivos liberados pra uma turma (ver
   cartaoTurma() em professor.js) — mesmo bug de especificidade de
   .turma-card.hidden (comentário acima): declara display próprio com a
   mesma especificidade de .hidden, precisa do combo. */
.turma-dicionarios-quadro{
  display:flex;
  flex-direction:column;
  gap:6px;
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px 12px;
  margin-top:10px;
  flex-basis:100%;
}
.turma-dicionarios-quadro.hidden{
  display:none;
}
.turma-dicionarios-titulo{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0;
}
.turma-dicionario-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
}
.entrar-msg-erro{ color:var(--red-ink); }