/* ============================================================
   Caderneta — PKJ · identidade "Command Center" (vinho)
   Display: Space Grotesk · Corpo: Inter · Dados: IBM Plex Mono
   Fundo escuro vinho; o RECIBO e o PAD ficam em "papel" (assinatura legível).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg0:#0d0f12; --bg1:#13161a; --raised:#181c22;
  --maroon:#7d2528; --maroon-d:#5e1c1f; --accent:#d24a4f; --accent-2:#ff6b70;
  --glow:rgba(210,74,79,.45); --glow-soft:rgba(210,74,79,.16);
  --ink:#e9ecf1; --soft:#aab4be; --dim:#7e8893;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --card:rgba(30,34,41,.74); --glass:rgba(20,23,28,.86); --input:rgba(255,255,255,.05);
  --ok:#46c281; --ok-bg:rgba(70,194,129,.14); --ok-bd:rgba(70,194,129,.40);
  --warn:#ef9f27; --warn-bg:rgba(239,159,39,.14); --warn-bd:rgba(239,159,39,.40);
  --red:#e86b70; --red-bg:rgba(232,107,112,.15); --red-bd:rgba(232,107,112,.42);
  /* papel (recibo + pad) */
  --paper:#FBF8F1; --paper-2:#F1EDE2; --paper-ink:#1b2230; --paper-soft:#6b6256; --paper-line:#e2dccf;
  --raio:14px;
  --sombra:0 1px 2px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.45);
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --disp:'Space Grotesk',var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* aliases legados (compat com estilos inline antigos) */
  --tinta:var(--ink); --tinta2:var(--soft); --muted:var(--dim);
  --linha:var(--line); --pauta:var(--line); --papel:var(--bg1); --papel2:rgba(255,255,255,.045);
  --carbono:var(--accent); --carbono-cl:var(--glow-soft);
  --conferido:var(--ok); --conferido-cl:var(--ok-bg);
  --ocre:var(--warn); --ocre-cl:var(--warn-bg);
  --carimbo:var(--red); --carimbo-cl:var(--red-bg);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.45;
  background:
    radial-gradient(900px 600px at 12% -8%, rgba(125,37,40,.30), transparent 60%),
    radial-gradient(800px 600px at 100% 0%, rgba(74,79,84,.20), transparent 55%),
    radial-gradient(700px 700px at 85% 112%, rgba(125,37,40,.16), transparent 60%),
    linear-gradient(160deg,#0d0f12 0%, #111418 45%, #0c0e11 100%);
  background-attachment:fixed; min-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{font-family:var(--disp); font-weight:700; letter-spacing:-.01em; margin:0; line-height:1.12; color:#fff}
a{color:var(--accent); text-decoration:none} a:hover{color:var(--accent-2)}
::selection{background:rgba(210,74,79,.35); color:#fff}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.muted{color:var(--dim)}
.wrap{max-width:600px; margin:0 auto; padding:16px}

/* ---- marca ---- */
.brand{font-family:var(--disp); font-weight:700; letter-spacing:-.02em; color:#fff; display:inline-flex; flex-direction:column; line-height:.95}
.brand .nm{font-size:22px}
.brand .ul{height:3px; width:100%; background:linear-gradient(90deg,var(--accent),var(--maroon)); border-radius:2px; margin-top:3px; box-shadow:0 0 10px var(--glow)}
.brand .sub{font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); font-family:var(--sans); margin-top:5px}

/* ---- topbar ---- */
.topbar{position:sticky; top:0; z-index:20; background:linear-gradient(180deg,rgba(18,21,25,.92),rgba(13,15,18,.78)); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); padding:10px 16px; display:flex; align-items:center; gap:12px}
.topbar .who{margin-left:auto; font-size:12px; color:var(--soft)}

/* ---- eyebrow / labels ---- */
.eyebrow{font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2)}
.lbl{display:block; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--soft); margin:0 0 5px}

