/* =====================================================================
   Painel Fleetime — estilos

   Consome tokens.css. NENHUMA cor solta neste arquivo: se falta um
   token, acrescente em tokens.css.

   ESCRITO PARA TELEFONE PRIMEIRO. O RH cadastra no computador, mas
   confere no celular, e o gestor de frota olha pendencia no patio. As
   consultas @media so ACRESCENTAM a partir de 721px - o layout base e
   o da tela estreita.

   A quebra e 721px porque o token --ft-quebra-movel vale 720. CSS nao
   aceita variavel dentro de @media: se mudar o token, mude aqui.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` vale sempre. Sem isto, qualquer display:flex de classe
   (.campo, .barra...) vence o atributo e o elemento some so no papel. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--ft-fonte);
  font-size: var(--ft-txt-corpo);
  line-height: var(--ft-linha-normal);
  color: var(--ft-texto);
  background: var(--ft-fundo);
  -webkit-font-smoothing: antialiased;
}

/* Trava a rolagem do fundo enquanto a gaveta esta aberta: rolar a
   pagina atras de um menu aberto e desorientador, e no telefone o dedo
   pega o fundo sem querer. */
body.gaveta-aberta { overflow: hidden; }

/* Todo dado numerico. Sem tabular-nums as colunas do espelho dancam
   e a comparacao entre dias fica impossivel. */
.dado {
  font-family: var(--ft-fonte-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.oculto { display: none !important; }

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Quem pediu menos movimento recebe menos movimento. Enjoo em tela e
   real, e nada aqui depende de animacao para ser entendido. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   ESTRUTURA — barra lateral

   O painel e uma aplicacao de trabalho, nao um site: quem usa passa a
   manha nele e precisa ver TODAS as secoes de uma vez, sem abrir menu.
   Aba no topo empurra a navegacao para uma faixa estreita e obriga a
   truncar rotulo; barra lateral cresce para baixo, que e a direcao que
   sobra numa tela de trabalho.

   No telefone e no tablet a mesma barra vira gaveta: some, abre por
   botao, escurece o fundo e fecha ao escolher.
   ===================================================================== */

.aplicacao {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  min-height: 100dvh;   /* dvh desconta a barra do navegador no celular */
}

/* ---- a barra ---- */
.lateral {
  position: fixed; inset: 0 auto 0 0;
  width: 276px; max-width: 86vw;
  z-index: var(--ft-camada-dialogo);
  display: flex; flex-direction: column;
  background: var(--ft-lateral-fundo);
  color: var(--ft-texto);
  border-right: var(--ft-borda) solid var(--ft-lateral-borda);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);

  /* Fechada por padrao: telefone primeiro. */
  transform: translateX(-100%);
  transition: transform var(--ft-transicao-lenta) var(--ft-easing);
  visibility: hidden;
}
.lateral.aberta { transform: none; visibility: visible; }

.lateral-marca {
  display: flex; align-items: center; gap: 10px;
  padding: var(--ft-esp-5) var(--ft-esp-4) var(--ft-esp-4);
  font-size: var(--ft-txt-secao); font-weight: var(--ft-peso-medio);
  letter-spacing: -0.3px;
}

.lateral-nav {
  flex: 1; overflow-y: auto;
  padding: var(--ft-esp-2) var(--ft-esp-3);
  display: flex; flex-direction: column; gap: 2px;
}

/* Rotulo de grupo. Sentenca capitalizada, nunca caixa alta. */
.lateral-grupo {
  font-size: var(--ft-txt-micro); color: var(--ft-lateral-apoio);
  padding: var(--ft-esp-5) var(--ft-esp-3) var(--ft-esp-1);
}

.lateral-item {
  appearance: none; border: 0; background: transparent;
  font-family: inherit; font-size: var(--ft-txt-rotulo);
  color: var(--ft-lateral-texto);
  width: 100%; min-height: var(--ft-toque-min);
  display: flex; align-items: center; gap: var(--ft-esp-3);
  padding: 0 var(--ft-esp-3);
  border-radius: var(--ft-raio-controle);
  cursor: pointer; text-align: left;
  justify-content: flex-start;
  /* A barra do estado ativo nasce transparente e do tamanho final: sem
     isso o rotulo pula 3px quando o item vira o atual. */
  border-left: 3px solid transparent;
  transition: background var(--ft-transicao) var(--ft-easing);
}
.lateral-item i { font-size: 19px; flex-shrink: 0; }
.lateral-item:hover { background: var(--ft-lateral-hover); color: var(--ft-texto); }

/* Cor, forma e peso juntos — nunca cor sozinha. */
.lateral-item[aria-current="page"] {
  background: var(--ft-teal-50);
  border-left-color: var(--ft-teal-400);
  color: var(--ft-teal-900);
  font-weight: var(--ft-peso-medio);
}
.lateral-item[aria-current="page"] i { color: var(--ft-teal-600); }

/* ---- rodape da barra: quem esta logado ---- */
/* Rodape em duas linhas: quem esta logado em cima, sair embaixo.
   Lado a lado, o "Sair" virava um icone de 48px espremido no canto e
   sumia ao lado do nome. */
.lateral-rodape {
  border-top: var(--ft-borda) solid var(--ft-lateral-borda);
  padding: var(--ft-esp-3);
  display: flex; flex-direction: column; gap: var(--ft-esp-2);
}
.lateral-usuario {
  display: flex; align-items: center; gap: var(--ft-esp-3);
  padding: 0 var(--ft-esp-1);
}
.lateral-avatar {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  background: var(--ft-teal-50); color: var(--ft-teal-800);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--ft-txt-apoio); font-weight: var(--ft-peso-medio);
}
.lateral-quem { flex: 1; min-width: 0; line-height: 1.25; }
.lateral-nome {
  font-size: var(--ft-txt-rotulo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lateral-perfil { font-size: var(--ft-txt-apoio); color: var(--ft-texto-secundario); }

.lateral-sair {
  background: transparent;
  border: var(--ft-borda) solid var(--ft-lateral-borda);
  border-radius: var(--ft-raio-controle);
  color: var(--ft-texto-secundario);
  width: 100%; min-height: var(--ft-toque-min);
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--ft-esp-3);
  padding: 0 var(--ft-esp-3);
  font-family: inherit; font-size: var(--ft-txt-rotulo);
  font-weight: var(--ft-peso-medio);
  cursor: pointer;
}
.lateral-sair i { font-size: 19px; flex-shrink: 0; }
.lateral-sair:hover:not(:disabled) {
  background: var(--ft-lateral-hover); color: var(--ft-texto);
}

/* Veu da gaveta. Some no computador, onde a barra e fixa. */
.lateral-veu {
  position: fixed; inset: 0; z-index: var(--ft-camada-veu);
  background: var(--ft-veu);
  border: 0; padding: 0;
  animation: surgir var(--ft-transicao) var(--ft-easing);
}
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }

/* ---- topo: so existe enquanto a barra e gaveta ---- */
.topo {
  display: flex; align-items: center; gap: var(--ft-esp-2);
  padding: var(--ft-esp-2) var(--ft-esp-3);
  padding-top: calc(var(--ft-esp-2) + env(safe-area-inset-top, 0px));
  background: var(--ft-superficie);
  border-bottom: var(--ft-borda) solid var(--ft-borda-cor);
  position: sticky; top: 0; z-index: var(--ft-camada-nav);
}
.topo-menu {
  background: transparent; border: 0; color: var(--ft-texto);
  min-width: var(--ft-toque-min); min-height: var(--ft-toque-min); padding: 0;
}
.topo-titulo {
  flex: 1; min-width: 0; letter-spacing: -0.4px;
  font-size: var(--ft-txt-corpo); font-weight: var(--ft-peso-medio);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topo-avatar {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  background: var(--ft-teal-50); color: var(--ft-teal-800);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--ft-txt-apoio); font-weight: var(--ft-peso-medio);
}

/* Topo e conteudo compartilham a MESMA caixa: mesma largura, mesmo
   recuo, ambos alinhados a esquerda.

   Antes o `main` era centralizado e o topo nao. O titulo comecava na
   borda e os filtros 300px adiante, com uma calha vazia entre os dois -
   a tela parecia quebrada, e estava. */
main {
  padding: var(--ft-esp-4);
  max-width: var(--ft-larg-conteudo);
  width: 100%;
}

/* =====================================================================
   TIPOGRAFIA DE PAGINA
   ===================================================================== */

h1 {
  font-size: var(--ft-txt-titulo); font-weight: var(--ft-peso-medio);
  margin: 0 0 var(--ft-esp-1); line-height: 1.25;
}

/* Primeira legenda da tela: encosta no titulo, que esta logo acima no
   topo. Espaco a mais aqui empurra todo o conteudo para baixo. */
main > .legenda:first-child { margin-top: 0; }
h2 {
  font-size: var(--ft-txt-secao); font-weight: var(--ft-peso-medio);
  margin: var(--ft-esp-5) 0 var(--ft-esp-3);
}
.legenda {
  color: var(--ft-texto-secundario); font-size: var(--ft-txt-apoio);
  margin: 0 0 var(--ft-esp-4);
}
.cabecalho { margin-bottom: var(--ft-esp-4); }
.cabecalho .legenda { margin-bottom: 0; }

/* Cabecalho com acao a direita. No telefone a acao cai para baixo e
   ocupa a largura toda; lado a lado em 360px sobra 140px para cada, e
   nenhum rotulo honesto cabe nisso. */
.cabecalho-linha {
  display: flex; flex-direction: column; gap: var(--ft-esp-3);
  margin-bottom: var(--ft-esp-4);
}
.cabecalho-linha .cabecalho { margin-bottom: 0; flex: 1; }

/* Painel de conteudo: agrupa uma secao inteira sobre o papel. */
.painel-caixa {
  background: var(--ft-superficie);
  border: var(--ft-borda) solid var(--ft-borda-cor);
  border-radius: var(--ft-raio-cartao);
  box-shadow: var(--ft-sombra-1);
  padding: var(--ft-esp-4);
  margin-bottom: var(--ft-esp-4);
}
.painel-caixa > h2:first-child { margin-top: 0; }

/* Alternador de secao. Dois botoes principais lado a lado disputavam
   atencao e pareciam duas acoes; isto e escolha de vista, nao acao. */
.alternador {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--ft-superficie-alt);
  border: var(--ft-borda) solid var(--ft-borda-cor);
  border-radius: var(--ft-raio-controle);
  margin-bottom: var(--ft-esp-4);
}
.alternador button {
  min-height: 38px; padding: 0 var(--ft-esp-4);
  border: 0; background: transparent;
  color: var(--ft-texto-secundario);
  font-size: var(--ft-txt-rotulo); border-radius: 6px;
}
.alternador button:hover:not(:disabled) { background: var(--ft-superficie); }
.alternador button[aria-pressed="true"] {
  background: var(--ft-superficie); color: var(--ft-texto);
  box-shadow: var(--ft-sombra-1);
  font-weight: var(--ft-peso-medio);
}

