/* A entrada do sistema (pacote Sistema v5, 2026-10-20): o código do dojo, quem vai brincar, o PIN, a conta do responsável, o cadastro em 3 passos, o termo e a
   pausa após erros. Mesma família visual do app do aluno (a mesma fonte, o creme e o lilás). Todo valor está nos tokens abaixo. */
:root {
  --ent-bg: #fdf6ee;
  --ent-barra: #fffaf4;
  --ent-linha-barra: #f0dfcb;
  --ent-superficie: #ffffff;
  --ent-suave: #faf7f2;
  --ent-linha: #ece4d8;
  --ent-linha-quente: #efdcc6;
  --ent-borda-botao: #d2bb98;
  --ent-linha-campo: #e3dbcd;
  --ent-tinta: #2b2540;
  --ent-tinta-2: #4a4360;
  --ent-apagado: #5b5470;
  --ent-apagado-2: #6b6480;
  --ent-lilas-50: #f6f2ff;
  --ent-lilas-150: #e9e2fc;
  --ent-lilas-300: #cbbcf6;
  --ent-lilas-500: #7a5af0;
  --ent-lilas-600: #6d4ee6;
  --ent-lilas-800: #3d2a99;
  --ent-lilas-900: #2a1c75;
  --ent-atencao-fundo: #fbf1de;
  --ent-atencao-tinta: #5e3b08;
  --ent-ok-fundo: #eef7f1;
  --ent-ok-tinta: #1f4d36;
  --ent-ok-regra: #1f6b45;
  --ent-perigo: #b5462a;
  --ent-perigo-tinta: #8a3017;
  --ent-faixa-lilas: #efeafd;
  --ent-veu: rgba(43, 37, 64, 0.35);
  --ent-fonte: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --ent-raio-p: 14px;
  --ent-raio: 16px;
  --ent-raio-g: 22px;
  --ent-raio-xg: 24px;
  --ent-alvo: 48px;
  --ent-campo: 52px;
  --ent-botao: 56px;
  --ent-foco: 3px;
}
body.ent { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--ent-bg); color: var(--ent-tinta); font-family: var(--ent-fonte); -webkit-font-smoothing: antialiased; }
body.ent * { box-sizing: border-box; }
body.ent a { color: var(--ent-lilas-800); font-weight: 800; }
body.ent a:hover { color: var(--ent-lilas-900); }
body.ent :focus-visible { outline: var(--ent-foco) solid var(--ent-lilas-600); outline-offset: 2px; }
body.ent button, body.ent input, body.ent select { font-family: inherit; }
body.ent button { cursor: pointer; }

.ent-topo { min-height: 72px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: var(--ent-barra); border-bottom: 1px solid var(--ent-linha-barra); }
.ent-marca { min-height: var(--ent-alvo); font-weight: 900; font-size: 20px; display: flex; align-items: center; gap: 12px; color: var(--ent-tinta); text-decoration: none; }
.ent-marca img { width: 36px; height: 36px; }
.ent-espaco { flex: 1; }
.ent-principal { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px 20px; }

.ent-botao, .ent-botao-sec, .ent-botao-mini { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; border-radius: var(--ent-raio); font-weight: 800; }
.ent-botao { min-height: var(--ent-botao); padding: 8px 24px; font-size: 18px; font-weight: 900; background: var(--ent-lilas-150); border: 2px solid var(--ent-lilas-500); color: var(--ent-lilas-800); }
body.ent a.ent-botao { color: var(--ent-lilas-800); }
.ent-botao:hover:not(:disabled) { background: var(--ent-lilas-300); }
.ent-botao:disabled { background: var(--ent-suave); border-color: var(--ent-linha-campo); color: var(--ent-apagado-2); cursor: not-allowed; }
.ent-botao-sec { min-height: 52px; padding: 8px 20px; background: var(--ent-superficie); border: 2px solid var(--ent-borda-botao); color: var(--ent-tinta); }
body.ent a.ent-botao-sec { color: var(--ent-tinta); }
.ent-botao-mini { min-height: var(--ent-alvo); padding: 8px 18px; background: var(--ent-superficie); border: 2px solid var(--ent-borda-botao); border-radius: var(--ent-raio-p); color: var(--ent-tinta); font-size: 15px; }
body.ent a.ent-botao-mini { color: var(--ent-tinta); }
.ent-botao-perigo { background: var(--ent-superficie); border: 2px solid var(--ent-perigo); color: var(--ent-perigo-tinta); font-weight: 900; }
.ent-link { min-height: var(--ent-alvo); border: 0; background: none; padding: 0; font-weight: 800; color: var(--ent-lilas-800); font-size: 15px; display: inline-flex; align-items: center; text-decoration: none; }
.ent-link-suave { color: var(--ent-apagado); }

