/* =========================================================
   TUTORIAL DE ONBOARDING (id0081)

   Camadas, de baixo pra cima — os números NÃO são arbitrários:
     90  .roda-overlay      (o tutorial abre a roda e precisa escurecer por cima)
     93  .tut-veu           (os quatro painéis do recorte)
     94  .tut-demo          (o card de exemplo: acima do véu, logo ele aparece)
     95  .tut-balao/.tut-linha
     95  .bloqueio-overlay  (empate proposital: sessão expirada tem de cobrir
                             o tutorial, e vem DEPOIS no arquivo, então vence)
     96  .sessao-veu
   ========================================================= */
.tut { display: none; }
.tut--ativo { display: block; }

/* Os quatro painéis do véu. Retângulo simples em vez de um `clip-path` com
   furo: anima sem recalcular polígono e não depende
   do `evenodd`, que não é confiável em todo navegador.
   `pointer-events: none` é obrigatório (E26): camada por cima engole o
   clique de tudo que está embaixo, e o passo da lousa PRECISA que o card
   continue clicável. */
/* CAPTURA clique (id0082). Antes era `pointer-events: none` e dava pra clicar
   em tudo que estava borrado atrás do vidro — o tutorial não bloqueava nada.
   Regra do sistema: enquanto o tutorial está aberto, NADA por baixo é
   clicável; a exceção é o `.tut-furo`, que um passo pode pedir. */
.tut-veu {
  position: fixed;
  z-index: 93;
  /* Véu SÓLIDO (id0101; era 90% + desfoque de 6px): 96% do --bg esconde o
     que o desfoque escondia. */
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  pointer-events: auto;
  transition: top 260ms cubic-bezier(.4, 0, .2, 1),
              left 260ms cubic-bezier(.4, 0, .2, 1),
              width 260ms cubic-bezier(.4, 0, .2, 1),
              height 260ms cubic-bezier(.4, 0, .2, 1);
}
/* Recorte CIRCULAR, para a roda de ajustes. Quatro retângulos não fazem
   círculo, e cortar um buraco quadrado num elemento radial deixa os quatro
   cantos pretos — que foi exatamente o relato. Aqui a máscara radial abre o
   furo redondo na roda inteira, e a fatia em foco é destacada por ESTILO
   (.roda-fatia--foco), não por recorte. */
.tut-scrim-circ {
  position: fixed;
  inset: 0;
  z-index: 93;
  display: none;
  background: color-mix(in srgb, var(--bg) 96%, transparent);   /* sólido, id0101 */
  pointer-events: auto;
}
/* TAMPA do recorte. Os quatro painéis cercam o alvo mas deixam o buraco
   aberto — e buraco aberto é elemento clicável, o que furava a regra mesmo
   com o scrim capturando o resto. Ela cobre o furo e captura o clique;
   no passo `interativo` sai do caminho, e aí só aquele elemento volta a ser
   alcançável. Transparente de propósito: quem escurece são os painéis. */
.tut-tampa {
  position: fixed;
  z-index: 93;
  display: none;
  background: transparent;
  pointer-events: auto;
}
/* Sem animação quando o aluno pediu menos movimento. A guarda é de CLASSE e
   não só do bloco global de media: o bloco zera duração, mas quem decide se
   o scroll é `smooth` é o JS (id0080). */
.tut--sem-animacao .tut-veu,
.tut--sem-animacao .tut-anel { transition: none; }
/* O anel que contorna o buraco. Sem preenchimento e, desde a id0101, sem
   halo: um fio de 2px do accent.
   O raio vem do JS: é o `border-radius` computado do próprio alvo, para o
   contorno acompanhar a forma real (id0082) — alvo quadrado, anel quadrado.
   No modo circular o JS manda 50%. */
.tut-anel {
  position: fixed;
  z-index: 94;
  border-radius: var(--raio-reto);
  border: 2px solid var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: top 260ms cubic-bezier(.4, 0, .2, 1),
              left 260ms cubic-bezier(.4, 0, .2, 1),
              width 260ms cubic-bezier(.4, 0, .2, 1),
              height 260ms cubic-bezier(.4, 0, .2, 1),
              opacity 200ms ease;
}