/* Interruptor. Alvo de 48px na linha inteira, nao so na caixinha: mirar
   um quadrado de 24px de luva nao funciona. */
.chave {
  display: flex; align-items: center; gap: var(--ft-esp-3);
  min-height: var(--ft-toque-min);
  padding: var(--ft-esp-2) 0;
  border-top: var(--ft-borda) solid var(--ft-borda-cor);
  cursor: pointer;
}
.chave:first-of-type { border-top: 0; }
.chave input[type="checkbox"] {
  width: 22px; height: 22px; min-height: 22px; flex-shrink: 0;
  accent-color: var(--ft-acao); padding: 0; margin: 0;
}
.chave-corpo { flex: 1; min-width: 0; }
.chave-titulo { font-size: var(--ft-txt-rotulo); }
.chave-apoio { font-size: var(--ft-txt-apoio); color: var(--ft-texto-secundario); }

/* Lista de exigencias de senha, marcando enquanto se digita. */
.exigencias {
  list-style: none; margin: var(--ft-esp-2) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--ft-esp-1);
}
.exigencia {
  display: flex; align-items: center; gap: var(--ft-esp-2);
  font-size: var(--ft-txt-apoio); color: var(--ft-texto-secundario);
}
.exigencia i { font-size: 16px; flex-shrink: 0; }
/* Atendida muda cor E icone: o circulo vazio vira visto. */
.exigencia.atendida { color: var(--ft-ok); }

/* =====================================================================
   CONTROLES
   ===================================================================== */

/* Filtros empilham no telefone e viram linha no computador. Largura em
   JS (el.style.width) era o que quebrava a tela de 360px: agora a
   largura vem daqui. */
.barra {
  display: flex; flex-direction: column;
  gap: var(--ft-esp-3);
  margin-bottom: var(--ft-esp-4);
}
.barra > * { width: 100%; }
.barra-acoes { margin-top: var(--ft-esp-5); }

.campo { display: flex; flex-direction: column; gap: var(--ft-esp-1); }
.campo label { font-size: var(--ft-txt-apoio); color: var(--ft-texto-secundario); }
/* `.campo-largo` so ganha largura no computador - ver o bloco de
   721px. Aqui, com a barra em COLUNA, o `flex-basis` de 260px virava
   ALTURA: o campo Buscar de Pessoas, O dia, Marcacoes e Espelho abria
   um vao de 260px embaixo dele no telefone. */

/* 16px e o piso do iOS: abaixo disso ele amplia a pagina ao focar. */
input, select, textarea {
  font-size: 16px;
  font-family: inherit; font-size: var(--ft-txt-corpo);
  width: 100%;
  padding: 0 var(--ft-esp-3);
  height: var(--ft-toque-min);
  border: var(--ft-borda) solid var(--ft-borda-cor);
  border-radius: var(--ft-raio-controle);
  background: var(--ft-superficie); color: var(--ft-texto);
}
textarea { height: auto; min-height: 96px; padding: var(--ft-esp-3); resize: vertical; }

/* CAIXA DE MARCAR NAO E CAMPO DE TEXTO.

   A regra acima vale para `input` inteiro, e inflava o checkbox para
   44x44 com largura total: no formulario do rosto virava um quadrado
   enorme ao lado do texto, sem dizer que era para marcar. (`.chave` e
   `.linha` tem regra propria, mais especifica, e continuam como estao.) */
input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; flex: 0 0 auto;
  padding: 0; accent-color: var(--ft-acao);
}

/* Escolher arquivo tambem nao e campo de texto: sem altura fixa nem
   moldura, so o botao do navegador. */
input[type="file"] {
  height: auto; padding: 0; border: 0; background: transparent;
  font-size: var(--ft-txt-apoio);
}
input:disabled, select:disabled {
  background: var(--ft-superficie-alt); color: var(--ft-texto-secundario);
}

/* Anel de foco visivel em tudo que recebe teclado. :focus-visible nao
   dispara no clique de mouse, entao nao polui a tela do RH. */
:focus-visible {
  outline: 2px solid var(--ft-foco);
  outline-offset: 2px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ft-foco); outline-offset: 0;
  border-color: transparent;
}

/* ---- botoes ----
   Quatro variantes e so. Base = secundario; .principal e a acao da
   tela; .perigo e destrutivo; .discreto some no fundo.
   Altura minima de 48px em todos: e o piso de toque do projeto. */
button {
  font-family: inherit; font-size: var(--ft-txt-rotulo);
  font-weight: var(--ft-peso-medio);
  min-height: var(--ft-toque-min); padding: 0 var(--ft-esp-4);
  border-radius: var(--ft-raio-controle); cursor: pointer;
  border: var(--ft-borda) solid var(--ft-borda-cor);
  background: var(--ft-superficie); color: var(--ft-texto);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ft-esp-2);
  transition: background var(--ft-transicao) var(--ft-easing);
}
button:hover:not(:disabled) { background: var(--ft-superficie-alt); }

button.principal {
  background: var(--ft-acao); color: var(--ft-acao-texto);
  border-color: transparent;
}
button.principal:hover:not(:disabled) { background: var(--ft-acao-forte); }

/* Destrutivo nasce discreto e so fica vermelho no hover: desligar
   colaborador nao pode ser o alvo mais facil da tela.

   Nem o CONTORNO vermelho fica: com ele, "Rejeitar selecionadas"
   disputava atencao com a acao principal ao lado. O vermelho aparece
   quando a mao ja esta no botao, que e quando ele avisa. */
button.perigo {
  color: var(--ft-texto-secundario); border-color: var(--ft-borda-cor);
  background: var(--ft-superficie);
}
button.perigo:hover:not(:disabled) {
  color: var(--ft-critico); border-color: var(--ft-critico);
  background: var(--ft-critico-bg);
}

button.discreto {
  background: transparent; border-color: transparent;
  color: var(--ft-texto-secundario);
}
button.discreto:hover:not(:disabled) {
  background: var(--ft-superficie-alt); color: var(--ft-texto);
}

button.grande { min-height: var(--ft-toque-principal); font-size: 18px; }
button.icone { padding: 0 var(--ft-esp-3); min-width: var(--ft-toque-min); }
button:disabled { opacity: .5; cursor: default; }

/* Ocupado: o rotulo FICA. Trocar o texto por "Aguarde…" muda a largura
   do botao, empurra a linha e faz o operador perder o lugar. O que
   entra e um disco girando ao lado. */
button[aria-busy="true"] { cursor: progress; }
.girando {
  width: 15px; height: 15px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: girar 640ms linear infinite;
  opacity: .8;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* =====================================================================
   CARTOES DE NUMERO
   ===================================================================== */

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ft-esp-3); margin-bottom: var(--ft-esp-5);
}
.metrica {
  background: var(--ft-superficie); border-radius: var(--ft-raio-cartao);
  padding: var(--ft-esp-4);
  border: var(--ft-borda) solid var(--ft-borda-cor);
  box-shadow: var(--ft-sombra-1);
}
.metrica-rotulo { font-size: var(--ft-txt-apoio); color: var(--ft-texto-secundario); }
.metrica-valor {
  font-size: var(--ft-txt-titulo); font-weight: var(--ft-peso-medio);
  margin-top: var(--ft-esp-1);
}

/* =====================================================================
   LISTA DE ESTADO
   Cor NUNCA sozinha: cada estado carrega cor, icone e barra lateral.
   Cerca de 8% dos homens tem deficiencia de percepcao vermelho-verde.
   ===================================================================== */

.lista {
  border: var(--ft-borda) solid var(--ft-borda-cor);
  border-radius: var(--ft-raio-cartao);
  overflow: hidden; background: var(--ft-superficie);
  box-shadow: var(--ft-sombra-1);
}
.linha {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ft-esp-2) var(--ft-esp-3);
  /* Aperta o respiro, nunca o alvo: o botao dentro da linha continua
     com 48px. Com 74px por item cabiam tres numa tela inteira. */
  padding: var(--ft-esp-2) var(--ft-esp-4);
  border-left: var(--ft-borda-estado) solid transparent;
  border-top: var(--ft-borda) solid var(--ft-borda-cor);
}
.linha:first-child { border-top: 0; }
.linha-corpo { flex: 1 1 200px; min-width: 0; }
.linha-titulo {
  font-size: var(--ft-txt-rotulo); font-weight: var(--ft-peso-medio);
  color: var(--ft-texto);
}
.linha-apoio { font-size: var(--ft-txt-apoio); }
.linha-icone { font-size: 20px; flex-shrink: 0; }
.linha button { flex-shrink: 0; }

/* O estado vive na BARRA e no ICONE, nao no preenchimento.
   Pintar a linha inteira de amarelo ou rosa transforma cada item num
   bloco de cor, e tres itens viram uma parede - e amarelo saturado em
   area grande e o que mais cansa. Cor, icone e forma continuam juntos,
   que e o que a regra 12 pede. */
.critico { border-left-color: var(--ft-critico); }
.critico .linha-icone { color: var(--ft-critico); }

.atencao { border-left-color: var(--ft-atencao); }
.atencao .linha-icone { color: var(--ft-atencao); }

.critico .linha-apoio, .atencao .linha-apoio { color: var(--ft-texto-secundario); }

.ok { border-left-color: var(--ft-ok); }
.ok .linha-icone { color: var(--ft-ok); }
.ok .linha-apoio { color: var(--ft-texto-secundario); }

/* Caixa de selecao grande: marcar pendencia com o polegar exige alvo,
   nao mira. */
/* Linha clicavel (escolha de colaborador no espelho). Herda a forma da
   lista, nao a do botao: dentro de uma lista o alvo e a linha inteira. */
button.linha {
  width: 100%; text-align: left;
  border-radius: 0; border-top: var(--ft-borda) solid var(--ft-borda-cor);
  border-right: 0; border-bottom: 0;
  background: var(--ft-superficie); font-weight: var(--ft-peso-normal);
  min-height: var(--ft-toque-secundario);
}
button.linha:hover:not(:disabled) { background: var(--ft-superficie-alt); }

.linha input[type="checkbox"] {
  width: 24px; height: 24px; min-height: 24px;
  flex-shrink: 0; accent-color: var(--ft-acao); padding: 0;
}

/* =====================================================================
   TABELA
   No telefone cada linha vira cartao: sete colunas nao cabem em 360px,
   e rolagem horizontal esconde justamente a coluna de acao. O rotulo
   de cada celula vem do atributo data-rotulo, escrito pelo JS.
   ===================================================================== */

.tabela-caixa { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%; border-collapse: collapse;
  background: var(--ft-superficie);
  border-radius: var(--ft-raio-cartao); overflow: hidden;
  box-shadow: var(--ft-sombra-1);
}
th, td {
  text-align: left; padding: var(--ft-esp-3) var(--ft-esp-4);
  border-bottom: var(--ft-borda) solid var(--ft-borda-cor);
  font-size: var(--ft-txt-rotulo);
}
th {
  font-weight: var(--ft-peso-medio); font-size: var(--ft-txt-apoio);
  color: var(--ft-texto-secundario);
}
td.num, th.num { text-align: right; }
tr:last-child td { border-bottom: 0; }

