/* ============ Bancada — sistema técnico de agendamento ============ */
:root {
  --bg: #e8eaed;
  --surface: #ffffff;
  --surface-2: #f3f5f7;
  --ink: #15171c;
  --muted: #5f656f;
  --faint: #949aa4;
  --line: #dee1e6;
  --line-strong: #ccd0d6;
  --accent: #2f43d4;
  --accent-ink: #ffffff;
  --accent-tint: color-mix(in srgb, var(--accent) 9%, #ffffff);
  --ok: #15803d; --warn: #b45309; --err: #c02636;
  --radius: 12px;
  --radius-sm: 9px;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --shadow: 0 1px 2px rgba(18,20,26,.05), 0 12px 28px -20px rgba(18,20,26,.28);
  --maxw: 480px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101217;
    --surface: #191c22;
    --surface-2: #20242c;
    --ink: #eceef1;
    --muted: #98a0ab;
    --faint: #6b7480;
    --line: #292d36;
    --line-strong: #363b46;
    --accent: #6f86ff;
    --accent-ink: #0a0c12;
    --accent-tint: color-mix(in srgb, var(--accent) 20%, var(--surface));
    --ok: #34d399; --warn: #fbbf24; --err: #fb7185;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 30px -20px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px; line-height: 1.5; letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--accent); }
button { font-family: inherit; cursor: pointer; color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }

/* ---------- header ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.appbar .wrap { display: flex; align-items: center; gap: 12px; height: 58px; }
.logo {
  width: 36px; height: 36px; border-radius: 9px; flex: none; background: var(--accent);
  display: grid; place-items: center; color: var(--accent-ink); font-weight: 800; font-size: 18px;
}
.appbar h1 { font-size: 16px; margin: 0; font-weight: 700; letter-spacing: -.02em; }
.appbar .addr { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.appbar .admin-link {
  margin-left: auto; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line-strong); padding: 6px 11px; border-radius: 7px;
}

/* ---------- progress ---------- */
.progress { padding: 20px 0 4px; }
.segs { display: flex; gap: 5px; }
.seg { height: 3px; flex: 1; background: var(--line-strong); border-radius: 2px; transition: background .25s; }
.seg.on { background: var(--accent); }
.pcap { margin-top: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); }

/* ---------- headings ---------- */
.eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin: 14px 0 8px; }
.steptitle { font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin: 6px 0 6px; text-wrap: balance; }
.stepsub { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.stepwrap { animation: rise .28s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stepwrap, .done, .done .ic { animation: none; } }

.grouplbl { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--faint); font-weight: 600; margin: 24px 0 11px; display: flex; align-items: center; gap: 10px; }
.grouplbl::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- brand tiles ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.brand-tile {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 15px 8px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  transition: border-color .14s, background .14s;
}
.brand-tile:active { background: var(--surface-2); }
.brand-tile.sel { border-color: var(--accent); background: var(--accent-tint); }
.brand-mark { width: 26px; height: 26px; display: grid; place-items: center; color: var(--ink); }
.brand-tile.sel .brand-mark { color: var(--accent); }
.brand-mark .blogo { width: 26px; height: 26px; display: block; }
.brand-mark .initial { font-size: 17px; font-weight: 800; }
.brand-name { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }

/* ---------- option list ---------- */
.list { display: flex; flex-direction: column; gap: 8px; }
.opt {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 15px 16px; text-align: left; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  transition: border-color .14s, background .14s;
}
.opt:active { background: var(--surface-2); }
.opt.sel { border-color: var(--accent); background: var(--accent-tint); }
.check { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-strong); flex: none;
  display: grid; place-items: center; transition: .14s; }
.opt.sel .check, .svc.sel .check { background: var(--accent); border-color: var(--accent); }
.opt.sel .check::after, .svc.sel .check::after { content: '✓'; font-size: 12px; color: var(--accent-ink); font-weight: 800; }

.model-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.model-grid .opt { padding: 13px 14px; font-size: 13.5px; }

