/* Plataforma Prof. Vidoto: visual do app (aluno e professor).
   Identidade: noite e marinho com o dourado da logo, a mesma tipografia das aulas interativas
   (Bahnschrift nos títulos, Segoe UI no texto) e a grade discreta do quadro dos vídeos.
   O elemento marcante é a órbita da logo, que vira o anel de progresso do próximo passo.
   Decisões em plataforma/DESIGN.md. */

:root {
  color-scheme: dark;
  --noite: #071426;
  --marinho: #0B1F3A;
  --superficie: #10274A;
  --elevado: #163458;
  --texto: #F3F6FC;
  --suave: #B4C5DD;
  --linha: #2B4A6E;
  --linha-forte: #3E6390;
  --ouro: #FFD34F;
  --ouro-texto: #FFD34F;
  --dourado: linear-gradient(125deg, #FFE581 0%, #FFD34F 55%, #EDA91D 100%);
  --tinta-no-ouro: #14233C;
  --ok: #8EE0B6;
  --atencao: #FFC97A;
  --erro: #FFB4B4;
  --grade: rgba(255, 255, 255, .032);
  --sombra: 0 18px 40px -24px rgba(0, 0, 0, .7);
  --fonte-titulo: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "sans-serif-condensed", "Segoe UI Variable Display", system-ui, sans-serif;
  --fonte-texto: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Roboto", sans-serif;
  --raio: 14px;
  --raio-pequeno: 10px;
  --sai: cubic-bezier(.23, 1, .32, 1);
  --topo-h: 64px;
  --abas-h: 64px;
  font: 16px/1.6 var(--fonte-texto);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --noite: #EEF2F8;
    --superficie: #FFFFFF;
    --elevado: #F6F8FC;
    --texto: #0B1F3A;
    --suave: #4A607E;
    --linha: #D3DDEA;
    --linha-forte: #A9BBD3;
    --ouro-texto: #8A5A00;
    --ok: #1C7A4F;
    --atencao: #8A5A00;
    --erro: #B3261E;
    --grade: rgba(11, 31, 58, .045);
    --sombra: 0 18px 40px -26px rgba(11, 31, 58, .35);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scrollbar-color: var(--linha) transparent; }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--texto);
  background-color: var(--noite);
}
/* grade do quadro, fixa, e uma luz suave vindo do alto. Fica numa camada própria, presa à tela: a rolagem
   só move o conteúdo por cima, sem repintar o fundo a cada quadro (background-attachment: fixed repinta tudo). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(ellipse 80% 50% at 80% -10%, rgba(255, 211, 79, .07), transparent 60%),
    linear-gradient(var(--grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  transform: translateZ(0);
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 650; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-size: clamp(28px, 6vw, 40px); }
h2 { font-size: clamp(21px, 4.4vw, 26px); }
h3 { font-size: 18px; }
p { max-width: 68ch; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 4px; }
small, .suave { color: var(--suave); }
strong { font-weight: 650; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ouro); color: var(--marinho); }
svg.icone { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- controles ---------- */
button, .botao {
  font: 600 15.5px/1.2 var(--fonte-texto);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; min-width: 44px; padding: 12px 20px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-pequeno);
  background: var(--superficie); color: var(--texto);
  cursor: pointer; text-decoration: none; touch-action: manipulation; user-select: none;
  transition: transform 120ms var(--sai), background-color 160ms var(--sai);
}
button:active, .botao:active { transform: scale(.97); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.primario { background: var(--dourado); color: var(--tinta-no-ouro); border-color: transparent; font-weight: 700; box-shadow: 0 10px 24px -14px rgba(237, 169, 29, .8); }
.discreto { background: transparent; border-color: transparent; color: var(--suave); }
.perigo { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 45%, transparent); background: transparent; }
.largo { width: 100%; }
.voltar { justify-self: start; margin-left: -12px; }
@media (hover: hover) {
  button:hover:not(:disabled), .botao:hover { background-color: var(--elevado); }
  .primario:hover:not(:disabled) { filter: brightness(1.05); }
  .discreto:hover { color: var(--texto); }
}

