/* Tipografia da marca.
   O terminal usava "Segoe UI" — a fonte do Windows, não a do Kloqer. É a peça
   que o funcionário vê todo dia, e era a única do sistema fora do manual. */
@font-face {
  font-family: "Space Grotesk";
  src: url("fontes/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fontes/space-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* Paleta do manual da marca.
   Preto Kloqer (#0b0b0d) e Branco Kloqer (#fafafa) são as cores base; o cinza
   de apoio é #6f6f78. O prisma — vermelho, verde e azul puros — é a assinatura
   do sistema e aparece na onda de fundo e nos estados.

   O azul de ação passou de #006aff para o #0040ff do prisma: o terminal usava
   um azul próximo, mas próximo não é igual, e é ele que pinta o botão que a
   pessoa mais olha. */
:root {
  --fundo: #0b0b0d;
  --fundo-2: #08080a;
  --palco: #050506;
  --borda: rgba(250, 250, 250, 0.1);
  --texto: #fafafa;
  --texto-fraco: #6f6f78;
  --prisma-r: #ff0040;
  --prisma-g: #00ff80;
  --prisma-b: #0040ff;
  --ok: var(--prisma-g);
  --erro: var(--prisma-r);
  --aviso: #ffb757;
  --acento: var(--prisma-b);
  --acento-forte: #3a6dff;

  /* Altura da nossa barra de título. Com a sobreposição de controles de janela
     ativa, o sistema informa a altura real dele; fora dela, este é o padrão. */
  --barra: 44px;
}

* {
  box-sizing: border-box;
}

/* `hidden` tem de ganhar de qualquer `display` nosso.
   O atributo vale por uma regra do navegador de especificidade mínima: basta
   um `.classe { display: flex }` para ele deixar de esconder. Foi assim que a
   barra da janela apareceu no navegador mesmo marcada como oculta — e a mesma
   armadilha estava armada na tela de ciência e no bloco de migração. Uma regra
   aqui fecha a classe inteira do problema. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
  /* Números de relógio e de contagem não podem dançar de largura a cada
     segundo — é o defeito mais visível de um relógio grande. */
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ onda */

/* Atrás de tudo, sem interceptar toque nenhum.
   `screen` porque o shader pinta preto onde não há onda: sobre o preto do
   fundo, o preto não contribui e só o brilho aparece. Sem isso, um retângulo
   de tom diferente cobriria a tela. */
#onda {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  /* Esmaece nas bordas para a onda não terminar em linha reta na moldura. */
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 55%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 55%, #000 35%, transparent 100%);
}
/* Reserva enquanto o WebGL não desenha, e substituto definitivo onde ele não
   existe ou o sistema pediu menos movimento — o fundo nunca fica chapado. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 40% at 50% 62%, rgb(0 64 255 / 0.16), transparent 70%),
    radial-gradient(ellipse 45% 18% at 50% 62%, rgb(250 250 250 / 0.05), transparent 70%);
}

/* ---------------------------------------------------------- barra da janela */

.barra-janela {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--barra);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1rem;
  /* Arrastar a janela pela barra, como qualquer janela do sistema. */
  -webkit-app-region: drag;
  app-region: drag;
}
.barra-titulo {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  opacity: 0.55;
}
/* O único controle. Minimizar e maximizar não fazem sentido num relógio de
   parede em tela cheia — e cada botão a mais é uma chance a mais de alguém
   tirar o terminal do ar sem querer. */
.btn-fechar {
  -webkit-app-region: no-drag;
  app-region: no-drag;
  width: var(--barra);
  height: var(--barra);
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--texto-fraco);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-fechar svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.btn-fechar:hover {
  background: var(--prisma-r);
  color: #fff;
}
.btn-fechar:focus-visible {
  outline: 2px solid var(--acento-forte);
  outline-offset: -4px;
}

/* Com a barra de cima, o conteúdo desce por ela.
   O recuo vai no `body`, e não em `.tela`: cada tela tem seu próprio padding, e
   `#tela-ponto` (seletor de id) venceria qualquer regra de classe aqui — o
   conteúdo passaria por baixo da barra. */
body.com-barra {
  padding-top: var(--barra);
}

.tela {
  display: none;
  /* 100% e não 100vh: com o recuo da barra no body, `vh` estouraria a tela em
     exatamente a altura dela. */
  height: 100%;
  position: relative;
  z-index: 1;
}
.tela.ativa {
  display: flex;
}

/* ------------------------------------------------------------------ ponto */

#tela-ponto {
  flex-direction: column;
  align-items: center;
  padding: 2vh 3vw;
  position: relative;
}

