/* Celular do operador (docs/design/telas/celular/1). O mesmo layout roda no
   notebook do clube: largura máxima de celular, centralizado — não existe
   versão desktop (§12.1).

   Os tamanhos saem do protótipo aprovado e são conferidos por
   test/design.test.js. Onde o protótipo e um token divergirem, vale o
   protótipo e a divergência fica apontada aqui. */

.operador {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
}

/* -------------------------------------------------------------- cabeçalho */

.topo {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ground);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-bottom: 1px solid var(--surface-raised);
}

.topo-marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* DIVERGÊNCIA APONTADA: o protótipo escreve o nome do clube em 20px, e o
   token `title` está em 22px. Vale o protótipo. */
.topo-clube {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 22px;
  font-weight: var(--text-title-weight);
}

.topo-torneio {
  color: var(--ink-muted);
  font-size: var(--text-caption-size);
}

/* Estado da conexão sempre visível (§13.2). */
.conexao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption-size);
  color: var(--ok);
}

.conexao[data-ok='nao'] {
  color: var(--warn);
}

.conexao::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.relogio-linha {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.relogio-nivel {
  font-size: var(--text-label-size);
  color: var(--ink-muted);
}

.relogio-tempo {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 52px;
  line-height: 52px;
  font-weight: 600;
}

.topo[data-pausado='sim'] .relogio-tempo {
  color: var(--ink-muted);
}

.blinds-linha {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 24px;
  color: var(--ink-muted);
}

/* O próximo nível é apoio: fica no tamanho de legenda. */
.blinds-proximo {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
}

.numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.numero-bloco {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
}

.numero-rotulo {
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
}

.numero-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-money-size);
  font-weight: var(--text-money-weight);
}

/* ------------------------------------------------------------------ abas */

/* Três recortes num controle segmentado: um fundo só, e a escolhida acesa. */
.recortes {
  padding: 0 var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.abas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  background: var(--surface);
  padding: 4px;
  border-radius: var(--radius-md);
}

.aba {
  height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
}

.aba[aria-selected='true'] {
  background: var(--surface-raised);
  color: var(--ink);
}

/* Busca dentro do recorte aberto. No "todos" ela vai ao servidor; nos outros
   dois filtra a lista que já está na tela. */
.busca {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--tap-min);
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-muted);
}

.busca-entrada {
  flex-grow: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-body-size);
}

/* ----------------------------------------------------------------- lista */

.lista {
  list-style: none;
  margin: 0;
  padding: 4px var(--space-4) 104px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.linha {
  background: var(--surface);
  border-radius: var(--radius-md);
  min-height: 64px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--space-2) var(--space-2) var(--space-2) 14px;
}

.linha-toque {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  min-height: 48px;
  justify-content: center;
}

.linha-nome {
  font-size: var(--text-body-size);
  line-height: 22px;
  font-weight: var(--text-label-weight);
}

.linha-resumo {
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
}

.linha-saldo {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-body-size);
  font-weight: var(--text-money-weight);
}

.linha-saldo[data-sentido='clube paga'] {
  color: var(--red-text);
}

.linha-eliminada .linha-nome {
  color: var(--ink-muted);
}

.linha-posicao {
  font-family: var(--font-mono);
  color: var(--ink-muted);
  font-size: var(--text-caption-size);
}

.botao-x {
  width: var(--tap-min);
  height: var(--tap-min);
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--red-text);
  display: grid;
  place-items: center;
}

/* Na tela de inscrição, a linha termina em "Inscrever" — ou na etiqueta de
   quem já está na noite. */
.linha-inscrever {
  height: 44px;
  flex-shrink: 0;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
}

.etiqueta-jogando {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: var(--text-caption-size);
  color: var(--ok);
}

.etiqueta {
  font-size: var(--text-caption-size);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  background: var(--surface-raised);
  color: var(--ink-muted);
}

.vazio {
  color: var(--ink-muted);
  text-align: center;
  padding: var(--space-6);
}

/* --------------------------------------------------------------- rodapé */

.rodape {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: var(--space-4);
  background: linear-gradient(to top, var(--ground), transparent);
}

.rodape .botao-principal {
  width: 100%;
  min-height: 56px;
}

/* ---------------------------------------------------------------- login */

/* Tela 0 (telas/celular/0-login): ocupa a tela toda, logo e nome no meio, os
   campos embaixo — a mão do operador alcança sem esticar. */
