/* =========================================================
   Facin — CADERNO PREMIUM (out/2026): papel, tinta e giz
   Carregado POR ÚLTIMO (depois do 08). O arquivo guarda o nome do redesign anterior (a lista branca do servidor e os
   testes o conhecem por ele); o conteúdo é inteiro da linguagem nova: design/caderno-2026-10 (tokens.css, telas/*.html).
   A ideia: o Facin é um caderno de papel com um professor desenhado a tinta. Uma tinta só (--tinta), uma segunda
   tinta (--roxo), o único ouro é a passada do marcador (--marcador). Não existe vidro, aurora, brilho, orbe nem faísca.

   Os TOKENS moram no css/01-base.css (T1c/F3c): aqui só se LÊ token. Nada de cor literal (T4), nada de raio com
   número (F1: só var(--raio-*)), nada de `transition: all`, nada de transform no :active.
   FRONTEIRA: o motor da lousa (aula-pagina.js, arranjos, exportação, realce) não muda. Por dentro do quadro só mudam a
   tipografia (Kalam em tudo, §2.2) e o fundo/borda (a folha, §4).
   Armadilhas: E2 (toda regra com display leva o seu [hidden]), E26 (camada decorativa com pointer-events: none),
   E57 (nada de seletor de tipo com visual: chrome por CLASSE).
   ========================================================= */

/* =========================================================
   0. FUNDAÇÃO: o papel, a folha, o traço, os botões, a letra de mão e o boneco
   ========================================================= */

/* O papel: cor + grão (dois radial-gradient repetidos, CSS puro) + a vinheta. É o fundo de tudo. */
body, .papel {
  background-color: var(--papel);
  background-image: var(--grao);
  background-size: 5px 5px, 9px 9px;
  background-position: 0 0, 2px 3px;
  box-shadow: var(--sombra-papel);
}
/* O que ficava com fundo próprio passa a deixar o papel aparecer. */
.app .main, .app .topbar, .app .fale, .app .chat-area, .app .conversation, .app .composer-wrap,
.app .figure-panel, .app .figure-panel__head, .app .figure-panel__body { background: transparent; }
.app .fale { animation: none; }

/* A folha: a lousa, os cartões "de papel", as páginas do caderno. O quadriculado só de dia (--grade). */
.folha {
  background-color: var(--folha);
  background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px), var(--grao);
  background-size: 22px 22px, 22px 22px, 4px 4px, 7px 7px;
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-folha);
}
/* O rabisco: borda de 1,5px com raios assimétricos, o "desenhado à mão". */
.rabisco {
  border: 1.5px solid var(--linha2);
  border-radius: var(--raio-rab-a) var(--raio-rab-b) var(--raio-rab-c) var(--raio-rab-d) / var(--raio-rab-b) var(--raio-rab-a) var(--raio-rab-d) var(--raio-rab-c);
}
/* A passada do marcador: o único ouro do app, atrás do texto que precisa ser lido. */
.marca {
  background: linear-gradient(104deg, transparent 2%, color-mix(in srgb, var(--marcador) 48%, transparent) 6%, color-mix(in srgb, var(--marcador) 48%, transparent) 94%, transparent 98%);
  padding: 0 .18em; margin: 0 -.18em; border-radius: var(--raio-marca);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* A letra de mão (Kalam): o que o professor escreve. Nunca abaixo de 13px, nunca em botão. */
.giz { font-family: var(--font-giz); }

/* Os botões. .btn-tinta = cápsula cheia (UMA por tela, a ação principal); .btn-traco = cápsula de fio (o resto);
   .redondo = círculo de 40–46px com fio (voltar, fechar, encerrar, ferramentas). */
.btn-tinta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--raio-capsula);
  background: var(--tinta); color: var(--sobre-tinta);
  font-family: var(--font); font-weight: 650; cursor: pointer;
  box-shadow: var(--sombra-tinta);
}
.btn-tinta:hover { background: var(--accent-hover); color: var(--sobre-tinta); }
.btn-traco {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid var(--linha2); border-radius: var(--raio-capsula);
  background: transparent; color: var(--tinta);
  font-family: var(--font); font-weight: 620; cursor: pointer;
}
.btn-traco:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.redondo {
  display: inline-grid; place-items: center;
  border: 1.5px solid var(--linha2); border-radius: var(--raio-circulo);
  background: transparent; color: var(--tinta); cursor: pointer;
}
.redondo:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.btn-tinta[hidden], .btn-traco[hidden], .redondo[hidden] { display: none; }
/* Desativado = fio tracejado e lápis. Nunca escondido. */
.btn-tinta:disabled, .btn-traco:disabled, .redondo:disabled,
.btn-tinta[aria-disabled="true"], .btn-traco[aria-disabled="true"], .redondo[aria-disabled="true"] {
  background: transparent; color: var(--lapis); border: 1.5px dashed var(--linha2); box-shadow: none; cursor: default;
}
/* O foco: um anel na segunda tinta, afastado 2px. */
.app :focus-visible, .bloqueio-overlay :focus-visible, .planos-overlay :focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }

/* O risco de lápis que se preenche (os estados de carregamento). A anotação ao lado, a lápis, 13px no mínimo. */
.cad-risco {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--font); font-size: 13.5px; font-weight: 500; color: var(--lapis);
}
.cad-risco[hidden] { display: none; }
.cad-risco__traco {
  flex: 1 1 auto; height: 1.5px; min-width: 24px; position: relative; overflow: hidden;
  background: var(--linha); pointer-events: none;
}
.cad-risco__traco::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: var(--tinta2); animation: cad-lapis 5s linear infinite;
}
@keyframes cad-lapis { from { width: 0; } to { width: 100%; } }

/* O boneco (os seis símbolos do index.html): cor por currentColor, o traço do desenho. */
.cad-bq {
  display: block; color: var(--tinta); fill: none; stroke: currentColor;
  stroke-width: 5.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
.cad-bq .sombra { fill: currentColor; fill-opacity: .08; stroke: none; }
.cad-bq .lente { stroke-width: 4.2; }
.cad-bq .olho { fill: currentColor; stroke: none; }
.cad-bq .sobr { stroke-width: 3.8; }
.cad-bq .mao { stroke-width: 4.4; }
.cad-bq .dedo { stroke-width: 3.8; }
.cad-bq .boca { stroke-width: 3.8; }
.cad-bq .boca-aberta { fill: color-mix(in srgb, var(--tinta) 88%, transparent); }
.cad-bq--rosto { width: 34px; height: 34px; stroke-width: 5; }
.cad-bq[hidden] { display: none; }

/* O balão de fala (na letra do professor), com o rabicho. */
.cad-balao {
  position: relative; box-sizing: border-box; padding: 12px 16px;
  border: 1.5px solid var(--linha2); border-radius: var(--raio-balao);
  background: var(--folha); box-shadow: var(--sombra-folha); color: var(--tinta);
  font-family: var(--font-giz); font-size: 17px; line-height: 1.35; text-align: left;
}
.cad-balao::after {
  content: ""; position: absolute; left: 36px; bottom: -9px; width: 15px; height: 15px; box-sizing: border-box;
  background: var(--folha); border-right: 1.5px solid var(--linha2); border-bottom: 1.5px solid var(--linha2);
  transform: rotate(45deg); pointer-events: none;
}

/* Os botões de ícone antigos (.btn--icon) viram o redondo de 44px. */
.app .btn--icon, .admin-page .btn--icon { width: 44px; height: 44px; border: 1.5px solid var(--linha2); border-radius: var(--raio-circulo); color: var(--tinta); }
.app .btn--icon:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }

/* As ações antigas (.acao-primaria/.acao-secundaria, usadas pelo login, pelos planos e pelo perfil): cápsulas de tinta
   e de traço, sem a seta e sem a base de apertar. */
.bloqueio-overlay .acao-primaria, .planos-overlay .acao-primaria, .pagina-pagar .acao-primaria, .composer__paywall .acao-primaria,
.bloqueio-overlay .acao-secundaria, .planos-overlay .acao-secundaria, .composer__paywall .acao-secundaria {
  justify-content: center; text-align: center; gap: 8px; min-height: 52px; padding: 0 22px;
  border-radius: var(--raio-capsula); font-size: 16px; font-weight: 650; transform: none;
}
.bloqueio-overlay .acao-primaria::after, .planos-overlay .acao-primaria::after, .pagina-pagar .acao-primaria::after,
.bloqueio-overlay .acao-secundaria::after, .planos-overlay .acao-secundaria::after, .composer__paywall .acao-primaria::after,
.composer__paywall .acao-secundaria::after { display: none; }
.bloqueio-overlay .acao-primaria, .planos-overlay .acao-primaria, .pagina-pagar .acao-primaria, .composer__paywall .acao-primaria {
  border: 0; background: var(--tinta); color: var(--sobre-tinta); box-shadow: var(--sombra-tinta);
}
.bloqueio-overlay .acao-primaria:hover, .planos-overlay .acao-primaria:hover, .pagina-pagar .acao-primaria:hover,
.composer__paywall .acao-primaria:hover { background: var(--accent-hover); color: var(--sobre-tinta); }
.bloqueio-overlay .acao-primaria:active, .planos-overlay .acao-primaria:active { box-shadow: var(--sombra-tinta); }
.bloqueio-overlay .acao-primaria:disabled, .planos-overlay .acao-primaria:disabled, .pagina-pagar .acao-primaria:disabled {
  background: var(--tinta); color: var(--sobre-tinta); box-shadow: none; opacity: .5;
}
.bloqueio-overlay .acao-secundaria, .planos-overlay .acao-secundaria, .composer__paywall .acao-secundaria {
  border: 1.5px solid var(--linha2); background: transparent; color: var(--tinta);
}
.bloqueio-overlay .acao-secundaria:hover, .planos-overlay .acao-secundaria:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); border-color: var(--linha2); }

/* Os botões da tela "fale" (.fale__botao): cápsulas de traço; o principal, de tinta. Sem o salto de mola. */
.fale__botao { border: 1.5px solid var(--linha2); border-radius: var(--raio-capsula); color: var(--tinta); font-weight: 620; transition: background var(--transition); }
.fale__botao:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); transform: none; }
.fale__botao--principal, .fale__botao--principal:hover { background: var(--tinta); color: var(--sobre-tinta); border-color: transparent; filter: none; box-shadow: var(--sombra-tinta); }
.fale__botao:disabled { background: transparent; color: var(--lapis); border: 1.5px dashed var(--linha2); box-shadow: none; }
.fale__aviso { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio-superficie); color: var(--tinta); }

/* =========================================================
   1. A CASCA: topbar, a margem do caderno (sidebar), o menu da conta, a navegação inferior e a folha de baixo
   ========================================================= */

/* ---------- Topbar: sem barra, sem fio; a marca no celular, o nome e o tema à direita ---------- */
.app .topbar { min-height: 0; gap: 10px; padding: 14px clamp(16px, 4vw, 48px) 0; border-bottom: 0; justify-content: flex-start; }
/* à direita, nesta ordem: o nome (ou "Entrar") e o tema; o resto fica à esquerda */
.app .topbar__left { margin-right: auto; }
.app .topbar #userArea { order: 1; }
.app .topbar .topbar__entrar { order: 2; }
.app .topbar .topbar__tema { order: 3; }
.topbar__marca { display: none; }
.app .topbar__title { font-size: 15px; font-weight: 620; color: var(--tinta); }
.app .topbar__usuario { font-size: 14px; font-weight: 600; color: var(--tinta2); }
.app .topbar__tema.redondo, .app .topbar #adminLink.redondo { width: 44px; height: 44px; color: var(--tinta); }
.app .topbar__tema .icon { width: 18px; height: 18px; }
/* "Entrar" no topo: cápsula de TRAÇO (a cápsula cheia é a ação da tela, uma só). No celular ele sai do topo: a aba "Entrar"
   da navegação de baixo faz o mesmo (adendo 5: uma entrada por ação). */
.app .topbar__entrar.btn-traco { min-height: 44px; padding: 0 20px; border: 1.5px solid var(--linha2); background: transparent; color: var(--tinta); font-size: 15px; box-shadow: none; }
.app .topbar__entrar.btn-traco:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); color: var(--tinta); }
.app .topbar__entrar[hidden] { display: none; }
.app .topbar__entrar::after { display: none; }
/* A marca: o rosto a tinta e "Facin.me" (o ".me" na segunda tinta). */
.app .brand__mark { height: 34px; width: 34px; align-self: center; filter: none; }
.app .brand__name { font-size: 20px; font-weight: 750; letter-spacing: -.01em; top: 0; margin-left: 8px; color: var(--tinta); }
.brand__dominio { color: var(--roxo); }

/* ---------- A margem do caderno (computador): 300px em --papel2, separada do painel por um fio de 1,5px em --roxo ---------- */
.app .sidebar {
  width: 300px; box-sizing: border-box; margin: 0; padding: 22px 22px 18px; gap: 0;
  background: var(--papel2); border-right: 1.5px solid var(--roxo); box-shadow: none; transition: margin-left var(--transition);
}
.app.sidebar-collapsed .sidebar { margin-left: -300px; }
.app .sidebar__top { height: auto; margin: 0 0 18px; padding: 0; border-bottom: 0; }
.app .sidebar .brand__mark { height: 34px; }
.app .sidebar__close.btn--icon { width: 44px; height: 44px; border: 0; }
@media (min-width: 769px) and (min-height: 501px) { .app .sidebar__close { display: none; } }   /* o X é só da folha do celular */

