/* ============================================================
   LêLetrinhas — Área do Responsável (responsavel.html)
   Feita a partir de design/ÁreaResponsável (celular vertical); no tablet e
   no computador, a mesma coluna, centralizada. Valores do design-system/
   (tokens.css e componentes: Cenario, BotaoIcone, Pilula, Cartao,
   BarraProgresso, Resultado, Campo e Botao).
   ============================================================ */

:root {
  --sol: #FFE58F;
  --sol-forte: #FFD95E;
  --sol-claro: #FFEDB0;
  --sol-creme: #FFF6D6;
  --sol-colina: #F5D46A;
  --sol-sombra: #E8C24A;
  --sol-tracejado: #D9B23A;
  --papel: #FFFFFF;
  --tinta: #2E2140;
  --tinta-suave: #5A4A2A;
  --folha: #187A41;
  --folha-escura: #0F5A2E;
  --folha-clara: #E3F4E9;
  --uva: #5B3CC4;
  --uva-escura: #432B94;
  --uva-palida: #EDE7FF;
  --girassol: #FFC93C;
  --girassol-tinta: #3E2A00;
  --terra: #7A4B00;
  --foco: var(--uva);
  --fonte-marca: "Baloo 2", system-ui, sans-serif;
  --fonte-leitura: Andika, "Baloo 2", sans-serif;
  --raio-barra: 7px;
  --raio-campo: 24px;
  --raio-botao: 28px;
  --raio-cartao: 36px;
  --raio-pilula: 999px;
  --raio-circulo: 50%;
  --sombra-papel-p: 0 4px 0 #E8C24A;
  --sombra-papel: 0 5px 0 #E8C24A;
  --sombra-folha: 0 6px 0 #0F5A2E;
  --sombra-uva-p: 0 4px 0 #432B94;
  /* Largura da coluna no tablet e no computador. */
  --largura-coluna: 560px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--sol);
  color: var(--tinta);
  font-family: var(--fonte-marca);
  font-weight: 600;
}

h1, h2, p { margin: 0; }
a { color: var(--uva); }
a:hover { color: var(--uva-escura); }
button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: default; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- Cenário ---------- */

.cenario { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.circulo { position: absolute; border-radius: var(--raio-circulo); }
.circulo-forte { right: -50px; top: 70px; width: 150px; height: 150px; background: var(--sol-forte); }
.circulo-claro { left: -60px; top: 470px; width: 130px; height: 130px; background: var(--sol-claro); }

/* ---------- Coluna ---------- */

.topo, .conteudo, .aviso {
  position: relative;
  width: 100%;
  max-width: var(--largura-coluna);
  margin: 0 auto;
}

.topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 10px;
}
.topo h1 { font-size: 24px; font-weight: 800; line-height: 1.1; }

.botao-voltar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--raio-circulo);
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra-papel-p);
  display: flex;
  align-items: center;
  justify-content: center;
}
.botao-voltar:hover { color: var(--tinta); }

.conteudo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 16px 24px;
}

/* ---------- A criança ---------- */

.crianca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pilula-aluno {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  padding: 0 16px 0 5px;
  border-radius: var(--raio-pilula);
  background: var(--papel);
  box-shadow: var(--sombra-papel-p);
  font-size: 19px;
  font-weight: 800;
}
.pilula-aluno #nome-aluno { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--raio-circulo);
  background: var(--uva);
  color: var(--papel);
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.serie { font-size: 15px; font-weight: 700; color: var(--tinta-suave); }

/* ---------- Cartões ---------- */

.cartao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 18px;
  border-radius: var(--raio-botao);
  background: var(--papel);
  box-shadow: var(--sombra-papel);
}
.cartao h2 { font-size: 20px; font-weight: 800; line-height: 1.1; }

.rotulo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.cartao .titulo-licao { font-size: 24px; }
.legenda { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--tinta-suave); }

.progresso { height: 14px; border-radius: var(--raio-barra); background: var(--sol-colina); overflow: hidden; }
.progresso-valor { height: 100%; border-radius: var(--raio-barra); background: var(--folha); }

