/* NOLIE — Bate Ponto · identidade visual (fiel ao protótipo aprovado) */
:root{
  --lilas:#CBA6FF;
  --lilas-claro:#E1CCFF;
  --cinza-gelo:#E8E8E8;
  --preto:#000000;
  --branco:#FFFFFF;
  --chumbo:#424242;
  --verde:#1a7a3c;
  --vermelho:#c62828;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:'Barlow',sans-serif;
  background:var(--chumbo);
  color:var(--preto);
  display:flex;justify-content:center;align-items:flex-start;
  min-height:100vh;
}
/* moldura de celular no desktop, tela cheia no mobile */
#phone{
  width:100%;max-width:420px;min-height:100vh;
  background:var(--lilas);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
@media(min-width:480px){
  body{padding:24px 0;}
  #phone{min-height:calc(100vh - 48px);border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.4);}
}

h1,h2,h3,.headline,button.big{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  line-height:.95;
}

/* header */
header{
  padding:22px 24px 14px;
  display:flex;justify-content:space-between;align-items:center;
}
.logo-img{height:36px;width:auto;display:block;}
#clock{font-family:'Barlow Condensed';font-weight:800;font-size:26px;text-align:right;}
#clock small{display:block;font-family:'Barlow';font-weight:500;font-size:11px;letter-spacing:.05em;text-transform:none;}

/* borda scalloped entre header lilás e cartão branco */
.scallop{display:block;width:100%;height:26px;flex:none;}

main{
  background:var(--branco);
  flex:1;display:flex;flex-direction:column;
  padding:26px 24px 30px;
}

.eyebrow{font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--chumbo);margin-bottom:8px;}
h1{font-size:52px;margin-bottom:6px;}
h2{font-size:38px;margin-bottom:6px;}
p.sub{font-size:15px;color:var(--chumbo);margin-bottom:24px;line-height:1.45;}

/* steps */
.steps{display:flex;gap:6px;margin-bottom:22px;}
.steps span{height:5px;flex:1;background:var(--cinza-gelo);border-radius:99px;}
.steps span.on{background:var(--preto);}

/* inputs */
input[type=text],input[type=password],input[type=email],input[type=number],input[type=time],input[type=date],input[type=month]{
  width:100%;border:2px solid var(--preto);border-radius:12px;
  padding:16px;font-family:'Barlow Condensed';font-weight:800;font-size:28px;
  letter-spacing:.06em;outline:none;background:var(--branco);
}
input:focus{background:var(--lilas-claro);}
.field-label{font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;display:block;}
.err{color:var(--vermelho);font-weight:700;font-size:14px;margin-top:10px;min-height:20px;}
.ok-msg{color:var(--verde);font-weight:700;font-size:14px;margin-top:10px;}

/* buttons */
button{cursor:pointer;border:none;font-family:'Barlow',sans-serif;}
button.big{
  width:100%;background:var(--preto);color:var(--branco);
  font-size:26px;padding:18px;border-radius:14px;margin-top:20px;
}
button.big:disabled{opacity:.25;cursor:not-allowed;}
button.ghost{
  width:100%;background:none;border:2px solid var(--preto);
  font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;
  font-size:20px;padding:14px;border-radius:14px;margin-top:12px;
}
button.linky{background:none;font-size:13px;font-weight:700;color:var(--chumbo);text-decoration:underline;margin-top:auto;padding:18px 0 0;}

/* punch type buttons */
.punch{
  width:100%;text-align:left;background:var(--branco);
  border:2px solid var(--preto);border-radius:14px;
  padding:16px;margin-bottom:12px;
  display:flex;justify-content:space-between;align-items:center;
}
.punch .t{font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;font-size:24px;}
.punch .s{font-size:12px;font-weight:500;color:var(--chumbo);text-transform:none;font-family:'Barlow';}
.punch.suggested{background:var(--lilas);}
.punch.done{opacity:.35;}
.punch .tag{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid var(--preto);border-radius:99px;padding:4px 10px;}