.login {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--ground);
  max-width: 480px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
}

.login-marca {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* A logo ainda é a versão com fundo claro: o quadrado branco é do desenho,
   não do arquivo. */
.login-logo {
  width: 112px;
  height: 112px;
  border-radius: 22px;
  background: var(--on-red);
  object-fit: contain;
  padding: 6px;
  box-sizing: border-box;
}

.login-titulo {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 36px;
  font-weight: var(--text-title-weight);
}

.login-subtitulo {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-muted);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo-rotulo {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--ink-muted);
}

.campo-caixa {
  display: flex;
  align-items: center;
  height: 56px;
  padding-left: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-sizing: border-box;
}

/* Erro marca os dois campos, porque a mensagem não diz qual é o errado. */
.login[data-erro='sim'] .campo-caixa {
  border-color: var(--warn);
}

.campo-entrada {
  flex-grow: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
}

.botao-olho {
  width: var(--tap-min);
  height: var(--tap-min);
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.botao-entrar {
  height: 56px;
  margin-top: var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--red);
  color: var(--on-red);
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--text-label-weight);
}

.botao-entrar[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.login-nota {
  text-align: center;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

/* Aviso, não alarme: borda warn à esquerda. Vermelho no sistema é dinheiro e
   eliminação — erro de digitação não é nenhum dos dois. */
.alerta {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border-left: 4px solid var(--warn);
  color: var(--warn);
}

/* A caixa de erro da tela fica acima de tudo, inclusive do cabeçalho fixo:
   ela só aparece quando algo quebrou, e aí é o que importa ver. */
.alerta-topo {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 8px;
}

.alerta .icone-pequeno {
  flex-shrink: 0;
  margin-top: 2px;
}

.alerta-texto {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
}

/* --------------------------------------------------- folha de inscrição */

/* Tela 2 (telas/celular/2-inscricao): a busca sobe para o topo e o cabeçalho
   da noite sai — a tela inteira é para achar a pessoa. */
.operador[data-modo='inscricao'] .topo {
  display: none;
}

.operador[data-modo='inscricao'] .recortes {
  padding: var(--space-4) var(--space-4) var(--space-2);
}

/* O véu escurece a lista, mas ela continua visível: a folha é sobre o que
   estava na tela, não outra tela. */
.veu {
  position: fixed;
  inset: 0;
  z-index: 8;
  background: rgb(0 0 0 / 62%);
}

.folha {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 9;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  background: var(--surface-raised);
  border-radius: 16px 16px 0 0;
  padding: 10px var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 92vh;
  overflow-y: auto;
}

.folha-alca {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--line-strong);
  align-self: center;
}

.folha-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.folha-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 28px;
  font-weight: var(--text-title-weight);
}

.folha-subtitulo {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.botao-fechar {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cartoes-acao {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.cartao-acao {
  position: relative;
  height: 72px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 0 14px;
}

/* Escolhido ganha borda vermelha e o visto no canto. */
.cartao-acao[aria-pressed='true'] {
  border: 2px solid var(--red);
  background: var(--surface-raised);
}

.cartao-acao-visto {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--red);
  color: var(--on-red);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cartao-acao-nome {
  font-size: var(--text-body-size);
  font-weight: var(--text-label-weight);
}

.cartao-acao-detalhe {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
}

.chaves {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-strong);
}

.chave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  gap: 12px;
}

.chave-texto {
  display: flex;
  flex-direction: column;
}

.chave-titulo {
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--text-label-weight);
}

.chave-nota {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

/* Chave de bônus: fichas, nunca dinheiro. */
.chave-botao {
  position: relative;
  width: 52px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-sizing: border-box;
}

.chave-botao[aria-checked='true'] {
  background: var(--red);
}

.chave-botao::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--ink-muted);
}

.chave-botao[aria-checked='true']::after {
  left: auto;
  right: 3px;
  background: var(--ink);
}

.valor-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-min);
}

.valor-titulo {
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--text-label-weight);
}

.valor-nota {
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
}

.valor-direita {
  display: flex;
  align-items: center;
  gap: 12px;
}

.valor-numero {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: var(--text-label-weight);
}

/* Valor da regra ao lado do alterado: a alteração fica visível na hora, não só
   na auditoria. */
