/* Portal do colaborador e totem (mobile-first) — sobre os tokens do QORE DS */
body.portal { min-height: 100vh; padding-bottom: 70px; }
.topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--qt-raise); border-bottom: 1px solid var(--qt-line); }
.topo strong { display: block; font-size: 15px; font-weight: 800; }
.topo small { color: var(--qt-ink-3); font-weight: 600; }
.topo .sair { height: 30px; padding: 0 12px; border-radius: var(--qt-radius-sm); border: 1px solid var(--qt-line-2);
  background: var(--qt-raise); color: var(--qt-ink-2); font: 600 12px var(--qt-font); cursor: pointer; }
.portal-conteudo { max-width: 520px; margin: 0 auto; padding: 16px; }

.relogio-card { text-align: center; padding: 20px 16px; background: var(--qt-raise); border: 1px solid var(--qt-line);
  border-radius: var(--qt-radius-lg); box-shadow: var(--qt-sh-float); }
.relogio-card .ola { margin: 0; color: var(--qt-ink-2); font-weight: 600; }
.relogio { font-size: 52px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 6px 0 2px; }
.data-hoje { color: var(--qt-ink-3); font-weight: 600; text-transform: capitalize; }
.previsto { margin: 10px 0 0; color: var(--qt-ink-2); }

.btn-bater { display: block; width: 100%; height: 64px; margin: 18px 0 8px; border: 0; border-radius: var(--qt-radius-lg);
  background: var(--qt-accent); color: var(--qt-accent-ink); font: 800 19px var(--qt-font); letter-spacing: -.01em;
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--qt-accent) 70%, transparent); cursor: pointer; }
.btn-bater:active { transform: translateY(1px); }
.btn-bater:disabled { opacity: .6; }
.status { min-height: 20px; margin: 4px 0 0; text-align: center; font-weight: 700; }
.status.ok { color: var(--qt-ok); }
.status.erro { color: var(--qt-danger); }
.status.aviso { color: var(--qt-warn); }
.fila { padding: 8px 12px; border-radius: var(--qt-radius); background: var(--qt-warn-bg); color: var(--qt-warn); font-weight: 600; text-align: center; }

.camera-bloco { margin-top: 14px; border-radius: var(--qt-radius-lg); overflow: hidden; background: #000; }
.camera-bloco video { display: block; width: 100%; max-height: 320px; object-fit: cover; transform: scaleX(-1); }

.lista-hoje { margin-top: 18px; }
.lista-hoje ul, .lista-batidas { list-style: none; margin: 0; padding: 0; }
.lista-hoje li, .lista-batidas li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 8px;
  background: var(--qt-raise); border: 1px solid var(--qt-line); border-radius: var(--qt-radius); }
.lista-hoje li strong, .lista-batidas li strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.lista-hoje li span, .lista-batidas li span { flex: 1; color: var(--qt-ink-3); font-size: 12px; }
.lista-hoje li.vazio { color: var(--qt-ink-3); justify-content: center; }
.dia-titulo { margin: 16px 0 8px; font-weight: 800; text-transform: capitalize; color: var(--qt-ink-2); }

.abas { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--qt-raise); border-top: 1px solid var(--qt-line); }
.abas a { flex: 1; padding: 14px 6px; text-align: center; font-weight: 700; color: var(--qt-ink-3); text-decoration: none; }
.abas a.ativo { color: var(--qt-accent); box-shadow: inset 0 3px 0 var(--qt-accent); }

.termo h1 { font-size: 19px; margin-bottom: 2px; }
.termo-texto { margin: 14px 0; padding: 14px 16px; max-height: 52vh; overflow-y: auto; background: var(--qt-raise);
  border: 1px solid var(--qt-line); border-radius: var(--qt-radius); line-height: 1.6; color: var(--qt-ink-2); }
.termo-texto p { margin: 0 0 10px; }

/* Comprovante (tela e impressão) */
.comprovante { max-width: 460px; margin: 20px auto; padding: 22px; background: var(--qt-raise); border: 1px solid var(--qt-line);
  border-radius: var(--qt-radius-lg); box-shadow: var(--qt-sh-float); }
.comprovante h1 { font-size: 15px; text-transform: uppercase; letter-spacing: .03em; text-align: center; margin-bottom: 14px; }
.comprovante dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; margin: 0; }
.comprovante dt { color: var(--qt-ink-3); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.comprovante dd { margin: 0; font-weight: 600; word-break: break-word; }
.comprovante .hash { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.comprovante .acoes-comp { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
@media print { .acoes-comp, .topo, .abas { display: none !important; } .comprovante { box-shadow: none; border: 1px solid #999; } body { background: #fff; } }

/* Totem */
body.totem { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.totem-card { width: 100%; max-width: 460px; padding: 22px; text-align: center; background: var(--qt-raise);
  border: 1px solid var(--qt-line); border-radius: var(--qt-radius-lg); box-shadow: var(--qt-sh-float); }
.totem-card .relogio { font-size: 60px; }
.visor { height: 48px; margin: 10px 0; padding: 0 14px; border: 1px solid var(--qt-line-2); border-radius: var(--qt-radius);
  background: var(--qt-surface); font: 800 24px var(--qt-font); letter-spacing: .12em; display: flex; align-items: center; justify-content: center; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.teclado button { height: 62px; border: 1px solid var(--qt-line-2); border-radius: var(--qt-radius); background: var(--qt-raise);
  color: var(--qt-ink); font: 800 24px var(--qt-font); cursor: pointer; }
.teclado button:active { background: var(--qt-accent-soft); }
.teclado button.acao { font-size: 14px; color: var(--qt-ink-2); }
.totem-msg { min-height: 26px; font-weight: 800; font-size: 16px; }
.totem-msg.ok { color: var(--qt-ok); }
.totem-msg.erro { color: var(--qt-danger); }

.cards-portal { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dia-espelho em { font-style: normal; }
.dia-espelho.pendente { border-color: color-mix(in srgb, var(--qt-danger) 40%, transparent); }
.solicitacao span { line-height: 1.4; }
.solicitacao form { margin: 0; }
.portal-conteudo .formulario { padding: 14px; }

/* Totem: abas de identificação e mira da câmera */
.totem-abas { display: flex; gap: 6px; margin: 14px 0 0; padding: 4px; border-radius: var(--qt-radius); background: var(--qt-surface); }
.totem-abas button { flex: 1; height: 40px; border: 0; border-radius: var(--qt-radius-sm); background: none; color: var(--qt-ink-2);
  font: 700 14px var(--qt-font); cursor: pointer; }
.totem-abas button.ativo { background: var(--qt-raise); color: var(--qt-accent-hover); box-shadow: var(--qt-sh-sm); }
.camera-bloco { position: relative; }
.mira { position: absolute; inset: 0; pointer-events: none; }
.mira.facial::after { content: ''; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%);
  border: 3px solid rgba(255,255,255,.85); border-radius: 50%; }
.mira.qrcode::after { content: ''; position: absolute; left: 50%; top: 50%; width: 48%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 3px dashed rgba(255,255,255,.85); border-radius: 14px; }
.dica-totem { min-height: 20px; margin: 10px 0 0; font-weight: 600; }