/* ============================================================
   App do cliente · mobile-first · tema vem da empresa (CSS vars)
   ============================================================ */
:root{
  --brand:#A8537A; --brand-600:#934668; --brand-50:#F7ECF1;
  --bg:#FBF8FA; --surface:#FFFFFF; --ink:#241A20; --ink-2:#6B5E66; --muted:#9A8E94;
  --line:#EEE6EA; --ok:#2E7D6B; --ok-bg:#E6F2EE; --warn:#B5683C; --warn-bg:#FBF0E8; --danger:#B23B4B;
  --r:18px; --r-sm:12px; --shadow:0 10px 30px rgba(60,30,45,.10);
  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:var(--ff);background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.45;overscroll-behavior-y:none}
#app{max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input{font-family:inherit}
.disp{font-variant-numeric:tabular-nums}

/* boot */
.boot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100vh;height:100dvh;color:var(--muted)}
.boot-dot{width:26px;height:26px;border-radius:50%;border:3px solid var(--brand-50);border-top-color:var(--brand);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(86px + var(--safe-b));transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;font-size:13.5px;font-weight:500;
  opacity:0;pointer-events:none;transition:.25s;z-index:100;max-width:90%;text-align:center;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- LOGIN ---------- */
.login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:0 22px;
  background:linear-gradient(180deg,var(--brand-50),var(--bg) 42%)}
.login-top{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding-top:40px}
.brand-badge{width:72px;height:72px;border-radius:22px;background:linear-gradient(135deg,var(--brand),var(--brand-600));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;box-shadow:var(--shadow);margin-bottom:8px}
.login h1{font-size:23px;margin:6px 0 2px;letter-spacing:-.02em}
.login .sub{color:var(--ink-2);font-size:14px;max-width:300px}
.login-form{padding:18px 0 max(24px,var(--safe-b))}
.field-lbl{font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 8px 2px;display:block}
.cpf-input{width:100%;font-size:24px;letter-spacing:.04em;text-align:center;padding:18px 14px;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-variant-numeric:tabular-nums;transition:.15s}
.cpf-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-50)}
.hint{font-size:12.5px;color:var(--muted);text-align:center;margin-top:12px}

/* botões */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;border-radius:var(--r);
  font-size:16px;font-weight:650;transition:.15s;border:1.5px solid transparent}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 20px -6px var(--brand)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.55;box-shadow:none}
.btn-ghost{background:var(--surface);color:var(--brand-600);border-color:var(--line)}
.btn-sm{padding:10px 14px;font-size:13.5px;width:auto;border-radius:999px}

/* ---------- PAINEL ---------- */
.screen{padding:0 16px calc(96px + var(--safe-b))}
.topbar{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,var(--bg) 70%,transparent);
  padding:max(14px,env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;gap:12px}