/* "Aula ao vivo" na margem: cápsula de TRAÇO. A cápsula cheia é a ação do painel ("Começar aula ao vivo", "Conversar com o
   professor"); duas cheias na mesma tela disputariam o olho (adendo 5: uma ação principal por tela). */
.app .sidebar__aula {
  justify-content: center; min-height: 48px; margin: 0 0 22px; padding: 0 16px; gap: 10px; border: 1.5px solid var(--linha2);
  border-radius: var(--raio-capsula); background: transparent; color: var(--tinta); font-size: 16px; font-weight: 650;
  box-shadow: none; transition: background var(--transition);
}
.app .sidebar__aula:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); border-color: var(--linha2); }
.app .sidebar__aula .icon { width: 16px; height: 16px; color: currentColor; }
.app .sidebar__aula[hidden] { display: none; }

/* "Conversas" e "Aulas gravadas": rótulos na letra do professor. */
.app .sidebar__label {
  margin: 0 0 6px; padding: 0; border-top: 0; font-family: var(--font-giz); font-size: 17px; font-weight: 700; color: var(--tinta); letter-spacing: 0;
}
.app .sidebar__label::after { content: none; }
.app .conv-list { margin: 0; padding: 0; border-left: 0; gap: 2px; }
.app .conv-list__linha { display: none; }
.app .conv-list__empty { padding: 4px 0 8px; font-family: var(--font-giz); font-size: 13px; color: var(--tinta2); }
.app .conv-item { border-radius: var(--raio-controle); }
.app .conv-item--active { background: color-mix(in srgb, var(--tinta) 7%, transparent); }
.app .conv-item__open {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
  min-height: 44px; padding: 2px 4px 2px 8px; color: var(--tinta);
}
.app .conv-item__icon { grid-row: 1; width: 12px; height: 12px; opacity: 1; color: var(--tinta2); }
.app .conv-item--active .conv-item__icon { color: var(--tinta); }
.app .conv-item__title { grid-column: 2; font-size: 14.5px; font-weight: 650; color: var(--tinta); }
.conv-item__quando { grid-column: 3; grid-row: 1; overflow: hidden; font-size: 13px; color: var(--tinta2); white-space: nowrap; }
.app .conv-item__pensando { grid-column: 3; grid-row: 1; }
.app .conv-item__del { width: 44px; height: 44px; color: var(--tinta2); }
@media (hover: none) { .app .conv-item__del { opacity: .7; } }

/* Aulas gravadas: cada aula é uma página do caderno (data em caixa alta pequena, título em Kalam --vermelho, a duração
   e a miniatura genérica da lousa a traço: a gravação não guarda a imagem da lousa). */
.gravacoes { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; max-height: 42%; margin-top: 18px; overflow-y: auto; }
.gravacoes[hidden], .gravacoes__aviso[hidden] { display: none; }
.gravacoes__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gravacoes__rotulo { margin-right: 0; }
.gravacoes__todas { min-height: 44px; margin: 0; padding: 0 4px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; color: var(--tinta2); }
.gravacoes__todas:hover { color: var(--tinta); }
.gravacoes__todas .icon { display: none; }   /* no computador, o texto; no celular, a lixeira redonda do topo */
.gravacoes__parcial { margin-left: 4px; }
/* As abas Conversas / Aulas gravadas: só no celular ("Seu caderno"). */
.caderno-abas { display: none; gap: 18px; margin: 0 0 12px; }
.caderno-abas__aba {
  min-height: 44px; padding: 10px 0 4px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: 650; color: var(--lapis);
}
.caderno-abas__aba[aria-selected="true"] { color: var(--roxo); border-bottom-color: var(--roxo); }
.caderno-abas__aba:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
.gravacoes__aviso { margin: 0 0 6px; font-family: var(--font-giz); font-size: 13px; color: var(--tinta2); }
.app .gravacoes__lista { flex: 0 0 auto; overflow: visible; gap: 0; }
.app .gravacoes__item { border-radius: var(--raio-reto); border-bottom: 1px solid var(--linha); }
.app .gravacoes__item:hover { background: transparent; }
.app .gravacoes__abrir { grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 0; min-height: 52px; padding: 8px 0; }
.app .gravacoes__abrir .conv-item__icon { display: none; }
.app .gravacoes__data { grid-column: 2; grid-row: 1; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--lapis); }
.app .gravacoes__abrir::before {
  content: ""; grid-row: 1 / span 3; grid-column: 1; align-self: center; width: 46px; height: 32px; box-sizing: border-box; border-radius: var(--raio-p);
  background-color: var(--folha); border: 1px solid var(--linha);
  background-image: linear-gradient(var(--vermelho), var(--vermelho)), linear-gradient(var(--linha2), var(--linha2)),
    linear-gradient(var(--linha2), var(--linha2)), linear-gradient(var(--linha2), var(--linha2)),
    linear-gradient(color-mix(in srgb, var(--marcador) 45%, transparent), color-mix(in srgb, var(--marcador) 45%, transparent));
  background-repeat: no-repeat;
  background-size: 18px 2px, 24px 1.5px, 16px 1.5px, 20px 1.5px, 13px 6px;
  background-position: 5px 7px, 5px 13px, 5px 18px, 5px 23px, 27px 19px;
}
.app .gravacoes__abrir .conv-item__title { grid-column: 2; grid-row: 2; font-family: var(--font-giz); font-size: 15px; font-weight: 700; color: var(--vermelho); white-space: normal; line-height: 1.15; }
.app .gravacoes__abrir .conv-item__quando { grid-column: 2; grid-row: 3; font-size: 13px; color: var(--tinta2); }
/* Apagar: o cartão de confirmação em rabisco, com a pergunta na letra do professor. */
.gravacoes__confirmar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 6px 0; padding: 12px 14px; border: 1.5px solid var(--linha2);
  border-radius: var(--raio-rab-a) var(--raio-rab-b) var(--raio-rab-c) var(--raio-rab-d) / var(--raio-rab-b) var(--raio-rab-a) var(--raio-rab-d) var(--raio-rab-c);
  background: var(--folha);
}
.gravacoes__rosto { flex: 0 0 auto; width: 40px; height: 40px; }
.gravacoes__pergunta { flex: 1 1 calc(100% - 52px); margin: 0; font-family: var(--font-giz); font-size: 16px; font-weight: 700; color: var(--tinta); }
.gravacoes__sim, .gravacoes__cancelar { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--linha2); border-radius: var(--raio-capsula); background: transparent; color: var(--tinta); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.gravacoes__sim { color: var(--vermelho); border-color: var(--vermelho); }
.gravacoes__sim:focus-visible, .gravacoes__cancelar:focus-visible, .gravacoes__todas:focus-visible,
.gravacoes__abrir:focus-visible, .gravacoes__del:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }

/* Os links legais e o rodapé do usuário (o uso do mês embaixo do nome). */
.app .sidebar__legal { gap: 6px 14px; flex-wrap: wrap; margin-top: auto; padding: 10px 0 0; }
.app .sidebar__legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--tinta2); }
.app .sidebar__legal a:hover { color: var(--tinta); }
.app .sidebar__rodape { gap: 10px; margin-top: 8px; padding: 14px 0 0; border-top: 1px solid var(--linha); }
.sidebar__perfil { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.sidebar__avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--raio-circulo); display: grid; place-items: center;
  border: 1.5px solid var(--linha2); background: transparent; color: var(--tinta); font-size: 15px; font-weight: 700;
}
.sidebar__perfil-texto { display: flex; flex-direction: column; min-width: 0; }
.sidebar__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 700; color: var(--tinta); }
.sidebar__cota { font-size: 13px; color: var(--tinta2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__cota[hidden] { display: none; }
.app .sidebar__config.btn--icon { flex: 0 0 auto; width: 44px; height: 44px; border: 0; color: var(--tinta2); }
.app .sidebar__config.btn--icon:hover { color: var(--tinta); }

/* O menu da conta: uma folha sobre a margem, o medidor de uso em cima e as linhas de caderno embaixo. */
.app .conta-menu {
  left: -10px; right: -10px; min-width: 0; width: auto; padding: 14px 14px 6px; gap: 0;
  background-color: var(--folha);
  background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  border: 1px solid var(--linha); border-radius: var(--raio-cartao); box-shadow: var(--sombra-folha);
}
.app .conta-menu[hidden] { display: none; }
/* O uso do mês (#contaCota): o texto do app e, acima, o risco preenchido pelo --uso (js/20 lê o "N%"). */
.app .conta-menu__info {
  position: relative; margin: 0 0 10px; padding: 24px 0 10px; border-bottom: 1px solid var(--linha);
  font-size: 13px; color: var(--tinta2);
}
.app .conta-menu__info[hidden] { display: none; }
.app .conta-menu__info::before {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--linha); pointer-events: none;
}
.app .conta-menu__info::after {
  content: ""; position: absolute; left: 0; top: 10px; height: 2px; width: var(--uso, 0%); background: var(--tinta); pointer-events: none;
}
.app .conta-menu__item {
  min-height: 50px; padding: 0 4px; gap: 12px; border-radius: var(--raio-reto); border-bottom: 1px solid var(--linha);
  font-size: 15.5px; font-weight: 600; color: var(--tinta);
}
.app .conta-menu__item:last-child { border-bottom: 0; }
.app .conta-menu__item:hover { background: color-mix(in srgb, var(--tinta) 5%, transparent); }
.app .conta-menu__item .icon { width: 20px; height: 20px; color: var(--tinta); }
.app .conta-menu__item--sair, .app .conta-menu__item--sair .icon { color: var(--vermelho); }
.app .conta-menu__item--sair:hover { background: color-mix(in srgb, var(--vermelho) 8%, transparent); }
.app .conta-menu__item::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--lapis); border-bottom: 1.5px solid var(--lapis);
  transform: rotate(-45deg); flex: 0 0 auto;
}

/* ---------- Navegação inferior (só no celular): uma faixa de papel com um fio em cima ---------- */
.nav-inferior { display: none; }
.nav-inferior__aba {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 64px; padding: 6px 2px 4px; border: 0; background: none; cursor: pointer;
  color: var(--tinta2); font-family: var(--font); font-size: 11.5px; font-weight: 650; letter-spacing: .01em; line-height: 1.1;
}
.nav-inferior__aba[hidden] { display: none; }
.nav-inferior__aba .icon { width: 22px; height: 22px; }
.nav-inferior__aba > span { border-bottom: 2px solid transparent; padding-bottom: 1px; }
.nav-inferior__aba[aria-current="page"] { color: var(--tinta); background: none; }
.nav-inferior__aba[aria-current="page"] > span { border-bottom-color: var(--roxo); color: var(--tinta); }

