/* ============================================================
   Vamos Ler! — Área do Professor e Área do Responsável
   ============================================================ */

:root {
  --texto: #2b2d42;
  --texto-suave: #5c5f7a;
  --fundo: #f6f4ff;
  --cartao: #ffffff;
  --borda: #dcdcec;
  --roxo: #5b34c4;
  --roxo-claro: #ece6ff;
  --verde: #1f7a35;
  --vermelho: #c0392b;
  --sombra: 0 4px 18px rgba(43, 45, 66, 0.08);

  /* Cores das categorias (as bordas dos botões do jogo), na ordem da trilha */
  --cat-1: #e8839d; --cat-2: #e0b53a; --cat-3: #6fbf62; --cat-4: #6d9fe0;
  --cat-5: #a57de0; --cat-6: #e89a5c; --cat-7: #4fb8b0;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Nunito', 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.4;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.topo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  background: var(--roxo);
  color: #fff;
  flex-wrap: wrap;
}
.topo h1 { margin: 0; font-size: 1.3rem; font-weight: 900; flex: 1; }
.voltar { color: #fff; text-decoration: none; font-weight: 900; }
.conta { font-size: 0.85rem; opacity: 0.85; overflow-wrap: anywhere; }

main, .aviso { max-width: 1200px; margin: 0 auto; padding: 16px; }
.aviso { text-align: center; padding-top: 48px; font-size: 1.1rem; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 14px;
  border: 2px solid var(--borda);
  background: #fff;
  font-weight: 900;
  text-decoration: none;
  color: var(--texto);
}
.botao-principal { background: var(--verde); border-color: var(--verde); color: #fff; }
.botao:disabled { opacity: 0.5; cursor: default; }

.abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.aba {
  border: 2px solid var(--borda);
  background: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 900;
}
.aba.ativa { background: var(--roxo); border-color: var(--roxo); color: #fff; }

.painel {
  background: var(--cartao);
  border-radius: 18px;
  box-shadow: var(--sombra);
  padding: 16px;
}

/* ---------- Alunos ---------- */
.linha-busca { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.busca {
  flex: 1 1 260px;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--borda);
  border-radius: 12px;
}
.total { color: var(--texto-suave); }
.filtro-turma { flex: 0 1 280px; background: var(--cartao); font: inherit; }

.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; min-width: 720px; }
.tabela th, .tabela td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { font-size: 0.85rem; color: var(--texto-suave); font-weight: 900; white-space: nowrap; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover, .tabela tbody tr:focus { background: var(--roxo-claro); outline: none; }
.aluno-nome { font-weight: 900; }
.aluno-email { font-size: 0.8rem; color: var(--texto-suave); }
.sem-missao { color: var(--vermelho); }
.sem-turma { color: var(--texto-suave); font-style: italic; }
.vazio { color: var(--texto-suave); text-align: center; padding: 24px; }

/* ---------- Detalhes do aluno ---------- */
.detalhes {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  border: none;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
/* No celular e no tablet, só o conteúdo da janela rola (o topo fica parado), na altura
   visível da tela (dvh, sem a barra do navegador), e a rolagem não passa para a página. */
.detalhes[open] { display: flex; flex-direction: column; overflow: hidden; }
.detalhes[open] > :not(.detalhes-topo) {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html:has(dialog[open]) { overflow: hidden; }
.detalhes::backdrop { background: rgba(43, 45, 66, 0.45); }
.detalhes-topo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--roxo);
  color: #fff;
}
.detalhes-topo h2 { margin: 0; font-size: 1.2rem; }
.fechar { border: none; background: transparent; color: #fff; font-size: 1.3rem; min-width: 44px; min-height: 44px; }
#detalhes-conteudo { padding: 16px 18px 20px; }
#detalhes-conteudo h3 { margin: 18px 0 8px; font-size: 1rem; color: var(--roxo); }
/* ---------- Conta para entrar ---------- */
.desafio { width: min(420px, calc(100vw - 24px)); }
.desafio-conteudo { padding: 16px 18px 20px; text-align: center; }
.desafio-conteudo .acoes-atividade { justify-content: center; }
.desafio-conta { margin: 4px 0 12px; font-size: 2.2rem; font-weight: 900; color: var(--roxo); }
.desafio-resposta { width: 5em; text-align: center; font-size: 1.6rem; }

.resumo-aluno { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.resumo-aluno div { background: var(--fundo); border-radius: 12px; padding: 10px 12px; }
.resumo-aluno span { display: block; font-size: 0.8rem; color: var(--texto-suave); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta { background: var(--roxo-claro); border-radius: 999px; padding: 4px 12px; font-size: 0.9rem; }
.etiqueta small { color: var(--texto-suave); }
.erro { color: var(--vermelho); }
.tabela-historico { min-width: 0; }
.tabela-historico tbody tr { cursor: default; }
.tabela-historico tbody tr:hover { background: none; }
.itens-com-ajuda { margin-top: 6px; align-items: center; }
.itens-com-ajuda-rotulo { font-size: 0.85rem; color: var(--texto-suave); }

/* Histórico de todas as atividades (adulto.js): uma caixa por atividade, que abre os itens */
.lista-jogadas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.lista-jogadas:empty { display: none; }
.jogada { border: 2px solid var(--borda); border-radius: 12px; background: var(--cartao); }
.jogada.incompleta { border-style: dashed; }
.jogada summary { display: grid; gap: 2px; padding: 10px 12px; cursor: pointer; }
.jogada-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--texto-suave); }
.jogada-topo .etiqueta { padding: 2px 10px; font-size: 0.8rem; color: var(--roxo); }
.jogada-nome { font-weight: 900; }
.jogada-placar { font-size: 0.9rem; }
.jogada-situacao { font-size: 0.85rem; color: var(--verde); font-weight: 800; }
.jogada.incompleta .jogada-situacao { color: var(--texto-suave); }
.jogada-itens { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; font-size: 0.9rem; }
.selo-item { background: var(--fundo); }
.selo-item.nao-respondido { opacity: 0.6; }

/* ---------- Área do Responsável ---------- */
.painel + .painel { margin-top: 16px; }
.painel h2 { margin: 0 0 8px; font-size: 1.2rem; }
.painel h3 { margin: 18px 0 8px; font-size: 1rem; color: var(--roxo); }
.linha-microfone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.botao-microfone[aria-checked="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }

/* ---------- Palavras ---------- */
.palavras { display: grid; grid-template-columns: 260px 1fr; gap: 16px; }
.lista-categorias { display: flex; flex-direction: column; gap: 6px; }
.categoria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  border: 2px solid var(--borda);
  background: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  min-height: 44px;
}
.categoria small { color: var(--texto-suave); white-space: nowrap; }
.categoria.ativa { border-color: var(--roxo); background: var(--roxo-claro); }
.editor { min-width: 0; }
.editor h2 { margin: 0 0 4px; font-size: 1.2rem; }
.ajuda, .info { margin: 0 0 10px; color: var(--texto-suave); font-size: 0.9rem; }
.form-adicionar { display: flex; gap: 8px; margin-bottom: 6px; }
.campo {
  min-height: 44px;
  padding: 6px 10px;
  border: 2px solid var(--borda);
  border-radius: 12px;
  font: inherit;
  background: #fff;
  color: var(--texto);
}
.campo:focus { border-color: var(--roxo); outline: none; }
.campo-imagem { width: 4.2em; text-align: center; font-size: 1.2rem; }
.campo-texto { flex: 1; min-width: 0; }
.editor .busca { width: 100%; }
.mensagem { min-height: 1.4em; margin: 8px 0; }
.tabela-palavras td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
.tabela-palavras .campo { min-height: 38px; }
.tabela-palavras .campo-imagem { width: 3.4em; padding: 4px; }
.texto-palavra { font-size: 1.05rem; }
.botao-icone {
  min-width: 44px;
  min-height: 44px;
  border: 2px solid var(--borda);
  border-radius: 12px;
  background: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.botao-icone:hover { border-color: var(--roxo); }
.botao-icone.tocando { background: var(--roxo-claro); border-color: var(--roxo); }
.marcar { width: 22px; height: 22px; accent-color: var(--roxo); }
.sem-audio { color: var(--texto-suave); font-size: 0.85rem; white-space: nowrap; }
.salvando { opacity: 0.5; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mensagem.ok { color: var(--verde); }
.mensagem.erro { color: var(--vermelho); }

/* ---------- Atividades ---------- */
.coluna-atividades { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.coluna-atividades .vazio { padding: 12px; }
/* A lista ocupa a aba, em grade; criar e editar abrem a janela de edição. */
.botao-nova-atividade { align-self: flex-start; }
.coluna-atividades .mensagem:empty { display: none; }
.secoes-atividades { display: flex; flex-direction: column; gap: 18px; }
.secao-atividades-cabeca { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.secao-atividades-cabeca h3 { margin: 0; font-size: 1.05rem; color: var(--roxo); }
.secao-atividades-contagem { font-size: 0.85rem; color: var(--texto-suave); }
.lista-atividades { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 900px; }
.lista-atividades:empty { min-height: 44px; border: 2px dashed var(--borda); border-radius: 12px; }
.lista-atividades:empty::before { content: 'Nenhuma atividade. Arraste uma para cá.'; display: block; padding: 10px 12px; color: var(--texto-suave); }
.linha-atividade { display: flex; align-items: stretch; gap: 6px; }
.linha-atividade .categoria { flex: 1 1 auto; min-width: 0; }
.cartao-atividade { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; padding: 10px 12px; }
.cartao-atividade-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cartao-atividade-topo strong { font-size: 1.05rem; }
.cartao-atividade-exemplo { color: var(--texto-suave); }
.etiquetas-atividade { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta-atividade { font-size: 0.8rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--roxo-claro); color: var(--roxo); }
.etiqueta-atividade.apagada { background: #f1f1f6; color: var(--texto-suave); }
.partes-do-cartao { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--borda); padding-top: 8px; }
.parte-do-cartao {
  display: grid; grid-template-columns: 1fr auto; column-gap: 10px;
  padding-left: 10px; border-left: 4px solid var(--cor); font-size: 0.9rem;
}
.parte-do-cartao-porcentagem { font-weight: 700; color: var(--texto-suave); }
.parte-do-cartao-instrucao { grid-column: 1 / -1; color: var(--texto-suave); font-size: 0.85rem; }
.parte-do-cartao-vazia { color: var(--texto-suave); font-size: 0.9rem; }
.alca-atividade {
  display: flex; align-items: center; justify-content: center; width: 32px;
  color: var(--texto-suave); font-size: 1.2rem; cursor: grab; touch-action: none; user-select: none;
  border-radius: 10px;
}
.alca-atividade:hover { background: var(--roxo-claro); color: var(--roxo); }
.com-arrasto, .com-arrasto * { user-select: none; cursor: grabbing !important; }
.com-arrasto .lista-atividades[data-serie] { outline: 2px dashed var(--roxo-claro); outline-offset: 4px; border-radius: 12px; }
.linha-atividade.arrastando .categoria { border-color: var(--roxo); background: var(--roxo-claro); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.janela-atividade { width: min(980px, calc(100vw - 24px)); }
.janela-atividade-conteudo { padding: 8px 18px 20px; }
.rotulo { display: block; margin: 14px 0 6px; font-weight: 900; }
.campo-largo { width: 100%; max-width: 480px; }
.partes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.parte {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto minmax(100px, 2fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border: 2px solid var(--borda);
  border-left: 8px solid var(--cor);
  border-radius: 12px;
}
.parte.escrita { border-style: dashed; border-left-style: solid; }
.parte.escolha { border-style: dotted; border-left-style: solid; }
.tipo-parte { display: flex; gap: 6px; flex-wrap: wrap; }
/* O texto da parte ocupa uma linha inteira embaixo dos outros campos. */
.parte .campo-instrucao { grid-column: 1 / -1; }
.parte input[type="range"] { width: 100%; accent-color: var(--cor); }
.ordem-parte { display: flex; align-items: center; gap: 4px; font-weight: 900; }
.ordem-parte .botao-icone:disabled { opacity: 0.3; cursor: default; }
.acoes-parte { display: flex; }
#adicionar-parte { margin-bottom: 12px; }
.campo-porcentagem { display: flex; align-items: center; gap: 4px; }
.campo-porcentagem .campo { width: 4.6em; text-align: right; }
.barra-mistura {
  display: flex;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--fundo);
  border: 2px solid var(--borda);
}
.barra-mistura span { background: var(--cor); transition: flex-basis 0.15s; }
.linha-soma { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.soma { font-weight: 900; }
.soma.ok { color: var(--verde); }
.soma.erro { color: var(--vermelho); }
.acoes-atividade { display: flex; gap: 8px; flex-wrap: wrap; }
.posicao-atividade { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; color: var(--texto-suave); }
.botao-perigo { color: var(--vermelho); }
.botao-perigo:hover { border-color: var(--vermelho); }
.linha-marcar { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-weight: 900; cursor: pointer; }

/* ---------- Regras e lições da Missão do Dia ---------- */
.campo-numero { width: 5.5em; text-align: right; }
.bloco-niveis { margin-top: 28px; padding-top: 16px; border-top: 2px solid var(--borda); }
.bloco-niveis h2 { margin: 0 0 4px; font-size: 1.1rem; }
.lista-licoes { margin: 0; padding-left: 2.2em; max-width: 640px; }
.lista-licoes li { padding: 4px 0; font-weight: 700; }
.lista-licoes small { margin-left: 6px; color: var(--texto-suave); font-weight: 700; }
.tabela-regras { min-width: 560px; }
.tabela-regras tbody tr { cursor: default; }
.tabela-regras tbody tr:hover { background: none; }
.tabela-regras td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
.tabela-regras .campo { min-height: 38px; }
.tabela-regras .campo-texto { width: 100%; min-width: 120px; }
.acoes-regra { display: flex; gap: 6px; }
.tabela-series { min-width: 0; max-width: 640px; }

/* ---------- Traçados ---------- */
.tracados { display: grid; grid-template-columns: 200px 1fr; gap: 16px; }
.lista-letras { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; }
.linha-letras { display: flex; gap: 6px; }
.letra-tracado {
  position: relative;
  flex: 1;
  min-height: 44px;
  border: 2px solid var(--borda);
  background: #fff;
  border-radius: 12px;
  font-size: 1.3rem;
  font-weight: 900;
}
.letra-tracado.feita::after {
  content: '✓';
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: 0.75rem;
  color: var(--verde);
}
.letra-tracado.ativa { border-color: var(--roxo); background: var(--roxo-claro); }
.quadro-tracado {
  display: block;
  width: 100%;
  max-width: 460px;
  margin-bottom: 12px;
  background: #fff;
  border: 2px solid var(--borda);
  border-radius: 14px;
  touch-action: none; /* o dedo desenha em vez de rolar a página */
  user-select: none;
  -webkit-user-select: none;
}
.pauta line { stroke: #b9bdd6; stroke-width: 0.6; }
.pauta .linha-base { stroke: #8c93ad; stroke-width: 1.2; }
.pauta .linha-meio, .pauta .linha-baixo { stroke-dasharray: 3 3; }
.guia-tracado {
  font-family: Andika, Nunito, 'Comic Sans MS', sans-serif; /* a FONTE_DA_GUIA do professor.js */
  font-weight: 700;
  fill: #eceef6;
  stroke: #d3d6e6;
  stroke-width: 0.6;
  pointer-events: none;
}
.traco-largo, .traco-agora { fill: none; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.traco-largo { stroke-opacity: 0.3; }
.traco-agora { stroke-opacity: 0.5; }
.traco-meio { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.inicio-do-traco { fill: #fff; stroke-width: 1.5; }
.numero-do-traco { font-size: 7px; font-weight: 900; fill: var(--texto); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.numero-do-traco.no-pingo { fill: #fff; }
.traco.escondido, .dedo-tracado.escondido { display: none; }
.traco.desenhando .traco-meio, .traco.desenhando .inicio-do-traco, .traco.desenhando .numero-do-traco,
.traco.desenhando .ponto-de-inicio { visibility: hidden; }
.dedo-tracado { fill: var(--roxo); fill-opacity: 0.7; pointer-events: none; }
.acoes-tracado { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 760px) {
  .parte { grid-template-columns: auto 1fr auto; }
  .parte input[type="range"] { grid-column: 1 / -1; }
  .palavras { grid-template-columns: minmax(0, 1fr); }
  .lista-categorias { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .categoria { flex: 0 0 auto; }
  .linha-atividade .categoria { flex: 1 1 auto; }
  .form-adicionar { flex-wrap: wrap; }
  .tracados { grid-template-columns: minmax(0, 1fr); }
  .lista-letras { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 4px; }
  .linha-letras { flex: 0 0 auto; }
  .letra-tracado { flex: 0 0 44px; }
}