/* Altura única dos elementos de formulário (input, select, textarea de uma
   linha, botões .btn-small e botões dentro de forms) — um valor só pra
   tudo alinhar numa mesma linha, igual ao --btn-height de shared/base.css.
   Todos usam box-sizing:border-box, então padding e borda entram na conta. */
:root{
  --form-h: 35px;
}

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.
   Quebra linha em tela estreita (os dois .form-row têm min-width:200px). */
.form-row-pair{
  display:flex;
  flex-wrap:wrap;
  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:4px 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:var(--form-h);
}

/* textarea não centraliza o texto na vertical como input/select — com
   line-height fixo, o padding de cima/baixo é o que sobra da altura (menos
   a borda de 1px de cada lado) dividido por dois, e a primeira linha fica
   no meio igual à dos inputs vizinhos. Linhas extras só empurram pra baixo. */
.form-row textarea{
  resize:vertical;
  min-height:var(--form-h);
  line-height:20px;
  padding-top:calc((var(--form-h) - 2px - 20px) / 2);
  padding-bottom:calc((var(--form-h) - 2px - 20px) / 2);
}

/* Mesmo problema no input de arquivo: com o padding padrão da .form-row o
   botão nativo ("Escolher arquivo") e o nome do arquivo ficam acima do
   meio. Sem padding vertical e com line-height = altura interna (menos a
   borda), a linha ocupa o campo todo e o conteúdo fica centralizado. */
.form-row input[type=file]{
  padding-top:0;
  padding-bottom:0;
  line-height:calc(var(--form-h) - 2px);
}

/* Valor fixo no lugar de um campo (ex.: a única organização em que o grupo
   novo vai entrar, em professor.php) — mesma altura dos inputs pra alinhar
   com o resto da linha do form. */
.form-row-valor{
  display:flex;
  align-items:center;
  min-height:var(--form-h);
  font-size:14px;
  color:var(--text);
}
.form-row-valor.form-row-aviso{
  color:var(--muted);
  font-size:13px;
}

.criar-turma-form .btn,
.admin-form .btn,
.entrar-form .btn{
  height:var(--form-h);
  min-height:0; /* senão o min-height:var(--btn-height) do .btn vence */
  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;
}

/* Organização do grupo aberto, logo abaixo do título do dashboard. */
.dashboard-escola{
  margin:-6px 0 12px;
  font-size:13px;
  color:var(--muted);
}

.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,
#criar-plano-quadro,
#conceder-professor-quadro,
#criar-dicionario-quadro,
#admin-criar-turma-quadro{
  border:none;
  padding:0;
  margin-bottom:10px;
}
/* Mesmo problema na edição de organização/plano (master.js), só que ao
   contrário: o form entra no lugar do conteúdo do card, e o card precisa
   continuar (a lista de admins da organização fica nele, abaixo do form) —
   então quem perde a caixa própria é o form. */
.escola-editar-form,
.plano-editar-form{
  background:none;
  border:none;
  padding:0;
}

/* 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,
#admin-btn-mostrar-criar-turma{
  margin-top:20px;
  margin-bottom:20px;
}
/* Mesmo caso em master.php: o botão fica dentro de #master-view, logo
   abaixo do título "Organizações" (que já dá o respiro acima), e precisa
   de margem própria antes do quadro/lista de organizações. */
#btn-mostrar-criar-escola,
#btn-mostrar-criar-plano{
  margin-bottom:20px;
}

/* Bloco de validade/políticas/valores no form de plano (montado por
   master.js — o de organização usa .form-agrupador, abaixo): linha própria
   dentro do .admin-form, separada dos campos de cadastro pela mesma borda
   tracejada de .turma-card-sub, com o mesmo wrap/alinhamento do form. */
.form-grupo{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px;
  flex-basis:100%;
  padding-top:10px;
  border-top:1px dashed var(--border);
}
.form-grupo-titulo{
  flex-basis:100%;
}
/* Explicação curta de um campo do bloco (ex.: o que a validade do plano faz). */
.form-grupo-nota{
  flex-basis:100%;
  margin:0;
  font-size:12px;
  color:var(--muted);
}
/* Agrupadores do form de organização (Dados da organização, Plano com a
   vigência, Políticas de uso, Cobrança — master.php/master.js): <fieldset> com
   borda e a legenda nela, mesmo wrap/alinhamento do .admin-form. O
   contêiner .form-agrupadores (onde master.js monta os três últimos) some
   do layout pra os fieldsets serem filhos diretos do form. min-width:0
   porque fieldset tem min-width:min-content por padrão e estouraria a
   largura no celular. */
