/* Telas de administração — cadastro e painel.
   Mesma paleta do totem, mas densas: são lidas sentado, a 50 cm. */

:root {
  --fundo: #0C1013;
  --fundo-2: #141A1F;
  --fundo-3: #1B232A;
  --tinta: #EEF3F6;
  --tinta-2: #93A1AC;
  --tinta-3: #64727E;
  --linha: #232C34;
  --sinal: #E2A44A;
  --ok: #4FBE8B;
  --alerta: #E0705F;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;
}

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

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}

/* ---------------- cabeçalho ---------------- */

.barra {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--linha);
  background: var(--fundo-2);
  position: sticky;
  top: 0;
  z-index: 20;
}

.barra h1 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.barra nav { display: flex; gap: 4px; }

.barra nav a {
  padding: 6px 13px;
  border-radius: 4px;
  color: var(--tinta-2);
  text-decoration: none;
  font-size: 14px;
}
.barra nav a:hover { background: var(--fundo-3); color: var(--tinta); }
.barra nav a[aria-current] { background: var(--fundo-3); color: var(--sinal); }

.barra .quem { margin-left: auto; color: var(--tinta-3); font-size: 13px; }

/* ---------------- estrutura ---------------- */

main { padding: 26px 28px 80px; max-width: 1280px; margin: 0 auto; }

h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}

.sub { color: var(--tinta-2); margin-bottom: 22px; max-width: 70ch; }

section.bloco {
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 5px;
  padding: 22px 24px;
  margin-bottom: 18px;
}

.abas { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }

.abas button {
  padding: 8px 16px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--tinta-2);
  font: inherit;
  cursor: pointer;
}
.abas button:hover { color: var(--tinta); }
.abas button[aria-selected="true"] {
  background: var(--fundo-2);
  border-color: var(--linha);
  color: var(--sinal);
}

/* ---------------- formulários ---------------- */

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 18px;
}

label { display: block; }

label span {
  display: block;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 5px;
}

input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 4px;
  color: var(--tinta);
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--sinal);
}
input[type="time"], input[type="date"] { color-scheme: dark; }