/* ---- botoes ---- */
.btn{appearance:none; border:1.5px solid var(--line); background:var(--input); color:var(--ink); font-family:var(--sans); font-weight:700; font-size:15px; padding:13px 18px; border-radius:12px; cursor:pointer; width:100%; transition:transform .04s ease, box-shadow .15s ease, border-color .15s}
.btn:hover{border-color:rgba(255,255,255,.22)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-primary{background:linear-gradient(145deg,var(--maroon),var(--maroon-d)); border-color:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(125,37,40,.45), inset 0 1px 0 rgba(255,255,255,.08)}
.btn-primary:hover{border-color:var(--accent-2); box-shadow:0 8px 22px rgba(210,74,79,.5)}
.btn-ok{background:linear-gradient(145deg,#1f7a52,#155e3e); border-color:var(--ok); color:#fff}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--soft); font-weight:600}
.btn-sm{font-size:13px; padding:9px 13px; width:auto; border-radius:10px}
.btn-row{display:flex; gap:10px}

/* ---- campos ---- */
.field{margin-bottom:14px}
input,select,textarea{width:100%; font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--input); border:1.5px solid var(--line); border-radius:11px; padding:12px 13px; outline:none; transition:border-color .15s, box-shadow .15s}
input::placeholder,textarea::placeholder{color:#6b7480}
input:focus,select:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--glow-soft)}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%); background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
input.mono{font-family:var(--mono)}
textarea{min-height:74px; resize:vertical}

/* ---- cartao ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--raio); box-shadow:var(--sombra); padding:18px; backdrop-filter:blur(8px)}
.card+.card{margin-top:14px}

/* ---- recibo (folha de PAPEL destacavel sobre o fundo escuro) ---- */
.recibo{position:relative; color:var(--paper-ink); background:var(--paper);
  background-image:repeating-linear-gradient(transparent, transparent 31px, var(--paper-2) 31px, var(--paper-2) 32px);
  border:1px solid var(--paper-line); border-radius:var(--raio); box-shadow:0 14px 40px rgba(0,0,0,.5); padding:20px 20px 22px; overflow:hidden}
