:root {
    --bg: #0b0c0f;
    --card: #12151a;
    --muted: #8a8f98;
    --ok: #22c55e;
    --warn: #eab308;
    --err: #ef4444;
    --ring: #1f2937;
}

.wrap {
    min-width: 90%;
    margin: 24px auto;
    padding: 0 16px
}

.card {
    margin-top: 15vh;
    background: var(--card);
    border: 1px solid var(--ring);
    border-radius: 16px;
    padding: 16px
}

.card span {
    color: white;
    font-size: 5vw;
}

.row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap
}

.btn {
    appearance: none;
    border: 0;
    border-radius: 3px;
    background: #2563eb;
    color: #fff;
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer
}

.btn:disabled {
    opacity: .6;
    cursor: not-allowed
}

.ghost {
    background: #334155
}

.muted {
    color: var(--muted)
}

video,
canvas {
    width: 100%;
    max-height: 360px;
    border-radius: 5px;
    background: #0f1115;
    box-shadow: 0px 0px 10px #222;
    margin-top: 2vw;
    margin-bottom: 2vw;
}

.status {
    margin-top: 8px;
    font-weight: 600
}

.status.ok {
    color: var(--ok)
}

.status.warn {
    color: var(--warn)
}

.status.err {
    color: var(--err)
}

.voltar {
    width: 5vw;
}

/* Ajustes para modo horizontal (landscape) */
@media screen and (orientation: landscape),
screen and (min-aspect-ratio: 13/9) {

    .card span {
        font-size: 2vw;
    }

    .voltar {
        width: 3vw;
    }
}

/* Registo de ponto: autorizações obrigatórias (câmera e localização) antes do PIN — cartão branco do login */
.ponto-autorizacao { align-items: stretch; text-align: left; }
.ponto-autorizacao h2 { margin: 0; font-size: 20px; color: #1f2a31; text-align: center; }
.ponto-autorizacao > p { margin: 0; color: #5a6875; line-height: 1.5; text-align: center; }
.ponto-permissoes { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ponto-permissoes li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e3e7ea; border-radius: 12px; background: #f6f8f9; color: #2f3a42; }
.ponto-permissoes li > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ponto-permissoes b { color: #1f2a31; }
.ponto-permissoes small { color: #6f7b84; font-size: 12px; }
.ponto-perm-icone { font-size: 22px; }
.ponto-perm-estado { padding: 3px 10px; border-radius: 999px; background: #e3e7ea; color: #3b4650; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ponto-permissoes li[data-estado="ok"] { border-color: #86efac; background: #f0fdf4; }
.ponto-permissoes li[data-estado="ok"] .ponto-perm-estado { background: #16a34a; color: #fff; }
.ponto-permissoes li:is([data-estado="negada"], [data-estado="gps"], [data-estado="indisponivel"]) { border-color: #fca5a5; background: #fef2f2; }
.ponto-permissoes li:is([data-estado="negada"], [data-estado="gps"], [data-estado="indisponivel"]) .ponto-perm-estado { background: #dc2626; color: #fff; }
.ponto-ajuda { padding: 12px 14px; border: 1px solid #f0c36d; border-radius: 12px; background: #fff8e6; color: #5f4500; font-size: 13px; line-height: 1.55; }
.ponto-ajuda ul { margin: 8px 0; padding-left: 18px; }
.ponto-ajuda li + li { margin-top: 6px; }
.ponto-autorizado { color: #15803d !important; font-weight: 600; }

/* Comprovativo da marcação de ponto (recibo) */
.ticketPonto { --tk-cor: #1f7a4d; --tk-fundo: #e3f3ea;
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: min(340px, 82vw); margin: 14px auto; padding: 26px 22px 18px; box-sizing: border-box;
    background: #fff; border-radius: 16px; color: #2f3a42; text-align: center; font-family: inherit; }
.ticket-selo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
    background: var(--tk-cor); color: #fff; box-shadow: 0 0 0 8px var(--tk-fundo); animation: ticket-selo .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.ticket-selo svg path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: ticket-check .35s .3s ease-out forwards; }
@keyframes ticket-selo { from { transform: scale(.4); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes ticket-check { to { stroke-dashoffset: 0 } }
.ticket-estado { margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6f7b84; }
.ticket-tipo { padding: 4px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--tk-fundo); color: var(--tk-cor); }
.ticket-entrada { --tk-cor: #1f7a4d; --tk-fundo: #e3f3ea; }
.ticket-saida-almoco { --tk-cor: #9a6b00; --tk-fundo: #fff4d6; }
.ticket-retorno-almoco { --tk-cor: #1f6fb2; --tk-fundo: #e2f0fb; }
.ticket-saida { --tk-cor: #b42c2c; --tk-fundo: #fde4e4; }
.ticket-neutro { --tk-cor: #4c5761; --tk-fundo: #eef1f3; }
.ticket-hora { margin-top: 4px; font-size: 52px; font-weight: 700; line-height: 1; color: #1f2a31; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ticket-hora small { font-size: 22px; font-weight: 600; color: #8a959d; }
.ticket-dois-pontos { margin: 0 1px; color: #b3bcc2; }
.ticket-data { font-size: 14px; color: #5a6875; }
/* Linha picotada com recortes laterais, como um recibo. */
.ticket-corte { position: relative; width: calc(100% + 44px); margin: 14px 0 8px; border-top: 2px dashed #dfe4e8; }
.ticket-corte::before, .ticket-corte::after { content: ''; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: #ebebeb; }
.ticket-corte::before { left: -10px; } .ticket-corte::after { right: -10px; }
.ticket-detalhes { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; }
.ticket-detalhes > div { display: flex; justify-content: space-between; gap: 12px; text-align: left; }
.ticket-detalhes dt { color: #8a959d; font-size: 12.5px; }
.ticket-detalhes dd { margin: 0; font-size: 14px; font-weight: 600; color: #2f3a42; text-align: right; overflow-wrap: anywhere; }
.ticket-nota { margin: 8px 0 0; font-size: 11.5px; color: #9aa4ab; }
.ticket-avisos { width: 100%; margin-top: 10px; padding: 10px 12px; box-sizing: border-box; border: 1px solid #f0c36d; border-radius: 10px; background: #fff8e6; color: #5f4500; font-size: 12.5px; line-height: 1.5; text-align: left; }
.ticket-avisos ul { margin: 6px 0 0; padding-left: 18px; }
.ticket-avisos li + li { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .ticket-selo, .ticket-selo svg path { animation: none; stroke-dashoffset: 0; } }