.acoes { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

button.primario, button.secundario, button.perigo {
  padding: 10px 20px;
  border-radius: 4px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
button.primario { background: var(--sinal); color: #17110A; }
button.primario:hover { filter: brightness(1.08); }
button.secundario { background: var(--fundo-3); color: var(--tinta); border-color: var(--linha); }
button.secundario:hover { background: #232D35; }
button.perigo { background: #2A1512; color: #F0BDB4; border-color: #4A241E; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button:focus-visible { outline: 2px solid var(--sinal); outline-offset: 2px; }

/* ---------------- tabelas ---------------- */

.rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: 5px; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }

th, td {
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

thead th {
  background: var(--fundo-3);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-3);
  font-weight: 500;
  position: sticky;
  top: 0;
}

tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
tbody tr:last-child td { border-bottom: none; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
td .fraco { color: var(--tinta-3); }

.etiqueta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.etiqueta.facial { background: #12261E; color: var(--ok); }
.etiqueta.pin { background: #2A2113; color: var(--sinal); }
.etiqueta.ajuste { background: #221A2C; color: #B79BE0; }
.etiqueta.pessoal { background: #13233A; color: #8FB4F0; }
.etiqueta.tolerancia { background: var(--fundo-3); color: var(--tinta-2); }
.etiqueta.inativo { background: #2A1512; color: #E0A79C; }
.etiqueta.sem { background: var(--fundo-3); color: var(--tinta-3); }
.celula-pin { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.celula-pin .etiqueta { min-width: 3.2em; text-align: center; letter-spacing: 0.08em; }
.celula-pin button { margin-right: 0 !important; }

/* ---------------- avisos ---------------- */

.aviso {
  padding: 12px 16px;
  border-radius: 4px;
  border-left: 3px solid var(--sinal);
  background: #221A0F;
  color: #F2DBB5;
  margin: 14px 0;
}
.aviso.erro { border-left-color: var(--alerta); background: #2A1512; color: #F0BDB4; }
.aviso.bom { border-left-color: var(--ok); background: #0F2119; color: #B9E6CF; }

/* ---------------- login ---------------- */

.entrada {
  max-width: 380px;
  margin: 14vh auto;
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 32px;
}
.entrada h2 { margin-bottom: 6px; }
.entrada .sub { margin-bottom: 24px; }
.entrada label + label { margin-top: 14px; }

/* ---------------- cadastro facial ---------------- */

.captura {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 820px) { .captura { grid-template-columns: 1fr; } }

.visor-cadastro { position: relative; aspect-ratio: 4 / 3; }
.visor-cadastro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  background: var(--fundo-3);
}

.instrucao {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  text-wrap: balance;
}

.motivo-captura { color: var(--sinal); min-height: 1.6em; }

.trilho {
  height: 8px;
  background: var(--fundo-3);
  border-radius: 4px;
  overflow: hidden;
  margin: 22px 0 10px;
}
.trilho i {
  display: block;
  height: 100%;
  background: var(--sinal);
  transition: width 200ms ease;
}

.contagem { font-family: var(--mono); color: var(--tinta-2); font-size: 13px; }

.poses { display: flex; gap: 8px; margin-top: 18px; }
.poses div {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: 4px;
  font-size: 13px;
  color: var(--tinta-3);
}
.poses div.atual { border-color: var(--sinal); color: var(--sinal); }
.poses div.feita { border-color: #1E4635; color: var(--ok); }

.medidas {
  display: flex;
  gap: 26px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}
.medidas dt {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.medidas dd {
  font-family: var(--mono);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.medidas dd.ruim { color: var(--alerta); }
.medidas dd.bom { color: var(--ok); }

/* rostos capturados esperando os dados */

.pendentes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.pendente-cartao {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--sinal);
  border-radius: 5px;
  padding: 12px 14px;
}

.pendente-foto {
  width: 74px;
  height: 88px;
  flex: none;
  border-radius: 4px;
  overflow: hidden;
  background: var(--fundo-3);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--tinta-3);
  text-align: center;
}
.pendente-foto img { width: 100%; height: 100%; object-fit: cover; }

.pendente-corpo p { font-size: 13px; color: var(--tinta-3); margin-bottom: 10px; }

/* a ficha: foto do rosto à esquerda, campos à direita */

.ficha {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 760px) { .ficha { grid-template-columns: 1fr; } }

.ficha-foto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 5px;
  background: var(--fundo-3);
  border: 1px solid var(--linha);
}
.ficha-foto p {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--tinta-3);
  font-family: var(--mono);
}

.credenciais {
  display: flex;
  gap: 40px;
  margin: 20px 0 4px;
  flex-wrap: wrap;
}
.credenciais div span {
  display: block;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.credenciais div b {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ---------------- espelho ---------------- */

.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 18px;
}
.resumo div { background: var(--fundo-2); padding: 14px 16px; }
.resumo span {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 4px;
}
.resumo b {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.resumo b.positivo { color: var(--ok); }
.resumo b.negativo { color: var(--alerta); }

td.editavel { cursor: pointer; }
td.editavel:hover { background: var(--fundo-3); outline: 1px solid var(--sinal); }
tr.incompleta td { color: #E7C89A; }

dialog {
  background: var(--fundo-2);
  color: var(--tinta);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 24px;
  max-width: 460px;
  width: 92%;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
dialog h3 { font-size: 17px; margin-bottom: 4px; }

.cameras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.camera-cartao {
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 5px;
  overflow: hidden;
}
.camera-cartao.atual { border-color: var(--sinal); }
.camera-cartao.indisponivel { opacity: 0.55; }

.camera-cartao .previa {
  aspect-ratio: 4 / 3;
  background: var(--fundo-3);
  display: grid;
  place-items: center;
  color: var(--tinta-3);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}
.camera-cartao .previa img { width: 100%; height: 100%; object-fit: cover; }

.camera-cartao .corpo { padding: 14px 16px; }
.camera-cartao h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.camera-cartao p {
  font-size: 13px;
  color: var(--tinta-3);
  font-family: var(--mono);
  margin-bottom: 12px;
}

.vazio-lista { padding: 40px; text-align: center; color: var(--tinta-3); }

@media print {
  .barra, .abas, .acoes, .naoimprime { display: none !important; }
  body { background: #fff; color: #000; }
  section.bloco, .rolagem, .resumo div { background: #fff; border-color: #bbb; }
  th { background: #eee !important; color: #000; }
  td, th { border-color: #ccc; }
  .resumo { background: #ccc; }
}

/* ---------------- pedidos, frases e pessoa nova ---------------- */

textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 8px;
  resize: vertical;
}

textarea:focus { outline: 2px solid var(--sinal); outline-offset: 1px; }

dialog.largo { width: min(680px, 94vw); }

/* Embutido no SGR: a sidebar de lá já leva a Cadastro e Painel. */
.embutido .barra h1,
.embutido .barra nav { display: none; }

/* Cadastro pela câmera do navegador: a pessoa se vê como num espelho. */
.visor-cadastro video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  background: var(--fundo-3);
  transform: scaleX(-1);
}