/* Visual do sistema de ponto do Hotel Rotorua Inn.
   As cores vêm da revista do hotel: azul marinho, papel bege, verde-azulado,
   dourado terroso e terracota. Um arquivo só, sem biblioteca externa, para
   funcionar mesmo sem internet e carregar num piscar. */

:root {
  /* a paleta da casa */
  --marinho: #173F63;
  --marinho-fundo: #0F2C46;
  --marinho-claro: #8DBBDE;
  --marinho-suave: #E8EEF4;

  --papel: #F7F6F1;
  --papel-escuro: #EFEDE5;
  --superficie: #FFFFFF;

  /* A tinta puxa de leve para o marinho da casa. Cinza puro sobre papel
     quente le como descuido; este le como escolha, sem ninguem saber dizer
     por que. */
  --tinta: #232A31;
  --tinta-suave: #5C666F;
  --tinta-clara: #F5F3EE;

  --linha: #E1DED6;
  --linha-forte: #CFCBBF;

  --verde: #3D7D79;
  --verde-suave: #E4EFEE;
  --dourado: #B77C32;
  --dourado-suave: #F6EDE0;
  --terracota: #A95246;
  --terracota-suave: #F4E6E4;

  --noite: #14202A;
  --noite-clara: #1E2E3B;

  /* Nomes que as telas usam desde a primeira paleta e que nao existiam mais:
     resolviam para nada, e o texto saia na cor errada. */
  --texto-fraco: var(--tinta-suave);
  --vermelho: var(--terracota);
  --ambar: var(--dourado);

  /* A ESCALA DE TIPO.
     Antes eram onze tamanhos escolhidos um a um, sem relacao entre si. O olho
     nao le "27px", ele le a relacao entre os tamanhos; sem relacao ele sente
     desalinho sem saber dizer onde. Estes sete crescem numa razao proxima de
     1.25, e todo texto do sistema sai de um deles. */
  --t-mini: 11px;
  --t-menor: 12.5px;
  --t-base: 14px;
  --t-corpo: 16px;
  --t-titulo-p: 20px;
  --t-titulo: 26px;
  --t-grande: 33px;

  /* A ESCALA DE ESPACO, em multiplos de quatro. Mesma ideia: o que alinha nao
     e o valor, e o ritmo entre eles. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  --raio: 12px;
  --raio-p: 8px;
  --raio-g: 18px;

  --sombra: 0 1px 2px rgba(23, 63, 99, .06), 0 6px 20px rgba(23, 63, 99, .07);
  --sombra-forte: 0 12px 44px rgba(15, 44, 70, .22);

  /* Nenhuma fonte vem da internet, de proposito: o sistema precisa abrir
     igual com a internet fora. Entao a escolha e entre o que ja existe no
     computador, e ela e deliberada.

     Constantia foi desenhada pela Microsoft para ler em tela, tem calor que
     Times e Georgia nao tem, e vem no Windows desde o Vista. E ela que tira a
     cara de ferramenta tecnica. */
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: Constantia, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  /* Numeros que precisam alinhar em coluna: e a fonte da casa, com os digitos
     forcados na mesma largura. Faz o mesmo servico do monoespacado sem
     trazer junto a cara de terminal. */
  --fonte-numero: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* Sobrou para uma coisa so: o codigo de verificacao do comprovante, que e
     codigo de verdade e se confere caractere por caractere. */
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--fonte);
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--marinho); }

h1, h2, h3, .fonte-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ícones desenhados a traço, no lugar de emoji */
.ic {
  width: 19px; height: 19px; flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ====================================== A TELA DE BATER PONTO ========== */

/* O VISUAL DE 11/09/2026
   O Levy achou a tela "muito simples" e pediu cores profissionais, mais vida
   sem exagero, e para "dar uma brincada" com ela. A brincada e o ceu: o fundo
   segue a hora do dia, com o sol andando num arco (a lua, de noite). Tudo em
   CSS, sem imagem e sem internet. As classes ceu-madrugada, ceu-manha,
   ceu-tarde, ceu-entardecer e ceu-noite sao postas pelo ponto.js com a hora
   do servidor, e as variaveis --sol-x e --sol-y dizem onde o sol esta. */

.terminal {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh;
  background: linear-gradient(180deg, #0C1B2C 0%, #12293F 60%, #173F63 100%);
  color: var(--tinta-clara);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 32px;
  transition: background 1.2s ease;
}
/* tudo que nao e ceu fica por cima dele */
.terminal > * { position: relative; z-index: 1; }

.ceu { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.terminal > .ceu { z-index: 0; }

/* o ceu de cada hora */
.terminal.ceu-madrugada { background: linear-gradient(180deg, #070F1A 0%, #0E1E31 55%, #14304A 100%); }
.terminal.ceu-manha { background: linear-gradient(180deg, #17395A 0%, #2B6A93 48%, #6FA9C4 88%, #E9C48A 130%); }
.terminal.ceu-tarde { background: linear-gradient(180deg, #123A5E 0%, #2A6C96 50%, #48A6B4 105%); }
.terminal.ceu-entardecer { background: linear-gradient(180deg, #1B2F4D 0%, #5B4A7A 48%, #C9694E 92%, #E9A23B 125%); }
.terminal.ceu-noite { background: linear-gradient(180deg, #0A1729 0%, #10263D 55%, #173F63 100%); }

/* um halo suave em volta do sol, que tinge o ceu perto dele */
.ceu::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(520px 420px at var(--sol-x, 50%) var(--sol-y, 30%),
    rgba(255, 216, 119, .22), rgba(255, 216, 119, 0) 70%);
  transition: opacity 1.2s ease;
}
.terminal.ceu-noite .ceu::before,
.terminal.ceu-madrugada .ceu::before {
  background: radial-gradient(420px 360px at var(--sol-x, 50%) var(--sol-y, 30%),
    rgba(190, 214, 240, .14), rgba(190, 214, 240, 0) 70%);
}

/* o arco por onde o sol passa: um fio pontilhado, quase invisivel */
.ceu-arco {
  position: absolute; left: 6%; right: 6%; top: 5%; height: 79%;
  border: 1px dashed rgba(255, 255, 255, .13); border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* o sol (de noite, a lua) */
.ceu-sol {
  position: absolute;
  left: var(--sol-x, 50%); top: var(--sol-y, 30%);
  width: 70px; height: 70px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 42% 40%, #FFF0BF 0%, #FFD877 38%, #E9A23B 70%);
  box-shadow: 0 0 34px 12px rgba(255, 200, 87, .3), 0 0 100px 34px rgba(255, 200, 87, .1);
  /* a posicao muda um fio por segundo, sem transicao: transicao longa aqui
     manteria a placa de video ocupada o dia inteiro no tablet */
  transition: background 1.2s ease, box-shadow 1.2s ease;
}
.terminal.ceu-noite .ceu-sol,
.terminal.ceu-madrugada .ceu-sol {
  width: 54px; height: 54px;
  background: radial-gradient(circle at 42% 40%, #FFFFFF 0%, #E4EEF8 45%, #B9CBE0 75%);
  box-shadow: 0 0 34px 10px rgba(200, 220, 245, .22), 0 0 100px 30px rgba(200, 220, 245, .08);
}
/* a lua tem a sua sombra: um circulo escuro mordendo a beirada */
.terminal.ceu-noite .ceu-sol::after,
.terminal.ceu-madrugada .ceu-sol::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 78% 30%, #10263D 0 44%, transparent 46%);
}

/* estrelas: pontinhos fixos, so de noite */
.ceu-estrelas {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 21% 9%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.8px 1.8px at 33% 26%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 47% 7%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 21%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.1px 1.1px at 69% 12%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 81% 24%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 91% 8%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 14% 38%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 76% 40%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.1px 1.1px at 40% 44%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 95% 36%, rgba(255,255,255,.6), transparent 60%);
}
.terminal.ceu-noite .ceu-estrelas,
.terminal.ceu-madrugada .ceu-estrelas { opacity: 1; }

/* Numa tela estreita (tablet em pe) o relogio ocupa uma faixa mais alta da
   tela, e o sol passava atras da data no meio da manha. Aqui o arco encolhe
   para a metade de cima e o sol fica sempre acima do relogio. */
@media (max-width: 940px) {
  .ceu-sol { top: calc(var(--sol-y, 30%) * .55); }
  .ceu-arco { top: 3%; height: 43%; }
}

.terminal-topo {
  width: 100%; max-width: 900px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}

/* A marca do hotel: o logo de verdade, com o rotulo embaixo. */
.marca { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }

/* Na tela de bater ponto e na de entrar, a marca fica centrada consigo mesma.
   Na lateral da administracao ela continua a esquerda, alinhada ao menu. */
.terminal-topo .marca,
.marca-cartao { align-items: center; }
.marca-cartao .marca-sub { letter-spacing: .16em; }

.marca-logo {
  display: block;
  width: 148px; height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}
.marca-nome {
  font-family: var(--fonte-titulo);
  font-weight: 600; font-size: 17px; letter-spacing: .01em;
}
.marca-sub {
  font-size: 10.5px; color: var(--marinho-claro);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  margin-top: 2px;
}

.link-admin {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 9px 16px; border-radius: 999px;
  backdrop-filter: blur(8px);
  transition: background .15s, border-color .15s, transform .1s;
}
.link-admin:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .34); transform: translateY(-1px); }

.relogio-caixa { text-align: center; margin: 26px 0 10px; }

/* "Bom dia", em cima da hora: e o que faz a tela cumprimentar quem chega */
.saudacao {
  font-family: var(--fonte-titulo);
  font-size: clamp(19px, 2.6vw, 26px); font-weight: 600;
  color: #FFE3A3; letter-spacing: .02em;
  margin-bottom: 4px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.saudacao::before, .saudacao::after {
  content: ''; display: inline-block; vertical-align: middle;
  width: 28px; height: 1px; margin: 0 12px;
  background: linear-gradient(90deg, transparent, rgba(255, 227, 163, .7));
}
.saudacao::after { background: linear-gradient(90deg, rgba(255, 227, 163, .7), transparent); }

.relogio {
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums;
  font-size: clamp(60px, 13vw, 108px);
  font-weight: 600;
  letter-spacing: -3px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 8px 40px rgba(0, 0, 0, .35), 0 0 60px rgba(255, 216, 119, .18);
}
.relogio .seg { color: #FFD877; font-size: .44em; vertical-align: super; margin-left: 5px; text-shadow: 0 0 18px rgba(255, 216, 119, .5); }

/* Os segundos ficam depois da hora, dentro do bloco centralizado, e puxavam
   a hora uns quinze pixels para a esquerda. Um par de segundos invisivel do
   lado esquerdo, do mesmo tamanho, devolve a hora ao meio de verdade. */
.relogio::before {
  content: "--";
  font-size: .44em; vertical-align: super; margin-right: 5px;
  visibility: hidden;
}

.relogio-data {
  display: inline-block;
  color: #fff; font-size: 15px; margin-top: 12px; font-weight: 500;
  letter-spacing: .01em;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 6px 16px; border-radius: 999px;
  backdrop-filter: blur(8px);
}

/* Os cartoes de bater ponto: vidro escuro com um fio dourado em cima. */
.painel-ponto {
  position: relative;
  width: 100%; max-width: 420px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--raio-g);
  padding: 24px 22px 22px;
  margin-top: 20px;
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .16);
  overflow: hidden;
}
.painel-ponto::before, .forma-rosto::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #E9A23B, #FFD877 50%, #48B2BF);
}

/* Tudo dentro do cartao de bater ponto fica centralizado: numa tela que a
   pessoa olha de pe, a poucos passos, centralizado le melhor. */
.passo-ponto { margin-bottom: 18px; text-align: center; }
.rotulo-passo {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--marinho-claro); font-weight: 700; margin-bottom: 7px;
}
.pergunta-passo {
  font-family: var(--fonte-titulo);
  font-size: 21px; font-weight: 600; margin-bottom: 14px;
  text-wrap: balance;
}
.ajuda-passo { font-size: 13px; color: rgba(207, 227, 245, .85); margin-top: 11px; text-align: center; }

.visor-grande {
  background: rgba(6, 16, 28, .5);
  border: 2px solid rgba(255, 255, 255, .12);
  border-radius: var(--raio);
  padding: 16px; min-height: 76px;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: nowrap;
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums;
  font-size: 40px; font-weight: 600; letter-spacing: 9px;
  color: #FFE3A3;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.visor-grande:has(.digito:not(.vazio)) {
  border-color: rgba(255, 216, 119, .45);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .35), 0 0 0 4px rgba(255, 216, 119, .1);
}
.visor-grande .vazio { color: rgba(207, 227, 245, .3); }
.visor-grande .digito { display: inline-block; }
.visor-grande .digito.entrou { animation: entrar-de-cima .24s cubic-bezier(.2, .9, .3, 1.3); }

.bolinha-pin {
  display: inline-block; margin: 0 7px;
  color: rgba(141, 187, 222, .3);
  transition: color .14s, transform .14s;
}
.bolinha-pin.cheia { color: var(--marinho-claro); transform: scale(1.3); }

/* As teclas tem relevo: uma sombra dura embaixo, que some quando apertam.
   E o que faz a tecla parecer tecla e nao caixinha. */
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.tecla {
  background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .07));
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 28px; font-weight: 600;
  padding: 17px 0; border-radius: 14px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .28), 0 10px 22px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .06s, background .14s, box-shadow .06s;
  user-select: none;
}
.tecla:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .11)); }
.tecla:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .28), 0 4px 10px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.tecla.tocada { animation: tecla-tocada .34s ease-out; }
.tecla:disabled { opacity: .45; }
.tecla.apagar {
  font-size: 15px; letter-spacing: .04em; color: #FFD3CB;
  background: linear-gradient(180deg, rgba(217, 101, 79, .3), rgba(217, 101, 79, .16));
  border-color: rgba(255, 190, 178, .28);
}
.tecla.ok {
  font-size: 15px; letter-spacing: .04em; color: #fff;
  background: linear-gradient(135deg, #2C8C99, #1E5482);
  border-color: rgba(120, 210, 220, .45);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3), 0 10px 26px rgba(44, 140, 153, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.tecla.ok:hover { background: linear-gradient(135deg, #34A0AE, #245F92); }

.aviso-terminal {
  margin-top: 15px; padding: 13px 15px; border-radius: var(--raio-p);
  font-size: 14.5px; text-align: center; display: none; line-height: 1.5;
}
.aviso-terminal.erro {
  display: block; background: rgba(217, 101, 79, .22);
  border: 1px solid rgba(255, 170, 155, .4); color: #FFD3CB;
}
.aviso-terminal.info {
  display: block; background: rgba(233, 162, 59, .18);
  border: 1px solid rgba(255, 216, 119, .4); color: #FFE3A3;
}

.rodape-terminal {
  margin-top: 24px; max-width: 420px; text-align: center;
  font-size: 13px; color: rgba(207, 227, 245, .72); line-height: 1.65;
}

/* --------------------------------------------- a tela de confirmação --- */

.confirma-fundo {
  position: fixed; inset: 0; background: rgba(15, 32, 42, .92);
  display: grid; place-items: center; padding: 16px; z-index: 50;
  animation: aparecer .16s ease-out; overflow-y: auto;
}
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }
@keyframes subir { from { opacity: 0; transform: translateY(18px) scale(.97) } to { opacity: 1; transform: none } }

/* ------------------------------------------------ as animacoezinhas -- */
/* A ideia e so tirar o susto: em vez de tudo brotar de uma vez, cada parte
   entra na ordem em que a pessoa le. Nada passa de meio segundo. */

@keyframes entrar-de-cima {
  from { opacity: 0; transform: translateY(-9px) scale(.55) }
  60%  { opacity: 1; transform: translateY(0) scale(1.14) }
  to   { opacity: 1; transform: none }
}
@keyframes entrar-de-baixo {
  from { opacity: 0; transform: translateY(10px) }
  to   { opacity: 1; transform: none }
}
@keyframes tecla-tocada {
  from { background: rgba(141, 187, 222, .42) }
  to   { background: rgba(255, 255, 255, .07) }
}
@keyframes riscar-certo {
  from { stroke-dashoffset: 30 }
  to   { stroke-dashoffset: 0 }
}
@keyframes crescer-circulo {
  from { opacity: 0; transform: scale(.4) }
  60%  { transform: scale(1.1) }
  to   { opacity: 1; transform: none }
}

.confirma {
  background: var(--superficie); color: var(--tinta);
  border-radius: 20px; padding: 28px 25px 20px;
  width: 100%; max-width: 430px; text-align: center;
  box-shadow: var(--sombra-forte);
  animation: subir .22s cubic-bezier(.2, .9, .3, 1.15);
  margin: auto;
}

/* ------------------------------------- a folha de leitura do terminal -- */
/* Usada pelo aviso de privacidade e pela consulta dos proprios registros.
   E uma folha de papel: fundo claro, texto grande, rolagem propria. */

.link-privacidade {
  display: block; margin: 14px auto 0;
  font-size: 13px; color: var(--marinho-claro);
  text-decoration: underline; padding: 8px 10px;
  font-family: inherit;
}
.link-privacidade:hover { color: #fff; }
/* O display: block de cima venceria o atributo hidden. */
.link-privacidade[hidden] { display: none; }

.folha {
  background: var(--superficie); color: var(--tinta);
  border-radius: 20px;
  width: 100%; max-width: 560px; margin: auto;
  box-shadow: var(--sombra-forte);
  animation: subir .24s cubic-bezier(.2, .9, .3, 1.15);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 32px);
}

.folha-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 24px 14px; border-bottom: 1px solid var(--linha);
}
.folha-topo h2 {
  font-family: var(--fonte-titulo); font-size: 21px; font-weight: 600;
  line-height: 1.2;
}
.folha-x {
  font-size: 26px; line-height: 1; color: var(--tinta-suave);
  padding: 2px 9px; border-radius: 8px; flex-shrink: 0;
}
.folha-x:hover { background: var(--papel-escuro); color: var(--tinta); }

.folha-corpo { padding: 18px 24px 6px; overflow-y: auto; text-align: left; }
.folha-corpo h3 {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dourado); font-weight: 700;
  margin: 18px 0 5px;
}
.folha-corpo h3:first-child { margin-top: 0; }
.folha-corpo p { font-size: 14.5px; line-height: 1.62; color: var(--tinta-suave); }

.folha-contato {
  margin-top: 20px; padding: 13px 15px; border-radius: var(--raio-p);
  background: var(--marinho-suave); color: var(--marinho);
  font-size: 14px; line-height: 1.6; font-weight: 600;
}

.folha-nota {
  margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--linha);
  font-size: 13px !important; font-style: italic;
}

.folha-pe { padding: 14px 24px 20px; }

.meus-quem { font-weight: 700 !important; color: var(--tinta) !important; margin-bottom: 12px; }
.meus-lista { display: flex; flex-direction: column; gap: 5px; }
.meus-linha {
  display: flex; align-items: baseline; gap: 11px;
  padding: 9px 12px; border-radius: var(--raio-p);
  background: var(--papel); border: 1px solid var(--linha);
  animation: entrar-de-baixo .26s ease-out backwards;
}
.meus-linha .dia { font-weight: 700; font-size: 13.5px; flex-shrink: 0; }
.meus-linha .hora { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; }
.meus-linha .nsr { margin-left: auto; font-size: 11px; color: var(--tinta-suave); flex-shrink: 0; }
.meus-vazio { font-size: 14px; color: var(--tinta-suave); }

/* -------------------------------------------- a pergunta "e voce?" -- */
/* Aparece depois dos 6 numeros e antes de gravar. E o que impede alguem
   de bater no lugar do colega por causa de um numero errado. */

.sou-eu {
  background: var(--superficie); color: var(--tinta);
  border-radius: 20px; padding: 34px 26px 24px;
  width: 100%; max-width: 430px; text-align: center;
  box-shadow: var(--sombra-forte);
  animation: subir .22s cubic-bezier(.2, .9, .3, 1.15);
  margin: auto;
}
.sou-eu-rot {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 700;
}
.sou-eu-rot, .sou-eu-nome, .sou-eu-cargo, .sou-eu-sim, .sou-eu-nao {
  animation: entrar-de-baixo .3s ease-out backwards;
}
.sou-eu-rot   { animation-delay: .06s; }
.sou-eu-nome  { animation-delay: .12s; }
.sou-eu-cargo { animation-delay: .18s; }
.sou-eu-sim   { animation-delay: .26s; }
.sou-eu-nao   { animation-delay: .32s; }