/* ---------- Celular (e celular deitado, E69) ---------- */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .app .topbar { padding: 14px 22px 0; }
  .topbar__marca { display: flex; align-items: center; margin-right: auto; }
  .app .topbar .topbar__entrar { display: none; }
  .app .topbar__left { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  .nav-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; box-sizing: border-box;
    height: calc(84px + env(safe-area-inset-bottom)); padding: 8px 22px 0;
    display: flex; align-items: flex-start; justify-content: center;
    border-top: 1px solid var(--linha); background: var(--papel);
  }
  /* Só as três abas, no meio (o microfone saiu da barra: 2026-11-01, pedido do Beny). */
  .nav-inferior__abas { display: flex; justify-content: center; gap: 22px; height: auto; padding: 0; background: none; border: 0; box-shadow: none; }
  .app.figure-open .nav-inferior { display: none; }
  .app .fale { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

  /* "Seu caderno" (2026-11-01, proposta do Beny): uma tela própria, do topo até a navegação de baixo, e não mais uma folha
     por cima do Início. É a MESMA margem (conversas, aulas gravadas, o menu da conta); as abas Conversas / Aulas gravadas
     trocam a lista (js/20, cadernoAbas). Sem fundo escuro atrás e sem o X: quem sai é a navegação de baixo. */
  .app .sidebar {
    position: fixed; top: 0; left: 0; right: 0; bottom: calc(84px + env(safe-area-inset-bottom));
    width: auto; max-width: none; max-height: none; margin: 0; z-index: 40; box-sizing: border-box;
    padding: 14px 22px 14px; overflow-y: auto; border: 0; border-radius: 0;
    background-color: var(--papel); background-image: var(--grao); background-size: 5px 5px, 9px 9px; background-position: 0 0, 2px 3px; box-shadow: none;
    visibility: hidden; transform: none; transition: none;
  }
  .app.sidebar-open .sidebar { visibility: visible; }
  .app .sidebar-backdrop:not([hidden]) { display: none !important; }
  .app .sidebar__top { flex-wrap: wrap; justify-content: space-between; align-items: center; min-height: 44px; margin: 0 0 14px; }
  .app .sidebar__top::before {
    content: "Seu caderno" / ""; order: 3; flex: 1 0 100%; margin-top: 26px;
    font-family: var(--font-giz); font-size: 34px; line-height: 1.1; font-weight: 700; color: var(--tinta);
  }
  .app .sidebar__close, .app .sidebar__aula { display: none; }
  .app .conv-list { min-height: 0; flex: 0 0 auto; overflow: visible; }
  .app:not(.nav-conta) .sidebar__rodape { display: none; }
  .app.nav-conta .conv-list, .app.nav-conta .sidebar__label, .app.nav-conta .sidebar__legal, .app.nav-conta .gravacoes,
  .app.nav-conta .caderno-abas { display: none; }
  .app.nav-conta .sidebar__top::before { content: none; }

  /* As abas (só aparecem com aulas gravadas; sem elas, a lista de conversas com o rótulo de sempre). */
  .app .sidebar:has(.gravacoes:not([hidden])) .caderno-abas { display: flex; }
  .app .sidebar:has(.gravacoes:not([hidden])) .sidebar__label { display: none; }
  .app .sidebar[data-aba="gravadas"]:has(.gravacoes:not([hidden])) #convList { display: none; }
  .app .sidebar[data-aba="conversas"] .gravacoes { display: none; }
  .app .gravacoes__rotulo { display: none; }

  /* Conversas: linhas de caderno (o play, o nome, a data a lápis). */
  .app .conv-item { border-radius: var(--raio-reto); border-bottom: 1px solid var(--linha); }
  .app .conv-item--active { background: transparent; }
  .app .conv-item__open { min-height: 54px; column-gap: 14px; padding: 0 2px; }
  .app .conv-item__icon { width: 18px; height: 18px; color: var(--tinta); }
  .app .conv-item__title { font-size: 16px; font-weight: 600; }
  .conv-item__quando { font-size: 13.5px; color: var(--lapis); }

  /* Aulas gravadas: cada aula é uma página do caderno, num cartão de folha (a miniatura, a data, o título, a duração). */
  .gravacoes { max-height: none; margin-top: 0; overflow: visible; }
  .app .gravacoes__lista { display: grid; gap: 10px; }
  .app .gravacoes__item {
    position: relative; display: flex; align-items: center; border: 1px solid var(--linha); border-radius: 16px;
    background-color: var(--folha);
    background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px), var(--grao);
    background-size: 22px 22px, 22px 22px, 4px 4px, 7px 7px; box-shadow: var(--sombra-folha);
  }
  .app .gravacoes__item:hover { background-color: var(--folha); }
  .app .gravacoes__item:has(.gravacoes__confirmar) { border: 0; background: none; box-shadow: none; }
  .app .gravacoes__abrir {
    flex: 1 1 auto; grid-template-columns: 92px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 3px;
    min-height: 88px; padding: 12px 4px 12px 14px;
  }
  .app .gravacoes__abrir::before {
    grid-row: 1 / span 3; width: 92px; height: 64px; border-radius: 8px; box-shadow: var(--sombra-folha);
    background-size: 40px 3px, 52px 2.2px, 36px 2.2px, 44px 2.2px, 26px 12px;
    background-position: 10px 11px, 10px 22px, 10px 30px, 10px 42px, 58px 37px;
  }
  .app .gravacoes__data { grid-column: 2; grid-row: 1; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--lapis); }
  .app .gravacoes__abrir .conv-item__title { grid-row: 2; font-size: 19px; color: var(--vermelho); }
  .app .gravacoes__abrir .conv-item__quando { grid-column: 2; grid-row: 3; font-size: 13.5px; color: var(--tinta2); }
  .app .gravacoes__abrir .conv-item__icon { display: block; grid-column: 3; grid-row: 1 / span 3; width: 16px; height: 16px; color: var(--lapis); fill: currentColor; stroke: none; }
  .gravacoes__parcial { margin-left: 8px; font-family: var(--font-giz); font-size: 13px; color: var(--lapis); }
  .app .gravacoes__del { flex: 0 0 auto; margin-right: 4px; color: var(--lapis); }
  /* "Apagar todas": a lixeira redonda no topo da tela, ao lado da marca (só na aba Aulas gravadas). */
  .gravacoes__topo { position: absolute; top: 14px; right: 22px; }
  .gravacoes__todas { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--linha2); border-radius: var(--raio-circulo); color: var(--tinta); }
  .gravacoes__todas[hidden] { display: none; }
  .gravacoes__todas .icon { display: block; width: 18px; height: 18px; }
  .gravacoes__todas-txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* Apagar: o cartão de rabisco vermelho com o rosto (o desenho do Beny). */
  .gravacoes__confirmar { width: 100%; margin: 0; padding: 14px 16px; gap: 12px; border-color: var(--vermelho); background: transparent; }
  .gravacoes__pergunta { font-weight: 400; line-height: 1.35; }
  .gravacoes__sim, .gravacoes__cancelar { flex: 1 1 0; min-height: 44px; font-size: 15px; }
  .gravacoes__sim { border: 0; background: var(--vermelho); color: var(--sobre-tinta); box-shadow: var(--sombra-tinta); }
  .app.nav-conta .sidebar__rodape { flex-direction: column; align-items: stretch; margin-top: 0; padding-top: 0; border-top: 0; }
  .app .sidebar__config { display: none; }
  .app .conta-menu { position: static; left: auto; right: auto; width: 100%; padding: 4px 0 0; border: 0; background: none; box-shadow: none; }
}

/* =========================================================
   2. INÍCIO (a tela de opções da aula), a entrada do visitante (demonstração) e o paywall da cota
   Markup: js/18 faleMostrarEscolhaAula. A base é o COMPUTADOR (o boneco acena à esquerda, a saudação e a ÚNICA ação à
   direita); o celular entra na media query do fim: o cartão de papel com o boneco explica e o microfone redondo.
   O que saiu da vista (o código fica): chip, lousinha, tag, as três dicas, a foto no computador.
   ========================================================= */
.fale:has(> .fale__palco--inicio) { align-items: center; padding: clamp(12px, 3vh, 40px) clamp(16px, 4vw, 48px) 28px; }
.fale__palco--inicio {
  display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 520px); grid-template-areas: "boneco titulo" "boneco frase" "boneco acao" "boneco foto" "ia ia";
  column-gap: clamp(24px, 4vw, 56px); row-gap: 0; align-items: center; justify-content: center;
  width: min(880px, 100%); text-align: left;
}
.inicio__boneco { grid-area: boneco; width: 100%; height: auto; max-height: 440px; aspect-ratio: 260 / 310; justify-self: center; align-self: center; }
.inicio__boneco[hidden] { display: none; }
.inicio__chip, .inicio__oi, .inicio__tag, .inicio__lousinha, .inicio__dicas, .inicio__so-cel { display: none; }
.inicio__titulo {
  grid-area: titulo; margin: 0; font-family: var(--font-giz); font-size: clamp(36px, 4.2vw, 52px); line-height: 1.1; font-weight: 700;
  letter-spacing: 0; color: var(--tinta); text-wrap: balance;
}
.inicio__so-web { display: inline; }
.inicio__frase { grid-area: frase; margin: 10px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.45; color: var(--tinta2); text-wrap: pretty; }
.fale__palco--inicio .fale__aviso { grid-column: 1 / -1; margin: 0; }
/* O cartão (no computador vira só a ação): o botão principal é a única cápsula cheia da tela. */
.inicio__cartao { grid-area: acao; display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.inicio__boneco-cartao, .inicio__texto { display: none; }
.fale__botao.inicio__primario {
  min-height: 56px; gap: 10px; padding: 0 28px 0 22px; border: 0; border-radius: var(--raio-capsula);
  background: var(--tinta); color: var(--sobre-tinta); font-size: 17px; font-weight: 650; box-shadow: var(--sombra-tinta);
}
.fale__botao.inicio__primario:hover { background: var(--accent-hover); filter: none; }
.inicio__medalha { display: contents; }
.inicio__medalha svg.icon { width: 20px; height: 20px; }
/* A foto da questão: a ÚNICA outra entrada, uma linha discreta embaixo da ação (o Beny e os alunos mandam a questão em foto). */
.inicio__atalhos { grid-area: foto; display: flex; margin-top: 14px; }
.fale__botao.inicio__atalho {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; border: 0; border-radius: var(--raio-reto);
  background: none; color: var(--tinta2); font-size: 15px; font-weight: 600; text-align: left; box-shadow: none;
}
.fale__botao.inicio__atalho:hover { background: none; color: var(--tinta); }
.fale__botao.inicio__atalho > span:last-child { text-decoration: underline; text-decoration-color: var(--linha2); text-underline-offset: 4px; }
.inicio__atalho-icone { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; }
.inicio__atalho-icone svg.icon { width: 20px; height: 20px; }
.inicio__ia { grid-area: ia; margin: 36px 0 0; text-align: center; font-family: var(--font-giz); font-size: 13px; line-height: 1.3; color: var(--tinta2); }
/* A "Última aula" (desenho do Beny, nov/2026) é só do celular: no computador a margem já lista as aulas gravadas. */
.inicio__ultima, .inicio__ultima[hidden] { display: none; }

/* Computador estreito: uma coluna. */
@media (min-width: 769px) and (max-width: 1060px) {
  .fale__palco--inicio { grid-template-columns: minmax(0, 1fr); grid-template-areas: "boneco" "titulo" "frase" "acao" "foto" "ia"; justify-items: center; text-align: center; }
  .inicio__boneco { max-height: 260px; }
  .inicio__frase { margin-inline: auto; }
}

/* ---------- Início no celular (PapelInicio): a saudação, o cartão de papel com o boneco e o microfone ---------- */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .fale:has(> .fale__palco--inicio) { align-items: flex-start; padding: 14px 22px calc(100px + env(safe-area-inset-bottom)); }
  .fale__palco--inicio { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: min(560px, 100%); text-align: left; }
  .inicio__boneco { display: none; }
  .inicio__titulo { font-size: 36px; line-height: 1.1; }
  .inicio__frase { margin: 6px 0 0; font-size: 16px; line-height: 1.4; }
  .inicio__cartao {
    position: relative; display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 16px 14px 10px; box-sizing: border-box;
    border-radius: var(--raio-cartao); color: var(--tinta); cursor: pointer;
    background-color: var(--folha);
    background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px), var(--grao);
    background-size: 22px 22px, 22px 22px, 4px 4px, 7px 7px;
    border: 1px solid var(--linha); box-shadow: var(--sombra-folha);
  }
  .inicio__boneco-cartao { display: block; flex: 0 0 84px; width: 84px; height: 112px; }
  .inicio__texto { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; }
  .inicio__chamada, .inicio__apoio { display: block; margin: 0; }
  .inicio__chamada { font-family: var(--font-giz); font-size: 21px; font-weight: 700; line-height: 1.1; color: var(--tinta); }
  .inicio__chamada::after { content: none; }
  .inicio__apoio { font-size: 14px; line-height: 1.35; color: var(--tinta2); }
  /* O protagonista: o microfone redondo de tinta (64px). */
  .fale__botao.inicio__primario { flex: 0 0 auto; position: relative; justify-content: center; width: 64px; height: 64px; min-height: 64px; padding: 0; gap: 0; border-radius: var(--raio-circulo); }
  .inicio__primario > span:not(.inicio__medalha) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .inicio__medalha svg.icon { width: 26px; height: 26px; }
  /* O atalho da foto: uma linha de caderno (só no celular). */
  .inicio__atalhos { display: grid; margin-top: 18px; }
  .fale__botao.inicio__atalho {
    display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--linha); border-radius: var(--raio-reto);
    background: none; color: var(--tinta); font-size: 16px; font-weight: 600; text-align: left; box-shadow: none;
  }
  .fale__botao.inicio__atalho:hover { background: none; }
  .fale__botao.inicio__atalho > span:last-child { flex: 1 1 auto; text-decoration: none; }
  .fale__botao.inicio__atalho { color: var(--tinta); }
  .fale__botao.inicio__atalho::after {
    content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--lapis); border-bottom: 1.5px solid var(--lapis); transform: rotate(-45deg); flex: 0 0 auto;
  }
  .inicio__atalho-icone { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; }
  .inicio__atalho-icone svg.icon { width: 21px; height: 21px; }
  .inicio__ia { margin-top: 22px; }

  /* Desenho do Beny (nov/2026, "Proposta · Início"): a saudação, o cartão grande (o texto em cima, o boneco embaixo à
     esquerda e o microfone à direita), a "Última aula" e a frase da IA. A frase de apoio e a foto saem da vista. */
  .inicio__frase, .inicio__atalhos { display: none; }
  .inicio__cartao {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "texto texto" "boneco mic";
    align-items: end; gap: 0 14px; margin-top: 30px; padding: 20px 22px 22px; border-radius: 22px;
  }
  .inicio__texto { grid-area: texto; gap: 6px; }
  .inicio__boneco-cartao { grid-area: boneco; flex: none; width: 150px; height: 190px; margin: 14px 0 -8px 26px; }
  .fale__botao.inicio__primario { grid-area: mic; justify-self: end; align-self: center; width: 72px; height: 72px; min-height: 72px; margin: 18px 30px 0 0; }
  .inicio__medalha svg.icon { width: 28px; height: 28px; }

  .inicio__ultima:not([hidden]) { display: block; margin-top: 30px; }
  .inicio__ultima-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .inicio__ultima-rotulo { margin: 0; font-family: var(--font-giz); font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--tinta); }
  .inicio__ultima-caderno {
    min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
    color: var(--roxo); font-family: var(--font); font-size: 13.5px; font-weight: 650;
  }
  .inicio__ultima-aula {
    display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 4px; padding: 12px 14px; box-sizing: border-box;
    border: 1px solid var(--linha); border-radius: 16px; background-color: var(--folha); background-image: var(--grao);
    background-size: 4px 4px, 7px 7px; box-shadow: var(--sombra-folha); color: var(--tinta); text-align: left; cursor: pointer;
    font-family: var(--font);
  }
  .inicio__ultima-mini {
    flex: 0 0 auto; display: block; width: 92px; height: 64px; border: 1px solid var(--linha); border-radius: 8px;
    background: var(--folha); color: var(--tinta);
  }
  .inicio__ultima-texto { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
  .inicio__ultima-quando { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta2); }
  .inicio__ultima-titulo {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-giz); font-size: 19px; font-weight: 700; line-height: 1.15; color: var(--vermelho);
  }
  .inicio__ultima-dur { font-size: 13.5px; color: var(--tinta2); }
  .inicio__ultima-play { flex: 0 0 auto; width: 18px; height: 18px; color: var(--tinta2); fill: currentColor; stroke: none; }
}
@media (max-width: 768px) and (max-height: 700px), (max-height: 500px) and (orientation: landscape) {
  .inicio__titulo { font-size: 30px; }
  .inicio__cartao { margin-top: 14px; }
  .inicio__boneco-cartao { height: 130px; width: 104px; margin-top: 8px; }
  .inicio__ultima:not([hidden]) { margin-top: 18px; }
}