label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
input, select, textarea {
  font: 16px/1.4 var(--fonte-texto); color: var(--texto);
  width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-pequeno);
  background: var(--noite); caret-color: var(--ouro);
}
textarea { min-height: 120px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--ouro); }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-height: 0; padding: 0; accent-color: var(--ouro); flex-shrink: 0; margin: 0; }
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 100px; }
.campo-senha button { position: absolute; right: 3px; top: 3px; min-height: 44px; padding: 8px 12px; font-size: 14px; border: 0; background: transparent; color: var(--suave); }
form { display: grid; gap: 18px; }
.erro { color: var(--erro); font-weight: 600; }
.dica { font-size: 14px; color: var(--suave); font-weight: 400; }
.checagem { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; line-height: 1.45; padding: 4px 0; cursor: pointer; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 6px; }
.opcoes-linha { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.opcoes-linha .checagem { min-height: 44px; align-items: center; }

/* ---------- casca ---------- */
.pular { position: fixed; left: 12px; top: -80px; z-index: 50; background: var(--ouro); color: var(--marinho); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.pular:focus { top: 12px; }
.topo {
  position: sticky; top: 0; z-index: 20;
  height: calc(var(--topo-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 16px;
  /* fundo quase opaco, sem desfoque: desfocar o que passa por baixo a cada quadro de rolagem trava celulares simples */
  background: color-mix(in srgb, var(--noite) 97%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--linha) 60%, transparent);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.marca img { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; }
.marca strong { display: block; font: 650 17px/1.15 var(--fonte-titulo); }
.marca small { display: block; font-size: 12px; line-height: 1.2; }
.topo nav { margin-left: auto; display: none; gap: 4px; }
.topo nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 10px; text-decoration: none; color: var(--suave); font-weight: 600; font-size: 15px; }
.topo nav a[aria-current="page"] { color: var(--texto); background: var(--superficie); box-shadow: inset 0 -2px 0 var(--ouro); }
.abas {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--abas-h) + env(safe-area-inset-bottom));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: color-mix(in srgb, var(--noite) 97%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--linha) 70%, transparent);
}
.abas a { display: grid; justify-items: center; align-content: center; gap: 2px; text-decoration: none; color: var(--suave); font-size: min(12px, 3.2vw); font-weight: 600; min-height: 48px; min-width: 0; padding-inline: 2px; }
.abas a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abas a[aria-current="page"] { color: var(--ouro-texto); }
body.teclado .abas, body.sem-abas .abas { display: none; }
main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-left)) calc(var(--abas-h) + 40px + env(safe-area-inset-bottom)); }
main:focus { outline: none; }
body.sem-abas main { padding-bottom: 40px; }
@media (min-width: 900px) {
  .topo { padding-inline: 32px; }
  .topo nav { display: flex; }
  .abas { display: none; }
  main { padding: 36px 32px 64px; }
}
.aviso-rede { position: sticky; top: calc(var(--topo-h) + env(safe-area-inset-top)); z-index: 19; margin: 0; padding: 10px 16px; text-align: center; background: var(--atencao); color: var(--marinho); font-weight: 600; font-size: 14px; max-width: none; }

/* ---------- blocos gerais ---------- */
.pagina { display: grid; gap: 28px; }
.cabeca { display: grid; gap: 6px; }
.cabeca p { color: var(--suave); }
.linha-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.secao { display: grid; gap: 14px; }
.secao > h2, .secao > .linha-titulo h2 { font-size: 20px; }
.vazio { padding: 22px; border: 1px dashed var(--linha-forte); border-radius: var(--raio); color: var(--suave); display: grid; gap: 10px; justify-items: start; }
.carregando { color: var(--suave); padding: 32px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--linha-forte); color: var(--suave); white-space: nowrap; }
.chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.chip.ouro { color: var(--ouro-texto); border-color: color-mix(in srgb, var(--ouro) 55%, transparent); }
.chip.atencao { color: var(--atencao); border-color: color-mix(in srgb, var(--atencao) 55%, transparent); }
.chip.erro { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 55%, transparent); }

/* lista de leitura: linhas, não cartões */
.lista { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--linha); }
.lista > li { border-bottom: 1px solid var(--linha); }
.item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 6px; text-decoration: none; color: inherit; width: 100%;
  background: none; border: 0; border-radius: 0; text-align: left; font: inherit; font-weight: 400;
}
button.item:active, a.item:active { transform: none; background: var(--superficie); }
@media (hover: hover) { a.item:hover, button.item:hover { background: color-mix(in srgb, var(--superficie) 70%, transparent); } }
.item .titulo { font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.item .detalhe { display: block; font-size: 14px; color: var(--suave); margin-top: 2px; overflow-wrap: anywhere; }
.item .marcador { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--elevado); color: var(--suave); }
.item .marcador.ouro { color: var(--tinta-no-ouro); background: var(--dourado); }
.item .marcador.ok { color: var(--ok); }
.item > .botao { min-height: 44px; padding: 8px 14px; }
.item .lado { display: grid; justify-items: end; gap: 6px; font-size: 13px; color: var(--suave); }
.item .lado .barra { width: 72px; }