.valor-regra {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
}

/* Valor alterado fica marcado: a auditoria vai mostrar, e a tela mostra antes. */
.valor-numero[data-alterado='sim'] {
  color: var(--warn);
}

.valor-alterar {
  height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: var(--text-label-size);
  text-decoration: underline;
}

.resumo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 12px;
}

.resumo-bloco {
  display: flex;
  flex-direction: column;
}

.resumo-bloco:last-child {
  align-items: flex-end;
}

.resumo-rotulo {
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
}

.resumo-numero {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: var(--text-label-weight);
}

.botao-registrar {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--red);
  color: var(--on-red);
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--text-label-weight);
}

.botao-registrar[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------- folha do X */

.relogio-linha {
  justify-content: space-between;
  align-items: flex-end;
}

.relogio-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Pausar é gesto de dedo grande: o relógio para no meio da correria. */
.botao-relogio {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.opcoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Voltar para o jogo é o caminho comum: vermelho, largo, com o preço à
   direita. "Fica eliminado" é o outro caminho, e não compete em cor. */
.opcao {
  width: 100%;
  min-height: 64px;
  border-radius: var(--radius-md);
  border: 0;
  background: var(--red);
  color: var(--on-red);
  font-family: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-4);
}

.opcao[data-volta='nao'] {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.opcao-rotulo {
  font-size: 17px;
  font-weight: var(--text-label-weight);
}

.opcao-detalhe {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-label-size);
}

.opcao[data-volta='nao'] .opcao-detalhe {
  color: var(--ink-muted);
}

.folha-nota {
  margin: 0;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.botao-cancelar {
  height: var(--tap-min);
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--text-label-weight);
}

/* ------------------------------------------------------ tela do intervalo */

.operador[data-modo='intervalo'] .recortes,
.operador[data-modo='intervalo'] .lista {
  display: none;
}

.intervalo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 var(--space-4) 120px;
}

.intervalo-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.intervalo-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 32px;
  font-weight: var(--text-title-weight);
}

.intervalo-relogio {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  line-height: 32px;
  font-weight: var(--text-label-weight);
}

.contadores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.contador {
  background: var(--surface-raised);
  border-radius: 10px;
  padding: var(--space-2) 10px;
  display: flex;
  flex-direction: column;
}

.contador-rotulo {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.contador-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  line-height: 22px;
  font-weight: var(--text-label-weight);
}

/* "Faltam" é o número que trava a noite: amarelo enquanto houver pendente. */
.contador[data-alerta='sim'] .contador-rotulo,
.contador[data-alerta='sim'] .contador-valor {
  color: var(--warn);
}

.botao-chegou {
  width: 100%;
  height: var(--tap-min);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--text-label-weight);
}

.grupos {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.grupo-titulo {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-label-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cartao-jogador {
  background: var(--surface);
  border: 1px solid var(--surface);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Quem ainda não decidiu fica destacado — é quem segura o travamento. */
.cartao-jogador[data-pendente='sim'] {
  border-color: var(--warn);
}

.cartao-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cartao-nome-jogador {
  font-size: var(--text-body-size);
  line-height: 22px;
  font-weight: var(--text-label-weight);
}

.cartao-estado {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-label-weight);
  color: var(--ok);
}

.cartao-jogador[data-pendente='sim'] .cartao-estado {
  color: var(--warn);
}

.cartao-saldo {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-label-size);
  color: var(--ink-muted);
}

.escolhas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.escolha {
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* Depois de decidido, o que não foi escolhido apaga. */
.cartao-jogador[data-pendente='nao'] .escolha {
  border-color: var(--surface-raised);
  background: var(--surface);
  color: var(--ink-muted);
}

.escolha[aria-pressed='true'] {
  border: 0;
  background: var(--red);
  color: var(--on-red);
}

/* "Nenhum" escolhido não é ação: fica claro, não vermelho. */
.escolha[aria-pressed='true'][data-caminho='decisoes'] {
  background: var(--ink);
  color: var(--ground);
}

.escolha-rotulo {
  font-size: 15px;
  font-weight: var(--text-label-weight);
}

.escolha-detalhe {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-muted);
}

.escolha[aria-pressed='true'] .escolha-detalhe {
  color: inherit;
}

.rodape-travar {
  background: var(--ground);
  border-top: 1px solid var(--surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.aviso-travar {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--warn);
  text-align: center;
}

.botao-travar {
  width: 100%;
  height: 56px;
  border: 1px solid var(--surface-raised);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--text-label-weight);
}

.botao-travar[data-pronto='sim'] {
  border: 0;
  background: var(--red);
  color: var(--on-red);
}

/* ---------------------------------------------------- abrir noite (tela 5) */

.operador[data-modo='ajuste'] .topo,
.operador[data-modo='ajuste'] .recortes,
.operador[data-modo='ajuste'] .lista,
.operador[data-modo='ajuste'] .rodape,
.operador[data-modo='ajuste'] .abertura,
.operador[data-modo='abertura'] .topo,
.operador[data-modo='abertura'] .recortes,
.operador[data-modo='abertura'] .lista,
.operador[data-modo='abertura'] .rodape {
  display: none;
}

.abertura {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-4) var(--space-4) var(--space-8);
}