.ent-cartao { width: 100%; max-width: 480px; background: var(--ent-superficie); border: 2px solid var(--ent-linha-quente); border-radius: var(--ent-raio-xg); padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.ent-cartao-destaque { border-color: var(--ent-lilas-500); }
.ent-cartao-centro { align-items: center; text-align: center; }
.ent-cartao-larga { max-width: 620px; padding: 40px 36px; gap: 22px; }
.ent-cartao-media { max-width: 560px; }
.ent-cartao-grande { max-width: 760px; padding: 32px 36px; }
.ent-cartao-termo { max-width: 860px; padding: 32px 36px; gap: 20px; }
.ent-icone { font-size: 44px; line-height: 1; }
.ent-h1 { margin: 0; font-size: 28px; font-weight: 900; text-wrap: pretty; }
.ent-h1-g { font-size: 30px; }
.ent-texto { margin: 0; font-size: 17px; color: var(--ent-apagado); text-wrap: pretty; }
.ent-nota { font-size: 13px; color: var(--ent-apagado-2); }
.ent-etiqueta { font-size: 13px; font-weight: 900; color: var(--ent-apagado); letter-spacing: 0.05em; text-transform: uppercase; }

.ent-campo { display: flex; flex-direction: column; gap: 6px; font-weight: 800; }
.ent-campo small { font-weight: 600; font-size: 14px; color: var(--ent-apagado); }
.ent-entrada { min-height: var(--ent-campo); border-radius: var(--ent-raio-p); border: 2px solid var(--ent-linha-campo); padding: 0 14px; font-size: 17px; color: var(--ent-tinta); background: var(--ent-superficie); width: 100%; min-width: 0; }
.ent-linha-senha { display: flex; gap: 8px; }
.ent-linha-senha .ent-entrada { flex: 1; }
.ent-mostrar { min-height: var(--ent-campo); border-radius: var(--ent-raio-p); border: 2px solid var(--ent-borda-botao); background: var(--ent-superficie); padding: 0 14px; font-weight: 800; color: var(--ent-tinta); }
.ent-regra { font-size: 14px; font-weight: 700; color: var(--ent-apagado); }
.ent-regra-ok { color: var(--ent-ok-regra); }
.ent-codigo { width: 100%; max-width: 340px; height: 88px; border-radius: 18px; border: 3px solid var(--ent-lilas-300); background: var(--ent-lilas-50); text-align: center; font-size: 48px; font-weight: 900; letter-spacing: 0.4em; padding-left: 0.4em; color: var(--ent-lilas-800); text-transform: uppercase; font-family: inherit; }
.ent-convite { min-height: 72px; border-radius: var(--ent-raio); border: 3px solid var(--ent-lilas-300); background: var(--ent-lilas-50); text-align: center; font-size: 32px; font-weight: 900; letter-spacing: 0.25em; color: var(--ent-lilas-800); text-transform: uppercase; width: 100%; font-family: inherit; }
.ent-aviso { width: 100%; background: var(--ent-atencao-fundo); color: var(--ent-atencao-tinta); border-radius: var(--ent-raio-p); padding: 12px 16px; font-size: 15px; font-weight: 700; text-align: left; }
.ent-aviso:empty { display: none; }
.ent-ok { background: var(--ent-ok-fundo); color: var(--ent-ok-tinta); border-radius: var(--ent-raio-p); padding: 12px 16px; font-weight: 700; }

.ent-dois-cartoes { width: 100%; max-width: 620px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ent-atalho { text-align: left; background: var(--ent-superficie); border: 2px solid var(--ent-borda-botao); border-radius: 18px; padding: 16px 20px; display: flex; gap: 14px; align-items: center; color: var(--ent-tinta); text-decoration: none; }
body.ent a.ent-atalho { color: var(--ent-tinta); font-weight: 400; }
.ent-atalho strong { display: block; font-size: 16px; font-weight: 800; }
.ent-atalho small { display: block; font-size: 14px; color: var(--ent-apagado); }
.ent-atalho-icone { font-size: 26px; }

/* Quem vai brincar hoje? */
.ent-quem { width: 100%; max-width: 920px; display: flex; flex-direction: column; gap: 24px; }
.ent-quem h1 { margin: 0; font-size: 34px; font-weight: 900; text-align: center; }
.ent-perfis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.ent-perfil { background: var(--ent-superficie); border: 2px solid var(--ent-borda-botao); border-radius: var(--ent-raio-g); padding: 22px; display: flex; flex-direction: column; gap: 12px; align-items: center; color: var(--ent-tinta); font-weight: 900; font-size: 20px; }
.ent-perfil:hover { border-color: var(--ent-lilas-300); }
.ent-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ent-raio-g); background: var(--ent-suave); border: 1px solid var(--ent-linha); line-height: 1; }
.ent-avatar-96 { width: 96px; height: 96px; font-size: 58px; }
.ent-avatar-80 { width: 80px; height: 80px; font-size: 48px; border-radius: 20px; }
.ent-novo { background: transparent; border: 2.5px dashed var(--ent-lilas-300); border-radius: var(--ent-raio-g); padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: var(--ent-lilas-800); font-weight: 900; font-size: 18px; text-decoration: none; }
.ent-novo-ligado { background: var(--ent-lilas-50); }
.ent-novo small { font-size: 13px; color: var(--ent-apagado); font-weight: 700; }
.ent-novo-mais { font-size: 36px; }