/* ---------- entrada ---------- */
.entrada { min-height: 100dvh; display: grid; align-content: center; gap: 32px; max-width: 1080px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); }
.apresentacao { display: grid; gap: 18px; }
.apresentacao .marca img { width: 56px; height: 56px; border-radius: 16px; }
.apresentacao .marca strong { font-size: 22px; }
.apresentacao h1 { font-size: clamp(32px, 7vw, 54px); line-height: 1.04; letter-spacing: -.02em; }
.apresentacao p { color: var(--suave); font-size: 17px; }
.orbita-entrada { width: min(420px, 100%); height: auto; overflow: visible; }
.orbita-entrada ellipse { fill: none; stroke: var(--linha-forte); stroke-width: 1.4; }
.orbita-entrada .rastro { stroke: url(#ouro-entrada); stroke-width: 2.6; stroke-linecap: round; }
.orbita-entrada circle { fill: #FFE581; }
.orbita-entrada .halo, .orbita .halo { fill: #FFD34F; opacity: .28; }
.acesso { display: grid; gap: 18px; padding: 24px; border-radius: 18px; border: 1px solid var(--linha); background: color-mix(in srgb, var(--superficie) 94%, transparent); box-shadow: var(--sombra); }
.acesso h2 { font-size: 24px; }
.acesso > p { color: var(--suave); }
.ajuda-acesso { font-size: 14px; color: var(--suave); }
.previa { display: grid; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--linha-forte); }
.previa p { font-size: 13px; color: var(--suave); }
.previa .botoes { display: grid; gap: 8px; }
@media (min-width: 860px) {
  .entrada { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 64px; padding-inline: 40px; }
  .acesso { padding: 32px; }
}

/* ---------- órbita (progresso) ---------- */
.orbita { display: block; overflow: visible; }
.orbita .trilha { fill: none; stroke: var(--linha-forte); stroke-width: 2.4; }
.orbita .feito { fill: none; stroke-width: 5; stroke-linecap: round; }
.orbita .particula { fill: #FFE581; }
.orbita .valor { font: 700 26px var(--fonte-titulo); fill: var(--texto); }
.orbita .rotulo-valor { font: 600 11px var(--fonte-texto); fill: var(--suave); }

/* ---------- início do aluno ---------- */
.saudacao { display: grid; gap: 4px; }
.saudacao p { color: var(--suave); }
.proximo {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center;
  padding: 24px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--ouro) 35%, var(--linha));
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(255, 211, 79, .13), transparent 60%),
    linear-gradient(160deg, var(--elevado), var(--superficie));
  box-shadow: var(--sombra);
}
.proximo .rotulo { color: var(--ouro-texto); font-weight: 650; font-size: 14px; }
.proximo .texto { display: grid; gap: 8px; min-width: 0; }
.proximo h2 { font-size: clamp(23px, 5vw, 30px); }
.proximo p { color: var(--suave); }
.proximo .acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.proximo .orbita { width: 150px; justify-self: center; grid-row: 1; }
@media (min-width: 640px) {
  .proximo { grid-template-columns: minmax(0, 1fr) 170px; padding: 30px 32px; }
  .proximo .orbita { width: 170px; grid-row: auto; grid-column: 2; }
}
.colunas { display: grid; gap: 28px; }
@media (min-width: 900px) { .colunas { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 40px; } }

.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; list-style: none; padding: 0; }
.dias li { display: grid; justify-items: center; gap: 6px; font-size: 12px; color: var(--suave); }
.dias i { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--linha-forte); }
.dias .estudou i { background: var(--dourado); border-color: transparent; box-shadow: 0 0 0 4px rgba(255, 211, 79, .12); }
.dias .hoje { color: var(--texto); font-weight: 700; }
.dias .hoje i { border-color: var(--ouro); }

.barra { height: 6px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.barra > i { display: block; height: 100%; width: 100%; background: var(--dourado); border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); transition: transform 300ms var(--sai); }

