/* Painel BRV360 — CSS próprio, sem framework.
   Uma tabela por tela, navegação que se adapta à largura, e nada que dependa de
   JavaScript para o conteúdo aparecer: a tela é HTML servido pronto. */

/* =============================================================================
   AS CORES MORAM AQUI, E SÓ AQUI.

   Trocar de tema — voltar o claro, aceitar a preferência do sistema, atender um
   cliente que peça outra paleta — é mudar valores neste bloco. Nenhuma regra abaixo
   escreve cor literal, e há teste que reprova quem escrever: cor espalhada é o que
   transforma "trocar o tema" em caçada.

   CONTRASTE É REQUISITO, NÃO GOSTO. A tela é lida em galpão com luz forte e em
   monitor ruim. Todo par de texto abaixo passa de 7:1 (WCAG AAA) e os elementos não
   textuais passam de 3:1, com teste que confere as razões — mexer numa cor e piorar
   a leitura reprova o build.

   IDENTIDADE (redesenho de 10/2026): cinza-escuro em vez de preto, porque cansa menos
   a vista numa tela que fica aberta o dia todo, e o vermelho da logo BRV360 como
   acento. O vermelho puro da logo só aparece em INDICADOR — a barra do item atual, o
   sublinhado do link, a borda do botão principal —, nunca como cor de texto: sobre o
   cinza ele fica em 3:1, legível para um traço e ilegível para uma frase. Texto que
   precisa do acento usa --acento-texto, e o botão principal usa --acento-forte com
   texto branco.
   ============================================================================= */
:root {
  color-scheme: dark;              /* campos, barras de rolagem e autofill do navegador */

  --fundo: #2B2E33;                /* a página — cinza-escuro, não preto */
  --papel: #34383E;                /* cartões, tabelas, campos */
  --trilho: #202327;               /* menu: um degrau abaixo da página, para emoldurar */
  --trilho-2: #2C3035;             /* item do menu sob o ponteiro; bloco do cliente */
  --placa: #F3F4F6;                /* sob a logo do cliente feita para papel branco */
  --linha: #7E858D;                /* borda estrutural: campo, cartão — 3,2:1 no papel */
  --linha-fraca: #484D54;          /* separador entre linhas de tabela; decorativo */
  --tinta: #EDEFF1;                /* texto — 11,8:1 no fundo */
  --tinta-fraca: #D0D4D8;          /* texto secundário — 7,9:1 no papel */

  --acento: #EE3739;               /* vermelho da logo: só indicador, nunca texto */
  --acento-forte: #A82326;         /* fundo do botão principal — branco em cima a 7,2:1 */
  --acento-tinta: #FFFFFF;         /* texto sobre --acento-forte */
  --acento-texto: #FFB8BA;         /* o acento quando precisa ser lido — 7,2:1 no papel */
  --acento-suave: #4A2B2E;         /* fundo do item atual do menu */
  --foco: #7DB2FF;                 /* contorno de foco: azul, para não se confundir com o acento */

  --alerta: #FFB8BA;               /* destrutivo e erro — 7,2:1 no papel */
  --alerta-fundo: #522729;
  --aviso: #F9C98A;                /* atenção: precisa de olho, não é erro — 7,7:1 */
  --aviso-fundo: #4A3719;
  --ok: #9EE3B0;                   /* em dia: só marca de gráfico, ao lado do número escrito */

  --menu: 15rem;                   /* menu lateral, de 1200px para cima */
  --trilho-estreito: 5.5rem;       /* trilho de ícones, de 720px a 1199px */
  --abas: 4.25rem;                 /* barra de abas, abaixo de 720px */
  --faixa: 2.75rem;                /* altura da faixa de operação (F3.27) */
  --toque: 2.75rem;                /* alvo de toque mínimo: 44px, com luva inclusive */
  --raio: 8px;
}

/* A fonte é servida pelo próprio painel, e não por um CDN: o painel funciona na rede
   de um cliente que bloqueie terceiros, e a tela de login não avisa ninguém de fora de
   que alguém a abriu. IBM Plex, licença OFL (fontes/OFL.txt). Só o subconjunto latino,
   que cobre o português inteiro. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("/fontes/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-display: swap; src: url("/fontes/ibm-plex-mono-latin-700-normal.woff2") format("woff2"); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
}

/* Foco visível, e não o contorno padrão do navegador: no escuro ele some. Quem opera
   de teclado, com luva ou com o monitor ruim precisa saber onde está. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* =============================================================================
   O ESQUELETO: lateral (logo, menu, sair) + conteúdo.

   Três formas, só com @media — sem JavaScript, como o resto do painel:
   - 1200px ou mais: menu lateral com ícone e rótulo;
   - 720px a 1199px: trilho de ícones com o rótulo embaixo (tablet);
   - abaixo de 720px: barra no topo com a logo e Sair, e o menu vira a barra de
     abas presa ao pé da tela, ao alcance do polegar (celular).
   O markup é um só para as três: duplicar o menu por largura faria um deles
   esquecer o item que o outro ganhou.
   ============================================================================= */
.quadro { display: flex; align-items: flex-start; min-height: 100vh; }

#lateral {
  position: sticky;
  top: 0;
  flex: none;
  width: var(--menu);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.25rem 0.875rem;
  background: var(--trilho);
  overflow-y: auto;
}

#topo { display: flex; flex-direction: column; gap: 1.1rem; }

/* A logo vai direto sobre o menu escuro, sem placa: o PNG da BRV360 é transparente e
   foi desenhado para fundo escuro, e a do cliente também, quando ele manda a versão
   escura (logo_dark_url). A logo feita para papel branco vai sobre a placa clara —
   tinta escura no cinza do menu some. Ver MarcaNaTela. */
.logo img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.logo.placa { padding: 0.375rem 0.5rem; background: var(--placa); border-radius: var(--raio); }
#topo .logo { display: block; height: 2.75rem; padding: 0.125rem 0.25rem; }
#topo .logo.placa { padding: 0.375rem 0.5rem; }

#topo .marca {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: var(--trilho-2);
}