.recibo::before{content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:repeating-linear-gradient(90deg, var(--maroon) 0 7px, transparent 7px 14px)}
.recibo .rb-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px}
.recibo .rb-un{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--maroon)}
.recibo .rb-tt{font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-soft)}
.recibo .rb-nome{font-family:var(--disp); font-size:21px; font-weight:700; letter-spacing:-.01em; color:var(--paper-ink)}
.recibo .rb-cpf{font-family:var(--mono); font-size:12px; color:var(--paper-soft)}
.recibo .rb-desc{font-size:14px; color:#3b4250; margin:8px 0}
.recibo .rb-valor{font-family:var(--mono); font-weight:600; font-size:34px; letter-spacing:-.01em; color:var(--paper-ink); margin-top:4px}
.recibo .rb-data{font-family:var(--mono); font-size:12px; color:var(--paper-soft)}

/* ---- pad de assinatura: papel, traco em tinta escura (igual ao PDF) ---- */
.padbox{position:relative; background:var(--paper); border:1.5px dashed #c7bfae; border-radius:12px; height:170px; touch-action:none; overflow:hidden}
.padbox canvas{position:absolute; inset:0; width:100%; height:100%}
.padbox .pad-line{position:absolute; left:16px; right:16px; bottom:42px; height:2px; background:var(--maroon); opacity:.5}
.padbox .pad-x{position:absolute; left:16px; bottom:46px; color:var(--maroon); font-weight:800; font-size:18px; opacity:.65}
.padbox .pad-hint{position:absolute; left:0; right:0; bottom:14px; text-align:center; font-size:11px; color:var(--paper-soft); pointer-events:none}

/* ---- carimbo RECEBIDO ---- */
.stamp{display:inline-block; transform:rotate(-7deg); border:3px solid var(--ok); color:var(--ok); font-family:var(--disp); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:24px; padding:7px 16px; border-radius:8px; opacity:0; box-shadow:inset 0 0 0 2px rgba(70,194,129,.18)}
.stamp.in{animation:stampin .45s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes stampin{0%{opacity:0; transform:rotate(-7deg) scale(1.9)}60%{opacity:1}100%{opacity:1; transform:rotate(-7deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.stamp.in{animation:none; opacity:1}}

/* ---- badges de risco ---- */
.risk{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1.5px solid}
.risk-verde{color:var(--ok); border-color:var(--ok-bd); background:var(--ok-bg)}
.risk-amarelo{color:var(--warn); border-color:var(--warn-bd); background:var(--warn-bg)}
.risk-vermelho{color:var(--accent-2); border-color:var(--red-bd); background:var(--red-bg)}

/* ---- cartao-ponto da habitualidade ---- */
.punch{display:inline-flex; gap:3px}
.punch i{width:13px; height:13px; border-radius:3px; border:1.5px solid var(--line); background:transparent; display:inline-block}
.punch i.on{border-color:transparent}
.punch i.v{background:var(--ok)}
.punch i.a{background:var(--warn)}
.punch i.r{background:var(--accent)}

/* ---- tabela / linhas ---- */
.row{display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .nm{font-weight:700; color:var(--ink)}
.row .meta{font-size:11.5px; color:var(--dim)}
.row .right{margin-left:auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.pill{font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--soft)}
.pill.pend{background:var(--warn-bg); color:var(--warn)}
.pill.assin{background:var(--ok-bg); color:var(--ok)}
.pill.canc{background:rgba(255,255,255,.05); color:var(--dim); text-decoration:line-through}

/* ---- resumo (cartoes de contagem) ---- */
.sum{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.sum .it{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center}
.sum .it .v{font-family:var(--mono); font-weight:600; font-size:26px; color:#fff}
.sum .it .k{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin-top:2px}
.sum .it.r .v{color:var(--accent-2)} .sum .it.a .v{color:var(--warn)} .sum .it.v .v{color:var(--ok)}

/* ---- toast + barra offline ---- */
.toast{position:fixed; left:50%; bottom:74px; transform:translateX(-50%) translateY(20px); background:#1b1f24; color:#fff; font-size:13.5px; font-weight:600; padding:11px 16px; border-radius:12px; box-shadow:var(--sombra); border:1px solid var(--line); opacity:0; pointer-events:none; transition:.2s; z-index:60; max-width:90vw; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{background:linear-gradient(145deg,var(--maroon),var(--maroon-d)); border-color:var(--accent)}
.offbar{position:fixed; left:0; right:0; bottom:0; background:var(--warn); color:#1b1205; font-size:12.5px; font-weight:700; text-align:center; padding:9px 14px; z-index:55; display:none}
.offbar.on{display:block}

.empty{text-align:center; color:var(--dim); font-size:13px; padding:26px 10px}
.center{min-height:100dvh; display:grid; place-items:center; padding:22px}
.hr{height:1px; background:var(--line); margin:14px 0; border:0}

/* ---- tour guiado ---- */
.fab{position:fixed; right:16px; bottom:16px; z-index:50; width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line); background:var(--raised); color:var(--ink); font-size:19px; box-shadow:var(--sombra); cursor:pointer}
.tour{position:fixed; inset:0; background:rgba(8,9,11,.7); display:none; place-items:center; z-index:80; padding:22px; backdrop-filter:blur(3px)}
.tour.on{display:grid}
.tour-card{background:var(--bg1); border:1px solid var(--line); border-radius:18px; max-width:360px; width:100%; padding:24px; box-shadow:var(--sombra); text-align:center}
.tour-card .ic{font-size:36px}
.tour-card h3{font-size:20px; margin:10px 0 6px}
.tour-card p{font-size:14.5px; color:var(--soft); margin:0 0 16px; line-height:1.5}
.tour-dots{display:flex; gap:6px; justify-content:center; margin:8px 0 16px}
.tour-dots i{width:7px; height:7px; border-radius:9px; background:var(--line); transition:.2s}
.tour-dots i.on{background:var(--accent); width:20px}

/* ---- modal / sheet ---- */
.modal{position:fixed; inset:0; background:rgba(8,9,11,.66); display:none; align-items:center; justify-content:center; z-index:70; padding:20px; backdrop-filter:blur(3px)}
.modal.on{display:flex}
.modal .sheet{background:var(--bg1); border:1px solid var(--line); width:100%; max-width:560px; border-radius:18px; padding:20px; max-height:86vh; overflow:auto; box-shadow:var(--sombra)}
.sheet h2{font-size:19px; margin-bottom:4px}
.sheet h4{font-family:var(--disp); font-size:14px; margin:16px 0 4px; color:var(--accent-2)}
.sheet p, .sheet li{font-size:13.5px; color:var(--soft); line-height:1.55}
.sheet ul{margin:4px 0; padding-left:18px}
.sheet .x{float:right; font-size:22px; color:var(--dim); cursor:pointer; line-height:1}
.tabs{display:flex; gap:6px; margin:10px 0 14px}
.tabs button{flex:1; padding:9px; border-radius:10px; border:1.5px solid var(--line); background:var(--input); font-weight:700; font-size:13px; color:var(--soft); cursor:pointer}
.tabs button.sel{border-color:var(--accent); background:var(--glow-soft); color:var(--accent-2)}