.topo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.marca {
  height: 30px;
  width: auto;
  display: block;
}
.topo-direita {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.empresa {
  color: var(--texto-fraco);
  font-size: 1rem;
}

/* Situação da conexão, sempre à vista mas sem gritar: o terminal continua
   funcionando offline, então "sem conexão" é informação, não alarme. */
.chip-sync {
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
}
.chip-sync.ok {
  color: var(--ok);
  border-color: rgb(0 255 128 / 0.35);
}
.chip-sync.alerta {
  color: var(--aviso);
  border-color: rgba(255, 183, 87, 0.4);
}

/* Instalar o terminal neste computador. No topo da tela de ponto ele é
   discreto: quem chegou até ali já escolheu seguir no navegador, e o botão é
   só a porta de volta. Na tela de instalação ele é o botão principal e herda o
   tamanho do de parear. */
.topo .btn-instalar {
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
}

/* A saída da tela de instalação. Parece link, e não botão, de propósito:
   instalar é o caminho certo, seguir no navegador é a exceção. */
.btn-continuar-navegador {
  margin-top: 1rem;
  background: none;
  border: 0;
  color: var(--texto-fraco);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0.5rem;
}
.btn-continuar-navegador:hover {
  color: var(--texto);
}
/* A dica de fixar na barra de tarefas: informação de apoio, não instrução
   principal — menor e mais apagada que o resto da caixa. */
.aviso-fixar:empty {
  display: none;
}
.aviso-fixar {
  font-size: 0.85rem;
  opacity: 0.75;
}

/* O chamado de cadastro de rosto. É o aviso que o dono pediu: funcionário novo
   chegou do painel e ainda não consegue bater ponto. Âmbar, não vermelho —
   é tarefa a fazer, não defeito. */
.banner-rostos {
  width: 100%;
  margin-top: 1.2vh;
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 183, 87, 0.45);
  background: rgba(255, 183, 87, 0.1);
  color: var(--aviso);
  font-size: 1.05rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.banner-rostos:hover {
  background: rgba(255, 183, 87, 0.18);
}

.relogio {
  text-align: center;
  margin: 2vh 0 1vh;
}
.hora {
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 200;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
}
.data {
  color: var(--texto-fraco);
  font-size: 1.1rem;
  margin-top: 0.4rem;
  text-transform: capitalize;
}

.camera-area {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modo {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  height: 100%;
}
.modo.ativo {
  display: flex;
}

/* O botão é o herói da tela: é a única coisa que o funcionário precisa
   encontrar, muitas vezes de longe e com pressa. Por isso ele respira — uma
   pulsação lenta no halo que diz "estou vivo, pode tocar" sem piscar nem
   chamar atenção de quem está trabalhando ao lado. */
.btn-bater {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 4rem;
  border-radius: 24px;
  border: 2px solid var(--acento);
  background: rgb(0 64 255 / 0.12);
  color: var(--texto);
  font-family: inherit;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s, box-shadow 0.18s, border-color 0.18s;
  animation: respirar 3.4s ease-in-out infinite;
}
@keyframes respirar {
  0%, 100% { box-shadow: 0 0 0 0 rgb(0 64 255 / 0.28); }
  50%      { box-shadow: 0 0 0 14px rgb(0 64 255 / 0); }
}
/* Quem pediu menos movimento não vê pulsação nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .btn-bater { animation: none; }
}
.btn-bater svg {
  width: clamp(56px, 9vw, 96px);
  height: clamp(56px, 9vw, 96px);
  color: var(--acento);
  transition: color 0.18s, transform 0.18s;
}
.btn-bater:hover {
  background: rgb(0 64 255 / 0.22);
  border-color: var(--acento-forte);
}
.btn-bater:hover svg {
  color: var(--acento-forte);
  transform: scale(1.04);
}
.btn-bater:active {
  transform: scale(0.97);
  /* Some a pulsação no toque: a resposta ao dedo tem de ser imediata e
     inequívoca, e uma animação em curso confunde as duas coisas. */
  animation: none;
}

.repouso-dica {
  color: var(--texto-fraco);
  font-size: 1rem;
  margin: 0;
}

/* ------------------------------------------------------------------ parear */

/* A porta de entrada. Terminal sem vínculo só faz uma coisa: parear — então a
   tela tem uma coisa só, grande e no centro. */
/* As duas telas de porta — instalar e parear — centralizam a caixa. A regra
   era presa ao id de uma só; a de instalar nasceu encostada na esquerda. */
#tela-parear,
#tela-instalar {
  align-items: center;
  justify-content: center;
}
.parear-caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 3rem 3.5rem;
  border-radius: 20px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  max-width: 560px;
  text-align: center;
}
.marca-parear {
  height: 44px;
  width: auto;
  margin-bottom: 0.5rem;
}
.parear-caixa h1 {
  margin: 0;
  font-size: 1.6rem;
}
.parear-passos {
  margin: 0;
  color: var(--texto-fraco);
  font-size: 1.05rem;
  line-height: 1.5;
}
.codigo-grande {
  background: var(--palco);
  border: 1px solid var(--borda);
  border-radius: 14px;
  color: var(--texto);
  font-size: 2.2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.45em;
  text-align: center;
  padding: 0.7rem 0 0.7rem 0.45em; /* compensa o letter-spacing do último dígito */
  width: 11ch;
}
.codigo-grande:focus {
  outline: 2px solid var(--acento);
  border-color: var(--acento);
}
.btn-parear-tela {
  font-size: 1.15rem;
  padding: 0.85rem 3rem;
}
.parear-status {
  min-height: 1.5rem;
  font-size: 1rem;
  color: var(--texto-fraco);
}
.parear-status.erro {
  color: var(--erro);
}
.parear-status.ok {
  color: var(--ok);
}