/* ---------- O professor de vários nomes (Ciências, Lote 0): um professor só no desenho; os cartões ganham a pele de papel ---------- */
.inicio__texto.inicio__texto--professores { display: block; max-width: 560px; }
.inicio__professores { grid-column: 1 / -1; list-style: none; margin: 10px 0 0; padding: 0; width: 100%; text-align: left; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.inicio__prof {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; box-sizing: border-box; padding: 18px;
  border-radius: var(--raio-cartao); background: var(--folha); border: 1px solid var(--linha); box-shadow: var(--sombra-folha);
  border-top: 4px solid var(--cor-professor, var(--tinta));   /* a cor do professor só em preenchimento e borda, nunca texto (E66) */
}
.inicio__prof-cab { display: flex; align-items: center; gap: 14px; min-width: 0; }
.inicio__prof-quem { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.inicio__prof-boneco { flex: 0 0 auto; width: 84px; }
.inicio__prof-boneco .bq-estatico { display: block; }
.inicio__prof-boneco .bq { display: block; width: 100%; height: auto; aspect-ratio: 260 / 310; overflow: visible; color: var(--tinta); fill: none; stroke: currentColor; stroke-width: 5.6; stroke-linecap: round; stroke-linejoin: round; }
.inicio__prof-materia { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 650; color: var(--tinta2); }
.inicio__prof-materia::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: var(--raio-circulo); background: var(--cor-professor, var(--tinta)); }
.inicio__prof-nome { margin: 0; font-family: var(--font-giz); font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--tinta); }
.inicio__prof-apresentacao { flex: 1 0 auto; margin: 0; font-size: 14px; line-height: 1.45; color: var(--tinta2); }
.fale__botao.inicio__prof-iniciar, .fale__botao.inicio__prof-foto { width: 100%; justify-content: center; min-height: 46px; gap: 8px; padding: 0 16px; font-size: 15px; }
.fale__botao.inicio__prof-iniciar { margin-top: 6px; border: 2px solid var(--cor-professor, var(--tinta)); background: var(--tinta); color: var(--sobre-tinta); box-shadow: var(--sombra-tinta); }
.fale__botao.inicio__prof-iniciar:hover { background: var(--accent-hover); }
.fale__botao.inicio__prof-foto { min-height: 44px; color: var(--tinta2); }
.aula-redirecionar {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  width: calc(100% - 24px); max-width: 760px; margin: 0 auto; padding: 12px 16px; box-sizing: border-box;
  border: 1.5px solid var(--linha2); border-radius: var(--raio-rab-a) var(--raio-rab-b) var(--raio-rab-c) var(--raio-rab-d) / var(--raio-rab-b) var(--raio-rab-a) var(--raio-rab-d) var(--raio-rab-c);
  border-left: 5px solid var(--cor-professor, var(--tinta));
  background: var(--folha);
}
.aula-redirecionar__texto { flex: 1 1 240px; margin: 0; font-family: var(--font-giz); font-size: 16px; line-height: 1.35; color: var(--tinta); }
.fale__botao.aula-redirecionar__botao { min-height: 44px; padding: 0 18px; font-size: 15px; border-color: var(--cor-professor, var(--linha2)); }

/* ---------- A entrada do visitante (PapelDemo): o boneco acena, "Oi! Eu sou o Facin." e UMA ação ---------- */
.fale:has(> .fale__palco--demo) { align-items: center; }
.fale__palco--demo { gap: 10px; width: min(520px, 100%); }
.demo__boneco { width: min(300px, 36vh); height: auto; aspect-ratio: 260 / 310; }
.demo__titulo { margin: 14px 0 4px; font-family: var(--font-giz); font-size: clamp(32px, 6vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: 0; color: var(--tinta); }
.fale__palco--demo .fale__aviso { margin: 0 0 6px; }
.fale__botao.demo__iniciar { width: 100%; max-width: 420px; min-height: 56px; gap: 10px; padding: 0 30px 0 22px; border: 0; background: var(--tinta); color: var(--sobre-tinta); font-size: 17px; box-shadow: var(--sombra-tinta); }
.fale__botao.demo__iniciar:hover { background: var(--accent-hover); filter: none; }
.fale__botao.demo__iniciar svg.icon { width: 20px; height: 20px; }
.fale__botao.demo__conta { width: 100%; max-width: 420px; min-height: 50px; padding: 0 16px; justify-content: center; font-size: 15px; }
.fale__botao.demo__conta:hover { transform: none; }
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .fale:has(> .fale__palco--demo) { padding: 20px 20px calc(100px + env(safe-area-inset-bottom)); }
  .demo__boneco { width: min(250px, 30vh); }
}

/* ---------- O paywall da cota na tela de opções (faleMostrarPaywall) ---------- */
.fale__cara, .fale__cara.fale__cara--parada { width: 130px; height: auto; aspect-ratio: 260 / 310; color: var(--tinta); animation: none; }
.fale__cara::before { -webkit-mask: none; mask: none; background: none; content: none; }
.fale__palco .fale__titulo { font-family: var(--font-giz); font-weight: 700; letter-spacing: 0; color: var(--tinta); }
.fale__sub { color: var(--tinta2); }

/* =========================================================
   3. A AULA AO VIVO: o cabeçalho (voltar, estado, dúvidas), a abertura com o boneco, a legenda, a barra e a lousa
   Os textos de estado são os do aula-live.js; o js/20 (cadernoObservarEstado) lê o texto e põe `data-cad-estado` no
   painel e a pose no boneco. Tudo direto sobre o papel: nada de cartão atrás, nada de vidro.
   ========================================================= */

/* ---------- Cabeçalho: redondos e o estado com o pontinho ---------- */
.figure-panel__head:has(.aula-live-hud) { gap: 8px; padding: 14px 22px 4px; border-bottom: 0; background: none; justify-content: flex-start; }
.app.fale-ativa .figure-panel__head { gap: 8px; padding: 14px 22px 4px; border-bottom: 0; }
.figure-panel__head > .btn--icon.fale-menu { width: 44px; height: 44px; margin-right: 0; }
.aula-live-hud { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; gap: 8px; justify-content: center; flex-wrap: nowrap; }
.aula-live-hud:has(.aula-live-hud__btn--som) { flex-wrap: wrap; }   /* só o "Ativar som" ganha uma linha própria */
.aula-live-hud__btn--voltar, .aula-replay__hud .aula-live-hud__btn--voltar {
  width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border: 1.5px solid var(--linha2); border-radius: var(--raio-circulo);
  background: transparent; color: var(--tinta);
}
.aula-live-hud__btn--voltar > span, .math-figure__toolbar .aula-live-hud__btn--parar > span {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.aula-live-hud__estado {
  position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; max-width: 100%; height: 44px; margin: 0; padding: 0 6px;
  text-align: center; font-size: 14px; font-weight: 600; color: var(--tinta2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aula-live-hud__estado::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--raio-circulo); background: var(--roxo);
}
/* O texto do estado encolhe com reticências antes de empurrar os botões para fora da tela. */
.aula-live-hud__estado > * { min-width: 0; }
.aula-live-hud__estado { text-overflow: ellipsis; }
/* O pontinho conta o estado: lápis quando a conexão ainda não existe (conectando, erro, fim). */
.figure-panel[data-cad-estado="conectando"] .aula-live-hud__estado::before,
.figure-panel[data-cad-estado="erro"] .aula-live-hud__estado::before,
.figure-panel[data-cad-estado="fim"] .aula-live-hud__estado::before { background: transparent; border: 1.5px solid var(--lapis); box-sizing: border-box; }
.figure-panel[data-cad-estado="vez"] .aula-live-hud__estado::before,
.figure-panel[data-cad-estado="ouvindo"] .aula-live-hud__estado::before { background: var(--verde); }
/* O estado no cabeçalho: até 2 linhas antes das reticências (no celular o texto inteiro quase sempre cabe). */
.aula-live-hud__estado { white-space: normal; height: auto; min-height: 44px; box-sizing: border-box; padding: 13px 8px 13px 22px; line-height: 1.2; text-align: left; overflow-wrap: anywhere; }
.aula-live-hud__estado::before { position: absolute; left: 8px; top: calc(50% - 4px); }
@supports (-webkit-line-clamp: 2) {
  .aula-live-hud__estado { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
.figure-panel.aula-live-total .aula-live-hud__estado { padding: 13px 16px 13px 30px; }
.figure-panel.aula-live-total .aula-live-hud__estado::before { left: 15px; }
/* Nos erros: o professor (o rosto) num cartão de rabisco embaixo da lousa, com o texto inteiro do estado (js/20). */
.app.fale-ativa .figure-panel:has(> .cad-aviso:not([hidden])) { position: relative; }
.cad-aviso {
  position: absolute; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 7;
  display: flex; align-items: center; gap: 12px; box-sizing: border-box; max-width: 560px; margin: 0 auto; padding: 12px 18px 12px 12px;
  background: var(--folha); color: var(--tinta); box-shadow: var(--sombra-folha); pointer-events: none;
}
.cad-aviso[hidden] { display: none; }
.cad-aviso__rosto { flex: 0 0 auto; width: 46px; height: 46px; }
.cad-aviso__txt { margin: 0; font-size: 17px; line-height: 1.3; }
/* As dúvidas guardadas: o balãozinho com o número, em traço. */
.aula-duvidas-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 44px; min-height: 44px; padding: 0 12px; box-sizing: border-box;
  border: 1.5px solid var(--linha2); border-radius: var(--raio-capsula); color: var(--tinta); font-size: 15px; font-weight: 680;
}
.aula-duvidas-chip[hidden] { display: none; }
.aula-duvidas-chip__icone { display: inline-block; width: 18px; height: 18px; font-size: 0; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 72%, 46% 72%, 22% 100%, 22% 72%, 0 72%); }
.aula-duvidas-chip__txt { display: none; }
/* "Ativar som": só quando o navegador bloqueia o áudio; uma cápsula de tinta na linha de baixo do cabeçalho. */
.aula-live-hud__btn.aula-live-hud__btn--som {
  order: 5; flex: 1 0 100%; justify-content: center; width: auto; height: 44px; min-height: 44px; padding: 0 16px; border: 0;
  border-radius: var(--raio-capsula); background: var(--tinta); color: var(--sobre-tinta); font-size: 15px; font-weight: 650; box-shadow: var(--sombra-tinta);
}
.aula-live-hud__btn.aula-live-hud__btn--som > span { display: inline; }
/* O HUD de uma aula de outro professor (o recurso existe no código, atrás de flag): o pontinho na cor dele, como sempre.
   Na matemática (o Facin, o professor de hoje) o HUD não tem data-dominio e nada aparece. */
.aula-live-hud[data-dominio]::before {
  content: ""; flex: 0 0 auto; align-self: center; width: 10px; height: 10px; border-radius: var(--raio-circulo);
  background: var(--cor-professor, var(--roxo)); pointer-events: none;
}

/* ---------- A abertura: só o boneco falante (js/19) com o balão, a foto embaixo; o papel atrás (a folha só entra com a 1ª parte) ---------- */
.figure-panel .math-figure__drawing.aula-live--abertura { background: transparent; border-color: transparent; box-shadow: none; }
.aula-abertura { gap: 8px; justify-content: safe center; overflow-y: auto; background: transparent; color: var(--tinta); }   /* direto sobre o papel */
.aula-abertura > * { flex: 0 0 auto; }
.aula-abertura--boneco { justify-content: flex-start; gap: 10px; overflow: hidden; padding: 6px 14px calc(14px + env(safe-area-inset-bottom)); }
.aula-abertura--boneco > .bq-palco { flex: 1 1 0; min-height: 0; }
.bq-palco { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 100%; max-width: 600px; box-sizing: border-box; }
.bq-fala { --bq-linhas: 4; flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: calc(var(--bq-linhas) * 1.35em + 42px); font-size: 18px; line-height: 1.35; }
.bq-balao {
  position: relative; box-sizing: border-box; width: min(100%, 460px); max-height: 100%; padding: 12px 18px;
  border: 1.5px solid var(--linha2); border-radius: var(--raio-balao); background: var(--folha); box-shadow: var(--sombra-folha); color: var(--tinta);
  font-family: var(--font-giz); font-weight: 400; text-align: left; text-wrap: pretty; animation: cad-balao 260ms var(--ease-saida);
}
.bq-balao::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 15px; height: 15px; box-sizing: border-box;
  background: var(--folha); border-right: 1.5px solid var(--linha2); border-bottom: 1.5px solid var(--linha2); transform: translateX(-50%) rotate(45deg); pointer-events: none;
}
.bq-balao__texto { display: flex; flex-direction: column; justify-content: flex-end; margin: 0; max-height: calc(var(--bq-linhas) * 1.35em); overflow: hidden; }
.bq-balao--rola .bq-balao__texto { -webkit-mask-image: linear-gradient(to bottom, transparent, var(--tinta) 1.5em); mask-image: linear-gradient(to bottom, transparent, var(--tinta) 1.5em); }
.bq-figura { flex: 0 1 430px; min-height: 0; width: 100%; display: flex; align-items: flex-start; justify-content: center; position: relative; }
/* O chão: um fio sob os pés (como no desenho). */
.bq-figura::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2px; height: 1.5px; background: var(--linha2); pointer-events: none; }
.math-figure__drawing .bq {
  position: static; inset: auto; display: block; width: auto; height: 100%; max-height: 430px; aspect-ratio: 260 / 310; overflow: visible; color: var(--tinta);
  fill: none; stroke: currentColor; stroke-width: 5.6; stroke-linecap: round; stroke-linejoin: round;
}
.bq__sombra { fill: currentColor; fill-opacity: .08; stroke: none; }
.bq__lente { stroke-width: 4.2; }
.bq__olho { fill: currentColor; stroke: none; }
.bq__sobrancelha { stroke-width: 3.8; }
.bq__mao { stroke-width: 4.4; }
.bq__dedo { stroke-width: 3.8; }
.bq__boca { stroke-width: 3.8; }
.bq__boca--aberta { fill: color-mix(in srgb, var(--tinta) 88%, transparent); }
/* Os aderecos dos outros professores (js/19) seguem no mesmo traço: um professor só, mas o markup fica. */
.bq__detalhe { stroke-width: 3.4; }
.bq__pelo { stroke-width: 3.2; }
.bq[data-avatar="marie"] .bq__braco .bq__osso { stroke: none; }
.bq__aro { stroke-width: 3; }
.bq__cilios { stroke-width: 2.8; }
.bq__botao { stroke-width: 3; }
.bq__gravata, .bq__laco { fill: var(--cor-professor, var(--tinta)); stroke-width: 3.2; }   /* o recurso de outros professores (atrás de flag): o preenchimento na cor dele */
@keyframes cad-balao { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-height: 700px) { .bq-fala { --bq-linhas: 3; font-size: 16px; } }
@media (min-width: 769px) { .bq-fala { --bq-linhas: 4; font-size: 19px; } }
/* O botão da foto, embaixo do boneco: cápsula de traço. */
.fale__botao.aula-abertura__foto { margin-top: 6px; min-height: 48px; padding: 0 22px; font-size: 15px; color: var(--tinta); }
.fale__botao.aula-abertura__foto[hidden] { display: none; }
/* O risco de lápis dos carregamentos (js/18 põe o markup; js/20 escreve o texto e mostra). */
.aula-abertura__risco { width: min(100%, 520px); margin: 2px auto 0; }
.aula-abertura__risco[hidden] { display: none; }