/* Acao dentro de linha de tabela e secundaria: a acao da TELA e o botao
   principal la em cima. Dois botoes cheios por linha, repetidos vinte
   vezes, viram uma parede de caixas. */
td.acao { text-align: right; white-space: nowrap; }
td.acao button {
  min-height: 36px; padding: 0 var(--ft-esp-3);
  font-size: var(--ft-txt-apoio);
  background: transparent; border-color: transparent;
  color: var(--ft-texto-secundario);
}
td.acao button:hover:not(:disabled) {
  background: var(--ft-superficie-alt); color: var(--ft-texto);
}
td.acao button.perigo:hover:not(:disabled) {
  background: var(--ft-critico-bg); color: var(--ft-critico);
}
td.acao .barra { flex-direction: row; gap: var(--ft-esp-1); margin: 0; justify-content: flex-end; }
td.acao .barra > * { width: auto; }

/* Linha de tabela mais apertada: o respiro encolhe, o alvo de toque nao
   - o botao continua com 36px de altura e area lateral. */
tbody td { padding: var(--ft-esp-2) var(--ft-esp-4); }

.positivo { color: var(--ft-ok); }
.negativo { color: var(--ft-critico); }

@media (max-width: 720px) {
  table.responsiva { box-shadow: none; background: transparent; }
  table.responsiva thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.responsiva tr {
    display: block; margin-bottom: var(--ft-esp-3);
    background: var(--ft-superficie);
    border: var(--ft-borda) solid var(--ft-borda-cor);
    border-radius: var(--ft-raio-cartao);
    box-shadow: var(--ft-sombra-1);
    padding: var(--ft-esp-2) var(--ft-esp-3);
  }
  table.responsiva td {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--ft-esp-3);
    padding: var(--ft-esp-2) 0; border-bottom: 0; text-align: left;
  }
  table.responsiva td.num { text-align: right; }
  table.responsiva td::before {
    content: attr(data-rotulo);
    font-size: var(--ft-txt-apoio); color: var(--ft-texto-secundario);
    flex-shrink: 0;
  }
  /* Celula sem rotulo (acao, destaque) ocupa a largura toda. */
  table.responsiva td[data-rotulo=""]::before { content: none; }
  table.responsiva td[data-rotulo=""] { justify-content: flex-start; }
  table.responsiva td.acao { padding-top: var(--ft-esp-3); }
  table.responsiva td.acao button { width: 100%; }
}

/* =====================================================================
   ETIQUETAS E PESSOA
   ===================================================================== */

.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--ft-txt-apoio); border-radius: 20px;
  padding: 3px 10px; white-space: nowrap;
  border: var(--ft-borda) solid transparent;
}
.etiqueta-ok {
  background: var(--ft-ok-bg); color: var(--ft-ok-texto);
  border-color: var(--ft-ok);
}
.etiqueta-alerta {
  background: var(--ft-atencao-bg); color: var(--ft-atencao-texto);
  border-color: var(--ft-atencao);
}
.etiqueta-neutra {
  background: var(--ft-superficie-alt); color: var(--ft-texto-secundario);
  border-color: var(--ft-borda-cor);
}

.pessoa { display: flex; align-items: center; gap: var(--ft-esp-3); min-width: 0; }
.iniciais {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: var(--ft-teal-50); color: var(--ft-teal-800);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--ft-txt-apoio); font-weight: var(--ft-peso-medio);
}
.pessoa-nome { font-weight: var(--ft-peso-medio); }
.pessoa .legenda { margin: 0; }

/* =====================================================================
   ESTADOS DA PAGINA
   ===================================================================== */

.vazio {
  text-align: center; padding: var(--ft-esp-6) var(--ft-esp-4);
  color: var(--ft-texto-secundario); background: var(--ft-superficie);
  border-radius: var(--ft-raio-cartao);
  border: var(--ft-borda) solid var(--ft-borda-cor);
}
.vazio i { font-size: 30px; display: block; margin-bottom: var(--ft-esp-2); opacity: .6; }

.faixa, .erro, .aviso, .ok-msg, .info {
  display: flex; align-items: flex-start; gap: var(--ft-esp-3);
  padding: var(--ft-esp-3) var(--ft-esp-4);
  border-radius: var(--ft-raio-controle);
  margin-bottom: var(--ft-esp-4); font-size: var(--ft-txt-rotulo);
}
.faixa i, .erro i, .aviso i, .ok-msg i, .info i { font-size: 19px; flex-shrink: 0; }
.erro {
  background: var(--ft-critico-bg); color: var(--ft-critico-texto);
  border-left: var(--ft-borda-estado) solid var(--ft-critico);
}
.aviso {
  background: var(--ft-atencao-bg); color: var(--ft-atencao-texto);
  border-left: var(--ft-borda-estado) solid var(--ft-atencao);
}
.ok-msg {
  background: var(--ft-ok-bg); color: var(--ft-ok-texto);
  border-left: var(--ft-borda-estado) solid var(--ft-ok);
}
.info {
  background: var(--ft-info-bg); color: var(--ft-info-texto);
  border-left: var(--ft-borda-estado) solid var(--ft-info);
}

.carregando {
  display: flex; align-items: center; gap: var(--ft-esp-3);
  color: var(--ft-texto-secundario); font-size: var(--ft-txt-apoio);
  padding: var(--ft-esp-5) var(--ft-esp-4);
}

/* Esqueleto: ocupa o espaco que a lista vai ocupar. Evita o salto de
   layout que faz o operador clicar no lugar errado quando a resposta
   chega. */
.esqueleto {
  background: var(--ft-superficie-alt);
  border-radius: var(--ft-raio-controle);
  height: 56px; margin-bottom: var(--ft-esp-2);
  animation: pulsar 1.4s ease-in-out infinite;
}
@keyframes pulsar { 50% { opacity: .55; } }

/* =====================================================================
   AVISOS FLUTUANTES
   Substituem o alert() do navegador. Ficam embaixo no telefone, acima
   da barra de navegacao; no computador vao para o canto superior
   direito, longe do ponto onde a acao acontece.
   ===================================================================== */

.avisos {
  position: fixed; z-index: var(--ft-camada-aviso);
  left: var(--ft-esp-3); right: var(--ft-esp-3);
  bottom: calc(var(--ft-nav-altura) + env(safe-area-inset-bottom, 0px) + var(--ft-esp-3));
  display: flex; flex-direction: column; gap: var(--ft-esp-2);
  pointer-events: none;
}
.aviso-flutuante {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--ft-esp-3);
  padding: var(--ft-esp-3) var(--ft-esp-3) var(--ft-esp-3) var(--ft-esp-4);
  border-radius: var(--ft-raio-cartao);
  border-left: var(--ft-borda-estado) solid transparent;
  box-shadow: var(--ft-sombra-2);
  font-size: var(--ft-txt-rotulo);
  animation: entrar-aviso var(--ft-transicao-lenta) var(--ft-easing);
}
.aviso-flutuante.saindo {
  animation: sair-aviso var(--ft-transicao) var(--ft-easing) forwards;
}
.aviso-flutuante i { font-size: 20px; flex-shrink: 0; }
.aviso-corpo { flex: 1; min-width: 0; }
.aviso-titulo { font-weight: var(--ft-peso-medio); }
.aviso-detalhe { font-size: var(--ft-txt-apoio); opacity: .9; }

/* Acao dentro do aviso ("Tentar de novo"). Herda a cor do estado, para
   nao introduzir um azul de link no meio de uma faixa vermelha. */
.aviso-acao {
  background: transparent; border: 0; padding: 0;
  margin-top: var(--ft-esp-1);
  color: inherit; text-decoration: underline;
  font-size: var(--ft-txt-apoio); font-weight: var(--ft-peso-medio);
  min-height: var(--ft-toque-min); min-width: 0;
  justify-content: flex-start;
}
.aviso-acao:hover:not(:disabled) { background: transparent; opacity: .8; }

/* A faixa de erro pode trazer um botao de saida. Ele quebra para a linha
   de baixo no telefone. */
.erro button { margin-left: auto; flex-shrink: 0; }

/* Foco programatico no conteudo ao trocar de vista nao desenha anel: o
   anel serve para dizer onde o teclado esta, e aqui ninguem navegou ate
   ali. O leitor de tela, esse, anuncia. */
#conteudo:focus { outline: none; }

/* Fechar precisa de alvo de toque, mesmo sendo um "x". */
.aviso-fechar {
  flex-shrink: 0; background: transparent; border: 0;
  color: inherit; opacity: .7;
  min-height: var(--ft-toque-min); min-width: var(--ft-toque-min);
  padding: 0;
}
.aviso-fechar:hover:not(:disabled) { background: transparent; opacity: 1; }

.aviso-flutuante.critico { background: var(--ft-critico-bg); color: var(--ft-critico-texto); border-left-color: var(--ft-critico); }
.aviso-flutuante.atencao { background: var(--ft-atencao-bg); color: var(--ft-atencao-texto); border-left-color: var(--ft-atencao); }
.aviso-flutuante.ok      { background: var(--ft-ok-bg);      color: var(--ft-ok-texto);      border-left-color: var(--ft-ok); }
.aviso-flutuante.info    { background: var(--ft-info-bg);    color: var(--ft-info-texto);    border-left-color: var(--ft-info); }

@keyframes entrar-aviso {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sair-aviso {
  to { opacity: 0; transform: translateY(8px); }
}

/* =====================================================================
   DIALOGO
   Substitui confirm() e prompt(). Usa <dialog> nativo: foco preso,
   Esc fecha e leitor de tela anuncia sem codigo extra.

   No telefone sobe do rodape ocupando a largura toda; no computador
   fica centralizado.
   ===================================================================== */

.dialogo {
  border: 0; padding: 0;
  background: var(--ft-superficie); color: var(--ft-texto);
  box-shadow: var(--ft-sombra-2);
  width: 100%; max-width: 100%;
  margin: auto auto 0;
  border-radius: var(--ft-raio-tela) var(--ft-raio-tela) 0 0;
  animation: subir-dialogo var(--ft-transicao-lenta) var(--ft-easing);
}
.dialogo::backdrop { background: var(--ft-veu); }

.dialogo-corpo {
  padding: var(--ft-esp-5) var(--ft-esp-4);
  padding-bottom: calc(var(--ft-esp-5) + env(safe-area-inset-bottom, 0px));
  max-height: 82vh; overflow-y: auto;
}
.dialogo-titulo {
  font-size: var(--ft-txt-secao); font-weight: var(--ft-peso-medio);
  margin: 0 0 var(--ft-esp-2);
}
.dialogo-descricao {
  color: var(--ft-texto-secundario); font-size: var(--ft-txt-rotulo);
  margin: 0 0 var(--ft-esp-4);
}
.dialogo-campos { display: flex; flex-direction: column; gap: var(--ft-esp-3); }

/* Confirmar primeiro na ordem visual, cancelar depois. No telefone os
   dois ficam largos e empilhados: botao de 48px lado a lado em 360px
   deixa a area de erro grande demais para acao destrutiva. */
.dialogo-acoes {
  display: flex; flex-direction: column-reverse; gap: var(--ft-esp-2);
  margin-top: var(--ft-esp-5);
}
.dialogo-acoes button { width: 100%; }

/* Caminho de compatibilidade: navegador sem showModal recebe a mesma
   caixa com o veu desenhado a mao. Nao ha foco preso ali - por isso e
   fallback, nao a implementacao principal. */
.veu-manual {
  position: fixed; inset: 0;
  background: var(--ft-veu); z-index: var(--ft-camada-veu);
}
.dialogo[open]:not(:modal) {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--ft-camada-dialogo);
}

