/* ==========================================================================
   Sistema de Gestão · Academias de Krav Maga — folha de estilo única
   Sem etapa de build: um arquivo, servido pelo Nginx, cacheado por 30 dias.

   A paleta é a das faixas. Ela não é decoração: cada módulo do sistema
   recebe a cor de uma faixa e a carrega numa tarja vertical à esquerda da
   tela, do mesmo jeito que a faixa marca o estágio do aluno no tatame.
   ========================================================================== */

/* Tipografia — TWK Everett
   ------------------------------------------------------------------------
   A TWK Everett é comercial (Weltkern) e não pode ser redistribuída, então
   os arquivos não vêm no pacote e este arquivo NÃO os referencia. Declarar
   um @font-face apontando para arquivo ausente faz o collectstatic abortar
   e o contêiner da aplicação reiniciar em laço.

   Depois de comprar a licença, ative em dois passos:

     1. copie os .woff2 para src/static/fonts/ com os nomes indicados em
        src/static/fonts/LEIA-ME.txt;
     2. cole no topo deste arquivo o conteúdo de
        src/static/fonts/twk-everett.css.exemplo.

   Sem isso, vale a pilha de reserva declarada em :root — o layout não muda,
   só a personalidade tipográfica.
   ------------------------------------------------------------------------ */

