/* Ponteiro: app do funcionário (celular primeiro) */
#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
.carregando-tela { flex: 1; display: grid; place-items: center; }
.carregando-tela .carregando, .carregando { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--texto-3); border-right-color: transparent; animation: gira .7s linear infinite; display: inline-block; }

/* ---------- entrada (login) ---------- */
.porta { flex: 1; display: flex; flex-direction: column; padding: calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)); gap: 28px; }
.porta .topo { display: flex; justify-content: space-between; align-items: center; }
.porta .chamada { margin-top: 6vh; display: grid; gap: 12px; }
.porta .chamada h1 { font-size: clamp(38px, 11vw, 50px); letter-spacing: -.04em; line-height: 1; }
.porta .chamada h1 em { font-style: normal; color: var(--vermelhao); }
.porta .chamada p { color: var(--texto-2); font-size: 17px; max-width: 32ch; }
.porta form { display: grid; gap: 16px; }
.primeira-vez { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); }
.primeira-vez span { font-weight: 600; white-space: nowrap; }
.porta .rodape { margin-top: auto; font-size: 13px; color: var(--texto-3); display: flex; gap: 14px; flex-wrap: wrap; }
.link-btn { background: none; border: 0; padding: 0; color: var(--texto-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px; justify-self: start; }
.nota { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--raio); background: var(--superficie-2); color: var(--texto-2); font-size: 14px; }
.nota svg { color: var(--texto); margin-top: 1px; }

/* ---------- etapas (primeiro acesso) ---------- */
.etapa-ind { display: flex; gap: 6px; }
.etapa-ind span { height: 4px; flex: 1; border-radius: 4px; background: var(--linha); }
.etapa-ind span.feito { background: var(--vermelhao); }
.privacidade { display: grid; gap: 14px; }
.privacidade li { display: flex; gap: 12px; align-items: flex-start; }
.privacidade ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.privacidade li svg { color: var(--ok); margin-top: 2px; }

/* ---------- casca principal ---------- */
.casca { flex: 1; display: flex; flex-direction: column; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.barra-topo { display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 20px 6px; }
.barra-topo .empresa { font-size: 13px; color: var(--texto-2); font-weight: 600; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abas { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(100%, 480px); display: grid; grid-template-columns: repeat(3, 1fr); background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--linha); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); z-index: 20; }
.abas button { background: none; border: 0; display: grid; justify-items: center; gap: 2px; padding: 8px 0; font-size: 12px; font-weight: 600; color: var(--texto-3); cursor: pointer; border-radius: 12px; }
.abas button svg { width: 24px; height: 24px; }
.abas button[aria-current="page"] { color: var(--texto); }
.abas button[aria-current="page"] svg { color: var(--vermelhao); }
.vista { padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 20px; animation: entra .35s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }

/* ---------- relógio ---------- */
.saudacao { font-size: 16px; color: var(--texto-2); margin-top: 10px; }
.relogio { display: grid; gap: 4px; }
.relogio .hm { font-family: var(--fonte-display); font-weight: 700; font-size: clamp(76px, 25vw, 112px); line-height: .9; letter-spacing: -.055em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; }
.relogio .hm .s { font-family: var(--fonte-num); font-size: .26em; letter-spacing: 0; color: var(--vermelhao); margin-left: .35em; font-weight: 500; transform: translateY(-.15em); }
.relogio .dia { font-size: 17px; color: var(--texto-2); text-transform: lowercase; }
.relogio .dia::first-letter { text-transform: uppercase; }

.estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.estado .horas { font-size: 15px; color: var(--texto-2); }
.estado .horas b { color: var(--texto); font-weight: 650; }

.local { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto-2); padding: 12px 14px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); }
.local svg { color: var(--texto-3); }
.local.ok svg { color: var(--ok); }
.local.ruim svg { color: var(--alerta); }
.local.bloq svg { color: var(--perigo); }
.local .txt { flex: 1; min-width: 0; }
.local .btn { margin-left: auto; }