@keyframes subir-dialogo {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* =====================================================================
   ENTRADA (login e troca de senha)
   ===================================================================== */

/* TELEFONE PRIMEIRO. Uma coluna, marca curta no topo, formulário logo
   abaixo — sem rolagem para chegar ao campo. A partir de 1000px a marca
   vira a metade esquerda e ganha espaço para dizer o que é o produto. */
/* =====================================================================
   TELA DE ENTRADA
   =====================================================================

   Duas colunas: identidade escura e formulario claro. No telefone a
   faixa escura fica curta em cima e o formulario logo abaixo, sem
   rolagem para chegar ao campo.

   NAO HA CARTAO aqui, e e proposital. Cartao branco sobre papel cinza e
   o desenho do painel, onde ele separa conteudo de fundo. Na entrada nao
   existe fundo: a coluna inteira e a superficie, e a caixa a mais so
   punha borda e sombra sem separar nada - era ela que dava o aspecto de
   template. Sem ela cabe escala de verdade: titulo 32, campo 56, botao
   68. */
.entrada {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--ft-superficie);
}

/* ---- coluna escura: identidade, relogio e placa ---- */
.entrada-marca-lado {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--ft-marca-900) 0%, var(--ft-marca-600) 62%, var(--ft-marca-700) 100%);
  color: var(--ft-teal-50);
  padding: var(--ft-esp-5) var(--ft-esp-4);
  padding-top: calc(var(--ft-esp-5) + env(safe-area-inset-top, 0px));
  display: flex; flex-direction: column; gap: var(--ft-esp-5);
}

/* Marca ampliada sangrando pela borda. E o UNICO recurso decorativo da
   tela: sem forma solta, sem cor de fora da paleta. */
.entrada-fundo {
  position: absolute; right: -210px; bottom: -190px;
  opacity: .075; pointer-events: none;
}

.entrada-marca {
  position: relative;
  display: flex; align-items: center; gap: 10px;
}
.entrada-nome {
  font-size: 22px; font-weight: var(--ft-peso-medio);
  letter-spacing: -0.5px; color: var(--ft-branco);
}

.entrada-relogio { position: relative; }
.entrada-hora {
  font-size: 40px; font-weight: var(--ft-peso-medio); line-height: 1;
  color: var(--ft-branco); letter-spacing: -1.2px;
}

/* No telefone a faixa escura estava empurrando "Entrar" para fora da
   dobra: relogio grande mais a placa inteira ocupavam 40% da tela, e o
   botao ficava atras da barra do navegador. A placa desce para o fim da
   pagina; a identificacao continua visivel, so nao antes do campo. */
@media (max-width: 720px) {
  .entrada-marca-lado { padding: var(--ft-esp-4); gap: var(--ft-esp-3); }
  .entrada-hora { font-size: 34px; }
  .entrada-hora-fonte { margin-top: 6px; }
  .entrada-pe { display: none; }
  .entrada-form { padding: var(--ft-esp-5) var(--ft-esp-4); }

  /* A placa reaparece depois do formulario, no fim da pagina. */
  .entrada-placa-rodape {
    display: block;
    padding: var(--ft-esp-5) var(--ft-esp-4);
    padding-bottom: calc(var(--ft-esp-5) + env(safe-area-inset-bottom, 0px));
    background: var(--ft-ink-50);
    border-top: 1px solid var(--ft-borda-cor);
  }
  .entrada-placa-rodape .entrada-placa { color: var(--ft-texto-secundario); text-align: center; }
  .entrada-placa-rodape .entrada-placa b { color: var(--ft-texto); }
  .entrada-placa-rodape .entrada-placa-links { justify-content: center; }
  .entrada-placa-rodape .entrada-placa-links a { color: var(--ft-texto-secundario); }
}

/* Fora do telefone a placa vive so na coluna escura. */
.entrada-placa-rodape { display: none; }
.entrada-data {
  margin-top: 8px; font-size: var(--ft-txt-rotulo); color: var(--ft-teal-100);
}
.entrada-hora-fonte {
  margin-top: var(--ft-esp-3);
  display: flex; align-items: center; gap: 6px;
  font-size: var(--ft-txt-micro); color: rgba(225, 245, 238, .58);
}
.entrada-hora-fonte i { font-size: 14px; }

/* A placa. Um instrumento diz quem o fabricou, qual versao e onde
   reclamar. Mono no que e dado. */
.entrada-pe { position: relative; margin-top: auto; padding-top: var(--ft-esp-4); }
.entrada-placa {
  font-size: var(--ft-txt-micro); line-height: 1.8;
  color: rgba(238, 240, 253, .62);
}
.entrada-placa b { color: rgba(255, 255, 255, .86); font-weight: var(--ft-peso-medio); }
.entrada-placa-links { margin-top: 6px; display: flex; gap: 8px; }
.entrada-placa-links a { color: rgba(238, 240, 253, .62); }
.entrada-placa-links span { opacity: .4; }

/* ---- coluna clara: o formulario ---- */
.entrada-form {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--ft-esp-6) var(--ft-esp-4);
  padding-bottom: calc(var(--ft-esp-6) + env(safe-area-inset-bottom, 0px));
  background: var(--ft-superficie);
}
.entrada-caixa { width: 100%; max-width: 380px; }

.entrada-titulo {
  font-size: 32px; font-weight: var(--ft-peso-medio);
  letter-spacing: -0.8px; margin: 0 0 var(--ft-esp-2);
}
.entrada-legenda {
  margin: 0 0 var(--ft-esp-6);
  color: var(--ft-texto-secundario); font-size: var(--ft-txt-rotulo);
}

/* Seletor de perfil. Nao escolhe autenticacao - muda o teclado. Piso de
   48px nos dois, como qualquer alvo de toque. */
.entrada-perfis { display: flex; gap: 8px; margin-bottom: var(--ft-esp-5); }
.entrada-perfil {
  flex: 1; min-height: var(--ft-toque-min); padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: var(--ft-borda) solid var(--ft-borda-cor); border-radius: 10px;
  background: transparent; color: var(--ft-texto-secundario);
  font: inherit; font-size: var(--ft-txt-apoio); cursor: pointer;
}
.entrada-perfil i { font-size: 17px; }
.entrada-perfil:hover:not(:disabled) { background: var(--ft-superficie-alt); }
.entrada-perfil[aria-pressed="true"] {
  background: var(--ft-superficie-alt); color: var(--ft-texto);
  border-color: var(--ft-texto-secundario); font-weight: var(--ft-peso-medio);
}

.entrada .campo { margin-bottom: var(--ft-esp-4); }

/* Campo com FUNDO, nao so contorno.
   Sobre branco, a borda de #E5E8E6 some ao sol - e o modulo 13 diz
   exatamente isso: cinza claro sobre branco desaparece na cabine. Tirar
   o cartao deixou o campo boiando em branco e o problema apareceu no
   telefone, em uso real.

   font-size 17 nao e preferencia: abaixo de 16 o iOS DA ZOOM sozinho ao
   focar o campo, a tela salta e a pessoa perde o lugar. */
.entrada .campo input {
  min-height: 56px;
  font-size: 17px;
  border-radius: 10px;
  background: var(--ft-ink-50);
  border: 1.5px solid #C5CBDA;
  color: var(--ft-texto);
}
.entrada .campo input:focus {
  background: var(--ft-superficie);
  border-color: var(--ft-acao);
}
.entrada .campo label { font-size: 15px; color: var(--ft-texto); }

.entrada .senha-olho {
  width: auto; min-height: 0; margin-top: 0;
  color: var(--ft-texto-secundario);
}
.entrada .senha-olho:hover:not(:disabled) { color: var(--ft-texto); }
.entrada .botao.principal { width: 100%; margin-top: var(--ft-esp-5); border-radius: 10px; }

/* Caps Lock: cor, icone e barra de 4px. Nunca so cor. */
.entrada-caps {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 0; padding-left: 8px;
  border-left: 4px solid var(--ft-atencao);
  font-size: var(--ft-txt-apoio); color: var(--ft-texto);
}
.entrada-caps[hidden] { display: none; }

/* "Esqueceu a senha?" nao pode ter o peso da acao principal: botao de
   largura cheia logo abaixo dela disputa a mesma atencao. */
.entrada-ajuda { display: flex; justify-content: flex-end; margin-top: 4px; }
.entrada-ajuda .botao { min-height: var(--ft-toque-min); font-size: var(--ft-txt-rotulo); }

/* Coluna unica centrada: troca de senha obrigatoria. Nao herda o layout
   dividido da entrada. */
.entrada-simples {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--ft-esp-5);
  padding: var(--ft-esp-5) var(--ft-esp-4);
  padding-top: calc(var(--ft-esp-5) + env(safe-area-inset-top, 0px));
  background: var(--ft-fundo);
}
.entrada-simples .entrada-marca { max-width: 420px; width: 100%; margin: 0 auto; }
.entrada-simples .caixa { max-width: 420px; width: 100%; margin: 0 auto; }
.entrada-simples .entrada-nome { color: var(--ft-texto); }
.entrada-simples .campo + .campo { margin-top: var(--ft-esp-4); }
.entrada-simples .caixa > .botao { width: 100%; margin-top: var(--ft-esp-5); }
.entrada-simples .senha-olho { width: auto; margin-top: 0; }

.caixa {
  background: var(--ft-superficie);
  border: var(--ft-borda) solid var(--ft-borda-cor);
  border-radius: var(--ft-raio-cartao);
  padding: var(--ft-esp-5) var(--ft-esp-4);
  box-shadow: var(--ft-sombra-1);
}
.caixa-titulo {
  font-size: var(--ft-txt-titulo); font-weight: var(--ft-peso-medio);
  margin: 0 0 var(--ft-esp-1); letter-spacing: -0.4px;
}
.caixa > .legenda { margin-bottom: var(--ft-esp-5); }

/* Olho para revelar a senha. Sem isso, quem digita de luva erra e nao
   sabe onde errou - e o erro custa uma tentativa das cinco. */
.senha-caixa { position: relative; }
.senha-caixa input { padding-right: var(--ft-toque-min); }
.senha-olho {
  position: absolute; right: 0; top: 0;
  min-height: var(--ft-toque-min); min-width: var(--ft-toque-min);
  background: transparent; border: 0; color: var(--ft-texto-secundario);
  padding: 0;
}
.senha-olho:hover:not(:disabled) { background: transparent; color: var(--ft-texto); }