/* Anel menor, da ferramenta em pauta (id0083). Fica DENTRO do recorte grande:
   o recorte acende a lousa toda, para o efeito da ferramenta (o bilhete do
   marcador, os riscos de giz) ficar visível; este diz qual botão fez aquilo.
   Sem preenchimento e sem capturar ponteiro — é só a marcação. */
.tut-anel--foco {
  border-width: 2px;
  border-radius: var(--raio-reto);
  border-style: dashed;   /* o anel de dentro se distingue do de fora sem halo */
}

.tut-balao {
  position: fixed;
  z-index: 95;
  /* 390 e não 360: com o "Pular seção" da id0082 são quatro botões mais o
     contador, e em 360 o rótulo quebrava em duas linhas. */
  width: min(390px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--text-faint);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-flutuante);
  padding: 16px 16px 12px;
}
.tut-balao--centro {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.tut-balao__titulo {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--peso-titulo);
  letter-spacing: -.02em;
  color: var(--text);
}
.tut-balao__texto {
  margin: 0 0 14px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text-muted);
}
/* Os botões QUEBRAM linha (id0101): em mono caixa alta "Pular seção" e
   "Próximo" ficavam largos e o último escapava do balão. A quebra ficou
   depois que eles saíram do mono (Lote C): num balão estreito ela ainda vale. */
.tut-balao__rodape {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.tut-balao__contador {
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--tracking-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;   /* senão "3 de 8" quebra em três linhas no flex */
  flex: 0 0 auto;
}
.tut-balao__botoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

/* Botões do tutorial: 40px de alvo, raio de controle (Lote C). */
.tut-btn {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  padding: 8px 10px;
  font-family: var(--font);
  font-size: var(--fs-controle-compacto);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--tracking-ui);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform 90ms ease-out;
}
.tut-btn:active { transform: scale(.96); }
.tut-btn { white-space: nowrap; }
.tut-btn--fantasma {
  background: transparent;
  border-color: var(--text-faint);
  color: var(--text-muted);
}
.tut-btn--fantasma:hover { background: var(--surface-2); color: var(--text); }
.tut-btn--fantasma:disabled { opacity: .4; cursor: not-allowed; transform: none; }
/* --accent-forte pelo mesmo motivo do resto do arquivo: o --accent é o
   giz-azul CLARO, e texto --on-accent sobre ele seria claro sobre claro. */
.tut-btn--forte { background: var(--accent-forte); color: var(--on-accent); }
.tut-btn--forte:hover { background: var(--accent); color: var(--on-accent-hover); }
.tut-btn--largo { flex: 1 1 0; min-height: 48px; padding: 12px 14px; }

/* ---- Timeline ---- */
.tut-linha {
  position: fixed;
  z-index: 95;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--text-faint);
  border-radius: var(--raio-controle);
  max-width: calc(100vw - 24px);
  /* O desvio da id0083 é aplicado por `transform`/`bottom` no JS; a transição
     faz a timeline escorregar em vez de saltar de um passo pro outro. */
  transition: transform 260ms cubic-bezier(.4, 0, .2, 1),
              bottom 260ms cubic-bezier(.4, 0, .2, 1);
}
.tut--sem-animacao .tut-linha { transition: none; }
.tut-linha__item {
  display: flex; align-items: center; gap: 7px;
  min-height: 40px;
  background: none;
  border: none;
  border-radius: var(--raio-reto);
  padding: 8px 14px;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--fs-controle-compacto);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--tracking-ui);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.tut-linha__item:hover { color: var(--text); background: var(--surface-2); }
.tut-linha__ponto {
  width: 7px; height: 7px;
  border-radius: var(--raio-circulo);
  background: currentColor;
  flex: 0 0 auto;
  transition: background var(--transition), box-shadow var(--transition);
}
.tut-linha__item--feito { color: var(--text-muted); }
/* Seção ativa = o segmento PREENCHIDO das abas segmentadas: fundo claro e
   tinta escura, sem brilho (id0101). */