/* linha do tempo de hoje */
.dia-linha h2, .secao-t { font-size: 15px; font-family: var(--fonte); font-weight: 650; letter-spacing: 0; color: var(--texto); margin-bottom: 10px; }
.tempo { list-style: none; margin: 0; padding: 0; display: grid; }
.tempo li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; min-height: 46px; position: relative; }
.tempo li::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--linha); }
.tempo li:first-child::before { top: 50%; }
.tempo li:last-child::before { bottom: 50%; }
.tempo li:only-child::before { display: none; }
.tempo .ponto { width: 22px; height: 22px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--texto); position: relative; z-index: 1; display: grid; place-items: center; }
.tempo .ponto svg { width: 12px; height: 12px; }
.tempo li:last-child .ponto { background: var(--texto); color: var(--papel); }
.tempo .t { font-weight: 550; }
.tempo time { font-family: var(--fonte-num); font-size: 15px; color: var(--texto); }
.vazio { padding: 22px 18px; border: 1.5px dashed var(--linha); border-radius: var(--raio); color: var(--texto-2); font-size: 15px; display: grid; gap: 4px; }
.vazio b { color: var(--texto); }

/* botão principal de bater ponto */
.bater { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); display: grid; gap: 10px; margin-top: auto; padding-top: 8px; z-index: 5; }
.bater-btn {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 76px; padding: 0 22px; border: 0; border-radius: 22px;
  background: var(--vermelhao); color: var(--sobre-vermelhao); cursor: pointer; text-align: left;
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 12px 24px -14px rgb(21 23 28 / .45);
  transition: transform .2s var(--ease), background-color .2s;
}
.bater-btn:hover { background: var(--vermelhao-forte); }
.bater-btn:active { transform: scale(.98); }
.bater-btn:disabled { opacity: .55; cursor: not-allowed; }
.bater-btn svg { width: 32px; height: 32px; }
.bater-btn .tx { display: grid; line-height: 1.2; }
.bater-btn .tx b { font-family: var(--fonte-display); font-size: 22px; letter-spacing: -.02em; }
.bater-btn .tx span { font-size: 14px; opacity: .88; font-weight: 500; }
.bater-btn .seta { margin-left: auto; width: 24px; height: 24px; }
.alternativas { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 14px; color: var(--texto-2); }

