/* Ponto Doméstico — identidade visual
   Paleta: petróleo profundo + âmbar quente sobre papel morno.
   Display: Fraunces (serifa humana) · Texto: Inter. */
:root{
  --ink:#17211E; --paper:#F5F1E9; --card:#FFFDF8;
  --petrol:#0F3D3E; --petrol-2:#1B5658; --amber:#E8A33D; --amber-d:#C9862A;
  --sage:#6B7F72; --line:#E4DDCC; --muted:#8A8577;
  --danger:#B4462F; --good:#2E7D5B; --info:#2C6E9B;
  --radius:14px; --shadow:0 1px 2px rgba(23,33,30,.06),0 8px 24px rgba(23,33,30,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:-.01em}
a{color:var(--petrol-2)}
.muted{color:var(--muted)} .sage{color:var(--sage)}

/* ---------- layout admin ---------- */
.shell{display:flex; min-height:100vh}
.side{
  width:236px; background:var(--petrol); color:#EAF3EF; padding:22px 16px;
  position:sticky; top:0; height:100vh; overflow:auto; flex-shrink:0;
}
.brand{font-family:'Fraunces',serif; font-size:1.28rem; color:#fff; margin:2px 8px 22px; line-height:1.15}
.brand small{display:block; font-family:'Inter'; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber); font-weight:600; margin-top:4px}
.nav a{display:block; color:#CFE1DA; text-decoration:none; padding:9px 12px;
  border-radius:9px; font-size:.92rem; margin-bottom:2px}
.nav a:hover{background:rgba(255,255,255,.06); color:#fff}
.nav a.on{background:var(--amber); color:#2A1B05; font-weight:600}
.nav .grp{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:#7FA79C; margin:16px 12px 6px}
.side .logout{margin-top:20px; font-size:.82rem}

.main{flex:1; padding:30px 40px; max-width:1180px}
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:16px; flex-wrap:wrap}
.topbar h1{font-size:1.7rem; margin:0}
.eyebrow{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); font-weight:600}

/* ---------- cards & grid ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:26px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 16px; box-shadow:var(--shadow)}
.card .k{font-size:.74rem; color:var(--sage); text-transform:uppercase; letter-spacing:.08em; font-weight:600}
.card .v{font-family:'Fraunces',serif; font-size:2rem; margin-top:6px; line-height:1}
.card .v.sm{font-size:1.5rem}
.card.accent{background:linear-gradient(160deg,var(--petrol),var(--petrol-2)); color:#fff; border:none}
.card.accent .k{color:#A9C6BD} .card.accent .v{color:#fff}
.card.warn .v{color:var(--danger)}

/* ---------- tables ---------- */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:24px}
.panel h2{font-size:1.05rem; margin:0; padding:16px 20px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:12px}
table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{padding:11px 16px; text-align:left; border-bottom:1px solid var(--line)}
th{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sage); font-weight:600; background:#FBF9F3}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- badges ---------- */
.badge{display:inline-block; font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:20px}
.badge.g{background:#E4F0E9; color:var(--good)} .badge.r{background:#F5E4DF; color:var(--danger)}
.badge.a{background:#FBEED6; color:var(--amber-d)} .badge.s{background:#EEEBE2; color:var(--sage)}
.badge.b{background:#E1EDF4; color:var(--info)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.dot.in{background:var(--good)} .dot.out{background:var(--danger)}

/* ---------- buttons & forms ---------- */
.btn{display:inline-flex; align-items:center; gap:7px; background:var(--petrol); color:#fff;
  border:none; border-radius:10px; padding:10px 18px; font-size:.9rem; font-weight:600;
  cursor:pointer; text-decoration:none; font-family:inherit}
.btn:hover{background:var(--petrol-2)}
.btn.amber{background:var(--amber); color:#2A1B05} .btn.amber:hover{background:var(--amber-d)}
.btn.ghost{background:transparent; color:var(--petrol); border:1px solid var(--line)}
.btn.ghost:hover{background:#FBF9F3}
.btn.sm{padding:6px 12px; font-size:.82rem}
.btn.danger{background:var(--danger)} .btn.danger:hover{filter:brightness(.92)}

label{display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin:0 0 5px}
input,select,textarea{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:9px;
  font-family:inherit; font-size:.92rem; background:#fff; color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--amber); outline-offset:0; border-color:transparent}
.field{margin-bottom:14px}
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px}
.form-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); margin-bottom:24px}
.inline{display:flex; gap:10px; align-items:end; flex-wrap:wrap}
.check{display:flex; align-items:center; gap:8px} .check input{width:auto}

.flash{padding:12px 18px; border-radius:10px; margin-bottom:18px; font-size:.9rem; font-weight:500}
.flash.ok{background:#E4F0E9; color:var(--good)} .flash.erro{background:#F5E4DF; color:var(--danger)}

.periodo{display:flex; gap:8px; align-items:center}
.periodo select{width:auto}

/* ---------- login ---------- */
.auth-wrap{min-height:100vh; display:grid; place-items:center; padding:20px;
  background:radial-gradient(120% 100% at 50% 0%, #17514F 0%, var(--petrol) 60%)}
.auth-card{background:var(--card); border-radius:20px; padding:34px 30px; width:100%; max-width:400px;
  box-shadow:0 24px 60px rgba(0,0,0,.28)}
.auth-card .brand{color:var(--petrol); margin:0 0 4px}
.auth-card .brand small{color:var(--amber-d)}
.auth-card p.sub{color:var(--sage); margin:0 0 22px; font-size:.9rem}

/* ---------- mobile registro (hero) ---------- */
.reg-wrap{min-height:100vh; display:flex; flex-direction:column;
  background:radial-gradient(130% 90% at 50% -10%, #1C605D 0%, var(--petrol) 55%); color:#EAF3EF}
.reg-top{padding:22px 22px 8px; display:flex; justify-content:space-between; align-items:center}
.reg-top .who{font-family:'Fraunces',serif; font-size:1.15rem; color:#fff}
.reg-top .who small{display:block; font-family:'Inter'; font-size:.72rem; color:#A9C6BD; font-weight:500}
.reg-top a{color:#A9C6BD; font-size:.82rem; text-decoration:none}
.reg-main{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center}
.reg-state{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); font-weight:700; margin-bottom:6px}
.reg-clock{font-family:'Fraunces',serif; font-size:2.6rem; color:#fff; margin-bottom:30px; font-variant-numeric:tabular-nums}

.big-btn{
  width:224px; height:224px; border-radius:50%; border:none; cursor:pointer;
  background:radial-gradient(140% 140% at 30% 25%, #F2B75A 0%, var(--amber) 45%, var(--amber-d) 100%);
  color:#2A1B05; font-family:'Fraunces',serif; font-size:1.35rem; font-weight:600;
  box-shadow:0 14px 40px rgba(232,163,61,.42), inset 0 -6px 16px rgba(0,0,0,.14);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  transition:transform .12s ease, box-shadow .2s ease; -webkit-tap-highlight-color:transparent;
}
.big-btn small{font-family:'Inter'; font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; opacity:.72}
.big-btn:active{transform:scale(.95)}
.big-btn.saida{background:radial-gradient(140% 140% at 30% 25%, #7FB8A6 0%, #3E8E74 55%, #2E7D5B 100%); color:#06251A}
.big-btn:disabled{opacity:.6; cursor:progress}

.geo-hint{margin-top:26px; font-size:.82rem; color:#BcD6CD; display:flex; align-items:center; gap:7px}
.geo-hint .pill{padding:3px 10px; border-radius:20px; font-weight:600}
.geo-hint .pill.ok{background:rgba(46,125,91,.3); color:#B6E7CF}
.geo-hint .pill.out{background:rgba(180,70,47,.32); color:#F3C6BB}
.geo-hint .pill.wait{background:rgba(255,255,255,.14); color:#DCEAE4}

.today{padding:16px 22px 30px}
.today h3{color:#CFE1DA; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 10px; font-weight:600}
.punch{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.07);
  border-radius:10px; padding:10px 14px; margin-bottom:7px; font-size:.92rem}
.punch .t{margin-left:auto; font-variant-numeric:tabular-nums; color:#fff; font-weight:600}
.punch .out-flag{font-size:.72rem; color:#F3C6BB}

/* comprovante */
.receipt{position:fixed; inset:0; background:rgba(10,26,24,.7); display:none;
  align-items:center; justify-content:center; padding:24px; z-index:50}
.receipt.show{display:flex}
.receipt-card{background:var(--card); color:var(--ink); border-radius:18px; padding:28px; max-width:340px; width:100%; text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.receipt-card .stamp{width:64px;height:64px;border-radius:50%; margin:0 auto 14px; display:grid; place-items:center;
  background:#E4F0E9; color:var(--good); font-size:1.8rem}
.receipt-card h3{margin:0 0 4px; font-size:1.2rem}
.receipt-card .code{font-variant-numeric:tabular-nums; letter-spacing:.12em; font-weight:700; color:var(--petrol)}
.receipt-card table{margin:16px 0}
.receipt-card td{border:none; padding:4px 0; font-size:.88rem}
.receipt-card td:last-child{text-align:right; font-weight:600}

/* pwa install + small */
.hidden{display:none!important}
@media(max-width:820px){
  .shell{flex-direction:column}
  .side{width:100%; height:auto; position:static; display:flex; flex-wrap:wrap; gap:4px; align-items:center}
  .side .brand{margin:0 16px 0 4px} .nav{display:flex; flex-wrap:wrap} .nav .grp{display:none}
  .main{padding:20px}
}