.tut-linha__item--ativo {
  color: var(--bg);
  background: var(--text);
}
.tut-linha__item + .tut-linha__item { border-left: 1px solid var(--border-strong); }
.tut-linha__item:first-child { border-radius: var(--raio-controle-dentro) var(--raio-reto) var(--raio-reto) var(--raio-controle-dentro); }
.tut-linha__item:last-child { border-radius: var(--raio-reto) var(--raio-controle-dentro) var(--raio-controle-dentro) var(--raio-reto); }

/* ---- Card de exemplo da lousa ----
   id0082: ele DEIXOU de flutuar no meio da tela. Antes aparecia solto por
   cima do "O que você quer aprender hoje?", sem ancoragem — feio e, pior,
   não ensinava: o aluno precisa ver ONDE o card nasce na vida real. Agora é
   uma mensagem do assistente de verdade, dentro de `#messages`, com o mesmo
   avatar, alinhamento e espaçamento que uma resposta terá.
   Nada de posicionamento próprio aqui: quem posiciona é o `.msg` do chat. */
.tut-msg-demo { position: relative; z-index: 94; }
/* A bolha precisa estar acima do véu para aparecer no recorte; o resto da
   lista continua atrás dele. */

/* ---- Convite ---- */
.tut-convite {
  position: fixed; inset: 0;
  z-index: 94;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);   /* sólido, id0101 */
}
.tut-convite__caixa {
  width: min(400px, 92vw);
  background: var(--surface);
  border: 1px solid var(--text-faint);
  border-radius: var(--raio-destaque);
  box-shadow: var(--sombra-flutuante);
  padding: 26px 24px 22px;
  text-align: left;
}
.tut-convite__titulo {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--peso-titulo);
  letter-spacing: -.03em;
}
.tut-convite__texto {
  margin: 0 0 20px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-muted);
}
/* Os dois botões têm a MESMA largura e o MESMO tamanho de fonte. "Pular" não
   é link cinza escondido: recusar tem de custar o mesmo clique que aceitar. */
.tut-convite__botoes { display: flex; gap: 10px; }

/* ---- Foco numa fatia da roda (id0082) ----
   A fatia em pauta acende e as outras apagam. É destaque por ESTILO, e não
   por recorte nem por seleção: marcar a opção como ativa mudaria de verdade
   o ajuste do aluno, e o tutorial não pode mexer nas preferências de quem
   está só assistindo. Por isso também o tutorial nunca clica numa fatia de
   OPÇÃO — só nas de raiz, que apenas navegam.

   Apaga por FILTER, e não por opacity, seguindo a decisão que a roda já
   tinha tomado (AJ2n/AJ3a1: "a regra antiga de apagar por opacidade não
   volta"). Reintroduzir opacity aqui quebraria o caso que trava isso — e
   ficaria inconsistente com o apagar do hover, logo acima. */
.roda--com-foco .roda-fatia:not(.roda-fatia--foco) {
  filter: grayscale(1) brightness(.5);
}
.roda--com-foco .roda-fatia--foco {
  filter: brightness(1.15) drop-shadow(0 0 12px var(--fatia-cor, transparent));
}

/* "Pular esta seção" — some quando a seção tem um passo só, senão seria o
   mesmo que "Próximo" com outro nome. */
.tut-btn--secao[hidden] { display: none; }

/* ---- Botão "?" da topbar ---- */
.topbar__ajuda { color: var(--text-faint); flex: 0 0 auto; }
/* id0124: o botão de tema, ao lado das ações da topbar. 40px (.btn--icon). */
.topbar__tema { color: var(--text-faint); flex: 0 0 auto; }
.topbar__tema:hover { color: var(--accent); background: var(--surface-2); }
/* Duas classes de propósito: a `.icon` (mais abaixo no arquivo) põe
   display:block e, com peso igual, venceria — os dois ícones apareciam. */
.topbar__tema .tema-icone--sol { display: var(--tema-icone-sol); }
.topbar__tema .tema-icone--lua { display: var(--tema-icone-lua); }
.topbar__ajuda:hover { color: var(--accent); background: var(--surface-2); }