#topo .marca strong { font-size: 0.9rem; font-weight: 600; }
#topo .marca span { font-size: 0.78rem; color: var(--tinta-fraca); }

#menu { display: flex; flex-direction: column; gap: 2px; }

#menu a, #menu .indisponivel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--toque);
  padding: 0 0.75rem;
  border-radius: var(--raio);
  color: var(--tinta);
  font-weight: 500;
  text-decoration: none;
}

#menu svg { flex: none; width: 1.25rem; height: 1.25rem; }
#menu a:hover { background: var(--trilho-2); }

/* Item atual: fundo do acento suave e a barra vermelha da logo à esquerda. A barra é
   o sinal que não depende de cor — posição —, e o `aria-current` diz o mesmo a quem
   não vê a tela. */
#menu a.atual { background: var(--acento-suave); font-weight: 600; box-shadow: inset 3px 0 0 var(--acento); }
#menu .indisponivel { color: var(--tinta-fraca); cursor: default; }

/* A aba Mais só existe no celular — no tablet e no computador todos os itens cabem. */
#menu a.mais { display: none; }
#menu .indisponivel small { font-size: 0.7rem; }

#conta { margin: auto 0 0; padding-top: 0.875rem; border-top: 1px solid var(--linha-fraca); }
#conta .botao { width: 100%; }

main { flex: 1 1 auto; min-width: 0; padding: 1.75rem 2.5rem 4rem; }
main h1 { margin: 0 0 0.25rem; font-size: 1.75rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
main h2 { margin: 2rem 0 0.75rem; font-size: 1.1rem; font-weight: 600; }
main .sub { margin: 0 0 1.5rem; color: var(--tinta-fraca); }

/* Tablet: trilho de ícones. O nome do cliente sai do trilho — não cabe — e continua
   no título da aba do navegador. */
@media (max-width: 1199.98px) {
  #lateral { width: var(--trilho-estreito); padding: 1rem 0.5rem; align-items: center; }
  #topo .logo { height: 1.75rem; padding: 0; }
  #topo .logo.placa { height: 2.25rem; padding: 0.25rem; }
  #topo .marca { display: none; }
  #menu { width: 100%; }
  #menu a, #menu .indisponivel {
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    min-height: 3.75rem;
    padding: 0.375rem 0.25rem;
    font-size: 0.72rem;
    text-align: center;
  }
  #conta { width: 100%; }
  #conta .botao { padding-inline: 0.25rem; font-size: 0.8rem; }
  main { padding: 1.5rem 1.75rem 4rem; }
}

/* Celular: barra no topo e abas no pé. O `display: contents` desmonta a lateral e
   deixa os três pedaços dela irem cada um para o seu lugar. */
@media (max-width: 719.98px) {
  .quadro { display: block; position: relative; }
  #lateral { display: contents; }

  #topo {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.75rem;
    padding: 0.5rem 7rem 0.5rem 1rem;   /* a direita fica para o Sair */
    background: var(--trilho);
  }
  #topo .logo { height: 2rem; flex: 0 1 auto; min-width: 0; max-width: 9rem; }
  #topo .marca { display: flex; min-width: 0; padding: 0; background: none; }
  #topo .marca strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #topo .marca span { display: none; }

  #conta { position: absolute; top: 0.5rem; right: 1rem; width: auto; margin: 0; padding: 0; border: 0; }
  #conta .botao { padding-inline: 1rem; font-size: 0.9rem; }

  #menu {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 2;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    min-height: var(--abas);
    padding: 0.375rem 0.25rem calc(0.5rem + env(safe-area-inset-bottom));
    background: var(--trilho);
    border-top: 1px solid var(--linha-fraca);
  }
  #menu a, #menu .indisponivel { min-height: 3.25rem; font-size: 0.7rem; }
  #menu a.atual { box-shadow: inset 0 3px 0 var(--acento); }

  main { padding: 1.25rem 1rem calc(var(--abas) + 2rem); }
  main h1 { font-size: 1.5rem; }

  /* Cinco abas no máximo: o que é secundário sai da barra e mora na aba Mais. */
  #menu a.secundario { display: none; }
  #menu a.mais { display: flex; }

  /* Tabela larga rola dentro dela mesma, e não a página inteira de lado. */
  table { display: block; overflow-x: auto; }
  th, td { white-space: nowrap; }
}

/* A faixa da operação de cliente (F3.27). Fica acima de tudo, atravessa a largura
   inteira e usa o âmbar de atenção — não é erro, é um estado que precisa de olho:
   quem está aqui está mexendo na conta de outra empresa. Ela gruda no topo em toda
   largura, inclusive no celular, onde a barra da logo rola junto com a página: uma
   aba esquecida não pode esconder em nome de quem a tela está sendo usada. */
#operacao {
  position: sticky;
  top: 0;
  z-index: 3;
  height: var(--faixa);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.25rem;
  background: var(--aviso);
  color: var(--fundo);
  font-weight: 600;
}

#operacao span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#operacao form { margin: 0; flex: none; }

#operacao .botao {
  min-height: 0;
  padding: 0.15rem 0.7rem;
  font-size: 0.8rem;
  border-color: var(--fundo);
  color: var(--fundo);
  background: transparent;
}

/* Com a faixa, a lateral começa abaixo dela. Depende da faixa existir — sem operação
   em curso, nada muda de lugar. */
#operacao ~ .quadro #lateral { top: var(--faixa); height: calc(100vh - var(--faixa)); }

/* Telas sem menu: login, convite, recuperação, segundo fator. Antes cada uma
   carregava o mesmo `style=` embutido — que é a mesma doença da cor espalhada, em
   forma de layout. */
main.avulsa { max-width: 34rem; margin-inline: auto; padding: 3rem 1rem 4rem; }
main.avulsa .logo { display: inline-block; height: 3rem; max-width: 100%; margin: 0 0 2rem; }

/* Link: texto na cor do texto, com o sublinhado vermelho da logo. O sublinhado é o
   que diz "isto é link" — por posição, não só por cor. */
a { color: var(--tinta); text-decoration-color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento-texto); }

table { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--linha-fraca); border-radius: var(--raio); font-size: 0.94rem; }
th, td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--linha-fraca); }
th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-fraca); }
tr:last-child td { border-bottom: 0; }

/* Menu de ações: sem JavaScript, e por isso continua funcionando com ele desligado. */
details.acoes { position: relative; }
details.acoes > summary { cursor: pointer; list-style: none; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
details.acoes > summary::-webkit-details-marker { display: none; }
details.acoes > div {
  position: absolute; right: 0; z-index: 2; min-width: 11rem;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.35rem 0;
}
details.acoes a { display: block; padding: 0.55rem 0.85rem; color: var(--tinta); text-decoration: none; }
details.acoes a:hover { background: var(--fundo); }
details.acoes a.destrutiva { color: var(--alerta); }

/* Botão principal: fundo vermelho escuro da marca com texto branco, e a borda no
   vermelho puro da logo. O vermelho puro como fundo deixaria o texto branco em 3,9:1 —
   abaixo do que o galpão pede. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--toque); padding: 0 1.1rem; border: 1px solid var(--acento); border-radius: var(--raio);
  background: var(--acento-forte); color: var(--acento-tinta); text-decoration: none; cursor: pointer;
  font: inherit; font-weight: 600; white-space: nowrap;
}
.botao.secundario { background: var(--papel); color: var(--tinta); border-color: var(--linha); }
.botao.destrutiva { background: var(--papel); color: var(--alerta); border-color: var(--alerta); }

form.formulario { background: var(--papel); border: 1px solid var(--linha-fraca); border-radius: 12px; padding: 1.25rem 1.375rem; max-width: 34rem; }
form.formulario label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: 0.94rem; }
form.formulario small { color: var(--tinta-fraca); font-weight: 400; }
input, select {
  display: block; width: 100%; min-height: 3rem; margin-top: 0.375rem; padding: 0 0.875rem;
  font: 400 1rem/1.4 "IBM Plex Sans", system-ui, sans-serif;
  background: var(--fundo); color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--raio);
}
input::placeholder { color: var(--tinta-fraca); }
/* Rádio e caixa de marcar ficam na linha do texto. A regra de `input` acima é de campo
   de texto, e sem esta exceção ela empurra a bolinha para uma linha própria, longe do
   rótulo que a explica. */
label.opcao { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: 400; }
label.opcao input { display: inline-block; width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; flex: none; accent-color: var(--acento-forte); }

/* Caixas de aviso. A borda esquerda é o que as distingue de longe — cor e posição,
   não só cor, porque daltonismo não é caso raro numa base de milhares. */
#vazio, #erro, #pin, #recebido, #pareamento, #sem-vaga {
  background: var(--papel); border: 1px solid var(--linha-fraca); border-left: 3px solid var(--tinta-fraca);
  border-radius: var(--raio); padding: 1rem 1.15rem; max-width: 44rem;
}
#erro { border-left-color: var(--alerta); background: var(--alerta-fundo); }
:where(#vazio, #erro, #pin, #recebido, #pareamento, #sem-vaga) > :first-child { margin-top: 0; }
:where(#vazio, #erro, #pin, #recebido, #pareamento, #sem-vaga) > :last-child { margin-bottom: 0; }

/* Confirmação de ação: mesma caixa, sem a cor de erro. Cinco telas faziam isso com
   `style="border-left-color: …"` no markup — tema fora do lugar, e semanticamente
   errado: pedir confirmação não é relatar erro. */
#erro.confirmacao { border-left-color: var(--acento); background: var(--papel); }
#recebido { border-left-color: var(--aviso); }
form.acao-solta { margin-top: 1rem; }
.acoes-topo { margin-bottom: 1.25rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Atenção — precisa de olho, mas não é erro nem ação destrutiva. Hoje o óculos sem
   turma vinculada: ele funciona, e não baixa ninguém. Antes desta folha a classe
   existia SEM regra, então o aviso saía como texto comum: um alerta que não alertava. */
.aviso { color: var(--aviso); font-weight: 600; }

/* O mesmo defeito, do lado do vermelho: `situacao alerta` estava no markup sem regra. */
.alerta { color: var(--alerta); }

/* Linha que não é resposta para "qual eu revogo?": o aparelho revogado já não consome
   vaga. Recuo de cor, e só — a frase da coluna Situação continua dizendo "Revogado",
   porque cor sozinha não é informação. 7,9:1 no papel, acima do mínimo do tema. */
tr.apagado td { color: var(--tinta-fraca); }

/* Bloqueio com motivo escrito: a borda esquerda distingue de longe, e o texto diz o
   que fazer. Mesma forma das outras caixas de aviso do painel. */
#sem-vaga { border-left-color: var(--aviso); background: var(--aviso-fundo); }
#aviso { color: var(--aviso); }

td .sub, span.sub { display: block; font-size: 0.78rem; color: var(--tinta-fraca); margin: 0; }
.situacao { font-weight: 600; }
dl.payload { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 0.5rem; }
dl.payload dt { color: var(--tinta-fraca); font-size: 0.78rem; }
dl.payload dd { margin: 0; font-size: 0.85rem; }

/* O que cada papel pode fazer, ao lado da escolha (convite e troca de papel). */
dl.papeis { margin: 0 0 1rem; padding: 0.75rem 1rem; background: var(--papel); border: 1px solid var(--linha-fraca); border-radius: var(--raio); }
dl.papeis dt { font-weight: 600; font-size: 0.9rem; }
dl.papeis dt + dd { margin: 0.1rem 0 0.6rem; color: var(--tinta-fraca); font-size: 0.85rem; }
dl.papeis dd:last-child { margin-bottom: 0; }

/* Código de pareamento (F3.18). Grande de propósito: quem digita está de óculos, e
   alguém lê em voz alta da outra ponta da sala. O espaçamento separa os caracteres
   que o alfabeto já escolheu para não se confundirem. */
#codigo {
  /* `font-size` à parte do atalho de propósito: o tamanho é requisito de sala, tem
     asserção própria, e dentro do atalho ele some para quem lê e para o teste. */
  font-size: 3rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.18em;
  margin: 0.5rem 0;
  color: var(--tinta);
  overflow-wrap: anywhere;
}
#validade { margin: 0 0 1rem; }

/* =============================================================================
   VISÃO GERAL (/inicio) — a tela de entrada do cliente.

   Quatro números no topo, a cobertura em barras e a lista do que pede atenção. Cada
   número vem com a frase que diz de quê, e cada barra com a contagem escrita acima
   dela: a cor reforça, nunca é a única forma de ler.
   ============================================================================= */
.cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.cabecalho h1 { margin: 0; }
.cabecalho .acoes-topo { margin: 0; }

#indicadores {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem;
}
.indicador {
  background: var(--papel); border: 1px solid var(--linha-fraca); border-radius: 12px;
  padding: 1rem 1.15rem;
}
/* O âmbar entra na borda esquerda e na frase — posição e palavra, não só cor. */
.indicador.aviso { box-shadow: inset 3px 0 0 var(--aviso); }
.indicador h2 {
  margin: 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--tinta-fraca);
}
.indicador .valor {
  margin: 0.4rem 0 0.25rem; font-size: 2rem; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.indicador .detalhe { margin: 0; font-size: 0.85rem; color: var(--tinta-fraca); }
.indicador.aviso .detalhe { color: var(--aviso); }

.colunas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.cartao {
  background: var(--papel); border: 1px solid var(--linha-fraca); border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.cartao > header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.cartao h2 { margin: 0; font-size: 1.05rem; }
.cartao > p { margin: 0 0 0.9rem; }

.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.barras p { margin: 0 0 0.35rem; font-size: 0.92rem; font-variant-numeric: tabular-nums; }

/* Barra fina, pontas arredondadas, e 2px da cor do cartão entre um trecho e outro —
   sem isso, dois trechos vizinhos de brilho parecido viram um só. */
.trilha { height: 0.75rem; border-radius: 4px; overflow: hidden; background: var(--linha-fraca); }
.trilha svg { display: block; width: 100%; height: 100%; }
.trilha rect { stroke: var(--papel); stroke-width: 2px; vector-effect: non-scaling-stroke; }

.s-ok { fill: var(--ok); background: var(--ok); }
.s-pendente { fill: var(--linha); background: var(--linha); }
.s-reprovado { fill: var(--aviso); background: var(--aviso); }
.s-vencido { fill: var(--alerta); background: var(--alerta); }
/* Atrasado (048): o prazo para concluir passou sem aprovação. Grave como o vencido, e
   distinto dele — o vermelho cheio da marca, ao lado do vermelho claro do vencido. */
.s-atrasado { fill: var(--acento); background: var(--acento); }

.legenda {
  list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 0.4rem 1rem; font-size: 0.82rem; color: var(--tinta-fraca);
}
.legenda li { display: flex; align-items: center; gap: 0.4rem; }
.amostra { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; }

:is(#atencao, #contratos) ul { list-style: none; margin: 0; padding: 0; }
:is(#atencao, #contratos) li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem;
  align-items: start; padding: 0.8rem 0; border-top: 1px solid var(--linha-fraca);
}
:is(#atencao, #contratos) li:first-child { border-top: 0; padding-top: 0; }
:is(#atencao, #contratos) strong { display: block; font-weight: 600; }
:is(#atencao, #contratos) a { white-space: nowrap; font-size: 0.9rem; }
:is(#atencao, #contratos) .nada { margin: 0; color: var(--tinta-fraca); }

/* O sinal da linha: ponto de exclamação no grave, ponto no que pede olho. O símbolo
   diz a diferença mesmo sem cor. */
:is(#atencao, #contratos) .sinal {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  font-weight: 700; font-size: 0.85rem; line-height: 1; color: var(--fundo); background: var(--aviso);
}
:is(#atencao, #contratos) li.grave .sinal { background: var(--alerta); }

/* Primeiros passos: a mesma linha da lista de atenção, numerada. O passo feito troca o
   número por um visto verde e escreve "Feito" — a cor nunca vai sozinha. */
#primeiros-passos { margin-bottom: 1.25rem; }
#primeiros-passos > .sub { margin: 0 0 1rem; color: var(--tinta-fraca); }
#primeiros-passos ol { list-style: none; margin: 0; padding: 0; }
#primeiros-passos li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem;
  align-items: start; padding: 0.8rem 0; border-top: 1px solid var(--linha-fraca);
}
#primeiros-passos li:first-child { border-top: 0; padding-top: 0; }
#primeiros-passos strong { display: block; font-weight: 600; }
#primeiros-passos .sinal {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  font-weight: 700; font-size: 0.85rem; line-height: 1; color: var(--tinta);
  border: 1px solid var(--linha);
}
#primeiros-passos li.feito .sinal { color: var(--fundo); background: var(--ok); border-color: var(--ok); }
#primeiros-passos li.feito strong { color: var(--tinta-fraca); }
#primeiros-passos .estado { font-size: 0.9rem; color: var(--tinta-fraca); font-weight: 600; }
#primeiros-passos .links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: flex-end; }
#primeiros-passos .links a { white-space: nowrap; font-size: 0.9rem; }

/* A tela Mais: as telas que saem da barra de abas no celular, em linhas de toque. */
#mais {
  list-style: none; margin: 0; padding: 0; max-width: 34rem;
  background: var(--papel); border: 1px solid var(--linha-fraca); border-radius: 12px;
}
#mais li + li { border-top: 1px solid var(--linha-fraca); }
#mais a {
  display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0 1rem;
  font-weight: 500; text-decoration: none;
}
#mais svg { flex: none; width: 1.25rem; height: 1.25rem; }

@media (max-width: 1199.98px) {
  #indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colunas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 719.98px) {
  #indicadores { gap: 0.75rem; }
  .indicador { padding: 0.85rem 0.9rem; }
  .indicador .valor { font-size: 1.6rem; }
  .cartao { padding: 1rem; }
  /* O link desce para baixo da frase: lado a lado, a frase ficaria espremida. */
  :is(#atencao, #contratos) li { grid-template-columns: auto minmax(0, 1fr); }
  :is(#atencao, #contratos) li > a { grid-column: 2; }
  #primeiros-passos li { grid-template-columns: auto minmax(0, 1fr); }
  #primeiros-passos li > .estado, #primeiros-passos li > .links { grid-column: 2; justify-content: flex-start; }
}

/* =============================================================================
   LISTAS — Alunos e as telas que mostram gente em linha.

   Uma tabela no computador e no tablet; no celular, a MESMA tabela vira lista de
   itens — nome, uma linha de detalhe e a situação. As colunas `so-largo` saem do
   celular e continuam na página do item. Nada de markup duplicado por largura.
   ============================================================================= */
.oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.chave-publica { overflow-x: auto; font-size: 0.8rem; font-weight: 400; white-space: pre; }
.so-estreito { display: none; }
.cabecalho .sub { margin: 0.25rem 0 0; }

/* Filtros de situação: links em forma de pastilha, com a contagem ao lado. O atual
   ganha borda e fundo — e `aria-current`, para quem não vê o realce. */
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.filtro {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--toque);
  padding: 0 0.9rem; border: 1px solid var(--linha-fraca); border-radius: 999px;
  background: var(--papel); color: var(--tinta); text-decoration: none; font-size: 0.92rem;
}
.filtro:hover { border-color: var(--linha); }
.filtro[aria-current="page"] { border-color: var(--acento); background: var(--acento-suave); font-weight: 600; }
.filtro .quantos { font-variant-numeric: tabular-nums; color: var(--tinta-fraca); font-weight: 500; }

/* Turma e busca: um formulário GET, numa linha só no largo. */
form.busca { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-bottom: 1.1rem; }
form.busca label { display: block; flex: 0 1 14rem; font-size: 0.85rem; color: var(--tinta-fraca); }
form.busca label.termo { flex: 1 1 18rem; }
form.busca input, form.busca select { margin-top: 0.3rem; min-height: var(--toque); }
form.busca .limpar { align-self: center; font-size: 0.92rem; }

/* A situação: marca de cor e frase. A frase diz tudo; a marca só reforça. */
.selo { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.9rem; }
.selo .amostra { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.selo.grave { color: var(--alerta); }
.selo.atencao { color: var(--aviso); }

/* "Novo" na Biblioteca (051): etiqueta que a BRV360 liga e desliga num treinamento. */
.etiqueta-novo {
  display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.5rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; color: var(--acento-texto); border: 1px solid var(--acento);
  vertical-align: middle;
}

table.lista td.principal a { font-weight: 600; }

@media (max-width: 719.98px) {
  main .cabecalho .botao:not(.secundario) { min-height: 3.25rem; }

  /* Filtros rolam de lado numa linha só, em vez de ocuparem meia tela. */
  .filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem; padding: 0 1rem 0.25rem; }
  .filtro { flex: none; }
  form.busca label, form.busca label.termo { flex: 1 1 100%; }
  /* No celular o rótulo sai da vista e fica para o leitor de tela: a lista diz "Todas as
     turmas" e o campo diz o que busca. */
  form.busca .rotulo {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  form.busca input, form.busca select { margin-top: 0; }
  form.busca .botao { flex: 1 1 auto; }

  .so-largo { display: none; }
  .so-estreito { display: inline; }

  table.lista { display: block; overflow: visible; }
  table.lista thead { display: none; }
  table.lista tbody { display: block; }
  /* Uma coluna: nome, detalhe e, embaixo, a situação. Lado a lado, a frase da situação
     espremia o nome até reticências. */
  table.lista tr {
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
    gap: 0.25rem 0.75rem; padding: 0.8rem 1rem; min-height: 3.75rem;
    border-bottom: 1px solid var(--linha-fraca);
  }
  table.lista tr:last-child { border-bottom: 0; }
  /* O item inteiro é o alvo de toque, não só o nome: o `::after` do link cobre a linha.
     Outro link da linha (o "gerar e enviar de novo" do PIN) sobe acima dele. */
  table.lista tr { position: relative; }
  table.lista td.principal > a::after { content: ""; position: absolute; inset: 0; }
  table.lista td:not(.principal) a { position: relative; z-index: 1; }
  table.lista td { display: block; padding: 0; border: 0; white-space: normal; }
  table.lista td.so-largo { display: none; }
  table.lista td.principal { min-width: 0; }
  table.lista td.principal > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.lista .selo { font-size: 0.82rem; }
}

/* =============================================================================
   FICHA — a página de uma pessoa (o aluno): caminho de volta, cabeçalho com as
   iniciais, o que se exige dela, o cadastro e o histórico. Tabela dentro de cartão
   perde a moldura própria: o cartão já é a moldura.
   ============================================================================= */
.migalha { margin: 0 0 0.75rem; font-size: 0.88rem; color: var(--tinta-fraca); }
.migalha a { color: var(--tinta-fraca); }
.identidade { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.iniciais {
  flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--acento-suave); color: var(--acento-texto); font-weight: 700; font-size: 1.05rem;
}
.colunas.ficha { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); margin-bottom: 1rem; }
/* `span.sub` é bloco, e venceria o `.so-estreito` por especificidade. */
.sub.so-estreito { display: none; }
.cartao h3 { margin: 1.25rem 0 0.6rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-fraca); }
.cartao .nada { margin: 0; color: var(--tinta-fraca); }
.cartao table.embutida { background: transparent; border: 0; border-radius: 0; }
.cartao table.embutida th:first-child, .cartao table.embutida td:first-child { padding-left: 0; }
.cartao table.embutida th:last-child, .cartao table.embutida td:last-child { padding-right: 0; }
.cartao table.embutida tr:last-child td { border-bottom: 0; }
.cartao dl.campos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55rem 1rem; margin: 0; }
.cartao dl.campos dt { color: var(--tinta-fraca); font-size: 0.88rem; }
.cartao dl.campos dd { margin: 0; overflow-wrap: anywhere; }
.cartao dl.campos dd .situacao { margin-left: 0.4rem; }

/* Turmas como linha do tempo: um ponto por passagem, cheio na turma de hoje. */
ul.passagens { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--linha-fraca); }
ul.passagens li { position: relative; padding: 0 0 0.85rem 0.25rem; }
ul.passagens li:last-child { padding-bottom: 0; }
ul.passagens li::before {
  content: ""; position: absolute; left: -1.4rem; top: 0.35rem; width: 0.6rem; height: 0.6rem;
  border-radius: 50%; background: var(--fundo); border: 2px solid var(--linha);
}
ul.passagens li.atual::before { background: var(--acento); border-color: var(--acento); }
main .nota-de-rodape { margin: 0.9rem 0 0; font-size: 0.82rem; }
td.nota { font-variant-numeric: tabular-nums; font-weight: 600; }

@media (max-width: 1199.98px) {
  .colunas.ficha { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   COBERTURA — um cartão por treinamento: o percentual grande, a barra e as quatro
   contagens escritas. A barra repete o que as contagens dizem; nunca o contrário.
   ============================================================================= */
.legenda.topo { margin: 0 0 1rem; }
.cartoes-nr { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.cartao.nr { display: flex; flex-direction: column; gap: 0.9rem; }
.cartao.nr > header { align-items: flex-start; margin: 0; }
.cartao.nr h2 { line-height: 1.3; }
.cartao.nr .percentual { margin: 0; text-align: right; white-space: nowrap; color: var(--tinta-fraca); font-size: 0.85rem; }
.cartao.nr .percentual strong {
  display: block; color: var(--tinta); font-size: 1.9rem; font-weight: 600; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
dl.contagens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; margin: 0; }
dl.contagens dt { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--tinta-fraca); }
dl.contagens dt .amostra { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; }
dl.contagens dd { margin: 0.15rem 0 0; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cartao.nr > footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--linha-fraca);
}
.cartao.nr > footer a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; }
table.lista a.destrutiva { color: var(--alerta); }
.recorte { margin: 0 0 0.9rem; color: var(--tinta-fraca); }
.recorte a { margin-left: 0.5rem; }

@media (max-width: 719.98px) {
  .sub.so-largo { display: none; }
}

/* =============================================================================
   ÓCULOS — um cartão por aparelho: a situação escrita no selo, as turmas que ele
   baixa como fichas, e a ação que o estado pede logo abaixo. Revogado fica no fim,
   esmaecido: não ocupa vaga e não é resposta para "qual eu revogo?".
   ============================================================================= */
.cartoes-oculos { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.cartao.oculos { display: flex; flex-direction: column; gap: 0.75rem; }
.cartao.oculos > header { align-items: flex-start; margin: 0; }
.cartao.oculos > header .sub { margin: 0.15rem 0 0; }
.cartao.oculos .selo { white-space: nowrap; }
.cartao.oculos h3 { margin: 0; }
.cartao.oculos .sem-turma, .cartao.oculos .dica { margin: 0; font-size: 0.9rem; }
.cartao.oculos .dica { color: var(--tinta-fraca); }
.cartao.oculos dl.campos { font-size: 0.88rem; }
.cartao.oculos > footer {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem;
  margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--linha-fraca);
}
.cartao.oculos > footer a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; }
.cartao.oculos > footer a.destrutiva { color: var(--alerta); }
.cartao.oculos.apagado { background: transparent; }
.cartao.oculos.apagado h2 { color: var(--tinta-fraca); }
ul.fichas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
ul.fichas li {
  padding: 0.2rem 0.65rem; border: 1px solid var(--linha); border-radius: 999px;
  background: var(--fundo); font-size: 0.85rem;
}
#codigos-em-aberto, #identificacao { margin-top: 1rem; }
#identificacao > p { margin: 0; }

@media (max-width: 719.98px) {
  .iniciais { width: 2.5rem; height: 2.5rem; font-size: 0.95rem; }
  .sub.so-estreito { display: block; }
  .cabecalho:has(.identidade) .acoes-topo { width: 100%; display: flex; gap: 0.5rem; }
  .cabecalho:has(.identidade) .acoes-topo .botao { flex: 1 1 0; }
  .cartao table.lista tr { padding-inline: 0; }
}

/* =============================================================================
   TURMA — o veredito primeiro ("posso liberar?"), um cartão por treinamento exigido,
   e a matriz por pessoa. Pensada para o tablet do instrutor, de pé na sala.
   ============================================================================= */
.veredito {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  margin-bottom: 1rem; padding: 1rem 1.25rem; border-radius: 12px;
  border: 1px solid var(--linha-fraca); border-left: 4px solid var(--aviso); background: var(--papel);
}
.veredito.liberada { border-left-color: var(--ok); }
.veredito h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.veredito p { margin: 0; color: var(--tinta-fraca); }
.cartao.nr .falta { margin: 0; color: var(--tinta-fraca); font-size: 0.9rem; }
#por-pessoa { margin-top: 1rem; }
table.matriz td[data-rotulo] { white-space: nowrap; }

@media (max-width: 719.98px) {
  .veredito .botao { width: 100%; }
  /* A lista no estreito perde o cabeçalho: cada situação leva o código do treinamento
     como rótulo, e cada linha mostra as situações lado a lado. */
  table.matriz td[data-rotulo] { display: flex; align-items: center; gap: 0.5rem; }
  table.matriz td[data-rotulo]::before {
    content: attr(data-rotulo); min-width: 6rem; color: var(--tinta-fraca); font-size: 0.78rem;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  table.matriz details.acoes { position: relative; z-index: 1; }
}

/* =============================================================================
   SESSÃO — o resultado primeiro, os números, o que deu errado e o passo a passo.
   Escrita para quem trabalha na planta: o nome do passo, nunca o código dele. Os
   códigos ficam em "Detalhes técnicos", recolhidos, para o suporte.
   ============================================================================= */
.veredito.sessao { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.veredito.sessao.bom { border-left-color: var(--ok); }
.veredito.sessao.grave { border-left-color: var(--alerta); }
.veredito.sessao h2 { font-size: 1.35rem; }
.veredito.sessao .placar { margin: 0; text-align: right; color: var(--tinta-fraca); font-size: 0.88rem; white-space: nowrap; }
.veredito.sessao .placar strong {
  display: block; color: var(--tinta); font-size: 1.9rem; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.veredito.sessao .placar .sem-nota { color: var(--tinta); font-weight: 600; font-size: 1rem; }
#numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.indicador.grave { box-shadow: inset 3px 0 0 var(--alerta); }
.indicador.grave .valor { color: var(--alerta); }
.indicador .valor.pequeno { font-size: 1.25rem; padding-top: 0.45rem; }
#erros { margin-bottom: 1rem; }

ol.eventos { list-style: none; margin: 0; padding: 0; }
li.evento {
  display: grid; grid-template-columns: 4.5rem 7.5rem minmax(0, 1fr); gap: 0.25rem 0.85rem;
  align-items: start; padding: 0.75rem 0; border-top: 1px solid var(--linha-fraca);
}
li.evento:first-child { border-top: 0; padding-top: 0; }
li.evento .momento { font-variant-numeric: tabular-nums; color: var(--tinta-fraca); font-size: 0.85rem; padding-top: 0.15rem; }
/* O selo: palavra numa pastilha. A borda à esquerda dá a cor de longe. */
li.evento .selo-evento {
  justify-self: start; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  border: 1px solid var(--linha); color: var(--tinta-fraca); white-space: nowrap;
}
li.evento.feito .selo-evento { border-color: var(--ok); color: var(--ok); }
li.evento.erro .selo-evento { border-color: var(--aviso); color: var(--aviso); background: var(--aviso-fundo); }
li.evento.critico .selo-evento { border-color: var(--alerta); color: var(--alerta); background: var(--alerta-fundo); }
li.evento.atencao .selo-evento { border-color: var(--aviso); color: var(--aviso); }
li.evento.fim .selo-evento { border-color: var(--tinta); color: var(--tinta); }
li.evento .corpo p { margin: 0; }
li.evento .titulo { font-weight: 600; }
li.evento.feito .titulo, li.evento.registro .titulo { font-weight: 400; }
li.evento .contexto { margin-top: 0.2rem !important; font-size: 0.9rem; }
li.evento .contexto .rotulo { color: var(--tinta-fraca); }
li.evento .explicacao, li.evento .levou { margin-top: 0.2rem !important; font-size: 0.82rem; color: var(--tinta-fraca); }

details.tecnicos { margin-top: 1rem; }
details.tecnicos > summary { cursor: pointer; color: var(--tinta-fraca); font-size: 0.9rem; min-height: var(--toque); display: flex; align-items: center; }
details.tecnicos[open] > summary { margin-bottom: 0.75rem; }
.cartao.oculos details.tecnicos { margin-top: 0; }
.cartao.oculos details.tecnicos p.sub { margin: 0.6rem 0 0; font-size: 0.82rem; }
details.tecnicos dl.campos { margin-bottom: 1rem; }
details.tecnicos table.crua { font-size: 0.8rem; }
details.tecnicos table.crua td { overflow-wrap: anywhere; }

@media (max-width: 1199.98px) {
  #numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719.98px) {
  #numeros { gap: 0.75rem; }
  .veredito.sessao { grid-template-columns: minmax(0, 1fr); }
  .veredito.sessao .placar { text-align: left; }
  /* Momento e selo numa linha, a frase embaixo, ocupando a largura toda. */
  li.evento { grid-template-columns: auto auto minmax(0, 1fr); }
  li.evento .corpo { grid-column: 1 / -1; }
  details.tecnicos table.crua thead { display: none; }
}

/* A faixa do procedimento: um bloco por passo do manifesto, na ordem. O instrutor vê de
   relance até onde a pessoa chegou e onde errou; a legenda diz quantos de cada, e a cor
   nunca é a única forma de ler — o title de cada bloco e a frase acima dizem o mesmo. */
#faixa { margin-bottom: 1rem; }
/* Flex, e não grid com o número de passos: a quantidade varia por treinamento, e passá-la
   num `style=` seria estilo no markup (TemaDoPainelTests). Cada bloco divide a largura. */
.faixa { display: flex; gap: 2px; height: 2.25rem; }
.faixa .bloco { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--linha-fraca); }
.bloco.feito, .amostra.feito { background: var(--ok); }
.bloco.erro, .amostra.erro { background: var(--aviso); }
.bloco.critico, .amostra.critico { background: var(--alerta); }
.bloco.pulado, .amostra.pulado { background: var(--linha); }
.bloco.alcancado, .amostra.alcancado { background: transparent; box-shadow: inset 0 0 0 2px var(--tinta); }
.bloco.nao-alcancado, .amostra.nao-alcancado { background: var(--linha-fraca); }
#faixa .legenda { margin-top: 0.75rem; }

@media (max-width: 719.98px) {
  /* No celular os blocos quebram em linhas, da esquerda para a direita, como se lê. */
  .faixa { flex-wrap: wrap; height: auto; }
  .faixa .bloco { flex: 0 0 0.7rem; height: 1.5rem; }
}
#faixa .parou-em { margin: 0.75rem 0 0; font-size: 0.9rem; }
#faixa .parou-em .rotulo { color: var(--tinta-fraca); }

/* =============================================================================
   TURMA COMO CENTRO — alunos, treinamentos obrigatórios e óculos, cada um com o
   título, a frase do que ele é, e a ação que o muda. A ação fica no cabeçalho da
   seção, não no rodapé: é onde o olho chega antes da lista.
   ============================================================================= */
.secao-turma { margin-top: 1.5rem; }
.secao-turma > header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 0.5rem 1rem; margin-bottom: 0.75rem;
}
.secao-turma > header h2 { margin: 0; font-size: 1.15rem; }
.secao-turma > header h2 .quantos { color: var(--tinta-fraca); font-weight: 500; font-variant-numeric: tabular-nums; }
.secao-turma > header p { margin: 0.2rem 0 0; color: var(--tinta-fraca); font-size: 0.9rem; }
.secao-turma .cartoes-nr { margin-bottom: 0; }
.cartao.nr > footer .prazo { color: var(--tinta-fraca); font-size: 0.9rem; }
.cartao.nr > footer a.destrutiva { color: var(--alerta); }
ul.oculos-da-turma { list-style: none; margin: 0; padding: 0; }
ul.oculos-da-turma li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  padding: 0.7rem 0; border-top: 1px solid var(--linha-fraca);
}
ul.oculos-da-turma li:first-child { border-top: 0; padding-top: 0; }
ul.oculos-da-turma li:last-child { padding-bottom: 0; }
ul.oculos-da-turma .sub { display: block; font-size: 0.85rem; }

@media (max-width: 719.98px) {
  .secao-turma > header .botao { width: 100%; }
}
label.opcao .sub { display: block; font-size: 0.85rem; }

/* Incluir vários alunos na turma: a contagem do botão é um contador de CSS — conta as
   caixas marcadas que vêm antes dele, sem script. */
form.inclusao { counter-reset: marcados; }
form.inclusao input[type="checkbox"]:checked { counter-increment: marcados; }
form.inclusao .contador::after { content: " (" counter(marcados) ")"; }
form.inclusao td.marca { width: 2.5rem; }
form.inclusao td.marca input { width: 1.25rem; height: 1.25rem; }
form.inclusao td.principal label { font-weight: 600; cursor: pointer; }
form.inclusao .rodape-fixo {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    background: var(--fundo);
    border-top: 1px solid var(--linha-fraca);
}
@media (max-width: 719.98px) {
    /* No celular as abas ficam fixas no rodapé: o botão para logo acima delas. */
    form.inclusao .rodape-fixo { bottom: var(--abas); }
    form.inclusao .rodape-fixo .botao { flex: 1; }
}

/* Comprovantes do aluno (049): uma linha por comprovante, código em monoespaçado. */
ul.comprovantes { list-style: none; margin: 0 0 0.75rem; padding: 0; }
ul.comprovantes li { padding: 0.6rem 0; border-top: 1px solid var(--linha-fraca); min-width: 0; }
ul.comprovantes li:first-child { border-top: 0; padding-top: 0; }
ul.comprovantes .sub { display: block; font-size: 0.85rem; overflow-wrap: anywhere; }

/* Verificação pública (049): a situação é a primeira coisa lida, escrita e colorida. */
.verificado { margin-top: 1.25rem; }
.verificado > p { margin: 0 0 0.9rem; padding: 0.5rem 0.75rem; border-radius: var(--raio); border-left: 4px solid currentColor; }
.verificado .situacao-valido { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--papel)); }
.verificado .situacao-vencido { color: var(--aviso); background: var(--aviso-fundo); }
.verificado .situacao-revogado { color: var(--alerta); background: var(--alerta-fundo); }