/* ---------- A legenda (as duas últimas falas): o rosto no lugar de "Professor:", a fala dele em Kalam, a do aluno em --roxo ---------- */
.aula-live-legenda {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; box-sizing: border-box; width: 100%; max-width: 640px; margin: 0 auto;
  padding: 6px 22px; border: 0; border-radius: var(--raio-reto); background: none; box-shadow: none; text-align: left; font-family: var(--font);
}
.aula-live-legenda:empty { visibility: hidden; }
.aula-live-legenda__fala { display: flex; align-items: flex-start; gap: 10px; width: 100%; margin: 0; white-space: normal; overflow: visible; }
.aula-live-legenda__fala--user { font-size: 15px; line-height: 1.4; color: var(--roxo); font-weight: 600; justify-content: center; }
.aula-live-legenda__fala--user strong { font-weight: 700; color: var(--roxo); }
.aula-live-legenda__fala--teacher { font-family: var(--font-giz); font-size: 18px; line-height: 1.3; color: var(--tinta); }
.aula-live-legenda__rosto { flex: 0 0 auto; width: 52px; height: 52px; margin-top: -6px; }
.aula-live-legenda__fala--teacher strong { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Na abertura o professor fala pelo balão: a legenda guarda só a fala do aluno, centralizada, com o cursor decorativo. */
.figure-panel.aula-live-abrindo .aula-live-legenda { align-items: center; min-height: 3.2em; padding: 0 28px; }
.figure-panel.aula-live-abrindo .aula-live-legenda__fala--teacher { display: none; }
.figure-panel.aula-live-abrindo .aula-live-legenda__fala--user { font-size: 19px; line-height: 1.3; text-wrap: balance; max-height: 3.9em; overflow: hidden; }
.figure-panel.aula-live-abrindo .aula-live-legenda__fala--user:last-child::after {
  content: ""; display: inline-block; width: 2px; height: 20px; margin-inline-start: 3px; vertical-align: -3px; background: var(--roxo); animation: cad-cursor 1s steps(1) infinite;
}
@keyframes cad-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- A barra da aula (js/18 põe .barra-aula-live): encerrar à esquerda, a ação do momento no centro ----------
   Na pré-lousa a ação é o microfone ("Segure para falar", 66px no celular e 72 no computador, cheio de tinta, com o anel
   de "ouvindo"); na lousa o código esconde o microfone (id0332/id0340: é a mão que abre a vez) e a ação é LEVANTAR A MÃO.
   Composição (adendos 4 e 5 do Beny): a mão é a ação vital da lousa, então ela fica no centro, como cápsula de traço COM o
   rótulo à vista (nada de ícone que o aluno precise aprender); levantada = o ouro do marcador com o anel duplo; na vez = o
   fio --verde. O desenho punha um microfone no meio da lousa: o código não tem esse botão, então ele não é imitado.
   O encerrar é o redondo com o quadrado em --vermelho. As ferramentas da lousa seguem no markup, escondidas só nesta barra. */
.figure-panel .math-figure__toolbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; width: 100%; max-width: 100%; min-height: 0; padding: 4px 0 2px; }
.math-figure__toolbar.barra-aula-live {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto; align-items: center; justify-content: stretch;
  column-gap: 12px; row-gap: 10px; flex-wrap: nowrap; padding: 6px 22px 10px; box-sizing: border-box;
}
.barra-aula-live > .segmento, .barra-aula-live > .barra-acoes { display: none; }
.barra-aula-live > .aula-live-hud__btn { order: 0; grid-row: 1; }
.math-figure__toolbar .aula-live-hud__btn { padding: 0; justify-content: center; }
/* encerrar */
.barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--parar {
  grid-column: 1; grid-row: 1; justify-self: start; width: 46px; height: 46px; min-height: 46px; border: 1.5px solid var(--linha2); border-radius: var(--raio-circulo);
  background: transparent; color: var(--vermelho);
}
.aula-live-hud__btn--parar svg.icon { width: 14px; height: 14px; }
.aula-live-hud__btn--parar svg.icon rect { fill: currentColor; }
/* microfone (segure para falar, só na pré-lousa) */
.barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--falar {
  grid-column: 2; grid-row: 1; justify-self: center; position: relative; width: 72px; height: 72px; min-height: 72px; min-width: 0; padding: 0; gap: 0;
  border: 0; border-radius: var(--raio-circulo); background: var(--tinta); color: var(--sobre-tinta); box-shadow: var(--sombra-tinta);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;
  transition: background var(--transition), box-shadow var(--transition);
}
.barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--falar[hidden] { display: none; }
.barra-aula-live > .aula-live-hud__btn--falar > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.barra-aula-live > .aula-live-hud__btn--falar svg.icon { width: 30px; height: 30px; flex: 0 0 auto; }
.barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--falar[data-estado="apertado"] { background: var(--tinta2); box-shadow: none; }
.barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--falar[data-estado="ouvindo"] { background: var(--tinta); animation: cad-ouvir 1.8s ease-out infinite; }
@keyframes cad-ouvir { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tinta) 30%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
/* a mão: a cápsula do centro, com o rótulo; largura FIXA para não pular ao trocar de estágio (E146) */
.barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--mao {
  grid-column: 2; grid-row: 1; justify-self: center; order: 0; box-sizing: border-box; position: relative;
  width: 300px; min-width: 0; max-width: 100%; height: 52px; min-height: 52px; padding: 0 20px 0 16px; gap: 10px;
  border: 1.5px solid var(--linha2); border-radius: var(--raio-capsula); background: transparent; color: var(--tinta); box-shadow: none; animation: none; transition: none;
  font-family: var(--font); font-size: 15.5px; font-weight: 650; line-height: 1.15; text-align: center; white-space: normal;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--mao > span { display: block; min-width: 0; }
.barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--mao svg.icon { width: 22px; height: 22px; flex: 0 0 auto; }
.aula-live-hud__btn.aula-live-hud__btn--mao[hidden] { display: none; }
/* se um dia o microfone e a mão aparecerem juntos, a mão vai para a direita (nunca um por cima do outro) */
.barra-aula-live:has(> .aula-live-hud__btn--falar:not([hidden])) > .aula-live-hud__btn.aula-live-hud__btn--mao { grid-column: 3; justify-self: end; width: auto; }
.barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--mao:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--mao[data-estado="levantada"] {
  border-color: var(--marcador); background: var(--marcador); color: var(--marcador-tinta);
  box-shadow: var(--sombra-anel-marcador);
}
.barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--mao[data-estado="vez"] { border-color: var(--verde); color: var(--verde); background: transparent; box-shadow: none; }
/* Fim da aula: "Nova aula ao vivo", sozinha, no centro. */
.barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--nova {
  grid-column: 1 / -1; grid-row: 1; justify-self: center; order: 0; width: auto; height: 52px; min-height: 52px; padding: 0 26px; gap: 8px; border: 0;
  border-radius: var(--raio-capsula); background: var(--tinta); color: var(--sobre-tinta); font-size: 16px; font-weight: 650; box-shadow: var(--sombra-tinta);
}
.aula-live-hud__btn.aula-live-hud__btn--nova > span { display: inline; }
.aula-live-hud__btn.aula-live-hud__btn--nova svg.icon { width: 18px; height: 18px; }
.aula-live-hud__btn.aula-live-hud__btn--nova svg.icon path { fill: currentColor; }
/* Durante a abertura a barra fica à vista (microfone e encerrar): as ferramentas não. */
.figure-panel.aula-live-abrindo .math-figure__toolbar { opacity: 1; pointer-events: auto; }
.figure-panel.aula-live-abrindo .math-figure__toolbar > .segmento, .figure-panel.aula-live-abrindo .math-figure__toolbar > .barra-acoes { display: none; }

/* ---------- A escolha por botões na abertura (id0292) e o "Seguir" (id0298): cápsulas; a 1ª de tinta ---------- */
.aula-escolha { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: min(560px, 100%); }
.aula-escolha > .aula-escolha__botao { flex: 1 1 220px; justify-content: center; min-width: 0; }
.fale__botao.aula-escolha__sim { min-height: 52px; gap: 10px; padding: 0 26px 0 20px; border: 0; background: var(--tinta); color: var(--sobre-tinta); font-size: 17px; font-weight: 650; box-shadow: var(--sombra-tinta); }
.fale__botao.aula-escolha__sim:hover { background: var(--accent-hover); filter: none; }
.fale__botao.aula-escolha__outra { min-height: 52px; padding: 0 24px; font-size: 16px; }
.fale__botao.aula-escolha__sim:disabled, .fale__botao.aula-escolha__outra:disabled { opacity: .6; cursor: default; }
/* tópicos: a alternativa é um rabisco; ligada, a segunda tinta por baixo */
.aula-escolha--multipla > .aula-escolha__topico {
  flex: 1 1 180px; min-height: 48px; padding: 6px 18px; text-align: center; overflow-wrap: anywhere;
  border-radius: var(--raio-rab-a) var(--raio-rab-b) var(--raio-rab-c) var(--raio-rab-d) / var(--raio-rab-b) var(--raio-rab-a) var(--raio-rab-d) var(--raio-rab-c);
}
.fale__botao.aula-escolha__topico--ligado { background: var(--roxo-soft); color: var(--tinta); border-color: var(--roxo); }
.aula-escolha__topico[aria-disabled="true"] { opacity: .5; cursor: default; }
.aula-escolha--continuar { margin: 24px auto 12px; }
.aula-escolha > .aula-escolha__nao-e {
  flex: 0 0 100%; align-self: center; min-height: 44px; margin: 0 auto; padding: 0 14px; border: 0; background: none; color: var(--tinta2);
  font: inherit; font-size: 14px; font-weight: 560; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.aula-escolha > .aula-escolha__nao-e:hover { color: var(--tinta); }
@media (max-width: 640px) {
  .aula-escolha { flex-direction: column; align-items: stretch; }
  .aula-escolha > .aula-escolha__botao { flex: 0 0 auto; width: 100%; }
  .aula-escolha > .aula-escolha__nao-e { flex: 0 0 auto; }
}

/* ---------- A foto da questão (câmera / conferir): a caixa sobre a lousa vira papel ---------- */
.aula-foto { background: var(--papel); color: var(--tinta); }
.aula-foto__estado { font-family: var(--font-giz); font-size: 17px; color: var(--tinta); }
.aula-foto__palco { border-radius: var(--raio-superficie); overflow: hidden; }
.aula-foto__acoes .fale__botao { min-height: 48px; }

/* ---------- A LOUSA: a folha (de dia, quadriculada; à noite, a ardósia), toda em Kalam ---------- */
.figure-panel .math-figure__drawing {
  border: 1px solid var(--linha); border-radius: var(--raio-folha); box-shadow: var(--sombra-folha);
  background-color: var(--folha);
  background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px), var(--grao);
  background-size: 22px 22px, 22px 22px, 4px 4px, 7px 7px;
}
/* A lousa inteira em Kalam, inclusive a matemática (decisão do Beny, §2.2): a família composta do CMU vira a letra de mão.
   O CMU fica só como reserva de glifo (depois da Kalam na pilha). Só tipografia: o motor de página não muda. */
.figure-panel__body, .figure-card__preview { --font-mat: 'Kalam', 'Playpen Sans', 'Caveat', 'Facin Mat', 'CMU Serif', cursive; --font-mono: var(--font-giz); }
.figure-panel__body .fig-solution, .figure-panel__body .aula-live-lousa, .figure-panel__body .fig-balao { font-family: var(--font-giz); }
.figure-panel__body .fig-solution { font-size: 20px; letter-spacing: .1px; text-shadow: none; }
.figure-panel__body .aula-live-lousa .fig-solution__line { text-shadow: none; }
/* A parte que o professor está explicando (2026-11-01, proposta do Beny): um cartão roxo arredondado, um pouco mais
   translúcido que no desenho, no lugar do fio à esquerda. Só pinta, como o realce (B2): o fundo sai 10px para fora pela
   sombra e o contorno é o outline, então nada muda de lugar nem de tamanho no motor de página. A pergunta e o realce ficam com o deles. */
.aula-live-lousa .aula-parte--nova:not(.aula-parte--pergunta_ao_aluno):not(.aula-parte--pergunta_retorica):not(.aula-parte--realce) {
  --nova-fundo: color-mix(in srgb, var(--roxo) 7%, transparent);
  border-left-color: transparent; border-radius: 8px; background-color: var(--nova-fundo);
  box-shadow: 0 0 0 10px var(--nova-fundo); outline: 1px solid color-mix(in srgb, var(--roxo) 45%, transparent); outline-offset: 10px;
  scroll-margin: 16px;
}
/* O cabeçalho do painel fora da aula (o exemplo, o replay): sem fundo, sem fio. */
.app.fale-ativa .figure-panel__head { background: none; border-bottom: 0; }
.figure-panel__title { font-size: 15px; font-weight: 620; color: var(--tinta); }

/* As ferramentas da lousa (js/15): redondos de traço numa fileira; o marcador é o único ouro; a escolhida, cheia de tinta.
   Todas à vista na mesma fileira (Mãozinha, Lápis, Borracha, Marcador, Organizar · Cores, Reiniciar, Limpar, Baixar, Foto). */
.figure-panel .math-figure__toolbar .segmento--lousa { order: 1; width: auto; gap: 8px; padding: 0; border: 0; background: none; box-shadow: none; border-radius: var(--raio-reto); }
.segmento--lousa .segmento__polegar { display: none; }
.segmento--lousa .segmento__item {
  position: relative; z-index: 1; width: 46px; height: 46px; min-width: 46px; padding: 0; border: 1.5px solid var(--linha2); border-radius: var(--raio-circulo);
  background: transparent; color: var(--tinta); filter: none; animation: none; box-shadow: none;
}
.segmento--lousa .segmento__item[aria-checked="true"] { background: var(--tinta); color: var(--sobre-tinta); border-color: var(--tinta); }
.segmento--lousa > .segmento__item[data-valor="marcador"] { background: var(--marcador); color: var(--marcador-tinta); border-color: var(--marcador); }
.segmento--lousa > .segmento__item[data-valor="marcador"][aria-checked="true"] { box-shadow: var(--sombra-anel-marcador); }
.segmento--lousa > .segmento__item[data-valor="marcador"]::after { display: none; }
.barra-marcador__faisca { display: none; }
.figure-panel .math-figure__toolbar .barra-acoes { order: 3; width: auto; flex: 0 0 auto; gap: 8px; padding: 0; border: 0; background: none; box-shadow: none; border-radius: var(--raio-reto); }
.barra-acoes .barra-acao { width: 46px; height: 46px; border: 1.5px solid var(--linha2); border-radius: var(--raio-circulo); color: var(--tinta); background: transparent; }
.barra-acoes .barra-acao:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.barra-cor:not(.barra-cor--visivel) { display: none; }
.math-figure__toolbar .segmento__item svg.icon, .math-figure__toolbar .barra-acao svg.icon { width: 18px; height: 18px; }

/* A lousa em TELA CHEIA (id0341, .aula-live-total): o cabeçalho e a barra flutuam sobre a folha; a folha ganha o painel,
   com uma margem fina de papel. O motor (aula-pagina.js) mede o cabeçalho e a barra (--pg-sobre-topo/base). */
.figure-panel.aula-live-total { position: relative; }
.figure-panel.aula-live-total > .figure-panel__head:has(.aula-live-hud) { position: absolute; top: 0; left: 0; right: 0; z-index: 6; pointer-events: none; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 4px; }
.figure-panel.aula-live-total > .figure-panel__head > *, .figure-panel.aula-live-total .aula-live-hud > * { pointer-events: auto; }
.figure-panel.aula-live-total .aula-live-hud { pointer-events: none; }
.figure-panel.aula-live-total .figure-panel__body { padding: 0; gap: 0; position: relative; }
.figure-panel.aula-live-total .math-figure__drawing { border-radius: var(--raio-reto); border: 0; box-shadow: none; }
.figure-panel.aula-live-total .math-figure__toolbar.barra-aula-live { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; width: auto; max-width: none; box-sizing: border-box; padding: 0 22px calc(14px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.figure-panel.aula-live-total .barra-aula-live > * { pointer-events: auto; }
.figure-panel.aula-live-total .aula-live-legenda { position: absolute; left: 12px; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 5; max-width: 640px; margin: 0 auto; }
/* os botões que flutuam sobre a folha ganham o papel atrás e uma sombra levíssima (nada de vidro) */
.figure-panel.aula-live-total > .figure-panel__head .redondo, .figure-panel.aula-live-total > .figure-panel__head .fale-menu,
.figure-panel.aula-live-total > .figure-panel__head .aula-live-hud__btn--voltar, .figure-panel.aula-live-total .aula-live-hud__estado,
.figure-panel.aula-live-total .aula-duvidas-chip, .figure-panel.aula-live-total .barra-aula-live > .aula-live-hud__btn--parar,
.figure-panel.aula-live-total .barra-aula-live > .aula-live-hud__btn--mao {
  background-color: var(--papel); box-shadow: var(--sombra-sobre-lousa);
}
.figure-panel.aula-live-total .aula-live-hud__estado { border-radius: var(--raio-cartao); }
.figure-panel.aula-live-total .barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--mao[data-estado="levantada"] { background-color: var(--marcador); }
.figure-panel.aula-live-total .fig-board.aula-live-lousa.aula-pagina { padding: calc(var(--pg-topo) + var(--pg-sobre-topo, 0px)) var(--pg-borda) calc(var(--pg-sobre-base, 0px) + 24px); }

/* ---------- Celular (e celular deitado): a lousa grande, uma linha de botões, a legenda só na abertura ---------- */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .aula-live-hud__btn--voltar, .math-figure__toolbar .aula-live-foto, .math-figure__toolbar .barra-acao--reiniciar, .math-figure__toolbar .barra-acao--limpar { display: none; }
  .figure-panel .aula-live-legenda { display: none; }
  .figure-panel.aula-live-abrindo .aula-live-legenda { display: flex; }
  .figure-panel__head:has(.aula-live-hud) { padding: 12px 16px 2px; }
  .figure-panel__head:has(.aula-live-hud) .figure-panel__title { display: none; }
  .figure-panel .math-figure__toolbar { flex-wrap: nowrap; gap: 6px; padding: 3px 6px 5px; }
  .segmento--lousa .segmento__item { width: 44px; height: 44px; min-width: 44px; }
  .barra-acoes .barra-acao { width: 44px; height: 44px; }
  .math-figure__toolbar .segmento__item svg.icon, .math-figure__toolbar .barra-acao svg.icon { width: 16px; height: 16px; }
  /* No celular: encerrar no canto, a ação no centro; a mão ocupa o que sobra entre os dois (o rótulo pode ir a 2 linhas). */
  .math-figure__toolbar.barra-aula-live { column-gap: 10px; padding: 6px 16px 10px; }
  .barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--mao { width: min(260px, calc(100vw - 144px)); padding: 0 14px 0 12px; gap: 8px; font-size: 14.5px; }
  .barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--falar { width: 66px; height: 66px; min-height: 66px; }
  .barra-aula-live > .aula-live-hud__btn--falar svg.icon { width: 26px; height: 26px; }
  .barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--nova { height: 48px; min-height: 48px; padding: 0 20px; font-size: 15px; }
  .figure-panel__head > .aula-live-hud__btn--voltar { display: inline-flex; }
  .figure-panel.aula-live-abrindo .aula-live-legenda { gap: 2px; min-height: 0; margin: 0 auto; padding: 0 20px; }
  .figure-panel.aula-live-abrindo .aula-live-legenda__fala--user { font-size: 16px; line-height: 1.25; max-height: 2.5em; }
  .figure-panel.aula-live-abrindo .aula-live-legenda__fala--user:last-child::after { height: 16px; vertical-align: -2px; }
  .aula-live-legenda__fala--teacher { font-size: 16px; }
}
.figure-panel__head > .aula-live-hud__btn--voltar { flex: 0 0 auto; }
@media (max-width: 380px) {
  .barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--nova { padding: 0 14px; font-size: 14px; }
}

/* =========================================================
   4. A DEMONSTRAÇÃO (a conversa com o visitante) e a AULA GRAVADA (o replay)
   ========================================================= */
.aula-demo__opcoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fale__botao.aula-demo__sim { min-height: 52px; gap: 10px; padding: 0 26px 0 20px; border: 0; background: var(--tinta); color: var(--sobre-tinta); font-size: 17px; font-weight: 650; box-shadow: var(--sombra-tinta); }
.fale__botao.aula-demo__sim:hover { background: var(--accent-hover); filter: none; }
.fale__botao.aula-demo__nao { min-height: 52px; padding: 0 24px; font-size: 16px; color: var(--tinta); }
.fale__botao.aula-demo__sim:disabled, .fale__botao.aula-demo__nao:disabled { opacity: .6; cursor: default; }
.aula-demo__som { margin-top: 8px; }
.figure-panel.aula-demo .figure-panel__head { justify-content: flex-end; gap: 8px; padding: 12px 16px 0; border-bottom: 0; background: none; }
.figure-panel.aula-demo .figure-panel__head > :not(.aula-demo__pular):not(.aula-demo__estado) { display: none; }
.figure-panel.aula-demo .math-figure__toolbar, .figure-panel.aula-demo .aula-live-legenda { display: none; }
.aula-live-hud__estado.aula-demo__estado--quieto { visibility: hidden; }
.aula-demo__estado { flex: 1 1 auto; justify-content: flex-start; }
.fale__botao.aula-demo__pular { min-height: 44px; padding: 0 20px; font-size: 15px; color: var(--tinta); }

/* O replay: a mesma lousa, a legenda com o rosto, a barra com a posição e os botões em traço; a barra de ferramentas completa. */
.aula-replay { flex: 0 0 auto; width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.aula-replay__legenda {
  display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; min-height: 3.2em; padding: 6px 22px; border: 0; border-radius: var(--raio-reto); background: none; box-shadow: none;
  font-family: var(--font-giz); font-size: 17px; line-height: 1.35; color: var(--tinta); text-align: left;
}
.aula-replay__legenda:empty { visibility: hidden; }
.aula-replay__legenda strong { font-weight: 700; }
.aula-replay__legenda .aula-live-legenda__fala { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.aula-replay__legenda .aula-live-legenda__fala--user { justify-content: flex-start; }
.aula-replay__fala-txt { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.aula-replay__legenda .aula-live-legenda__rosto { width: 44px; height: 44px; margin-top: -4px; }
.aula-replay__legenda .aula-live-legenda__fala--user { font-family: var(--font); font-size: 15px; color: var(--roxo); }
.aula-replay__hud .aula-live-hud__btn--voltar { display: inline-flex; }
.aula-live-hud.aula-replay__hud { justify-content: flex-start; }
.aula-replay__barra { display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; padding: 6px 22px 10px; border: 0; border-radius: var(--raio-reto); background: none; box-shadow: none; }
.aula-replay__linha { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aula-replay__linha--botoes { justify-content: center; gap: 10px; }
.aula-replay__tempo { flex: 0 0 auto; min-width: 3.2ch; font-size: 13px; font-weight: 600; color: var(--tinta2); font-variant-numeric: tabular-nums; }
.aula-replay__tempo--total { text-align: right; }
.aula-replay__pos { flex: 1 1 auto; min-width: 0; height: 28px; margin: 0; background: transparent; cursor: pointer; accent-color: var(--tinta); }
.aula-replay__pos:focus-visible, .aula-replay__btn:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
.aula-replay__btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 56px; height: 44px; padding: 0 14px;
  border: 1.5px solid var(--linha2); border-radius: var(--raio-capsula); background: transparent; color: var(--tinta); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.aula-replay__btn:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); border-color: var(--linha2); }
.aula-replay__btn--toca { width: 56px; min-width: 56px; height: 56px; padding: 0; border: 0; border-radius: var(--raio-circulo); background: var(--tinta); color: var(--sobre-tinta); box-shadow: var(--sombra-tinta); }
.aula-replay__btn--toca:hover { background: var(--accent-hover); }
.aula-replay__btn--toca svg.icon { width: 22px; height: 22px; }
.aula-replay__btn--veloz { min-width: 56px; }
.aula-live-lousa .aula-resp[inert] { opacity: .92; }
@media (max-width: 640px) {
  .aula-replay { gap: 6px; }
  .aula-replay__legenda { padding: 4px 16px; font-size: 15px; min-height: 3em; }
  .aula-replay__barra { padding: 4px 16px 8px; }
  .aula-replay__btn { min-width: 48px; padding: 0 10px; font-size: 13px; }
  .aula-replay__btn--toca { width: 52px; min-width: 52px; height: 52px; }
}
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .app.nav-conta .gravacoes { display: none; }
}

/* =========================================================
   5. ENTRAR, CRIAR CONTA, CÓDIGO, BLOQUEIOS, PRIVACIDADE, 2FA
   O overlay é o papel (opaco: computador de escola); o conteúdo é um cartão de papel centralizado no computador e a
   tela inteira no celular. Campos sem caixa: rótulo pequeno em cima, linha de 1,5px embaixo (--roxo com foco).
   Campos, textos, ordem e validações são os de sempre.
   ========================================================= */
.bloqueio-overlay, .bloqueio-overlay--login {
  align-items: flex-start; justify-content: center; padding: clamp(10px, 4vh, 40px) 16px;
  background-color: var(--papel); background-image: var(--grao); background-size: 5px 5px, 9px 9px; background-position: 0 0, 2px 3px;
}
.bloqueio-caixa {
  --pad-y: 36px; --pad-x: 36px; --ficha: var(--folha); --campo-bg: transparent;
  box-sizing: border-box; width: min(460px, 100%); min-height: 0; margin: auto; gap: 20px; padding: var(--pad-y) var(--pad-x);
  background-color: var(--folha);
  background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px), var(--grao);
  background-size: 22px 22px, 22px 22px, 4px 4px, 7px 7px;
  border: 1px solid var(--linha); border-radius: var(--raio-folha); box-shadow: var(--sombra-folha); animation: none;
}
/* A marca antiga do cartão (o tile e a máscara da carinha) sai: o rosto entra pelo js/08 (.bloqueio-caixa__rosto). */
.bloqueio-caixa::before, .bloqueio-caixa::after { content: none; display: none; }
.bloqueio-caixa__rosto { order: -1; width: 52px; height: 52px; margin: 0 0 -6px; flex: 0 0 auto; }
.bloqueio-caixa__rosto[hidden] { display: none; }
.bloqueio-caixa__boneco { order: -1; width: 120px; height: auto; aspect-ratio: 260 / 310; margin: 0 0 -4px; flex: 0 0 auto; }
/* "Voltar sem entrar" / "Voltar": cápsula de traço com a seta, em cima. */
.bloqueio-caixa > .auth-form__voltar {
  display: flex; align-items: center; align-self: flex-start; box-sizing: border-box; height: 44px; min-height: 44px; margin: 0; padding: 0 16px 0 10px;
  border: 1.5px solid var(--linha2); border-radius: var(--raio-capsula); background: transparent; color: var(--tinta); font-size: 15px; font-weight: 600; letter-spacing: 0; text-decoration: none;
}
.bloqueio-caixa > .auth-form__voltar:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.bloqueio-caixa > .auth-form__voltar[hidden] { display: none; }
.bloqueio-caixa > .auth-form__voltar::before { content: ""; width: 8px; height: 8px; margin: 0 6px 0 4px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.bloqueio-caixa > .auth-form__voltar { order: -2; }   /* em cima, venha de onde vier no markup (o js/09 o põe por último) */
.bloqueio-caixa .auth-form__voltar { min-height: 44px; }
.bloqueio-caixa > .auth-form-wrap, .bloqueio-caixa > .bloqueio-msg, .bloqueio-caixa > .privacidade { width: 100%; margin-block: 0; }
.bloqueio-msg__titulo, .auth-form__titulo, .privacidade h2 {
  margin: 0 0 12px; font-family: var(--font-giz); font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: 0; color: var(--tinta); text-wrap: balance;
}
.auth-form__titulo { margin-bottom: 6px; }
.auth-form__subtitulo { margin: -4px 0 10px; font-size: 16px; line-height: 1.45; color: var(--tinta2); }
.auth-form__subtitulo[hidden] { display: none; }
.auth-form { gap: 14px; }
.auth-form__dica { margin-bottom: 8px; color: var(--tinta2); }
.bloqueio-msg__texto, .privacidade p { font-size: 16px; line-height: 1.5; color: var(--tinta2); }
/* Campos sem caixa. */
.auth-form__campo { gap: 4px; font-size: 13.5px; font-weight: 650; color: var(--tinta); }
.auth-form__campo input, .auth-form__campo select {
  min-height: 46px; padding: 8px 2px; border: 0; border-bottom: 1.5px solid var(--linha2); border-radius: var(--raio-reto); background: transparent;
  color: var(--tinta); font-size: 17px; box-shadow: none;
}
.auth-form__campo input:focus, .auth-form__campo select:focus { border-color: var(--roxo); box-shadow: none; outline: none; }
.auth-form__campo input::placeholder { color: var(--lapis); }
.privacidade__nascimento[hidden] { display: none; }   /* E2: o css/03 dá display:grid ao bloco e o login o esconde por [hidden] */
.privacidade__aceite { align-items: flex-start; min-height: 44px; color: var(--tinta); }
.privacidade__aceite input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--tinta); }
.privacidade__aviso { border: 1px solid var(--linha2); background: var(--roxo-soft); color: var(--tinta); border-radius: var(--raio-controle); }
.auth-form__erro { color: var(--vermelho); }
.auth-form__botao { margin-top: 4px; }
/* Entrar → "ou" → Google (só a marca) → "Não tem conta? Criar uma". */
.auth-form .botao-google { position: relative; margin-top: 36px; min-height: 48px; border-radius: var(--raio-capsula); font-family: var(--font); font-weight: 600; }
.auth-form .botao-google::before {
  content: "ou" / ""; position: absolute; left: 0; right: 0; top: -27px; height: 16px; pointer-events: none;
  color: var(--lapis); font-size: 13px; line-height: 16px; text-align: center; font-family: var(--font);
  background: linear-gradient(var(--linha), var(--linha)) left center / calc(50% - 22px) 1px no-repeat, linear-gradient(var(--linha), var(--linha)) right center / calc(50% - 22px) 1px no-repeat;
}
.auth-form .botao-google[hidden] { display: none; }
.auth-form > .auth-form__alternar { align-self: center; min-height: 44px; margin-top: 2px; font-size: 15px; font-weight: 600; text-align: center; color: var(--tinta2); }
.auth-form__alternar, .auth-form__recuperacao { min-height: 44px; color: var(--roxo); }
.auth-form__alternar:hover, .auth-form__recuperacao:hover { color: var(--tinta); }

/* Telas de configuração (2FA, privacidade): os códigos em mono, a chave num rabisco, o QR com fundo claro. */
.config-2fa__qr { box-sizing: content-box; padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio-superficie); }
.config-2fa__abrir { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--roxo); }
.config-2fa__chave { display: inline-block; padding: 12px 14px; border: 1.5px solid var(--linha2); border-radius: var(--raio-controle); background: transparent; color: var(--tinta); font-family: var(--font-mono); font-size: 16px; letter-spacing: .06em; }
.config-2fa__codigos {
  padding: 16px 20px 16px 40px; border: 1.5px solid var(--linha2); background: transparent; color: var(--tinta);
  border-radius: var(--raio-rab-a) var(--raio-rab-b) var(--raio-rab-c) var(--raio-rab-d) / var(--raio-rab-b) var(--raio-rab-a) var(--raio-rab-d) var(--raio-rab-c);
  font-family: var(--font-mono); font-size: 16px; letter-spacing: .04em;
}
.config-2fa__codigos li { padding: 4px 0; }
.config-2fa__codigos li::marker { color: var(--lapis); }
.bloqueio-msg__acoes { gap: 10px; }
.bloqueio-msg > .acao-primaria, .bloqueio-msg__acoes > .acao-primaria { display: flex; width: 100%; }
.bloqueio-msg > .acao-primaria { margin-top: 20px; }
.config-2fa__desligar, .config-privacidade__revogar { color: var(--vermelho); }
/* "Retirar o aceite…" e "Desligar": ações de verdade (e sérias), então cápsula de traço em vermelho, não link solto. */
.bloqueio-caixa .auth-form__alternar.config-2fa__desligar, .bloqueio-caixa .auth-form__alternar.config-privacidade__revogar {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 6px 0 0; padding: 0 18px; box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--vermelho) 55%, transparent); border-radius: var(--raio-capsula); background: transparent;
  color: var(--vermelho); font-size: 15px; font-weight: 650; text-decoration: none; text-align: center;
}
.bloqueio-caixa .auth-form__alternar.config-2fa__desligar[hidden], .bloqueio-caixa .auth-form__alternar.config-privacidade__revogar[hidden] { display: none; }
.config-privacidade__confirmar { display: grid; gap: 10px; width: 100%; padding: 14px; border: 1.5px solid var(--linha2); border-radius: var(--raio-rab-a) var(--raio-rab-b) var(--raio-rab-c) var(--raio-rab-d) / var(--raio-rab-b) var(--raio-rab-a) var(--raio-rab-d) var(--raio-rab-c); }