/* =====================================================================
   TELA DO COLABORADOR — bater ponto
   Previa do app. Fundo escuro sempre: reduz ofuscamento na cabine a
   noite e mantem o contraste do numero grande durante o dia.
   ===================================================================== */

.ponto { display: flex; justify-content: center; padding: var(--ft-esp-2) 0; }

.ponto-cartao {
  width: 100%; max-width: 380px;
  background: var(--ft-cabine-fundo);
  border-radius: var(--ft-raio-tela);
  padding: var(--ft-esp-5) var(--ft-esp-4);
  color: var(--ft-branco);
  text-align: center;
  box-shadow: var(--ft-sombra-2);
}

.ponto-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ft-esp-2); margin-bottom: var(--ft-esp-5);
}
.ponto-quem { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.ponto-nome {
  font-size: var(--ft-txt-apoio); color: var(--ft-ink-300);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A funcao por ultimo e mais clara: e ela que decide o que a batida cobra. */
.ponto-organograma {
  font-size: var(--ft-txt-micro); color: var(--ft-teal-200);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ponto-etiqueta {
  font-size: var(--ft-txt-micro); color: var(--ft-teal-100);
  border: 1px solid var(--ft-teal-600); border-radius: 20px;
  padding: 3px 10px; white-space: nowrap;
}

/* Numero grande o bastante para ler de relance, com luva e sob sol. */
.ponto-relogio {
  font-size: var(--ft-txt-display);
  font-weight: var(--ft-peso-medio);
  line-height: var(--ft-linha-apertada);
  letter-spacing: -2px;
}

/* Prévia da câmera. Espelhada, como qualquer câmera frontal: sem isso a
   pessoa se move para um lado e a imagem vai para o outro.

   PEQUENA, E NAO DE PROPOSITO ESTETICO. Em 4:3 na largura cheia ela
   ocupava metade do cartao num telefone de 360px e empurrava os botoes
   de bater para baixo da dobra - medido no Chromium, na 1.00.21. A
   previa so precisa mostrar que o rosto esta no quadro: foto e
   evidencia, nao biometria. O quadro capturado continua 640x480. */
.ponto-camera {
  width: 104px; height: 104px;
  margin: var(--ft-esp-1) auto var(--ft-esp-4);
  border-radius: 50%;
  border: 2px solid var(--ft-cabine-borda-fraca);
  overflow: hidden;
  background: var(--ft-ink-800);
}
.ponto-camera video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: block;
}

.ponto-titulo {
  font-size: var(--ft-txt-secao); font-weight: var(--ft-peso-medio);
  margin-bottom: var(--ft-esp-4);
}

.ponto-estado {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--ft-txt-apoio); color: var(--ft-teal-100);
  margin: var(--ft-esp-2) 0 var(--ft-esp-5);
}
.bolinha-ativa, .bolinha-inativa {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.bolinha-ativa   { background: var(--ft-teal-200); }
.bolinha-inativa { background: var(--ft-ink-500); }

/* 68px: o minimo de 44 das diretrizes gerais nao serve para quem opera
   de luva, no sol, dentro da cabine. */
.ponto-botao {
  width: 100%; min-height: var(--ft-toque-principal);
  background: var(--ft-degrade); color: var(--ft-branco);
  border: 0; border-radius: var(--ft-raio-cartao);
  font-size: 18px; font-weight: var(--ft-peso-medio);
  font-family: inherit; cursor: pointer;
  box-shadow: 0 6px 20px rgba(90, 103, 216, .35);
}
/* Degrade da AiA, #5A67D8 a #764BA2: branco passa nas duas pontas
   (4,8:1 e 6,4:1). O indigo puro da marca, #667EEA, nao passaria. */
.ponto-botao:hover:not(:disabled) { filter: brightness(1.08); }
.ponto-botao:disabled { opacity: .6; }

.ponto-alternativo {
  width: 100%; min-height: var(--ft-toque-secundario);
  background: transparent; color: var(--ft-teal-100);
  border: 0; font-size: var(--ft-txt-rotulo); font-family: inherit;
  cursor: pointer; margin-top: var(--ft-esp-3);
}
.ponto-alternativo:hover:not(:disabled) { color: var(--ft-teal-200); background: transparent; }

/* Tempo decorrido, ao lado da situação. Fonte tabular para o número não
   dançar a cada minuto. */
.ponto-desde {
  font-family: var(--ft-fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ft-teal-200);
}

/* As regras antigas das opcoes viviam AQUI, depois das novas - e como o
   CSS resolve empate pela ordem, eram elas que valiam. A tela ficava
   empilhada, com o icone por cima do rotulo e a contagem escapando do
   cartao, exatamente como se a reescrita nao tivesse sido feita.

   Eu troquei o bloco de cima e nao procurei um segundo. Vale a regra:
   ao reescrever um bloco de CSS, procurar TODAS as ocorrencias do
   seletor, nao so a primeira.

   O bloco valido esta em "OPCOES DE BATIDA - UMA LINHA SO", acima. */

/* =====================================================================
   ICONES
   =====================================================================
   Sao SVG inline, nao fonte de icone: a fonte vinha de CDN e nao
   carregou no teste em iPhone - e sem ela o <i> fica com largura zero,
   sem erro nenhum.

   `width: 1em` faz o SVG obedecer as onze regras que ja dimensionavam o
   icone por `font-size`. Sem isso eu teria que reescrever cada uma, e
   uma esquecida so apareceria na tela. */
svg.icone {
  width: 1em; height: 1em;
  font-size: 20px;
  flex-shrink: 0;
  vertical-align: -0.125em;
}

/* =====================================================================
   OS TRES TOTAIS
   =====================================================================
   O numero que a pessoa quer ao abrir a tela: ha quanto tempo esta
   trabalhando, quanto ja fez hoje, quanto de intervalo.

   Os valores vem PRONTOS do servidor. O separador e um vao de 1px sobre
   fundo claro, nao borda: tres bordas em tres celulas viram uma grade
   pesada num cartao pequeno. */
.ponto-totais {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin: var(--ft-esp-4) 0 0;
  background: rgba(255, 255, 255, .08);
  border-radius: 12px; overflow: hidden;
}
.ponto-total {
  background: var(--ft-cabine-fundo);
  padding: 11px 9px; text-align: left; min-width: 0;
}
.ponto-total-rotulo { display: block; font-size: 11px; color: var(--ft-ink-300); }
.ponto-total-valor { display: block; font-size: 21px; margin-top: 3px; letter-spacing: -0.5px; }
.ponto-total-destaque .ponto-total-valor { color: var(--ft-teal-200); }
.ponto-total-destaque .ponto-total-rotulo { color: var(--ft-teal-100); }
.ponto-total-nota { margin: 8px 0 0; font-size: 11px; color: var(--ft-ink-500); }

/* =====================================================================
   OPCOES DE BATIDA — UMA LINHA SO
   =====================================================================

   Empilhadas, as quatro tinham o mesmo peso e o mesmo formato: a pessoa
   lia as quatro para achar a que queria, e "encerrar jornada" ficava a
   um dedo de "iniciar intervalo".

   Agora ficam lado a lado, na ordem em que as coisas acontecem. Cabem em
   360px porque o rotulo e vertical e curto: verbo pequeno em cima, nome
   em negrito embaixo.

   `flex` e nao `grid` de proposito: a quantidade de opcoes VARIA. Espera
   e reserva sao da Lei 13.103 e so existem para quem tem
   `aplica_lei_motorista` - administrativo ve duas, motorista ve quatro.
   Colunas fixas quebrariam nos dois casos.

   ATENCAO ao mexer: ja houve uma segunda copia destas regras mais
   abaixo no arquivo, e como o CSS resolve empate pela ordem, era a de
   baixo que valia - a tela ficava empilhada como se nada tivesse
   mudado. Ao reescrever, procure TODAS as ocorrencias do seletor. */
.ponto-grade {
  display: flex; gap: 7px; align-items: stretch;
  margin-top: var(--ft-esp-4);
}

.ponto-opcao-grande {
  flex: 1 1 0; min-width: 0; min-height: 108px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 8px;
  padding: 11px 5px;
  background: var(--ft-cabine-cartao);
  border: 1px solid var(--ft-cabine-borda);
  border-radius: 13px;
  color: var(--ft-branco); font-family: inherit; text-align: center;
  cursor: pointer;
}
.ponto-opcao-grande:disabled { opacity: .45; cursor: not-allowed; }
.ponto-opcao-grande:active:not(:disabled) { filter: brightness(1.28); }

.ponto-opcao-icone {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(165, 180, 252, .15); color: var(--ft-teal-200);
}
.ponto-opcao-icone svg.icone { font-size: 20px; }

.ponto-opcao-texto { display: block; }
.ponto-opcao-verbo { display: block; font-size: 10px; color: var(--ft-ink-300); line-height: 1; }
.ponto-opcao-rotulo { display: block; font-size: 14px; font-weight: var(--ft-peso-medio); line-height: 1.15; margin-top: 2px; }
.ponto-opcao-contagem { display: block; font-size: 10px; color: var(--ft-ink-500); margin-top: 4px; line-height: 1.2; }

/* Fim de jornada e o que nao se desfaz: sem preenchimento e com icone
   neutro. Esta na linha, como o resto, mas nao e o alvo facil. */
.ponto-opcao-encerrar { background: transparent; border-color: var(--ft-cabine-borda-fraca); }
.ponto-opcao-encerrar .ponto-opcao-icone { background: rgba(255, 255, 255, .07); color: var(--ft-ink-300); }
.ponto-opcao-encerrar .ponto-opcao-rotulo { color: var(--ft-ink-300); }

/* Sobrando espaco, cresce o ALVO, nao a fonte. Dedo com luva agradece. */
@media (min-width: 420px) {
  .ponto-grade { gap: 10px; }
  .ponto-opcao-grande { min-height: 122px; padding: 14px 8px; }
  .ponto-opcao-rotulo { font-size: 15px; }
  .ponto-opcao-contagem { font-size: 11px; }
}
@media (min-width: 700px) {
  .ponto-opcao-grande { min-height: 132px; }
  .ponto-opcao-icone { width: 40px; height: 40px; }
}

/* "Esqueci de bater". Tracejado e sem preenchimento porque NAO e uma
   batida: abre pedido na camada de tratamento e vai para a fila do
   gestor. Com a aparencia das opcoes, alguem tocaria achando que estava
   registrando ponto. */
.ponto-pedir {
  width: 100%; min-height: var(--ft-toque-min); margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--ft-teal-100);
  border: 1px dashed rgba(199, 210, 254, .36); border-radius: 12px;
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.ponto-pedir:active { background: rgba(165, 180, 252, .10); }

.ponto-opcoes { display: flex; flex-direction: column; gap: var(--ft-esp-2); }
.ponto-opcao {
  width: 100%; min-height: var(--ft-toque-secundario);
  background: var(--ft-ink-800); color: var(--ft-branco);
  border: 1px solid var(--ft-ink-700); border-radius: var(--ft-raio-controle);
  font-size: var(--ft-txt-corpo); font-family: inherit; cursor: pointer;
}
.ponto-opcao:hover:not(:disabled) { background: var(--ft-ink-700); }

/* Aviso de recado, dentro do cartão escuro. Quem abre a tela para bater
   e sair não olha o menu — o aviso tem de estar no caminho. */
.ponto-recado {
  width: 100%; min-height: var(--ft-toque-min);
  margin-top: var(--ft-esp-3);
  display: flex; align-items: center;
  gap: var(--ft-esp-3);
  padding: var(--ft-esp-2) var(--ft-esp-3);
  background: transparent;
  border: 1px solid currentColor; border-radius: var(--ft-raio-controle);
  font-family: inherit; font-size: var(--ft-txt-rotulo);
  cursor: pointer; text-align: left;
}
.ponto-recado:hover:not(:disabled) { background: var(--ft-ink-800); }
.ponto-recado-atencao { color: var(--ft-atencao); }
.ponto-recado-critico { color: var(--ft-critico); }
.ponto-recado-corpo {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.ponto-recado-titulo {
  font-weight: var(--ft-peso-medio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ponto-recado-mais { font-size: var(--ft-txt-apoio); opacity: .8; }
.ponto-recado i { flex-shrink: 0; }

/* Últimas batidas. Alinhamento à esquerda dentro de um cartão centrado:
   lista de horários centralizada não se lê em coluna. */
.ponto-historico-titulo {
  margin: var(--ft-esp-5) 0 var(--ft-esp-2);
  font-size: var(--ft-txt-apoio); color: var(--ft-ink-300);
  text-align: left;
}
.ponto-historico {
  text-align: left;
  border-top: 1px solid var(--ft-ink-700);
}
.ponto-historico-dia {
  font-size: var(--ft-txt-micro); color: var(--ft-ink-500);
  padding: var(--ft-esp-3) 0 var(--ft-esp-1);
}
.ponto-historico-linha {
  display: flex; align-items: center; gap: var(--ft-esp-3);
  padding: var(--ft-esp-1) 0;
  font-size: var(--ft-txt-rotulo); color: var(--ft-branco);
}
.ponto-historico-hora { flex-shrink: 0; color: var(--ft-teal-100); }
.ponto-historico-tipo {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ponto-historico-linha i { font-size: 16px; color: var(--ft-ink-300); flex-shrink: 0; }

/* Evidências da batida: ícones lado a lado, para caber na coluna e ser
   lido de relance. */
.evidencias {
  display: flex; align-items: center; gap: var(--ft-esp-2); flex-wrap: wrap;
}
.evidencias > i { font-size: 18px; color: var(--ft-texto-secundario); }

/* Detalhes da batida, dentro do diálogo. */
.detalhe-linha {
  display: flex; gap: var(--ft-esp-3);
  padding: var(--ft-esp-2) 0;
  border-top: var(--ft-borda) solid var(--ft-borda-cor);
  font-size: var(--ft-txt-rotulo);
}
.detalhe-linha:first-child { border-top: 0; }
.detalhe-rotulo {
  flex: 0 0 40%; color: var(--ft-texto-secundario);
  font-size: var(--ft-txt-apoio);
}
.detalhe-valor { flex: 1; min-width: 0; word-break: break-word; }

.detalhe-foto {
  width: 100%; max-width: 320px;
  margin-top: var(--ft-esp-4);
  border-radius: var(--ft-raio-cartao);
  display: block;
}

/* ---- visão do dia ---- */
.dia-cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ft-esp-3); margin-bottom: var(--ft-esp-3);
}

/* As batidas como fichas em linha: é a leitura mais próxima de "o que
   aconteceu", e cabe no telefone quebrando linha. */
.dia-batidas {
  display: flex; flex-wrap: wrap; gap: var(--ft-esp-2);
  margin-bottom: var(--ft-esp-3);
}
.dia-chip {
  display: inline-flex; align-items: center; gap: var(--ft-esp-2);
  min-height: var(--ft-toque-min);
  padding: 0 var(--ft-esp-3);
  background: var(--ft-superficie-alt);
  border: var(--ft-borda) solid var(--ft-borda-cor);
  border-radius: var(--ft-raio-controle);
  font-size: var(--ft-txt-apoio); color: var(--ft-texto);
  cursor: pointer;
}
.dia-chip:hover:not(:disabled) { background: var(--ft-superficie); }
.dia-chip-hora { font-weight: var(--ft-peso-medio); }
.dia-chip-tipo { color: var(--ft-texto-secundario); }
.dia-chip i { font-size: 16px; color: var(--ft-texto-secundario); }
.dia-chip-alerta { border-color: var(--ft-atencao); }
.dia-chip-alerta i { color: var(--ft-atencao); }

.dia-periodos {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: var(--ft-esp-3);
}
.dia-periodo {
  display: flex; align-items: center; gap: var(--ft-esp-3);
  font-size: var(--ft-txt-apoio);
}
.dia-periodo-tipo { flex: 0 0 90px; color: var(--ft-texto-secundario); }
.dia-periodo-dur { margin-left: auto; font-weight: var(--ft-peso-medio); }

.dia-observado {
  padding-top: var(--ft-esp-3);
  border-top: var(--ft-borda) solid var(--ft-borda-cor);
  font-size: var(--ft-txt-rotulo);
  margin-bottom: var(--ft-esp-3);
}

/* Mapa desenhado localmente: mandar a coordenada de um trabalhador para
   um serviço externo só para ver um ponto é vazar localização de
   terceiro sem necessidade. */
.dia-mapa-caixa { margin-top: var(--ft-esp-4); }
.dia-mapa {
  width: 100%; max-width: 260px; display: block;
  margin-bottom: var(--ft-esp-2);
  background: var(--ft-superficie-alt);
  border-radius: var(--ft-raio-cartao);
}
.dia-mapa-cerca { fill: var(--ft-teal-50); stroke: var(--ft-teal-400); stroke-width: 1; }
.dia-mapa-centro { fill: var(--ft-teal-600); }
.dia-mapa-dentro { fill: var(--ft-ok); stroke: var(--ft-branco); stroke-width: 2; }
.dia-mapa-fora   { fill: var(--ft-critico); stroke: var(--ft-branco); stroke-width: 2; }

/* Recado já lido perde o destaque, mas fica na lista: sumir depois de
   ler faria a pessoa perder o que acabou de receber. */
.recado-lido { opacity: .62; }

.ponto-ok .ponto-check { font-size: 44px; color: var(--ft-teal-200); }
.ponto-comprovante {
  font-size: var(--ft-txt-micro); color: var(--ft-ink-300);
  margin-top: var(--ft-esp-3);
}
/* Dentro do cartao escuro a faixa de erro precisa dos tokens escuros:
   fundo claro ali brilharia na cabine a noite. */
.ponto-cartao .faixa { text-align: left; margin: var(--ft-esp-4) 0 0; }

/* =====================================================================
   FORMULARIOS DE CADASTRO
   ===================================================================== */

.formulario {
  background: var(--ft-superficie);
  border: var(--ft-borda) solid var(--ft-borda-cor);
  border-radius: var(--ft-raio-cartao);
  padding: var(--ft-esp-4);
  box-shadow: var(--ft-sombra-1);
}
.formulario h2 { margin-top: 0; }
.formulario .campo { margin-bottom: var(--ft-esp-3); }
.formulario .legenda { margin: var(--ft-esp-1) 0 0; }

/* Uma coluna no telefone, duas no computador. */
.grade {
  display: grid; grid-template-columns: 1fr;
  gap: var(--ft-esp-3); margin-bottom: var(--ft-esp-3);
}

.bloco {
  border: var(--ft-borda) solid var(--ft-borda-cor);
  border-radius: var(--ft-raio-controle);
  padding: var(--ft-esp-4);
  margin: var(--ft-esp-4) 0;
  background: var(--ft-superficie-alt);
}
.bloco-titulo {
  display: flex; align-items: center; gap: var(--ft-esp-2);
  font-weight: var(--ft-peso-medio); margin-bottom: var(--ft-esp-2);
}

/* =====================================================================
   A PARTIR DE 721px — computador
   ===================================================================== */

/* =====================================================================
   A PARTIR DE 721px — tablet deitado e computador pequeno
   ===================================================================== */

@media (min-width: 721px) {
  main { padding: var(--ft-esp-5); }

  .barra { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .campo-largo { flex: 2 1 260px; }
  .barra > * { width: auto; }
  .barra .campo { min-width: 180px; }
  .barra-acoes { align-items: center; }
  .barra-espaco { flex: 1; }

  .grade { grid-template-columns: 1fr 1fr; }
  .formulario { padding: var(--ft-esp-5); }

  .avisos {
    left: auto; right: var(--ft-esp-5); top: var(--ft-esp-5); bottom: auto;
    width: var(--ft-larg-aviso);
  }
  .aviso-flutuante { animation-name: entrar-aviso-lado; }

  .dialogo {
    max-width: var(--ft-larg-dialogo);
    margin: auto;
    border-radius: var(--ft-raio-cartao);
  }
  .dialogo-corpo { padding: var(--ft-esp-5); }
  .dialogo-acoes { flex-direction: row; justify-content: flex-end; }
  .dialogo-acoes button { width: auto; min-width: 120px; }
}

/* =====================================================================
   A PARTIR DE 1000px — a barra deixa de ser gaveta

   1000 e nao 721: com 276px de barra, uma tela de 800 deixaria 520 para
   o conteudo, e a tabela do espelho tem sete colunas. Abaixo disso a
   gaveta serve melhor.
   ===================================================================== */

@media (min-width: 721px) {
  .entrada-simples { padding: var(--ft-esp-6); }
  .caixa { padding: var(--ft-esp-6) var(--ft-esp-5); }
}

/* A partir de 1000px a coluna escura vira a lateral esquerda e o
   formulario ocupa o resto. Abaixo disso a faixa escura fica no topo,
   curta, e o campo aparece sem rolagem. */
@media (min-width: 1000px) {
  .entrada { flex-direction: row; }

  .entrada-marca-lado {
    width: 40%; max-width: 480px;
    padding: var(--ft-esp-6);
  }
  .entrada-nome { font-size: 26px; }

  /* O relogio ocupa o meio da coluna, entre a marca e a placa. */
  .entrada-relogio { margin: auto 0; }
  .entrada-hora { font-size: 68px; letter-spacing: -2px; }
  .entrada-data { font-size: var(--ft-txt-corpo); }

  .entrada-form { padding: var(--ft-esp-6); }
  .entrada-caixa { max-width: 400px; }

  .aplicacao { grid-template-columns: 276px 1fr; }

  .lateral {
    position: sticky; top: 0; inset: auto;
    height: 100vh; height: 100dvh;
    transform: none; visibility: visible;
    max-width: none;
    border-right: var(--ft-borda) solid var(--ft-lateral-borda);
  }

  /* Sem gaveta, nao ha veu nem botao de menu. */
  .lateral-veu, .topo-menu { display: none; }

  /* O topo vira uma faixa fina so com o titulo da tela. O nome de quem
     esta logado ja mora no rodape da barra: repetir seria ruido. */
  .topo {
    background: transparent; border-bottom: 0;
    padding: var(--ft-esp-6) var(--ft-esp-6) 0;
    position: static;
    max-width: var(--ft-larg-conteudo);
    width: 100%;
  }
  .topo-titulo { font-size: var(--ft-txt-titulo); }
  .topo-avatar { display: none; }

  main { padding: var(--ft-esp-3) var(--ft-esp-6) var(--ft-esp-6); }

  .avisos { right: var(--ft-esp-6); top: var(--ft-esp-6); }
}

@keyframes entrar-aviso-lado {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

/* ===== ESTRUTURA ORGANIZACIONAL (1.00.21) ===== */
/* Area > departamento > setor > funcao (vistas/estrutura.js) e a
   cascata "Onde trabalha" do cadastro de pessoas.

   A arvore e aninhada, e aninhamento em 360px come largura a cada
   nivel. No telefone o recuo e curto de proposito (14px por nivel):
   com o recuo do computador, a funcao chegava ao quarto nivel com
   menos de 200px e os botoes quebravam em coluna. */

.estr-arvore { display: flex; flex-direction: column; gap: var(--ft-esp-3); }

/* A area e o cartao; o resto pendura dentro dele numa linha guia. */
.estr-area {
  background: var(--ft-superficie);
  border: var(--ft-borda) solid var(--ft-borda-cor);
  border-radius: var(--ft-raio-cartao);
  box-shadow: var(--ft-sombra-1);
  padding: var(--ft-esp-2);
}

.estr-cabeca {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--ft-esp-1) var(--ft-esp-2);
  border-radius: var(--ft-raio-controle);
}
.estr-cabecalho {
  flex: 1 1 220px; min-width: 0; margin: 0;
  font-size: inherit; font-weight: inherit; line-height: inherit;
}

/* O titulo inteiro abre e fecha: alvo grande, nao so a setinha. */
.estr-alternar {
  width: 100%; justify-content: flex-start; text-align: left;
  padding: var(--ft-esp-1) var(--ft-esp-2);
  background: transparent; border-color: transparent;
  font-weight: var(--ft-peso-normal); color: var(--ft-texto);
}
.estr-alternar:hover:not(:disabled) { background: var(--ft-superficie-alt); }
.estr-alternar > svg.icone {
  font-size: 18px; color: var(--ft-texto-secundario);
  transition: transform var(--ft-transicao) var(--ft-easing);
}
.estr-alternar[aria-expanded="true"] > svg.icone { transform: rotate(90deg); }

.estr-titulo {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 var(--ft-esp-2); min-width: 0;
}
/* Nome na fonte de titulo em todos os niveis; o resto na fonte do
   corpo. O botao herda a fonte do h2/h3, e sem isto a linha de apoio
   da area saia em Sora e a do setor (h4) nao - parecia outro peso. */
.estr-nome {
  font-family: var(--ft-fonte-titulo);
  font-weight: var(--ft-peso-medio); font-size: var(--ft-txt-corpo);
  overflow-wrap: anywhere;
}
.estr-area > .estr-cabeca .estr-nome { font-size: var(--ft-txt-secao); }
.estr-codigo {
  font-size: var(--ft-txt-micro); color: var(--ft-texto-secundario);
  border: var(--ft-borda) solid var(--ft-borda-cor);
  border-radius: 4px; padding: 0 5px;
}
.estr-meta {
  flex-basis: 100%;
  font-family: var(--ft-fonte);
  font-size: var(--ft-txt-apoio); color: var(--ft-texto-secundario);
}

/* Filhos: recuados, com a linha guia a esquerda. */
.estr-corpo {
  display: flex; flex-direction: column; gap: var(--ft-esp-2);
  margin: var(--ft-esp-1) 0 var(--ft-esp-1) var(--ft-esp-1);
  padding-left: var(--ft-esp-2);
  border-left: 2px solid var(--ft-borda-cor);
}
/* Sem isto o display:flex de cima venceria o [hidden] do navegador e
   nada recolheria. */
.estr-corpo[hidden] { display: none; }

.estr-corpo > .estr-novo {
  align-self: flex-start;
  padding: 0 var(--ft-esp-2);
  color: var(--ft-acao);
}

.estr-nota {
  display: flex; align-items: flex-start; gap: var(--ft-esp-2);
  margin: 0; padding: var(--ft-esp-1) 0;
  font-size: var(--ft-txt-apoio); color: var(--ft-texto-secundario);
}
.estr-nota svg.icone { font-size: 16px; margin-top: 1px; }

/* A funcao e a folha onde a regra mora: caixa propria, fundo alternativo. */
.estr-funcoes { display: flex; flex-direction: column; gap: var(--ft-esp-2); }
.estr-funcao {
  background: var(--ft-superficie-alt);
  border: var(--ft-borda) solid var(--ft-borda-cor);
  border-radius: var(--ft-raio-controle);
  padding: var(--ft-esp-2) var(--ft-esp-2) var(--ft-esp-3) var(--ft-esp-3);
}
.estr-funcao-corpo { flex: 1 1 200px; min-width: 0; }

.estr-regras {
  display: flex; flex-wrap: wrap;
  gap: var(--ft-esp-1) var(--ft-esp-2);
  margin-top: var(--ft-esp-1);
}
/* Regra propria da funcao: cheia. Herdada: tracejada - e o texto diz
   "herdado da politica". A cor nunca carrega a diferenca sozinha. */
.estr-regra {
  white-space: normal; text-align: left;
  background: var(--ft-teal-50); color: var(--ft-teal-800);
  border-color: var(--ft-teal-100);
}
.estr-regra svg.icone { font-size: 15px; }
.estr-regra-herdada {
  background: var(--ft-superficie); color: var(--ft-texto-secundario);
  border-color: var(--ft-borda-cor); border-style: dashed;
}

/* Acoes da linha: mesmo peso das acoes de tabela (td.acao), mas com o
   alvo de 48px - aqui nao ha linha de tabela para servir de alvo. */
.estr-acoes {
  display: flex; flex-wrap: wrap; gap: var(--ft-esp-1);
  margin-left: auto;
}
.estr-acoes button {
  padding: 0 var(--ft-esp-3);
  background: transparent; border-color: transparent;
  color: var(--ft-texto-secundario); font-size: var(--ft-txt-apoio);
}
.estr-acoes button:hover:not(:disabled) { background: var(--ft-superficie-alt); color: var(--ft-texto); }
.estr-funcao .estr-acoes button:hover:not(:disabled) { background: var(--ft-superficie); }
.estr-acoes button.perigo:hover:not(:disabled) { background: var(--ft-critico-bg); color: var(--ft-critico); }

/* Inativo: esmaecido E com etiqueta "inativo" e icone. Nunca so a cor. */
.estr-inativo > .estr-cabeca .estr-titulo,
.estr-inativo > .estr-regras { opacity: .62; }

/* Item que acabou de mudar: o fundo acende e apaga, para o olho achar
   onde estava depois de a arvore ser redesenhada. */
.estr-recente > .estr-cabeca { animation: estr-realce 2.4s var(--ft-easing); }
@keyframes estr-realce {
  from { background: var(--ft-teal-50); }
  to   { background: transparent; }
}

/* Empresa sem nenhuma area: explica os quatro niveis e oferece o
   primeiro passo. */
.estr-inicio {
  background: var(--ft-superficie);
  border: var(--ft-borda) solid var(--ft-borda-cor);
  border-radius: var(--ft-raio-cartao);
  box-shadow: var(--ft-sombra-1);
  padding: var(--ft-esp-5) var(--ft-esp-4);
}
.estr-inicio > svg.icone { font-size: 30px; color: var(--ft-acao); }
.estr-inicio h2 { margin: var(--ft-esp-2) 0; }
.estr-inicio p { margin: 0 0 var(--ft-esp-4); color: var(--ft-texto-secundario); }
.estr-inicio-niveis {
  margin: 0 0 var(--ft-esp-5); padding-left: var(--ft-esp-5);
  display: flex; flex-direction: column; gap: var(--ft-esp-2);
}
.estr-inicio-nivel { display: block; font-weight: var(--ft-peso-medio); }
.estr-inicio-exemplo { display: block; font-size: var(--ft-txt-apoio); color: var(--ft-texto-secundario); }

/* Cadastro de pessoas: a funcao na lista e a cascata no formulario. */
.pessoa-funcao { display: flex; align-items: center; gap: var(--ft-esp-1); }
.pessoa-funcao svg.icone { font-size: 14px; }

.onde-trabalha .grade { margin: var(--ft-esp-3) 0 0; }
.onde-explicacao { margin-top: var(--ft-esp-1); }
.onde-resumo { margin: 0; font-size: var(--ft-txt-rotulo); color: var(--ft-texto); }

@media (min-width: 721px) {
  .estr-area { padding: var(--ft-esp-3) var(--ft-esp-4); }
  /* A linha guia desce do centro da setinha do pai. */
  .estr-corpo { margin-left: var(--ft-esp-4); padding-left: var(--ft-esp-4); }
}

/* =====================================================================
   COMPROVANTE COM SELO (1.00.22)
   Aparece logo apos a batida, no cartao escuro. O hash inteiro, em
   blocos de 4, e o codigo curto de verificacao: e o que da ao registro
   a cara de documento. Sem animacao longa - o selo so "carimba" uma vez,
   e quem pediu menos movimento nao ve nem isso.
   ===================================================================== */

.comprovante { max-width: 440px; }

.comprovante-selo {
  width: 64px; height: 64px; margin: 0 auto var(--ft-esp-2);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ft-degrade);
  box-shadow: 0 0 0 6px rgba(165, 180, 252, .14), 0 8px 24px rgba(90, 103, 216, .45);
  animation: comprovante-carimbo .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.comprovante-selo svg { width: 34px; height: 34px; color: var(--ft-branco); }

@keyframes comprovante-carimbo {
  from { transform: scale(1.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.comprovante-corpo {
  margin-top: var(--ft-esp-4);
  padding: var(--ft-esp-3) var(--ft-esp-4);
  border: 1px solid var(--ft-cabine-borda);
  border-radius: var(--ft-raio-cartao);
  background: rgba(255, 255, 255, .03);
  text-align: left;
}
.comprovante-titulo {
  font-size: var(--ft-txt-micro); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ft-marca-200); margin-bottom: var(--ft-esp-2);
}
.comprovante-linha {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--ft-esp-2);
  padding: 6px 0; border-top: 1px solid var(--ft-cabine-borda);
  font-size: var(--ft-txt-apoio);
}
.comprovante-linha:first-of-type { border-top: 0; }
.comprovante-rotulo { color: var(--ft-ink-300); }
.comprovante-valor { color: var(--ft-branco); overflow-wrap: break-word; }

.comprovante-hash {
  margin-top: var(--ft-esp-3);
  padding: var(--ft-esp-3);
  border-radius: var(--ft-raio-controle);
  background: var(--ft-cabine-cartao);
  border: 1px dashed var(--ft-marca-400);
}
.comprovante-hash-rotulo {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--ft-txt-micro); color: var(--ft-marca-200);
}
.comprovante-hash-rotulo svg { width: 14px; height: 14px; }
.comprovante-hash-valor {
  display: block; margin-top: 6px;
  font-family: var(--ft-fonte-mono); font-size: var(--ft-txt-micro);
  line-height: 1.6; color: var(--ft-ink-50); word-spacing: 2px;
  overflow-wrap: anywhere; user-select: all;
}
.comprovante-verificacao {
  margin-top: 6px; font-size: var(--ft-txt-micro); color: var(--ft-ink-300);
}
.comprovante-verificacao strong { color: var(--ft-branco); font-family: var(--ft-fonte-mono); letter-spacing: .04em; }
.comprovante-nota {
  margin: var(--ft-esp-3) 0 0; font-size: var(--ft-txt-micro); color: var(--ft-ink-300);
}

/* Quanto falta para a tela voltar sozinha. */
.comprovante-tempo {
  height: 3px; margin-top: var(--ft-esp-4); border-radius: 2px;
  background: var(--ft-cabine-borda); overflow: hidden;
}
.comprovante-tempo span {
  display: block; height: 100%; background: var(--ft-degrade);
  animation: comprovante-tempo 20s linear forwards;
}
@keyframes comprovante-tempo { from { width: 100%; } to { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .comprovante-selo, .comprovante-tempo span { animation: none; }
}

/* No computador (quem bate pelo painel) o cartao ganha um pouco de
   largura; no telefone continua ocupando a tela. */
@media (min-width: 721px) {
  .ponto-cartao { max-width: 420px; }
  .comprovante { max-width: 480px; }
}

/* Regras da area alinhadas com o titulo dela, nao com a seta. */
.estr-regras-area { padding-left: 34px; margin-top: 2px; }
.sem-quebra { white-space: nowrap; }

/* =====================================================================
   TOTEM (1.00.23)

   Aparelho fixo, usado em pe e a distancia de braco. Tudo maior: o
   titulo, o alvo de toque, a camera. Fundo escuro como a tela de ponto,
   pela mesma razao - garagem a noite e patio ao meio-dia.
   ===================================================================== */

.totem { display: flex; justify-content: center; padding: var(--ft-esp-2) 0; }

.totem-cartao {
  width: 100%; max-width: 560px;
  background: var(--ft-cabine-fundo);
  border-radius: var(--ft-raio-tela);
  padding: var(--ft-esp-5) var(--ft-esp-4);
  color: var(--ft-branco);
  text-align: center;
  box-shadow: var(--ft-sombra-2);
}

.totem-topo {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: var(--ft-esp-4);
  font-size: var(--ft-txt-apoio); color: var(--ft-ink-300);
}
.totem-empresa { font-weight: 600; color: var(--ft-marca-200); }

/* O circulo da camera: o rosto fica no meio, e a borda acende quando o
   totem esta procurando. Espelhado, como todo mundo espera de camera
   frontal. */
.totem-camera {
  width: 260px; height: 260px; margin: 0 auto var(--ft-esp-4);
  border-radius: 50%; overflow: hidden;
  border: 3px solid var(--ft-marca-400);
  box-shadow: 0 0 0 8px rgba(90, 103, 216, .16);
  background: var(--ft-cabine-cartao);
}
.totem-camera video {
  width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1);
}
.totem-camera-pequena { width: 132px; height: 132px; margin-bottom: var(--ft-esp-3); }

.totem-titulo {
  font-family: var(--ft-fonte-titulo);
  font-size: 28px; line-height: 1.2; letter-spacing: -0.02em;
}
.totem-nome { font-size: 20px; margin-top: 4px; }
.totem-estado { color: var(--ft-ink-300); font-size: var(--ft-txt-apoio); margin-top: 4px; }
.totem-como {
  display: inline-block; margin-top: var(--ft-esp-3);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(165, 180, 252, .12); color: var(--ft-marca-200);
  font-size: var(--ft-txt-micro);
}
.totem-dica { min-height: 20px; }

.totem-relogio {
  font-family: var(--ft-fonte-mono); font-size: 46px; letter-spacing: .04em;
  margin: var(--ft-esp-3) 0 0;
}
.totem-hash { font-size: var(--ft-txt-micro); color: var(--ft-ink-300); margin-top: 6px; }
.totem-ok .totem-check { font-size: 44px; color: var(--ft-marca-200); }

.totem-cartao button {
  width: 100%; min-height: 64px; font-size: 18px; margin-top: var(--ft-esp-3);
}
.totem-pin {
  margin-top: var(--ft-esp-4); padding-top: var(--ft-esp-4);
  border-top: 1px solid var(--ft-cabine-borda);
  text-align: left;
}
.totem-pin .campo label { color: var(--ft-ink-300); }
.totem-pin input {
  min-height: 56px; font-size: 20px;
  background: var(--ft-cabine-cartao); color: var(--ft-branco);
  border-color: var(--ft-cabine-borda);
}

@media (min-width: 721px) {
  .totem-cartao { max-width: 620px; padding: var(--ft-esp-6) var(--ft-esp-5); }
  .totem-camera { width: 320px; height: 320px; }
  .totem-titulo { font-size: 34px; }
}

/* =====================================================================
   MINHA IDENTIFICACAO — cadastro do rosto e cracha
   ===================================================================== */

.rosto-camera {
  width: 240px; height: 240px; margin: var(--ft-esp-3) auto;
  border-radius: 50%; overflow: hidden;
  border: 3px solid var(--ft-acao); background: var(--ft-superficie-alt);
}
.rosto-camera video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

.rosto-passos { display: flex; flex-wrap: wrap; gap: var(--ft-esp-2); margin: var(--ft-esp-3) 0; }
.rosto-passo {
  padding: 4px 10px; border-radius: 999px;
  border: 1px dashed var(--ft-borda-cor); color: var(--ft-texto-secundario);
  font-size: var(--ft-txt-apoio);
}
.rosto-passo-atual { border-style: solid; border-color: var(--ft-acao); color: var(--ft-acao); }
.rosto-passo-feito { border-style: solid; border-color: var(--ft-ok); color: var(--ft-ok); }

.rosto-termo {
  display: flex; gap: var(--ft-esp-2); align-items: center;
  margin-top: var(--ft-esp-3); font-size: var(--ft-txt-apoio);
  color: var(--ft-texto-secundario);
}
.rosto-termo input { margin-top: 0; }

.cracha {
  width: 220px; margin: var(--ft-esp-3) auto;
  padding: var(--ft-esp-3); background: #fff; border-radius: var(--ft-raio-cartao);
  border: 1px solid var(--ft-borda-cor);
}
.cracha svg { width: 100%; height: auto; display: block; }

@media print {
  .lateral, .topo, .barra, .legenda, h2 { display: none !important; }
  .cracha { border: 0; }
}

/* Folha de crachas: cartoes que cabem numa A4 e imprimem sem cortar. */
.crachas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--ft-esp-3); margin: var(--ft-esp-3) 0;
}
.cracha-cartao {
  border: 1px solid var(--ft-borda-cor); border-radius: var(--ft-raio-cartao);
  padding: var(--ft-esp-2); text-align: center; background: #fff;
  break-inside: avoid;
}
.cracha-cartao .cracha { width: 100%; margin: 0 auto var(--ft-esp-1); border: 0; padding: 0; }
.cracha-nome { font-size: var(--ft-txt-apoio); font-weight: 600; color: #111; }
.cracha-matricula { font-size: var(--ft-txt-micro); color: #444; }

/* O PIN sorteado, grande o bastante para ler de longe e anotar. */
.segredo {
  font-family: var(--ft-fonte-mono); font-size: 40px; letter-spacing: .18em;
  text-align: center; padding: var(--ft-esp-4);
  background: var(--ft-superficie-alt); border-radius: var(--ft-raio-cartao);
  margin: var(--ft-esp-3) 0;
}

.rosto-arquivo { margin-top: var(--ft-esp-3); display: flex; flex-direction: column; gap: 6px; }
.rosto-arquivo input { font-size: var(--ft-txt-apoio); }
/* Erro dentro do painel de captura: visivel, sem virar faixa inteira. */
.erro-texto { color: var(--ft-critico); }

/* Barra de progresso do lote: quantas pessoas ja entraram. */
.progresso {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--ft-superficie-alt); margin: var(--ft-esp-2) 0 var(--ft-esp-3);
}
.progresso span { display: block; height: 100%; width: 0; background: var(--ft-degrade); transition: width .2s ease; }

/* =====================================================================
   PAINEL DE CAPTURA DO ROSTO (RH)
   No computador, camera a esquerda e instrucoes a direita: o painel
   ocupava uma tela inteira rolando, e o RH tem gente esperando.
   ===================================================================== */
.rosto-painel { display: grid; gap: var(--ft-esp-4); }
.rosto-painel .rosto-camera { width: 180px; height: 180px; margin: 0; }
.rosto-painel-lado { display: flex; flex-direction: column; gap: var(--ft-esp-2); }

@media (min-width: 721px) {
  .rosto-painel { grid-template-columns: 180px 1fr; align-items: start; }
  .rosto-painel .rosto-camera { width: 180px; height: 180px; }
}

/* =====================================================================
   MODO TOTEM — a tela inteira é do aparelho

   Enquanto a tela do totem está montada, a moldura do painel (menu
   lateral, barra de titulo) sai: no aparelho da portaria ela so empurrava
   o cartao para fora da tela, e o botao do cracha ficava embaixo da
   dobra. Sai tambem a rolagem - totem que rola e totem que esconde botao.
   ===================================================================== */
body.modo-totem .lateral,
body.modo-totem .topo { display: none !important; }

body.modo-totem .aplicacao { grid-template-columns: 1fr; }
body.modo-totem #conteudo,
body.modo-totem .conteudo { padding: 0; max-width: none; }
body.modo-totem { overflow: hidden; }

body.modo-totem .totem {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--ft-esp-3);
}

/* Duas colunas no computador: camera de um lado, teclado do outro. Tudo
   cabe sem rolar, que e o ponto. */
.totem-duas { max-width: 920px; width: 100%; }

@media (min-width: 860px) {
  .totem-duas {
    display: grid; grid-template-columns: 300px 1fr;
    gap: var(--ft-esp-5); align-items: center; text-align: left;
  }
  .totem-duas .totem-camera { width: 260px; height: 260px; margin: 0 auto; }
  .totem-duas .totem-topo { margin-bottom: var(--ft-esp-3); text-align: center; }
  .totem-duas .totem-coluna-acao { display: flex; flex-direction: column; gap: var(--ft-esp-2); }
  .totem-duas .totem-pin { margin-top: var(--ft-esp-2); padding-top: var(--ft-esp-2); border-top: 0; }
  .totem-duas .totem-titulo { text-align: left; }
}

/* No telefone e no tablet em pe: camera menor, para o PIN caber junto. */
@media (max-width: 859px) {
  .totem-duas .totem-camera { width: 190px; height: 190px; }
  .totem-duas .totem-titulo { font-size: 26px; }
}