/* Contratos na Visão geral: a mesma linha da lista de atenção, com a data no lugar do link. */
#contratos { margin-top: 1.25rem; }
#contratos li > span:last-child { white-space: nowrap; font-size: 0.9rem; color: var(--tinta-fraca); }

/* A semana de escolha (051): uma faixa acima do conteúdo, enquanto o cliente ainda escolhe. */
.aviso-escolha {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin: 0 0 1.25rem; padding: 0.85rem 1rem; border: 1px solid var(--aviso); border-radius: 10px;
  background: var(--papel);
}
.aviso-escolha p { margin: 0; min-width: 0; }

/* Biblioteca: um bloco por aplicativo. */
.aplicativo + .aplicativo { margin-top: 1.5rem; }

/* Tela de marca: a especificação da logo e o envio dos dois arquivos (068). */
form.formulario .especificacao { margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid var(--linha-fraca); border-radius: var(--raio); font-size: 0.9rem; }
form.formulario .especificacao ul { margin: 0.375rem 0 0; padding-left: 1.125rem; color: var(--tinta-fraca); }
form.formulario fieldset.logo-enviada { margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid var(--linha-fraca); border-radius: var(--raio); }
form.formulario fieldset.logo-enviada legend { padding: 0 0.25rem; font-weight: 600; font-size: 0.94rem; }
form.formulario .logo.previa { display: inline-block; height: 3rem; max-width: 100%; margin: 0.25rem 0 0.5rem; }
form.formulario label.marcar { font-weight: 400; margin-bottom: 0.75rem; }