.btn-cancelar {
  display: none;
  margin-top: 0.8rem;
  background: none;
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
  padding: 0.6rem 1.6rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
}
.btn-cancelar.visivel {
  display: block;
}
.btn-cancelar:hover {
  color: var(--texto);
}
#video {
  height: 100%;
  max-height: 46vh;
  border-radius: 20px;
  background: #000;
  /* Espelhado: a pessoa se vê como num espelho, que é o esperado. */
  transform: scaleX(-1);
  object-fit: cover;
}
.mira {
  position: absolute;
  width: 240px;
  height: 300px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 50% / 42%;
  transition: border-color 0.25s;
  pointer-events: none;
}
.mira.detectado {
  border-color: var(--acento);
}
.mira.reconhecido {
  border-color: var(--ok);
}

.status {
  font-size: 1.4rem;
  color: var(--texto-fraco);
  min-height: 2.4rem;
  text-align: center;
  margin-top: 1.5vh;
}
.status.erro {
  color: var(--erro);
}
.status.aviso {
  color: var(--aviso);
}

.engrenagem {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto-fraco);
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.2s;
}
.engrenagem:hover {
  opacity: 1;
}

.confirmacao {
  position: absolute;
  inset: 0;
  background: var(--fundo);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 10;
}
.confirmacao.visivel {
  display: flex;
}
.confirmacao-icone {
  font-size: 6rem;
  line-height: 1;
  color: var(--ok);
}
.confirmacao.negada .confirmacao-icone {
  color: var(--aviso);
}
.confirmacao-nome {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  text-align: center;
  padding: 0 2rem;
}
.confirmacao-detalhe {
  font-size: 1.6rem;
  color: var(--texto-fraco);
}

/* ------------------------------------------------------------------ rosto */