/* location */
.geo-box{border:2px solid var(--preto);border-radius:14px;padding:18px;margin-bottom:8px;}
.geo-box .st{font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;font-size:26px;}
.geo-box .d{font-size:14px;color:var(--chumbo);margin-top:4px;line-height:1.4;}
.geo-box.ok{background:var(--lilas-claro);}
.geo-box.fail{background:var(--cinza-gelo);}

/* camera */
.cam-wrap{
  width:100%;aspect-ratio:3/4;background:var(--preto);border-radius:16px;
  overflow:hidden;position:relative;margin-bottom:6px;
}
.cam-wrap video,.cam-wrap canvas,.cam-wrap img{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);}
.cam-wrap .cam-off{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--branco);gap:10px;padding:0 26px;text-align:center;font-size:14px;line-height:1.5;}
.cam-badge{position:absolute;top:12px;left:12px;background:var(--branco);border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;}

/* confirm / receipt */
.receipt{border:2px solid var(--preto);border-radius:16px;overflow:hidden;margin:18px 0 4px;}
.receipt .head{background:var(--preto);color:var(--branco);padding:14px 16px;font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;font-size:22px;}
.receipt .row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1.5px solid var(--cinza-gelo);font-size:14px;}
.receipt .row b{font-weight:700;text-align:right;}
.receipt .photo{width:64px;height:64px;border-radius:10px;object-fit:cover;transform:scaleX(-1);border:2px solid var(--preto);}

/* termo LGPD */
.termo{border:2px solid var(--preto);border-radius:14px;padding:16px;font-size:13.5px;line-height:1.55;color:var(--chumbo);max-height:44vh;overflow-y:auto;}
.termo b{color:var(--preto);}
.termo ul{margin:8px 0 8px 18px;}
.termo li{margin-bottom:6px;}

/* admin */
table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:10px;}
th{font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;font-size:14px;text-align:left;padding:8px 6px;border-bottom:2px solid var(--preto);}
td{padding:8px 6px;border-bottom:1px solid var(--cinza-gelo);vertical-align:middle;}
.saldo-pos{color:var(--verde);font-weight:700;}
.saldo-neg{color:var(--vermelho);font-weight:700;}
.chip{display:inline-block;background:var(--lilas-claro);border-radius:99px;padding:3px 10px;font-size:11px;font-weight:700;}
.warn-chip{background:var(--cinza-gelo);}
.adj-chip{background:var(--branco);border:1.5px solid var(--preto);}
.tabs{display:flex;gap:8px;margin:16px 0 4px;}
.tabs button{flex:1;font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;font-size:17px;padding:10px;border-radius:10px;border:2px solid var(--preto);background:var(--branco);}
.tabs button.on{background:var(--preto);color:var(--branco);}
select,textarea{width:100%;border:2px solid var(--preto);border-radius:10px;padding:10px;font-family:'Barlow';font-weight:700;font-size:14px;background:var(--branco);margin-top:8px;}
textarea{font-weight:400;min-height:70px;resize:vertical;}
.mini-photo{width:26px;height:26px;border-radius:6px;object-fit:cover;transform:scaleX(-1);vertical-align:middle;cursor:pointer;border:1px solid var(--preto);}

.screen{display:none;flex:1;flex-direction:column;}
.screen.on{display:flex;}
.hint{background:var(--cinza-gelo);border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.5;margin-top:22px;color:var(--chumbo);}
.hint b{color:var(--preto);}
.note{font-size:12px;color:var(--chumbo);margin-top:14px;line-height:1.45;}

/* spinner simples no botão enquanto envia */
button.busy{opacity:.6;pointer-events:none;}

/* modal de foto ampliada (admin) */
.foto-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;justify-content:center;align-items:center;z-index:50;padding:20px;}
.foto-modal.on{display:flex;}
.foto-modal img{max-width:100%;max-height:85vh;border-radius:14px;transform:scaleX(-1);}