:root {
  /* Paleta oficial das faixas */
  --branca:   #FFFFFF;
  --amarela:  #FFD700;
  --laranja:  #FF7F00;
  --verde:    #2E8B57;
  --azul:     #1E90FF;
  --marrom:   #8B4513;
  --preta:    #1C1C1C;
  --vermelha: #FF2C2C;

  /* Papéis de interface derivados da paleta */
  --tinta:        var(--preta);
  --tinta-suave:  #55565A;
  --superficie:   var(--branca);
  --fundo:        #F5F5F3;
  --linha:        #E2E2DE;
  --sucesso:      var(--verde);
  --atencao:      var(--amarela);
  --alerta:       var(--laranja);
  --erro:         var(--vermelha);
  --acao:         var(--azul);

  --raio: 6px;
  --tarja: 6px;
  --sombra: 0 1px 2px rgba(28, 28, 28, .06), 0 4px 14px rgba(28, 28, 28, .05);

  font-family: "TWK Everett", "Inter", "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "tnum" 1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --- Estrutura da aplicação ---------------------------------------------
   Barra superior escura com a marca, navegação horizontal e o seletor de
   academia. A tarja colorida sob o item ativo é a mesma lógica das faixas:
   cada módulo carrega uma cor, e em poucos dias a pessoa reconhece onde
   está pela cor antes de ler o rótulo.
   ------------------------------------------------------------------------ */
.aplicacao { display: flex; flex-direction: column; min-height: 100vh; }

.barra {
  background: var(--preta);
  color: #D8D8D4;
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 12px rgba(0,0,0,.18);
}
.barra .linha-um {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 26px 0;
}
.barra .marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.barra .marca img { height: 34px; width: auto; display: block; }
.barra .marca .sistema {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: #8B8B87; border-left: 1px solid #3A3A38; padding-left: 12px;
  line-height: 1.3;
}
.barra .espaco { flex: 1; }

.seletor-academia { display: flex; align-items: center; gap: 8px; }
.seletor-academia select {
  background: #262626; color: var(--branca); border: 1px solid #3A3A38;
  padding: 6px 10px; border-radius: var(--raio); font-size: 13px; max-width: 260px;
}
.seletor-academia select:focus { border-color: var(--azul); box-shadow: none; }

.identidade { text-align: right; font-size: 12.5px; color: #A8A8A4; line-height: 1.4; }
.identidade strong { display: block; color: var(--branca); font-weight: 500; }
.identidade a { color: #A8A8A4; text-decoration: none; border-bottom: 1px solid #4A4A48; }
.identidade a:hover { color: var(--branca); }

.navegacao {
  display: flex; gap: 2px; padding: 0 20px; overflow-x: auto;
  scrollbar-width: none;
}
.navegacao::-webkit-scrollbar { display: none; }
.navegacao a {
  padding: 11px 14px 9px; color: #B4B4B0; text-decoration: none;
  font-size: 13.5px; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.navegacao a:hover { color: var(--branca); background: #262626; }
.navegacao a.ativo { color: var(--branca); font-weight: 500; background: #232323; }
.navegacao a.faixa-branca.ativo   { border-bottom-color: var(--branca); }
.navegacao a.faixa-amarela.ativo  { border-bottom-color: var(--amarela); }
.navegacao a.faixa-laranja.ativo  { border-bottom-color: var(--laranja); }
.navegacao a.faixa-verde.ativo    { border-bottom-color: var(--verde); }
.navegacao a.faixa-azul.ativo     { border-bottom-color: var(--azul); }
.navegacao a.faixa-marrom.ativo   { border-bottom-color: var(--marrom); }
.navegacao a.faixa-vermelha.ativo { border-bottom-color: var(--vermelha); }
.navegacao .global { margin-left: auto; color: #FFD700; }

/* Atalho para o Painel de Configurações, ao lado da identificação */
.barra .engrenagem {
  display: inline-flex; align-items: center; gap: 6px;
  color: #B4B4B0; text-decoration: none;
  padding: 6px 10px; border: 1px solid #3A3A38; border-radius: var(--raio);
}
.barra .engrenagem:hover { color: var(--branca); background: #262626;
  border-color: #4A4A48; }
.barra .engrenagem .rotulo-engrenagem { font-size: 12.5px; }
@media (max-width: 900px) { .barra .engrenagem .rotulo-engrenagem { display: none; } }

.conteudo { padding: 22px 26px 40px; max-width: 1400px; width: 100%; flex: 1; }

.topo {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.topo h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.topo .acoes { display: flex; gap: 8px; align-items: center; }
.migalhas { font-size: 12.5px; color: var(--tinta-suave); margin-bottom: 4px; }
.migalhas a { color: var(--tinta-suave); }

/* --- Rodapé de identificação --------------------------------------------
   Quem opera mais de uma unidade precisa saber, sem clicar em nada, em qual
   academia está trabalhando. Errar isso é cadastrar aluno na unidade errada.
   ------------------------------------------------------------------------ */
.rodape {
  border-top: 1px solid var(--linha); background: var(--superficie);
  padding: 9px 26px; font-size: 12.5px; color: var(--tinta-suave);
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  position: sticky; bottom: 0;
}
.rodape .separador { color: var(--linha); }
.rodape .academia { color: var(--tinta); font-weight: 500; }
.rodape .relogio { font-variant-numeric: tabular-nums; margin-left: auto; }

/* --- Cartões ------------------------------------------------------------ */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
}
.cartao h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-suave); margin: 0 0 10px; font-weight: 500;
}
.cartao .numero { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.cartao.destaque { border-left: var(--tarja) solid var(--amarela); }
.cartao.agenda   { border-left: var(--tarja) solid var(--azul); }
.cartao.risco    { border-left: var(--tarja) solid var(--vermelha); }

.vazio { color: var(--tinta-suave); font-size: 14px; padding: 8px 0; }

/* --- Tabelas ------------------------------------------------------------ */
table.dados { width: 100%; border-collapse: collapse; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
table.dados th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-suave); font-weight: 500; padding: 10px 14px;
  border-bottom: 1px solid var(--linha); background: #FAFAF8;
}
table.dados td { padding: 11px 14px; border-bottom: 1px solid var(--linha); font-size: 14px; }
table.dados tr:last-child td { border-bottom: none; }
table.dados tr:hover td { background: #FCFCFA; }

/* --- Marcadores de situação -------------------------------------------- */
.selo {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1.6;
}
.selo.ativo       { background: rgba(46,139,87,.12);  color: var(--verde); }
.selo.pendente    { background: rgba(255,215,0,.20);  color: #8A7400; }
.selo.atencao     { background: rgba(255,127,0,.14);  color: #A85100; }
.selo.critico     { background: rgba(255,44,44,.12);  color: var(--vermelha); }
.selo.neutro      { background: #EEEEEA; color: var(--tinta-suave); }

/* --- Botões ------------------------------------------------------------- */
.botao {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--preta); background: var(--preta); color: var(--branca);
  padding: 8px 15px; border-radius: var(--raio); font: inherit; font-size: 14px;
  font-weight: 500; cursor: pointer; text-decoration: none;
}
.botao:hover { background: #333; }
.botao.secundario { background: transparent; color: var(--tinta); border-color: var(--linha); }
.botao.secundario:hover { background: #F0F0EC; }
.botao.acao { background: var(--acao); border-color: var(--acao); }
.botao.perigo { background: var(--erro); border-color: var(--erro); }
.botao:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* --- Formulários -------------------------------------------------------- */
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], select, textarea {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branca);
  color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(30,144,255,.15);
}
.campo { margin-bottom: 14px; }
.erro-campo { color: var(--erro); font-size: 13px; margin-top: 4px; }

/* --- Mensagens ---------------------------------------------------------- */
.avisos { margin-bottom: 16px; display: grid; gap: 8px; }
.aviso { padding: 10px 14px; border-radius: var(--raio); font-size: 14px;
  border-left: var(--tarja) solid var(--tinta-suave); background: var(--superficie); }
.aviso.success { border-left-color: var(--verde); }
.aviso.error   { border-left-color: var(--vermelha); }
.aviso.warning { border-left-color: var(--laranja); }
.aviso.info    { border-left-color: var(--azul); }

/* --- Entrada no sistema ------------------------------------------------- */
.portico { display: grid; place-items: center; min-height: 100vh; background: var(--preta); }
.portico .caixa {
  width: min(400px, 92vw); background: var(--superficie); padding: 32px;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.portico h1 { font-size: 20px; margin: 0 0 4px; letter-spacing: -.02em; }
.portico p.sub { color: var(--tinta-suave); font-size: 14px; margin: 0 0 22px; }

/* Régua de faixas: assinatura visual da tela de entrada */
.regua-faixas { display: flex; height: 5px; border-radius: 3px; overflow: hidden;
  margin-bottom: 22px; }
.regua-faixas i { flex: 1; }
.regua-faixas i:nth-child(1) { background: var(--branca); box-shadow: inset 0 0 0 1px var(--linha); }
.regua-faixas i:nth-child(2) { background: var(--amarela); }
.regua-faixas i:nth-child(3) { background: var(--laranja); }
.regua-faixas i:nth-child(4) { background: var(--verde); }
.regua-faixas i:nth-child(5) { background: var(--azul); }
.regua-faixas i:nth-child(6) { background: var(--marrom); }
.regua-faixas i:nth-child(7) { background: var(--preta); }

/* --- QR de check-in projetado na recepção ------------------------------- */
.projecao { display: grid; place-items: center; gap: 18px; padding: 40px;
  background: var(--preta); color: var(--branca); border-radius: 10px; }
.projecao .codigo { font-size: 64px; font-weight: 700; letter-spacing: .12em;
  font-variant-numeric: tabular-nums; }
.projecao .validade { color: #9A9A96; font-size: 14px; }

/* --- Responsivo --------------------------------------------------------- */
@media (max-width: 900px) {
  .barra .linha-um { flex-wrap: wrap; gap: 10px; padding: 10px 14px 0; }
  .barra .marca .sistema { display: none; }
  .seletor-academia select { max-width: 180px; }
  .navegacao { padding: 0 8px; }
  .conteudo { padding: 16px 14px 32px; }
  .rodape { padding: 8px 14px; font-size: 11.5px; }
  .rodape .relogio { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .barra, .rodape, .botao, .navegacao { display: none; }
  body { background: white; }
}

/* --- Formulários longos --------------------------------------------------
   Cadastro de aluno e de academia têm muitos campos. Agrupar em blocos com
   título evita a parede de inputs que faz a recepção errar linha.
   ------------------------------------------------------------------------ */
.bloco-form {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 18px 20px; margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.bloco-form > h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-suave); font-weight: 500; margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--linha);
}
/* A grade de campos é definida uma vez só, mais abaixo, no bloco de layout
   autodimensionável.

   Havia aqui um sistema de 12 colunas com `span 6` / `span 3` / `span 12`.
   A 3.9.0 trocou a grade por `auto-fit` e redefiniu `.curto` e `.longo` —
   mas DEIXOU a regra base `.campo { grid-column: span 6 }`. Numa grade de
   quatro colunas, `span 6` faz o navegador criar colunas implícitas
   dimensionadas pelo conteúdo, e a linha inteira desanda: o campo encolhe
   até caber uma palavra por linha no texto de ajuda.

   Substituir metade de um sistema de layout é pior que não substituir: o
   que sobra não pertence a nenhum dos dois. */

.ajuda { font-size: 12.5px; color: var(--tinta-suave); margin-top: 4px; }
.obrigatorio { color: var(--vermelha); }
.acoes-form { display: flex; gap: 10px; align-items: center; margin-top: 4px; }

ul.errorlist { list-style: none; padding: 0; margin: 4px 0 0;
  color: var(--erro); font-size: 13px; }

/* Caixas de seleção múltipla (graduações da turma) */
.escolhas { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.escolhas label { display: flex; align-items: center; gap: 6px; font-weight: 400;
  margin: 0; }
.escolhas input { width: auto; }

/* --- Captação: fila de acompanhamento ----------------------------------- */
.filtros {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 12px 14px; margin-bottom: 16px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
}
.filtros .campo { margin: 0; min-width: 140px; }
.filtros .campo label { font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-suave); }
.filtros select, .filtros input { padding: 6px 9px; font-size: 13px; }

.barra-graduacao { display: flex; height: 8px; border-radius: 4px;
  overflow: hidden; margin: 4px 0 10px; border: 1px solid var(--linha); }
.barra-graduacao span { display: block; }

.contato { border-left: 5px solid var(--linha); }
.contato .nome { font-weight: 500; }
.selo.esfriando { background: rgba(255,44,44,.12); color: var(--vermelha); }
.acoes-regua { display: flex; gap: 5px; flex-wrap: wrap; }
.acoes-regua .botao { padding: 4px 9px; font-size: 12.5px; }
.marcado { opacity: .45; }

.grade-cartoes-acao { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.cartao-acao { display: block; text-decoration: none; color: inherit;
  background: var(--superficie); border: 1px solid var(--linha);
  border-left: var(--tarja) solid var(--azul);
  border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); }
.cartao-acao:hover { background: #FCFCFA; }
.cartao-acao strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.cartao-acao span { font-size: 12.5px; color: var(--tinta-suave); }

/* --- Painéis de acompanhamento ------------------------------------------
   Barras em CSS puro, sem biblioteca de gráfico. Menos peso na página e
   nenhuma dependência que precise ser atualizada por vulnerabilidade.
   ------------------------------------------------------------------------ */
.painel-grade { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.painel-grade .largo { grid-column: 1 / -1; }

.quadro {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra);
}
.quadro > h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-suave); font-weight: 500; margin: 0 0 4px;
}
.quadro > .legenda { font-size: 12.5px; color: var(--tinta-suave);
  margin: 0 0 14px; }

.linha-barra { margin-bottom: 11px; }
.linha-barra .rotulo {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; margin-bottom: 4px;
}
.linha-barra .rotulo .valor { color: var(--tinta-suave);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.trilho { height: 10px; background: #F0F0EC; border-radius: 5px; overflow: hidden; }
.trilho span { display: block; height: 100%; border-radius: 5px; }

.niveis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 14px; }
.nivel { border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 10px 12px; border-top: 4px solid var(--linha); }
.nivel .numero { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.nivel .rotulo { font-size: 12.5px; font-weight: 500; }
.nivel .faixa { font-size: 11.5px; color: var(--tinta-suave); }

.indicadores { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 14px; }
.indicador { border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 10px 12px; }
.indicador .rotulo { font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-suave); }
.indicador .numero { font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.indicador.positivo .numero { color: var(--verde); }
.indicador.negativo .numero { color: var(--vermelha); }

.seletor-janela { display: flex; gap: 4px; }
.seletor-janela a {
  padding: 5px 11px; font-size: 13px; border: 1px solid var(--linha);
  border-radius: var(--raio); text-decoration: none; color: var(--tinta);
  background: var(--superficie);
}
.seletor-janela a.ativo { background: var(--preta); color: var(--branca);
  border-color: var(--preta); }

/* --- Portal público do aluno ---------------------------------------------
   Telas para o celular do aluno, não para o computador da recepção: uma
   coluna, campos grandes, sem menu nem barra lateral.
   ------------------------------------------------------------------------ */
body.publico { background: var(--fundo); }
.portal { max-width: 640px; margin: 0 auto; padding: 0 16px 40px;
  min-height: 100vh; display: flex; flex-direction: column; }
.portal-topo { padding: 22px 0 14px; display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap; }
.portal-topo img { height: 40px; width: auto; }
.portal-topo .unidade { font-size: 13px; color: var(--tinta-suave);
  border-left: 1px solid var(--linha); padding-left: 12px; }
.portal .regua-faixas { margin-bottom: 20px; }
.portal-conteudo { flex: 1; }
.portal-conteudo h1 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 6px; }
.portal-conteudo .sub { color: var(--tinta-suave); font-size: 15px;
  margin: 0 0 20px; }
.portal-rodape { margin-top: 32px; padding-top: 14px;
  border-top: 1px solid var(--linha); font-size: 12.5px;
  color: var(--tinta-suave); }

.passos-portal { display: flex; gap: 6px; list-style: none; padding: 0;
  margin: 0 0 20px; font-size: 11.5px; flex-wrap: wrap; }
.passos-portal li { color: var(--tinta-suave); padding: 5px 10px;
  border-radius: 999px; background: #EDEDE9; }
.passos-portal li.atual { background: var(--preta); color: var(--branca);
  font-weight: 500; }
.passos-portal li.feito { background: rgba(46,139,87,.15); color: var(--verde); }

.lista-escolha { display: grid; gap: 12px; }
.lista-escolha .opcao {
  display: block; padding: 18px 20px; background: var(--superficie);
  border: 1px solid var(--linha); border-left: 6px solid var(--linha);
  border-radius: var(--raio); text-decoration: none; color: inherit;
  box-shadow: var(--sombra);
}
.lista-escolha .opcao:hover { border-left-color: var(--azul); background: #FCFCFA; }
.lista-escolha .opcao strong { display: block; font-size: 16px; margin-bottom: 4px; }
.lista-escolha .opcao span { font-size: 13.5px; color: var(--tinta-suave); }
.lista-escolha .destaque-amarelo { border-left-color: var(--amarela); }
.lista-escolha .destaque-verde { border-left-color: var(--verde); }

.cartao-form { background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); }
.cartao-form .campo { margin-bottom: 16px; }
.cartao-form input, .cartao-form select, .cartao-form textarea { font-size: 16px; }
.cartao-form h2.secao { font-size: 12px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-suave); font-weight: 500;
  margin: 24px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--linha); }
.cartao-form h2.secao:first-child { margin-top: 0; }

.botao.grande { width: 100%; justify-content: center; padding: 13px;
  font-size: 15px; margin-top: 8px; }
.botoes-sso { display: grid; gap: 8px; margin-bottom: 14px; }

ol.instrucoes { padding-left: 20px; }
ol.instrucoes li { margin-bottom: 8px; }

/* Campo de arquivo, que o navegador desenha de um jeito próprio */
input[type="file"] { padding: 10px; border: 1px dashed var(--linha);
  background: #FAFAF8; width: 100%; border-radius: var(--raio); }

@media (max-width: 520px) {
  .portal-conteudo h1 { font-size: 21px; }
  .cartao-form { padding: 16px; }
}

/* --- Menu da área do aluno ---------------------------------------------- */
.menu-aluno { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px;
  border-bottom: 1px solid var(--linha); padding-bottom: 10px; }
.menu-aluno a { padding: 7px 12px; font-size: 13.5px; text-decoration: none;
  color: var(--tinta-suave); border-radius: var(--raio); }
.menu-aluno a:hover { background: #EDEDE9; color: var(--tinta); }
.menu-aluno a.ativo { background: var(--preta); color: var(--branca);
  font-weight: 500; }


/* ===== Acessibilidade: botão de tema ===== */
.acessibilidade {
  background: none; border: 1px solid var(--linha);
  border-radius: 50%; width: 30px; height: 30px; cursor: pointer;
  font-size: 15px; line-height: 1; color: inherit;
}
.rodape .versao { opacity: .75; }
.portal-menu { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* Olhinho de senha */
.olhinho { margin-left: -34px; background: none; border: none; cursor: pointer;
           font-size: 15px; opacity: .55; vertical-align: middle; }
.olhinho.ativo { opacity: 1; }


/* ======================================================================= */
/*  TEMAS — claro é o :root; escuro e alto contraste trocam os papéis de   */
/*  interface. As cores das FAIXAS não mudam: faixa é identidade, não UI.  */
/* ======================================================================= */

html[data-tema="escuro"] {
  --tinta:        #ECECEA;
  --tinta-suave:  #A6A6AC;
  --superficie:   #232327;
  --fundo:        #161619;
  --linha:        #38383E;
  --sucesso:      #4CAF7D;
  --erro:         #FF5C5C;
  color-scheme: dark;
}
html[data-tema="escuro"] body { background: var(--fundo); color: var(--tinta); }
html[data-tema="escuro"] .cartao,
html[data-tema="escuro"] .quadro,
html[data-tema="escuro"] .bloco-form { box-shadow: none; }
html[data-tema="escuro"] input,
html[data-tema="escuro"] select,
html[data-tema="escuro"] textarea {
  background: #2B2B30; color: var(--tinta); border-color: var(--linha);
}

html[data-tema="contraste"] {
  --tinta:        #000000;
  --tinta-suave:  #000000;
  --superficie:   #FFFFFF;
  --fundo:        #FFFFFF;
  --linha:        #000000;
  --sucesso:      #005A00;
  --erro:         #B30000;
  --alerta:       #8A4B00;
}
html[data-tema="contraste"] body { background: #FFFFFF; color: #000000; }
html[data-tema="contraste"] a { text-decoration: underline; }
html[data-tema="contraste"] .cartao,
html[data-tema="contraste"] .quadro,
html[data-tema="contraste"] .bloco-form,
html[data-tema="contraste"] input,
html[data-tema="contraste"] select,
html[data-tema="contraste"] textarea,
html[data-tema="contraste"] .botao { border: 2px solid #000 !important; box-shadow: none; }
html[data-tema="contraste"] .selo { border: 2px solid #000 !important; color: #000 !important;
                                    background: #fff !important; font-weight: 700; }
html[data-tema="contraste"] .selo.critico { text-decoration: underline wavy; }
html[data-tema="contraste"] .vazio { color: #000; }


/* Seletor de academia no canto esquerdo, junto da marca: é o primeiro lugar
   onde quem cuida de mais de uma unidade olha antes de cadastrar qualquer
   coisa. */
.linha-um .seletor-academia { display: flex; align-items: center; gap: 6px;
                              margin-left: 18px; }
.linha-um .seletor-academia select { max-width: 280px; }


/* Identidade da pessoa logada no canto superior direito — foto ou iniciais,
   como nas suítes que a equipe já usa. Quem opera duas unidades reconhece
   pela foto que está na conta certa antes de ler qualquer texto. */
.identidade { display: flex; align-items: center; gap: 10px; }
.identidade-texto { display: flex; flex-direction: column; line-height: 1.25; }
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0;
          border: 2px solid rgba(255,255,255,.35); }
.avatar.iniciais { width: 36px; height: 36px; display: inline-flex;
                   align-items: center; justify-content: center;
                   background: #3a3a3f; color: #fff; font-size: 13px;
                   font-weight: 700; letter-spacing: .5px; }
html[data-tema="contraste"] .avatar { border: 2px solid #000; }

@media (max-width: 640px) {
  .identidade-texto { display: none; }  /* no celular, só a foto */
}

.identidade-aluno { display: flex; align-items: center; gap: 10px;
                    margin-bottom: 10px; }

/* Campo de CEP consultando o endereço */
input.buscando { background-image: linear-gradient(90deg,
  rgba(30,144,255,.12) 25%, transparent 25%, transparent 50%,
  rgba(30,144,255,.12) 50%, rgba(30,144,255,.12) 75%, transparent 75%);
  background-size: 16px 16px; }


/* Ficha médica: perguntas curtas em duas colunas em vez de uma coluna longa */
.grade-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
               gap: 4px 20px; }
.grade-ficha .campo { margin-bottom: 6px; }
.grade-ficha label { font-size: 13px; }
.campo-detalhe { background: rgba(255,127,0,.06); border-left: 3px solid var(--laranja, #FF7F00);
                 padding: 8px 12px; margin: 8px 0; border-radius: 4px; }
@media (max-width: 620px) { .grade-ficha { grid-template-columns: 1fr; } }

/* Botão de atualizar, ao lado do seletor de tema */
#botao-atualizar { font-size: 17px; line-height: 1; }
#botao-atualizar:hover { background: rgba(255,255,255,.12); }
html[data-tema="contraste"] #botao-atualizar { border: 2px solid #000; }


/* Balão dos termos na inscrição */
.balao-termos { max-width: 760px; width: 92vw; border: none; border-radius: 10px;
                padding: 0; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.balao-termos::backdrop { background: rgba(0,0,0,.45); }
.balao-cabecalho { display: flex; justify-content: space-between; align-items: center;
                   padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.balao-corpo { max-height: 55vh; overflow-y: auto; padding: 18px; }
.balao-corpo h1 { font-size: 19px; }
.balao-corpo h2 { font-size: 14px; margin-top: 16px; }
.balao-rodape { padding: 14px 18px; border-top: 1px solid var(--linha);
                background: rgba(0,0,0,.03); }
html[data-tema="escuro"] .balao-termos { background: var(--superficie); }


/* ===== Ficha médica: pergunta + Sim/Não lado a lado, duas colunas ====== */
.grade-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
               gap: 10px 26px; align-items: start; }
.pergunta-ficha { border-bottom: 1px solid var(--linha); padding-bottom: 8px; }
.pergunta-ficha label, .grade-ficha .campo label { font-size: 13.5px; }
/* As opções Sim/Não em linha, ao lado uma da outra */
.pergunta-ficha [id^="id_"] > div, .grade-ficha [id^="id_"] > div {
  display: inline-flex; align-items: center; margin-right: 22px; }
.pergunta-ficha [id^="id_"] label, .grade-ficha [id^="id_"] label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 15px;
  margin: 0; }
.pergunta-ficha input[type="radio"] { width: 18px; height: 18px; }

/* Detalhe herdado da pergunta: destacado logo abaixo dela */
.detalhes-da-pergunta { margin-top: 8px; border-left: 3px solid #C15A00;
                        background: rgba(255,127,0,.06); padding: 8px 10px;
                        border-radius: 4px; }
.detalhes-da-pergunta .campo { margin-bottom: 6px; }
@media (max-width: 640px) { .grade-ficha { grid-template-columns: 1fr; } }

/* Sexo biológico no cadastro: mesmas opções em linha */
.campo [id^="id_sexo"] > div { display: inline-flex; margin-right: 20px; }
.campo [id^="id_sexo"] label { display: inline-flex; align-items: center; gap: 6px; }


/* ===== Manequim de medidas ============================================= */
/* A arte fica à esquerda e os rótulos numa faixa à direita: sobre o corpo o
   texto disputava espaço com o traço e ficava ilegível. */
.manequim { margin: 0; max-width: 340px; }
.manequim-arte { position: relative; padding-right: 88px; }
.manequim-arte img { width: 100%; height: auto; display: block; }

.manequim .linha-medida { position: absolute; left: 6%; right: 0;
  display: flex; align-items: center; gap: 6px; transform: translateY(-50%); }
.manequim .linha-medida i { flex: 1; border-top: 2px dashed #C15A00;
  height: 0; display: block; }
.manequim .linha-medida b { width: 78px; font-size: 13px; font-weight: 600;
  color: #A34A00; line-height: 1.1; }

.manequim figcaption { font-size: 12.5px; color: var(--tinta-suave);
  line-height: 1.45; margin-top: 10px; }

html[data-tema="escuro"] .manequim-arte img { filter: invert(1) hue-rotate(180deg); }
html[data-tema="escuro"] .manequim .linha-medida b { color: #E39457; }
html[data-tema="contraste"] .manequim .linha-medida b { color: #000; }
html[data-tema="contraste"] .manequim .linha-medida i { border-color: #000; }

@media (max-width: 520px) {
  .manequim { max-width: 100%; }
  .manequim-arte { padding-right: 74px; }
  .manequim .linha-medida b { width: 68px; font-size: 12px; }
}

/* Link da definição, logo abaixo das opções de sexo: discreto, para
   informar sem competir com a pergunta. */
.link-definicao { font-size: 12.5px; color: #5B7FA6; text-decoration: underline;
                  text-underline-offset: 2px; }
.link-definicao:hover { color: #3E6488; }
.campo .ajuda:has(.link-definicao) { margin-top: 2px; }
html[data-tema="escuro"] .link-definicao { color: #8FB4D9; }
html[data-tema="contraste"] .link-definicao { color: #00309B; font-weight: 600; }


/* Amostras da tela de aparência: miniaturas que mostram a pele antes de aplicar */
.amostra-pele.escolhida { box-shadow: inset 0 0 0 2px #FFD700; }
.amostra { position: relative; height: 76px; border-radius: 10px;
           overflow: hidden; margin: 10px 0; border: 1px solid var(--linha); }
.amostra .barra { position: absolute; inset: 0 0 auto 0; height: 18px; }
.amostra .bloco { position: absolute; left: 10px; right: 10px; top: 28px;
                  height: 36px; border-radius: 8px; }
.amostra-padrao { background: #f6f6f3; }
.amostra-padrao .barra { background: #1C1C1C; }
.amostra-padrao .bloco { background: #fff; border: 1px solid #e4e4df; }
.amostra-padrao .faixas { position: absolute; left: 10px; right: 10px;
                          bottom: 6px; height: 5px; display: flex; }
.amostra-padrao .faixas i { flex: 1; }
.amostra-padrao .faixas i:nth-child(1){background:#fff}
.amostra-padrao .faixas i:nth-child(2){background:#FFD700}
.amostra-padrao .faixas i:nth-child(3){background:#FF7F00}
.amostra-padrao .faixas i:nth-child(4){background:#2E8B57}
.amostra-padrao .faixas i:nth-child(5){background:#1E90FF}
.amostra-padrao .faixas i:nth-child(6){background:#8B4513}
.amostra-padrao .faixas i:nth-child(7){background:#1C1C1C}
.amostra-dojo { background: radial-gradient(120px 70px at 20% 0,
  rgba(30,144,255,.5), transparent 60%), #0C0D12; }
.amostra-dojo .barra { background: rgba(255,255,255,.06); }
.amostra-dojo .bloco { background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.amostra-dojo .brilho { position: absolute; right: 14px; bottom: 10px;
  width: 42px; height: 6px; border-radius: 3px; background: #FFD700;
  box-shadow: 0 0 16px 2px rgba(255,215,0,.8); }
.amostra-aurora { background: radial-gradient(90px 60px at 10% 0,
  rgba(255,215,0,.45), transparent 60%), radial-gradient(90px 60px at 90% 10%,
  rgba(30,144,255,.4), transparent 60%), #F2F5FB; }
.amostra-aurora .barra { background: rgba(255,255,255,.75); }
.amostra-aurora .bloco { background: rgba(255,255,255,.9); border-radius: 14px;
  box-shadow: 0 10px 22px -12px rgba(27,34,51,.5); }
.amostra-aurora .brilho { position: absolute; right: 14px; bottom: 10px;
  width: 42px; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg,#1C1C1C,#2E3446); }


/* ===== Cartão da faixa (portal do aluno) e fotos de faixa =============== */
/* A faixa é o objeto que o aluno amarra na cintura; mostrá-la como foto, e
   não como quadradinho de cor, é o que transforma "faixa verde" de rótulo
   em meta. O fundo cinza sob a foto existe por causa da faixa branca:
   fotografada em fundo branco, ela desaparecia no tema claro. */
.faixa-foto { display: inline-block; border-radius: 8px; overflow: hidden;
              background: transparent; line-height: 0; }
.faixa-foto img { display: block; width: 100%; height: auto; }
.faixa-foto.clara { background: #E9E9E4; box-shadow: inset 0 0 0 1px #DCDCD6; }
html[data-tema="escuro"] .faixa-foto.clara { background: #2A2A2A;
                                             box-shadow: inset 0 0 0 1px #3A3A3A; }
html[data-tema="contraste"] .faixa-foto { box-shadow: inset 0 0 0 2px #000; }

.cartao-faixa { border-left: 6px solid var(--cor-faixa, var(--linha));
                margin-bottom: 18px; }
.faixas-lado-a-lado { display: flex; align-items: center; gap: 18px;
                      flex-wrap: wrap; }
.faixa-bloco { margin: 0; display: flex; align-items: center; gap: 14px;
               flex: 1; min-width: 210px; }
.faixa-bloco .faixa-foto { width: 170px; flex: 0 0 auto; }
.faixa-bloco.proxima { opacity: .82; }
.faixa-bloco figcaption { display: flex; flex-direction: column; gap: 2px; }
.faixa-bloco .rotulo { font-size: 11px; letter-spacing: .09em;
                       text-transform: uppercase; color: var(--tinta-fraca, #8B8B87); }
.faixa-bloco strong { font-size: 20px; line-height: 1.15; }
.faixa-bloco.sem-faixa { min-height: 84px; }
.seta-faixa { font-size: 26px; color: var(--tinta-fraca, #8B8B87);
              flex: 0 0 auto; }

/* A frase de incentivo fecha o cartão. Fica destacada porque é a única
   linha ali que pede uma ação, e não informa um número. */
.frase-treino { margin: 14px 0 0; padding: 12px 14px; border-radius: 8px;
                background: rgba(0,0,0,.035); font-size: 15px;
                line-height: 1.5; }
html[data-tema="escuro"] .frase-treino { background: rgba(255,255,255,.06); }
html[data-tema="contraste"] .frase-treino { border: 2px solid currentColor;
                                            background: transparent; }

/* Versão reduzida, para a tela inicial: some o TAF, encolhe a foto. */
.cartao-faixa.compacto .faixa-bloco .faixa-foto { width: 118px; }
.cartao-faixa.compacto .faixa-bloco strong { font-size: 17px; }
.cartao-faixa.compacto .frase-treino { font-size: 14px; padding: 10px 12px; }

@media (max-width: 620px) {
  .seta-faixa { display: none; }
  .faixa-bloco .faixa-foto { width: 128px; }
}

/* ===== Régua de graduação (painel) ===================================== */
.miniatura-faixa { display: inline-block; width: 64px; border-radius: 5px;
                   overflow: hidden; line-height: 0; }
.miniatura-faixa.clara { background: #E9E9E4; box-shadow: inset 0 0 0 1px #DCDCD6; }
html[data-tema="escuro"] .miniatura-faixa.clara { background: #2A2A2A; }
.miniatura-faixa img { display: block; width: 100%; height: auto; }

.faixa-editor-topo { display: flex; align-items: center; gap: 16px;
                     flex-wrap: wrap; margin-bottom: 12px; }
.faixa-editor .faixa-foto { width: 150px; flex: 0 0 auto; }
.grade-faixa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
               gap: 4px 20px; align-items: start; margin-bottom: 12px; }
.grade-faixa input[type="color"] { height: 38px; padding: 2px; }
@media (max-width: 900px) { .grade-faixa { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grade-faixa { grid-template-columns: 1fr; } }


/* ===== Visor de documentos em balão ==================================== */
/* Maior que o balão dos termos: aqui se lê um atestado escrito à mão e
   fotografado torto, e cada centímetro conta. */
.balao-visor { max-width: 980px; width: 94vw; border: none; border-radius: 10px;
               padding: 0; box-shadow: 0 18px 50px rgba(0,0,0,.30); }
.balao-visor::backdrop { background: rgba(0,0,0,.55); }
.balao-visor .balao-cabecalho { gap: 12px; }
.balao-visor-corpo { padding: 14px 16px; background: rgba(0,0,0,.04);
                     max-height: 76vh; overflow: auto; }
.balao-visor-corpo img { display: block; max-width: 100%; height: auto;
                         margin: 0 auto; border-radius: 6px;
                         background: #FFF; }
.balao-visor-corpo iframe { display: block; width: 100%; height: 70vh;
                            border: none; border-radius: 6px; background: #FFF; }
html[data-tema="escuro"] .balao-visor { background: var(--superficie); }
html[data-tema="escuro"] .balao-visor-corpo { background: rgba(255,255,255,.05); }
html[data-tema="contraste"] .balao-visor { border: 3px solid #000; }
@media (max-width: 620px) {
  .balao-visor-corpo iframe { height: 62vh; }
  .balao-visor .balao-cabecalho { flex-wrap: wrap; }
}


/* ===== IMC no cartão Situação do aluno ================================= */
/* Sem alarme visual: o bloco de atenção usa a mesma cor de "pendente" do
   resto do sistema, não vermelho. Este número já afastou gente do treino
   quando apresentado como problema, e afastar do treino é o contrário exato
   do que a academia quer. */
.bloco-imc { margin-top: 12px; padding: 10px 12px; border-radius: 8px;
             background: rgba(0,0,0,.035); }
.bloco-imc.atencao { background: rgba(214, 158, 46, .10); }
html[data-tema="escuro"] .bloco-imc { background: rgba(255,255,255,.06); }
html[data-tema="escuro"] .bloco-imc.atencao { background: rgba(214,158,46,.16); }
html[data-tema="contraste"] .bloco-imc { border: 2px solid currentColor;
                                         background: transparent; }
.bloco-imc .rotulo { font-size: 11px; letter-spacing: .09em;
                     text-transform: uppercase; color: var(--tinta-fraca, #8B8B87); }
.numero-imc { font-size: 22px; font-weight: 600; margin: 2px 0 6px;
              display: flex; align-items: center; gap: 10px; }
.numero-imc .selo { font-size: 11px; font-weight: 500; }


/* ===== Logo da marca ==================================================== */
/* Duas artes, uma por fundo. O tema escolhe qual aparece — nada de filtro.
   `brightness(0) invert(1)` (o que existia aqui até a 2.2.0) achatava a
   imagem inteira: o vermelho do "MESTRE KOBI" e os traços do selo sumiam
   junto com o preto, e a marca virava um borrão branco. Filtro opera em
   pixel e não sabe o que é logotipo; cor de marca se escolhe, não se
   recalcula. */
.marca-logo { display: inline-flex; line-height: 0; }
.marca-logo img {
  height: var(--logo-altura, 34px);
  width: var(--logo-largura, auto);
  max-width: 100%;
  display: block;
}
.marca-logo.bloco { display: block; margin: 0 auto 22px; }
.marca-logo.bloco img { height: auto; width: var(--logo-largura, 300px); }

/* Fundo claro é o padrão; o tema escuro inverte quem aparece. */
.marca-logo .para-fundo-escuro { display: none; }
html[data-tema="escuro"] .marca-logo .para-fundo-claro { display: none; }
html[data-tema="escuro"] .marca-logo .para-fundo-escuro { display: block; }

/* A barra do painel tem fundo escuro nos dois temas: lá vale sempre a arte
   clara, independentemente do tema escolhido. */
.barra .marca-logo .para-fundo-claro { display: none; }
.barra .marca-logo .para-fundo-escuro { display: block; }

/* Alto contraste: a arte de fundo escuro tem traço branco cheio, que é o que
   sobrevive à regra de contorno forte do tema. */
html[data-tema="contraste"] .marca-logo .para-fundo-claro { display: block; }
html[data-tema="contraste"] .marca-logo .para-fundo-escuro { display: none; }
html[data-tema="contraste"] .barra .marca-logo .para-fundo-claro { display: none; }
html[data-tema="contraste"] .barra .marca-logo .para-fundo-escuro { display: block; }

/* Versão na tela de entrada. Discreta de propósito: quem entra não precisa
   dela, mas o suporte pede o número na primeira pergunta do atendimento — e
   antes de logar não havia nenhuma tela que respondesse. */
.versao-rodape { display: block; margin-top: 14px; font-size: 11.5px;
                 letter-spacing: .05em; color: var(--tinta-suave, #8B8B87);
                 text-align: center; }
.portal-rodape .versao-rodape { display: inline; margin: 0 0 0 8px; }

/* ===== Balão do TAF ===================================================== */
.selo-acionavel { border: none; cursor: pointer; font: inherit;
                  font-size: 11px; letter-spacing: .04em; }
.selo-acionavel:hover { filter: brightness(1.08); }
.selo-acionavel:focus-visible { outline: 2px solid currentColor;
                                outline-offset: 2px; }
.balao-taf { max-width: 560px; width: 92vw; border: none; border-radius: 10px;
             padding: 0; box-shadow: 0 18px 50px rgba(0,0,0,.30); }
.balao-taf::backdrop { background: rgba(0,0,0,.5); }
.balao-taf-corpo { padding: 14px 16px; }
html[data-tema="escuro"] .balao-taf { background: var(--superficie); }
html[data-tema="contraste"] .balao-taf { border: 3px solid #000; }

/* ===== Projeção de IMC ================================================== */
/* Visual contido pelo mesmo motivo do bloco de IMC: isto é estímulo, não
   cobrança. Sem barra de progresso, sem contagem regressiva, sem vermelho —
   nada que transforme um corpo em meta a bater. */
.projecao-imc { margin-top: 14px; padding-top: 12px;
                border-top: 1px solid var(--linha); }
.projecao-imc .secao { font-size: 13px; margin: 0 0 8px; }
.cenarios-imc { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
                gap: 10px; margin: 10px 0; }
@media (max-width: 620px) { .cenarios-imc { grid-template-columns: 1fr; } }
.cenarios-imc .cenario { padding: 10px 12px; border-radius: 8px;
                         background: rgba(0,0,0,.035); }
.cenarios-imc .cenario.alcanca { background: rgba(76,175,125,.12); }
html[data-tema="escuro"] .cenarios-imc .cenario { background: rgba(255,255,255,.06); }
html[data-tema="escuro"] .cenarios-imc .cenario.alcanca { background: rgba(76,175,125,.18); }
html[data-tema="contraste"] .cenarios-imc .cenario { border: 2px solid currentColor;
                                                    background: transparent; }
.cenarios-imc .rotulo { font-size: 11px; letter-spacing: .08em;
                        text-transform: uppercase;
                        color: var(--tinta-suave, #8B8B87); }
.cenarios-imc .numero { font-size: 14px; margin: 6px 0 2px; }
.cenarios-imc .detalhe,
.cenarios-imc .prazo { font-size: 12.5px; margin: 2px 0;
                       color: var(--tinta-suave, #8B8B87); }
.aviso-projecao { margin: 10px 0; padding: 10px 12px; border-radius: 8px;
                  background: rgba(214,158,46,.10); font-size: 13px; }
html[data-tema="escuro"] .aviso-projecao { background: rgba(214,158,46,.16); }
html[data-tema="contraste"] .aviso-projecao { border: 2px solid currentColor;
                                              background: transparent; }

/* ===== Balão de taxas do Mercado Pago ================================== */
.balao-dica.balao-custos { max-width: 720px; width: 94vw; border: none;
                border-radius: 10px; padding: 0;
                box-shadow: 0 18px 50px rgba(0,0,0,.30); }
.balao-custos::backdrop { background: rgba(0,0,0,.5); }
.balao-custos-corpo { padding: 16px 18px; max-height: 76vh; overflow: auto; }
.balao-custos-corpo .secao { font-size: 13px; margin: 18px 0 6px; }
.balao-custos-corpo table { margin-bottom: 6px; }
.balao-custos-corpo ul { margin: 4px 0 0 18px; }
/* O aviso de "referência, não contrato" abre o balão porque é a informação
   mais importante dele: taxa de adquirente varia por negociação, e alguém
   que planeje repasse com o número da tela vai errar a conta. */
.aviso-custos { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px;
                background: rgba(214,158,46,.12); font-size: 13px; }
html[data-tema="escuro"] .balao-custos { background: var(--superficie); }
html[data-tema="escuro"] .aviso-custos { background: rgba(214,158,46,.18); }
html[data-tema="contraste"] .balao-custos { border: 3px solid #000; }
html[data-tema="contraste"] .aviso-custos { border: 2px solid currentColor;
                                            background: transparent; }

/* ===== Aviso de uso nas telas de entrada =============================== */
/* Discreto mas legível: precisa ser lido, não ignorado, e não pode competir
   com o campo de senha pela atenção de quem só quer entrar. */
.aviso-de-uso { margin-top: 18px; padding: 12px 14px; border-radius: 8px;
                background: rgba(0,0,0,.04); font-size: 11.5px;
                line-height: 1.55; text-align: left; }
.aviso-de-uso strong { display: block; margin-bottom: 4px; font-size: 12px;
                       letter-spacing: .03em; }
.aviso-de-uso p { margin: 0; color: var(--tinta-suave, #8B8B87); }
html[data-tema="escuro"] .aviso-de-uso { background: rgba(255,255,255,.05); }
html[data-tema="contraste"] .aviso-de-uso { border: 2px solid currentColor;
                                            background: transparent; }

/* ===== Balão do segundo fator na tela de entrada ======================= */
.balao-2fa { max-width: 380px; width: 92vw; border: none; border-radius: 10px;
             padding: 0; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.balao-2fa::backdrop { background: rgba(0,0,0,.62); }
.balao-2fa-corpo { padding: 20px 22px; text-align: center; }
.balao-2fa-corpo strong { display: block; font-size: 17px; margin-bottom: 6px; }
.balao-2fa-corpo .campo { text-align: left; margin-top: 14px; }
.balao-2fa-corpo input[name="codigo"] { font-size: 22px; letter-spacing: .35em;
                                        text-align: center; }
.balao-2fa-corpo code { font-size: 12px; word-break: break-all; }
.qr-2fa { display: block; margin: 12px auto; border-radius: 6px;
          background: #FFF; padding: 8px; }
html[data-tema="escuro"] .balao-2fa { background: var(--superficie); }
html[data-tema="contraste"] .balao-2fa { border: 3px solid #000; }
/* Sem <dialog>, o balão vira bloco na página em vez de sumir. */
.balao-2fa:not([open]) { display: none; }
.balao-2fa[open] { display: block; }

/* ===== Gatilho de dica e balão genérico ================================ */
/* O ícone é o gatilho, mas NÃO é o único conteúdo do botão: emoji sozinho
   não diz o que faz, some para quem usa leitor de tela e vira um enigma na
   segunda visita. O rótulo ao lado é o que torna o botão clicável de
   verdade; o ícone só o encontra mais rápido no meio do texto. */
.linha-dica { display: flex; align-items: center; gap: 10px;
              flex-wrap: wrap; margin: 10px 0 0; }
.botao-dica { display: inline-flex; align-items: center; gap: 7px;
              background: rgba(0,0,0,.04); border: 1px solid var(--linha);
              border-radius: 999px; padding: 5px 13px 5px 10px;
              font: inherit; font-size: 13px; cursor: pointer;
              color: inherit; line-height: 1.4; }
.botao-dica:hover { background: rgba(0,0,0,.08); }
.botao-dica:focus-visible { outline: 2px solid currentColor;
                            outline-offset: 2px; }
.icone-dica { font-size: 16px; line-height: 1; }
html[data-tema="escuro"] .botao-dica { background: rgba(255,255,255,.07); }
html[data-tema="escuro"] .botao-dica:hover { background: rgba(255,255,255,.12); }
html[data-tema="contraste"] .botao-dica { border: 2px solid currentColor;
                                          background: transparent; }

.balao-dica { max-width: 640px; width: 94vw; border: none;
              border-radius: 10px; padding: 0;
              box-shadow: 0 18px 50px rgba(0,0,0,.30); }
.balao-dica::backdrop { background: rgba(0,0,0,.5); }
.balao-dica-corpo { padding: 16px 18px; max-height: 70vh; overflow: auto; }
.balao-dica-corpo > .projecao-imc { margin-top: 0; padding-top: 0;
                                    border-top: none; }
/* Rodapé fixo com o botão de fechar: em balão que rola, o botão do cabeçalho
   sai da vista, e quem chega ao fim do texto fica sem saída à mão. */
.balao-rodape { padding: 12px 18px; border-top: 1px solid var(--linha);
                display: flex; justify-content: flex-end;
                background: rgba(0,0,0,.02); }
html[data-tema="escuro"] .balao-dica { background: var(--superficie); }
html[data-tema="escuro"] .balao-rodape { background: rgba(255,255,255,.04); }
html[data-tema="contraste"] .balao-dica { border: 3px solid #000; }
.balao-dica:not([open]) { display: none; }

/* ===== Amostras das peles com arte, na tela de Aparência =============== */
/* A amostra usa a arte de verdade, em miniatura: descrever "escura e quente"
   com um retângulo cinza obrigaria a gestão a aplicar a pele em todo mundo
   só para descobrir se gostou. */
.amostra-madrugada { background:
    linear-gradient(180deg, rgba(5,12,34,.45), rgba(5,12,34,.92)),
    url("../img/peles/ceu.e60bbb9bfc13.webp") center 30% / cover no-repeat; }
.amostra-madrugada .barra { background:
    linear-gradient(180deg, rgba(5,12,34,.70), rgba(5,12,34,.90)),
    url("../img/peles/sol-tarja.2ddc1c4f54af.webp") center / cover no-repeat; }
.amostra-madrugada .bloco { background: rgba(9,20,54,.80);
                            box-shadow: inset 0 0 0 1px rgba(150,180,255,.18); }

.amostra-travessia { background:
    linear-gradient(180deg, rgba(246,239,223,.66), rgba(246,239,223,.95)),
    url("../img/peles/montanha.9847dd47d743.webp") center 35% / cover no-repeat; }
.amostra-travessia .barra { background:
    linear-gradient(180deg, rgba(7,25,86,.84), rgba(5,18,64,.94)),
    url("../img/peles/ceu-tarja.a6ac8ecd1a19.webp") center / cover no-repeat; }
.amostra-travessia .bloco { background: rgba(255,253,246,.94);
                            box-shadow: inset 0 0 0 1px rgba(122,102,71,.24); }

.amostra-horizonte { background:
    linear-gradient(180deg, rgba(26,11,5,.38), rgba(26,11,5,.92)),
    url("../img/peles/sol.6a60314e3d23.webp") center 30% / cover no-repeat; }
.amostra-horizonte .barra { background:
    linear-gradient(180deg, rgba(26,11,5,.66), rgba(26,11,5,.90)),
    url("../img/peles/montanha-tarja.2c2ebe2e5869.webp") center / cover no-repeat; }
.amostra-horizonte .bloco { background: rgba(38,18,10,.86);
                            box-shadow: inset 0 0 0 1px rgba(250,215,74,.26); }

/* ===== Guia de acesso (senha e código) ================================= */
/* Letra MAIOR que a do resto do sistema. Não é descuido de escala: o
   público que mais precisa desta página é o que menos enxerga letra
   pequena, e uma ajuda ilegível não ajuda. Linha curta (620px) e entrelinha
   alta pela mesma razão — linha comprida faz o olho perder o retorno. */
.guia { max-width: 620px; margin: 0 auto; font-size: 17px; line-height: 1.72; }
.guia h2 { font-size: 23px; margin: 42px 0 14px; padding-top: 22px;
           border-top: 2px solid var(--linha); }
.guia h2:first-of-type { border-top: none; padding-top: 0; margin-top: 26px; }
.guia h3 { font-size: 18px; margin: 26px 0 8px; }
.guia p { margin: 0 0 14px; }

.guia-atalho { font-size: 14.5px; line-height: 2.1; padding: 12px 14px;
               background: rgba(0,0,0,.035); border-radius: 8px; }

.guia-destaque { font-size: 18.5px; padding: 14px 16px; border-radius: 8px;
                 background: rgba(30,123,69,.10);
                 border-left: 4px solid #1E7B45; }
html[data-tema="escuro"] .guia-destaque { background: rgba(76,175,125,.16); }

.guia-caixa { padding: 16px 18px; border-radius: 10px;
              background: rgba(0,0,0,.035); margin: 18px 0; }
.guia-caixa-simples { padding: 13px 16px; border-radius: 8px;
                      background: rgba(0,0,0,.035); font-size: 16px; }
html[data-tema="escuro"] .guia-caixa,
html[data-tema="escuro"] .guia-caixa-simples,
html[data-tema="escuro"] .guia-atalho { background: rgba(255,255,255,.06); }

.guia-alerta { padding: 12px 14px; border-radius: 8px; font-size: 16px;
               background: rgba(214,158,46,.14); margin: 12px 0 0; }

/* Passos numerados grandes: quem acompanha por telefone precisa dizer
   "está no passo três" e ser entendido de primeira. */
.guia .passos { counter-reset: passo; list-style: none; padding: 0; margin: 16px 0; }
.guia .passos li { counter-increment: passo; position: relative;
                   padding: 0 0 16px 46px; margin: 0; }
.guia .passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 1px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #C8102E; color: #FFF; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.guia .marcadores { padding-left: 22px; margin: 12px 0; }
.guia .marcadores li { margin-bottom: 10px; }
.guia .marcadores.nao li::marker { content: "✕  "; color: #C8102E; }

.lista-exemplos { list-style: none; padding: 0; margin: 12px 0; }
.lista-exemplos li { display: flex; flex-wrap: wrap; gap: 4px 12px;
                     align-items: baseline; margin-bottom: 10px; }
.lista-exemplos code { font-size: 16px; padding: 4px 9px; border-radius: 6px;
                       background: rgba(0,0,0,.07); }
.lista-exemplos span { font-size: 14px; color: var(--tinta-suave, #8B8B87); }
html[data-tema="escuro"] .lista-exemplos code { background: rgba(255,255,255,.10); }
.exemplo-ruim { font-family: ui-monospace, monospace; text-decoration: line-through;
                color: var(--tinta-suave, #8B8B87); }

.guia-figura { margin: 22px 0; }
.guia-figura img { width: 100%; height: auto; border-radius: 10px;
                   background: #FFF; padding: 10px;
                   box-shadow: 0 2px 12px rgba(0,0,0,.10); }
.guia-figura figcaption { font-size: 14.5px; text-align: center; margin-top: 8px;
                          color: var(--tinta-suave, #8B8B87); }

.perguntas dt { font-weight: 600; margin-top: 20px; font-size: 17.5px; }
.perguntas dd { margin: 6px 0 0; padding-left: 0; }
.guia-fecho { margin-top: 34px; padding-top: 18px;
              border-top: 2px solid var(--linha); font-size: 15px;
              color: var(--tinta-suave, #8B8B87); }

/* Impressão: a academia imprime e deixa junto do computador de quem
   precisa. Sem menu, sem rodapé, sem fundo — só o guia, em preto no branco,
   que é o que a impressora da recepção faz bem. */
@media print {
  body { background: #FFF !important; color: #000 !important; }
  .barra, .navegacao, .menu-aluno, .portal-rodape, .rodape, .guia-atalho,
  .avisos, .aviso-de-uso { display: none !important; }
  .guia { max-width: 100%; font-size: 12pt; }
  .guia h2 { page-break-after: avoid; font-size: 15pt; }
  .guia-figura, .guia-caixa, .passos li, .perguntas dt { page-break-inside: avoid; }
  .guia-figura img { box-shadow: none; border: 1px solid #CCC; }
  a { color: #000 !important; text-decoration: none; }
}

/* ===== QR das lojas oficiais, no guia ================================== */
/* Quatro códigos, um por aplicativo e sistema. O QR resolve o problema que
   nenhuma ilustração resolve: ele elimina a BUSCA, que é exatamente onde as
   imitações emboscam a pessoa. Quem aponta a câmera cai na página
   verificada, sem escolher nada. */
.grade-qr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
            margin: 16px 0; }
.grade-qr figure { margin: 0; text-align: center; }
.grade-qr img { width: 100%; height: auto; background: #FFF;
                border: 1px solid var(--linha); border-radius: 8px;
                padding: 5px; }
.grade-qr figcaption { font-size: 12.5px; line-height: 1.35; margin-top: 6px; }
@media (max-width: 520px) { .grade-qr { grid-template-columns: repeat(2, 1fr); } }
.lista-oficiais { list-style: none; padding: 0; margin: 8px 0 0; }
.lista-oficiais li { margin-bottom: 8px; font-size: 16px; }

/* O balão do guia é mais largo e mais alto que os demais: é documento
   inteiro, não um recado. */
.balao-guia { max-width: 720px; }
.balao-guia .balao-dica-corpo { max-height: 74vh; font-size: 16px; }
.balao-guia .guia h2 { font-size: 20px; margin-top: 30px; }
.balao-guia .guia h2:first-of-type { margin-top: 6px; }

/* ===== Escolha do QR: aparelho, depois aplicativo ====================== */
.escolha-qr { margin: 14px 0; }
.botoes-escolha { display: flex; gap: 10px; flex-wrap: wrap; }
.botoes-escolha .botao { font-size: 15px; }
.botoes-escolha .botao.escolhido {
  background: #1D1D1F; color: #FFF; border-color: #1D1D1F;
}
html[data-tema="escuro"] .botoes-escolha .botao.escolhido {
  background: #FFF; color: #1D1D1F;
}
.cartao-qr { margin-top: 16px; padding: 16px; border-radius: 10px;
             background: #FFF; border: 1px solid var(--linha);
             text-align: center; }
.cartao-qr img { width: 190px; height: 190px; display: block; margin: 0 auto 10px;
                 image-rendering: pixelated; }
.cartao-qr .botao { margin-top: 10px; }
/* Fundo sempre claro sob o QR, em qualquer tema: leitor de código precisa de
   contraste alto, e QR escuro sobre fundo escuro simplesmente não lê. */
html[data-tema="escuro"] .cartao-qr { background: #FFF; color: #1D1D1F; }
html[data-tema="escuro"] .cartao-qr .vazio { color: #5F5F5A; }
.ligacao-simples { background: none; border: none; padding: 0; font: inherit;
                   font-size: 13px; text-decoration: underline;
                   cursor: pointer; color: inherit; }

/* Botão de ajuda na barra do painel. Fica ao lado da identidade porque é
   onde a pessoa procura quando trava — junto do próprio nome, não perdido
   no menu de módulos. */
.ajuda-barra { display: inline-flex; align-items: center; gap: 6px;
               background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
               border-radius: 999px; padding: 5px 12px 5px 10px;
               font: inherit; font-size: 12.5px; color: inherit;
               cursor: pointer; margin-right: 12px; }
.ajuda-barra:hover { background: rgba(255,255,255,.18); }
.ajuda-barra:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 760px) { .ajuda-barra .rotulo-ajuda { display: none; } }

/* ===== Manual dentro do sistema ======================================== */
.manual { position: relative; }

/* Trava de cópia. É DISSUASÃO, não proteção: o texto continua alcançável
   pelo código-fonte, pela impressão e por captura de tela, e não existe
   forma de impedir isso num navegador. O que estas linhas fazem é impedir a
   cópia por descuido e deixar claro que o conteúdo tem dono.
   A busca da página continua funcionando: ela lê o DOM, não a seleção. */
.manual, .manual * {
  -webkit-user-select: none; -moz-user-select: none;
  -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* O campo de busca é a exceção: sem seleção não dá para corrigir o que se
   digitou. */
.manual input, .manual input * {
  -webkit-user-select: text; -moz-user-select: text; user-select: text;
}

.manual-topo { position: sticky; top: 0; z-index: 5; padding: 10px 0 12px;
               background: var(--fundo, #FFF); }
.manual-busca { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.manual-busca label { font-size: 12px; }
.manual-busca input { flex: 1; min-width: 220px; }
.manual-contagem { font-size: 12.5px; color: var(--tinta-suave, #8B8B87);
                   min-width: 92px; }
.manual-aviso { font-size: 11.5px; margin: 6px 0 0; }

.manual-corpo { display: grid; grid-template-columns: 250px minmax(0, 1fr);
                gap: 24px; align-items: start; }
@media (max-width: 860px) { .manual-corpo { grid-template-columns: 1fr; } }

.manual-indice { position: sticky; top: 96px; padding: 12px;
                 border: 1px solid var(--linha); border-radius: 10px;
                 background: rgba(0,0,0,.02); }
.manual-indice .rotulo { font-size: 11px; letter-spacing: .09em;
                         text-transform: uppercase; margin: 0 0 8px;
                         color: var(--tinta-suave, #8B8B87); }
.manual-indice a { display: block; padding: 6px 8px; border-radius: 6px;
                   font-size: 13.5px; text-decoration: none; color: inherit; }
.manual-indice a:hover { background: rgba(0,0,0,.05); }
.manual-indice a.ativo { background: rgba(200,16,46,.10); font-weight: 600; }
html[data-tema="escuro"] .manual-indice { background: rgba(255,255,255,.04); }
html[data-tema="escuro"] .manual-indice a:hover { background: rgba(255,255,255,.08); }

.manual-texto { max-width: 760px; font-size: 15.5px; line-height: 1.7; }
.manual-texto h2 { font-size: 24px; margin: 0 0 12px; }
.manual-texto h3 { font-size: 17px; margin: 26px 0 8px; }
.manual-texto p { margin: 0 0 12px; }
.manual-texto .entrada { font-size: 16.5px; padding: 12px 14px;
                         border-radius: 8px; background: rgba(0,0,0,.035);
                         border-left: 4px solid var(--acento, #C8102E); }
.manual-texto .nota { font-size: 14px; color: var(--tinta-suave, #8B8B87); }
.manual-texto code { font-size: 13.5px; padding: 2px 6px; border-radius: 4px;
                     background: rgba(0,0,0,.07); }
.manual-texto .caixa { padding: 13px 16px; border-radius: 9px; margin: 14px 0;
                       background: rgba(0,0,0,.035); }
.manual-texto .caixa.atencao { background: rgba(214,158,46,.13); }
.manual-texto .caixa h3 { margin-top: 0; font-size: 15px; }
html[data-tema="escuro"] .manual-texto .caixa,
html[data-tema="escuro"] .manual-texto .entrada,
html[data-tema="escuro"] .manual-texto code { background: rgba(255,255,255,.07); }
html[data-tema="escuro"] .manual-texto .caixa.atencao { background: rgba(214,158,46,.18); }

.manual-texto .passos { counter-reset: p; list-style: none; padding: 0; }
.manual-texto .passos li { counter-increment: p; position: relative;
                           padding: 0 0 12px 40px; }
.manual-texto .passos li::before {
  content: counter(p); position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%; background: #C8102E;
  color: #FFF; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; }
.manual-texto .marcadores { padding-left: 22px; }
.manual-texto .marcadores li { margin-bottom: 9px; }
.manual-texto .tabela { width: 100%; border-collapse: collapse; margin: 12px 0;
                        font-size: 14px; }
.manual-texto .tabela th, .manual-texto .tabela td {
  border: 1px solid var(--linha); padding: 8px 10px; text-align: left;
  vertical-align: top; }
.manual-texto .tabela th { background: rgba(0,0,0,.04); font-size: 13px; }
html[data-tema="escuro"] .manual-texto .tabela th { background: rgba(255,255,255,.06); }

.manual-rodape { margin-top: 32px; padding-top: 14px;
                 border-top: 2px solid var(--linha); font-size: 11.5px;
                 color: var(--tinta-suave, #8B8B87); }

/* Marca d'água: repetida em diagonal, atrás do texto e sem capturar clique. */
.manual-marca { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .05; background-repeat: repeat;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='340' height='170'>\
<text x='0' y='100' transform='rotate(-24 0 100)' font-family='sans-serif'\
 font-size='19' font-weight='700' fill='%23000'>\
© uso interno · não distribuir</text></svg>"); }
.manual-corpo, .manual-topo { position: relative; z-index: 1; }
html[data-tema="escuro"] .manual-marca { opacity: .07; filter: invert(1); }

/* Realce da busca */
mark.achado-manual { background: #FFE68A; color: #1D1D1F; padding: 0 1px; }
mark.achado-manual.atual { background: #FFB020; }

@media print {
  .manual-indice, .manual-topo { display: none !important; }
  .manual-marca { opacity: .10; }
}

/* Botão de ajuda no cabeçalho do painel. Reaproveita `.ajuda-barra`, que já
   existia: dois estilos para o mesmo botão era parte da confusão que fazia
   parecer haver duas ajudas. */
.ajuda-barra { text-decoration: none; }

/* Lista de unidades filiadas: 142 linhas com UF, cidade, unidade, bairro e
   referência. A fonte menor é o que faz a linha inteira caber sem cortar —
   e a linha cortada é justamente onde se perde a diferença entre duas
   unidades homônimas em cidades diferentes. */
select[name="academia_anterior"] { font-size: 13px; max-width: 100%; }
select[name="academia_anterior"] option { font-size: 13px; }

/* ===== Visor de valor derivado (nome da turma) ========================= */
/* Não se parece com campo de digitação, e é esse o ponto: um `<input
   readonly>` continua tendo borda e cursor de texto, então as pessoas
   tentam escrever nele. Aqui o fundo é chapado, não há borda de entrada e o
   cursor é o padrão. */
.rotulo-visor { display: block; font-size: 12.5px; margin-bottom: 5px;
                color: var(--tinta-suave, #6B6B66); }
.visor-derivado { display: block; padding: 11px 13px; border-radius: 8px;
                  background: rgba(0,0,0,.05); font-size: 15.5px;
                  font-weight: 600; line-height: 1.4;
                  border-left: 3px solid var(--acento, #C8102E);
                  cursor: default; user-select: text; }
.visor-derivado.incompleto { font-weight: 400; font-style: italic;
                             color: var(--tinta-suave, #8B8B87);
                             border-left-color: var(--linha); }
html[data-tema="escuro"] .visor-derivado { background: rgba(255,255,255,.07); }

/* Campo do número da federação: monoespaçado, para conferir dígito a dígito
   contra a carteirinha sem perder a posição. */
input[data-matricula-federacao] { font-family: ui-monospace, monospace;
                                  letter-spacing: 3px; text-transform: uppercase;
                                  max-width: 190px; }
input[data-matricula-federacao].completo { border-color: #1E7B45; }

/* Caixa de adiamento do atestado: visível, mas sem competir com o envio.
   O fundo âmbar sinaliza "isto tem consequência" sem gritar. */
.caixa-adiar { margin: 20px 0 8px; padding: 14px 16px; border-radius: 9px;
               background: rgba(214,158,46,.12); }
.caixa-adiar label { font-weight: 600; }
.caixa-adiar p { font-size: 13px; margin: 8px 0 0; }
html[data-tema="escuro"] .caixa-adiar { background: rgba(214,158,46,.18); }

/* =======================================================================
   LAYOUT AUTODIMENSIONÁVEL
   =======================================================================

   O PROBLEMA QUE ISTO RESOLVE

   O sistema tinha medidas em pixel fixo e pontos de quebra escolhidos um a
   um: 900px aqui, 760px ali, 620px acolá. Isso funciona nas telas em que
   alguém testou e falha em todas as outras — o notebook de 13 polegadas cai
   entre dois pontos de quebra e fica apertado, o monitor grande deixa o
   conteúdo numa ilha de 1400px com desertos dos lados, e o celular
   sobrepõe.

   A ABORDAGEM

   Em vez de listar tamanhos de tela, o layout passa a reagir ao espaço que
   REALMENTE tem. Três ferramentas:

     · `clamp()` para tipografia e espaçamento — cresce com a tela dentro
       de um piso e um teto, sem degrau;
     · `auto-fit` com `min()` nas grades — o número de colunas é
       consequência do espaço, não de uma regra decorada;
     · consultas de contêiner onde o navegador suporta — o cartão se ajusta
       ao próprio espaço, não ao da janela. É a diferença entre "a tela é
       grande" e "esta caixa tem espaço".

   Ponto de quebra continua existindo onde a MUDANÇA é de natureza, não de
   tamanho: barra lateral que vira menu, tabela que vira rolagem. Para o
   resto, o contínuo é melhor.
   ======================================================================= */

:root {
  /* Escala fluida. O primeiro valor é o piso (celular), o terceiro é o teto
     (monitor grande) e o do meio faz a transição. `vw` sozinho quebra o
     zoom do navegador; somado a um `rem` fixo, o zoom continua funcionando —
     e quem precisa de zoom é justamente quem mais precisa dele. */
  --passo-1: clamp(0.72rem, 0.68rem + 0.18vw, 0.82rem);   /* nota, rodapé   */
  --passo-2: clamp(0.80rem, 0.75rem + 0.24vw, 0.94rem);   /* apoio, tabela  */
  --passo-3: clamp(0.88rem, 0.83rem + 0.28vw, 1.03rem);   /* corpo          */
  --passo-4: clamp(1.00rem, 0.92rem + 0.40vw, 1.22rem);   /* subtítulo      */
  --passo-5: clamp(1.20rem, 1.05rem + 0.75vw, 1.70rem);   /* título         */
  --passo-6: clamp(1.50rem, 1.20rem + 1.50vw, 2.40rem);   /* número grande  */

  --folga-1: clamp(0.35rem, 0.30rem + 0.25vw, 0.60rem);
  --folga-2: clamp(0.60rem, 0.50rem + 0.45vw, 1.00rem);
  --folga-3: clamp(0.90rem, 0.70rem + 0.85vw, 1.60rem);
  --folga-4: clamp(1.20rem, 0.90rem + 1.40vw, 2.40rem);

  /* Largura de coluna de texto em CARACTERES, não em pixel: é o número de
     caracteres por linha que decide o conforto de leitura, e ele não muda
     quando a pessoa aumenta a fonte. */
  --coluna-de-leitura: 68ch;
}

/* --- A área de conteúdo respira com a tela ----------------------------- */
.conteudo {
  padding: var(--folga-3) var(--folga-4) var(--folga-4);
  /* Sem teto rígido de 1400px: em monitor grande o conteúdo continua
     crescendo até um limite generoso, e a margem lateral acompanha. */
  max-width: min(100%, 118rem);
  margin-inline: auto;
}

/* --- Grades que contam colunas sozinhas -------------------------------- */
/*
   `min(100%, 22rem)` é o detalhe que evita o transbordo clássico: com
   `minmax(22rem, 1fr)` puro, numa tela de 320px a coluna exige 22rem e
   estoura para fora. O `min` deixa a coluna encolher até a largura
   disponível quando não há espaço.

   `align-items: start` é o que conserta os cartões esticados: sem isso, um
   cartão curto ao lado de um comprido é alongado até a mesma altura e fica
   com um deserto branco embaixo.
*/
.cartoes {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--folga-2);
  align-items: start;
}

.grade-ficha,
.grade-faixa,
.grade-qr,
.grade-secoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--folga-2);
  align-items: start;
}
.niveis {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  align-items: start;
}

/* --- Tipografia fluida -------------------------------------------------- */
body { font-size: var(--passo-3); }
.conteudo h1 { font-size: var(--passo-5); line-height: 1.2; }
.cartao h2, .conteudo h2 { font-size: var(--passo-4); line-height: 1.3; }
.cartao h3, .conteudo h3 { font-size: var(--passo-3); }
.vazio, .ajuda, .nota { font-size: var(--passo-2); }
.rodape { font-size: var(--passo-1); }
.numero { font-size: var(--passo-6); line-height: 1.05; }
table.dados, table { font-size: var(--passo-2); }

/* --- O cartão reage ao PRÓPRIO espaço ---------------------------------- */
/*
   Consulta de contêiner: o cartão sabe quanto espaço ELE tem, não quanto a
   janela tem. Um cartão estreito dentro de uma tela larga passa a se
   comportar como cartão estreito — que é o que ele é. Sem isto, o mesmo
   cartão fica apertado numa coluna de três e folgado sozinho, com o mesmo
   CSS.
*/
@supports (container-type: inline-size) {
  .cartao { container-type: inline-size; }

  @container (max-width: 20rem) {
    .cartao .numero { font-size: var(--passo-5); }
    .cartao .grade-ficha,
    .cartao .grade-faixa { grid-template-columns: 1fr; }
    .cartao table.dados th,
    .cartao table.dados td { padding: 5px 6px; }
  }
}

/* --- Tabela larga rola em vez de estourar ------------------------------ */
/*
   Tabela é o caso em que o contínuo não resolve: coluna de tabela não
   encolhe indefinidamente sem virar sopa de letras. A saída honesta é
   rolagem horizontal, com sombra na borda avisando que há mais conteúdo —
   sem o aviso, a pessoa não descobre que pode rolar.
*/
/* A rolagem fica no ENVOLTÓRIO, não na tabela. Pôr `display:block` na
   própria tabela faz o navegador esquecer que aquilo é tabela e para de
   distribuir as colunas — as larguras colapsam para o conteúdo e a leitura
   piora justamente na tela onde ela já estava difícil. O envoltório é
   criado por `layout.js` só quando a tabela realmente não cabe. */
.rolagem-lateral {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background:
    linear-gradient(90deg, var(--superficie) 30%, transparent) left / 24px 100% no-repeat,
    linear-gradient(90deg, transparent, var(--superficie) 70%) right / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.rolagem-lateral > table { min-width: max-content; margin: 0; }

/* --- Navegação que não some nem sobrepõe ------------------------------- */
/*
   A barra de módulos tem quinze itens. Em tela estreita ela quebrava em
   várias linhas e empurrava o conteúdo para baixo, ou era cortada. Agora
   rola na horizontal, com o item ativo trazido para a vista — quem está no
   Financeiro abre a tela e vê "Financeiro", não o começo do menu.
*/
.navegacao {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  gap: var(--folga-1);
}
.navegacao a { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
.navegacao::-webkit-scrollbar { height: 3px; }
.navegacao::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 3px; }

/* --- Formulários: colunas por espaço, não por ponto de quebra ---------- */
.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--folga-2);
  align-items: start;
}
/* As classes de largura continuam valendo onde há espaço para elas, e
   deixam de valer sozinhas quando não há. */
/* Todo campo ocupa UMA coluna da grade automática. Quem decide quantas
   colunas existem é o `auto-fit`, a partir do espaço — não uma contagem
   escrita à mão. */
.grade-campos .campo { margin-bottom: 0; grid-column: span 1; }
.grade-campos .campo.curto { grid-column: span 1; }
.grade-campos .campo.longo { grid-column: 1 / -1; }

/* Texto corrido nunca passa da coluna de leitura, em nenhuma tela. */
.conteudo > p, .cartao > p, .manual-texto, .guia { max-width: var(--coluna-de-leitura); }

/* --- Alvo de toque em tela sensível ------------------------------------ */
/*
   `pointer: coarse` pergunta pelo APONTADOR, não pelo tamanho da tela: um
   tablet grande com dedo precisa de alvo grande, e um notebook pequeno com
   mouse não. Perguntar pela largura erraria os dois.
*/
@media (pointer: coarse) {
  .botao, .navegacao a, .menu-aluno a, select, input[type="checkbox"],
  input[type="radio"] { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; }
  .navegacao a { padding-block: 12px; }
}

/* --- Telas muito baixas ------------------------------------------------- */
/* Notebook de 13 polegadas em 1366×768 com a barra do navegador sobra pouca
   altura. Aqui o que precisa encolher é o espaçamento vertical, não a
   fonte — reduzir a fonte por causa da ALTURA prejudica a leitura sem
   ganhar linha nenhuma. */
@media (max-height: 800px) {
  :root { --folga-3: 0.7rem; --folga-4: 1rem; }
  .conteudo { padding-block: var(--folga-2) var(--folga-3); }
  .cartao { padding: 12px 14px; }
}

/* --- O portal do aluno cresce, dentro do razoável ----------------------- */
/*
   Ele estava preso em 640px. Numa tela de 1920 isso deixa a área do aluno
   numa faixa estreita no meio, com os cartões empilhados um sob o outro e
   deserto dos dois lados — a pessoa rola muito para ver pouco.

   O teto passa a ser fluido, entre 40rem e 64rem. Não é a largura da tela:
   é o que cabe sem que uma linha de texto fique longa demais para ler. Os
   cartões, com `auto-fit`, passam a formar duas colunas quando há espaço e
   uma quando não há — sem ninguém escolher.
*/
.portal {
  max-width: clamp(40rem, 78vw, 64rem);
  padding-inline: var(--folga-3);
}
@media (max-width: 42rem) { .portal { max-width: 100%; } }

/* Dentro do portal, texto corrido continua na coluna de leitura mesmo com
   o contêiner mais largo: parágrafo que atravessa 64rem cansa. */
.portal > p, .portal .cartao > p { max-width: var(--coluna-de-leitura); }

/* O menu do aluno também rola em vez de quebrar em quatro linhas. */
.menu-aluno {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--folga-1);
  scrollbar-width: thin; scroll-snap-type: x proximity;
}
.menu-aluno a { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

/* --- Cartão da faixa: encolhe em vez de transbordar --------------------- */
/*
   O bloco tinha `min-width: 210px` fixo e a legenda não podia encolher.
   Num celular de 380px, com o recuo do cartão, sobram cerca de 300px — o
   segundo bloco não cabia e escorria para fora da tela, levando junto o
   nome da próxima faixa. Transbordo horizontal é dos piores defeitos de
   layout: a pessoa não vê que há mais conteúdo, e nem sempre consegue rolar
   até ele.

   Três correções, nesta ordem de importância:

     1. `min-width: 0` na legenda. Item de flex não encolhe abaixo do próprio
        conteúdo por padrão; sem isto, texto comprido empurra a caixa para
        fora e nenhuma outra regra segura.
     2. O piso de 210px passa a ceder quando não há 210px.
     3. A foto da faixa vira porcentagem em tela estreita, com teto em pixel.
*/
.faixa-bloco { min-width: 0; }
.faixa-bloco figcaption { min-width: 0; }
.faixa-bloco figcaption strong,
.faixa-bloco figcaption .vazio { overflow-wrap: anywhere; }

@supports (width: min(1px, 1%)) {
  .faixa-bloco { min-width: min(210px, 100%); }
  .faixa-bloco .faixa-foto { width: min(170px, 38%); }
}

/* Fallback para navegador sem `min()`: um ponto de quebra faz o mesmo
   trabalho, com menos elegância e o mesmo resultado prático. */
@media (max-width: 560px) {
  .faixas-lado-a-lado { flex-direction: column; align-items: stretch; }
  .faixa-bloco { min-width: 0; }
  .faixa-bloco .faixa-foto { width: 110px; }
}

/* Nada no sistema pode escorrer para fora da tela na horizontal. É a rede
   de segurança: se alguma medida futura passar do limite, o conteúdo quebra
   a linha em vez de sumir pela borda. */
html, body { overflow-x: hidden; }
.cartao, .conteudo, .portal { min-width: 0; overflow-wrap: break-word; }

/* --- Leitura automática do atestado ------------------------------------ */
/* A caixa existe para que a pessoa SAIBA que os campos foram preenchidos
   por leitura. Sem a marca, ela assume que digitou e confere menos — e o
   ganho de precisão vira perda. */
.caixa-lido { margin: 4px 0 16px; padding: 13px 15px; border-radius: 9px;
              background: rgba(30,123,69,.10);
              border-left: 3px solid #1E7B45; }
.caixa-lido p { margin: 0 0 6px; font-size: var(--passo-2); }
.caixa-lido p:last-child { margin-bottom: 0; }
.marca-lido { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px;
              border-radius: 999px; background: rgba(30,123,69,.18);
              font-size: 11.5px; font-weight: 600; }
html[data-tema="escuro"] .caixa-lido { background: rgba(76,175,125,.14); }

/* =======================================================================
   TRILHA DE PREPARAÇÃO FÍSICA
   =======================================================================
   Identidade própria dentro do sistema, mas sem sair da casa: a cor de
   destaque vem da CAPACIDADE, não de uma paleta nova. Assim o módulo é
   reconhecível e o aluno não sente que trocou de produto.
   ======================================================================= */

.trilha { display: grid; gap: var(--folga-2); }
.trilha > .cartao, .trilha > .cartoes { margin: 0; }

.trilha-cabecalho { display: flex; gap: var(--folga-2); align-items: center;
                    justify-content: space-between; flex-wrap: wrap; }
.trilha-cabecalho h1 { margin: 2px 0 0; }
.trilha .rotulo { font-size: 11.5px; letter-spacing: .09em;
                  text-transform: uppercase; margin: 0;
                  color: var(--tinta-suave, #8B8B87); }

.selo-situacao { padding: 5px 13px; border-radius: 999px; font-size: 12.5px;
                 font-weight: 600; }
.selo-situacao.ativo { background: rgba(30,123,69,.15); color: #1E7B45; }
.selo-situacao.pausado { background: rgba(214,158,46,.20); color: #8A6100; }
.selo-situacao.aguardando { background: rgba(0,0,0,.07); }

/* --- Comemoração da insígnia nova ------------------------------------- */
/* Aparece só na visita em que foi concedida. Conceder sem avisar é o mesmo
   que não conceder. */
.trilha-comemora { padding: var(--folga-2); border-radius: 12px;
                   background: linear-gradient(135deg, rgba(30,123,69,.14),
                               rgba(26,95,180,.10)); }
.comemora-item { display: flex; gap: var(--folga-2); align-items: center; }
.comemora-item h2 { margin: 2px 0 4px; }
.comemora-item p { margin: 0; }

/* --- A semana --------------------------------------------------------- */
.cartao-semana .semana-topo { display: flex; justify-content: space-between;
                              align-items: flex-start; gap: var(--folga-2); }
.cartao-semana .numero { font-size: var(--passo-6); font-weight: 700;
                         line-height: 1; margin: 2px 0; }
.cartao-semana .numero span { font-size: var(--passo-2); font-weight: 400;
                              color: var(--tinta-suave, #8B8B87);
                              margin-left: 6px; }
.cartao-semana .numero.pequeno { font-size: var(--passo-5); }
.semana-sequencia { text-align: right; }

.barra-semana { display: flex; gap: 6px; margin: 12px 0 8px; }
.barra-semana span { flex: 1; height: 10px; border-radius: 5px;
                     background: rgba(0,0,0,.08); }
.barra-semana span.feita { background: #1E7B45; }
html[data-tema="escuro"] .barra-semana span { background: rgba(255,255,255,.12); }

/* --- Insígnias -------------------------------------------------------- */
.fila-insignias { display: flex; gap: var(--folga-2); flex-wrap: wrap;
                  margin-top: 10px; }
.fila-insignias figure { margin: 0; text-align: center; width: 84px; }
.fila-insignias figcaption { font-size: 11px; line-height: 1.3;
                             margin-top: 2px; }

.grade-insignias { display: grid; gap: var(--folga-2); margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  align-items: start; }
.grade-insignias figure { margin: 0; text-align: center; }
.grade-insignias figcaption { display: grid; gap: 2px; margin-top: 6px; }
.grade-insignias figcaption strong { font-size: 13px; }
.grade-insignias .vazio { font-size: 11.5px; }
.grade-insignias .frase { font-size: 11.5px; line-height: 1.4;
                          color: var(--tinta-suave, #8B8B87); }
/* Pendente fica visível, não escondida: mostrar o que falta diz "existe e é
   alcançável"; esconder diria "não existe". */
.grade-insignias figure.pendente { opacity: .75; }

/* --- Capacidade e exercício ------------------------------------------- */
.cartao-capacidade, .cartao-exercicio, .cartao-marca {
  border-left: 5px solid var(--cor-capacidade, var(--linha)); }
.cartao-topo { display: flex; align-items: baseline;
               justify-content: space-between; gap: var(--folga-1);
               flex-wrap: wrap; }
.selo-estagio { padding: 3px 10px; border-radius: 999px; font-size: 11.5px;
                font-weight: 600; background: rgba(0,0,0,.06); }
.selo-estagio.nivel-1 { background: rgba(30,123,69,.15); color: #1E7B45; }
.selo-estagio.nivel-2 { background: rgba(26,95,180,.15); color: #1A5FB4; }
.selo-estagio.nivel-3 { background: rgba(200,16,46,.13); color: #C8102E; }

.caixa-cuidado { margin: 12px 0 0; padding: 11px 14px; border-radius: 8px;
                 background: rgba(214,158,46,.14); font-size: var(--passo-2); }
.caixa-cuidado strong { display: block; margin-bottom: 4px; }
.assinatura { font-style: italic; margin-top: 10px; }

.filtro-capacidades { display: flex; gap: 8px; flex-wrap: wrap;
                      margin-bottom: 4px; }
.filtro-capacidades a { padding: 6px 13px; border-radius: 999px;
                        font-size: 13px; text-decoration: none;
                        color: inherit; background: rgba(0,0,0,.05); }
.filtro-capacidades a.ativo { background: var(--cor-capacidade, #26262A);
                              color: #FFF; }

/* --- Marcas ----------------------------------------------------------- */
.marca-numeros { display: grid; gap: var(--folga-2); margin: 10px 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.marca-numeros .numero { font-size: var(--passo-5); font-weight: 700;
                         margin: 2px 0; line-height: 1; }
.marca-numeros .numero span { font-size: var(--passo-2); font-weight: 400;
                              margin-left: 5px;
                              color: var(--tinta-suave, #8B8B87); }
.marca-numeros .numero.positivo { color: #1E7B45; }

.barra-requisito { height: 9px; border-radius: 5px; background: rgba(0,0,0,.08);
                   overflow: hidden; margin: 10px 0 6px; }
.barra-requisito .preenchida { height: 100%;
                               background: var(--cor-capacidade, #1A5FB4); }

.forma-sessao, .forma-marca { display: grid; gap: var(--folga-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  align-items: end; margin: 10px 0; }
.forma-sessao .campo.longo { grid-column: 1 / -1; }

.cartao-atalho { text-decoration: none; color: inherit; display: block; }
.cartao-atalho:hover { border-color: var(--acento, #C8102E); }

/* --- O rodapé que diz o que a trilha NÃO é ---------------------------- */
/* Repetido em todas as telas do módulo de propósito: sem ele, insígnia vira
   passe na cabeça de quem a recebe. */
.trilha-limites { margin-top: var(--folga-3); padding: var(--folga-2);
                  border-radius: 10px; background: rgba(0,0,0,.035);
                  font-size: var(--passo-2); line-height: 1.6; }
.trilha-limites p { margin: 0 0 8px; }
.trilha-limites p:last-child { margin-bottom: 0; }
html[data-tema="escuro"] .trilha-limites { background: rgba(255,255,255,.05); }

.trilha-convite h1 { margin: 4px 0 8px; }
.texto-consentimento { padding: 13px 15px; border-radius: 9px;
                       background: rgba(0,0,0,.04); margin: 10px 0;
                       font-size: var(--passo-2); max-height: 260px;
                       overflow-y: auto; }
html[data-tema="escuro"] .texto-consentimento { background: rgba(255,255,255,.06); }

/* --- Foco da trilha: o que o aluno está buscando ----------------------- */
.cartao-foco h2 { margin: 2px 0 10px; display: flex; gap: 10px;
                  align-items: center; flex-wrap: wrap; }
.lista-requisitos { list-style: none; padding: 0; margin: 10px 0 0;
                    display: grid; gap: 7px; }
.lista-requisitos li { display: flex; gap: 10px; align-items: baseline;
                       flex-wrap: wrap; padding: 8px 12px; border-radius: 8px;
                       background: rgba(0,0,0,.04); }
.lista-requisitos li span:last-child { color: var(--tinta-suave, #6B6B66);
                                       font-size: var(--passo-2); }
.lista-requisitos.compacta li { padding: 5px 10px; font-size: var(--passo-2); }
html[data-tema="escuro"] .lista-requisitos li { background: rgba(255,255,255,.06); }

/* A recomendação é marcada em TODO lugar onde aparece. Sem a marca, o aluno
   da branca acha que tem exame — e chega ao instrutor cobrando um teste que
   não existe. */
.selo-recomendacao { padding: 2px 9px; border-radius: 999px; font-size: 10.5px;
                     font-weight: 700; letter-spacing: .04em;
                     text-transform: uppercase;
                     background: rgba(26,95,180,.16); color: #1A5FB4; }
.selo-ciclos { padding: 3px 11px; border-radius: 999px; font-size: 12px;
               font-weight: 700; background: rgba(200,16,46,.14);
               color: #C8102E; }
.caixa-horizonte { margin-top: 16px; }

/* Ponto de Partida: convite, não cobrança. Sem números grandes e sem barra
   de progresso — é registro, não meta. */
.cartao-partida { border-left: 5px solid #1E7B45; }
.cartao-partida h2 { margin: 2px 0 8px; }

/* --- Escolha do que foi treinado -------------------------------------- */
/* Lista de opções em vez de `select`: cada uma precisa mostrar o que cobra
   e para que serve, e isso não cabe numa linha de menu suspenso. */
.escolha-treino { display: grid; gap: 8px; margin-top: 6px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.opcao-treino { display: flex; gap: 10px; align-items: flex-start;
                padding: 11px 13px; border-radius: 9px; cursor: pointer;
                background: rgba(0,0,0,.035);
                border-left: 4px solid transparent; }
.opcao-treino.cobrada { border-left-color: var(--cor-capacidade, #C8102E);
                        background: rgba(0,0,0,.055); }
.opcao-treino:hover { background: rgba(0,0,0,.08); }
.opcao-treino:has(input:checked) { outline: 2px solid var(--cor-capacidade, #C8102E);
                                   outline-offset: 1px; }
.opcao-corpo { display: grid; gap: 3px; }
.opcao-itens { display: grid; gap: 2px; font-size: var(--passo-2); }
.item-exigido b { font-weight: 700; }
.opcao-para-que { font-size: 11.5px; line-height: 1.4; }
html[data-tema="escuro"] .opcao-treino { background: rgba(255,255,255,.05); }

.execucao-item { padding: 10px 0; border-bottom: 1px solid var(--linha); }
.execucao-item:last-child { border-bottom: 0; }
.execucao-item .exigido { display: inline-block; margin-left: 8px;
                          font-size: 12px; padding: 1px 9px; border-radius: 999px;
                          background: rgba(0,0,0,.07); }
.execucao-item p { margin: 5px 0 0; font-size: var(--passo-2); }

.opcao-outro { border-left-color: var(--linha); margin-top: 4px; }
.campo-dor summary { cursor: pointer; font-size: var(--passo-2);
                     padding: 6px 0; }
.dor-campos { display: grid; gap: var(--folga-2); margin: 6px 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.rodape-alvo { padding: 9px 12px; border-radius: 8px;
               background: rgba(0,0,0,.04); margin-bottom: 8px; }
html[data-tema="escuro"] .rodape-alvo { background: rgba(255,255,255,.06); }

/* --- Check-in no celular ---------------------------------------------- */
/* Quem usa isto está de pé na porta da academia, com o celular numa mão e a
   mochila na outra. Alvo grande, uma decisão só. */
.checkin { display: grid; gap: var(--folga-2); }
.botao-checkin { width: 100%; min-height: 64px; font-size: var(--passo-4);
                 font-weight: 700; }
.cartao-aula { border-left: 5px solid #1E7B45; }
.cartao-ok { text-align: center; border-left: 5px solid #1E7B45; }
.cartao-ok .marca-ok { font-size: 54px; line-height: 1; margin: 0 0 6px;
                       color: #1E7B45; }
.botao-checkin-portal { display: block; width: 100%; min-height: 58px;
                        margin-bottom: 10px; font-weight: 700; }

.aviso-usuario { margin: -6px 0 14px; background: rgba(26,95,180,.08);
                 border-left: 3px solid #1A5FB4; }
.botao-checkin-topo { background: #1E7B45; border-color: #1E7B45; }

/* --- Bloco da trilha na Home ------------------------------------------ */
.cartao-trilha { text-decoration: none; color: inherit; display: block; }
.cartao-trilha:hover { border-color: var(--acento, #C8102E); }
.trilha-numeros { display: flex; gap: var(--folga-3); margin: 8px 0 4px; }
.trilha-numeros .numero { font-size: var(--passo-5); font-weight: 700;
                          line-height: 1; margin: 0 0 2px; }
.trilha-numeros .numero.positivo { color: #1E7B45; }
.cartao-trilha .ver-mais { margin-top: 8px; font-weight: 600; }
.linha-atencao td { background: rgba(214,158,46,.10); }