/* "Verificando sessão…" (o véu): o rosto, "Só um instante…" na letra do professor e o risco de lápis. */
.sessao-veu { flex-direction: column; gap: 10px; background-color: var(--papel); background-image: var(--grao); background-size: 5px 5px, 9px 9px; }
.sessao-veu::before { content: none; display: none; }
.sessao-veu__rosto { width: 64px; height: 64px; margin-bottom: 4px; }
.sessao-veu__fala { margin: 0; font-family: var(--font-giz); font-size: 22px; font-weight: 700; color: var(--tinta); }
.sessao-veu__texto.cad-risco { width: min(260px, 80vw); justify-content: center; color: var(--lapis); font-size: 13.5px; }
.sessao-veu__texto.cad-risco .cad-risco__traco { flex: 0 0 auto; width: 36px; }
.sessao-veu__demora { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; color: var(--tinta2); }

/* Aviso de conta: uma cápsula de papel. */
.aviso-conta { padding: 6px 6px 6px 20px; border: 1.5px solid var(--linha2); border-radius: var(--raio-cartao); background: var(--folha); color: var(--tinta); box-shadow: var(--sombra-folha); }
.aviso-conta__fechar { min-width: 44px; min-height: 44px; border-radius: var(--raio-circulo); }

/* Celular: o login ocupa a tela toda, direto sobre o papel. */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .bloqueio-overlay, .bloqueio-overlay--login { padding: 0; }
  .bloqueio-caixa {
    --pad-y: 54px; --pad-x: 24px; width: min(480px, 100%); min-height: 100%; margin: 0 auto;
    padding: var(--pad-y) var(--pad-x) calc(30px + env(safe-area-inset-bottom)); background: none; border: 0; border-radius: var(--raio-reto); box-shadow: none;
  }
  .aviso-conta { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   6. PLANOS e PERFIL: um plano só, o boneco no cartão, o preço com a passada do marcador
   js/08 abrirPlanos monta tudo; os números vêm de GET /api/planos. O cartão é .folha centralizado no painel (computador)
   e a folha que sobe de baixo (celular).
   ========================================================= */
.planos-overlay { align-items: center; padding: clamp(10px, 3vw, 40px); background: var(--veu-folha); }
.planos {
  position: relative; box-sizing: border-box; width: min(1100px, 100%); margin-block: auto; padding: clamp(18px, 2.4vw, 32px);
  background-color: var(--folha);
  background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px), var(--grao);
  background-size: 22px 22px, 22px 22px, 4px 4px, 7px 7px;
  border: 1px solid var(--linha); border-radius: var(--raio-folha); box-shadow: var(--sombra-folha);
}
.planos::before { content: none; }
.planos__topo { padding-bottom: 0; border-bottom: 0; align-items: flex-start; }
.planos__titulo { font-family: var(--font-giz); font-size: 30px; font-weight: 700; letter-spacing: 0; color: var(--tinta); }
.planos__topo--com-motivo .planos__titulo { font-family: var(--font); font-size: 14px; font-weight: 620; color: var(--tinta2); }
.planos__topo--com-motivo .planos__titulo::before { content: none; }
.planos__fechar { width: 44px; height: 44px; border: 1.5px solid var(--linha2); color: var(--tinta); font-size: 1.5rem; }
.planos__fechar:hover { color: var(--tinta); border-color: var(--linha2); background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.planos__motivo { margin: 6px 0 0; max-width: 26ch; font-family: var(--font-giz); font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: 0; color: var(--tinta); }
.planos__grade { gap: 14px; margin-top: 22px; background: none; border: 0; border-radius: var(--raio-reto); }
.planos__grade > .planos__card, .planos__grade > .planos__card:first-child, .planos__grade > .planos__card:last-child { border-radius: var(--raio-cartao); }
.planos__card { position: relative; overflow: hidden; padding: 20px 22px 22px; background: transparent; border: 1.5px solid var(--linha2); container-type: inline-size; }
.planos__ordem { display: none; }
.planos__cab { position: absolute; top: 16px; right: 16px; margin: 0; }
.planos__card:has(.planos__selo) .planos__nome { padding-right: 6.5rem; }
@container (max-width: 329px) {
  .planos__cab { position: static; margin: 0 0 10px; }
  .planos__card:has(.planos__selo) .planos__nome { padding-right: 0; }
}
.planos__selo { padding: 5px 12px; border: 1.5px solid var(--linha2); border-radius: var(--raio-capsula); background: transparent; color: var(--tinta); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.planos__card--destaque .planos__selo { color: var(--selo-destaque); background: var(--tinta); border-color: var(--tinta); }
.planos__nome { font-family: var(--font-giz); font-size: 24px; font-weight: 700; letter-spacing: 0; color: var(--tinta); }
.planos__frase { margin-top: 6px; font-size: 15px; color: var(--tinta2); }
.planos__qtd { margin-top: 16px; gap: 2px 12px; }
.planos__num { font-family: var(--font-giz); font-size: clamp(48px, 5vw, 64px); font-weight: 700; letter-spacing: 0; color: var(--tinta); }
.planos__unidade { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--tinta2); }
.planos__itens { gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 15px; line-height: 1.35; color: var(--tinta); }
.planos__itens li { grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: center; position: relative; }
.planos__itens li::before { content: ""; width: 22px; height: 22px; border-radius: var(--raio-circulo); border: 1.5px solid var(--linha2); box-sizing: border-box; background: none; }
.planos__itens li::after { content: ""; position: absolute; left: 8px; top: calc(50% - 5px); width: 5px; height: 9px; border: solid var(--tinta); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.planos__preco { margin-top: 18px; font-family: var(--font-giz); font-size: 26px; font-weight: 700; color: var(--tinta); }
.planos__preco .marca { font-size: 30px; }
.planos__preco small, .planos__preco-nota { font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--tinta2); }
.planos__aviso { margin-top: 10px; font-size: 13px; line-height: 1.45; letter-spacing: 0; color: var(--tinta2); text-align: center; }
.planos-overlay .planos__cta { margin-top: auto; }
.planos-overlay .planos__itens + .planos__cta, .planos-overlay .planos__preco + .planos__cta { margin-top: 18px; }
.planos-overlay .planos__card:not(.planos__card--destaque) .acao-primaria.planos__cta { min-height: 48px; border: 1.5px solid var(--linha2); background: none; color: var(--tinta); box-shadow: none; font-size: 16px; }
.planos-overlay .planos__card:not(.planos__card--destaque) .acao-primaria.planos__cta:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); filter: none; }
.planos__grade--unico { grid-template-columns: minmax(0, 1fr); }
.planos:has(.planos__grade--unico) { width: min(560px, 100%); }
/* O cartão em destaque NÃO é mais cheio (o 03/08 pintavam o texto dele com --on-accent, para o fundo de cor): no caderno ele é
   papel com a borda de tinta, então o texto volta à tinta. */
