/* O celular do aluno (arquitetura, seções 5, 9 e 10; D-016).
 *
 * Pensado para o celular em pé, numa mão, na sala de aula:
 * - uma coisa por tela, de cima para baixo, sem rolagem lateral;
 * - alvos de toque de pelo menos 48 px (os de voto, 56 px), com rótulos
 *   curtos: o polegar erra menos, e ninguém lê parágrafo para votar;
 * - as cores e a fonte vêm do base.css (fundo escuro, contraste de 7:1, fonte
 *   do sistema, números tabulares), iguais às do telão;
 * - estado nunca só por cor: o voto marcado tem fundo claro E borda, o envio
 *   lento tem texto, a equipe tem forma, número e nome.
 */

:root {
  --lateral-aluno: 16px;
  --vao: 16px;
  --alvo: 56px;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.aluno {
  min-height: 100vh;
  min-height: 100dvh;
  font-size: 18px;
  line-height: 1.4;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ---------- Topo: crachá e conexão ---------- */

.topo {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px;
  padding: 8px var(--lateral-aluno);
  padding-top: max(8px, env(safe-area-inset-top, 0));
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}
.cracha { display: flex; align-items: center; gap: .35em; min-width: 0; font-size: 17px; white-space: nowrap; overflow: hidden; }
.cracha .equipe { gap: .3em; }
.cracha-rotulo { color: var(--texto-2); }
.cracha-codigo { font-weight: 700; letter-spacing: .06em; }
.topo-selo { flex: none; }
.topo-selo .selo { font-size: 14px; }
/* No modo espectador, o seletor de equipe ocupa uma segunda linha do topo. */
.topo { flex-wrap: wrap; row-gap: 8px; }

/* ---------- Modo espectador (D-064) ----------
   O celular do apresentador: o selo no lugar do crachá (tracejado, e com o
   texto: estado nunca só por cor) e um botão por equipe, com a forma e o
   número, sempre à vista no topo. A equipe vista fica com o fundo claro do
   aria-pressed (base.css). */
.selo-espectador {
  padding: 4px 10px;
  border: 2px dashed var(--texto); border-radius: var(--raio);
  font-size: 15px; font-weight: 750; letter-spacing: .02em;
}
.barra-espectador:not([hidden]) { display: flex; flex-basis: 100%; gap: 6px; }
.botao-ver-equipe {
  flex: 1 1 0; min-width: 0; min-height: 48px;
  justify-content: center; gap: 4px;
  padding: 4px 2px;
  font-size: 18px; font-weight: 750;
}
.botao-ver-equipe .forma { flex: none; }
/* O topo do espectador tem duas linhas: a opção aberta rola para baixo delas. */
body.espectador .opcao-aluno { scroll-margin-top: 124px; }
.botao-sair-espectador { margin-top: 8px; }

/* O link discreto da entrada ("Sou apresentador", "Voltar"): parece texto, mas
   tem os 48 px de toque de todo botão. */
.botao-discreto {
  align-self: center; min-height: 48px;
  background: none; border-color: transparent;
  color: var(--texto-2); font-size: 16px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.campo-pin {
  width: 100%; min-height: 56px;
  padding: 8px 12px;
  font: inherit; font-size: 22px; letter-spacing: .1em;
  background: var(--fundo); color: var(--texto);
  border: 2px solid var(--linha-forte); border-radius: var(--raio);
}
.campo-pin:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ---------- Modo individual (decisão do Kleber de 13/10 à noite) ----------
   O nome do aluno: o campo da entrada (grande, como o do código) e, depois,
   no topo, no lugar do crachá. Um nome de 20 letras cabe em 360 px ao lado do
   selo de conexão; mais largo que isso, ele termina em reticências. */
.campo-nome {
  width: 100%; min-height: 56px;
  padding: 8px 12px;
  font: inherit; font-size: 22px; font-weight: 650;
  background: var(--fundo); color: var(--texto);
  border: 2px solid var(--linha-forte); border-radius: var(--raio);
}
.campo-nome:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.cracha-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 750; }

/* ---------- Faixas (versão nova, telão calado) ---------- */

.faixa {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px;
  margin: 12px var(--lateral-aluno) 0;
  padding: 10px 14px;
  border: 2px solid var(--texto-2); border-left-width: 8px;
  border-radius: var(--raio);
  background: var(--superficie-2);
  font-weight: 600;
}
.botao-faixa { min-height: 48px; }

/* ---------- Tela ---------- */

.tela-aluno {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 20px var(--lateral-aluno) 32px;
}

.bloco { display: flex; flex-direction: column; gap: var(--vao); }

.cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cabecalho-textos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.kicker { color: var(--texto-2); font-size: 15px; font-weight: 600; letter-spacing: .01em; }

h1 { font-size: 26px; line-height: 1.18; font-weight: 750; letter-spacing: -0.005em; text-wrap: balance; overflow-wrap: anywhere; }
h1.afirmacao { font-size: 23px; font-weight: 650; line-height: 1.3; text-wrap: pretty; }
.subtitulo { font-size: 16px; font-weight: 700; color: var(--texto-2); margin-top: 4px; }

.texto { max-width: 36em; }
.texto-2 { color: var(--texto-2); font-size: 16px; }
.rotulo { font-weight: 700; }

.cronometro-aluno {
  flex: none;
  min-width: 3.2em;
  padding-top: 2px;
  text-align: right;
  font-size: 20px; font-weight: 700;
  color: var(--texto-2);
  white-space: nowrap;
}
.cronometro-aluno:empty { display: none; }

.progresso { font-weight: 700; color: var(--texto-2); }

/* Mensagens de estado: o texto diz o que é; a borda só reforça. */
.nota {
  padding: 10px 14px;
  border-left: 4px solid var(--linha-forte);
  background: var(--superficie);
  border-radius: 0 var(--raio) var(--raio) 0;
}
.nota[data-tipo="erro"] { border-left-color: var(--texto); font-weight: 700; }

.privacidade {
  color: var(--texto-2); font-size: 15px;
  padding-top: 12px; border-top: 1px solid var(--linha);
}

.botao-largo { width: 100%; min-height: var(--alvo); font-size: 19px; }
.botao-pequeno { min-height: 48px; padding: .3em .9em; font-size: 16px; align-self: flex-start; }

/* ---------- Entrada ---------- */

.campo-codigo, .campo-url {
  width: 100%;
  min-height: 64px;
  padding: 8px 12px;
  font: inherit;
  background: var(--fundo); color: var(--texto);
  border: 2px solid var(--linha-forte); border-radius: var(--raio);
}
.campo-codigo {
  font-size: 34px; font-weight: 750; letter-spacing: .35em; text-align: center; text-transform: uppercase;
  padding-left: calc(12px + .35em);
}
.campo-codigo:focus-visible, .campo-url:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.campo-codigo:disabled { opacity: .45; }
.campo-url { min-height: 48px; font-size: 15px; }

.embutido {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  border: 2px solid var(--texto); border-radius: var(--raio);
  background: var(--superficie);
}
.embutido-titulo { font-size: 22px; font-weight: 750; }

/* ---------- Enquete: 5 botões, um embaixo do outro ---------- */

.escala { display: flex; flex-direction: column; gap: 8px; }
.botao-escala, .botao-opcao-aluno, .botao-equipe {
  width: 100%; min-height: var(--alvo);
  justify-content: flex-start; text-align: left;
  padding: 8px 14px;
  font-weight: 600;
}
.botao-escala .botao-rotulo:empty, .botao-opcao-aluno .botao-rotulo:empty, .botao-equipe .botao-rotulo:empty { display: none; }
.escala-numero, .opcao-letra {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 2px solid currentColor; border-radius: 50%;
  font-size: 18px; font-weight: 800;
}
.escala-rotulo, .opcao-rotulo { flex: 1; min-width: 0; }
/* O envio lento continua legível: o texto da nota diz "Enviando…", e o botão
   escolhido fica marcado, com contorno tracejado enquanto não confirma. */
.botao.enviando { outline: 3px dashed var(--foco); outline-offset: 2px; opacity: 1; }

.navegar { display: flex; justify-content: space-between; gap: 8px; }
.navegar .botao { flex: 1; }

/* Uma linha por afirmação, com o "Mudar" à direita e o texto em até 2 linhas:
   empilhados, os três cartões passavam da dobra em 360×740, e a confirmação e o
   aviso de privacidade ficavam fora da tela (revisão da F2, achado 19). */
.respostas { display: flex; flex-direction: column; gap: 10px; }
.resposta {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.resposta-texto { font-weight: 600; }
.resposta-voto { color: var(--texto-2); }
.resposta-voto b { color: var(--texto); }
.respostas-compactas { gap: 8px; }
.respostas-compactas .resposta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
  padding: 8px 12px;
}
.respostas-compactas .resposta > .botao { grid-column: 2; grid-row: 1 / span 2; }
.respostas-compactas .resposta-texto {
  font-size: 16px; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.respostas-compactas .resposta-voto { font-size: 16px; }

/* ---------- Equipes ---------- */

.lista-equipes { display: flex; flex-direction: column; gap: 8px; }
.botao-equipe .equipe { flex: 1; min-width: 0; font-size: 19px; }
.botao-equipe .forma { width: 1.3em; height: 1.3em; }
.equipe-conta { flex: none; font-size: 15px; font-weight: 600; opacity: .9; }
.equipe-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em; font-size: 19px; }
.equipe-linha .forma { width: 1.2em; height: 1.2em; }

/* ---------- Indicadores, mês e narrativa ---------- */

.indicadores {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px;
  margin: 0; padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.indicadores dt { color: var(--texto-2); }
.indicadores dd { margin: 0; text-align: right; font-weight: 700; }
/* "Escolha ou sorte?": o total do fim, depois do "=", em destaque, separado
   das variações por um traço (rascunho, seção 7, item 11). */
/* O pior caso (D-059) usa o mesmo destaque no total: "A proteção evitou". */
.placar-historia .placar-total,
.pior-caso-lista .placar-total { padding-top: 6px; border-top: 1px solid var(--linha); color: var(--texto); font-weight: 700; }
.placar-historia dd.placar-total,
.pior-caso-lista dd.placar-total { font-size: 1.15em; }
.delta { color: var(--texto-2); font-weight: 500; font-size: 15px; }

.mes { display: flex; flex-direction: column; gap: 6px; }
/* Carta grave: sem cor, sem animação, sem destaque (arquitetura, seção 8). O
   bloco fica igual aos outros de propósito. */
.narrativa {
  margin: 0;
  padding: 4px 0 4px 14px;
  border-left: 3px solid var(--linha-forte);
  font-style: italic;
  color: var(--texto);
}

/* ---------- O dinheiro da casa (D-044, D-046) ---------- */

.familia { font-size: 16px; color: var(--texto-2); }
.familia-rotulo { font-weight: 700; color: var(--texto); }
.basico-linha, .outra-renda, .divida { font-size: 16px; }
.fonte { display: block; color: var(--texto-2); font-size: 14px; font-weight: 400; }
.outra-renda .fonte { display: inline; }

.basico { display: flex; flex-direction: column; gap: 8px; }
.basico-itens {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.basico-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; }
.basico-item .fonte { grid-column: 1 / -1; }
.basico-valor { text-align: right; }

/* "Conheça o Jonas" (revisão final de 14/10, pedido do Kleber): a conta do mês
   em linhas grandes, com os valores alinhados à direita, e a frase do mês em
   vermelho, como no telão. O básico item a item e as fontes ficam recolhidos
   (o "ver" abre ao tocar), sem caixa dentro da caixa. */
.conheca { display: flex; flex-direction: column; gap: 8px; }
.conheca-conta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px;
  margin: 0; padding: 8px 12px; list-style: none; font-size: 16px; line-height: 1.25;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.conheca-linha { display: contents; }
.conheca-linha > b { text-align: right; white-space: nowrap; }
.conheca-mes { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.conheca-mes[data-sinal="negativo"] { color: var(--negativo); }
.conheca-mes[data-sinal="positivo"] { color: var(--positivo); }
.recolhido .basico-itens { padding: 0; border: 0; background: none; }
/* Mais específico que o .recolhido (que vem depois no arquivo): a linha das
   fontes é discreta, sem a caixa. */
.recolhido.recolhido-fontes { background: none; border-color: transparent; }
.recolhido.recolhido-fontes summary { min-height: 44px; padding: 8px 0; font-size: 14px; font-weight: 400; color: var(--texto-2); }
.recolhido.recolhido-fontes .recolhido-corpo { padding: 0 0 12px; gap: 8px; }
.recolhido-fontes .fonte b { color: var(--texto); font-weight: 600; }

/* A conta do mês: a linha "entrou · o básico custa" e, embaixo, o que faltou
   em destaque. Destaque por tamanho, peso e borda, nunca só por cor (D-016). */
.conta-mes {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.conta-linha { font-size: 16px; }
.conta-origem { font-size: 14px; color: var(--texto-2); }
/* O que veio dos meses anteriores (a fratura que continua, o INSS, a multa):
   já está somado na conta, e a linha só diz de onde veio. */
.conta-de-antes { font-size: 14px; color: var(--texto-2); }
/* O que a proteção pagou e o que teria faltado sem ela (D-059): é o argumento
   da decisão de proteger, e não uma nota de rodapé; fica no corpo do texto,
   com um fio à esquerda, sem cor de alerta (a mesma forma para toda carta). */
.conta-protecao { font-size: 16px; padding-left: 10px; border-left: 3px solid var(--linha-forte); }
.conta-saldo { font-size: 22px; font-weight: 700; }
.conta-mes[data-resultado="faltou"] { border: 2px solid var(--texto); border-left-width: 8px; }
.conta-mes[data-resultado="faltou"] .conta-saldo { font-size: 26px; }
/* O custo real da carta (D-052): texto comum, igual para toda carta; a grave
   não ganha destaque (arquitetura, seção 8). */
.carta-custo { font-size: 16px; }
.divida {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 14px;
  border-left: 4px solid var(--linha-forte);
  background: var(--superficie);
  border-radius: 0 var(--raio) var(--raio) 0;
}
/* A dívida por partes (esquema v2.2): o total em cima, o cheque especial e o
   empréstimo embaixo, menores. */
.divida-total { font-size: 18px; }
.divida-parte { font-size: 15px; color: var(--texto-2); }
.divida-parte b { color: var(--texto); }
.divida-nota { font-size: 14px; color: var(--texto-2); }
.conta-emprestimo { font-size: 15px; }
/* D-066: o bimestre em que o limite do cheque especial acabou (contas
   atrasadas, multa, comida cortada, mora) e, à parte da dívida, o que faltou na
   mesa. D-067: a proteção que passou do trabalho. As três com o mesmo fio à
   esquerda da frase da proteção: são argumento da aula, e não alerta; nenhuma
   ganha cor (D-016), e a carta grave continua sem destaque. */
.conta-limite, .conta-acima-trabalho { font-size: 15px; padding-left: 10px; border-left: 3px solid var(--linha-forte); }
.acima-trabalho { font-size: 16px; padding-left: 10px; border-left: 3px solid var(--linha-forte); }
.faltou-mesa { font-size: 15px; padding-left: 10px; border-left: 3px solid var(--linha-forte); }

/* ---------- O resumo mês a mês (D-065) ----------
   Uma tabela de três colunas: o mês, o saldo do mês e com quanto a família
   ficou. Cabe em 360 px com valores de cinco dígitos (a primeira coluna quebra
   linha, as de número nunca). A dívida de hoje fica no mesmo cartão, embaixo de
   um fio: é a continuação da última linha. */
.resumo-meses {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 14px 12px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.tabela-meses { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela-meses th, .tabela-meses td { padding: 6px 0; text-align: right; vertical-align: baseline; }
.tabela-meses th:first-child { text-align: left; padding-right: 8px; }
.tabela-meses td { padding-left: 10px; white-space: nowrap; font-size: 17px; }
.tabela-meses thead th { font-size: 14px; font-weight: 600; color: var(--texto-2); padding-top: 0; border-bottom: 1px solid var(--linha-forte); }
.tabela-meses tbody th { font-size: 16px; font-weight: 600; }
.tabela-meses tbody tr + tr > * { border-top: 1px solid var(--linha); }
.resumo-meses .divida { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--linha-forte); border-radius: 0; background: none; }
/* No cartão do resumo, o que faltou na mesa fica logo embaixo da dívida, sem o
   fio e sem o recuo: o cartão já separa, e o resumo inteiro tem de caber em
   360×740 (o e2e:online confere). */
.resumo-meses .faltou-mesa { padding-left: 0; border-left: 0; }

/* ---------- As escolhas do ano, no placar final (pedido de 05/10, item 4) ----------
   A frase de cima ("Vocês escolheram em todos os 6 bimestres, e ainda faltou
   R$ X") com a borda grossa do "faltou" (nunca só cor, D-016) e, num cartão,
   uma linha por bimestre: o nome curto e o saldo do bimestre na primeira
   linha, a opção e a carta embaixo, de ponta a ponta. A opção ocupa a largura
   inteira de propósito: ao lado do valor, os rótulos de até 50 letras ("Aceitar
   toda encomenda de Páscoa, até a sem margem") iam a três linhas em 360 px, e
   as duas primeiras linhas da lista não cabiam sem rolar. */
.escolhas-frase {
  padding: 10px 14px;
  font-size: 18px; font-weight: 600; line-height: 1.35;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.escolhas-frase[data-resultado="faltou"] { border: 2px solid var(--texto); border-left-width: 8px; }
.escolhas-ano {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px 12px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.escolhas-cabecalho {
  display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--linha-forte);
  font-size: 14px; font-weight: 600; color: var(--texto-2);
}
.escolha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px;
  padding: 8px 0;
}
.escolha + .escolha { border-top: 1px solid var(--linha); }
.escolha-mes { font-size: 16px; font-weight: 700; }
.escolha .valor-saldo { font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.escolha-opcao, .escolha-carta { grid-column: 1 / -1; line-height: 1.3; }
.escolha-opcao { font-size: 16px; }
.escolha-carta { font-size: 15px; color: var(--texto-2); }
.escolhas-ano .faltou-mesa { padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--linha-forte); }

.valor-saldo { font-weight: 700; }
/* Verde se positivo, vermelho se negativo, a pedido do Kleber depois do
   teste de 30/09, com os mesmos tokens e nomes do telão (base.css: --positivo e
   --negativo; data-sinal positivo, negativo ou zero). Antes, o celular tinha
   tokens próprios (--saldo-mais, --saldo-menos), e o mesmo mês saía com cores
   diferentes nas duas telas (revisão de 30/09, achado 16). O zero fica neutro,
   sem "+": a cor da letra. O sinal vem sempre junto: a cor nunca é o único canal. */
.valor-saldo[data-sinal="positivo"] { color: var(--positivo); }
.valor-saldo[data-sinal="negativo"] { color: var(--negativo); }

/* O saldo do mês no resultado: o número grande. No vermelho, também a borda
   grossa de antes (o "faltou" nunca só por cor, D-016). */
.saldo-destaque {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
  padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.saldo-destaque[data-sinal="negativo"] { border: 2px solid var(--texto); border-left-width: 8px; }
.saldo-rotulo { font-size: 16px; font-weight: 600; color: var(--texto-2); }
.saldo-destaque .valor-saldo { font-size: 30px; line-height: 1.1; }
.decisao-linha { font-size: 16px; }
/* D-078: a consequência de uma escolha de antes, à vista no resultado. D-084,
   nota de 14/10: o destaque da opção escolhida (o bloqueio de quem parou), igual. */
.consequencia-linha, .destaque-linha { font-size: 16px; padding: 6px 10px; border-left: 4px solid var(--texto-2); background: var(--superficie); }

/* A história da equipe no fim (D-045): um cartão por mês, todos iguais. */
.historia { display: flex; flex-direction: column; gap: 10px; }
.historia-mes {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.historia-conta { font-size: 15px; color: var(--texto-2); }
.historia-conta b { color: var(--texto); }

/* ---------- Decisão ---------- */

/* O contexto da família no topo da decisão (D-043): a borda grossa separa do
   dilema da rodada, que vem logo depois. */
.contexto-familia {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  border: 2px solid var(--texto-2); border-left-width: 8px; border-radius: var(--raio);
  background: var(--superficie-2);
}
.contexto-rotulo { font-size: 14px; font-weight: 700; color: var(--texto-2); }
.contexto-texto { font-weight: 600; }
.pressao { display: flex; flex-direction: column; gap: 4px; }
.pressao .divida { padding: 4px 12px; }
/* A linha curta da decisão é um <p> de texto corrido, e não a caixa em coluna
   do .divida: no teste do Kleber de 05/10, o flex em coluna herdado empilhava
   cada pedaço numa linha ("Dívida" / "R$ 2.625" / ", com"…) e empurrava as
   opções para baixo da dobra. */
.divida-curta { display: block; }

.opcoes-aluno { display: flex; flex-direction: column; gap: 8px; }
.botao-opcao-aluno { align-items: center; gap: 12px; }
.opcao-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.opcao-textos .opcao-rotulo { flex: none; }
.opcao-votos { flex: none; font-size: 15px; font-weight: 700; opacity: .9; white-space: nowrap; }
/* O voto do aparelho: fundo claro E o texto "seu voto" (D-016, nunca só cor). */
.botao-opcao-aluno.meu-voto { background: var(--texto); color: var(--texto-sobre-claro); border-color: var(--texto); }
.opcao-seu-voto { font-size: 14px; font-weight: 700; }
/* A linha do custo humano (D-073) embaixo do rótulo, menor e discreta. Sem o
   dinheiro da opção (D-079: às cegas). No voto do aparelho (fundo claro), o
   cinza não tem contraste: ali, a cor da letra. */
.opcao-impacto { font-size: 14px; font-weight: 400; line-height: 1.25; color: var(--texto-2); }
.botao-opcao-aluno.meu-voto .opcao-impacto { color: inherit; }
/* "Dinheiro da família: devendo R$ X", a linha única do formato simples. */
.familia-dinheiro { font-size: 17px; }
.familia-dinheiro[data-situacao="devendo"] b { color: var(--negativo); }

/* D-055: a opção aberta e a explicação dela formam um cartão só, com a borda
   clara ligando o botão à caixa de baixo. O scroll-margin desconta o topo fixo
   (52 px) e o aviso "Mais opções abaixo" (48 px mais a margem) quando a opção
   aberta rola para a vista. */
.opcao-aluno { display: flex; flex-direction: column; scroll-margin-top: 64px; scroll-margin-bottom: 76px; }
/* A frase da opção aberta que muda (voto enviado, guardado, recusado; o motivo
   do botão apagado) rola sozinha para a vista (retornoAVista, aluno.js), com
   as mesmas folgas da opção aberta. */
.opcao-detalhe .opcao-votada, .opcao-detalhe .opcao-aviso { scroll-margin-top: 64px; scroll-margin-bottom: 76px; }
body.espectador .opcao-detalhe .opcao-votada, body.espectador .opcao-detalhe .opcao-aviso { scroll-margin-top: 124px; }
.opcao-aluno.aberta .botao-opcao-aluno { border-color: var(--texto); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.opcao-detalhe {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 14px 12px;
  background: var(--superficie);
  border: 2px solid var(--texto); border-top: 0;
  border-radius: 0 0 var(--raio) var(--raio);
}
.opcao-narrativa { font-size: 16px; line-height: 1.35; font-style: italic; }
.botao-votar { width: 100%; min-height: 48px; font-size: 18px; }
.opcao-votada { min-height: 48px; display: flex; align-items: center; font-weight: 700; }

/* "Mais opções abaixo": fixo na base enquanto a última opção não aparece. */
.aviso-rolagem {
  position: fixed; z-index: 6;
  left: var(--lateral-aluno); right: var(--lateral-aluno);
  bottom: max(12px, env(safe-area-inset-bottom, 0));
  min-height: 48px;
  background: var(--texto); color: var(--texto-sobre-claro); border-color: var(--texto);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .6);
}
.situacao-corpo { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 12px; }
.situacao-corpo:empty { display: none; }

/* O detalhe recolhido das telas de situação, resultado e fim (.recolhido,
   D-065) tem a mesma caixa e o mesmo marcador da situação na decisão. */
.situacao-resumo, .recolhido, .conta-aberta {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
/* A conta em detalhe sempre aberta do formato simples (.conta-aberta, pedido
   de 14/10): a mesma caixa e o mesmo corpo do recolhido, com o título como um
   subtítulo pequeno no lugar do summary, sem o "▸ ver" e sem toque. */
.conta-aberta-titulo { margin: 0; padding: 12px 14px 10px; font-size: 15px; line-height: 1.3; }
.situacao-resumo summary, .recolhido summary {
  min-height: 48px; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; font-weight: 600;
}
/* Com display: flex, o Chromium tira o triângulo do <summary>, e a caixa
   parecia um cabeçalho vazio (revisão da F2, achado 17). O marcador diz que
   abre e fecha. */
.situacao-resumo summary::-webkit-details-marker, .recolhido summary::-webkit-details-marker { display: none; }
.situacao-resumo summary::after, .recolhido summary::after { content: "▸ ver"; flex: none; color: var(--texto-2); font-weight: 700; }
.situacao-resumo[open] summary::after, .recolhido[open] summary::after { content: "▾ fechar"; }
.situacao-resumo summary:focus-visible, .recolhido summary:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.recolhido-corpo { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 12px; }
/* Dentro da caixa, a conta do mês e os meses da história não levam outra caixa
   por cima: um cartão dentro do outro virava moldura sobre moldura. */
.recolhido .conta-mes, .conta-aberta .conta-mes,
.recolhido .conta-mes[data-resultado="faltou"], .conta-aberta .conta-mes[data-resultado="faltou"] { padding: 10px 0 0; border: 0; border-top: 1px solid var(--linha); border-radius: 0; background: none; }
.recolhido .conta-mes[data-resultado="faltou"] .conta-saldo, .conta-aberta .conta-mes[data-resultado="faltou"] .conta-saldo { font-size: 22px; }
.recolhido .historia-mes { background: var(--superficie-2); }
.situacao-resumo .indicadores { border: 0; border-top: 1px solid var(--linha); border-radius: 0 0 var(--raio) var(--raio); }

/* ---------- Modo individual: os dados do bloco e a turma ----------
   Pedido do Kleber de 13/10, 21h (prints 3 e 4): o bloco de dados também no
   celular, com o texto inteiro do telão. Na letra do celular (18 px) e com
   espaço entre os itens, como o telão ganhou em 06/10: em 360×740, cada item
   de até 140 caracteres vai a quatro ou cinco linhas, e a tela rola. O ano do
   próprio aluno vem embaixo, depois de um título com um fio por cima. */
.dados-contexto { font-size: 18px; line-height: 1.45; }
.dados-itens {
  display: flex; flex-direction: column; gap: 14px;
  padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.dados-item { padding-left: 12px; border-left: 3px solid var(--linha-forte); line-height: 1.4; overflow-wrap: anywhere; }
.dados-fonte { font-size: 14px; color: var(--texto-2); overflow-wrap: anywhere; }
.subtitulo-seu-ano { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--linha-forte); }
/* "Das 18 pessoas da turma, 3 fecharam o ano com dinheiro sobrando e 15
   terminaram devendo." Logo abaixo da frase do próprio ano: sem ranking e sem
   nome, só a contagem. */
.turma-fim {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  border-left: 4px solid var(--texto-2);
  background: var(--superficie);
  border-radius: 0 var(--raio) var(--raio) 0;
}
.turma-frase { font-size: 17px; font-weight: 600; line-height: 1.35; }

/* O resumo da turma no celular do apresentador (modo individual): as
   contagens do telão, nunca uma vaga nem um nome. */
.turma-contagem { font-size: 20px; }
.turma-contagem b { font-size: 26px; }
.turma-opcoes {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 14px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.turma-opcao { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.turma-opcao .opcao-letra { width: 30px; height: 30px; font-size: 16px; }
.turma-opcao-rotulo { font-size: 16px; line-height: 1.3; }
.turma-opcao-n { font-size: 20px; min-width: 2ch; text-align: right; }
/* D-084: embaixo da opção, o saldo e a família de quem a escolheu e as
   consequências, como no telão, na largura do rótulo e do número. */
.turma-opcao-valores, .turma-opcao-destaque, .turma-opcao-antes { grid-column: 2 / -1; margin-top: -6px; font-size: 15px; line-height: 1.35; }
.turma-opcao-destaque, .turma-opcao-antes { color: var(--texto-2); }
.turma-opcao-destaque b, .turma-opcao-antes b, .turma-opcao-valores b { color: var(--texto); }
.turma-opcao-zero { color: var(--texto-2); }
.turma-opcoes .turma-opcao + .turma-opcao { padding-top: 6px; border-top: 1px solid var(--linha); }
.turma-destaque {
  padding: 12px 14px;
  font-size: 19px; font-weight: 650; line-height: 1.35;
  background: var(--superficie); border: 2px solid var(--texto); border-left-width: 8px; border-radius: var(--raio);
}
.tabela-turma { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela-turma th, .tabela-turma td { padding: 6px 4px; text-align: center; }
.tabela-turma th:first-child { text-align: left; padding-left: 0; }
.tabela-turma thead th { font-size: 14px; font-weight: 700; color: var(--texto-2); border-bottom: 1px solid var(--linha-forte); }
.tabela-turma tbody tr + tr > * { border-top: 1px solid var(--linha); }
.tabela-turma td { font-size: 17px; font-weight: 700; }

/* [Li] "Li, pode seguir" (pedido do Kleber de 07/10): o botão largo embaixo
   do texto e, depois do toque, "Você já leu ✓" no mesmo lugar, com a mesma
   altura (a tela não pula), em texto e com borda (nunca só cor, D-016). No
   celular do apresentador, o "N de M leram" do telão. */
.lido-feito {
  min-height: var(--alvo);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--linha-forte); border-radius: var(--raio);
  font-size: 19px; font-weight: 700;
}
.lidos-contagem { font-size: 18px; }
.lidos-contagem b { font-size: 22px; }

@media (min-width: 600px) {
  body.aluno { font-size: 19px; }
  h1 { font-size: 30px; }
  h1.afirmacao { font-size: 26px; }
}