body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.tela { max-width: 560px; margin: 0 auto; padding: 1rem 1rem 2rem; padding-top: calc(1rem + env(safe-area-inset-top)); }
.topo { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .25rem; }
.topo .nome { font-weight: 700; }
.topo .sub { font-size: .85rem; }

/* Relógio: o "cartão de ponto" */
.cartao-ponto { background: var(--cartao); border: 1.5px solid var(--linha); border-radius: 14px; padding: 1.1rem 1.1rem 1rem; margin: .75rem 0; position: relative; overflow: hidden; }
.cartao-ponto::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: repeating-linear-gradient(90deg, var(--marca) 0 14px, var(--rosa) 14px 20px, transparent 20px 26px); }
.hora { font-family: var(--fonte-relogio); font-size: clamp(3.4rem, 18vw, 5rem); font-weight: 700; letter-spacing: .01em; line-height: 1; font-variant-numeric: tabular-nums; margin-top: .4rem; }
.hora small { font-size: .38em; font-weight: 600; color: var(--tinta-2); margin-left: .15em; }
.data-hoje { color: var(--tinta-2); margin: .25rem 0 0; }
.tipos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1rem 0 .75rem; }
.tipo { min-height: 48px; border: 1.5px solid var(--linha); background: transparent; border-radius: var(--r); font-weight: 600; cursor: pointer; padding: .3em .5em; }
.tipo[aria-pressed=true] { border-color: var(--marca); background: var(--marca-fraco); color: var(--marca-2); box-shadow: inset 0 0 0 1px var(--marca); }
.tipo .sug { display: block; font-size: .72rem; font-weight: 500; color: var(--tinta-2); }
.registrar { width: 100%; min-height: 64px; font-size: 1.2rem; }
.estado { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--linha); }
.lista .hora-l { font-family: var(--fonte-relogio); font-size: 1.15rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.lista .meta { font-size: .85rem; color: var(--tinta-2); }

.abas { position: fixed; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--cartao); border-top: 1.5px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.abas a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .55rem .25rem; min-height: 60px; text-decoration: none; color: var(--tinta-2); font-size: .78rem; font-weight: 600; }
.abas a[aria-current=page] { color: var(--marca); box-shadow: inset 0 3px 0 var(--marca); }
.abas svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Captura */
.captura { position: fixed; inset: 0; background: #0b1114; color: #fff; display: flex; flex-direction: column; z-index: 20; }
.captura .palco { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.captura video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.captura .oval { position: absolute; left: 50%; top: 46%; width: min(72vw, 340px); aspect-ratio: 3 / 4; transform: translate(-50%, -50%); border-radius: 50%; border: 4px solid rgba(255,255,255,.9); box-shadow: 0 0 0 100vmax rgba(5,12,15,.62); transition: border-color .2s; }
.captura .oval.ok { border-color: #5be28a; }
.captura .rodape { padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); text-align: center; background: #0b1114; }
.captura .instr { font-size: 1.35rem; font-weight: 700; min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
.captura .passos { display: flex; justify-content: center; gap: .5rem; margin: .5rem 0 1rem; }
.captura .passo { width: 34px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.3); }
.captura .passo.feito { background: #5be28a; } .captura .passo.atual { background: #fff; }
.captura .btn { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }

/* Carimbo do resultado */
.carimbo { margin: 1.25rem auto; max-width: 340px; border: 4px double var(--carimbo); color: var(--carimbo); border-radius: 12px; padding: 1rem 1.1rem; text-align: center; transform: rotate(-2.5deg); font-family: var(--fonte-relogio); animation: bate .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.carimbo .c-tipo { font-size: 1.1rem; font-weight: 700; letter-spacing: .06em; }
.carimbo .c-hora { font-size: 3.2rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.carimbo .c-data { font-size: 1.05rem; }
.carimbo .c-nsr { margin-top: .4rem; font-size: .9rem; border-top: 2px solid var(--carimbo); padding-top: .35rem; }
.carimbo.revisao { color: var(--aviso); border-color: var(--aviso); }
@keyframes bate { from { transform: rotate(-9deg) scale(1.5); opacity: 0; } to { transform: rotate(-2.5deg) scale(1); opacity: 1; } }

.cartao { background: var(--cartao); border: 1.5px solid var(--linha); border-radius: 12px; padding: 1rem; margin: .75rem 0; }
.dia { border-bottom: 1px solid var(--linha); padding: .6rem 0; }
.dia .cab { display: flex; justify-content: space-between; font-weight: 700; }
.dia .marcas { font-family: var(--fonte-relogio); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.aviso-texto { font-size: .9rem; max-height: 9em; overflow: auto; padding: .6rem .75rem; background: var(--papel-2); border-radius: var(--r); }
.linha-check { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; font-weight: 400; }
.linha-check input { width: 22px; height: 22px; margin-top: 2px; flex: none; }

/* ── LarPonto: telas de entrada e painel da empregadora ── */
.logo { display: block; margin: 0 auto .5rem; width: 150px; height: auto; }
.logo-palavra { display: block; margin: 0 auto 1rem; width: 210px; height: auto; mix-blend-mode: multiply; }
.inicio-hero { text-align: center; padding-top: 1.5rem; }
.inicio-hero .slogan { color: var(--tinta); font-size: 1.05rem; margin: 0 auto 1.5rem; max-width: 24ch; }
.papel-btn { display: block; width: 100%; text-align: left; padding: 1rem 1.1rem; border-radius: 16px; border: 2px solid var(--marca); background: var(--cartao); margin: .75rem 0; cursor: pointer; }
.papel-btn strong { display: block; font-size: 1.25rem; color: var(--marca); }
.papel-btn span { color: var(--tinta-2); font-size: .95rem; }
.papel-btn.rosa { border-color: var(--rosa); } .papel-btn.rosa strong { color: var(--rosa); }
.pin-campo { text-align: center; font-size: 2rem !important; letter-spacing: .6em; padding-left: .9em !important; font-variant-numeric: tabular-nums; max-width: 14em; margin-inline: auto; display: block; }
.chave-rec { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.35rem; font-weight: 700; text-align: center; letter-spacing: .06em; background: var(--aviso-fraco); border: 2px dashed var(--aviso); border-radius: var(--r); padding: 1rem .5rem; margin: 1rem 0; word-break: break-word; user-select: all; }
.faixa { padding: .8rem 1rem; border-radius: var(--r); margin: .75rem 0; background: var(--marca-fraco); border: 1.5px solid var(--marca); }
.faixa.alerta { background: var(--rosa-fraco); border-color: var(--rosa); }
.faixa strong { display: block; }
.pend { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; text-align: left; background: var(--cartao); border: 1.5px solid var(--rosa); border-radius: var(--r); padding: .8rem 1rem; margin: .5rem 0; cursor: pointer; font-weight: 700; }
.pend .n { background: var(--rosa); color: #fff; border-radius: 99px; min-width: 2rem; text-align: center; padding: .1em .6em; }
.emp { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; background: var(--cartao); border: 1.5px solid var(--linha); border-radius: var(--r); padding: .8rem 1rem; margin: .5rem 0; cursor: pointer; }
.emp .av { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--marca-fraco); color: var(--marca); display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; }
.emp .nome { font-weight: 700; display: block; } .emp .sub { font-size: .85rem; color: var(--tinta-2); }
.dias-sem { display: flex; gap: .35rem; flex-wrap: wrap; }
.dias-sem label { margin: 0; font-weight: 600; }
.dias-sem input { position: absolute; opacity: 0; }
.dias-sem span { display: inline-grid; place-items: center; min-width: 46px; min-height: 46px; border: 1.5px solid var(--linha); border-radius: var(--r); background: var(--cartao); }
.dias-sem input:checked + span { background: var(--marca); color: #fff; border-color: var(--marca); }
.dias-sem input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.voltar { display: inline-block; margin-bottom: .5rem; font-weight: 600; text-decoration: none; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
table.esp { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.esp th, table.esp td { text-align: left; padding: .35rem .3rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
table.esp th { color: var(--tinta-2); font-weight: 700; }
tr.falta td { color: var(--erro); } tr.espec td { background: var(--rosa-fraco); }
.qr { display: block; margin: .75rem auto; width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 8px; }
.codigo-grande { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 2rem; font-weight: 800; letter-spacing: .12em; text-align: center; color: var(--marca); }
.tela-bloqueio { position: fixed; inset: 0; background: var(--papel); z-index: 30; display: grid; place-content: center; text-align: center; padding: 2rem; gap: .5rem; }
.rodape-leg { text-align: center; font-size: .8rem; color: var(--tinta-2); margin-top: 2rem; }