.planos__card--destaque .planos__cab, .planos__card--destaque .planos__frase, .planos__card--destaque .planos__unidade,
.planos__card--destaque .planos__aviso, .planos__card--destaque .planos__arrependimento { color: var(--tinta2); }
.planos__card--destaque .planos__itens { color: var(--tinta); border-top-color: var(--linha); }
.planos__card--destaque .planos__itens li::before { color: inherit; }
.planos__card--destaque .planos__preco { color: var(--tinta); }
/* O destaque (o plano completo) no meio dos três: a borda de tinta. */
.planos__grade > .planos__card--destaque { border-color: var(--tinta); border-width: 2px; }
.planos__card--destaque::before, .planos__card--destaque::after, .planos__card--destaque .planos__nome::after, .planos__card--destaque .planos__qtd::after,
.planos__card--destaque[data-plano="assinante"] .planos__nome::before { content: none; display: none; animation: none; }

/* A VITRINE (quem não assina vê um plano só): o boneco explica no cartão, o balão, a manchete na letra dele com "ao vivo" na
   segunda tinta, as linhas do que o plano tem (os 3 destaques e as fichinhas, como existem no js/08), o preço marcado e a
   única cápsula cheia. */
.planos--vitrine { --vit-pad: clamp(22px, 5vw, 32px); padding: var(--vit-pad); overflow: visible; isolation: isolate; }
.planos--vitrine::after { content: none; }
.planos--vitrine .planos__topo { align-items: center; }
.planos--vitrine .planos__titulo { display: none; }
.planos--vitrine .planos__motivo { max-width: none; margin: 10px 0 0; font-size: 17px; font-weight: 600; color: var(--tinta2); font-family: var(--font); }
.planos--vitrine .planos__grade { margin-top: 10px; }
.planos--vitrine .planos__grade > .planos__card--destaque { padding: 0; overflow: visible; background: none; border: 0; box-shadow: none; }
.planos__vitrine-boneco { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; }
.planos__vitrine-boneco .cad-bq { flex: 0 0 auto; width: 110px; height: auto; aspect-ratio: 260 / 310; }
.planos__vitrine-boneco .cad-balao { align-self: flex-start; margin-top: 8px; max-width: 240px; font-size: 16px; }
.planos__vitrine-boneco .cad-balao::after { left: -9px; bottom: auto; top: 22px; transform: rotate(135deg); }
.planos--vitrine .planos__nome { max-width: 16ch; margin: 0; padding: 0; font-size: clamp(32px, 7vw, 40px); line-height: 1.08; text-wrap: balance; }
.planos__realce { color: var(--roxo); }
.planos__destaques { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.planos__destaque { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 4px 0; border: 0; background: none; }
.planos__destaque-icone { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--linha2); border-radius: var(--raio-circulo); background: none; color: var(--tinta); box-shadow: none; }
.planos__destaque-icone .icon { width: 18px; height: 18px; }
.planos__destaque-texto { display: block; min-width: 0; font-size: 16px; line-height: 1.3; color: var(--tinta); }
.planos__destaque-texto strong { font-family: var(--font); font-size: 16px; font-weight: 700; color: var(--tinta); }
.planos__destaque-texto strong::after { content: " · "; font-weight: 500; color: var(--lapis); }
.planos__destaque-texto span { font-size: 16px; color: var(--tinta2); text-transform: lowercase; }
.planos--vitrine .planos__itens { display: block; margin: 14px 0 0; padding: 0; border-top: 0; list-style: none; font-size: 14.5px; color: var(--tinta2); }
.planos--vitrine .planos__itens li { display: inline; position: static; padding: 0; border: 0; background: none; font-size: 14.5px; font-weight: 500; }
.planos--vitrine .planos__itens li::after { content: " · "; position: static; left: auto; top: auto; width: auto; height: auto; border: 0; transform: none; }
.planos--vitrine .planos__itens li:last-child::after { content: none; }
.planos--vitrine .planos__itens li::before { content: none; }
.planos--vitrine .planos__preco { margin-top: 18px; text-align: left; }
.planos-overlay .planos--vitrine .acao-primaria.planos__cta { min-height: 56px; font-size: 17px; font-weight: 700; }
.planos--vitrine .planos__aviso { text-align: center; }
@media (min-width: 769px) and (min-height: 501px) { .planos.planos--vitrine { width: min(600px, 100%); } }