/* Últimos 7 dias */
.cartao-dias { gap: 4px; padding-bottom: 12px; }
.dias-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 4px; }
.legenda-cores { display: flex; gap: 10px; font-size: 13px; font-weight: 700; color: var(--tinta-suave); }
.legenda-cores > span { display: flex; align-items: center; gap: 4px; }
.bolinha { width: 10px; height: 10px; flex-shrink: 0; border-radius: var(--raio-circulo); }
.bolinha-acerto { background: var(--folha); }
.bolinha-ajuda { background: var(--girassol); }

.dias { list-style: none; margin: 0; padding: 0; }
.dia {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  border-top: 2px dashed var(--sol-colina);
}
.dia-marca {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--raio-circulo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dia-marca-feito { background: var(--folha); color: var(--papel); }
.dia-marca-vazio { border: 2px dashed var(--sol-tracejado); background: var(--sol-claro); }
.dia-nome { flex-grow: 1; font-size: 17px; font-weight: 800; }
.dia-numeros { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; }
.dia-numeros > span { display: flex; align-items: center; gap: 5px; }
.dia-numeros .bolinha { width: 12px; height: 12px; }
.dia-vazio { font-size: 15px; font-weight: 600; color: var(--tinta-suave); }

/* Precisou de ajuda em */
.palavras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.palavra {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 6px 0 14px;
  border-radius: var(--raio-pilula);
  background: var(--sol-creme);
}
.palavra-texto { font-family: var(--fonte-leitura); font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.palavra-vezes {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--raio-pilula);
  background: var(--girassol);
  color: var(--girassol-tinta);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ajustes: a série e o microfone */
.cartao-ajustes { padding: 14px 18px 12px; }
.cartao-ajustes h2.rotulo { font-size: 13px; line-height: 1.2; }
.ajuste { display: flex; align-items: center; gap: 12px; }
.ajuste-icone {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--raio-circulo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ajuste-icone-serie { background: var(--uva-palida); color: var(--uva-escura); }
.ajuste-textos { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; line-height: 1.15; }
.ajuste-rotulo { font-size: 14px; font-weight: 700; color: var(--tinta-suave); }
.ajuste-valor { font-size: 18px; font-weight: 800; }

.botao-adulto {
  height: 48px;
  margin-bottom: 4px;
  padding: 0 16px;
  border: none;
  border-radius: var(--raio-pilula);
  background: var(--uva);
  color: var(--papel);
  box-shadow: var(--sombra-uva-p);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
}

.aviso-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--folha-clara);
  color: var(--folha-escura);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.aviso-ok svg { flex-shrink: 0; }

.ajuste-microfone { display: flex; flex-direction: column; gap: 10px; }
.divisoria { border-top: 2px dashed var(--sol-tracejado); }
.chave {
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--tinta);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.chave .ajuste-textos { line-height: 1.2; }
.chave .ajuste-rotulo { font-weight: 600; }
.chave .ajuste-icone { background: var(--sol-creme); color: var(--tinta-suave); }
.chave-trilho {
  width: 56px;
  height: 32px;
  flex-shrink: 0;
  padding: 3px;
  border: 3px solid var(--tinta-suave);
  border-radius: var(--raio-pilula);
  background: var(--sol-creme);
  display: flex;
  justify-content: flex-start;
}
.chave-botao { width: 20px; height: 20px; border-radius: var(--raio-circulo); background: var(--tinta-suave); }
.chave[aria-checked="true"] .ajuste-icone { background: var(--uva); color: var(--papel); }
.chave[aria-checked="true"] .chave-trilho { border-color: var(--uva); background: var(--uva); justify-content: flex-end; }
.chave[aria-checked="true"] .chave-botao { background: var(--papel); }
.chave:disabled { opacity: 0.6; }
.ajustes-erro { color: var(--terra); font-size: 15px; line-height: 1.25; }
.ajustes-erro:empty { display: none; }

/* ---------- Trocar de série (folha que sobe de baixo) ---------- */

.folha {
  width: 100%;
  max-width: var(--largura-coluna);
  max-height: 90vh;
  margin: auto auto 0;
  padding: 0;
  border: none;
  border-radius: var(--raio-cartao) var(--raio-cartao) 0 0;
  background: var(--papel);
  color: var(--tinta);
}
.folha::backdrop { background: rgba(46, 33, 64, 0.5); }
.folha-conteudo { display: flex; flex-direction: column; gap: 14px; padding: 22px 16px 24px; }
.folha-topo { display: flex; flex-direction: column; gap: 4px; }
.folha-topo h2 { font-size: 26px; font-weight: 800; line-height: 1.1; }
.folha-topo p { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--tinta-suave); }

.opcoes-serie { display: flex; flex-direction: column; gap: 8px; }
.opcao-serie {
  width: 100%;
  min-height: 64px;
  padding: 8px 14px;
  border: 3px solid var(--sol-sombra);
  border-radius: var(--raio-campo);
  background: var(--sol-creme);
  color: var(--tinta);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.opcao-serie[aria-checked="true"] { border-color: var(--uva); }
.opcao-marca {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 3px solid var(--tinta-suave);
  border-radius: var(--raio-circulo);
  background: var(--papel);
  color: var(--papel);
  display: flex;
  align-items: center;
  justify-content: center;
}
.opcao-serie[aria-checked="true"] .opcao-marca { border: none; background: var(--uva); }
.opcao-nome { flex-grow: 1; min-width: 0; font-size: 19px; font-weight: 800; line-height: 1.15; }
.selo-atual {
  height: 26px;
  flex-shrink: 0;
  padding: 0 10px;
  border-radius: var(--raio-pilula);
  background: var(--uva-palida);
  color: var(--uva-escura);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.folha-acoes { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.botao-confirmar, .botao-cancelar { border: none; border-radius: var(--raio-botao); font-weight: 800; }
.botao-confirmar { height: 64px; font-size: 22px; background: var(--folha); color: var(--papel); box-shadow: 0 5px 0 var(--folha-escura); }
.botao-confirmar:disabled { background: var(--sol-creme); color: var(--tinta-suave); box-shadow: var(--sombra-papel); }
.botao-cancelar { height: 56px; font-size: 20px; background: var(--sol-creme); color: var(--tinta); box-shadow: var(--sombra-papel-p); }

/* ---------- Carregando (os pontinhos da Abertura do jogo, estilos.css) ---------- */

.carregando {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.carregando i {
  width: 14px;
  height: 14px;
  border-radius: var(--raio-circulo);
  background: var(--folha);
  animation: pontinho 1.2s ease-in-out infinite;
}
.carregando i:nth-child(2) { background: var(--girassol); animation-delay: 0.15s; }
.carregando i:nth-child(3) { background: var(--uva); animation-delay: 0.3s; }
@keyframes pontinho {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-10px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .carregando i { animation: none; opacity: 1; }
}

/* ---------- Aviso (sem login, sem nome, sem internet) ---------- */

.aviso { margin-top: 6px; width: calc(100% - 32px); align-items: center; text-align: center; font-size: 18px; line-height: 1.35; }

/* ---------- Botões (design-system/componentes/Botao) ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 28px;
  border: none;
  border-radius: var(--raio-botao);
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}
.botao-primario, .botao-primario:hover { background: var(--folha); color: var(--papel); box-shadow: 0 5px 0 var(--folha-escura); }
.botao-secundario, .botao-secundario:hover { background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-papel); }

/* ---------- Conta para entrar (adulto.js) ---------- */

.desafio {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: none;
  border-radius: var(--raio-cartao);
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra-papel);
}
.desafio::backdrop { background: var(--sol, #FFE58F); }
.desafio-conteudo { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 24px; text-align: center; font-size: 18px; line-height: 1.35; }
.desafio-conteudo h2 { font-size: 26px; font-weight: 800; line-height: 1.1; }
.desafio-conta { font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--uva); }
.campo {
  height: 72px;
  padding: 0 24px;
  border: 4px solid var(--sol-sombra);
  border-radius: var(--raio-campo);
  background: var(--sol-creme);
  color: var(--tinta);
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
}
.desafio-resposta { align-self: center; width: 140px; text-align: center; }
.desafio-mensagem { min-height: 1.35em; color: var(--terra); }