/* ---------- câmera (leitura do rosto) ---------- */
.camera { position: fixed; inset: 0; z-index: 50; background: #0f1013; color: #f2f3ef; display: flex; flex-direction: column; align-items: center; padding: calc(16px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)); animation: abre .35s var(--ease); }
@keyframes abre { from { opacity: 0; } }
.camera .topo { width: 100%; max-width: 480px; display: flex; justify-content: space-between; align-items: center; }
.camera .topo .btn { --bg: rgb(255 255 255 / .08); --fg: #f2f3ef; --bd: transparent; }
.camera .titulo { font-family: var(--fonte-display); font-weight: 650; font-size: 17px; }
.visor { position: relative; width: min(78vw, 320px); aspect-ratio: 1; margin: 7vh 0 28px; }
.visor video { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: cover; border-radius: 50%; transform: scaleX(-1); background: #1b1d22; }
.visor svg.anel { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.visor .trilho { stroke: rgb(255 255 255 / .12); }
.visor .progresso { stroke: #ff6a3d; transition: stroke-dashoffset .45s var(--ease), stroke .3s; }
.visor.ok .progresso { stroke: #4cc58b; }
.visor .marca-d { position: absolute; inset: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); pointer-events: none; }
.camera .passo { font-family: var(--fonte-display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; text-align: center; min-height: 1.2em; }
.camera .dica { color: #a9acb3; text-align: center; font-size: 15px; max-width: 30ch; margin-top: 8px; min-height: 3em; }
.camera .rodape-cam { margin-top: auto; display: flex; gap: 8px; align-items: center; color: #8d9098; font-size: 13px; text-align: center; max-width: 34ch; }
.camera .rodape-cam svg { color: #4cc58b; flex: none; }

/* ---------- sucesso ---------- */
.registrado { position: fixed; inset: 0; z-index: 60; background: var(--papel); display: flex; flex-direction: column; padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); max-width: 480px; margin: 0 auto; animation: abre .3s var(--ease); overflow-y: auto; }
.registrado .selo { width: 96px; height: 96px; margin-top: 6vh; }
.registrado .selo .iso-ring { stroke-dasharray: 145; stroke-dashoffset: 145; animation: risca .7s var(--ease) .05s forwards; }
.registrado .selo .iso-curto { stroke-dasharray: 14; stroke-dashoffset: 14; animation: risca .35s var(--ease) .45s forwards; }
.registrado .selo .iso-longo { stroke-dasharray: 36; stroke-dashoffset: 36; animation: risca .45s var(--ease) .7s forwards; }
@keyframes risca { to { stroke-dashoffset: 0; } }
.registrado h1 { font-size: 30px; margin-top: 24px; letter-spacing: -.03em; }
.registrado .hora-g { font-family: var(--fonte-display); font-weight: 700; font-size: clamp(64px, 20vw, 88px); letter-spacing: -.05em; line-height: 1; margin-top: 10px; font-variant-numeric: tabular-nums; }
.registrado .hora-g small { font-family: var(--fonte-num); font-size: .3em; color: var(--vermelhao); letter-spacing: 0; font-weight: 500; margin-left: .2em; }
.registrado .dados { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--linha); }
.registrado .dados div { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.registrado .dados svg { color: var(--texto-2); margin-top: 2px; }
.registrado .dados dt { font-size: 13px; color: var(--texto-2); }
.registrado .dados dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.registrado .acoes { margin-top: auto; padding-top: 24px; }

/* ---------- histórico ---------- */
.hist { display: grid; gap: 12px; }
.hist-dia { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; display: grid; gap: 10px; }
.hist-dia header { display: flex; justify-content: space-between; align-items: baseline; }
.hist-dia header b { font-weight: 650; }
.hist-dia header b::first-letter { text-transform: uppercase; }
.hist-dia header span { font-family: var(--fonte-num); font-size: 15px; }
.hist-dia .bs { display: flex; flex-wrap: wrap; gap: 6px; }
.hist-dia .bs span { font-family: var(--fonte-num); font-size: 13px; padding: 4px 8px; border-radius: 8px; background: var(--superficie-2); display: inline-flex; gap: 6px; align-items: center; }
.hist-dia .bs svg { width: 13px; height: 13px; color: var(--texto-2); }
.resumo-mes { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px; }
.resumo-mes b { font-family: var(--fonte-display); font-size: 34px; letter-spacing: -.03em; }

/* ---------- conta ---------- */
.perfil { display: flex; gap: 14px; align-items: center; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--texto); color: var(--papel); display: grid; place-items: center; font-family: var(--fonte-display); font-weight: 700; font-size: 20px; flex: none; }
.lista-op { display: grid; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.lista-op button, .lista-op a { display: flex; gap: 14px; align-items: center; padding: 16px; background: none; border: 0; border-bottom: 1px solid var(--linha); text-align: left; cursor: pointer; font-size: 15px; text-decoration: none; color: var(--texto); }
.lista-op > :last-child { border-bottom: 0; }
.lista-op button:hover, .lista-op a:hover { background: var(--superficie-2); }
.lista-op .d { display: grid; flex: 1; }
.lista-op .d small { color: var(--texto-2); font-size: 13px; }
.lista-op .perigo { color: var(--perigo); }
.lista-op svg.seta { color: var(--texto-3); }

.codigo-in { font-size: 22px; letter-spacing: .14em; }