/* Área do Fiscal — mesma identidade visual do Flow.
   Paleta, fontes (Syne / DM Sans) e cabeçalho copiados de css/style.css
   e assets/header.php, para o fiscal reconhecer que é o mesmo sistema.
   Layout pensado para celular primeiro: é onde isso será preenchido.

   Tema claro fixo, por decisão do cliente: o fiscal costuma abrir isso
   sob luz forte, no pátio da escola no dia da prova. */

:root{
  --bg:#fff9f1; --surf:#fff; --surf2:#f9f8f5; --surf3:#f2f1ec;
  --bdr:#e6e4dd; --bdr2:#d0cec5;
  --txt:#18170f; --txt2:#6b6a62; --txt3:#a09e96;
  --acc:#1a56db; --acc-bg:#eef3ff;
  --grn:#15803d; --amb:#b45309; --red:#b91c1c; --red-bg:#fef2f2;
  --hdr:#0f172a;
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.5;
}

/* ── Cabeçalho (mesmo do Flow) ───────────────────────────────────── */
.app-header{
  position:fixed; top:0; left:0; right:0; z-index:200; height:52px;
  background:var(--hdr);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  display:flex; align-items:center; gap:10px; padding:0 18px;
}
.hdr-brand{
  font-family:'Syne',sans-serif; font-size:16px; font-weight:800;
  letter-spacing:-.03em; color:#fff;
}
.hdr-sub{
  font-size:12.5px; font-weight:500; color:rgba(255,255,255,.6);
  padding-left:10px; border-left:1px solid rgba(255,255,255,.15);
}
.hdr-sair{
  margin-left:auto; padding:6px 12px; border:none; border-radius:6px;
  background:transparent; color:rgba(255,255,255,.6);
  font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:500; cursor:pointer;
  transition:background .15s,color .15s;
}
.hdr-sair:hover{background:rgba(255,255,255,.1); color:#fff}

main{max-width:620px; margin:0 auto; padding:68px 16px 24px}

/* ── Blocos ──────────────────────────────────────────────────────── */
.cartao{
  background:var(--surf); border:1px solid var(--bdr); border-radius:10px;
  padding:20px; margin-bottom:14px;
}

h1{font-family:'Syne',sans-serif; font-size:20px; font-weight:700; letter-spacing:-.02em; margin:0 0 6px}
h2{font-family:'Syne',sans-serif; font-size:14px; font-weight:600; margin:24px 0 4px}
hr{border:0; border-top:1px solid var(--bdr); margin:22px 0}

label{
  display:block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--txt3); margin:14px 0 5px;
}

input,select{
  width:100%; padding:11px 12px;
  font-family:inherit; font-size:16px;   /* 16px evita o zoom automático do iOS */
  border:1px solid var(--bdr); border-radius:8px;
  background:var(--surf); color:var(--txt);
}
input:focus,select:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-bg)}
input:disabled{background:var(--surf3); color:var(--txt2)}

.dupla{display:flex; gap:10px}
.dupla > div{flex:1; min-width:0}
.dupla > .uf{flex:0 0 84px}

button{font-family:inherit; cursor:pointer}

.principal,.secundario{
  width:100%; margin-top:20px; padding:13px; border-radius:8px;
  border:1px solid transparent; font-weight:700; font-size:14px;
  letter-spacing:.01em;
}
.principal{background:var(--acc); color:#fff}
.principal:hover{filter:brightness(1.08)}
.principal:disabled{background:var(--txt3); cursor:progress}
.secundario{background:var(--surf); color:var(--acc); border-color:var(--acc)}

.link{background:none; border:0; color:var(--acc); padding:0; font-weight:700; text-decoration:underline}

.ajuda{font-size:12.5px; color:var(--txt3); margin:8px 0}
.ok-txt{color:var(--grn)}

/* Cadastro feito por recrutador: a responsabilidade pelos dados é de
   quem cadastrou, e o fiscal precisa enxergar isso sem esforço. */
.destaque{
  color:var(--red); background:var(--red-bg); border-left:3px solid var(--red);
  padding:10px 12px; border-radius:0 6px 6px 0; font-size:12.5px;
}

.abas{display:flex; gap:8px; margin-bottom:12px}
.aba{
  flex:1; padding:11px; border:1px solid var(--bdr); border-radius:8px;
  background:var(--surf); color:var(--txt2); font-weight:600; font-size:13px;
}
.aba.ativa{background:var(--acc); color:#fff; border-color:var(--acc)}

.trabalho{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--bdr)}
.trabalho:first-child{border-top:0}
.trabalho .data{
  flex:0 0 auto; font-family:'DM Mono',monospace; font-weight:700; font-size:12px;
  color:var(--acc); background:var(--acc-bg); padding:6px 8px; border-radius:6px; white-space:nowrap;
}
.trabalho .corpo{flex:1; min-width:0}
.trabalho .situacao{flex:0 0 auto; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.trabalho .situacao.presente{color:var(--grn)}
.trabalho .situacao.ausente{color:var(--red)}
.trabalho .situacao.pendente{color:var(--amb)}

#aviso{
  position:fixed; left:16px; right:16px; bottom:16px; max-width:588px;
  margin:0 auto; padding:13px 16px; border-radius:8px; font-size:14px;
  color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.3); z-index:300;
}
#aviso.ok{background:var(--grn)}
#aviso.erro{background:var(--red)}

/* Botão que na verdade é link (usado na tela de nova senha) */
.principal.botao{
  display:block; text-align:center; text-decoration:none; width:100%;
}

/* Caixa do desafio da Cloudflare.

   A altura reservada nao e enfeite: o widget desenha a si mesmo dentro
   de um shadow DOM, depois que o script de fora chega. Sem espaco
   guardado, ele empurra o botao Entrar para baixo bem na hora em que a
   pessoa vai clicar.

   (Cheguei a tirar esta reserva por achar que o modo Managed nao
   desenhava nada. Desenha: 72px, so que em shadow root, que nao aparece
   numa busca por iframe. Reservar continua certo.) */
.ts-caixa {
  min-height: 65px;
  margin: 4px 0 14px;
}