/* ---------- plano ---------- */
.objetivo { padding: 18px 20px; border-radius: var(--raio); border: 1px solid color-mix(in srgb, var(--ouro) 35%, var(--linha)); background: color-mix(in srgb, var(--superficie) 90%, transparent); display: grid; gap: 4px; }
.objetivo span { font-size: 14px; color: var(--ouro-texto); font-weight: 650; }
.objetivo strong { font: 650 19px/1.35 var(--fonte-titulo); }
.resumo-plano { color: var(--suave); }
.trajetoria { list-style: none; padding: 0; display: grid; }
.etapa { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 28px; }
.etapa::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--linha-forte); }
.etapa:last-child::before { display: none; }
.etapa.feita::before { background: linear-gradient(var(--ouro), var(--linha-forte)); }
.estacao { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 700 16px var(--fonte-titulo); border: 2px solid var(--linha-forte); background: var(--noite); color: var(--suave); position: relative; z-index: 1; }
.etapa.feita .estacao { background: var(--dourado); border-color: transparent; color: var(--tinta-no-ouro); }
.etapa.atual .estacao { border-color: var(--ouro); color: var(--ouro-texto); box-shadow: 0 0 0 6px rgba(255, 211, 79, .14); }
.etapa .corpo { display: grid; gap: 8px; padding-top: 8px; min-width: 0; }
.etapa .meta { font-size: 14px; color: var(--suave); }
.etapa .texto { color: var(--suave); }
.etapa.atual .corpo { padding: 16px 18px; margin-top: -6px; border-radius: var(--raio); background: color-mix(in srgb, var(--superficie) 92%, transparent); border: 1px solid color-mix(in srgb, var(--ouro) 35%, var(--linha)); }
.etapa.atual .meta { color: var(--ouro-texto); font-weight: 600; }
.etapa .materiais { display: flex; flex-wrap: wrap; gap: 8px; }
.etapa .materiais a { font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linha-forte); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- material aberto ---------- */
body.com-material { overflow: hidden; }
.material { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #0B1F3A; }
.material header { display: flex; align-items: center; gap: 8px; padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left)); border-bottom: 1px solid #2B4A6E; background: #0B1F3A; color: #F3F6FC; }
.material header button { background: transparent; border-color: transparent; color: #F3F6FC; padding-inline: 12px; }
.material header .rotulos { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.material header .titulo { font: 650 16px/1.25 var(--fonte-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material header .estado { font-size: 12.5px; color: #B4C5DD; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material header .estado.erro { color: #FFB4B4; }
.material iframe { width: 100%; height: 100%; border: 0; background: #0B1F3A; display: block; }

/* ---------- diagnóstico ---------- */
.diagnostico { max-width: 720px; margin: 0 auto; display: grid; gap: 24px; }
.progresso-diag { display: grid; gap: 8px; font-size: 14px; color: var(--suave); }
.pergunta { display: grid; gap: 22px; }
.enunciado { font-size: 19px; line-height: 1.55; overflow-wrap: anywhere; }
.enunciado .katex { font-size: 1.08em; }
.enunciado .katex-display, .etapa .katex-display { margin: .6em 0; overflow-x: auto; overflow-y: hidden; }
.alternativas { display: grid; gap: 10px; }
.alternativa { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border-radius: var(--raio-pequeno); border: 1.5px solid var(--linha-forte); background: color-mix(in srgb, var(--superficie) 85%, transparent); font-weight: 500; font-size: 17px; cursor: pointer; transition: border-color 120ms var(--sai); }
.alternativa:has(input:checked) { border-color: var(--ouro); background: color-mix(in srgb, var(--ouro) 10%, var(--superficie)); }
.resposta-numero { display: flex; align-items: center; gap: 12px; max-width: 380px; }
.resposta-numero span { color: var(--suave); font-weight: 600; white-space: nowrap; }
.acoes-pergunta { display: flex; flex-wrap: wrap-reverse; gap: 10px; }
.acoes-pergunta .primario { flex: 1 1 220px; }
.fim-diag { display: grid; gap: 16px; justify-items: start; }

/* ---------- professor ---------- */
.busca { max-width: 420px; }
.atencoes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); list-style: none; padding: 0; }
.atencoes a { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--raio-pequeno); border: 1px solid color-mix(in srgb, var(--atencao) 45%, var(--linha)); background: color-mix(in srgb, var(--superficie) 92%, transparent); text-decoration: none; min-height: 44px; }
.atencoes strong { overflow-wrap: anywhere; }
.atencoes .motivo { color: var(--atencao); font-size: 14px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 600px) {
  .aluno-linha { grid-template-columns: auto minmax(0, 1fr); }
  .aluno-linha .chips { grid-column: 2; justify-content: flex-start; }
}
.inicial { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 16px var(--fonte-titulo); background: var(--elevado); color: var(--ouro-texto); border: 1px solid var(--linha-forte); }
.inicial.bloqueado { color: var(--suave); opacity: .6; }
.ficha { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 15px; }
.ficha dt { color: var(--suave); }
.ficha dd { margin: 0; overflow-wrap: anywhere; }
.botoes-linha { display: flex; flex-wrap: wrap; gap: 10px; }
.habilidades { list-style: none; padding: 0; display: grid; gap: 10px; }
.habilidade { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-radius: var(--raio-pequeno); border: 1px solid var(--linha); border-left: 4px solid var(--linha-forte); background: color-mix(in srgb, var(--superficie) 85%, transparent); }
.habilidade.domina { border-left-color: var(--ok); }
.habilidade.parcial { border-left-color: var(--ouro); }
.habilidade.construir { border-left-color: var(--erro); }
.habilidade .codigo { font: 700 14px var(--fonte-titulo); color: var(--suave); }
.habilidade .nome { grid-column: 1 / -1; font-weight: 600; overflow-wrap: anywhere; }
.habilidade .contagem { grid-column: 1 / -1; font-size: 14px; color: var(--suave); }
.abertas { display: grid; gap: 14px; }
.aberta { padding: 14px 16px; border-radius: var(--raio-pequeno); border: 1px solid var(--linha); display: grid; gap: 8px; }
.aberta blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--ouro); white-space: pre-wrap; overflow-wrap: anywhere; }
.senha-gerada { font: 700 28px/1.2 var(--fonte-titulo); letter-spacing: .06em; padding: 16px; border-radius: var(--raio-pequeno); background: var(--noite); border: 1px dashed var(--ouro); text-align: center; overflow-wrap: anywhere; user-select: all; }
.mensagem-pronta { white-space: pre-wrap; padding: 14px; border-radius: var(--raio-pequeno); background: var(--noite); border: 1px solid var(--linha); font-size: 15px; overflow-wrap: anywhere; }
.liberacao { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; min-height: 56px; padding: 8px 0; font-weight: 500; }
.liberacao small { display: block; }

details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--suave); }
details[open] > summary { margin-bottom: 8px; }

/* ---------- agenda ---------- */
.item .marcador.hora { width: 58px; height: auto; min-height: 46px; padding: 4px 0; display: grid; place-content: center; justify-items: center; gap: 1px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--texto); }
.item .marcador.hora strong { font: 700 16px/1.1 var(--fonte-titulo); }
.item .marcador.hora small { font-size: 12px; }
.item .detalhe.nota { color: var(--texto); white-space: pre-wrap; border-left: 2px solid var(--ouro); padding-left: 8px; margin-top: 6px; }
.lista > li.cancelada { opacity: .62; }
.lista > li.cancelada .titulo { text-decoration: line-through; }
.semana-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; max-width: 420px; }
.semana-nav .botao { padding-inline: 14px; white-space: nowrap; }
.semana-nav a[aria-current] { border-color: var(--ouro); }
.dia-agenda > .linha-titulo { flex-wrap: nowrap; }
.semana { display: grid; gap: 22px; }
.dia-agenda { display: grid; gap: 6px; }
.dia-agenda h2 { font-size: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dia-agenda.hoje h2 { color: var(--ouro-texto); }
.dia-agenda.livre h2 { color: var(--suave); font-size: 16px; }
.dia-agenda.livre > p { margin-top: -6px; font-size: 14px; }
.campos-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }

/* ---------- números do estudo ---------- */
.numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.numeros > div { display: grid; gap: 2px; align-content: start; padding: 14px 16px; border-radius: var(--raio-pequeno); border: 1px solid var(--linha); background: color-mix(in srgb, var(--superficie) 88%, transparent); }
.numeros dt { font-size: 13px; color: var(--suave); }
.numeros dd { margin: 0; display: grid; gap: 2px; }
.numeros strong { font: 700 22px/1.2 var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.numeros small { font-size: 12.5px; color: var(--suave); }

/* ---------- arquivos ---------- */
.envios { list-style: none; padding: 0; display: grid; gap: 12px; }
.envios:empty { display: none; }
.envios li { display: grid; gap: 6px; }
.envios .nome { font-weight: 600; overflow-wrap: anywhere; }
.envios .ok { color: var(--ok); font-weight: 600; }
.campo-com-botao { display: flex; gap: 8px; }
.campo-com-botao input { flex: 1; }
.campo-com-botao button { flex-shrink: 0; }
.quem { display: grid; }
input[type=file] { padding: 10px; font-size: 15px; }

/* ---------- aulas do aluno e pacote do mês (para qualquer idade: grande, claro, um passo por vez) ---------- */
.pacotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.pacote { display: grid; gap: 10px; align-content: start; padding: 18px 20px; border-radius: var(--raio); border: 1px solid color-mix(in srgb, var(--ouro) 40%, var(--linha)); background: linear-gradient(160deg, var(--elevado), var(--superficie)); box-shadow: var(--sombra); }
.pacote h2, .pacote h3 { font-size: 20px; }
.pacote.completo { border-color: color-mix(in srgb, var(--ok) 50%, var(--linha)); }
.pacote.sem-aulas { border-style: dashed; border-color: var(--linha-forte); box-shadow: none; background: transparent; }
.pacote p { margin: 0; }
.grande { font-size: 19px; font-weight: 600; line-height: 1.4; }
.bolinhas { display: flex; flex-wrap: wrap; gap: 8px; }
.bolinhas i { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--ouro); }
.bolinhas i.cheia { background: var(--dourado); border-color: transparent; box-shadow: 0 0 0 4px rgba(255, 211, 79, .14); }
.botao.enorme, button.enorme { min-height: 62px; font-size: 18px; width: 100%; max-width: 440px; border-radius: 14px; }
.recado { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--raio-pequeno); border-left: 4px solid var(--ouro); background: color-mix(in srgb, var(--superficie) 92%, transparent); max-width: none; }
.recado a { font-weight: 600; }
.aulas-aluno { list-style: none; padding: 0; display: grid; gap: 12px; }
.aula-aluno { display: grid; gap: 8px; justify-items: start; padding: 16px 18px; border-radius: var(--raio); border: 1px solid var(--linha); background: color-mix(in srgb, var(--superficie) 90%, transparent); }
.aula-aluno .quando { display: grid; gap: 2px; }
.aula-aluno .quando strong { font: 650 19px/1.25 var(--fonte-titulo); }
.aula-aluno .quando span { font-size: 17px; }
.aula-aluno .onde { font-weight: 600; }
.aula-aluno .acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.aula-aluno.cancelada { opacity: .65; }
.aula-aluno .dica { max-width: 46ch; }