/* ---- Celular ----
   A timeline com quatro nomes lado a lado não cabe em 360px: vira bolinhas,
   e só a seção ATIVA mostra o rótulo. O balão vira faixa na base, porque
   flutuando ele tapa metade da tela pequena. */
@media (max-width: 768px) {
  .tut-linha__item { padding: 9px 11px; }
  .tut-linha__item .tut-linha__rotulo { display: none; }
  .tut-linha__item--ativo .tut-linha__rotulo { display: inline; }
  .tut-linha__ponto { width: 9px; height: 9px; }
  .tut-linha__item { min-height: 44px; }

  .tut-balao {
    left: 12px; right: 12px;
    width: auto;
    top: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));
    transform: none;
  }
  .tut-balao--centro { left: 12px; top: auto; transform: none; }
  /* Alvo na metade de baixo: a faixa sobe, senão ela cobre o que destaca. */
  .tut-balao--topo { top: 14px; bottom: auto; }
  .tut-btn { padding: 11px 15px; }     /* alvo de toque confortável */
  /* Com "Pular seção" são quatro botões; numa tela estreita eles não cabem
     numa linha com o contador do lado. O rodapé quebra. */
  .tut-balao__rodape { flex-wrap: wrap; }
  .tut-balao__botoes { flex: 1 1 100%; justify-content: flex-end; }
}

/* O bloco global de prefers-reduced-motion no fim do arquivo zera DURAÇÃO de
   transição, e é o suficiente aqui: o recorte é `transition`, não animação
   por quadro. O rastreio de posição do tutorial é orientado a evento
   (resize/scroll), não a laço, então não há o que desligar no JS. */

/* ---------- Fase 1 de usuários: painel de admin (admin.html) ----------
   Página própria e pequena — reaproveita os tokens/`.topbar`/`.btn` do
   resto do app, sem duplicar paleta. */
.admin-page { min-height: 100vh; background: var(--bg); color: var(--text); }
/* Redesign (id0101): índice de seção no topo (por CSS — o admin.js monta
   só a tabela) e a tabela como LINHAS DE REGISTRO: metadados em mono, linhas
   separadas por fio, sem caixa em volta. No celular ela rola de lado em vez
   de espremer as colunas. */
.admin-conteudo { max-width: 1100px; margin: 0 auto; padding: 28px var(--calha); overflow-x: auto; }
.admin-conteudo::before {
  content: "01 / Usuários" / "";
  display: block;
  margin-bottom: 18px;
  padding-top: 10px;
  border-top: var(--fio);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}
.admin-erro { color: var(--text-muted); }
.admin-tabela { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .92rem; }
.admin-tabela th, .admin-tabela td {
  text-align: left;
  padding: 12px 12px 12px 0;
  border-bottom: var(--fio);
  vertical-align: middle;
}
.admin-tabela th,
.admin-tabela td:nth-child(2), .admin-tabela td:nth-child(3),
.admin-tabela td:nth-child(4), .admin-tabela td:nth-child(5), .admin-tabela td:nth-child(6) {
  font-family: var(--font-mono);
  font-size: 13px;
}
.admin-tabela th {
  color: var(--text-muted);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}
.admin-tabela td:nth-child(3) { color: var(--text-muted); }
.admin-tabela__status { text-transform: uppercase; letter-spacing: .08em; }
.admin-tabela__status--suspenso { color: var(--perigo); }
.admin-tabela__status--ativo { color: var(--roda-verde); }
.admin-tabela__acao {
  min-height: 40px;
  padding: 6px 12px;
  border-color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.admin-tabela__acao:hover { border-color: var(--text-muted); }
/* id0120: a 2FA no painel — o aviso de que ela é obrigatória e o link. */
.admin-aviso-2fa a { color: var(--accent); font-weight: 600; }
.admin-tabela__acao + .admin-tabela__acao { margin-left: 8px; }
.admin-tabela td:last-child { white-space: nowrap; }   /* os dois botões lado a lado */
/* "Voltar ao chat" (um <a> com .btn): sem sublinhado, fio de 3:1 e mono. */
.admin-page .topbar .btn--ghost {
  min-height: 40px;
  border-color: var(--text-faint);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: .08em;
  text-transform: uppercase;
}