/* "Quem vai pagar?": a mesma folha, os três caminhos em cápsulas. */
.planos__adulto { max-width: 560px; margin: 24px auto 0; }
.planos__adulto h3 { margin: 0 0 10px; font-family: var(--font-giz); font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: 0; color: var(--tinta); }
.planos__adulto p { font-size: 16px; color: var(--tinta2); }
.planos__adulto-acoes { gap: 12px; margin-top: 20px; }
.planos__adulto-acoes button { min-height: 52px; }
.planos__adulto > .acao-secundaria { margin-top: 12px; }
.planos__link { min-height: 46px; border: 0; border-bottom: 1.5px solid var(--linha2); border-radius: var(--raio-reto); background: transparent; color: var(--tinta); }
.planos__erro { color: var(--vermelho); }

/* Perfil (id0339): avatar em traço, nome, os dados num bloco de papel e as ações; a Assinatura abaixo. */
.perfil { display: grid; gap: 16px; margin-top: 18px; }
.perfil__cab { display: flex; align-items: center; gap: 14px; min-width: 0; }
.perfil__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border: 1.5px solid var(--linha2); border-radius: var(--raio-circulo); background: transparent; color: var(--tinta); font-size: 24px; font-weight: 700; }
.perfil__textos { display: grid; gap: 2px; min-width: 0; }
.perfil__nome { font-family: var(--font-giz); font-size: 26px; font-weight: 700; letter-spacing: 0; overflow-wrap: anywhere; color: var(--tinta); }
.perfil__usuario { color: var(--tinta2); font-size: 15px; overflow-wrap: anywhere; }
.perfil__titulo { margin: 8px 0 0; font-family: var(--font-giz); font-size: 22px; font-weight: 700; letter-spacing: 0; color: var(--tinta); }
.perfil__dados { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin: 0; padding: 14px 16px; background: transparent; border: 1.5px solid var(--linha2); border-radius: var(--raio-cartao); font-size: 15px; }
.perfil__dados dt { color: var(--tinta2); }
.perfil__dados dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; color: var(--tinta); }
.perfil__acoes { display: grid; gap: 0; }
.perfil__acoes .perfil__acao {
  justify-content: space-between; min-height: 52px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--linha); border-radius: var(--raio-reto); background: none;
  font-size: 16px; font-weight: 600; color: var(--tinta); text-align: left;
}
.perfil__acoes .perfil__acao:hover { background: none; }
.perfil__acoes .perfil__acao::after { display: block; content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--lapis); border-bottom: 1.5px solid var(--lapis); transform: rotate(-45deg); }
.planos-overlay .perfil__acoes .perfil__acao--sair { color: var(--vermelho); }
/* O uso do mês: o texto de sempre e, embaixo, o risco de lápis preenchido (--uso, posto pelo js/08). */
.perfil__dados .perfil__uso { position: relative; padding-bottom: 12px; }
.perfil__dados .perfil__uso::before, .perfil__dados .perfil__uso::after { content: ""; position: absolute; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.perfil__dados .perfil__uso::before { left: 0; background: var(--linha); }
.perfil__dados .perfil__uso::after { left: 0; right: auto; width: var(--uso, 0%); background: var(--tinta); }
.planos-overlay .perfil__gerenciar { width: 100%; }
.planos.planos--embutido { width: 100%; margin: 0; box-sizing: border-box; background: transparent; border: 0; box-shadow: none; padding: 0; }
.planos.planos--embutido::before { content: none; }
.perfil + .planos.planos--embutido { margin-top: 24px; }
.bloqueio-caixa > .planos.planos--embutido { margin-top: 6px; }
.planos--embutido .planos__grade--unico { margin-top: 0; }
.bloqueio-overlay .planos--vitrine .acao-primaria.planos__cta { min-height: 56px; font-size: 17px; font-weight: 700; }

/* Celular: os planos viram a folha que sobe de baixo. */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .planos-overlay { align-items: flex-end; padding: 64px 0 0; overflow: hidden; }
  .planos { width: 100%; max-height: 100%; margin: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 22px calc(22px + env(safe-area-inset-bottom)); border-radius: var(--raio-folha) var(--raio-folha) var(--raio-reto) var(--raio-reto); border-bottom: 0; }
  .planos::before { content: ""; display: block; width: 38px; height: 4px; margin: 0 auto 12px; border-radius: var(--raio-capsula); background: var(--linha2); }
  .planos__motivo { max-width: none; font-size: 26px; }
  .planos__grade { margin-top: 14px; }
  .planos__card { padding: 18px 18px 20px; }
  .planos__card--abaixo .planos__num { font-size: 40px; }
  .planos__adulto-acoes { grid-template-columns: 1fr; }
  .planos__vitrine-boneco .cad-bq { width: 92px; }
}
@media (max-height: 500px) and (orientation: landscape) { .planos-overlay { padding-top: 12px; } }

/* Paywall inline do composer (código do chat): só a pele. */
.composer__paywall-texto { color: var(--tinta2); }

/* =========================================================
   7. ADMIN (admin.html) e a página do responsável (pagar.html): a mesma linguagem, sem mexer em colunas, botões nem textos
   ========================================================= */
.admin-page .topbar { min-height: 0; gap: 10px; padding: 14px clamp(16px, 4vw, 48px) 0; border-bottom: 0; background: none; }
.admin-page .topbar .btn--ghost {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--linha2); border-radius: var(--raio-capsula); color: var(--tinta);
  font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.admin-conteudo {
  box-sizing: border-box; width: min(1100px, calc(100% - 32px)); margin: 18px auto 48px; padding: 24px clamp(16px, 3vw, 28px);
  background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio-folha); box-shadow: var(--sombra-folha);
}
.admin-conteudo::before { content: "Usuários" / ""; margin-bottom: 14px; padding-top: 0; border-top: 0; color: var(--tinta); font-family: var(--font-giz); font-size: 26px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.admin-tabela th { font-family: var(--font); font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.admin-tabela__status { font-weight: 700; letter-spacing: 0; text-transform: none; }
.admin-tabela__acao.btn { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--linha2); border-radius: var(--raio-capsula); font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pagina-pagar__card { border-radius: var(--raio-folha); border-color: var(--linha); box-shadow: var(--sombra-folha); background: var(--folha); }
.admin-page .brand__mark { width: 34px; height: 34px; }
.admin-page .brand__name { margin-left: 10px; }
/* pagar.html não carrega fonte de fora (nem a Kalam): o título fica na fonte da interface, que cai na do sistema. */
.pagina-pagar h1 { font-family: var(--font); font-size: clamp(28px, 6vw, 36px); font-weight: 750; letter-spacing: -.01em; }
.pagina-pagar .acao-primaria { display: flex; width: 100%; }

/* =========================================================
   8. MENOS MOVIMENTO: o anel do microfone, o risco de lápis, o balão e o cursor param
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .cad-risco__traco::after, .bq-balao, .cad-balao, .figure-panel.aula-live-abrindo .aula-live-legenda__fala--user:last-child::after,
  .barra-aula-live > .aula-live-hud__btn.aula-live-hud__btn--falar[data-estado="ouvindo"] { animation: none; }
  .cad-risco__traco::after { width: 60%; }
  .app .sidebar { transition: none; }
}