.sou-eu-nome {
  font-family: var(--fonte-titulo);
  font-size: clamp(27px, 7vw, 36px); font-weight: 600;
  line-height: 1.15; margin-top: 10px; text-wrap: balance;
}
.sou-eu-cargo { font-size: 14px; color: var(--tinta-suave); margin-top: 7px; min-height: 20px; }

.sou-eu-sim {
  margin-top: 26px; width: 100%;
  background: var(--verde); color: #fff;
  padding: 21px; border-radius: var(--raio);
  font-weight: 700; font-size: 17px; letter-spacing: .03em;
  transition: transform .06s, background .14s;
}
.sou-eu-sim:hover { background: #346D69; }
.sou-eu-sim:active { transform: translateY(2px); }

.sou-eu-nao {
  margin-top: 13px; width: 100%;
  font-size: 13.5px; color: var(--tinta-suave);
  text-decoration: underline; padding: 10px;
}
.sou-eu-nao:hover { color: var(--terracota); }

.confirma-topo { display: flex; align-items: center; gap: 14px; text-align: left; margin-bottom: 20px; }
.confirma-certo {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 50%; background: var(--verde-suave);
  display: grid; place-items: center; color: var(--verde);
}
.confirma-certo .ic { width: 26px; height: 26px; stroke-width: 2.2; }

/* o certinho: a bolinha cresce e o risco se desenha por cima */
.confirma-certo { animation: crescer-circulo .34s cubic-bezier(.2, .9, .3, 1.3) backwards; animation-delay: .1s; }
.confirma-certo .ic path {
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: riscar-certo .34s ease-out forwards;
  animation-delay: .3s;
}
.confirma-nome { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; line-height: 1.2; }
.confirma-mat { font-size: 13px; color: var(--tinta-suave); margin-top: 2px; }

/* cada pedaco do comprovante entra logo depois do anterior */
.confirma-nome, .confirma-mat, .confirma-tipo, .confirma-hora, .confirma-data,
.confirma-recibo, .confirma-pronto, .confirma-engano {
  animation: entrar-de-baixo .32s ease-out backwards;
}
.confirma-nome    { animation-delay: .16s; }
.confirma-mat     { animation-delay: .2s; }
.confirma-tipo    { animation-delay: .26s; }
.confirma-hora    { animation-delay: .32s; }
.confirma-data    { animation-delay: .36s; }
.confirma-recibo  { animation-delay: .72s; }
.confirma-pronto  { animation-delay: .78s; }
.confirma-engano  { animation-delay: .88s; }

/* a trilha do dia entra quadradinho por quadradinho, da esquerda pra direita */
.trilha-item { animation: entrar-de-baixo .3s ease-out backwards; }
.trilha-item:nth-child(1) { animation-delay: .44s; }
.trilha-item:nth-child(2) { animation-delay: .5s; }
.trilha-item:nth-child(3) { animation-delay: .56s; }
.trilha-item:nth-child(4) { animation-delay: .62s; }
.trilha-item:nth-child(n+5) { animation-delay: .68s; }

.confirma-tipo {
  background: var(--marinho); color: #fff;
  padding: 14px 16px; border-radius: var(--raio);
  font-size: clamp(18px, 5.2vw, 24px); font-weight: 700;
  letter-spacing: .02em; line-height: 1.2;
}
.confirma-hora {
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-size: 54px; font-weight: 600;
  letter-spacing: -2px; line-height: 1.1; margin-top: 14px;
}
.confirma-data { color: var(--tinta-suave); font-size: 13.5px; }

.trilha { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 22px 0 4px; }
.trilha-item {
  border: 1px solid var(--linha); border-radius: 10px;
  padding: 9px 4px; background: var(--papel);
}
.trilha-item .trilha-nome {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--tinta-suave); font-weight: 700;
}
.trilha-item .trilha-hora {
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600;
  color: var(--linha-forte); margin-top: 3px;
}
.trilha-item.feita { background: var(--superficie); }
.trilha-item.feita .trilha-hora { color: var(--tinta); }
.trilha-item.agora {
  background: var(--verde-suave); border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(61, 125, 121, .13);
}
.trilha-item.agora .trilha-nome,
.trilha-item.agora .trilha-hora { color: var(--verde); }

.confirma-aviso {
  margin-top: 15px; padding: 11px 13px; border-radius: var(--raio-p);
  background: var(--dourado-suave); border: 1px solid #E6D3AF;
  color: #7A5116; font-size: 13px; text-align: left; line-height: 1.5;
}

/* O aviso de batida faltando. Divide a caixa com recados bem mais leves, mas
   e o unico que vira dinheiro errado se a pessoa nao ler, entao tem cor e
   tamanho proprios. */
/* Hora extra parada por falta de batida. Fica em ambar para a pessoa que
   confere reparar antes de fechar o mes. */
.item.pendente b, .item.pendente span { color: #8A6100; }
.item.pendente span { font-weight: 700; }

.confirma-aviso.forte {
  background: #FDECEA; border: 1px solid #F0B4AC; color: #8C2F22;
  font-size: 15px; font-weight: 600; text-align: center; padding: 14px 16px;
}

.confirma-recibo {
  margin-top: 18px; padding-top: 15px; border-top: 1px dashed var(--linha);
  font-size: 11.5px; color: var(--tinta-suave); text-align: left; display: grid; gap: 3px;
}
.confirma-recibo b { color: var(--tinta); font-weight: 600; }
.confirma-recibo .hash { font-family: var(--mono); font-size: 10px; word-break: break-all; }

.confirma-pronto {
  margin-top: 18px; width: 100%;
  background: var(--marinho); color: #fff;
  padding: 17px; border-radius: var(--raio);
  font-weight: 600; font-size: 16px; letter-spacing: .03em;
  transition: transform .06s, background .14s;
}
.confirma-pronto:hover { background: var(--marinho-fundo); }
.confirma-pronto:active { transform: translateY(2px); }

.confirma-barra { height: 3px; background: var(--linha); border-radius: 999px; margin-top: 13px; overflow: hidden; }
.confirma-barra-cheia { height: 100%; background: var(--marinho-claro); border-radius: 999px; width: 100%; transition: width 1s linear; }
.confirma-contagem { font-size: 11.5px; color: var(--tinta-suave); margin-top: 6px; }

/* o miolo do comprovante, o que a Portaria 671 pede que esteja escrito */
.recibo-titulo {
  font-weight: 700; color: var(--tinta); margin-bottom: 8px;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
}
.recibo-linha {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 3px 0; text-align: left;
}
.recibo-linha span { color: var(--tinta-suave); flex-shrink: 0; }
.recibo-linha b {
  color: var(--tinta); font-weight: 600; text-align: right;
  overflow-wrap: anywhere;
}

.confirma-meus {
  margin-top: 13px; width: 100%;
  background: var(--papel); color: var(--marinho);
  border: 1px solid var(--linha);
  padding: 12px; border-radius: var(--raio);
  font-weight: 600; font-size: 13.5px;
  animation: entrar-de-baixo .32s ease-out backwards; animation-delay: .8s;
}
.confirma-meus:hover { background: var(--marinho-suave); }

.confirma-engano { margin-top: 15px; font-size: 12.5px; color: var(--tinta-suave); text-decoration: underline; padding: 6px; }
.confirma-engano:hover { color: var(--terracota); }
.confirma-engano-ok {
  margin-top: 15px; padding: 11px 13px; border-radius: var(--raio-p);
  background: var(--marinho-suave); color: var(--marinho);
  font-size: 12.5px; line-height: 1.55; text-align: left;
}

/* Tem gente que passa mal com tela se mexendo, e o computador avisa isso.
   Quando avisa, o sistema fica quieto: tudo aparece pronto, sem transicao. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .confirma-certo .ic path { stroke-dashoffset: 0; }
  .confirma-barra-cheia { transition: none; }
}

@media (max-width: 420px) {
  .trilha { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
}

/* ======================================= A ÁREA DA ADMINISTRAÇÃO ======= */

/* A tela de entrar e o unico lugar onde a foto pode aparecer de verdade:
   nao tem um dado sequer por cima dela, so o cartao no meio. E a primeira
   coisa que a administracao ve de manha, entao vale ser o hotel e nao um degrade. */
.entrar-tela {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background-color: var(--noite);
  background-image:
    linear-gradient(
      168deg,
      rgba(13, 33, 51, .74) 0%,
      rgba(13, 33, 51, .84) 55%,
      rgba(10, 25, 38, .92) 100%),
    url('/img/recepcao.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.entrar-cartao {
  background: var(--superficie); padding: 34px 32px 36px; border-radius: var(--raio-g);
  width: 100%; max-width: 390px;
  /* sombra mais funda que a de antes: o cartao agora flutua sobre uma foto,
     e nao sobre um degrade liso, entao precisa se descolar dela */
  box-shadow: 0 24px 60px rgba(0, 0, 0, .42), 0 2px 8px rgba(0, 0, 0, .2);
}

/* a marca dentro do cartao claro usa a versao escura do logo */
.marca-cartao { margin-bottom: 22px; }
.marca-cartao .marca-logo { width: 168px; }

/* O cabecalho do cartao de entrar fica centrado.
   Antes a marca, o titulo e a explicacao ficavam encostados na esquerda,
   enquanto o botao Entrar e o link de voltar ficavam centralizados. Essa
   mistura e que dava a sensacao de torto: metade do cartao puxava para um
   lado e metade para o outro.
   Os rotulos dos campos continuam a esquerda de proposito, porque rotulo
   pertence ao campo que vem embaixo dele e precisa comecar onde o campo
   comeca. */
.entrar-cartao h1 { text-align: center; text-wrap: balance; }
.entrar-cartao p.sub { text-align: center; text-wrap: balance; }
.marca-cartao .marca-sub { color: var(--tinta-suave); }
.entrar-cartao h1 { font-size: 23px; margin-bottom: 5px; }
.entrar-cartao p.sub { color: var(--tinta-suave); font-size: 14px; margin-bottom: 24px; }

/* O formulario respira.
   Os campos ficavam a 16px um do outro, com o rotulo colado no proprio campo
   e do mesmo peso do texto: dava para confundir de qual campo era o rotulo.
   Agora o rotulo e menor e mais quieto, cola no SEU campo, e a distancia
   entre um campo e o proximo e maior que a distancia entre rotulo e campo. E
   assim que o olho sabe o que pertence a quem. */
.campo { margin-bottom: var(--e5); }
.campo label {
  display: block; font-size: var(--t-menor); font-weight: 600;
  margin-bottom: var(--e2); color: var(--tinta-suave);
  letter-spacing: .02em;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 14px; font-size: var(--t-base);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  background: var(--superficie); color: var(--tinta);
  transition: border-color .14s, box-shadow .14s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--marinho);
  box-shadow: 0 0 0 3px rgba(23, 63, 99, .1);
}
.campo .dica {
  font-size: var(--t-menor); color: var(--tinta-suave);
  margin-top: var(--e2); line-height: 1.55; max-width: 58ch;
}

.botao {
  background: var(--marinho); color: #fff;
  padding: 11px 18px; border-radius: var(--raio-p);
  font-weight: 600; font-size: 14.5px;
  transition: background .14s, transform .06s;
}
.botao:hover { background: var(--marinho-fundo); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.largo { width: 100%; padding: 13px; }
.botao.claro { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha); }
.botao.claro:hover { background: var(--papel-escuro); border-color: var(--linha-forte); }
.botao.perigo { background: var(--terracota); }
.botao.perigo:hover { background: #94463B; }
.botao.verde { background: var(--verde); }
.botao.pequeno { padding: 7px 12px; font-size: 13px; }

.alerta { padding: 12px 15px; border-radius: var(--raio-p); font-size: 14px; margin-bottom: 15px; display: none; line-height: 1.55; }
.alerta.mostrar { display: block; }
.alerta.erro { background: var(--terracota-suave); color: #7E3A30; border: 1px solid #E4C4BE; }
.alerta.ok { background: var(--verde-suave); color: #2C5C59; border: 1px solid #BFDCD9; }
.alerta.aviso { background: var(--dourado-suave); color: #7A5116; border: 1px solid #E6D3AF; }

/* --------------------------------------------------- estrutura do painel */

.painel { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }

.lateral {
  color: var(--tinta);
  padding: var(--e5) var(--e3); display: flex; flex-direction: column; gap: 2px;
  background: var(--papel);
  border-right: 1px solid var(--linha);
}
.lateral .marca {
  margin-bottom: var(--e5); padding: 2px 6px var(--e4);
  /* Um fio dourado embaixo da marca. E o unico enfeite da barra inteira, e e
     o que diz que este sistema tem dono. */
  border-bottom: 1px solid rgba(183, 124, 50, .35);
}
.lateral .marca-nome { color: var(--marinho); font-size: var(--t-corpo); }
.lateral .marca-sub { color: var(--tinta-suave); padding-left: 2px; }

/* o seletor de empresa, no alto do menu */
.troca-empresa {
  margin: 0 6px var(--e4);
  padding: var(--e3) var(--e3) 11px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 11px;
}
.troca-empresa-rotulo {
  font-size: var(--t-mini); letter-spacing: .02em;
  color: var(--tinta-suave); font-weight: 600; margin-bottom: var(--e2);
}
.troca-empresa-botoes { display: grid; gap: 5px; }
.botao-empresa {
  display: flex; align-items: center; gap: var(--e2);
  width: 100%; text-align: left;
  padding: 9px 11px; border-radius: var(--raio-p);
  background: transparent; color: var(--tinta-suave);
  font-size: var(--t-base); font-weight: 500;
  border: 1px solid transparent;
  transition: background .14s, color .14s;
}
.botao-empresa:hover { background: var(--papel-escuro); color: var(--tinta); }
.botao-empresa.ativa {
  background: var(--marinho-suave); color: var(--marinho);
  font-weight: 600; border-color: #CBDAE7;
}
.botao-empresa .marca-empresa {
  width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0;
  background: var(--marinho-claro);
}
.botao-empresa .quantos-empresa {
  margin-left: auto; font-size: 11.5px; font-weight: 600; opacity: .7;
}
.botao-empresa.incompleta::after {
  content: '!'; margin-left: 4px;
  color: var(--dourado); font-weight: 700;
}

/* a etiqueta da empresa dentro das tabelas */
.etiqueta-empresa {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--papel-escuro); color: var(--tinta-suave);
}
.etiqueta-empresa .ponto {
  width: 7px; height: 7px; border-radius: 2px; background: var(--marinho);
}

/* os titulinhos que separam o menu em blocos */
.grupo-menu {
  font-size: var(--t-mini); letter-spacing: .02em;
  color: var(--tinta-suave); font-weight: 600; opacity: .75;
  padding: var(--e4) 13px 6px;
}
.grupo-menu:first-of-type { padding-top: 4px; }

.menu-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 10px;
  color: var(--tinta-suave);
  text-decoration: none; font-size: var(--t-base); font-weight: 500;
  transition: background .14s, color .14s;
  width: 100%; text-align: left;
}
.menu-item:hover { background: var(--papel-escuro); color: var(--tinta); }
/* O item escolhido e o unico ponto escuro da barra, e por isso se acha sem
   procurar. */
.menu-item.ativo {
  background: var(--marinho); color: #fff; font-weight: 600;
}
.menu-item.ativo .ic { color: #fff; }
.lateral .rodape {
  margin-top: auto; padding: var(--e4) var(--e2) 0;
  border-top: 1px solid var(--linha);
  font-size: var(--t-menor); color: var(--tinta-suave);
}
.lateral .rodape b { color: var(--tinta); display: block; font-size: var(--t-base); font-weight: 600; }
.lateral .rodape button, .lateral .rodape a { color: var(--marinho); }

/* Mais respiro nas beiradas: conteudo colado na borda da tela e a marca
   registrada de tela feita as pressas. */
.conteudo { padding: var(--e6) var(--e6) var(--e7); overflow-x: auto; }
.cabeca {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--e4); margin-bottom: var(--e6); flex-wrap: wrap;
  padding-bottom: var(--e4); border-bottom: 2px solid var(--linha);
  position: relative;
}
/* um risquinho da cor da casa embaixo do titulo */
.cabeca::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 56px; height: 2px; background: var(--dourado);
}
.cabeca h1 {
  font-family: var(--fonte-titulo);
  font-size: var(--t-titulo); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.12;
  /* impede titulo com uma palavra orfa na segunda linha */
  text-wrap: balance;
}
.cabeca .sub {
  color: var(--tinta-suave); font-size: var(--t-base);
  margin-top: var(--e1); line-height: 1.5;
  /* Linha de leitura curta. Texto corrido que atravessa a tela inteira cansa:
     o olho perde onde estava ao voltar para a esquerda. */
  max-width: 62ch; text-wrap: pretty;
}
.cabeca .acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.ao-vivo {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--verde-suave); color: var(--verde);
  padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
}
.ao-vivo .bolinha { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); animation: pulsar 2s infinite; }
.ao-vivo.caiu { background: var(--terracota-suave); color: var(--terracota); }
.ao-vivo.caiu .bolinha { background: var(--terracota); animation: none; }
@keyframes pulsar { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .3; transform: scale(.75) } }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 13px; margin-bottom: 24px; }
.cartao-num {
  background: var(--superficie);
  border: 0; border-top: 2px solid var(--linha);
  border-radius: 0; padding: 14px 2px 16px; box-shadow: none;
}
/* O rotulo recua e o numero cresce. Antes os dois brigavam pelo mesmo peso,
   e o olho gastava tempo decidindo qual ler primeiro. */
.cartao-num .rotulo {
  font-size: 10.5px; color: var(--tinta-suave); font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
}
.cartao-num .numero {
  font-family: var(--fonte-titulo);
  font-size: 38px; font-weight: 700; line-height: 1.05; margin-top: 8px;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
/* Cor so onde ela quer dizer alguma coisa. Numero de rotina fica na tinta
   normal: se tudo tem cor, cor nenhuma chama atencao. */
.cartao-num.vermelho { border-top-color: var(--terracota); }
.cartao-num.vermelho .numero { color: var(--terracota); }
.cartao-num.verde { border-top-color: var(--verde); }
.cartao-num.verde .numero { color: var(--verde); }
.cartao-num.ambar { border-top-color: var(--dourado); }
.cartao-num.azul { border-top-color: var(--marinho); }
/* Cartao zerado recua de verdade: nao tem nada dentro para chamar ninguem. */
.cartao-num.quieto { border-top-color: var(--linha); }
.cartao-num.quieto .numero { color: var(--linha-forte); font-weight: 600; }
.cartao-num.quieto .rotulo { color: var(--linha-forte); }

.bloco {
  background: var(--superficie); border: 0;
  border-radius: var(--raio);
  /* Sombra baixa no lugar do contorno. Contorno em cada caixa separa, sim,
     mas e o jeito mais obvio de separar: quem desenha separa com espaco. */
  box-shadow: 0 1px 2px rgba(23, 63, 99, .05), 0 6px 20px rgba(23, 63, 99, .055);
  margin-bottom: 26px; overflow: hidden;
}
.bloco-topo {
  padding: 18px 22px 14px; border-bottom: 0;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
}
.bloco-topo h2 {
  font-family: var(--fonte-titulo);
  font-size: var(--t-titulo-p); font-weight: 700; letter-spacing: -.015em;
  line-height: 1.2;
}
.bloco-topo .sub {
  font-size: var(--t-menor); color: var(--tinta-suave); font-weight: 400;
  margin-top: var(--e1); line-height: 1.45; max-width: 58ch;
}
.bloco-corpo { padding: 4px 22px 20px; }
.bloco-corpo.sem-espaco { padding: 0; }

table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  /* Numero tabular na tabela inteira: sem isso o "1" e mais estreito que o
     "8" e as colunas de hora tremem de linha para linha. */
  font-variant-numeric: tabular-nums;
}
thead th {
  text-align: left; padding: 10px 16px; background: none;
  /* Nome de coluna e nome, nao sigla. Em caixa alta minuscula com as letras
     afastadas ele vira etiqueta de painel tecnico; em caixa normal ele volta
     a ser palavra e se le sem esforco. */
  font-size: var(--t-menor); letter-spacing: .01em;
  color: var(--tinta-suave); font-weight: 600;
  border-bottom: 1.5px solid var(--linha-forte); white-space: nowrap;
}
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--papel-escuro); vertical-align: middle; }
/* Hora e duracao alinham a direita, que e como se le numero: a casa das
   unidades embaixo da casa das unidades. */