.form-agrupadores{
  display:contents;
}
.form-agrupador{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px;
  flex-basis:100%;
  min-width:0;
  margin:0;
  padding:6px 12px 12px;
  border:1px solid var(--border);
  border-radius:6px;
}
.form-agrupador > legend{
  padding:0 6px;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* Sem largura explícita, o select de "O que registrar" fica tão largo
   quanto a opção mais longa e empurra o form pra fora da tela no celular;
   com width:100% ele cabe no .form-row e só corta o texto fechado. */
.form-grupo{
  min-width:0;
}
.form-grupo select,
.form-agrupador select{
  width:100%;
}
/* "Aplicar valores do plano" com "Sem plano" escolhido — mesmo apagado
   dos botões de paginação do Letfit. */
.form-grupo .btn:disabled,
.form-agrupador .btn:disabled{
  opacity:.4;
  cursor:default;
}

/* Cards de organização/plano do master.js: o cabeçalho (nome) recolhe e
   expande o card; recolhido, só o cabeçalho fica à mostra. A seta vai
   dentro do nome pra não virar um terceiro item do space-between. */
.card-alternavel{
  cursor:pointer;
  user-select:none;
}
.card-alternavel > strong::before{
  content:'▾';
  display:inline-block;
  width:1em;
  color:var(--muted);
}
.turma-card-recolhido .card-alternavel > strong::before{
  content:'▸';
}
.turma-card-recolhido > :not(.turma-card-main){
  display:none;
}

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

/* Aviso de organização suspensa: no topo do plano (admin.php) e acima da
   lista de grupos (professor.php) — mesma cor de .turma-card-tag. */
.admin-plano-aviso{
  margin:0 0 10px;
  padding:10px 14px;
  border:1px solid var(--red-ink);
  border-radius:6px;
  color:var(--red-ink);
  font-size:13px;
}
.admin-plano-aviso.hidden{
  display:none;
}

.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:var(--form-h);
  min-height:0; /* senão o min-height:var(--btn-height) do .btn vence */
  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:var(--form-h);
}

/* .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); }

/* ------------------------------------------------------------------
   letfit.php — resultados do Letfit de um jogador (ver public/js/letfit.js)
   ------------------------------------------------------------------ */

.letfit-voltar{
  align-self:flex-start;
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
}
.letfit-voltar:hover,
.letfit-voltar:focus-visible{
  color:var(--accent-ink);
  text-decoration:underline;
}

/* #letfit-view fica num flex-column (main.turmas-main), mas os filhos
   dele não — margens próprias no lugar do gap. */
.letfit-view .dashboard-escola{ margin:-12px 0 8px; }
.letfit-view .turmas-section-title{ margin:24px 0 10px; }

.letfit-aviso{
  margin:0;
  padding:10px 12px;
  font-size:13px;
  color:var(--muted);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-left:3px solid var(--accent-ink);
  border-radius:6px;
}