.marcar { max-width: 760px; display: grid; gap: 20px; }
.passos-marcar { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.passos-marcar li { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--suave); }
.passos-marcar .num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--linha-forte); font: 700 16px var(--fonte-titulo); }
.passos-marcar .num svg.icone { width: 18px; height: 18px; }
.passos-marcar li.atual { color: var(--ouro-texto); }
.passos-marcar li.atual .num { background: var(--dourado); border-color: transparent; color: var(--tinta-no-ouro); }
.passos-marcar li.feito .num { border-color: var(--ok); color: var(--ok); }
.dica-grande { font-size: 18px; line-height: 1.45; }
.grade-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.dia-botao { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 112px; padding: 12px 6px; border-radius: 16px; border: 1.5px solid var(--linha-forte); background: color-mix(in srgb, var(--superficie) 92%, transparent); }
.dia-botao .semana { font-size: 15px; font-weight: 700; text-transform: capitalize; color: var(--ouro-texto); }
.dia-botao strong { font: 700 32px/1.05 var(--fonte-titulo); }
.dia-botao .mes { font-size: 15px; text-transform: capitalize; }
.dia-botao .qtd { font-size: 12.5px; font-weight: 500; color: var(--suave); }
.grade-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.hora-botao { min-height: 66px; font: 700 24px/1 var(--fonte-titulo); font-variant-numeric: tabular-nums; border-radius: 14px; border: 1.5px solid var(--linha-forte); }
@media (hover: hover) { .dia-botao:hover, .hora-botao:hover { border-color: var(--ouro); } }
.escolhido { font-size: clamp(22px, 5vw, 28px); }
.resumo-aula { display: grid; gap: 6px; padding: 20px 22px; border-radius: 18px; border: 1.5px solid color-mix(in srgb, var(--ouro) 55%, var(--linha)); background: linear-gradient(160deg, var(--elevado), var(--superficie)); }
.resumo-aula .rotulo { color: var(--ouro-texto); font-weight: 700; font-size: 15px; }
.resumo-aula .dia { font: 700 clamp(22px, 5.4vw, 28px)/1.2 var(--fonte-titulo); }
.resumo-aula .hora { font-size: 20px; font-weight: 600; }
.resumo-aula .onde { color: var(--suave); font-size: 16px; }
.sucesso-aula { max-width: 520px; margin: 24px auto; display: grid; justify-items: center; text-align: center; gap: 14px; }
.sucesso-aula p { margin: 0 auto; }
.selo-ok { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--dourado); color: var(--tinta-no-ouro); box-shadow: 0 0 0 10px rgba(255, 211, 79, .14); animation: selo 420ms var(--sai); }
.selo-ok svg.icone { width: 48px; height: 48px; stroke-width: 2.6; }
@keyframes selo { from { transform: scale(.6); opacity: 0; } }

/* ---------- renovar e horários de atendimento (professor) ---------- */
.opcoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.opcao { min-height: 54px; min-width: 64px; }
.opcao.numero { font: 700 22px/1 var(--fonte-titulo); }
.opcao[aria-pressed="true"] { background: var(--dourado); color: var(--tinta-no-ouro); border-color: transparent; }
.outro-numero { width: 110px; min-height: 54px; }
.resumo-renovar { padding: 12px 14px; border-radius: var(--raio-pequeno); background: var(--elevado); font-weight: 600; }
.dias-atendimento { display: grid; gap: 10px; }
.dia-atendimento { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--raio-pequeno); border: 1px solid var(--linha); }
.dia-atendimento.atende { border-color: color-mix(in srgb, var(--ouro) 45%, var(--linha)); background: color-mix(in srgb, var(--superficie) 88%, transparent); }
.dia-atendimento > p.suave { margin-top: -6px; font-size: 14px; }
.periodo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; max-width: 420px; }
.periodo label { font-size: 14px; font-weight: 600; color: var(--suave); }
.periodo input { min-width: 0; }
.previa-horarios { font-size: 14px; color: var(--ok); }
.previa-horarios:empty { display: none; }
.campos-regras { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.checagem.destaque { padding: 14px 16px; border-radius: var(--raio-pequeno); border: 1px solid var(--linha-forte); }
.checagem.destaque small { display: block; font-weight: 400; }
button.pequeno, .botao.pequeno { min-height: 44px; padding: 8px 12px; font-size: 14.5px; justify-self: start; }
.livres-dia { font-size: 13.5px; color: var(--suave); margin-top: 2px; }
.livres-dia span { color: var(--ok); font-weight: 600; }

/* ---------- folhas (dialog) ---------- */
dialog.folha {
  border: 0; padding: 0; color: var(--texto); background: var(--superficie);
  width: min(560px, calc(100% - 24px)); max-width: 100%; max-height: min(88dvh, 820px);
  border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); overflow: hidden;
}
dialog.folha::backdrop { background: rgba(3, 9, 20, .62); }
dialog.folha[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: folha-entra 220ms var(--sai); }
.folha .cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 12px 8px 20px; }
.folha .cab h2 { font-size: 21px; }
.folha .corpo { overflow: auto; padding: 6px 20px 18px; display: grid; gap: 16px; align-content: start; overscroll-behavior: contain; }
.folha .rodape { display: flex; flex-wrap: wrap-reverse; gap: 10px; justify-content: flex-end; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); }
.folha .rodape .primario { flex: 1 1 180px; }
.folha .rodape:empty { display: none; }
@media (max-width: 640px) {
  dialog.folha { margin: auto 0 0; width: 100%; border-radius: 20px 20px 0 0; }
  dialog.folha[open] { animation-name: folha-sobe; }
}
@keyframes folha-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes folha-sobe { from { transform: translateY(100%); } }