/* O estado do aparelho, no rodapé */
.ent-estado { flex: none; background: var(--ent-barra); border-top: 1px solid var(--ent-linha-barra); padding: 12px 24px; display: flex; gap: 12px 20px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.ent-estado-resp { background: var(--ent-faixa-lilas); border-top-color: var(--ent-lilas-300); }
.ent-estado form { display: contents; }
.ent-estado .ent-botao-mini { min-height: var(--ent-alvo); border-radius: 12px; border-color: var(--ent-lilas-300); font-weight: 800; }
.ent-estado-nome { font-weight: 900; color: var(--ent-lilas-800); }

/* A pausa */
.ent-contagem { background: var(--ent-lilas-50); border-radius: 18px; padding: 18px 28px; display: flex; flex-direction: column; gap: 2px; }
.ent-contagem span:first-child { font-size: 14px; font-weight: 800; color: var(--ent-apagado); }
.ent-contagem-tempo { font-size: 48px; font-weight: 900; color: var(--ent-lilas-800); font-variant-numeric: tabular-nums; }

/* O PIN */
.ent-pontos { display: flex; gap: 14px; }
.ent-ponto { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ent-lilas-500); background: transparent; }
.ent-ponto-cheio { background: var(--ent-lilas-500); }
.ent-teclado { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; }
.ent-tecla { height: 64px; border-radius: var(--ent-raio); border: 2px solid var(--ent-borda-botao); background: var(--ent-superficie); font-size: 24px; font-weight: 900; color: var(--ent-tinta); }
.ent-tecla:hover { background: var(--ent-lilas-50); }
.ent-tecla-vazia { visibility: hidden; }