.letfit-stats{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}
.letfit-stat{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 12px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:6px;
}
.letfit-stat b{
  font-size:22px;
  color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
.letfit-stat span{
  font-size:12px;
  color:var(--muted);
}

/* 13 colunas em 760px: título das colunas quebra linha, data e hora em
   duas linhas, padding menor. Só num celular a tabela ainda rola de lado
   (dentro do wrap — a página nunca). */
.letfit-tabela-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.letfit-tabela{
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.letfit-tabela th,
.letfit-tabela td{ padding:6px 5px; }
.letfit-tabela thead th{
  font-size:10px;
  letter-spacing:.03em;
  line-height:1.25;
  vertical-align:bottom;
}
.letfit-tabela td{ white-space:nowrap; }
.letfit-quando{ color:var(--muted); line-height:1.3; }
/* Dicionário da fase (Formas, Letras...) em cima de "nível · fase". */
.letfit-dicionario{ color:var(--muted); font-size:.85em; }

/* Filtros (acima do resumo) e paginação da tabela de fases. */
/* Um campo ao lado do outro, cada um com o rótulo em cima; alinhados pela
   base, pra os selects, o checkbox e o botão ficarem na mesma linha. */
.letfit-filtros{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px 14px;
  margin-top:14px;
}
.letfit-filtro{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  color:var(--muted);
}
.letfit-filtro select{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:4px;
  padding:0 6px;
  font-family:var(--font-ui);
  font-size:13px;
  max-width:100%;
  height:var(--form-h);
  box-sizing:border-box;
}
.letfit-paginas{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.letfit-paginas .btn:disabled{ opacity:.4; cursor:default; }

/* Seleção pra excluir em lote: checkbox na 1ª coluna, linha marcada
   destacada, barra com a contagem e as ações acima da tabela. */
.letfit-tabela .letfit-col-sel{ width:1%; text-align:center; }
.letfit-col-sel input{ width:16px; height:16px; margin:0; cursor:pointer; accent-color:var(--accent-ink); }
.letfit-col-sel input:disabled{ cursor:default; }
.letfit-tabela tr.is-selecionada td{ background:var(--bg); }
.letfit-selecao{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin:0 0 8px;
  padding:8px 12px;
  font-size:13px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-left:3px solid var(--red-ink, #c0392b);
  border-radius:6px;
}
.letfit-selecao.hidden{ display:none; }
.letfit-selecao span{ font-weight:600; margin-right:auto; }
.letfit-selecao .btn:disabled{ opacity:.6; cursor:progress; }
.letfit-selecao .btn .spinner{ margin-right:6px; vertical-align:-2px; }
/* "Agrupar por partida": linha de cabeçalho antes das fases de cada partida. */
/* Checkbox não leva rótulo em cima: fica ao lado do texto, na altura dos
   selects vizinhos. */
.letfit-filtro.letfit-agrupar{
  flex-direction:row;
  align-items:center;
  gap:6px;
  height:var(--form-h);
  cursor:pointer;
}
.letfit-agrupar input{ width:16px; height:16px; margin:0; cursor:pointer; accent-color:var(--accent-ink); }
.letfit-tabela tr.letfit-partida td{
  background:var(--bg-panel);
  border-top:2px solid var(--border);
  font-size:12px;
  color:var(--muted);
  white-space:normal;
}
.letfit-tabela tr.letfit-partida{ cursor:pointer; }
.letfit-tabela tr.letfit-partida:hover td{ background:var(--bg); }
/* A linha toda é clicável; o botão dentro dela é o que o teclado alcança. */
.letfit-partida-btn{
  display:block;
  width:100%;
  padding:2px 0;
  background:none;
  border:0;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.letfit-partida-seta{ display:inline-block; width:1.2em; color:var(--text); }
.letfit-partida b{ color:var(--text); margin-right:8px; }
/* Fase com rastro: a linha toda abre o replay; a data é o botão que o
   teclado alcança. A linha do rastro aberto fica marcada. */
.letfit-tabela tr.tem-rastro{ cursor:pointer; }
.letfit-tabela tr.tem-rastro:hover td{ background:var(--bg); }
.letfit-tabela tr.is-rastro-aberto td{ background:var(--bg); }
.letfit-tabela tr.is-rastro-aberto td:first-child{ box-shadow:inset 3px 0 0 var(--accent-ink); }
.letfit-rastro-btn{
  padding:0;
  background:none;
  border:0;
  font:inherit;
  color:var(--accent-ink);
  text-align:left;
  cursor:pointer;
}
.letfit-rastro-btn:hover{ text-decoration:underline; }
.letfit-rastro-btn:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; border-radius:2px; }
/* Tabela durante a exclusão: esmaecida e sem cliques. */
.letfit-tabela-wrap.is-ocupada{ opacity:.5; pointer-events:none; transition:opacity .15s ease; }

/* admin.php: jogadores de um grupo (botão "Jogadores" do cartão), cada um
   com o link pro letfit.php dele. */
.admin-membros.hidden{ display:none; }
/* admin.php: "Trocar responsável" do cartão do grupo. */
.admin-responsavel{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:8px;
  border-top:1px solid var(--border);
}
.admin-responsavel.hidden{ display:none; }
.admin-membros-lista{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--border);
}
.admin-membros-lista li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px 12px;
  padding:6px 0;
  border-bottom:1px dotted var(--border);
  font-size:14px;
}
.admin-membros-lista li:last-child{ border-bottom:none; }
.admin-membro-nome{ min-width:0; overflow-wrap:anywhere; }

.letfit-legenda{
  margin:8px 0 0;
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}

.letfit-formas-lista{
  margin:0;
  padding-left:18px;
  font-size:14px;
  line-height:1.6;
}

.letfit-rastro{
  margin-top:20px;
  padding:14px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:8px;
}
.letfit-rastro-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.letfit-rastro .letfit-rastro-topo .turmas-section-title{ margin:0; }

.letfit-rodadas,
.letfit-controles{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:12px;
}
.letfit-rodadas .btn.is-active{
  color:var(--accent-ink);
  border-color:var(--accent-ink);
}
/* Reproduzir ↔ Pausar sem empurrar os botões ao lado. */
.letfit-play{ min-width:96px; justify-content:center; }
.letfit-velocidade{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}
.letfit-velocidade select{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:4px;
  padding:0 4px;
  font-family:var(--font-ui);
  height:var(--form-h);
  box-sizing:border-box;
}

.letfit-board-wrap{ margin-top:12px; }
.letfit-board{
  display:block;
  width:100%;
  height:auto;
  max-height:70vh;
}
.letfit-board-fundo{
  fill:var(--bg);
  stroke:var(--border);
  stroke-width:1px;
  vector-effect:non-scaling-stroke;
}
.letfit-board-meio{ stroke:var(--border); }
.letfit-board-rotulo{ fill:var(--muted); }
.letfit-trilha{
  fill:none;
  stroke-width:2.5px;
  stroke-linejoin:round;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.letfit-marca{
  font-weight:700;
  text-anchor:middle;
  dominant-baseline:middle;
  stroke:var(--bg);
  paint-order:stroke;
}
.letfit-cursor{ fill:none; }
.letfit-toque{ fill:none; }

.letfit-arrastos{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:13px;
}
.letfit-arrasto{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 6px;
  border-radius:4px;
  cursor:pointer;
}
.letfit-arrasto:hover,
.letfit-arrasto:focus-visible{ background:var(--bg); }
.letfit-arrasto.is-active{
  background:var(--bg);
  outline:1px solid var(--accent-ink);
}
.letfit-cor{
  flex:none;
  width:10px;
  height:10px;
  border-radius:50%;
}