#tela-rosto {
  flex-direction: column;
  padding: 1.5rem 2rem;
  overflow-y: auto;
}
.rosto-conteudo {
  width: 100%;
  max-width: 640px;
  margin: 1.2rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rosto-escolha {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* Botão de nome grande: é tocado em pé, de frente para a parede. */
.btn-escolha-rosto {
  font-size: 1.15rem;
  padding: 1rem;
  text-align: left;
}

/* Aviso de privacidade.
   Rola dentro da própria caixa, e não na página: com o botão fixo embaixo,
   quem chega já vê que existe uma ação e quanto texto falta. Texto legal que
   empurra o botão para fora da tela é como se não existisse. */
.ciencia {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 0;
}
.ciencia-texto {
  max-height: 46vh;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--fundo-2);
  color: var(--texto-fraco);
  font-size: 0.95rem;
  line-height: 1.55;
  /* O texto vem do banco com quebras de linha e seções — preservá-las é o que
     mantém a leitura possível sem transformar o aviso num parágrafo único. */
  white-space: pre-wrap;
}
.ciencia-acoes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ciencia-acoes .btn {
  font-size: 1.05rem;
  padding: 0.95rem;
}
.rosto-captura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.rosto-palco {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
#video-rosto {
  width: 100%;
  max-height: 380px;
  background: #000;
  /* Espelhado: a pessoa se vê como num espelho, senão "vire para a direita"
     manda ela para o lado errado. */
  transform: scaleX(-1);
  object-fit: cover;
}

/* A mira é o retorno ao vivo que faltava: sem ela a pessoa apertava um botão
   sem saber se o rosto estava bom. Branca = procurando, azul = achei mas ainda
   não serve, verde = travado e capturando. */
.rosto-mira {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 210px;
  height: 265px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50% / 42%;
  transition: border-color 0.2s, box-shadow 0.2s;
  pointer-events: none;
}
.rosto-mira.detectado {
  border-color: var(--acento);
}
.rosto-mira.pronto {
  border-color: var(--ok);
  box-shadow: 0 0 0 4px rgb(0 255 128 / 0.18);
}

/* Contagem dentro da mira: diz que a captura vai acontecer, e quando. */
.rosto-contagem {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4.5rem;
  font-weight: 200;
  color: var(--ok);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* Clarão no instante da captura: confirma o disparo sem depender de texto. */
.rosto-palco.flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  animation: rosto-flash 0.26s ease-out;
  pointer-events: none;
}
@keyframes rosto-flash {
  from { opacity: 0.85; }
  to { opacity: 0; }
}

.rosto-instrucao {
  font-size: 1.35rem;
  text-align: center;
  min-height: 1.8rem;
}

/* Progresso em bolinhas, não em "2 de 3 amostras": de longe, na parede, forma
   se lê mais rápido que número. */
.rosto-pontos {
  display: flex;
  gap: 0.6rem;
}
.rosto-pontos span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--borda);
  transition: background 0.2s, border-color 0.2s;
}
.rosto-pontos span.feito {
  background: var(--ok);
  border-color: var(--ok);
}

/* ------------------------------------------------------------------ admin */

#tela-admin {
  flex-direction: column;
  padding: 1.5rem 2rem;
  overflow-y: auto;
  user-select: text;
}
.admin-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-topo h1 {
  font-size: 1.6rem;
  margin: 0;
}
.btn-voltar {
  background: none;
  border: 1px solid var(--borda);
  color: var(--texto);
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
}

.abas {
  display: flex;
  gap: 0.5rem;
  margin: 1.2rem 0;
  border-bottom: 1px solid var(--borda);
}
.aba {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--texto-fraco);
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  font-size: 1rem;
}
.aba.ativa {
  color: var(--texto);
  border-bottom-color: var(--acento);
}

.painel {
  display: none;
}
.painel.ativo {
  display: block;
}

.colunas {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2.5rem;
}
@media (max-width: 1000px) {
  .colunas {
    grid-template-columns: 1fr;
  }
}

h2 {
  font-size: 1.1rem;
  color: var(--texto-fraco);
  font-weight: 600;
  margin: 0 0 0.9rem;
}

.lista-funcionarios {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lista-funcionarios li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1rem;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}
.lista-funcionarios .cpf {
  color: var(--texto-fraco);
  font-size: 0.85rem;
}
.btn-remover {
  background: none;
  border: none;
  color: var(--texto-fraco);
  cursor: pointer;
  font-size: 0.85rem;
}
.btn-remover:hover {
  color: var(--erro);
}