.abertura-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 32px;
  font-weight: var(--text-title-weight);
}

.abertura-subtitulo {
  font-size: var(--text-label-size);
  line-height: 20px;
  color: var(--ink-muted);
}

.abertura-secao {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-label-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cartao-formato {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 88px;
  padding: 14px 12px 14px var(--space-4);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
}

/* Formato que não abre fica apagado e diz o motivo, em vez de levar 409. */
.cartao-formato[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.cartao-formato-texto {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cartao-formato-nome {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 24px;
  font-weight: var(--text-title-weight);
}

.cartao-formato-entrada {
  font-size: 15px;
  line-height: 20px;
}

.cartao-formato-nota {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

/* ------------------------------------------- antes de começar (tela 8) */

/* Relógio parado é número apagado: ele ainda não conta nada. */
.topo[data-estado='nao_iniciado'] .relogio-tempo {
  color: var(--ink-disabled);
}

.comecar {
  padding: 0 var(--space-4) 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.botao-comecar {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--red);
  color: var(--on-red);
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--text-label-weight);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.nota-antes {
  font-size: var(--text-label-size);
  line-height: 20px;
  color: var(--ink-muted);
}

/* ------------------------------------------------- relógio (tela 9) */

.botao-pausa-grande {
  width: 100%;
  height: 64px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--red);
  color: var(--on-red);
  font-family: inherit;
  font-size: 19px;
  font-weight: var(--text-label-weight);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.botao-pausa-grande[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.corrigir-titulo {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--text-title-weight);
}

.passo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.passo-rotulo {
  font-size: var(--text-label-size);
  line-height: 20px;
  color: var(--ink-muted);
}

.passo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Alvo grande: o operador mexe nisso com a mesa esperando. */
.passo-botao {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 26px;
  font-weight: var(--text-label-weight);
}

.passo-botao[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.passo-centro {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.passo-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  line-height: 28px;
  font-weight: var(--text-label-weight);
}

.passo-nota {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.botao-secundario-largo {
  height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-body-size);
  font-weight: var(--text-label-weight);
}

.botao-secundario-largo[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.acrescimo-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line-strong);
  min-height: var(--tap-min);
}

.acrescimo-titulo {
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--text-label-weight);
}

/* ------------------------------------- conferir e ajustar (telas 6 e 7) */

.ajuste {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-4) var(--space-4) 140px;
}

.ajuste-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 28px;
  font-weight: var(--text-title-weight);
}

.ajuste-subtitulo {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.ajuste-secao {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.ajuste-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap-min);
}

.ajuste-rotulo {
  font-size: 15px;
  line-height: 20px;
}

/* Valor alterado em warn, com o do formato embaixo — o mesmo padrão do
   "Alterar" da inscrição. */
.ajuste-do-formato {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--warn);
}

.ajuste-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-body-size);
  color: var(--ink);
}

.ajuste-valor[data-alterado='sim'] {
  color: var(--warn);
}

.ajuste-rodape {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  padding: 12px var(--space-4) var(--space-4);
  background: var(--ground);
  border-top: 1px solid var(--surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ajuste-resumo {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.botao-abrir-noite {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--red);
  color: var(--on-red);
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--text-label-weight);
}

.botao-abrir-noite[disabled] {
  background: var(--surface);
  color: var(--ink-muted);
  cursor: not-allowed;
}

.botao-salvar-formato {
  height: var(--tap-min);
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--text-label-weight);
}