/* O atributo [hidden] do HTML é display:none por padrão do user-agent, mas
   QUALQUER regra com display: (ex.: .bt-faceid{display:flex}) o sobrepõe — aí
   um botão marcado hidden vazava na tela. Esta regra global devolve a prioridade
   ao [hidden]; pra MOSTRAR algo escondido, o JS remove o atributo (el.hidden=false). */
[hidden] { display: none !important; }

:root {
  --dourado: #C9A961;
  --escuro: #1a1a1a;
  --cinza: #6b6b6b;
  --fundo: #f5f2ec;
  --erro: #c0392b;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
body { background: var(--fundo); min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 16px; }
.card { background: #fff; border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,.08); padding: 24px; width: 100%; max-width: 420px; margin-top: 4vh; }
.topo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.logo-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--dourado); }
h1 { font-size: 1.3rem; color: var(--escuro); font-weight: 600; }
h1 span { color: var(--dourado); }
h2 { font-size: 1.15rem; margin-bottom: 10px; color: var(--escuro); }
.hint { color: var(--cinza); margin-bottom: 12px; }
.mini { font-size: .78rem; color: var(--cinza); margin-top: 10px; }
.centro { text-align: center; margin-top: 18px; }
.erro { color: var(--erro); margin-top: 10px; font-size: .9rem; }
.pin-display { font-size: 2rem; letter-spacing: 12px; text-align: center; margin: 10px 0 18px; color: var(--escuro); min-height: 2.4rem; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.teclado button { font-size: 1.5rem; padding: 16px 0; border: none; border-radius: 14px; background: var(--fundo); color: var(--escuro); cursor: pointer; }
.teclado button:active { background: #e8e2d4; }
.tecla-acao { font-weight: 600; }
.tecla-acao.ok { background: var(--dourado); color: #fff; }
.primeiro { margin-top: 22px; font-size: .9rem; color: var(--escuro); }
.primeiro summary { color: var(--dourado); font-weight: 600; cursor: pointer; }
.primeiro ol { margin: 10px 0 0 20px; display: grid; gap: 6px; }
.ic { display: inline-block; border: 1px solid var(--cinza); border-radius: 4px; padding: 0 4px; font-size: .8rem; }
.botoes-ponto { display: grid; gap: 12px; }
.bt-ponto { font-size: 1.1rem; padding: 16px 18px; border: 2px solid var(--fundo); border-radius: 14px; background: var(--fundo); color: var(--escuro); cursor: pointer; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.hora-mark { font-size: .82rem; font-weight: 700; color: #1e7a1e; white-space: nowrap; }
.hora-mark:empty { display: none; }
.bt-ponto.sugerido { border-color: var(--dourado); background: #fdf8ec; font-weight: 700; }
.bt-largo { width: 100%; padding: 16px; font-size: 1.05rem; border: none; border-radius: 14px; background: var(--dourado); color: #fff; font-weight: 600; cursor: pointer; margin-top: 12px; }
.link { background: none; border: none; color: var(--cinza); margin-top: 16px; cursor: pointer; font-size: .9rem; }
.okzao { font-size: 4rem; text-align: center; margin: 18px 0; }
label { display: block; margin: 12px 0 4px; font-size: .92rem; color: var(--escuro); }
input, select { width: 100%; padding: 12px; font-size: 1.1rem; border: 1px solid #ddd; border-radius: 10px; }
/* admin */
/* Navegação do painel — grade alinhada premium: todas as abas visíveis em colunas
   regulares, aba ativa elevada (fundo branco + acento dourado sutil). */
.nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 16px 0 22px;
       padding: 5px; background: var(--fundo); border-radius: 14px; }
.voltar { display: inline-block; text-decoration: none; color: var(--cinza); font-size: .9rem; margin-bottom: 10px; }
.nav a { text-decoration: none; color: var(--cinza); background: transparent; padding: 10px 6px;
         border-radius: 9px; font-size: .85rem; font-weight: 500; text-align: center; white-space: nowrap;
         transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.nav a:hover { color: var(--escuro); background: rgba(26,26,26,.045); }
.nav a.ativo { background: #fff; color: var(--escuro); font-weight: 600;
               box-shadow: 0 1px 2px rgba(26,26,26,.07), inset 0 0 0 1px rgba(201,169,97,.5); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 10px; }
th, td { padding: 8px 6px; border-bottom: 1px solid #eee; text-align: left; }
th { color: var(--cinza); font-weight: 600; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .78rem; background: var(--fundo); }
.badge.alerta { background: #fdecd2; color: #8a6d1a; }
.bt-mini { padding: 6px 10px; border: none; border-radius: 8px; background: var(--dourado); color: #fff; cursor: pointer; font-size: .82rem; }
.bt-mini.cinza { background: var(--cinza); }
.msg-ok { background: #e8f6e8; color: #1e7a1e; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: .9rem; }
.msg-erro { background: #fdecea; color: #a4241a; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: .9rem; }
.form-afastamento { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 8px; }
.form-afastamento label { display: flex; flex-direction: column; font-size: .82rem; gap: 3px; }
.lista-afastamentos { list-style: none; padding: 0; margin: 0 0 8px; }
.lista-afastamentos li { padding: 4px 0; }
.pin-novo { background: #fdf8ec; border: 1px dashed var(--dourado); padding: 12px; border-radius: 10px; margin-bottom: 14px; font-size: .95rem; }
.pin-novo b { font-size: 1.3rem; letter-spacing: 3px; }
.modal-convite { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.modal-convite .caixa { background: #fff; border-radius: 16px; padding: 22px; max-width: 380px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.3); text-align: center; }
.modal-convite h3 { margin: 0 0 8px; color: var(--escuro); font-size: 1.2rem; }
.modal-convite .passo { margin: 0 0 4px; font-size: .95rem; color: var(--escuro); }
.modal-convite .mini { font-size: .8rem; color: var(--cinza); margin-top: 10px; }
.modal-convite .mini b { font-size: 1.1rem; letter-spacing: 2px; }
.bt-whatsapp { display: block; width: 100%; box-sizing: border-box; background: #25D366; color: #fff; font-size: 1.1rem; font-weight: 600; padding: 14px; border-radius: 12px; text-decoration: none; margin: 14px 0 8px; }
.modal-convite .campo-link { width: 100%; box-sizing: border-box; margin: 8px 0; padding: 8px; border: 1px solid var(--fundo); border-radius: 8px; font-size: .82rem; }
.modal-convite .bt-fechar { display: inline-block; margin-top: 14px; color: var(--escuro); text-decoration: underline; }
form.inline { display: inline; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--fundo); border-radius: 12px; padding: 12px; text-align: center; }
.kpi b { font-size: 1.5rem; display: block; color: var(--escuro); }
.kpi span { font-size: .78rem; color: var(--cinza); }

/* admin: card mais largo que o do funcionário */
.card.admin { max-width: 760px; }

/* responsivo — desktop: painel admin respira; tela de ponto continua um card central */
@media (min-width: 900px) {
  body { padding: 32px 24px; background: linear-gradient(180deg, #f7f4ee 0%, var(--fundo) 60%); }
  .card { margin-top: 6vh; }            /* tela de ponto: card centralizado, elegante */
  .card.admin { max-width: 1060px; padding: 32px 40px; margin-top: 3vh; }
  .card.admin table { font-size: .95rem; }
  .card.admin th, .card.admin td { padding: 10px 8px; }
  /* formulários longos em 2 colunas; títulos, avisos e botões ocupam a linha toda */
  form.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
  form.duas-colunas h2, form.duas-colunas p, form.duas-colunas .mini,
  form.duas-colunas .bt-largo, form.duas-colunas .bt-mini { grid-column: 1 / -1; }
}

/* responsivo — celular (admin e tela do funcionário) */
@media (max-width: 480px) {
  body { padding: 8px; align-items: stretch; }
  .card { padding: 16px; border-radius: 16px; margin-top: 2vh; max-width: 100% !important; }
  h1 { font-size: 1.1rem; }
  h2 { font-size: 1.05rem; }
  .nav { gap: 4px; padding: 4px; }
  .nav a { padding: 9px 4px; font-size: .8rem; }
  /* tabela larga não estoura a tela: rola na horizontal dentro do card */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .kpis { gap: 6px; }
  .kpi { padding: 8px; }
  .kpi b { font-size: 1.2rem; }
  input, select { font-size: 16px; }  /* evita zoom automático do iOS ao focar */
}

/* Ficha do funcionário (visualização) — mobile-first */
.ficha h3 { margin: 18px 0 6px; font-size: .95rem; color: var(--escuro); text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.ficha dl { display: grid; grid-template-columns: 1fr; gap: 2px 14px; background: #fafafa; border-radius: 12px; padding: 12px 14px; }
.ficha dt { font-size: .8rem; color: #888; margin-top: 8px; }
.ficha dt:first-child { margin-top: 0; }
.ficha dd { font-size: 1.02rem; margin: 0; word-break: break-word; }
@media (min-width: 600px) {
  .ficha dl { grid-template-columns: 180px 1fr; align-items: baseline; }
  .ficha dt { margin-top: 0; padding: 4px 0; }
  .ficha dd { padding: 4px 0; }
}
.acoes-ficha { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.acoes-ficha form { margin: 0; }

/* Telas de autenticação (entrada, login, signup): logo no topo + conteúdo
   verticalmente centrado — mobile-first, o app iOS abre direto aqui. */
body.pagina-auth { flex-direction: column; align-items: center; justify-content: center; min-height: 100svh; }
.logo-login { width: 120px; height: 120px; margin-bottom: 14px; border-radius: 27px; box-shadow: 0 6px 20px rgba(0,0,0,.10); }
body.pagina-auth .card { margin-top: 0; }
@media (max-width: 480px) {
  body.pagina-auth { align-items: center; padding: 16px; }
  body.pagina-auth .card { margin-top: 0; }
  .logo-login { width: 96px; height: 96px; border-radius: 22px; }
}

/* Tela de escolha patrão/funcionária */
.bt-escolha { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left; padding: 16px 18px; margin-top: 12px; font-size: 1.05rem; border: 2px solid var(--fundo); border-radius: 14px; background: var(--fundo); color: var(--escuro); cursor: pointer; }
.bt-escolha:hover, .bt-escolha:focus-visible { border-color: var(--dourado); background: #fdf8ec; }
.bt-escolha small { font-size: .8rem; color: var(--cinza); font-weight: 400; }

/* ============================================================
   Telas de autenticação — capricho fino (login + signup)
   ============================================================ */
.card-auth { max-width: 400px; padding: 28px 28px 24px; }
.topo-auth { margin-bottom: 20px; }
.topo-auth h1 { font-size: 1.45rem; font-weight: 700; color: var(--escuro); letter-spacing: -.01em; line-height: 1.2; }
.sub-auth { margin-top: 6px; color: var(--cinza); font-size: .95rem; line-height: 1.4; }
.sub-auth .marca-nome { color: var(--dourado); font-weight: 600; }

/* Campos: rótulo discreto acima, input com foco dourado e área de toque ≥48px */
.form-auth { margin-top: 4px; }
.campo { display: block; margin: 0 0 14px; }
.campo-rotulo { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 600; color: var(--escuro); }
.campo-rotulo small { font-weight: 400; color: var(--cinza); }
.form-auth input { width: 100%; padding: 13px 14px; font-size: 1rem; border: 1.5px solid #e3ddcf; border-radius: 12px; background: #fcfbf8; transition: border-color .15s, box-shadow .15s, background .15s; }
.form-auth input::placeholder { color: #b3ab98; }
.form-auth input:hover { border-color: #d6cdb8; }
.form-auth input:focus { outline: none; border-color: var(--dourado); background: #fff; box-shadow: 0 0 0 3px rgba(201,169,97,.18); }

.rodape-auth { margin-top: 18px; text-align: center; font-size: .92rem; color: var(--cinza); }
.rodape-auth a { color: var(--cinza); text-decoration: none; }
.rodape-auth a b { color: var(--dourado); font-weight: 700; }
.rodape-auth a:hover b { text-decoration: underline; }

/* Botão Face ID — secundário, não compete com o "Entrar" dourado */
.bt-faceid { background: var(--fundo); color: var(--escuro); display: flex; align-items: center; justify-content: center; gap: 8px; }
.bt-faceid:hover { background: #ece6d8; }

/* ============================================================
   Login social (Apple/Google) — padrão OFICIAL de cada marca
   Apple = HIG (preto). Google = Google branding (branco + G colorido).
   ============================================================ */
.social-login { display: flex; flex-direction: column; gap: 10px; margin: 0 0 4px; }
.bt-social {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 0 16px;
  border-radius: 12px; border: 1px solid transparent;
  font-size: 1rem; font-weight: 500; line-height: 1;
  text-align: center; text-decoration: none; cursor: pointer;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  transition: box-shadow .15s, background .15s, border-color .15s, opacity .15s;
}
.bt-social .bt-social-logo { flex: 0 0 auto; }
.bt-social .bt-social-txt { white-space: nowrap; }
.bt-social:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }
.bt-social:disabled { opacity: .6; cursor: default; }

/* Apple — HIG: fundo preto, glifo+texto branco, raio coerente */
.bt-social.bt-apple { background: #000; color: #fff; }
.bt-social.bt-apple .bt-social-logo { margin-top: -2px; }  /* maçã ótica centrada */
.bt-social.bt-apple:hover { background: #111; }
.bt-social.bt-apple:active { background: #1f1f1f; }

/* Google — branding: fundo branco, borda neutra, texto #1f1f1f, G colorido */
.bt-social.bt-google { background: #fff; color: #1f1f1f; border-color: #747775; }
.bt-social.bt-google:hover { box-shadow: 0 1px 3px rgba(60,64,67,.16), 0 1px 2px rgba(60,64,67,.12); background: #f8faff; }
.bt-social.bt-google:active { background: #f1f5ff; }

/* Divisor "ou" — fino, elegante, alinhado com a marca creme */
.divisor-ou { display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; color: var(--cinza); font-size: .78rem; text-transform: lowercase; letter-spacing: .04em; }
.divisor-ou::before, .divisor-ou::after { content: ""; flex: 1; height: 1px; background: #e7e1d4; }

@media (max-width: 480px) {
  .card-auth { padding: 22px 20px; }
  .topo-auth h1 { font-size: 1.3rem; }
}

/* ============================================================
   Hero da tela inicial de escolha (entrada.html) — arte de marca
   (logo + foto + tagline já embutidas na imagem). Substitui a logo
   pequena no topo. 100% no mobile, centralizada e contida no desktop.
   ============================================================ */
.hero-escolha {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto 18px;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
@media (max-width: 480px) {
  .hero-escolha { max-width: 100%; border-radius: 16px; }
}

/* Visualizador de relatório no app (Voltar sempre presente) */
.voltar-relatorio { display: inline-block; margin: 4px 0 12px; padding: 9px 14px; background: var(--fundo); border-radius: 10px; color: var(--escuro); text-decoration: none; font-weight: 600; font-size: .9rem; }
.pdf-viewer { width: 100%; height: 75vh; border: 1px solid #e6e0d4; border-radius: 12px; }