/* ---------- service cards ---------- */
.svc {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  transition: border-color .14s, background .14s; color: var(--ink);
}
.svc:active { background: var(--surface-2); }
.svc.sel { border-color: var(--accent); background: var(--accent-tint); }
.icon-badge { width: 44px; height: 44px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.icon-badge svg { width: 23px; height: 23px; }
.svc.sel .icon-badge { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.svc .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.svc .body .t { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; }
.svc .body .d { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.svc .price { flex: none; font-family: var(--mono); color: var(--ink); font-weight: 600; font-size: 14px; }
.svc.sel .price { color: var(--accent); }

/* ---------- date & time ---------- */
.dates { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.dates::-webkit-scrollbar { display: none; }
.date { flex: none; width: 60px; background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 10px; padding: 11px 0; text-align: center; transition: .14s; }
.date .dow { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.date .dnum { font-family: var(--mono); font-size: 21px; font-weight: 600; margin-top: 3px; letter-spacing: -.02em; }
.date .mon { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.date.sel { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.date.sel .dow, .date.sel .mon { color: color-mix(in srgb, var(--accent-ink) 78%, transparent); }

.times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; }
.time { background: var(--surface); border: 1.5px solid var(--line); border-radius: 9px;
  padding: 12px 0; text-align: center; font-weight: 500; font-size: 14px; font-family: var(--mono); transition: .12s; }
.time:active { background: var(--surface-2); }
.time.sel { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.time.off { opacity: .32; text-decoration: line-through; }

/* ---------- forms ---------- */
label.fld { display: block; margin: 16px 0; }
label.fld > span { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
input, textarea, select {
  width: 100%; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 13px 14px; color: var(--ink); font-size: 15px; font-family: inherit; transition: border-color .14s, box-shadow .14s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { min-height: 90px; resize: vertical; }

/* ---------- summary (ordem de serviço) ---------- */
.summary { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 4px 16px 16px; box-shadow: var(--shadow); position: relative; }
.summary::before { content: 'ORÇAMENTO'; display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; color: var(--faint); padding: 13px 0 12px; border-bottom: 1.5px dashed var(--line-strong); margin-bottom: 6px; }
.summary .row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; }
.summary .row .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); flex: none; }
.summary .row > span:last-child { text-align: right; font-weight: 500; }
.summary .tot { border-top: 1.5px dashed var(--line-strong); margin-top: 8px; padding-top: 14px; align-items: baseline; }
.summary .tot > span:first-child { font-weight: 700; font-size: 15px; }
.summary .tot .v { font-family: var(--mono); font-size: 23px; font-weight: 600; color: var(--accent); letter-spacing: -.02em; }

/* ---------- bottom bar ---------- */
.bottombar { position: sticky; bottom: 0; z-index: 20; margin-top: 24px;
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 13px 0 calc(13px + env(safe-area-inset-bottom)); }
.bottombar .wrap { display: flex; align-items: center; gap: 14px; }
.est { flex: 1; min-width: 0; }
.est .lbl { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.est .val { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1.15; }
.btn { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 10px;
  padding: 14px 22px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; transition: filter .14s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn:hover { filter: brightness(1.06); }
.btn:disabled { background: var(--line-strong); color: var(--faint); cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--muted); border: 1.5px solid var(--line-strong); }
.btn.block { width: 100%; }
.btn.wa { background: #128c4a; color: #fff; }
.btn-row { display: flex; gap: 10px; }

/* ---------- back / success / misc ---------- */
.back { background: none; border: none; color: var(--muted); font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em; padding: 10px 0 2px; }
.back:active { color: var(--ink); }
.done { text-align: center; padding: 40px 0 8px; animation: rise .35s ease both; }
.done .ic { width: 76px; height: 76px; border-radius: 16px; background: var(--accent); display: grid; place-items: center;
  font-size: 38px; color: var(--accent-ink); margin: 0 auto 22px; animation: pop .45s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.done h2 { margin: 0 0 10px; font-size: 25px; font-weight: 800; letter-spacing: -.03em; }
.done p { color: var(--muted); margin: 6px 0; font-size: 14.5px; }
.done .proto { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.empty { text-align: center; color: var(--muted); padding: 34px 12px; font-size: 14px; }
.hint { font-size: 12.5px; color: var(--faint); margin-top: 11px; line-height: 1.5; }
.section-gap { height: 20px; }

/* ============ admin ============ */
.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line);
  position: sticky; top: env(safe-area-inset-top); background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); z-index: 10; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 15px 13px; border-bottom: 2px solid transparent; letter-spacing: -.01em; }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.adminbar { display: flex; align-items: center; gap: 10px; padding: calc(16px + env(safe-area-inset-top)) 0 8px; }
.adminbar h1 { font-size: 19px; margin: 0; flex: 1; font-weight: 800; letter-spacing: -.03em; }
.card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 11px; box-shadow: var(--shadow); }
.card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card .name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.card .meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.card .meta.mono, .card .mono { font-family: var(--mono); }
.badge { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 4px 9px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; border: 1px solid transparent; }
.b-pending { background: color-mix(in srgb, var(--warn) 15%, var(--surface)); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.b-confirmed { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.b-done { background: var(--surface-2); color: var(--muted); border-color: var(--line-strong); }
.b-cancelled { background: color-mix(in srgb, var(--err) 14%, var(--surface)); color: var(--err); border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.row2 { display: flex; gap: 10px; }
.row2 > * { flex: 1; }
.mini { font-size: 12.5px; padding: 9px 12px; border-radius: 8px; }
.iconbtn { background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--muted);
  border-radius: 8px; padding: 9px 13px; font-size: 13px; font-weight: 600; transition: .12s; }
.iconbtn:active { background: var(--surface-2); }
.iconbtn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--line-strong)); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.toolbar select, .toolbar input { width: auto; flex: 1; min-width: 120px; padding: 10px 12px; font-size: 13px; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.switch input { width: auto; accent-color: var(--accent); }
.modal-bg { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(3px); display: grid; place-items: end center; z-index: 50; animation: fade .18s both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--surface); border-top: 1.5px solid var(--line); border-radius: 20px 20px 0 0;
  width: 100%; max-width: var(--maxw); padding: 22px 18px calc(26px + env(safe-area-inset-bottom));
  max-height: 90vh; overflow-y: auto; box-shadow: 0 -20px 50px -24px rgba(0,0,0,.4); animation: rise .26s ease both; }
.modal h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.addrow { display: flex; gap: 8px; margin: 10px 0; }
.addrow input, .addrow select { flex: 1; }
.wk { display: grid; grid-template-columns: 46px 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 9px; }
.wk .d { font-family: var(--mono); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.wk input[type=time] { padding: 9px; font-size: 13px; }
.login-box { max-width: 340px; margin: 16vh auto 0; text-align: center; }
.login-box .logo { width: 56px; height: 56px; border-radius: 14px; font-size: 26px; margin: 0 auto 18px; }
.login-box h2 { letter-spacing: -.03em; font-weight: 800; }
.pill-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pill-btns .btn { flex: 1; padding: 12px; font-size: 13px; }
.summary .row span:last-child { font-family: inherit; }