td.mono { text-align: right; }
thead th:first-child, tbody td:first-child { padding-left: 22px; }
thead th:last-child, tbody td:last-child { padding-right: 22px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--papel); }
td.mono, .mono { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; }
.nome-pessoa { font-weight: 600; }
.detalhe-pessoa { font-size: 12.5px; color: var(--tinta-suave); }

.etiqueta { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.etiqueta.verde { background: var(--verde-suave); color: var(--verde); }
.etiqueta.azul { background: var(--marinho-suave); color: var(--marinho); }
.etiqueta.ambar { background: var(--dourado-suave); color: #7A5116; }
.etiqueta.vermelha { background: var(--terracota-suave); color: #7E3A30; }
.etiqueta.cinza { background: var(--papel-escuro); color: var(--tinta-suave); }
.etiqueta.roxa { background: #EDE9F2; color: #4E3B6B; }

/* ---------------------------------------- as fichas de quem esta no hotel

   Eram seis colunas de tabela. Tabela e para comparar numero entre linhas, e
   nao e isso que se faz aqui: aqui se procura UMA pessoa e se ve em que pe
   ela esta. Ficha serve melhor, e cabe mais ar entre uma e outra. */

.fichas-do-dia { display: flex; flex-direction: column; }

.ficha {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(180px, 1.4fr) auto minmax(150px, auto);
  align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--linha);
  border-left: 4px solid transparent;
}
.ficha:last-child { border-bottom: 0; }
.ficha:hover { background: var(--papel); }

/* a tarja na beirada diz o estado sem precisar ler */
.ficha.trabalhando { border-left-color: var(--verde); }
.ficha.no-intervalo { border-left-color: var(--dourado); }
.ficha.saiu { border-left-color: var(--marinho-claro); }
.ficha.nao-chegou { border-left-color: var(--linha-forte); }
.ficha.de-folga { border-left-color: #B9AECD; }
.ficha.precisa-olhar { border-left-color: var(--terracota); background: var(--terracota-suave); }
.ficha.precisa-olhar:hover { background: #EFDBD7; }

.ficha-quem { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.ficha-nome-bloco { min-width: 0; }
.ficha-nome {
  font-weight: 600; font-size: var(--t-corpo); line-height: 1.3;
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
}
.ficha-sub {
  font-size: var(--t-menor); color: var(--tinta-suave); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.ficha-sub .ponto-sep { opacity: .5; }

.ficha-batidas { display: flex; flex-wrap: wrap; gap: var(--e4); }

.ficha-horas { text-align: right; }
.ficha-horas-num {
  font-variant-numeric: tabular-nums; font-size: var(--t-titulo-p);
  font-weight: 600; line-height: 1;
}
.ficha-horas-rot { font-size: var(--t-mini); color: var(--tinta-suave); margin-top: 3px; }

.ficha-estado { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: flex-end; }

/* Numa tela estreita a ficha empilha em vez de espremer as colunas. */
@media (max-width: 1100px) {
  .ficha { grid-template-columns: 1fr auto; row-gap: var(--e3); }
  .ficha-batidas { grid-column: 1 / -1; }
  .ficha-horas { text-align: left; }
}

/* A barra do fim da lista, quando o periodo tem mais dias do que a tela
   desenhou. Ela precisa dizer o numero inteiro, senao alguem olha 200 linhas
   e acha que o mes tem 200 dias. */
.linha-tem-mais td { background: var(--papel); border-bottom: 0; }
.tem-mais {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  justify-content: center; padding: var(--e3) 0;
  font-size: var(--t-base); color: var(--tinta-suave);
}
.tem-mais b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.botao-claro {
  padding: var(--e2) var(--e4); border-radius: 999px;
  border: 1px solid var(--linha-forte); background: var(--superficie);
  color: var(--tinta); font-family: inherit; font-size: var(--t-base);
  font-weight: 600; cursor: pointer;
}
.botao-claro:hover { background: var(--papel-escuro); }
.botao-texto {
  background: none; border: 0; color: var(--marinho);
  font-family: inherit; font-size: var(--t-menor); cursor: pointer;
  text-decoration: underline;
}

/* ------------------------------- a tela de hoje, para bater o olho ----- */

/* uma tarja colorida na beirada de cada linha, para o estado saltar */
tbody tr.tem-tarja { position: relative; }
tbody tr.tem-tarja > td:first-child { border-left: 4px solid transparent; padding-left: 14px; }
tbody tr.trabalhando > td:first-child { border-left-color: var(--verde); }
/* Duas cores, nao seis.
   Antes cada situacao tinha a sua: verde, dourado, azul, cinza, roxo e
   terracota. Seis cores numa coluna de tarjas nao informam nada, viram
   decoracao. Ficam as duas que pedem acao: quem esta no posto agora e quem
   precisa de olhada. O resto e cinza, porque e rotina. */
tbody tr.no-intervalo > td:first-child { border-left-color: var(--linha-forte); }
tbody tr.saiu > td:first-child { border-left-color: var(--linha-forte); }
tbody tr.nao-chegou > td:first-child { border-left-color: var(--linha); }
tbody tr.de-folga > td:first-child { border-left-color: var(--linha); }
tbody tr.precisa-olhar > td:first-child { border-left-color: var(--terracota); }
tbody tr.precisa-olhar { background: var(--terracota-suave); }
tbody tr.precisa-olhar:hover { background: #EFDBD7; }

/* os cartoes do topo ganham icone e ficam clicaveis para filtrar */
.cartao-num.clicavel { cursor: pointer; transition: transform .1s, box-shadow .14s, border-color .14s; }
.cartao-num.clicavel:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(23, 63, 99, .12); }
.cartao-num.escolhido { border-color: var(--marinho); box-shadow: 0 0 0 3px rgba(23, 63, 99, .1); }
.cartao-num .topo-cartao { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cartao-num .topo-cartao .ic { width: 17px; height: 17px; opacity: .55; }
.cartao-num.verde .topo-cartao .ic { color: var(--verde); opacity: .9; }
.cartao-num.ambar .topo-cartao .ic { color: var(--dourado); opacity: .9; }
.cartao-num.vermelho .topo-cartao .ic { color: var(--terracota); opacity: .9; }
.cartao-num.azul .topo-cartao .ic { color: var(--marinho); opacity: .9; }

/* --------------------------------------- os filtros de quem esta no hotel

   Eram seis quadrados altos com icone e rotulo em caixa alta miuda, o desenho
   classico de painel de indicadores. Viraram botoes numa linha so: e o que
   eles sempre foram, filtros da lista de baixo. A tela ganhou uma dobra
   inteira de volta, e a lista de gente subiu para onde o olho cai primeiro. */
#hojeCartoes {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin-bottom: var(--e4);
}

.filtro-num {
  display: inline-flex; align-items: baseline; gap: var(--e2);
  padding: var(--e2) var(--e4);
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 999px; font-family: inherit; font-size: var(--t-base);
  color: var(--tinta); cursor: default;
}
.filtro-num .rotulo { font-weight: 500; }
.filtro-num .numero {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--t-corpo);
}

/* a cor mora num pontinho antes do nome, e nao no numero inteiro: assim ela
   diz de que estado se trata sem gritar */
.filtro-num .rotulo::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: var(--e2);
  background: var(--linha-forte); vertical-align: middle;
}
.filtro-num.verde .rotulo::before { background: var(--verde); }
.filtro-num.ambar .rotulo::before { background: var(--dourado); }
.filtro-num.azul .rotulo::before { background: var(--marinho-claro); }
.filtro-num.vermelho .rotulo::before { background: var(--terracota); }
.filtro-num.vermelho .numero { color: var(--terracota); }

/* zerado fala baixo */
.filtro-num.quieto { opacity: .55; }
.filtro-num.quieto .numero { font-weight: 600; color: var(--tinta-suave); }

.filtro-num.clicavel { cursor: pointer; transition: border-color .14s, background .14s; }
.filtro-num.clicavel:hover { border-color: var(--linha-forte); background: var(--papel); opacity: 1; }
.filtro-num.clicavel:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }

/* o filtro ligado fica escuro, para nao restar duvida de que a lista de baixo
   esta mostrando so um pedaco da equipe */
.filtro-num.escolhido {
  background: var(--marinho); border-color: var(--marinho); color: #fff; opacity: 1;
}
.filtro-num.escolhido .numero { color: #fff; }
.filtro-num.escolhido .rotulo::before { background: #fff; }

/* a faixa de resumo do dia, bem no alto */
.resumo-do-dia {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 18px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-left: 5px solid var(--verde);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.resumo-do-dia.atencao { border-left-color: var(--dourado); }
.resumo-do-dia .frase { font-family: var(--fonte-titulo); font-size: 19px; }
.resumo-do-dia .frase b { font-weight: 700; }
.resumo-do-dia .detalhe { color: var(--tinta-suave); font-size: 13.5px; }
.resumo-do-dia .agora-marcador { margin-left: auto; text-align: right; }
.resumo-do-dia .agora-marcador .hora {
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Os segundos menores e em cima. Eles existem para a tela PARECER viva: um
   relogio parado em 10:00 por um minuto le como sistema travado, e a pessoa
   perde tempo conferindo se a tela morreu. */
.resumo-do-dia .agora-marcador .hora .seg {
  font-size: .5em; vertical-align: super; margin-left: 3px;
  color: var(--tinta-suave); font-weight: 500;
}
.resumo-do-dia .agora-marcador .rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--tinta-suave); font-weight: 700;
}

/* ------------------------------- a tela de hoje, para bater o olho ----- */

/* uma tarja colorida na beirada de cada linha, para o estado saltar */
tbody tr.tem-tarja { position: relative; }
tbody tr.tem-tarja > td:first-child { border-left: 4px solid transparent; padding-left: 14px; }
tbody tr.trabalhando > td:first-child { border-left-color: var(--verde); }
tbody tr.no-intervalo > td:first-child { border-left-color: var(--dourado); }
tbody tr.saiu > td:first-child { border-left-color: var(--marinho-claro); }
tbody tr.nao-chegou > td:first-child { border-left-color: var(--linha-forte); }
tbody tr.de-folga > td:first-child { border-left-color: #B9AECD; }
tbody tr.precisa-olhar > td:first-child { border-left-color: var(--terracota); }
tbody tr.precisa-olhar { background: var(--terracota-suave); }
tbody tr.precisa-olhar:hover { background: #EFDBD7; }

/* os cartoes do topo ganham icone e ficam clicaveis para filtrar */
.cartao-num.clicavel { cursor: pointer; transition: transform .1s, box-shadow .14s, border-color .14s; }
.cartao-num.clicavel:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(23, 63, 99, .12); }
.cartao-num.escolhido { border-color: var(--marinho); box-shadow: 0 0 0 3px rgba(23, 63, 99, .1); }
.cartao-num .topo-cartao { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cartao-num .topo-cartao .ic { width: 17px; height: 17px; opacity: .55; }
.cartao-num.verde .topo-cartao .ic { color: var(--verde); opacity: .9; }
.cartao-num.ambar .topo-cartao .ic { color: var(--dourado); opacity: .9; }
.cartao-num.vermelho .topo-cartao .ic { color: var(--terracota); opacity: .9; }
.cartao-num.azul .topo-cartao .ic { color: var(--marinho); opacity: .9; }

/* a faixa de resumo do dia, bem no alto */
.resumo-do-dia {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 18px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-left: 5px solid var(--verde);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.resumo-do-dia.atencao { border-left-color: var(--dourado); }
.resumo-do-dia .frase { font-family: var(--fonte-titulo); font-size: 19px; }
.resumo-do-dia .frase b { font-weight: 700; }
.resumo-do-dia .detalhe { color: var(--tinta-suave); font-size: 13.5px; }
.resumo-do-dia .agora-marcador { margin-left: auto; text-align: right; }
.resumo-do-dia .agora-marcador .hora {
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600; line-height: 1;
}
.resumo-do-dia .agora-marcador .rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--tinta-suave); font-weight: 700;
}

.pilulas-batida { display: flex; gap: 5px; flex-wrap: wrap; }

/* As pilulas de horario descem de linha em vez de esticar a coluna.
   Numa tela de 1440px a tabela de Hoje pedia 1349px numa area de 1121px, e a
   coluna SITUACAO, que e o que a pessoa abre a tela para ver, ficava fora da
   vista. A culpa era desta coluna sozinha, com 413px de pilulas em fila
   unica. Com um teto de largura ela quebra, e sobra espaco para todo mundo. */
.pilulas-batida { max-width: 220px; }
#aba-hoje td:nth-child(4) { white-space: normal; }
/* O horario previsto tambem quebra: "07:00 11:00 12:00 15:20" numa linha so
   custava 190px de largura por uma informacao que se le igual em duas. */
#aba-hoje td:nth-child(3), #aba-hoje th:nth-child(3) { white-space: normal; max-width: 118px; }
.pilula-batida {
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums;
  font-size: var(--t-base); font-weight: 600;
  /* Sem moldura. Eram tres caixinhas por pessoa, dezessete pessoas, mais de
     cinquenta molduras numa tela so, e o olho nao pousava em lugar nenhum.
     O horario sozinho ja se le, e a palavrinha embaixo dele diz o que e. */
  padding: 2px 0; color: var(--tinta);
}
/* Batida que a administracao lancou a mao fica marcada, discreta: um tracinho
   dourado embaixo, em vez de fundo colorido. */
.pilula-batida.ajuste { color: #7A5116; border-bottom: 2px solid #D9B87A; }

.vazio-msg { text-align: center; padding: 48px 20px; color: var(--tinta-suave); }
.vazio-msg .icone { color: var(--linha-forte); margin-bottom: 12px; }
.vazio-msg .icone .ic { width: 40px; height: 40px; stroke-width: 1.2; }

/* ------------------------------------------------------ janela flutuante */

/* o recado sobre dado de saude, no lancamento de atestado */
.dica.aviso-sensivel {
  margin-top: 9px; padding: 10px 12px; border-radius: var(--raio-p);
  background: var(--dourado-suave); border: 1px solid #E6D3AF;
  color: var(--tinta); line-height: 1.55;
}

/* ------------------------------------------- a administracao com gente -- */
/* A tela vivia dizendo "9 funcionario(s) ativo(s)" e empilhando nome, codigo,
   cargo e setor grudados numa linha. Quem abre isso as seis da manha nao quer
   ler relatorio, quer bater o olho e saber se o hotel esta de pe. */

.cabeca-saudacao h1 {
  font-family: var(--fonte-titulo);
  font-size: var(--t-grande); font-weight: 700; letter-spacing: -.028em;
  line-height: 1.08;
}
.cabeca-saudacao .sub {
  font-size: var(--t-corpo); color: var(--tinta-suave); margin-top: var(--e2);
  line-height: 1.5; max-width: 62ch;
}

/* a rodela com as iniciais: e o que faz a linha virar uma pessoa */
.rodela {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .5px;
  font-family: var(--fonte-corpo, inherit);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.pessoa-com-rodela { display: flex; align-items: center; gap: 11px; }
.pessoa-com-rodela .nome-pessoa { line-height: 1.25; }

.botao.perigo { color: var(--terracota); border-color: #E0B6B0; }
.botao.perigo:hover { background: var(--terracota); color: #fff; border-color: var(--terracota); }

/* --------------------------------- a tabela que nao esconde nada -- */
/*
   Em tela de 1280 a tabela de Funcionarios precisava de 1160px e tinha 959.
   Os 201px que faltavam sumiam: Situacao e os botoes de editar, desligar e
   trocar empresa ficavam invisiveis e inalcancaveis. Em Relatorios eram 281px.

   Nao era so feio. Escondia dado e escondia ACAO: quem so tinha aquele
   computador nao conseguia desligar um funcionario, porque o botao nao
   existia na tela.

   Agora a area rola de lado quando nao couber, e uma sombra na beirada avisa
   que tem mais coisa ali. Nada some, em largura nenhuma.
*/

.bloco-corpo.sem-espaco {
  overflow-x: auto;

  /* a sombra so aparece quando ha o que rolar: e o proprio fundo que a
     esconde quando a tabela cabe inteira */
  background:
    linear-gradient(to right, var(--superficie) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--superficie) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(23, 63, 99, .14), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(23, 63, 99, .14), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

.bloco-corpo.sem-espaco table { min-width: max-content; }

/* A barra de rolagem fica discreta, mas visivel: barra escondida demais e
   como nao ter barra, a pessoa nao descobre que da para arrastar. */
.bloco-corpo.sem-espaco::-webkit-scrollbar { height: 10px; }
.bloco-corpo.sem-espaco::-webkit-scrollbar-track { background: var(--papel); }
.bloco-corpo.sem-espaco::-webkit-scrollbar-thumb {
  background: var(--linha-forte); border-radius: 99px;
  border: 2px solid var(--papel);
}
.bloco-corpo.sem-espaco::-webkit-scrollbar-thumb:hover { background: var(--tinta-suave); }

/* No tablet e no celular, os botoes de acao param de empurrar a tabela para
   fora: eles descem para baixo do nome, em vez de disputar espaco na horizontal. */
@media (max-width: 900px) {
  td[style*="white-space:nowrap"] { white-space: normal !important; }
  .botao.pequeno { margin-bottom: 3px; }
}

/* ------------------------------------------------- o acabamento -- */

/* O foco do teclado.
   Quem navega so de Tab, porque nao enxerga bem ou porque esta com uma mao
   ocupada, hoje ficava perdido: nada mostrava onde ele estava. Agora o dourado
   da casa marca o lugar, com folga para nao encostar no conteudo. */
:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 2px;
  border-radius: 3px;
}
.lateral :focus-visible,
.terminal :focus-visible {
  outline-color: var(--marinho-claro);
}

/* A linha da tabela responde ao mouse. Numa tabela de dez colunas, o olho
   perde a linha no meio do caminho; o realce devolve ela. */
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(23, 63, 99, .035); }
tbody tr:hover > td:first-child { border-left-color: var(--dourado); }

/* O botao afunda quando clicado. Sem isso, o clique parece nao ter
   acontecido, e a pessoa clica de novo. */
.botao { transition: background .14s ease, border-color .14s ease, transform .06s ease; }
.botao:active { transform: translateY(1px); }

/* Campo em foco fica claro sem gritar. */
input:focus, select:focus, textarea:focus {
  border-color: var(--marinho);
  box-shadow: 0 0 0 3px rgba(23, 63, 99, .1);
}

/* Quem pediu ao computador para nao ter movimento, nao tem. */
@media (prefers-reduced-motion: reduce) {
  .botao:active { transform: none; }
  tbody tr { transition: none; }
}

/* ----------------------------- onde abrir em outro computador -- */

.endereco-cartao {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 13px 15px; margin-bottom: 9px; background: var(--papel);
}

/* O cartao do endereco que nao quebra.
   Ele fica logo em cima dos numeros da rede, e precisa nao parecer igual a
   eles: se parecer, a pessoa pega qualquer um, e metade das vezes vai pegar o
   que morre no proximo reinicio do roteador. */
.endereco-cartao.destaque {
  border-color: rgba(183, 124, 50, .45);
  background:
    linear-gradient(180deg, rgba(183, 124, 50, .05), rgba(183, 124, 50, 0) 60%),
    var(--superficie);
  box-shadow: 0 1px 3px rgba(23, 63, 99, .07);
}
.endereco-cartao.destaque code.endereco {
  font-size: 15px; font-weight: 600;
}
.endereco-etiqueta {
  font-family: var(--fonte-titulo);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--dourado);
  margin-bottom: 9px;
}
.endereco-etiqueta.solta {
  color: var(--tinta-suave); font-weight: 600;
  margin: 20px 0 9px; letter-spacing: .06em;
}

.endereco-linha {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 5px 0;
}

/* No tablet, o rotulo sai de cima do endereco em vez de disputar a linha
   com ele. Sem isso o endereco quebra no meio e fica ilegivel justamente no
   aparelho em que a pessoa mais precisa dele. */
@media (max-width: 700px) {
  .endereco-linha { gap: 3px; }
  .endereco-linha .rot { min-width: 0; width: 100%; }
}
.endereco-linha .rot {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 700; min-width: 190px;
}
code.endereco {
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600;
  background: var(--superficie); border: 1px solid var(--linha);
  padding: 7px 12px; border-radius: var(--raio-p); cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
code.endereco:hover { border-color: var(--marinho); }
code.endereco.copiado {
  background: var(--verde); color: #fff; border-color: var(--verde);
}

/* --------------------------------- o ponto ainda nao estreou -- */
/* Padrao seguro que ninguem percebe vira outro problema. Esta faixa fica na
   tela de Hoje ate alguem dizer o dia da estreia. */

.faixa-estreia {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--dourado-suave); border: 1px solid #E6D3AF;
  border-left: 5px solid var(--dourado);
  border-radius: var(--raio); padding: 16px 19px; margin-bottom: 18px;
  font-size: 14px; line-height: 1.6;
}
.faixa-estreia > div { flex: 1 1 340px; }
.faixa-estreia span { display: block; margin-top: 7px; color: var(--tinta-suave); }
.faixa-estreia .botao { flex-shrink: 0; }

/* ------------------------------ a prontidao para o dia dos 20 -- */

.prontidao-placar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 11px; margin-bottom: 16px;
}
.placar-num {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 14px 16px; background: var(--papel);
}
.placar-num .n {
  font-family: var(--fonte-titulo); font-size: 32px; font-weight: 600;
  line-height: 1; letter-spacing: -.02em;
}
.placar-num .r {
  font-size: 11.5px; color: var(--tinta-suave); margin-top: 5px; line-height: 1.4;
}
.placar-num.aceso { border-color: var(--terracota); background: var(--terracota-suave, var(--papel)); }
.placar-num.aceso .n { color: var(--terracota); }

.prontidao-lista { display: grid; gap: 7px; margin-top: 16px; }
.item-prontidao {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: 11px 13px; font-size: 13.5px; line-height: 1.5;
}
.item-prontidao b { font-weight: 600; }
.item-prontidao .nota {
  display: block; font-size: 12.5px; color: var(--tinta-suave);
  margin-top: 3px; line-height: 1.55;
}
.item-prontidao.ok { background: var(--verde-suave); border-color: #BFD8D5; }
.item-prontidao.hotel { background: var(--dourado-suave); border-color: #E6D3AF; }
.item-prontidao.sistema { background: var(--papel); }

.marca-ok { color: var(--verde); font-weight: 700; flex-shrink: 0; }
.marca-falta { color: var(--tinta-suave); font-weight: 700; flex-shrink: 0; }

.de-quem {
  display: inline-block; margin-left: 8px;
  font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase;
  font-weight: 700; padding: 2px 7px; border-radius: 999px;
}
.de-quem.do-hotel { background: var(--dourado); color: #3A2708; }
.de-quem.do-sistema { background: var(--linha); color: var(--tinta-suave); }

/* ------------------------------------ as secoes de Configuracoes -- */
/* Nove blocos numa rolagem so cansavam. Empresa do grupo, senha, LGPD e
   conferencia de integridade nao se procuram juntas. */

.nav-ajustes {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin: -6px 0 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}
.pilula-nav {
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 17px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--tinta-suave);
  border: 1px solid var(--linha);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pilula-nav:hover { background: var(--papel); color: var(--tinta); }
.pilula-nav.escolhida {
  background: var(--marinho); color: #fff; border-color: var(--marinho);
}
.pilula-nav:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }

/* a segunda linha do estado vazio, que e a que de fato ajuda */
.dica-vazio {
  margin-top: 7px; font-size: 13.5px; line-height: 1.6;
  color: var(--tinta-suave); max-width: 46ch;
  margin-left: auto; margin-right: auto;
}

/* ------------------------------------------- os totais do espelho -- */
/* Quem recebe o papel quer saber tres coisas. O resto e detalhe, e detalhe
   impresso do mesmo tamanho do que importa vira ruido. */

.totais-grandes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-top: 18px;
}
.totais-grandes .grande {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 13px 15px; background: var(--papel);
}
.totais-grandes .grande b {
  display: block; font-size: 10.5px; letter-spacing: .9px;
  text-transform: uppercase; color: var(--tinta-suave); font-weight: 700;
}
.totais-grandes .grande span {
  display: block; font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-size: 25px;
  font-weight: 600; margin-top: 4px; line-height: 1.1;
}
.totais-grandes .devendo span { color: var(--terracota); }
.totais-grandes .sobrando span { color: var(--verde); }

.totais-detalhe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 5px 16px; margin-top: 13px;
  padding-top: 12px; border-top: 1px solid var(--linha);
}
.totais-detalhe .item { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.totais-detalhe .item b { font-weight: 500; color: var(--tinta-suave); }
.totais-detalhe .item span { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-weight: 600; }

.folha-periodo { font-size: 12.5px; color: var(--tinta-suave); margin-top: 4px; }
.falta-preencher { color: var(--dourado); font-style: italic; }

.folha-data-assina {
  margin-top: 30px; font-size: 13.5px; text-align: right; color: var(--tinta);
}

/* quem saiu do hotel continua na lista, mas nao disputa a atencao */
tr.pessoa-saiu { opacity: .58; }
tr.pessoa-saiu:hover { opacity: 1; }

/* cartao sem ninguem dentro fala baixo, para os que tem gente serem vistos */
.cartao-num.quieto { opacity: .5; }
.cartao-num.quieto .numero { color: var(--tinta-suave); font-weight: 500; }
.cartao-num.quieto:hover { opacity: .78; }

/* a batida diz o que ela e, nao so a hora */
.pilula-batida { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; }
.pilula-batida i {
  /* "entrada", "almoco", "volta": palavra normal, em cinza, embaixo da hora.
     Em caixa alta e negrito virava etiqueta de sistema. */
  font-style: normal; font-size: var(--t-mini); letter-spacing: .01em;
  color: var(--tinta-suave); font-weight: 400;
}
/* O turno da pessoa, na coluna do dia. Uma linha, sem gritar: e o dado menos
   consultado dessa tela. */
.horario-do-dia {
  font-size: var(--t-menor); color: var(--tinta-suave);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.sem-batida { color: var(--tinta-suave); font-size: 13px; font-style: italic; }

/* as linhas entram uma atras da outra, em vez de brotarem todas juntas */
@keyframes linha-entrando {
  from { opacity: 0; transform: translateY(5px) }
  to   { opacity: 1; transform: none }
}
tbody tr { animation: linha-entrando .26s ease-out backwards; }
tbody tr:nth-child(1)  { animation-delay: .01s }
tbody tr:nth-child(2)  { animation-delay: .04s }
tbody tr:nth-child(3)  { animation-delay: .07s }
tbody tr:nth-child(4)  { animation-delay: .1s }
tbody tr:nth-child(5)  { animation-delay: .13s }
tbody tr:nth-child(6)  { animation-delay: .16s }
tbody tr:nth-child(7)  { animation-delay: .19s }
tbody tr:nth-child(8)  { animation-delay: .22s }
tbody tr:nth-child(n+9) { animation-delay: .25s }

.cartao-num { animation: linha-entrando .3s ease-out backwards; }
.cartao-num:nth-child(1) { animation-delay: .02s }
.cartao-num:nth-child(2) { animation-delay: .06s }
.cartao-num:nth-child(3) { animation-delay: .1s }
.cartao-num:nth-child(4) { animation-delay: .14s }
.cartao-num:nth-child(5) { animation-delay: .18s }
.cartao-num:nth-child(6) { animation-delay: .22s }

/* a troca de aba deixa de ser um corte seco */
.aba { animation: linha-entrando .22s ease-out; }

@media (max-width: 700px) {
  .rodela { width: 30px; height: 30px; font-size: 11px; }
}

/* ------------------------------------------------ a tela do meu ponto -- */
/* Quem entra com acesso de gerente cai aqui. E de proposito uma tela curta:
   o proprio espelho, o proprio horario e a propria senha, mais nada. */

.meu-topo {
  background: var(--marinho-fundo); color: #F3F1EC;
  padding: 15px 0; margin-bottom: 26px;
}
.meu-topo .marca-nome { color: #F3F1EC; }
.meu-topo .marca-sub { color: var(--marinho-claro); }

.faixa-meu {
  max-width: 1040px; margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.meu-corpo { display: block; padding-bottom: 40px; }

.meu-quem { text-align: right; font-size: 13px; line-height: 1.5; }
.meu-quem b { display: block; font-family: var(--fonte-titulo); font-size: 16px; color: #F3F1EC; }
.meu-quem span { color: var(--marinho-claro); }
.meu-quem button {
  display: block; margin-left: auto; margin-top: 4px;
  color: var(--marinho-claro); font-size: 12px;
  text-decoration: underline; font-family: inherit;
}
.meu-quem button:hover { color: #fff; }

.meu-aviso {
  background: var(--dourado-suave); border: 1px solid #E6D3AF;
  border-radius: var(--raio); padding: 15px 18px; margin-bottom: 20px;
  font-size: 14px; line-height: 1.6; color: var(--tinta);
}

.meu-rodape {
  margin-top: 26px; font-size: 13px; color: var(--tinta-suave);
  line-height: 1.6; text-align: center; max-width: 62ch;
  margin-left: auto; margin-right: auto;
}

tr.linha-folga td { color: var(--tinta-suave); background: var(--papel); }
.vazio-tabela { color: var(--linha-forte); }

@media (max-width: 620px) {
  .faixa-meu { justify-content: center; text-align: center; }
  .meu-quem { text-align: center; }
  .meu-quem button { margin-left: auto; margin-right: auto; }
}

/* uma caixinha de marcar com o texto do lado, alinhados */
.marcar {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--tinta);
}
.marcar input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--marinho); }

/* ---------------------------------------- os documentos da protecao de dados */

.separador-bloco {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 18px; color: var(--dourado);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.separador-bloco::after {
  content: ''; flex: 1; height: 1px; background: var(--linha);
}

.texto-bloco { font-size: 14px; line-height: 1.62; color: var(--tinta-suave); margin-bottom: 16px; max-width: 70ch; }

.cartoes-doc { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.cartao-doc {
  text-align: left; padding: 16px 17px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie); cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .14s, box-shadow .14s, transform .1s;
  font-family: inherit;
}
.cartao-doc:hover { border-color: var(--marinho); box-shadow: 0 6px 18px rgba(23, 63, 99, .12); transform: translateY(-2px); }
.cartao-doc:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }
.doc-nome { font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600; color: var(--tinta); }
.doc-texto { font-size: 12.5px; line-height: 1.55; color: var(--tinta-suave); }

.janela.larga { max-width: 820px; }

/* o miolo do documento, feito pra virar papel */
.documento { font-size: 14px; line-height: 1.65; color: var(--tinta); }
.documento h4 {
  font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600;
  margin: 22px 0 8px; color: var(--tinta);
}
.documento h4:first-child { margin-top: 0; }
.documento p { margin-bottom: 11px; color: var(--tinta-suave); }
.documento b { color: var(--tinta); }
.documento table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 12.5px; }
.documento th {
  text-align: left; padding: 8px 10px; background: var(--papel);
  border-bottom: 1px solid var(--linha); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave);
}
.documento td { padding: 8px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.documento .rascunho {
  padding: 12px 14px; border-radius: var(--raio-p); margin-bottom: 20px;
  background: var(--dourado-suave); border: 1px solid #E6D3AF;
  font-size: 13px; line-height: 1.55; color: var(--tinta);
}
.documento .assinatura { margin-top: 42px; }
.documento .assinatura .risco { border-top: 1px solid var(--tinta); width: 300px; max-width: 100%; margin-bottom: 5px; }
.documento .assinatura small { font-size: 12px; color: var(--tinta-suave); }
.documento .venceu { color: var(--terracota); font-weight: 700; }
.documento .no-prazo { color: var(--verde); font-weight: 600; }


.janela-fundo {
  position: fixed; inset: 0; background: rgba(15, 32, 42, .55);
  display: none; place-items: center; padding: 20px; z-index: 60; overflow-y: auto;
}
.janela-fundo.aberta { display: grid; }
.janela {
  background: var(--superficie); border-radius: var(--raio-g);
  width: 100%; max-width: 560px; box-shadow: var(--sombra-forte);
  animation: subir .2s ease-out; margin: auto;
}
.janela-topo { padding: 19px 23px; border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; align-items: center; }
.janela-topo h3 { font-size: 19px; }
.janela-topo .fechar-x { font-size: 25px; color: var(--tinta-suave); line-height: 1; padding: 0 4px; }
.janela-topo .fechar-x:hover { color: var(--terracota); }
.janela-corpo { padding: 23px; }
.janela-pe {
  padding: 16px 23px; border-top: 1px solid var(--linha);
  display: flex; justify-content: flex-end; gap: 9px;
  background: var(--papel); border-radius: 0 0 var(--raio-g) var(--raio-g);
}

.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.linha-campos.tres { grid-template-columns: 1fr 1fr 1fr; }

/* uma fileira de botoes que andam juntos, colados */
.grupo-botoes { display: inline-flex; }
.grupo-botoes .botao { border-radius: 0; margin: 0; }
.grupo-botoes .botao:first-child { border-radius: var(--raio-p) 0 0 var(--raio-p); }
.grupo-botoes .botao:last-child { border-radius: 0 var(--raio-p) var(--raio-p) 0; }
.grupo-botoes .botao.claro + .botao.claro { border-left: none; }
.grupo-botoes .botao.claro.escolhido {
  background: var(--marinho); color: #fff; border-color: var(--marinho);
}

/* separador entre grupos de filtro, para a linha nao virar uma sopa */
.separador-filtro {
  width: 1px; height: 24px; background: var(--linha);
  margin: 0 3px; flex-shrink: 0;
}

.filtros { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.filtros label { font-size: 13px; color: var(--tinta-suave); font-weight: 600; }
.filtros input, .filtros select {
  padding: 9px 12px; border: 1px solid var(--linha);
  border-radius: var(--raio-p); background: var(--superficie);
}
.filtros input[type="search"] { min-width: 210px; }

.grade-horario { display: grid; gap: 8px; }
.grade-horario .dia-linha {
  display: grid; grid-template-columns: 92px 62px 1fr 1fr 116px; gap: 8px;
  align-items: center; padding: 8px; border-radius: 9px; background: var(--papel);
}
.grade-horario .dia-linha input[type="time"],
.grade-horario .dia-linha input[type="number"] {
  padding: 7px 8px; border: 1px solid var(--linha-forte); border-radius: 7px;
  width: 100%; background: var(--superficie); font-size: 13.5px;
}
/* o campo de minutos alinha o numero a direita, como todo numero do sistema */
.grade-horario .dia-linha input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.grade-horario .dia-nome { font-weight: 600; font-size: 13.5px; }
.grade-horario .folga-check { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--tinta-suave); }
.grade-horario .cabecalho-grade {
  display: grid; grid-template-columns: 92px 62px 1fr 1fr 116px; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--tinta-suave); font-weight: 700; padding: 0 8px;
}
.dia-linha.eh-folga input { opacity: .3; pointer-events: none; }

/* ------------------------------------------ assistente de primeiro uso -- */

.passos { display: grid; gap: 10px; }
.passo {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--superficie); transition: border-color .14s, background .14s;
}
.passo.feito { background: var(--verde-suave); border-color: #BFDCD9; }
.passo.agora { border-color: var(--marinho); box-shadow: 0 0 0 3px rgba(23, 63, 99, .09); }
.passo .numero-passo {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: var(--papel); color: var(--tinta-suave); border: 1px solid var(--linha);
}
.passo.feito .numero-passo { background: var(--verde); color: #fff; border-color: var(--verde); }
.passo.agora .numero-passo { background: var(--marinho); color: #fff; border-color: var(--marinho); }
.passo .titulo-passo { font-weight: 600; font-size: 14.5px; }
.passo .texto-passo { font-size: 13px; color: var(--tinta-suave); margin-top: 3px; line-height: 1.5; }
.passo .botao { white-space: nowrap; }

/* --------------------------------------- a faixa da tela de demonstração */

.faixa-demo {
  background: var(--dourado); color: #fff;
  padding: 8px 16px; text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}

@media (max-width: 900px) {
  .painel { grid-template-columns: 1fr; }
  .lateral { flex-direction: row; overflow-x: auto; padding: 10px; gap: 6px; align-items: center; }
  .lateral .rodape { display: none; }

  /* A marca FICA, so encolhe.
     Antes ela sumia inteira aqui, de quando era um bloco de duas linhas com o
     quadradinho do lado que comia metade da barra. Hoje e uma imagem larga e
     baixa: cabe. E esconder o logo do hotel justo no tablet da recepcao seria
     o contrario do que este sistema deve parecer. */
  .lateral .marca {
    margin: 0 12px 0 4px; padding: 0; border-bottom: 0;
    flex-shrink: 0;
  }
  .lateral .marca-logo { width: 104px; }
  /* o rotulo de baixo e o unico pedaco sem onde caber numa linha */
  .lateral .marca-sub { display: none; }
  .troca-empresa { margin: 0 8px 0 0; padding: 6px 8px; flex-shrink: 0; }
  .troca-empresa-rotulo { display: none; }
  .troca-empresa-botoes { grid-auto-flow: column; }
  .botao-empresa { padding: 7px 10px; font-size: 12.5px; }
  .botao-empresa .quantos-empresa { display: none; }
  .menu-item { white-space: nowrap; padding: 9px 12px; }

  /* Os rotulos de grupo, deitados.
     Numa coluna eles sao um titulo em cima de uma lista. Numa barra eles
     precisam ser outra coisa, senao cada um ganha uma caixa estreita e o
     texto quebra dentro dela: "No dia a dia" virava uma torre de quatro
     andares, NO / DIA / A / DIA, mais alta que os proprios botoes. */
  .grupo-menu {
    white-space: nowrap; flex-shrink: 0;
    padding: 0 4px 0 10px; margin: 0 2px 0 6px;
    border-left: 1px solid rgba(141, 187, 222, .22);
    align-self: stretch; display: flex; align-items: center;
    font-size: 9.5px; letter-spacing: .12em;
  }
  .grupo-menu:first-of-type { border-left: 0; padding-left: 4px; margin-left: 2px; }
  .conteudo { padding: 16px; }
  .linha-campos, .linha-campos.tres { grid-template-columns: 1fr; }
  .grade-horario .dia-linha, .grade-horario .cabecalho-grade { grid-template-columns: 1fr 1fr; }
  .passo { grid-template-columns: 30px 1fr; }
  .passo .botao { grid-column: 2; justify-self: start; margin-top: 7px; }
}

/* ================================= O ESPELHO DE PONTO NO PAPEL ========= */


.folha { font-size: 13px; }
/* O ESPELHO DE PONTO.
   Ele e um DOCUMENTO, nao uma janelinha. Antes dividia a classe .folha com o
   aviso de privacidade da tela de ponto, que e modal e tem 560px de largura
   maxima. O espelho herdava isso e a tabela de doze colunas, que precisa de
   uns 820px, ficava para fora da moldura: colunas desencontradas do
   cabecalho e a borda da folha cortando as linhas no meio.
   Agora tem nome e largura de papel. */
.folha-ponto {
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--raio);
  width: 100%; max-width: 940px; margin: 0 auto;
  padding: 22px 24px 26px;
  box-shadow: var(--sombra);
}

/* Numa tela estreita a tabela nao encolhe sozinha: doze colunas de horario
   nao tem como espremer sem virar ilegivel. Entao ela rola de lado.
   Quem rola e a MOLDURA em volta, nunca a tabela. Eu tentei fazer a propria
   tabela rolar, com display:block no table e display:table no thead e no
   tbody, e o resultado foi pior que o defeito: viram duas tabelas separadas,
   cada uma calculando a largura das colunas por conta propria, e onze das
   doze colunas ficaram desencontradas do cabecalho. */
.folha-rolagem { overflow-x: auto; margin: 0 -2px; }
.folha-ponto table { width: 100%; min-width: 720px; }


.folha-cabeca { border: 1px solid var(--linha); border-radius: 10px; padding: 16px 18px; margin-bottom: 15px; }
.folha-cabeca h2 { font-size: 18px; margin-bottom: 4px; }
.folha-cabeca .empresa { font-size: 12.5px; color: var(--tinta-suave); line-height: 1.65; }
.folha-dados {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 9px 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha);
}
.folha-dados div { font-size: 12.5px; }
/* O horario contratual e o campo mais longo do cabecalho: ele diz os dias, as
   horas e o intervalo. Numa coluna de um terco ele quebrava no meio de "1h de
   intervalo". Ocupa a linha toda, que e onde ele cabe. */
.folha-dados div.jornada-toda { grid-column: 1 / -1; }
.folha-dados b {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--tinta-suave); font-weight: 700;
}
.folha-ponto table { font-size: 12px; }
.folha-ponto table td, .folha-ponto table th { padding: 5px 8px; }

/* A tabela do espelho aperta quando a tela encolhe, em vez de vazar.
   Sao doze colunas. Em tela larga elas cabem folgadas. Numa tela de 1024px,
   que e das mais comuns, a lateral come 244px e sobram 665px para a folha,
   enquanto a tabela pede 826px: as colunas SALDO e OBS. ficavam para fora,
   cortadas na borda do cartao.
   Havia uma moldura que rolava de lado, mas barra de rolagem fininha nao
   avisa ninguem: quem olha ve a tabela acabar em PREVISTO e acha que o
   sistema perdeu as colunas. Rolar de lado e o ultimo recurso, nao o
   primeiro. */
@media (max-width: 1300px) {
  .folha-ponto table { font-size: 11px; }
  .folha-ponto table td, .folha-ponto table th { padding: 4px 5px; }
}
@media (max-width: 1150px) {
  .folha-ponto table { font-size: 9.5px; }
  .folha-ponto table td, .folha-ponto table th { padding: 3px 2px; }
  .folha-ponto { padding: 14px 12px 18px; }
  /* a coluna de observacao quebra em duas linhas em vez de empurrar a
     tabela para fora */
  .folha-ponto tbody td:nth-last-child(2) { white-space: normal; min-width: 48px; }
}

/* A lateral encolhe quando a tela aperta.
   Ela tem 244px fixos, e numa tela de 1024px isso e um quarto da largura toda
   gasto em menu, enquanto o espelho do lado nao cabia por 81px. Em 190px o
   menu continua legivel (o item mais longo, "Batidas por periodo", ocupa uns
   140px) e devolve 54px para o conteudo.

   So vale ACIMA do celular (901px ou mais). Antes era so "ate 1150px", e como
   esta regra vem depois da do celular no arquivo, ela ganhava tambem no
   telefone: o menu voltava a ser uma coluna de 190px e o conteudo ficava
   espremido na metade direita da tela (achado em 23/09/2026; mesmo conserto
   da Sim7). */
@media (min-width: 901px) and (max-width: 1150px) {
  .painel { grid-template-columns: 190px 1fr; }
  .lateral { padding: 18px 9px; }
  .menu-item { font-size: 12.5px; padding: 8px 9px; gap: 8px; }
  .lateral .marca-logo { width: 124px; }
  .grupo-menu { padding: 12px 8px 4px; font-size: 9px; }
  .conteudo { padding: 20px 18px 60px; }
}

/* Se mesmo assim nao couber, a moldura rola de lado e AVISA que rola: uma
   sombra na beirada direita, que some quando chega ao fim. Sem esse aviso a
   pessoa nao descobre que ha mais coluna. */
.folha-rolagem {
  background:
    linear-gradient(to right, var(--superficie) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left, var(--superficie) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(23,63,99,.16), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(23,63,99,.16), rgba(0,0,0,0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.folha-rolagem::-webkit-scrollbar { height: 9px; }
.folha-rolagem::-webkit-scrollbar-track { background: var(--papel); border-radius: 99px; }
.folha-rolagem::-webkit-scrollbar-thumb {
  background: var(--linha-forte); border-radius: 99px; border: 2px solid var(--papel);
}
.folha-ponto table tbody tr.fim-de-semana { background: var(--papel); }
.folha-ponto table tbody tr.tem-problema { background: var(--dourado-suave); }
/* A moldura agora so empilha. Quem desenha sao os dois blocos de dentro:
   .totais-grandes com o que a pessoa procura, e .totais-detalhe com o resto. */
.folha-totais { display: block; margin-top: 16px; }
.folha-totais > .totais-grandes:first-child { margin-top: 0; }
.folha-totais .item { border: 1px solid var(--linha); border-radius: 9px; padding: 10px 12px; }
.folha-totais .item b {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--tinta-suave); font-weight: 700;
}
.folha-totais .item span { font-size: 18px; font-weight: 600; font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; }
/* ----------------------------------- a declaracao e a ressalva do espelho

   O que segura numa audiencia nao e ameaca nenhuma, e ter dado a pessoa a
   chance de discordar e ela nao ter discordado. Por isso o espaco de discordar
   vem antes da assinatura, do mesmo tamanho dela, e nao escondido no rodape em
   letra miuda. */
/* ------------------------------------ o rosto, no terminal de ponto -- */

/* Duas formas de bater o ponto, lado a lado: o rosto e o codigo. Numa tela
   deitada (o computador da recepcao) ficam uma ao lado da outra; num tablet em
   pe, a camera vai em cima e o teclado embaixo. Quando o aparelho nao tem
   camera, ou ninguem cadastrou rosto, a camera some e o teclado volta a ficar
   sozinho no meio, do jeito de antes. */
.terminal-topo { max-width: 1000px; }

.ponto-formas {
  width: 100%; max-width: 1000px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 20px; margin-top: 20px;
}
.ponto-formas .painel-ponto { margin-top: 0; flex: 0 1 420px; }

.forma-rosto {
  flex: 1 1 460px; max-width: 540px;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(141, 187, 222, .16);
  border-radius: var(--raio-g);
  padding: 22px;
  backdrop-filter: blur(10px);
  box-shadow: var(--sombra-forte);
}
/* O atributo hidden sozinho perde para o display: flex de cima. */
.forma-rosto[hidden] { display: none; }

.forma-rotulo {
  font-family: var(--fonte-titulo);
  font-size: 21px; font-weight: 600; text-align: center;
  margin-bottom: 14px; text-wrap: balance;
}

.rosto-palco {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--raio); overflow: hidden;
  background: #0B141B;
}
/* Espelhada: ninguem se reconhece na propria imagem sem espelho. A pessoa
   mexe a cabeca para um lado e ve ela ir para o mesmo lado. */
.rosto-palco video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scaleX(-1);
}

/* O contorno tem forma de cabeca e ombros, e tudo fora da cabeca fica
   escurecido: a pessoa entende sozinha onde encaixar.

   Antes era um oval quase redondo, menor que uma cabeca de verdade na
   distancia normal do balcao. O Levy pediu o formato de uma cabeca humana,
   maior. Agora o desenho ocupa a altura toda do palco, e a largura sai da
   proporcao do proprio desenho: a cabeca nunca fica achatada, seja no
   notebook, seja no tablet em pe. */
.rosto-contorno {
  position: absolute; top: 0; bottom: 0; left: 50%;
  height: 100%; width: auto; aspect-ratio: 320 / 360;
  transform: translateX(-50%);
  pointer-events: none;
}
.rosto-contorno svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rosto-fora { fill: rgba(8, 16, 22, .5); }
.rosto-cabeca {
  fill: none; stroke: rgba(255, 255, 255, .62); stroke-width: 3;
  vector-effect: non-scaling-stroke;
  transition: stroke .2s, filter .2s;
}
.rosto-ombros {
  fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 2;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.rosto-contorno.perto .rosto-cabeca { stroke: var(--marinho-claro); }
.rosto-contorno.lendo .rosto-cabeca {
  stroke: #6FCF97;
  filter: drop-shadow(0 0 6px rgba(111, 207, 151, .55));
}
.rosto-contorno.erro .rosto-cabeca { stroke: #E0A79E; }
/* O desenho do diagnostico (?diagnostico=1), por cima de tudo no palco. */
.rosto-diagnostico { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rosto-diagnostico[hidden] { display: none; }

.rosto-status {
  min-height: 2.9em; margin-top: 14px; text-align: center;
  font-size: 17px; line-height: 1.45; color: var(--tinta-clara);
}
.rosto-status.fraco { color: var(--marinho-claro); }
.rosto-status.erro { color: #F0C9C3; }

/* O aviso de transparencia fica embaixo da camera, e nao escondido num link:
   quem esta na frente dela, funcionario ou hospede, tem direito de saber na
   hora o que ela faz. */
.rosto-transparencia {
  margin-top: auto; padding-top: 12px; text-align: center;
  font-size: 12.5px; line-height: 1.5; color: rgba(141, 187, 222, .7);
}

/* Com a camera na tela, o relogio encolhe um pouco para as duas formas
   caberem sem rolar a pagina. */
.terminal:has(.ponto-formas.com-rosto) .relogio-caixa { margin: 18px 0 4px; }
.terminal:has(.ponto-formas.com-rosto) .relogio { font-size: clamp(48px, 9vw, 84px); }
.terminal:has(.ponto-formas.com-rosto) .rodape-terminal { max-width: 640px; }

/* Tablet em pe ou tela estreita: camera em cima, teclado embaixo, os dois
   um pouco mais compactos. */
@media (max-width: 940px) {
  .forma-rosto { flex-basis: 100%; max-width: 520px; }
  .ponto-formas .painel-ponto { flex-basis: 100%; }
  .ponto-formas.com-rosto .visor-grande { min-height: 62px; padding: 11px; font-size: 34px; }
  .ponto-formas.com-rosto .tecla { padding: 14px 0; font-size: 24px; }
  .ponto-formas.com-rosto .passo-ponto { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .rosto-cabeca { transition: none; }
}

/* ------------------- com a camera na tela, o terminal inteiro cabe na tela

   Medido na primeira versao: 1087 pixels de altura. Num notebook de 1366 por
   768, que e o tamanho comum de computador de recepcao, a pessoa via a camera
   e precisava rolar a pagina para achar o teclado inteiro. Com a camera
   aparecendo, tudo aperta um pouco: marca, relogio, espacos, teclas. O palco
   da camera acompanha a altura da tela, e o video preenche o espaco que sobrar.

   Estas regras vem depois das da primeira versao, com o mesmo peso, e por isso
   valem por cima delas. */
.terminal:has(.ponto-formas.com-rosto) { padding-top: 14px; padding-bottom: 16px; }
.terminal:has(.ponto-formas.com-rosto) .marca-logo { width: 118px; }
.terminal:has(.ponto-formas.com-rosto) .marca { gap: 4px; }
.terminal:has(.ponto-formas.com-rosto) .relogio-caixa { margin: 8px 0 0; }
.terminal:has(.ponto-formas.com-rosto) .relogio { font-size: clamp(40px, 6vw, 62px); letter-spacing: -2px; }
.terminal:has(.ponto-formas.com-rosto) .relogio-data { margin-top: 4px; font-size: 14px; }
.terminal:has(.ponto-formas.com-rosto) .rodape-terminal { margin-top: 12px; font-size: 12px; line-height: 1.5; }

.ponto-formas.com-rosto { margin-top: 12px; gap: 16px; }
.ponto-formas.com-rosto .forma-rosto,
.ponto-formas.com-rosto .painel-ponto { padding: 16px 18px; }
.ponto-formas.com-rosto .forma-rotulo { font-size: 19px; margin-bottom: 10px; }
.ponto-formas.com-rosto .rosto-palco { aspect-ratio: auto; height: clamp(220px, 44vh, 380px); }
.ponto-formas.com-rosto .rosto-status { margin-top: 10px; min-height: 2.6em; font-size: 16px; }
.ponto-formas.com-rosto .rosto-transparencia { padding-top: 6px; font-size: 12px; }

.ponto-formas.com-rosto .passo-ponto { margin-bottom: 10px; }
.ponto-formas.com-rosto .pergunta-passo { font-size: 18px; margin-bottom: 10px; }
.ponto-formas.com-rosto .visor-grande { min-height: 56px; padding: 8px; font-size: 32px; }
.ponto-formas.com-rosto .ajuda-passo { margin-top: 6px; }
.ponto-formas.com-rosto .teclado { gap: 8px; }
.ponto-formas.com-rosto .tecla { padding: 11px 0; font-size: 23px; }
.ponto-formas.com-rosto .aviso-terminal { margin-top: 10px; }

/* Tablet em pe: a camera vai em cima e o teclado embaixo, entao o palco
   encolhe mais para os dois chegarem perto de caber juntos. O teclado e a
   alternativa: se precisar rolar um pouco, e para ele que se rola. */
@media (orientation: portrait) and (max-width: 940px) {
  .ponto-formas.com-rosto .rosto-palco { height: clamp(220px, 32vh, 340px); }
}

/* ------------------------------------------------ reconhecimento facial */

/* O termo aparece como texto de documento, com as quebras de linha que ele
   tem. Reflowar um termo em paragrafo justificado faz a pessoa perder o fio
   dos itens numerados, e ela precisa conseguir acompanhar o que esta lendo. */
.termo-texto {
  font-family: var(--fonte); font-size: var(--t-base); line-height: 1.65;
  white-space: pre-wrap; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio-p); padding: var(--e4) var(--e5);
  max-height: 46vh; overflow-y: auto; margin: var(--e4) 0;
}

.janela-larga .janela, .janela.janela-larga { max-width: 720px; }

/* A imagem da camera. Espelhada, porque ninguem se reconhece na propria
   imagem sem espelho: a pessoa move a cabeca para um lado e ve ela indo para
   o outro, e fica corrigindo para sempre. */
.camera-caixa {
  position: relative; margin: var(--e4) 0;
  background: var(--noite); border-radius: var(--raio);
  overflow: hidden; aspect-ratio: 4 / 3;
}
.camera-caixa video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1);
}
/* Uma moldura oval no meio, para a pessoa saber onde por o rosto sem que
   ninguem precise explicar. */
.camera-marca {
  position: absolute; inset: 0; pointer-events: none;
  border: 3px solid rgba(255, 255, 255, .35);
  border-radius: 50% / 42%;
  margin: 8% 22%;
}

.camera-passo {
  font-size: var(--t-base); color: var(--tinta-suave); min-height: 2.6em;
  line-height: 1.5;
}
.camera-barra {
  height: 6px; background: var(--papel-escuro); border-radius: 999px;
  overflow: hidden; margin: var(--e2) 0 var(--e4);
}
.camera-barra > div {
  height: 100%; width: 0; background: var(--verde);
  transition: width .25s;
}

.linha-botoes { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.linha-botoes-tabela { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }

/* --------------------------------------- o quadro que o trabalhador assina

   Um quadro so, com titulo, como as declaracoes que se assina em cartorio ou
   em banco. Antes eram cinco pedacos soltos empilhados, cada um com um
   espacamento diferente, e de longe parecia sobra de pagina em vez da parte
   do documento que vale assinatura.

   Ele anda inteiro ou nao anda: assinatura sozinha no alto da folha seguinte,
   longe do texto que confirma, vale menos, porque a pessoa assina sem ver o
   que esta confirmando. */
.quadro-declaracao {
  margin-top: 34px;
  border: 1px solid var(--linha-forte);
  border-radius: 4px;
  padding: 20px 22px 18px;
  font-size: 12.5px; line-height: 1.6;
  break-inside: avoid; page-break-inside: avoid;
}

.quadro-titulo {
  font-family: var(--fonte-titulo);
  font-size: 14px; font-weight: 700; color: var(--tinta);
  padding-bottom: 8px; margin-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}

.quadro-declaracao .declaro { color: var(--tinta); }
.quadro-declaracao .declaro b { font-weight: 600; }

.ressalva { margin-top: 16px; }
.ressalva-titulo { font-size: 12px; color: var(--tinta); font-weight: 600; margin-bottom: 6px; }
.ressalva-titulo span { font-weight: 400; color: var(--tinta-suave); }
/* Espaco de caneta com medida de verdade: 9 mm e onde uma frase escrita a mao
   cabe sem espremer. Linha apertada faz a pessoa desistir de escrever e
   assinar em branco, que e o oposto do que esta declaracao serve para provar. */
.risco-ressalva { border-bottom: 1px solid var(--linha-forte); height: 9mm; }

.folha-data-assina { margin-top: 20px; font-size: 12.5px; }

.folha-assinatura {
  margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; text-align: center; font-size: 11.5px; color: var(--tinta-suave);
}
.folha-assinatura .linha-assina {
  border-top: 1px solid var(--tinta); padding-top: 8px; margin-top: 30px;
}
.folha-assinatura .linha-assina b {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--tinta);
}
.folha-assinatura .papel { font-style: italic; }

/* O fundamento legal fecha o quadro. Em documento serio ele fica no pe, e nao
   no meio do texto, para nao competir com o que a pessoa precisa ler. */
.quadro-lei {
  margin-top: 22px; padding-top: 12px;
  border-top: 1px solid var(--linha);
  font-size: 10.5px; line-height: 1.6; color: var(--tinta-suave);
}
.folha-rodape { margin-top: 18px; font-size: 10.5px; color: var(--tinta-suave); text-align: center; line-height: 1.65; }

/* =========================================================================
   O QUE VAI PARA O PAPEL

   Esta e a UNICA secao de impressao do arquivo, e ela fica no fim de
   proposito: assim ganha por ordem de qualquer regra de tela, sem precisar de
   truque de especificidade.

   Antes eram tres secoes espalhadas, escritas em momentos diferentes, e elas
   brigavam. Foi de la que sairam os defeitos que o Levy encontrou:

     - uma mandava apagar a pagina inteira e reacender so a janela aberta.
       Como o espelho nao e janela, ele era apagado e nao havia o que
       reacender: saia folha em branco;

     - outra mandava display:block em TODA .janela-fundo, e ha umas dez
       escondidas na pagina. Toda impressao saia com o documento certo no topo
       e, depois dele, pagina apos pagina de formulario em branco: cadastrar
       funcionario, criar horario, desligar, lancar atestado, adicionar
       feriado, nova empresa;

     - e as tabelas nao cabiam no papel, porque eu media se elas APARECIAM na
       impressao em vez de medir se CABIAM na folha.

   As larguras aqui sao medidas, nao chutadas. A4 em pe da 717px uteis com
   10mm de margem; deitado da 1046px.
   ========================================================================= */

@media print {
  /* So para quem confere na tela. O documento assinado nao leva isso. */
  .so-na-tela { display: none !important; }


  /* ---------------------------------------------------- o papel */
  @page { size: A4 portrait; margin: 0; }
  @page paisagem { size: A4 landscape; margin: 0; }

  /* Margem zero na pagina e o respiro como recuo do conteudo. O navegador so
     carimba o endereco do site e a data quando ha margem de pagina onde
     caber; sem ela, o carimbo some. */
  body { background: #fff; padding: 12mm 10mm; }

  /* Os dois relatorios internos deitam o papel: em pe eles cortam coluna. O
     espelho continua em pe, porque cabe e porque e o documento que vai
     assinado para a pasta e para a fiscalizacao. */
  body:has(#aba-relatorios.ativa) { page: paisagem; }
  body:has(#aba-batidas.ativa) { page: paisagem; }

  /* ------------------------------------------- o que nunca vai ao papel */
  .lateral,
  .cabeca .acoes,
  .nao-imprimir,
  .janela-pe,
  .faixa-demo,
  .filtros,
  .assistente,
  .faixa-estreia { display: none !important; }

  /* Titulo de aba, dica e caixa de filtro sao TELA, nao documento. Numa folha
     que vai assinada e arquivada, "pronto para imprimir e assinar" so
     atrapalha quem le. O documento comeca no proprio documento. */
  #aba-espelho > .cabeca,
  #aba-espelho .bloco:not(:has(.folha-ponto)),
  #aba-espelho .dica,
  #aba-relatorios > .cabeca .sub,
  #aba-batidas > .cabeca .sub { display: none !important; }
  #aba-espelho .bloco:has(.folha-ponto) { margin-top: 0; }

  /* Os atalhos de periodo (hoje, ontem, esta semana...) sao botao de tela.
     No papel viram seis retangulos vazios no alto do relatorio. */
  .grupo-botoes { display: none !important; }

  /* Janela fechada NAO vai para o papel. Sao dez delas escondidas na pagina,
     e era isso que enchia a impressao de formulario em branco. */
  .janela-fundo { display: none !important; }

  /* --------------------------------- imprimindo um documento em janela */
  /* Quando ha janela aberta, o resto da pagina sai de cena por completo, com
     display:none e nao visibility:hidden. Com visibility o elemento continua
     ocupando espaco, e o documento saia empurrado para baixo por paginas de
     vazio. */
  body:has(.janela-fundo.aberta) .painel { display: none !important; }
  body:has(.janela-fundo.aberta) .janela-fundo.aberta {
    display: block !important;
    position: static; background: none; padding: 0; overflow: visible;
  }
  .janela-fundo.aberta .janela {
    width: 100%; max-width: 100%;
    box-shadow: none; border-radius: 0; animation: none; margin: 0;
  }
  .janela-topo { border: none; padding: 0 0 10px; }
  .janela-topo .fechar-x { display: none !important; }
  .janela-corpo { padding: 0; }
  .documento table { table-layout: fixed; width: 100%; font-size: 9.5px; }
  .documento table td, .documento table th {
    padding: 3px 4px; white-space: normal; word-break: break-word;
  }

  /* ------------------------------------- imprimindo uma aba do sistema */
  .painel { display: block; }
  .conteudo { padding: 0; overflow: visible; }
  .bloco { box-shadow: none; border: none; margin: 0 0 10px; }
  .bloco-corpo.sem-espaco { overflow: visible; background: none; }

  /* Na tela as tabelas tem "min-width: max-content" para rolarem de lado em
     vez de esconder coluna. No papel nao existe rolar de lado, e min-width
     ganha de width: era por isso que "width: 100%" nao segurava a tabela
     dentro da folha e a coluna Situacao continuava cortada. */
  .bloco-corpo.sem-espaco table,
  #aba-batidas table,
  #aba-relatorios table { min-width: 0 !important; }

  /* ------------------------------------------------------ as tabelas */
  table { font-size: 10px; }
  thead th {
    background: #EFEDE5 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    padding: 5px 3px;
  }
  tbody td { padding: 3px 3px; }

  /* O ESPELHO, em pe. Pedia 759px num papel de 717px e a coluna Obs. ficava
     de fora. Apertado, pede 665px e sobra folga. A Obs. fica, porque e ali
     que aparece Atestado, Falta justificada e Feriado, que sao a explicacao
     de um dia zerado. */
  .folha-ponto {
    max-width: none; border: 0; border-radius: 0;
    box-shadow: none; padding: 0; margin: 0;
  }
  .folha-rolagem { overflow: visible; margin: 0; }
  .folha-ponto table { min-width: 0; table-layout: auto; }
  .folha-ponto table tbody td, .folha-ponto table thead th { padding: 3px 3px; }
  .folha-ponto table tbody, .folha-ponto table thead { font-size: 9.5px; }
  .folha-ponto .folha-cabeca { padding: 10px 12px; }
  .folha-ponto tbody td:nth-last-child(2) { white-space: normal; min-width: 62px; }

  /* AS BATIDAS, deitadas. Uma coluna so, a das pilulas de horario, valia
     686px numa fila unica. Permitir a quebra nao bastava: com largura
     automatica a coluna recebe tudo que o conteudo pedir e a quebra nunca
     chega. Com layout fixo e as fatias em porcentagem, ela fica estreita e as
     pilulas descem de linha. */
  #aba-batidas table { table-layout: fixed; width: 100%; }
  #aba-batidas td { white-space: normal; word-break: break-word; }
  #aba-batidas .pilulas-batida { white-space: normal; }
  #aba-batidas thead th:nth-child(1) { width: 6%; }
  #aba-batidas thead th:nth-child(2) { width: 16%; }
  #aba-batidas thead th:nth-child(3) { width: 9%; }
  #aba-batidas thead th:nth-child(4) { width: 13%; }
  #aba-batidas thead th:nth-child(5) { width: 25%; }
  #aba-batidas thead th:nth-child(6) { width: 10%; }
  #aba-batidas thead th:nth-child(7) { width: 6%; }
  /* A ultima cortava: "Ainda nao chego..." em vez de "Ainda nao chegou". A
     etiqueta nao quebra linha e estourava a fatia. Agora tem 15% e pode
     quebrar. O espaco veio da coluna de batidas, que tinha de sobra. */
  #aba-batidas thead th:nth-child(8) { width: 15%; }
  #aba-batidas td:last-child .etiqueta {
    white-space: normal; display: inline-block; line-height: 1.25;
  }

  /* OS RELATORIOS, deitados. Quatorze colunas. */
  #aba-relatorios table { table-layout: fixed; width: 100%; }
  #aba-relatorios td, #aba-relatorios th {
    white-space: normal; word-break: break-word; padding: 3px 3px; font-size: 9px;
  }

  /* uma folha por pessoa quando se imprime o time inteiro */
  .quebra-pagina { page-break-before: always; }
  .folha-ponto { break-inside: auto; }
  tr { break-inside: avoid; }
  thead { display: table-header-group; }
}


/* ============================================================================
   O VISUAL DE 11/09/2026: CORES VIVAS, SEM EXAGERO
   ============================================================================

   O Levy achou o sistema "muito simples" e pediu cores profissionais, mais
   vida sem exagerar, e um icone. Este bloco vem por cima do que existe: as
   regras de antes continuam valendo onde nada mudou, e o que mudou esta aqui,
   num lugar so. Para voltar ao visual anterior, e apagar este bloco (e o
   bloco do terminal, marcado com a mesma data) ou copiar a pasta guardada em
   antes-do-visual-2026-09-11-2122.

   AS CORES NOVAS
   A base continua sendo a da revista do hotel (marinho, papel, verde-mar,
   dourado, terracota). Entram tres cores para dar vida, cada uma com um
   papel: o OCEANO (verde-azulado vivo, e o mar de Fortaleza) para acao e
   destaque; o SOL (dourado claro) para o que chama atencao sem ser erro; e
   o CORAL para erro e alerta. Nenhuma delas e gritante, e nenhuma delas se
   repete sem motivo: cor que aparece em tudo deixa de dizer alguma coisa. */

:root {
  --oceano: #2C8C99;
  --oceano-forte: #1E6E7A;
  --oceano-suave: #DDF0F2;
  --sol: #E9A23B;
  --sol-claro: #FFD877;
  --sol-suave: #FFF1D6;
  --coral: #D9654F;
  --coral-suave: #FBE5E0;
  --ceu: #3E7CB1;
  --ceu-suave: #E3EEF8;
  --marinho-vivo: #1E5482;

  --gradiente-marca: linear-gradient(160deg, #1E5482 0%, #173F63 52%, #0F2C46 100%);
  --gradiente-acao: linear-gradient(135deg, #1E5482 0%, #2C8C99 100%);
  --gradiente-sol: linear-gradient(135deg, #FFD877 0%, #E9A23B 100%);
  --gradiente-fio: linear-gradient(90deg, #E9A23B, #FFD877 45%, #2C8C99);

  --sombra: 0 1px 2px rgba(23, 63, 99, .05), 0 8px 24px rgba(23, 63, 99, .08);
}

/* ------------------------------------------------------- a lateral escura
   A barra do menu fica em marinho, como a dos sistemas que o Levy conhece:
   o menu escuro de um lado e o conteudo claro do outro. O item escolhido
   ganha um fio dourado, e o logo passa a ser a versao clara. */
.lateral {
  background: var(--gradiente-marca);
  border-right: 0;
  color: #E9EEF4;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
}
.lateral .marca {
  border-bottom: 1px solid rgba(255, 216, 119, .28);
  padding-bottom: 14px;
}
.lateral .marca-logo { width: 150px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.lateral-selo {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.lateral-selo img { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.lateral .marca-sub { color: #9FC3E3; padding-left: 0; margin-top: 0; }

.grupo-menu { color: rgba(233, 238, 244, .55); opacity: 1; }

.menu-item { color: rgba(233, 238, 244, .84); }
.menu-item .ic { opacity: .8; }
.menu-item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.menu-item:hover .ic { opacity: 1; }
.menu-item.ativo {
  background: rgba(255, 255, 255, .14); color: #fff;
  box-shadow: inset 3px 0 0 var(--sol-claro);
}
.menu-item.ativo .ic { color: var(--sol-claro); opacity: 1; }

.troca-empresa {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .12);
}
.troca-empresa-rotulo { color: rgba(233, 238, 244, .6); }
.botao-empresa { color: rgba(233, 238, 244, .8); }
.botao-empresa:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.botao-empresa.ativa {
  background: rgba(255, 255, 255, .16); color: #fff; border-color: transparent;
}
.botao-empresa.incompleta::after { color: var(--sol-claro); }

.lateral .rodape { border-top-color: rgba(255, 255, 255, .12); color: rgba(233, 238, 244, .65); }
.lateral .rodape b { color: #fff; }
.rodape-sair { color: #9FC3E3; font-size: 12px; margin-top: 5px; text-decoration: underline; }
.rodape-sair:hover { color: #fff; }
.rodape-link { margin-top: 9px; }
.rodape-link a { color: #9FC3E3; }
.rodape-link a:hover { color: #fff; }

.lateral :focus-visible { outline-color: var(--sol-claro); }

@media (max-width: 900px) {
  .grupo-menu { border-left-color: rgba(255, 255, 255, .18); }
}

/* --------------------------------------------------- o conteudo, mais vivo */

.conteudo {
  background:
    radial-gradient(900px 300px at 100% -10%, rgba(44, 140, 153, .08), transparent 60%),
    var(--papel);
}

.cabeca { border-bottom-color: rgba(23, 63, 99, .1); }
.cabeca::after { width: 72px; height: 3px; bottom: -2px; background: var(--gradiente-fio); border-radius: 999px; }
.cabeca h1 { color: var(--marinho); }
.cabeca-saudacao h1 { color: var(--marinho-vivo); }

.ao-vivo {
  background: linear-gradient(135deg, #DDF0F2, #E4EFEE); color: var(--oceano-forte);
  box-shadow: inset 0 0 0 1px rgba(44, 140, 153, .2);
}
.ao-vivo .bolinha { background: var(--oceano); box-shadow: 0 0 0 3px rgba(44, 140, 153, .18); }

/* a faixa de resumo do dia ganha um fundo com um sopro de cor */
.resumo-do-dia {
  background: linear-gradient(90deg, var(--oceano-suave), var(--superficie) 55%);
  border-color: rgba(44, 140, 153, .22);
  border-left-color: var(--oceano);
}
.resumo-do-dia.atencao {
  background: linear-gradient(90deg, var(--sol-suave), var(--superficie) 55%);
  border-color: rgba(233, 162, 59, .3);
  border-left-color: var(--sol);
}
.resumo-do-dia .agora-marcador .hora { color: var(--marinho-vivo); }

/* os filtros de quem esta no hotel: cada estado com a sua cor de fundo */
.filtro-num { box-shadow: 0 1px 2px rgba(23, 63, 99, .05); }
.filtro-num.verde { background: #DDF0EE; border-color: #B9DCD8; color: #245E5A; }
.filtro-num.ambar { background: var(--sol-suave); border-color: #F1DDB1; color: #7A5116; }
.filtro-num.azul { background: var(--ceu-suave); border-color: #C5D8EA; color: var(--marinho-vivo); }
.filtro-num.vermelho { background: var(--coral-suave); border-color: #F0C3BA; color: #8C2F22; }
.filtro-num.vermelho .numero { color: #B8432F; }
.filtro-num.ambar .rotulo::before { background: var(--sol); }
.filtro-num.azul .rotulo::before { background: var(--ceu); }
.filtro-num.vermelho .rotulo::before { background: var(--coral); }
.filtro-num.quieto { opacity: .6; background: var(--superficie); color: var(--tinta); }
.filtro-num.escolhido, .filtro-num.escolhido.quieto {
  background: var(--gradiente-acao); border-color: transparent; color: #fff; opacity: 1;
  box-shadow: 0 6px 16px rgba(30, 84, 130, .28);
}

/* os blocos: sombra mais macia e um fio de cor em cima */
.bloco {
  position: relative;
  border: 1px solid rgba(23, 63, 99, .06);
  box-shadow: 0 2px 4px rgba(23, 63, 99, .04), 0 14px 34px rgba(23, 63, 99, .08);
}
.bloco::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--gradiente-acao); opacity: .9;
}
.bloco-topo { padding-top: 21px; }
.bloco-topo h2 { color: var(--marinho); }

/* as tabelas: cabecalho na cor da casa, linhas alternadas de leve */
thead th {
  background: linear-gradient(180deg, #F3F6F9, #EDF2F7);
  color: var(--marinho); border-bottom: 2px solid #D5E2EE;
}
tbody tr:nth-child(even) { background: rgba(23, 63, 99, .022); }
tbody tr:hover { background: var(--ceu-suave); }
tbody tr:hover > td:first-child { border-left-color: var(--oceano); }

/* as etiquetas, um pouco mais firmes */
.etiqueta.verde { background: #D7EFEC; color: #245E5A; }
.etiqueta.azul { background: #DCEBF8; color: var(--marinho-vivo); }
.etiqueta.ambar { background: #FCEBCB; color: #7A5116; }
.etiqueta.vermelha { background: #FBDDD6; color: #8C2F22; }
.etiqueta.roxa { background: #EAE3F3; color: #4E3B6B; }

/* as fichas de quem esta no hotel: quem esta no posto agora tem fundo verde de leve */
.ficha.trabalhando { background: linear-gradient(90deg, rgba(61, 125, 121, .09), transparent 45%); }
.ficha.trabalhando:hover { background: linear-gradient(90deg, rgba(61, 125, 121, .14), var(--ceu-suave) 45%); }
.ficha.no-intervalo { border-left-color: var(--sol); background: linear-gradient(90deg, rgba(233, 162, 59, .09), transparent 45%); }
.ficha.saiu { border-left-color: var(--ceu); }
.ficha.precisa-olhar { border-left-color: var(--coral); background: var(--coral-suave); }
.ficha.precisa-olhar:hover { background: #F6D8D1; }

/* os botoes: o principal ganha um degrade marinho para oceano e uma sombra */
.botao {
  background: var(--gradiente-acao);
  box-shadow: 0 4px 12px rgba(30, 84, 130, .22);
}
.botao:hover { background: linear-gradient(135deg, #245F92 0%, #34A0AE 100%); }
.botao.claro { background: var(--superficie); box-shadow: 0 1px 2px rgba(23, 63, 99, .06); }
.botao.claro:hover { background: var(--papel-escuro); }
.botao.verde { background: linear-gradient(135deg, #3D7D79, #2C8C99); box-shadow: 0 4px 12px rgba(61, 125, 121, .25); }
.botao.verde:hover { background: linear-gradient(135deg, #46908B, #34A0AE); }
.botao.perigo { background: var(--superficie); color: var(--coral); border: 1px solid #F0C3BA; box-shadow: none; }
.botao.perigo:hover { background: var(--coral); color: #fff; border-color: var(--coral); }
.botao-claro:hover { border-color: var(--oceano); }
.botao-texto { color: var(--marinho-vivo); }

.pilula-nav.escolhida { background: var(--gradiente-acao); border-color: transparent; box-shadow: 0 4px 12px rgba(30, 84, 130, .22); }
.grupo-botoes .botao.claro.escolhido { background: var(--gradiente-acao); border-color: transparent; }

.alerta.erro { background: var(--coral-suave); color: #8C2F22; border-color: #F0C3BA; }
.alerta.ok { background: #DDF0EE; color: #245E5A; border-color: #B9DCD8; }
.alerta.aviso { background: var(--sol-suave); color: #7A5116; border-color: #F1DDB1; }

/* os cartoes de numero (relatorios, meu ponto): cartao branco com fio de cor */
.cartao-num {
  border: 1px solid rgba(23, 63, 99, .07); border-top: 0;
  border-left: 4px solid var(--linha-forte);
  border-radius: var(--raio); padding: 14px 16px 16px;
  box-shadow: var(--sombra);
}
.cartao-num.vermelho { border-left-color: var(--coral); }
.cartao-num.vermelho .numero { color: #B8432F; }
.cartao-num.verde { border-left-color: var(--verde); }
.cartao-num.ambar { border-left-color: var(--sol); }
.cartao-num.azul { border-left-color: var(--ceu); }
.cartao-num.quieto { border-left-color: var(--linha); }
.cartao-num.escolhido { border-color: var(--oceano); box-shadow: 0 0 0 3px rgba(44, 140, 153, .14); }

.placar-num.aceso { border-color: var(--coral); background: var(--coral-suave); }
.placar-num.aceso .n { color: #B8432F; }

.faixa-estreia { background: var(--sol-suave); border-color: #F1DDB1; border-left-color: var(--sol); }
.faixa-demo { background: var(--gradiente-sol); color: #3A2708; }

.passo.feito { background: #DDF0EE; border-color: #B9DCD8; }
.passo.agora { border-color: var(--oceano); box-shadow: 0 0 0 3px rgba(44, 140, 153, .12); }
.passo.agora .numero-passo { background: var(--gradiente-acao); border-color: transparent; }

.janela { border-radius: 20px; box-shadow: 0 30px 70px rgba(15, 44, 70, .35); }
.janela-topo h3 { color: var(--marinho); }
.janela-pe { border-radius: 0 0 20px 20px; }

.endereco-cartao.destaque { border-color: rgba(233, 162, 59, .5); }
.endereco-etiqueta { color: #B77C32; }
code.endereco:hover { border-color: var(--oceano); }
code.endereco.copiado { background: var(--oceano); border-color: var(--oceano); }

.cartao-doc:hover { border-color: var(--oceano); }
.separador-bloco { color: var(--sol); }
.separador-bloco::after { background: linear-gradient(90deg, rgba(233, 162, 59, .4), var(--linha)); }

.campo input:focus, .campo select:focus, .campo textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--oceano);
  box-shadow: 0 0 0 3px rgba(44, 140, 153, .16);
}
:focus-visible { outline-color: var(--sol); }

.marcar input[type="checkbox"] { accent-color: var(--oceano); }

/* o topo da tela "meu ponto" */
.meu-topo { background: var(--gradiente-marca); box-shadow: 0 8px 24px rgba(15, 44, 70, .18); }

/* ------------------------------------------------------ a tela de entrar
   O cartao ganha o icone do sistema no alto, e a foto da recepcao recebe um
   tom mais azul, com um brilho do oceano vindo de baixo. */
.entrar-tela {
  background-image:
    radial-gradient(900px 500px at 50% 115%, rgba(44, 140, 153, .45), transparent 65%),
    linear-gradient(168deg, rgba(14, 40, 66, .78) 0%, rgba(12, 34, 55, .86) 55%, rgba(8, 24, 40, .92) 100%),
    url('/img/recepcao.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.entrar-cartao {
  border-radius: 22px; padding-top: 30px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .2), 0 0 0 1px rgba(255, 255, 255, .5);
  position: relative; margin-top: 34px;
}
.entrar-icone {
  display: block; width: 68px; height: 68px;
  margin: -64px auto 14px; border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35), 0 0 0 5px var(--superficie);
}
.marca-cartao { margin-bottom: 18px; }
.entrar-cartao h1 { color: var(--marinho); }
.entrar-cartao .botao.largo { padding: 14px; font-size: 15.5px; letter-spacing: .02em; }

/* ---------------------------------------- as janelas do terminal de ponto */
.sou-eu, .confirma, .folha { border-radius: 24px; }
.sou-eu-sim {
  background: linear-gradient(135deg, #3D7D79, #2C8C99);
  box-shadow: 0 10px 26px rgba(44, 140, 153, .35);
}
.sou-eu-sim:hover { background: linear-gradient(135deg, #46908B, #34A0AE); }
.sou-eu-nome { color: var(--marinho); }
.confirma-certo { background: linear-gradient(135deg, #DDF0EE, #D7EFEC); color: var(--oceano-forte); box-shadow: 0 0 0 6px rgba(44, 140, 153, .1); }
.confirma-tipo { background: var(--gradiente-marca); box-shadow: 0 8px 22px rgba(15, 44, 70, .25); }
.confirma-hora { color: var(--marinho-vivo); }
.confirma-pronto { background: var(--gradiente-acao); box-shadow: 0 8px 20px rgba(30, 84, 130, .25); }
.confirma-pronto:hover { background: linear-gradient(135deg, #245F92 0%, #34A0AE 100%); }
.confirma-barra-cheia { background: var(--gradiente-fio); }
.trilha-item.agora { background: #DDF0EE; border-color: var(--oceano); box-shadow: 0 0 0 3px rgba(44, 140, 153, .14); }
.trilha-item.agora .trilha-nome, .trilha-item.agora .trilha-hora { color: var(--oceano-forte); }
.folha-corpo h3 { color: #B77C32; }
.folha-contato { background: var(--ceu-suave); color: var(--marinho-vivo); }

/* o cartao da camera acompanha o cartao do teclado */
.forma-rosto {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.forma-rosto[hidden] { display: none; }
.rosto-palco { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .35); }
.rosto-contorno.lendo .rosto-cabeca { stroke: #7FE0A8; }
.rosto-status.fraco { color: rgba(207, 227, 245, .85); }
.rosto-transparencia { color: rgba(207, 227, 245, .62); }

/* no papel, nada disto: a impressao continua preto no branco */
@media print {
  .lateral, .ceu { display: none !important; }
  .bloco::before { display: none; }
  .conteudo { background: #fff; }
}

/* ====================================================================
   A SEGURANCA, 22/09/2026
   Configuracoes > Seguranca, a pagina de autorizar aparelho e os avisos
   do terminal. Classes em vez de estilo escrito na pagina: e o que deixa
   a regra de seguranca do navegador (CSP) fechada para script de fora.
   ==================================================================== */
.rotulo-filtro { font-size: 13.5px; }
.entrar-voltar { margin-top: 18px; text-align: center; font-size: 13.5px; }
.celula-vazia { color: var(--texto-fraco); padding: 20px; }
.celula-data { font-size: 12.5px; white-space: nowrap; }
.celula-miuda { font-size: 12.5px; color: var(--texto-fraco); }
tr.linha-alerta td:first-child { box-shadow: inset 3px 0 0 var(--coral); }

.seguranca-resumo { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px 6px; }
.seguranca-numero {
  display: flex; flex-direction: column; gap: 2px; min-width: 150px;
  padding: 10px 14px; border-radius: var(--raio-p);
  background: var(--papel); border: 1px solid var(--linha);
}
.seguranca-numero b { font: 700 22px var(--fonte-numero); color: var(--marinho); }
.seguranca-numero span { font-size: 12.5px; color: var(--texto-fraco); }
.seguranca-numero.aceso { background: var(--coral-suave); border-color: rgba(217, 101, 79, .35); }
.seguranca-numero.aceso b { color: var(--terracota); }

/* a chave dos dados: o codigo de recuperacao que a administracao anota */
.faixa-cofre { background: var(--coral-suave); border-color: rgba(217, 101, 79, .35); border-left-color: var(--coral); }
.cofre-passo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 12px 0 4px; }
.cofre-passo[hidden] { display: none; }
.cofre-passo .campo { flex: 1 1 240px; margin-bottom: 0; }
.cofre-codigo-valor {
  margin: 8px 0 12px; font: 700 26px var(--mono); letter-spacing: 3px;
  color: var(--marinho); overflow-wrap: anywhere;
}

/* autorizar um aparelho, na administracao */
.aparelho-novo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.aparelho-novo .campo { flex: 1 1 280px; margin-bottom: 0; }
.aparelho-codigo {
  margin: 0 0 18px; padding: 16px 18px; border-radius: var(--raio);
  background: var(--oceano-suave); border: 1px solid rgba(44, 140, 153, .35);
}
.aparelho-codigo[hidden] { display: none; }
.aparelho-codigo-rotulo { font-size: 14px; color: var(--tinta-suave); }
.aparelho-codigo-valor { margin: 8px 0 10px; font: 700 34px var(--mono); letter-spacing: 5px; color: var(--marinho); }
.aparelho-codigo-valor.vencido { text-decoration: line-through; opacity: .5; }
.aparelho-codigo-prazo { font-size: 13.5px; font-weight: 600; color: var(--oceano-forte); }
.aparelho-passos { margin: 0 0 10px 18px; padding: 0; font-size: 14px; line-height: 1.6; }
.aparelho-passos code { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.celula-acao { text-align: right; white-space: nowrap; }

/* o relogio do ponto errado: a faixa de cima do terminal */
.faixa-relogio {
  background: var(--coral); color: #fff;
  padding: 10px 16px; text-align: center;
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
}
.faixa-relogio[hidden] { display: none; }

/* o comprovante na tela: so o numero do registro, e onde fica o completo */
.recibo-nota { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--tinta-suave); }

/* o terminal num aparelho que nao pode bater ponto */
.aparelho-bloqueio {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 20px;
  background: rgba(8, 24, 40, .86); backdrop-filter: blur(6px);
}
.aparelho-bloqueio[hidden] { display: none; }
.aparelho-bloqueio-cartao {
  max-width: 520px; width: 100%; box-sizing: border-box;
  padding: 30px 28px; border-radius: 24px; text-align: center;
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-forte);
}
.aparelho-bloqueio-titulo { font: 600 24px var(--fonte-titulo); color: var(--marinho); margin-bottom: 12px; }
.aparelho-bloqueio-texto { font-size: 16px; line-height: 1.6; color: var(--tinta-suave); margin: 0 0 20px; }
.aparelho-bloqueio-botao { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.aparelho-bloqueio-botao[hidden] { display: none; }
.aparelho-bloqueio-nota { margin: 16px 0 0; font-size: 14px; color: var(--tinta-suave); }

/* As fontes do Kizami (pedido de 24/10/2026: "baixe as fontes Sora e Inter
   para o ponto, para ficar igual ao desenho aprovado"). Sora nos titulos,
   Inter no texto e nos numeros. Ficam dentro do sistema, em publico/fontes,
   porque o ponto nao busca nada na internet. Sao variaveis (um arquivo cobre
   todos os pesos) e so o pedaco latino, que tem o portugues inteiro; letra de
   fora dessa faixa sai na Segoe UI. Licenca OFL ao lado dos arquivos.
   Ficam fora do @media screen do Kizami: @font-face so declara a fonte, e
   quem escolhe usar sao as variaveis --fonte de cada bloco. */
@font-face {
  font-family: "Inter";
  src: url("/fontes/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  src: url("/fontes/sora.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   O VISUAL KIZAMI DE 23/10/2026
   ============================================================================

   O ponto ganhou nome e marca de produto: Kizami. Em japones, kizami e o
   entalhe que registra, e "toki wo kizamu" e o relogio marcando o tempo. O
   visual foi desenhado num canvas e aprovado em 23/10/2026 ("gostei muito"),
   com o pedido de tirar as cores do hotel e deixar as fotos do hotel.

   AS CORES
   Laca, o vermelho do selo, para a marca e a acao principal. Sumi, o preto
   de tinta japonesa, para texto, menu e a coluna escura. Cinzas quentes para
   fundo e borda. O ouro so aparece dentro do selo. As cores de situacao nao
   mudam de papel: verde em servico, ambar atencao, vermelho erro e azul
   informacao, sempre com icone e palavra junto.

   AS FONTES
   Sora nos titulos e Inter no texto, quando estiverem no aparelho. Como o
   sistema nao busca nada na internet, sem elas a tela cai na Segoe UI do
   Windows (ou na do tablet), sem quebrar nada.

   Tudo aqui vale so na tela: o espelho e o AFD impressos continuam iguais.
   (As rodelas de iniciais das listas vem do JS e, impressas com o fundo
   ligado, saem nas cores novas.) Os nomes das variaveis da casa ficam, para
   nenhuma regra antiga perder a cor; muda so o valor. Para voltar ao visual
   de 11/09, ver o CONTEXTO.md. */

@media screen {

:root {
  --k-laca: #C23A2B;
  --k-laca-escura: #9E2A1D;
  --k-laca-clara: #E5533F;
  --k-laca-suave: #FBECE9;
  --k-sumi: #1C1A18;
  --k-sumi-fundo: #141211;
  --k-carvao: #3A3633;
  --k-pedra: #5E5853;
  --k-nevoa: #ECE8E3;
  --k-papel: #F4F3F1;
  --k-linha: #E4DED7;
  --k-linha-forte: #CFC8C1;

  --marinho: #1F1C1A;
  --marinho-fundo: #141211;
  --marinho-claro: #CFC8C1;
  --marinho-suave: #F0ECE7;
  --marinho-vivo: #1C1A18;
  --papel: var(--k-papel);
  --papel-escuro: var(--k-nevoa);
  --tinta: var(--k-sumi);
  --tinta-suave: var(--k-pedra);
  --tinta-clara: #F4F1ED;
  --linha: var(--k-linha);
  --linha-forte: var(--k-linha-forte);

  --verde: #2F7A4A;
  --verde-suave: #E4F1E8;
  --dourado: #B45309;
  --dourado-suave: #FDF0DC;
  --terracota: #B3261E;
  --terracota-suave: #FBE7E4;
  --noite: var(--k-sumi-fundo);
  --noite-clara: #2A2725;

  --oceano: var(--k-laca);
  --oceano-forte: var(--k-laca-escura);
  --oceano-suave: var(--k-laca-suave);
  --sol: #D97706;
  --sol-claro: var(--k-laca-clara);
  --sol-suave: #FDF0DC;
  --coral: #B3261E;
  --coral-suave: #FBE7E4;
  --ceu: #2E5A87;
  --ceu-suave: #E7EEF6;

  --gradiente-marca: linear-gradient(160deg, #2A2725 0%, #1C1A18 55%, #141211 100%);
  --gradiente-acao: linear-gradient(135deg, #C23A2B 0%, #A8301F 100%);
  --gradiente-fio: linear-gradient(90deg, #C23A2B, #E5533F 60%, #E2AE57);
  --gradiente-sol: linear-gradient(135deg, #FDE7C2 0%, #F2B866 100%);

  --sombra: 0 1px 2px rgba(28, 24, 22, .05), 0 8px 24px rgba(28, 24, 22, .08);
  --sombra-forte: 0 12px 44px rgba(20, 18, 17, .24);

  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Sora", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fonte-numero: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* os icones do menu em duas cores: o traco na cor do texto, um fundo de leve
   e um acento em laca no que a pessoa precisa ver primeiro */
.ic .ic-tinta { fill: currentColor; fill-opacity: .16; }
.ic .ic-acento { fill: var(--k-icone-acento, var(--k-laca)); stroke: none; }
.ic .ic-acento-tudo { fill: var(--k-icone-acento, var(--k-laca)); stroke: var(--k-icone-acento, var(--k-laca)); }
.ic .ic-acento-dentro { fill: var(--k-icone-acento, var(--k-laca)); }
.ic .ic-acento-traco { stroke: var(--k-icone-acento, var(--k-laca)); }
.ic .ic-anel { stroke: var(--k-icone-anel, #fff); stroke-width: 1.6; }
.ic .ic-sobre { stroke: var(--k-icone-sobre, #fff); }
.ic .ic-clipe { fill: var(--k-icone-anel, #fff); }

/* --------------------------------------------- a tela de bater ponto
   A foto da recepcao vira a coluna da esquerda, sob um veu escuro, com o
   logo, a saudacao e a hora em branco; as formas de bater ficam em cartoes
   brancos a direita. Num tablet em pe a foto vira uma faixa no alto. As
   classes de 11/09 (ceu-manha, ceu-noite...) continuam vindo do ponto.js e
   agora so tingem o veu: mais quente de manha, mais fundo de noite.

   A regra de nao por foto embaixo de dado continua: o relogio e um numero de
   tamanho de cartaz, em branco sobre veu de 58% ou mais, e nenhuma tabela ou
   lista fica sobre a foto. */

.terminal,
.terminal[class*="ceu-"] {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(0, 1.1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "topo formas" "relogio formas" "rodape formas";
  column-gap: 28px;
  align-items: stretch;
  padding: 24px;
  background: linear-gradient(155deg, #24201D 0%, #171513 55%, #0F0E0D 100%);
  color: #F4F1ED;
  transition: none;
}

/* O fundo e o selo do Kizami aberto na tela (pedido de 24/10/2026: o fundo
   branco ficava "meio meme"; desenho aprovado no canvas): sumi, um brilho de
   laca atras dos cartoes e a moldura do selo, com os entalhes das horas, os
   pontos dos minutos e o entalhe de ouro das 12h. A moldura e desenhada pelo
   ponto.js (desenharMoldura): os entalhes ficam onde o raio de cada hora,
   saindo do centro, cruza a borda, e isso muda com o tamanho da tela. Ela
   vive no respiro do terminal (o padding), fora dos cartoes, e acompanha a
   pagina inteira: quando a pagina rola (tablet em pe com camera), a moldura
   fecha no fim da pagina, e nao no meio dos cartoes. */
.terminal > .moldura-kizami {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
/* O brilho mora na mesma area da grade que os cartoes (grid-area: formas):
   acompanha o cartao em toda arrumacao da tela. Com z-index -1 ele fica atras
   da foto e dos cartoes, por cima so do fundo. */
.terminal::after {
  content: ''; grid-area: formas;
  position: relative; z-index: -1;
  margin: -110px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(194, 58, 43, .24), rgba(194, 58, 43, 0));
}
/* o tablet puxa a pagina alem do fim: aparece o fundo da pagina, nao papel */
body:has(> .terminal) { background: #141211; }

.terminal > .ceu {
  position: relative; inset: auto;
  grid-column: 1; grid-row: 1 / -1;
  border-radius: 28px;
  background: #1C1A18 url('/img/recepcao.jpg') 64% 50% / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(244, 243, 241, .07), 0 18px 44px rgba(0, 0, 0, .38);
}
.terminal .ceu::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(20, 18, 17, .80) 0%, rgba(20, 18, 17, .58) 46%, rgba(20, 18, 17, .86) 100%);
}
.terminal.ceu-manha .ceu::before {
  background: linear-gradient(180deg, rgba(40, 24, 16, .80) 0%, rgba(40, 24, 16, .58) 46%, rgba(20, 18, 17, .86) 100%);
}
.terminal.ceu-entardecer .ceu::before {
  background: linear-gradient(180deg, rgba(48, 22, 14, .82) 0%, rgba(40, 20, 14, .60) 46%, rgba(20, 18, 17, .88) 100%);
}
.terminal.ceu-noite .ceu::before,
.terminal.ceu-madrugada .ceu::before {
  background: linear-gradient(180deg, rgba(10, 9, 8, .90) 0%, rgba(10, 9, 8, .72) 46%, rgba(10, 9, 8, .92) 100%);
}
.ceu-arco, .ceu-sol, .ceu-estrelas { display: none; }

.terminal-topo {
  grid-area: topo; align-self: start;
  width: auto; max-width: none;
  padding: 30px 34px 0;
  /* com a camera, a coluna da foto fica estreita (de 1266 a uns 1320 px): o
     botao Administracao desce para baixo do logo em vez de sair da foto */
  flex-wrap: wrap; row-gap: 10px;
}
.terminal-topo .marca { align-items: flex-start; }
.terminal-topo .marca-logo { width: 156px; }
.terminal .marca-sub { color: rgba(244, 241, 237, .78); }
.link-admin { background: rgba(20, 18, 17, .42); border-color: rgba(255, 255, 255, .22); backdrop-filter: none; }
.link-admin:hover { background: rgba(20, 18, 17, .62); border-color: rgba(255, 255, 255, .4); }

.terminal .relogio-caixa {
  grid-area: relogio; align-self: center;
  margin: 0; padding: 12px 34px;
  text-align: left; color: #fff;
}
.terminal .saudacao {
  font-family: var(--fonte-titulo); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.01em;
  color: #F4F1ED; text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  margin-bottom: 2px;
}
.terminal .saudacao::before, .terminal .saudacao::after { display: none; }
.terminal .relogio {
  font-family: var(--fonte-numero); font-weight: 300;
  font-size: clamp(76px, 9.4vw, 140px); letter-spacing: -.045em;
  color: #fff; text-shadow: 0 6px 34px rgba(0, 0, 0, .38);
}
.terminal .relogio::before { content: none; }
.terminal .relogio .seg { color: #F4A08F; font-weight: 400; text-shadow: none; }
.terminal .relogio-data {
  display: block; margin-top: 14px; padding: 0;
  background: none; border: 0; backdrop-filter: none;
  font-size: 20px; font-weight: 600; color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

.terminal .rodape-terminal {
  grid-area: rodape; align-self: end;
  max-width: none; margin: 0; padding: 0 34px 28px;
  text-align: left; font-size: 13.5px; line-height: 1.6;
  color: rgba(244, 241, 237, .86);
}
.terminal .link-privacidade { color: #fff; }
/* o botao de privacidade tinha margem automatica e saia centralizado, com o
   resto do rodape a esquerda */
.terminal .rodape-terminal .link-privacidade { margin-left: 0; margin-right: 0; padding-left: 0; }
.assinatura-kizami {
  display: flex; align-items: center; gap: 9px; margin-top: 16px;
  font-family: var(--fonte-titulo); font-size: 12.5px; font-weight: 600;
  letter-spacing: .2em; color: #fff;
}
.assinatura-kizami svg { width: 26px; height: 26px; flex-shrink: 0; }

.terminal .ponto-formas {
  grid-area: formas; align-self: center;
  width: 100%; max-width: none; margin: 0;
  justify-content: center;
}
.terminal .painel-ponto,
.terminal .forma-rosto {
  background: #fff; color: var(--k-sumi);
  border: 0; border-radius: 28px;
  backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .20), 0 22px 50px rgba(0, 0, 0, .45);
}
.terminal .painel-ponto { max-width: 460px; padding: 34px 32px 28px; }
.painel-ponto::before, .forma-rosto::before { display: none; }
.terminal .pergunta-passo { font-family: var(--fonte-titulo); font-size: 23px; color: var(--k-sumi); }
.terminal .ajuda-passo { color: var(--k-pedra); }
.terminal .visor-grande {
  background: #F4F1ED; border: 2px solid var(--k-linha);
  box-shadow: none; color: var(--k-sumi);
}
.terminal .visor-grande:has(.digito:not(.vazio)) {
  border-color: var(--k-laca); box-shadow: 0 0 0 4px rgba(194, 58, 43, .10);
}
.terminal .visor-grande .vazio { color: #B6AEA6; }
.terminal .bolinha-pin { color: #CFC8C1; }
.terminal .bolinha-pin.cheia { color: var(--k-laca); }
.terminal .tecla {
  background: #F2EEE9; border: 0; color: var(--k-sumi);
  box-shadow: inset 0 -2px 0 rgba(28, 24, 22, .10);
}
.terminal .tecla:hover { background: #EAE5DF; }
.terminal .tecla.tocada { animation-name: kizami-tecla-tocada; }
@keyframes kizami-tecla-tocada {
  from { background: rgba(194, 58, 43, .20) }
  to   { background: #F2EEE9 }
}
.terminal .tecla:active { transform: translateY(2px); box-shadow: none; }
/* codigo que nao e de ninguem: o visor limpa e treme de leve, e o recado
   fica logo embaixo dele (ponto.js, perguntarQuem) */
.terminal .visor-grande.tremendo { animation: kizami-tremendo .36s ease-in-out; }
@keyframes kizami-tremendo {
  0%, 100% { transform: translateX(0) }
  20% { transform: translateX(-6px) }
  40% { transform: translateX(5px) }
  60% { transform: translateX(-3px) }
  80% { transform: translateX(2px) }
}
@media (prefers-reduced-motion: reduce) {
  .terminal .visor-grande.tremendo { animation: none; }
}
.terminal .tecla.apagar { background: #fff; color: var(--k-pedra); box-shadow: inset 0 0 0 1.5px var(--k-linha); }
.terminal .tecla.ok {
  background: var(--k-laca); color: #fff; border: 0;
  box-shadow: 0 8px 20px rgba(194, 58, 43, .26);
}
.terminal .tecla.ok:hover { background: #A8301F; }
.terminal .aviso-terminal.erro { background: #FBE7E4; border: 1px solid #F2C4BD; color: #8F1F15; }
.terminal .aviso-terminal.info { background: #FDF0DC; border: 1px solid #F3D9A8; color: #7A4508; }
/* O recado ("Faltam numeros", batida repetida, camera...) aparece no
   lugar da dica que fica embaixo do visor, e esse lugar tem altura fixa de
   duas linhas. Assim o cartao nao muda de tamanho quando o recado aparece ou
   some, e as teclas ficam paradas embaixo do dedo: com o cartao centralizado
   na altura, um recado que so ganhasse espaco ao aparecer subia o teclado
   meia tecla. O lugar reservado embaixo do teclado, primeira tentativa,
   deixava uma faixa branca vazia no cartao. Revisao de 23/10/2026. */
/* align-content: com a camera o cartao estica ate a altura do cartao dela, e
   sem isso as quatro linhas dividiam a sobra: visor e teclas cresciam */
.terminal .painel-ponto { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.terminal .passo-ponto { display: contents; }
.terminal .pergunta-passo { grid-row: 1; grid-column: 1; }
.terminal .visor-grande { grid-row: 2; grid-column: 1; }
.terminal .ajuda-passo,
.terminal .aviso-terminal { grid-row: 3; grid-column: 1; align-self: center; margin: 12px 0 0; }
.terminal .teclado { grid-row: 4; grid-column: 1; margin-top: 16px; }
.terminal .aviso-terminal {
  /* flex so para o recado de uma linha ficar no meio da altura reservada */
  display: flex; align-items: center; justify-content: center; visibility: hidden;
  /* duas linhas de texto mais respiro e borda: o sistema conta o respiro
     dentro da altura (box-sizing: border-box) */
  min-height: calc(2.9em + 20px); padding: 9px 14px;
  font-size: 14px; line-height: 1.45; border: 1px solid transparent;
}
.terminal .aviso-terminal.erro,
.terminal .aviso-terminal.info { visibility: visible; }
.terminal .ponto-formas.com-rosto .ajuda-passo,
.terminal .ponto-formas.com-rosto .aviso-terminal { margin-top: 8px; }
.terminal .ponto-formas.com-rosto .teclado { margin-top: 10px; }

.terminal .forma-rosto { padding: 22px; }
.terminal .forma-rotulo { font-family: var(--fonte-titulo); color: var(--k-sumi); }
.terminal .rosto-palco { background: var(--k-sumi-fundo); box-shadow: none; }
.terminal .rosto-contorno.perto .rosto-cabeca { stroke: #F4A08F; }
.terminal .rosto-status { color: var(--k-sumi); }
.terminal .rosto-status.fraco { color: var(--k-pedra); }
.terminal .rosto-status.erro { color: #8F1F15; }
.terminal .rosto-transparencia { color: var(--k-pedra); }

/* com a camera: a foto estreita e os dois cartoes ficam lado a lado.
   O palco da camera tem a MESMA medida de antes (cartao de ate 540 px, respiro
   de 16 e 18 px): a conta de "rosto encaixado" mede o contorno desenhado na
   tela, e a calibracao de 11/09 foi feita nessa medida. Por isso a coluna das
   formas tem a largura exata dos dois cartoes (540 + 18 + 400), e a foto fica
   com o que sobra. Achado pela revisao de 23/10/2026. */
.terminal:has(.ponto-formas.com-rosto) {
  grid-template-columns: minmax(240px, 1fr) minmax(0, 958px);
  padding: 20px;
}
.terminal .ponto-formas.com-rosto { flex-wrap: nowrap; gap: 18px; align-items: stretch; }
.terminal .ponto-formas.com-rosto .forma-rosto { flex: 0 1 540px; min-width: 0; max-width: 540px; padding: 16px 18px; border: 1px solid transparent; }
.terminal .ponto-formas.com-rosto .painel-ponto { flex: 0 1 400px; padding: 22px 22px 20px; }
/* a regra antiga que aperta as teclas com a camera aumentava tambem "apagar"
   e "continuar", e o "continuar" quebrava em duas linhas */
.terminal .ponto-formas.com-rosto .tecla.apagar,
.terminal .ponto-formas.com-rosto .tecla.ok { font-size: 15px; }
.terminal:has(.ponto-formas.com-rosto) .terminal-topo { padding: 22px 22px 0; }
.terminal:has(.ponto-formas.com-rosto) .relogio-caixa { margin: 0; padding: 10px 22px; }
.terminal:has(.ponto-formas.com-rosto) .relogio { font-size: clamp(48px, 5vw, 96px); letter-spacing: -.045em; }
.terminal:has(.ponto-formas.com-rosto) .relogio-data { margin-top: 10px; font-size: 18px; }
.terminal:has(.ponto-formas.com-rosto) .rodape-terminal { margin: 0; max-width: none; padding: 0 22px 22px; font-size: 12.5px; }

/* tela media com camera: a foto vira faixa no alto e os cartoes ficam embaixo.
   O corte em 1265 px e a conta da medida do palco: abaixo dele a foto (240) e
   as formas (958) nao cabem lado a lado, e a camera encolheria. */
@media (max-width: 1265px) {
  .terminal:has(.ponto-formas.com-rosto) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "topo" "relogio" "formas" "rodape";
  }
  .terminal:has(.ponto-formas.com-rosto) > .ceu { grid-row: 1 / 3; }
  .terminal .ponto-formas.com-rosto { margin-top: 16px; }
  /* o rodape sai da foto e fica no fundo sumi: letra clara */
  .terminal:has(.ponto-formas.com-rosto) .rodape-terminal {
    padding: 14px 8px 4px; text-align: center; color: rgba(244, 241, 237, .80);
  }
  .terminal:has(.ponto-formas.com-rosto) .link-privacidade { color: #fff; }
  .terminal:has(.ponto-formas.com-rosto) .rodape-terminal .link-privacidade { margin-left: auto; margin-right: auto; padding-left: 10px; }
  .terminal:has(.ponto-formas.com-rosto) .rodape-terminal .link-privacidade:focus-visible { outline-color: #F4A08F; }
  .terminal:has(.ponto-formas.com-rosto) .assinatura-kizami { justify-content: center; color: #fff; }
}

/* tablet em pe ou tela estreita: faixa da foto no alto, tudo numa coluna */
@media (max-width: 940px) {
  .terminal,
  .terminal[class*="ceu-"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "topo" "relogio" "formas" "rodape";
    /* 20 e nao 14: a moldura do selo precisa de respiro para aparecer. O
       cartao da camera continua no teto de 520 px (tablet de 768 ou mais). */
    padding: 20px;
  }
  .terminal > .ceu { grid-row: 1 / 3; border-radius: 24px; }
  .terminal-topo { padding: 18px 20px 0; }
  /* cada regra com :has() fica sozinha: numa lista, o navegador que nao
     conhece :has() joga fora a regra inteira, e o rodape ficaria branco no
     fundo claro */
  .terminal .relogio-caixa { padding: 8px 20px 22px; }
  .terminal:has(.ponto-formas.com-rosto) .relogio-caixa { padding: 8px 20px 22px; }
  .terminal .relogio { font-size: clamp(60px, 14vw, 104px); }
  .terminal .ponto-formas { margin-top: 14px; flex-wrap: wrap; }
  .terminal .ponto-formas.com-rosto { flex-wrap: wrap; }
  /* o teto de 520 px da camera em pe e o de antes: mantem a calibracao */
  .terminal .ponto-formas.com-rosto .forma-rosto { flex-basis: 100%; max-width: 520px; }
  .terminal .ponto-formas.com-rosto .painel-ponto { flex-basis: 100%; }
  .terminal .painel-ponto { max-width: none; }
  /* o rodape fica embaixo dos cartoes, no fundo sumi: letra clara */
  .terminal .rodape-terminal { padding: 16px 6px 4px; text-align: center; color: rgba(244, 241, 237, .80); }
  .terminal:has(.ponto-formas.com-rosto) .rodape-terminal { padding: 16px 6px 4px; text-align: center; color: rgba(244, 241, 237, .80); }
  .terminal .link-privacidade { color: #fff; }
  .terminal .rodape-terminal .link-privacidade { margin-left: auto; margin-right: auto; padding-left: 10px; }
  .terminal .rodape-terminal .link-privacidade:focus-visible { outline-color: #F4A08F; }
  .assinatura-kizami { justify-content: center; color: #fff; }
}

/* ------------------------------------- as janelas do terminal de ponto */
.confirma-fundo { background: rgba(20, 18, 17, .86); }
.sou-eu, .confirma, .folha { border-radius: 24px; }
.sou-eu-nome { font-family: var(--fonte-titulo); color: var(--k-sumi); }
.sou-eu-sim { background: var(--k-laca); color: #fff; box-shadow: 0 10px 24px rgba(194, 58, 43, .28); }
.sou-eu-sim:hover { background: #A8301F; }
.sou-eu-nao:hover { color: var(--k-laca); }
.confirma-certo { background: var(--verde-suave); color: var(--verde); box-shadow: 0 0 0 6px rgba(47, 122, 74, .10); }
.confirma-tipo { background: var(--k-sumi); box-shadow: 0 8px 22px rgba(20, 18, 17, .22); }
.confirma-hora { color: var(--k-sumi); }
/* "Pronto", "Entendi" e o "Fechar" das janelas do terminal sao o unico botao
   de cada janela, a acao principal dela: vermelho, como todo botao importante
   (regra do hotel de 23/10/2026) */
.confirma-pronto { background: var(--k-laca); box-shadow: 0 8px 20px rgba(194, 58, 43, .26); }
.confirma-pronto:hover { background: #A8301F; }
.confirma-barra-cheia { background: var(--k-laca); }
.trilha-item.agora { background: var(--k-laca-suave); border-color: var(--k-laca); box-shadow: 0 0 0 3px rgba(194, 58, 43, .12); }
.trilha-item.agora .trilha-nome, .trilha-item.agora .trilha-hora { color: var(--k-laca-escura); }
.confirma-meus { background: #F4F1ED; color: var(--k-sumi); border-color: var(--k-linha); }
.confirma-meus:hover { background: var(--k-nevoa); }
.confirma-engano:hover { color: var(--k-laca); }
.confirma-engano-ok { background: #F0ECE7; color: var(--k-sumi); }
.folha-corpo h3 { color: var(--k-laca-escura); }
.folha-contato { background: #F0ECE7; color: var(--k-sumi); }

/* ------------------------------------------------- a administracao */
.lateral { --k-icone-acento: var(--k-laca-clara); --k-icone-anel: #1C1A18; --k-icone-sobre: #1C1A18; }
.lateral .marca { border-bottom-color: rgba(229, 83, 63, .32); }
.lateral .marca-sub { color: #CFC8C1; }
.lateral-selo svg { width: 24px; height: 24px; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3)); }
.lateral-selo .kizami-nome { color: #fff; }
.menu-item.ativo { --k-icone-anel: #3A3735; }
.menu-item.ativo .ic { color: #fff; }
/* "sair do sistema" e "abrir tela de ponto": a regra antiga
   (.lateral .rodape a) pintava em marinho sobre o menu escuro e ganhava das
   cores claras de 11/09; ja estavam quase invisiveis antes do Kizami */
.lateral .rodape .rodape-sair, .lateral .rodape .rodape-link a { color: #CFC8C1; }
.lateral .rodape .rodape-sair:hover, .lateral .rodape .rodape-link a:hover { color: #fff; }
.lateral :focus-visible { outline-color: var(--k-laca-clara); }

.conteudo { background: var(--k-papel); }
.cabeca { border-bottom-color: rgba(28, 24, 22, .10); }
.ao-vivo { background: var(--verde-suave); color: var(--verde); box-shadow: inset 0 0 0 1px rgba(47, 122, 74, .22); }
.ao-vivo .bolinha { background: var(--verde); box-shadow: 0 0 0 3px rgba(47, 122, 74, .18); }
/* dia tranquilo com fio neutro: laca ali parecia alerta, mais grave que o
   ambar do dia que pede atencao */
.resumo-do-dia { background: linear-gradient(90deg, #F6F2EE, var(--superficie) 55%); border-color: var(--k-linha); border-left-color: var(--k-carvao); }
.filtro-num { box-shadow: 0 1px 2px rgba(28, 24, 22, .05); }
.filtro-num.verde { background: #E4F1E8; border-color: #C3DFCB; color: #24603A; }
.filtro-num.azul { background: var(--ceu-suave); border-color: #CBD9E8; color: var(--ceu); }
/* o filtro escolhido precisa vir DEPOIS das cores de cada filtro: com o verde
   e o azul redefinidos aqui, o escolhido ficava com fundo claro e numero
   branco (contraste de 1,16 para 1) */
.filtro-num.escolhido, .filtro-num.escolhido.quieto {
  background: var(--gradiente-acao); border-color: transparent; color: #fff; opacity: 1;
  box-shadow: 0 6px 16px rgba(194, 58, 43, .26);
}
.filtro-num.escolhido .numero { color: #fff; }
.filtro-num.escolhido .rotulo::before { background: #fff; }
/* o mouse parado em cima do escolhido, logo depois do clique: a regra antiga
   do mouse (.filtro-num.clicavel:hover) pesa mais e trocava o fundo por papel,
   com o texto branco por cima. Ja era assim antes do Kizami. */
.filtro-num.escolhido.clicavel:hover { background: var(--gradiente-acao); border-color: transparent; }
.bloco { border-color: rgba(28, 24, 22, .07); box-shadow: 0 2px 4px rgba(28, 24, 22, .04), 0 14px 34px rgba(28, 24, 22, .07); }
.bloco::before { display: none; }
thead th { background: #F4F1ED; color: var(--k-sumi); border-bottom: 2px solid var(--k-linha); }
tbody tr:nth-child(even) { background: rgba(28, 24, 22, .022); }
/* Tabela com a Inter: ela tem a letra mais alta que a Segoe UI (altura do x
   0,55 contra 0,50), entao no mesmo tamanho le maior e ocupa uns 7% mais de
   largura. Medido em 24/10/2026: o Relatorio, que cabia na tela de 1536 do
   Paulo, passou a rolar de lado. Aqui a Inter fica com a altura de x da
   Segoe UI: a letra continua a da Inter, e as colunas voltam a largura de
   antes. Titulo e o resto ficam com a Inter no tamanho cheio. */
.conteudo table { font-size-adjust: 0.5; }
tbody tr:hover { background: #F6F2EE; }
.etiqueta.verde { background: #E4F1E8; color: #24603A; }
.etiqueta.azul { background: var(--ceu-suave); color: var(--ceu); }
.ficha.trabalhando { background: linear-gradient(90deg, rgba(47, 122, 74, .08), transparent 45%); }
.ficha.trabalhando:hover { background: linear-gradient(90deg, rgba(47, 122, 74, .12), #F6F2EE 45%); }
.ficha.no-intervalo { background: linear-gradient(90deg, rgba(217, 119, 6, .08), transparent 45%); }
.botao { box-shadow: 0 4px 12px rgba(194, 58, 43, .22); }
.botao:hover { background: linear-gradient(135deg, #A8301F 0%, #C23A2B 100%); }
.botao.claro { box-shadow: 0 1px 2px rgba(28, 24, 22, .06); }
.botao.verde { background: linear-gradient(135deg, #2F7A4A, #3A8C59); box-shadow: 0 4px 12px rgba(47, 122, 74, .25); }
.botao.verde:hover { background: linear-gradient(135deg, #286B40, #2F7A4A); }
/* Regra do hotel (23/10/2026): "os botoes importantes precisam ser em
   vermelho, sempre". A acao principal e laca cheia (.botao); o que apaga ou
   desfaz e contorno vermelho (.botao.claro.perigo, cheio ao passar o mouse);
   branco so para cancelar, fechar janela, filtros e acoes menores. O botao
   que confirma algo que apaga (desligar alguem) e vermelho cheio. */
.botao.perigo:not(.claro) {
  background: #B3261E; color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(179, 38, 30, .25);
}
.botao.perigo:not(.claro):hover { background: #8F1F15; color: #fff; border-color: transparent; }
.pilula-nav.escolhida { box-shadow: 0 4px 12px rgba(194, 58, 43, .22); }
.alerta.ok { background: #E4F1E8; color: #24603A; border-color: #C3DFCB; }
.cartao-num { border-color: rgba(28, 24, 22, .07); border-left-color: var(--linha-forte); }
.cartao-num.escolhido { box-shadow: 0 0 0 3px rgba(194, 58, 43, .14); }
.passo.feito { background: #E4F1E8; border-color: #C3DFCB; }
.passo.agora { box-shadow: 0 0 0 3px rgba(194, 58, 43, .12); }
.janela { box-shadow: 0 30px 70px rgba(20, 18, 17, .35); }
.endereco-cartao.destaque { border-color: rgba(194, 58, 43, .4); }
.endereco-etiqueta { color: var(--k-laca-escura); }
.campo input:focus, .campo select:focus, .campo textarea:focus,
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(194, 58, 43, .16); }
:focus-visible { outline-color: var(--k-laca); }
.meu-topo { box-shadow: 0 8px 24px rgba(20, 18, 17, .18); }

/* sobras do hotel que nao vinham das variaveis, e o papel de cada cor:
   verde e o que deu certo, ambar o que pede atencao */
.de-quem.do-hotel { color: #fff; }
.item-prontidao.ok { border-color: #C3DFCB; }
.item-prontidao.hotel { border-color: #F3D9A8; }
.pilula-batida.ajuste { color: #7A4508; border-bottom-color: rgba(180, 83, 9, .55); }
.separador-bloco { color: var(--k-laca-escura); }
.separador-bloco::after { background: linear-gradient(90deg, rgba(194, 58, 43, .35), var(--linha)); }
code.endereco.copiado { background: var(--verde); border-color: var(--verde); }
.botao-empresa.incompleta::after { color: #F2B866; }
.bloco-corpo.sem-espaco {
  background:
    linear-gradient(to right, var(--superficie) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--superficie) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(28, 24, 22, .14), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(28, 24, 22, .14), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}
.folha-rolagem {
  background:
    linear-gradient(to right, var(--superficie) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--superficie) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(28, 24, 22, .16), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(28, 24, 22, .16), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* o anel de foco precisa aparecer no cartao branco do terminal (a regra
   antiga usa o "marinho claro", que agora e um cinza quase branco) */
.terminal .painel-ponto :focus-visible,
.terminal .forma-rosto :focus-visible { outline-color: var(--k-laca); }

/* ------------------------------------------------- a tela de entrar */
.entrar-tela {
  background-image:
    linear-gradient(168deg, rgba(20, 18, 17, .72) 0%, rgba(20, 18, 17, .82) 55%, rgba(14, 12, 11, .92) 100%),
    url('/img/recepcao.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.entrar-cartao h1 { color: var(--k-sumi); }

/* ------------------------------ as telas da protecao (feitas em 22/09/2026)
   Autorizar aparelho, Configuracoes > Seguranca e o terminal bloqueado
   pegam as cores pelas variaveis; estas eram cores escritas direto, ainda
   do visual de 11/09 (marinho e verde-agua). */
.aparelho-codigo { border-color: rgba(194, 58, 43, .30); }
.aparelho-bloqueio { background: rgba(20, 18, 17, .88); }
.seguranca-numero.aceso, .faixa-cofre { border-color: rgba(179, 38, 30, .30); }

}

/* ============================================================================
   A IMPRESSAO, CONSERTADA (23/10/2026; o mesmo conserto da Sim7 de 23/09)
   ============================================================================

   A conferencia de 23/09 imprimiu tudo em PDF e achou estes defeitos. Este
   bloco fica no FIM do arquivo de proposito: regra de impressao escrita la em
   cima perdia para as regras de tela escritas depois (mesma forca, e a de
   baixo ganha). Foi assim que a sombra e a borda dos blocos voltaram ao papel.

   1. Folha em branco no fim: o painel tem altura minima de uma tela inteira
      (100vh). No papel, 100vh e a folha inteira, e com a margem do corpo o
      conteudo passava da folha, sempre, nem que fosse por um fio.
   2. Sombra e borda dos blocos no papel.
   3. Totais e declaracao partidos: a assinatura ia sozinha para a folha
      seguinte, longe dos numeros que ela confirma.
   4. As batidas e o relatorio saiam em pe e espremidos (a data virava
      "23/ 09/ 202 6"). A regra que deita o papel depende da marca "ativa" na
      aba, que nenhuma tela colocava; agora o admin.js poe na troca de aba. */

@media print {
  /* a moldura do selo e enfeite da tela do terminal */
  .moldura-kizami { display: none !important; }
  .painel { min-height: 0; }
  .bloco { box-shadow: none; border: 0; }

  .folha-totais,
  .quadro-declaracao,
  .folha-assinatura { break-inside: avoid; page-break-inside: avoid; }

  /* a data inteira numa linha so, e o dia da semana embaixo. A fatia da
     data cresce de 6% para 8,5% ("22/09/2026" nao cabia e invadia o nome), e
     a das batidas, que tinha folga, cede o espaco. */
  #aba-batidas td:first-child { white-space: nowrap; word-break: normal; }
  #aba-batidas thead th:nth-child(1) { width: 8.5%; }
  #aba-batidas thead th:nth-child(5) { width: 22.5%; }
  /* palavra so quebra no espaco; "Administrativo" nao vira "Administrativ o" */
  #aba-batidas td, #aba-relatorios td { word-break: normal; overflow-wrap: break-word; }
  /* a rodela com as iniciais e enfeite de tela: no papel ela come a coluna */
  #aba-batidas .rodela, #aba-relatorios .rodela { display: none; }
}