.aviso { position: fixed; left: 50%; bottom: calc(var(--abas-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; width: max-content; max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 12px; background: var(--texto); color: var(--noite); font-weight: 600; box-shadow: var(--sombra); animation: aviso 220ms var(--sai); }
.aviso.erro { background: var(--erro); color: #2A0606; }
@media (min-width: 900px) { .aviso { bottom: 28px; } }
@keyframes aviso { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- conta e primeiro acesso ---------- */
.estreito { max-width: 560px; display: grid; gap: 24px; }
.passos-acesso { display: flex; gap: 14px; font-size: 14px; color: var(--suave); list-style: none; padding: 0; }
.passos-acesso li[aria-current="step"] { color: var(--ouro-texto); font-weight: 700; }
.regras { list-style: none; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--suave); }
.regras li::before { content: "○ "; }
.regras li.ok { color: var(--ok); }
.regras li.ok::before { content: "● "; }
.aviso-privacidade { display: grid; gap: 12px; padding: 18px 20px; border-radius: var(--raio); border: 1px solid var(--linha); background: color-mix(in srgb, var(--superficie) 90%, transparent); }
.aviso-privacidade h3 { font-size: 16px; }
.aviso-privacidade p, .aviso-privacidade li { color: var(--suave); font-size: 15px; }
.aviso-privacidade ul { padding-left: 20px; display: grid; gap: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- rodapé da conta (versão; o modo aluno do professor fica atrás dela) ---------- */
.rodape-conta { display: grid; gap: 18px; padding-top: 8px; }
.versao { font-size: 13px; color: var(--suave); text-align: center; margin: 8px auto 0; padding: 12px 16px; }
.modo-aluno { padding: 18px 20px; border-radius: var(--raio); border: 1px dashed var(--ouro); }
.mais-opcoes .modo-aluno { margin-top: 14px; }
.mais-opcoes > summary { list-style: none; gap: 10px; padding: 0 14px; border: 1px solid var(--linha); border-radius: var(--raio-pequeno); color: var(--texto); }
.mais-opcoes > summary::-webkit-details-marker { display: none; }
.mais-opcoes > summary::after { content: "+"; margin-left: auto; font-size: 22px; line-height: 1; color: var(--suave); }
.mais-opcoes[open] > summary::after { content: "−"; }
.faixa-modo-aluno { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1120px; margin: 12px auto 0; padding: 8px 8px 8px 16px; width: calc(100% - 2 * max(16px, env(safe-area-inset-left))); border: 1px dashed var(--ouro); border-radius: var(--raio); font-weight: 700; color: var(--ouro-texto); }
.faixa-modo-aluno button { min-height: 44px; }

/* ---------- criar conta (questionário de entrada, um passo por vez) ---------- */
.criar-conta { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--linha); }
.criar-conta p { font-weight: 600; }
.cadastro-pagina { max-width: 760px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: grid; gap: 22px; }
.cadastro { display: grid; gap: 22px; }
.passo-cadastro { gap: 22px; }
.passo-cadastro h1 { font-size: clamp(26px, 6.4vw, 36px); }
.grupo-campos { display: grid; gap: 14px; }
.grupo-campos h2 { font-size: 21px; }
.grupo-anos { display: grid; gap: 10px; }
.grupo-anos h3 { font-size: 15px; color: var(--suave); font-family: var(--fonte-texto); font-weight: 600; }
.opcao.ano, .opcao.desde-ano { min-height: 56px; font-size: 17px; padding-inline: 18px; }
input.idade { max-width: 140px; font-size: 22px; font-weight: 700; }
.escolhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.escolhas.grandes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.escolha { justify-content: flex-start; text-align: left; min-height: 56px; font-weight: 600; font-size: 16px; line-height: 1.3; }
.escolha .marca-escolha { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--linha-forte); display: grid; place-items: center; flex-shrink: 0; }
.escolha .marca-escolha svg.icone { width: 18px; height: 18px; stroke-width: 3; opacity: 0; }
.escolha[aria-pressed="true"] { border-color: var(--ouro); background: color-mix(in srgb, var(--ouro) 12%, var(--superficie)); }
.escolha[aria-pressed="true"] .marca-escolha { background: var(--dourado); border-color: transparent; color: var(--tinta-no-ouro); }
.escolha[aria-pressed="true"] .marca-escolha svg.icone { opacity: 1; }
.cartoes-escolha { display: grid; gap: 10px; }
.cartao-escolha { justify-content: flex-start; text-align: left; min-height: 60px; font-size: 17px; font-weight: 600; }
.cartao-escolha .bolinha-radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--linha-forte); flex-shrink: 0; }
.cartao-escolha[aria-checked="true"] { border-color: var(--ouro); background: color-mix(in srgb, var(--ouro) 12%, var(--superficie)); }
.cartao-escolha[aria-checked="true"] .bolinha-radio { border: 7px solid var(--ouro); }
.acoes-cadastro { display: grid; gap: 10px; justify-items: stretch; }
.acoes-cadastro .enorme { max-width: none; }
.acoes-cadastro .discreto { justify-self: start; }
@media (min-width: 640px) { .acoes-cadastro { grid-template-columns: auto 1fr; } .acoes-cadastro .enorme { grid-column: 2; grid-row: 1; justify-self: end; max-width: 320px; } }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) { .passos-marcar .rotulo-passo { display: none; } .passos-marcar li.atual .rotulo-passo { display: inline; } }
.cadastros { list-style: none; padding: 0; display: grid; gap: 12px; }
.cadastro-novo { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--raio); border: 1px solid color-mix(in srgb, var(--atencao) 45%, var(--linha)); background: color-mix(in srgb, var(--superficie) 92%, transparent); }
.cadastro-novo .detalhe { color: var(--suave); font-size: 14px; }
.ficha.questionario { font-size: 15px; }
@media (max-width: 520px) { .ficha.questionario { grid-template-columns: 1fr; gap: 2px; } .ficha.questionario dd { margin-bottom: 8px; } }
.cadastro-pagina > .marca { min-height: 48px; justify-self: start; }