.acoes-funcionario {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.selo {
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--borda);
}
.selo.ok {
  color: var(--ok);
  border-color: rgb(0 255 128 / 0.35);
}
.selo.pendente {
  color: var(--aviso);
  border-color: rgba(255, 183, 87, 0.4);
}

/* Alvo do cadastro de rosto: diz PARA QUEM são as capturas. */
.alvo-rosto {
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: 1px solid rgb(0 64 255 / 0.45);
  background: rgb(0 64 255 / 0.1);
  color: var(--texto);
  font-weight: 600;
}

.linha-parear {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}
.linha-parear input {
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  color: var(--texto);
  font-size: 1.15rem;
  letter-spacing: 0.35em;
  font-variant-numeric: tabular-nums;
  width: 12rem;
  text-align: center;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 620px;
}
.formulario.estreito {
  max-width: 460px;
}
.formulario label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--texto-fraco);
}
.formulario input[type="text"],
.formulario input[type="number"],
.formulario input[type="date"] {
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  color: var(--texto);
  font-size: 1rem;
}
.formulario small {
  color: var(--texto-fraco);
  font-size: 0.8rem;
  line-height: 1.4;
}

.captura {
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 1rem;
}
#video-cadastro {
  width: 100%;
  max-height: 240px;
  border-radius: 8px;
  background: #000;
  transform: scaleX(-1);
  object-fit: cover;
}
.captura-controles {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.8rem;
}
.amostras {
  flex: 1;
  color: var(--texto-fraco);
  font-size: 0.9rem;
}
.dica {
  color: var(--texto-fraco);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0.8rem 0 0;
}

/* Todo botão responde a três coisas: passar o mouse, receber foco pelo teclado
   e ser pressionado. Faltava a terceira — e num terminal de parede, onde o
   toque não tem cursor, ela é a única que a pessoa percebe: sem ela, toca,
   nada muda, e toca de novo. */
.btn {
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  color: var(--texto);
  padding: 0.65rem 1.1rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.08s;
}
.btn:hover:not(:disabled) {
  border-color: var(--texto-fraco);
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-principal {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  font-weight: 600;
  padding: 0.8rem 1.1rem;
}
.btn-principal:hover:not(:disabled) {
  background: var(--acento-forte);
  border-color: var(--acento-forte);
  /* O halo sai da própria cor de ação: o botão fica aceso, não repintado. */
  box-shadow: 0 0 0 4px rgb(0 64 255 / 0.2);
}
.btn-fantasma {
  background: none;
}
.btn-perigo:hover {
  border-color: var(--erro);
  color: var(--erro);
}

/* `focus-visible` e não `focus`: o anel aparece para quem navega pelo teclado
   e não pisca no rosto de quem tocou com o dedo. */
.btn:focus-visible,
.btn-bater:focus-visible,
.btn-cancelar:focus-visible,
.btn-continuar-navegador:focus-visible,
.btn-escolha-rosto:focus-visible {
  outline: 2px solid var(--acento-forte);
  outline-offset: 3px;
}

.aviso {
  min-height: 1.3rem;
  font-size: 0.9rem;
}
.aviso.ok {
  color: var(--ok);
}
.aviso.erro {
  color: var(--erro);
}

.barra-registros {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.barra-registros label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--texto-fraco);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.tabela th {
  text-align: left;
  color: var(--texto-fraco);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--borda);
}
.tabela td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--borda);
}
.tabela .hora-cel {
  font-variant-numeric: tabular-nums;
}
.etiqueta {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid var(--borda);
}
.etiqueta.entrada {
  color: var(--ok);
  border-color: rgb(0 255 128 / 0.4);
}
.etiqueta.saida {
  color: var(--aviso);
  border-color: rgb(255 183 87 / 0.4);
}

.vazio {
  color: var(--texto-fraco);
  padding: 2rem 0;
  text-align: center;
  display: none;
}
.vazio.visivel {
  display: block;
}

.bloco-dados {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
.caminho {
  color: var(--texto-fraco);
  font-size: 0.85rem;
  font-family: Consolas, monospace;
  margin: 0;
  word-break: break-all;
}
.valor-faixa {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}