.topbar .av{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand-600));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0}
.topbar .who{flex:1;min-width:0}
.topbar .who .hi{font-size:12.5px;color:var(--ink-2)}
.topbar .who .nm{font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tier{font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.tier-Ouro{background:#FBF1D9;color:#9A7B17}.tier-Platina{background:#E9EDF1;color:#5B6B7A}
.tier-Diamante{background:#E4F1F6;color:#2C7A93}.tier-none{background:var(--brand-50);color:var(--brand-600)}

/* hero de pontos */
.hero{background:linear-gradient(140deg,var(--brand),var(--brand-600));color:#fff;border-radius:24px;
  padding:22px;margin-top:6px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,.10)}
.hero .lab{font-size:12.5px;opacity:.85;position:relative}
.hero .pts{font-size:46px;font-weight:800;line-height:1;margin:4px 0 2px;position:relative;letter-spacing:-.02em}
.hero .pts small{font-size:16px;font-weight:600;opacity:.85}
.progress{height:9px;border-radius:999px;background:rgba(255,255,255,.25);margin-top:16px;overflow:hidden;position:relative}
.progress > i{display:block;height:100%;background:#fff;border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.hero .goal{font-size:12.5px;opacity:.95;margin-top:9px;position:relative;display:flex;justify-content:space-between;gap:8px}

/* cards / seções */
.sec{margin-top:22px}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin:0 4px 11px}
.sec-h h2{font-size:16px;margin:0;letter-spacing:-.01em}
.sec-h .lnk{font-size:13px;color:var(--brand-600);font-weight:600}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px;box-shadow:0 1px 2px rgba(60,30,45,.03)}
.card + .card{margin-top:10px}
.list-item{display:flex;align-items:center;gap:13px;padding:13px 15px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 1px 2px rgba(60,30,45,.03)}
.list-item + .list-item{margin-top:9px}
.li-ic{width:42px;height:42px;border-radius:13px;background:var(--brand-50);color:var(--brand-600);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;font-weight:700}
.li-main{flex:1;min-width:0}
.li-t{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-s{font-size:12.5px;color:var(--ink-2);margin-top:1px}
.li-r{text-align:right;flex-shrink:0}
.chip{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--brand-50);color:var(--brand-600);white-space:nowrap}
.chip-ok{background:var(--ok-bg);color:var(--ok)} .chip-warn{background:var(--warn-bg);color:var(--warn)}
.chip-danger{background:#FBE9EC;color:var(--danger)}

/* nudge (vieses: aversão à perda / metas) */
.nudge{display:flex;align-items:center;gap:12px;background:var(--warn-bg);border:1px solid #F0DCC8;border-radius:var(--r);
  padding:13px 15px;margin-top:18px}
.nudge .ic{font-size:20px}
.nudge .t{font-size:13.5px;font-weight:650;color:#7A4A28}
.nudge .s{font-size:12px;color:#9A6B45}

/* reward progress mini */
.rw-prog{height:7px;border-radius:999px;background:var(--brand-50);margin-top:9px;overflow:hidden}
.rw-prog > i{display:block;height:100%;background:var(--brand);border-radius:999px}

/* empty */
.empty{text-align:center;color:var(--muted);padding:34px 20px}
.empty .ei{font-size:34px;margin-bottom:8px}
.empty h4{margin:0 0 4px;color:var(--ink-2);font-size:15px}
.empty p{margin:0;font-size:13px}

/* bottom nav (zona do polegar) — tudo em uma linha; se faltar espaço, quebra centralizado */
.bottomnav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:460px;z-index:30;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:center;gap:2px;padding:8px 6px calc(8px + var(--safe-b))}
.navbtn{position:relative;flex:1 1 0;min-width:60px;max-width:104px;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:var(--muted);font-size:11px;font-weight:600;border-radius:12px}
.navbtn svg{width:23px;height:23px}
.navbtn.on{color:var(--brand-600)}
.nbadge{position:absolute;top:2px;left:calc(50% + 4px);background:var(--danger);color:#fff;font-size:10px;font-weight:800;
  min-width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* sub-telas (agendar / preencher ficha) */
.subscreen{padding-bottom:calc(34px + var(--safe-b))}
.subbar{position:sticky;top:0;z-index:20;background:var(--bg);display:flex;align-items:center;gap:12px;
  padding:max(14px,env(safe-area-inset-top)) 16px 12px}
.subbar h2{font-size:18px;margin:0;letter-spacing:-.01em}
.backbtn{width:40px;height:40px;flex-shrink:0;border-radius:13px;background:var(--surface);border:1px solid var(--line);
  font-size:20px;color:var(--ink);display:flex;align-items:center;justify-content:center}
.sel{width:100%;padding:13px 14px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--surface);
  color:var(--ink);font-size:15px;font-family:inherit}
.sel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-50)}
.opts{display:flex;flex-direction:column;gap:2px}
.opt{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14.5px;color:var(--ink);cursor:pointer}
.opt input{width:19px;height:19px;accent-color:var(--brand)}

/* fade entre telas */
.fade{animation:fade .28s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}


/* CTA "Agendar horário" — card de ação moderno */
.cta-agendar{display:flex;align-items:center;gap:14px;width:100%;text-align:left;margin-top:8px;
  padding:15px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 8px 22px -10px rgba(60,30,45,.30);transition:transform .12s,box-shadow .12s}
.cta-agendar:active{transform:translateY(1px);box-shadow:0 4px 14px -8px rgba(60,30,45,.30)}
.cta-ic{width:46px;height:46px;flex-shrink:0;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-600));color:#fff;box-shadow:0 6px 14px -6px var(--brand)}
.cta-ic svg{width:22px;height:22px}
.cta-tx{flex:1;display:flex;flex-direction:column;min-width:0}
.cta-t{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.cta-s{font-size:12.5px;color:var(--ink-2);margin-top:1px}
.cta-go{font-size:24px;color:var(--brand-600);line-height:1;flex-shrink:0}
/* ── Tipo de agendamento (App / Avulso) ── */
.ag-tipo-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.ag-tipo-btn.ag-tipo-sel {
  border-color: var(--brand);
  background: var(--brand-50);
}

/* ── Slots de horário ── */
.slot-btn {
  padding: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  transition: border-color .12s, background .12s, color .12s;
}
.slot-btn:hover {
  border-color: var(--brand);
  background: var(--brand-50);
}
.slot-btn.slot-sel {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}