/* ---------- tutorial do aluno (passeio pelas abas) ---------- */
.tutorial { position: fixed; inset: 0; z-index: 80; }
.tutorial-veu { position: absolute; inset: 0; }
.tutorial.sem-alvo .tutorial-veu { background: rgba(3, 9, 20, .66); }
/* o destaque escurece o resto com a própria sombra e anda só por transform */
.tutorial-destaque { position: absolute; left: 0; top: 0; border-radius: 14px; box-shadow: 0 0 0 3px var(--ouro), 0 0 0 9999px rgba(3, 9, 20, .66); transition: transform 320ms var(--sai), width 320ms var(--sai), height 320ms var(--sai); pointer-events: none; }
.tutorial.sem-alvo .tutorial-destaque { display: none; }
.tutorial-cartao { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 2 * var(--abas-h) - 32px); overflow: auto; display: grid; gap: 12px; padding: 20px 20px 16px; border-radius: 20px; background: var(--superficie); color: var(--texto); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); animation: folha-entra 220ms var(--sai); }
.tutorial.alvo-embaixo .tutorial-cartao { top: auto; bottom: calc(var(--abas-h) + 20px + env(safe-area-inset-bottom)); transform: translateX(-50%); }
.tutorial:not(.sem-alvo):not(.alvo-embaixo) .tutorial-cartao { top: calc(var(--topo-h) + 24px + env(safe-area-inset-top)); transform: translateX(-50%); }
.tutorial-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tutorial-contador { font-size: 14px; font-weight: 600; color: var(--ouro-texto); }
.tutorial-pular { min-height: 44px; padding: 8px 12px; margin-right: -8px; }
.tutorial-cartao h2 { font-size: clamp(22px, 5.6vw, 26px); }
.tutorial-texto { font-size: 17.5px; line-height: 1.55; }
.tutorial-selo { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--dourado); color: var(--tinta-no-ouro); font-weight: 700; font-size: 15px; }
.tutorial-acoes { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; gap: 10px; margin-top: 4px; }
.tutorial-acoes .primario { flex: 1 1 180px; min-height: 54px; font-size: 17px; }
.recado.meet { border-left-color: var(--ok); }
.recado.meet strong { color: var(--texto); }
.tutorial-cartao:focus { outline: none; }

/* ---------- notificações (sino) e conversa no topo ---------- */
.acoes-topo { margin-left: auto; display: flex; align-items: center; gap: 4px; }
@media (min-width: 900px) { .acoes-topo { margin-left: 8px; } }
.botao-topo {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 12px; border: 1px solid transparent; background: none; color: var(--suave); text-decoration: none;
}
.botao-topo:hover { color: var(--texto); background: var(--superficie); }
.botao-topo .icone { width: 24px; height: 24px; }
.botao-topo .contador {
  position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--dourado); color: var(--tinta-no-ouro); font: 800 11px/18px var(--fonte-texto); text-align: center;
  box-shadow: 0 0 0 2px var(--noite); transform: scale(0); transition: transform .2s cubic-bezier(.2, .9, .3, 1.4);
}
.botao-topo.com-contador .contador { transform: scale(1); }
.botao-topo.com-contador .icone { color: var(--ouro-texto); }
@media (prefers-reduced-motion: reduce) { .botao-topo .contador { transition: none; } }
.avisos .aviso-item.nao-lido .titulo::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--ouro); vertical-align: middle; }
.avisos .lado { white-space: nowrap; }
.vazio-avisos { padding: 16px 4px; }
.item.nao-lido .titulo { color: var(--texto); }

/* ---------- conversa ---------- */
.painel-conversa { display: grid; grid-template-rows: minmax(0, 1fr) auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); overflow: hidden; margin-top: 16px; height: min(68vh, 640px); }
.conversa { list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; }
.bolha { max-width: min(78%, 560px); padding: 10px 14px 6px; border-radius: 16px; line-height: 1.45; }
.bolha p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bolha .hora { display: block; text-align: right; font-size: 12px; color: var(--suave); margin-top: 2px; }
.bolha.minha { align-self: flex-end; background: color-mix(in srgb, var(--ouro) 22%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--ouro) 45%, transparent); border-bottom-right-radius: 4px; }
.bolha.outra { align-self: flex-start; background: var(--elevado); border: 1px solid var(--linha); border-bottom-left-radius: 4px; }
.dia-conversa { align-self: center; font-size: 12px; color: var(--suave); padding: 6px 0; }
.dia-conversa span { padding: 3px 10px; border-radius: 999px; background: var(--elevado); }
.conversa-vazia { margin: auto; max-width: 42ch; text-align: center; color: var(--suave); }
.escrever { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--linha); background: var(--noite); }
.escrever textarea { flex: 1; min-height: 48px; max-height: 160px; resize: none; }
.escrever button { min-height: 48px; }
@media (max-width: 520px) { .escrever button span { display: none; } .escrever button { width: 48px; padding: 0; } .painel-conversa { height: calc(100dvh - var(--topo-h) - var(--abas-h) - 190px); min-height: 360px; } }
.cabeca > .botao { justify-self: start; }