/* Cadastro em passos e o termo */
.ent-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.ent-resumo > div, .ent-mudancas > div { display: flex; gap: 12px; background: var(--ent-suave); border-radius: var(--ent-raio-p); padding: 12px 14px; font-size: 15px; text-wrap: pretty; }
.ent-mudancas { display: flex; flex-direction: column; gap: 8px; }
.ent-mudancas > div { background: var(--ent-lilas-50); }
.ent-secoes { display: flex; flex-direction: column; border: 1.5px solid var(--ent-linha); border-radius: var(--ent-raio-p); overflow: hidden; }
.ent-secao > button { width: 100%; min-height: 48px; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border: 0; border-top: 1px solid var(--ent-linha); background: var(--ent-superficie); font-weight: 800; font-size: 15px; color: var(--ent-tinta); text-align: left; }
.ent-secao:first-child > button { border-top: 0; }
.ent-secao-texto { padding: 4px 16px 16px; font-size: 15px; color: var(--ent-tinta-2); line-height: 1.55; text-wrap: pretty; }
.ent-secao-texto p { margin: 0 0 8px; }
.ent-secao-texto ul { margin: 0; padding-left: 20px; }
.ent-aceite { display: flex; gap: 12px; align-items: flex-start; background: var(--ent-lilas-50); border: 2px solid var(--ent-lilas-300); border-radius: var(--ent-raio); padding: 14px 16px; font-weight: 800; cursor: pointer; }
.ent-aceite input { width: 24px; height: 24px; accent-color: var(--ent-lilas-600); flex: none; margin: 0; }
.ent-aceite small { display: block; font-weight: 600; font-size: 14px; color: var(--ent-apagado); }
.ent-acoes { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.ent-codigo-grande { font-size: 64px; font-weight: 900; letter-spacing: 0.3em; color: var(--ent-lilas-800); background: var(--ent-lilas-50); border-radius: 20px; padding: 12px 24px 12px 40px; }
.ent-linha-botoes { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ent-separador { width: 100%; border-top: 1px solid var(--ent-linha); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.ent-avatares { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ent-avatares label { aspect-ratio: 1; border-radius: var(--ent-raio-p); border: 3px solid var(--ent-linha); background: var(--ent-suave); display: flex; align-items: center; justify-content: center; font-size: 28px; cursor: pointer; }
.ent-avatares input { position: absolute; opacity: 0; pointer-events: none; }
.ent-avatares label:has(input:checked) { border-color: var(--ent-lilas-600); background: var(--ent-lilas-50); }
.ent-avatares label:has(input:focus-visible) { outline: var(--ent-foco) solid var(--ent-lilas-600); outline-offset: 2px; }
.ent-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ent-duas label { min-height: var(--ent-alvo); border-radius: var(--ent-raio-p); border: 2px solid var(--ent-linha-campo); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; cursor: pointer; }
.ent-duas label:has(input:checked) { border-color: var(--ent-lilas-600); background: var(--ent-lilas-50); }
.ent-duas input { accent-color: var(--ent-lilas-600); }

.ent-dialogo-fundo { position: fixed; inset: 0; background: var(--ent-veu); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 20; }
.ent-dialogo-fundo[hidden] { display: none; }
.ent-dialogo { width: 100%; max-width: 560px; max-height: 85vh; overflow: auto; background: var(--ent-superficie); border-radius: var(--ent-raio-xg); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.ent-faq { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--ent-linha); padding-top: 12px; }
.ent-faq span { color: var(--ent-tinta-2); text-wrap: pretty; }
.ent-duas-caixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ent-caixa { background: var(--ent-suave); border-radius: var(--ent-raio-p); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.ent-caixa-ok { background: var(--ent-ok-fundo); color: var(--ent-ok-tinta); }
@media (max-width: 520px) {
  .ent-cartao, .ent-cartao-larga, .ent-cartao-grande, .ent-cartao-termo { padding: 24px 20px; }
  .ent-codigo { font-size: 38px; height: 76px; }
  .ent-codigo-grande { font-size: 44px; padding: 10px 16px 10px 28px; }
  .ent-topo { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { body.ent * { transition: none !important; animation: none !important; } }
.ent-texto-menor { font-size: 15px; }
dialog.ent-modal { border: 2px solid var(--ent-lilas-500); border-radius: var(--ent-raio-xg); padding: 32px; width: min(460px, calc(100vw - 32px)); background: var(--ent-superficie); color: var(--ent-tinta); }
dialog.ent-modal::backdrop { background: var(--ent-veu); }
dialog.ent-modal-largo { width: min(560px, calc(100vw - 32px)); max-height: 92vh; overflow: auto; }
.ent-modal-cheio { display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.ent-modal-cheio[hidden] { display: none; }
.ent-formulario { display: flex; flex-direction: column; gap: 18px; text-align: left; }
.ent-botao-largo { width: 100%; }
.ent-centro { text-align: center; }
.ent-grupo { border: 0; padding: 0; margin: 0; }
.ent-rotulo-grupo { font-weight: 800; padding: 0; margin-bottom: 6px; }
.ent-entrada-pin { font-size: 24px; letter-spacing: 0.4em; }
.ent-h1-m { font-size: 26px; }
.ent-largo { width: 100%; }
.ent-pin-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.ent-so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.ent-apresenta { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--ent-linha); }