/* =============================================================================
   ABAS DO REGISTRO — as telas de um cliente (CabecalhoDoRegistro).

   O nome e as ações (operar, suspender) em cima, a barra de abas embaixo, em TODAS
   as telas do registro. A aba aberta usa a mesma língua do item atual do menu: fundo
   do acento suave e a barra vermelha da logo — aqui embaixo, porque a barra é
   horizontal. Não usa o vermelho cheio do botão principal, que fica para o "Salvar"
   da tela: dois vermelhos cheios disputariam o olho. A barra embaixo é o sinal que não
   depende de cor, e o `aria-current` diz o mesmo a quem não vê a tela.
   ============================================================================= */
.cabecalho.registro { align-items: flex-start; margin-bottom: 1rem; }
nav.abas-do-registro {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--linha-fraca);
}
nav.abas-do-registro a {
  display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 1.1rem;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel); color: var(--tinta); text-decoration: none; font-weight: 600; white-space: nowrap;
}
nav.abas-do-registro a:hover { background: var(--trilho-2); }
nav.abas-do-registro a.atual {
  background: var(--acento-suave); border-color: var(--acento);
  box-shadow: inset 0 -3px 0 var(--acento);
}
main h2.titulo-da-aba { margin: 0 0 0.25rem; font-size: 1.3rem; }

/* Celular: as ações ocupam a linha toda, e as abas ficam numa linha só que rola de
   lado — empilhadas, seis abas empurrariam a tela para baixo da dobra. */
@media (max-width: 719.98px) {
  .cabecalho.registro .acoes-topo { width: 100%; display: flex; gap: 0.5rem; }
  .cabecalho.registro .acoes-topo .botao { flex: 1 1 auto; padding-inline: 0.75rem; }
  nav.abas-do-registro { flex-wrap: nowrap; overflow-x: auto; }
}