/* ---------- Início ---------- */
.home{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:stretch}

/* lista limpa com rolagem: mostra --linhas itens e o resto rola com a roda do mouse */
.vazio-h{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 20px 30px;text-align:center;color:var(--muted);font-size:13px}
.vazio-h > .ic{color:var(--faint);margin-bottom:4px}
.vazio-h b{color:var(--ink);font:650 14.5px/1.3 var(--font-display)}
.vazio-h .btn{margin-top:8px}
.lista-limpa{position:relative;max-height:calc(var(--linhas) * 62px + 10px);overflow-y:auto;padding:0 10px 10px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.ll{display:flex;align-items:center;gap:16px;width:100%;min-height:62px;padding:10px 12px;border:0;border-radius:12px;background:none;color:inherit;text-align:left}
.ll:hover{background:var(--raised)}
.ll-t{flex:1;min-width:0}
.ll-t b{display:block;font-size:14.5px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ll-t small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ll-t em{font-style:normal;font-weight:600}
.ll-t em.live{color:var(--accent-text)}
.ll-t em.aguardando{color:var(--warn)}
.ll-t em.noshow{color:var(--bad)}
.ll-v{font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.ll.passou b,.ll.passou .ll-v{color:var(--muted);font-weight:600}
.rolagem{max-height:calc(var(--linhas) * 59px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.rolagem .li{min-height:59px}
.lista-limpa::-webkit-scrollbar,.rolagem::-webkit-scrollbar{width:6px}
.lista-limpa::-webkit-scrollbar-thumb,.rolagem::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.panel-h.limpo{border-bottom:0;padding-bottom:8px}
.acoes-h{display:flex;align-items:center;gap:6px}
.cont{margin-left:10px;font:500 12.5px var(--font-ui);color:var(--muted);letter-spacing:0}
.link{padding:6px 10px;border:0;border-radius:8px;background:none;color:var(--accent-text);font-size:13px;font-weight:700}
.link:hover{background:var(--accent-soft)}
/* estado agora (Profissionais) */
.bp-agora{display:flex;align-items:center;gap:9px;min-height:36px;padding:0 12px;border-radius:10px;background:var(--raised);font-size:13px;color:var(--ink-2)}
.bp-q{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-q b{color:var(--ink);font-weight:700}
.bp-t{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.bp-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--faint)}
.bp-dot.livre{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.bp-dot.espera{background:var(--warn);box-shadow:0 0 0 4px var(--warn-soft)}
.todo{display:flex;flex-direction:column}
.todo-i{display:flex;align-items:center;gap:12px;width:100%;padding:12px 18px;border:0;border-top:1px solid var(--line);background:none;text-align:left}
.todo-i:first-child{border-top:0}
.todo-i:hover{background:var(--raised)}
.todo-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--sunken);color:var(--ink-2)}
.todo-ic.warn{background:var(--warn-soft);color:var(--warn)}
.todo-ic.bad{background:var(--bad-soft);color:var(--bad)}
.todo-ic.acc{background:var(--accent-soft);color:var(--accent-text)}
.todo-t{flex:1;min-width:0}
.todo-t b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.todo-t small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo-i > .ic:last-child{color:var(--faint)}
.todo-ok{display:flex;align-items:center;gap:10px;padding:16px 18px;color:var(--muted);font-size:13px}

.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid var(--line);min-width:0}
.li:first-child{border-top:0}
.li.btnlike{width:100%;border-left:0;border-right:0;border-bottom:0;background:none;text-align:left}
.li.btnlike:first-child{border-top:0}
.li.btnlike:hover{background:var(--raised)}
.li-t{flex:1;min-width:0}
.li-t b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-t small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-time{font:650 15px/1 var(--font-display);font-stretch:112%;font-variant-numeric:tabular-nums;width:48px;flex:none}
.li-r{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.prog{display:block;width:64px;height:4px;border-radius:2px;background:var(--line);margin-top:6px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent-fill)}

/* card de destaque: escuro nos dois modos, com brilho da cor primária */
.promo{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:12px;padding:22px 20px 20px;border-radius:18px;color:#F4F3FA;
  background:radial-gradient(120% 90% at 90% 0%, color-mix(in oklab, var(--accent) 45%, #1C1A2B), #1C1A2B 62%)}
.promo .tag{align-self:flex-start;height:auto;padding:6px 14px;border-radius:9px;background:var(--accent-fill);color:#fff;font-size:12px;font-weight:700}
.card .cobre{display:flex;align-items:flex-start;gap:6px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.card .cobre .ic{flex:none;margin-top:2px;color:var(--ok)}
.promo h3{font:700 19px/1.25 var(--font-display);letter-spacing:-.01em;max-width:24ch}
.promo p{font-size:13px;line-height:1.55;color:#B8B4CC}
.promo .btn.primary{margin-top:auto}
.promo .ceu{position:absolute;inset:0;z-index:-1;width:100%;height:100%}

/* ---------- Agenda ---------- */
/* Grade por barbeiro: a coluna fica no tom do fundo e os cards saltam dela, com uma faixa na
   lateral que diz o estado. Hora e nome em cima, serviço e etiqueta embaixo. */
.cal{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;min-width:0;box-shadow:var(--shadow-sm)}
.cal-bar{display:flex;align-items:center;gap:10px 14px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dia-nav{display:flex;align-items:center;gap:6px}
.dia-nav .icon-btn{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.dia-nav .icon-btn:hover:not(:disabled){border-color:var(--accent-mid);color:var(--accent-text)}
.dia-nav .icon-btn:disabled{opacity:.35;cursor:default}
.dia-atual{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:11px;background:var(--raised);border:1px solid var(--line)}
.dia-atual b{font:680 14px/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.dia-atual small{font-size:12px;font-weight:600;color:var(--accent-text)}
.sel-barb{display:inline-flex;align-items:center;height:36px;padding-left:12px;border-radius:11px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;color:var(--muted)}
.sel-barb span::after{content:":"}
.sel-barb select.input{height:34px;width:auto;border:0;background-color:transparent;padding:0 30px 0 6px;font-weight:650;color:var(--ink);box-shadow:none}
.sel-barb:focus-within{outline:2px solid var(--accent-fill);outline-offset:1px}
.sel-barb select.input:focus{outline:none}
.ag-resumo{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12.5px;color:var(--muted)}
.ag-resumo b{color:var(--ink);font-weight:680;font-variant-numeric:tabular-nums}
.btn.trava{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in oklab, var(--bad) 28%, transparent)}
.btn.trava:hover{background:color-mix(in oklab, var(--bad-soft) 80%, var(--bad))}
.btn.trava .ic{color:var(--bad)}

.legend{display:flex;gap:8px 18px;flex-wrap:wrap;padding:11px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.lg{--c:var(--accent-fill);width:16px;height:11px;border-radius:3px;display:inline-block;background:var(--surface);box-shadow:inset 3px 0 0 var(--c),inset 0 0 0 1px var(--line-2)}
.lg-live{background:var(--accent-fill);box-shadow:none}
.lg-done{--c:var(--ok);background:var(--raised)}
.lg-falta{--c:var(--bad)}
.lg-bloq{background:repeating-linear-gradient(135deg,var(--line-2) 0 2px,var(--surface) 2px 5px);box-shadow:inset 0 0 0 1px var(--line-2)}

.cal-scroll{overflow:auto;max-height:max(560px, calc(100vh - 240px));overscroll-behavior:contain}
.cal-grid{display:grid;grid-template-columns:64px repeat(var(--cols),minmax(210px,1fr));min-width:min-content}
.cal-hd{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:11px;min-width:0;padding:12px 14px;background:var(--surface);border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.cal-hd.gut{left:0;z-index:6;border-left:0}
.hd-ini{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--accent-fill);color:var(--on-accent);font:700 14px/1 var(--font-display);box-shadow:var(--glow)}
.hd-ini.com-foto{overflow:hidden;background:var(--sunken)}
.hd-ini.com-foto img{display:block;width:100%;height:100%;object-fit:cover}
.hd-t{min-width:0;flex:1}
.hd-n{font:680 15px/1.2 var(--font-display);font-stretch:112%}
.hd-s{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-s .pole{display:inline-block;vertical-align:-1px;margin-right:6px}
.hd-n2{min-width:26px;height:22px;padding:0 8px;border-radius:999px;display:grid;place-items:center;background:var(--sunken);color:var(--ink-2);font-size:11.5px;font-weight:680;font-variant-numeric:tabular-nums}
.cal-gut{position:sticky;left:0;z-index:3;background:var(--surface);border-right:1px solid var(--line)}
.hr{position:absolute;right:10px;transform:translateY(-50%);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.hr.cheia{font-size:11.5px;font-weight:650;color:var(--muted)}
.now-pill{position:absolute;right:6px;transform:translateY(-50%);z-index:2;padding:3px 7px;border-radius:7px;background:var(--accent-fill);color:var(--on-accent);font-size:10.5px;font-weight:680;font-variant-numeric:tabular-nums;box-shadow:var(--glow)}
/* linhas: cheia a cada hora, fraca a cada 20 minutos (--px e --topo vêm da grade) */
.cal-col{position:relative;background-color:var(--paper);
  background-image:linear-gradient(to bottom,var(--line) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in oklab, var(--line) 45%, transparent) 1px,transparent 1px);
  background-size:100% calc(var(--px) * 60),100% calc(var(--px) * 20);background-position:0 var(--topo),0 var(--topo)}
.cal-col + .cal-col{border-left:1px solid var(--line)}
.cal-col.clickable{cursor:copy}
.now{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--accent-fill);z-index:0;pointer-events:none}
.now.first::before{content:"";position:absolute;left:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--accent-fill)}
.blk{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:6px;background:repeating-linear-gradient(135deg,color-mix(in oklab, var(--line-2) 70%, transparent) 0 1px,transparent 1px 9px);font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.encaixe{position:absolute;left:6px;right:6px;height:28px;border-radius:9px;border:1.5px dashed var(--accent-text);color:var(--accent-text);font-size:12px;font-weight:650;display:flex;align-items:center;padding:0 10px;pointer-events:none;background:var(--accent-soft);z-index:2}
.cal-fechado{display:flex;flex-direction:column;align-items:center;gap:8px;padding:72px 20px;text-align:center;color:var(--muted)}
.cal-fechado b{font:650 16px/1.3 var(--font-display);color:var(--ink)}

.appt{--barra:var(--accent-fill);position:absolute;left:6px;right:6px;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;gap:3px;overflow:hidden;padding:8px 10px 8px 16px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:left;box-shadow:var(--shadow-sm);transition:box-shadow .15s, transform .15s}
.appt::before{content:"";position:absolute;left:6px;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--barra)}
.appt:hover{box-shadow:var(--shadow);transform:translateY(-1px);z-index:4}
.a-l1{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;line-height:1.3}
.a-l1 b{font-weight:720;font-variant-numeric:tabular-nums;flex:none}
.a-l1 .ic{flex:none}
.a-n{font-weight:620;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-l1 b + .a-n::before{content:"·";margin-right:6px;color:var(--faint);font-weight:400}
.a-link{margin-left:auto;display:inline-flex;color:var(--muted)}
.a-l2{display:flex;align-items:center;flex-wrap:wrap;gap:3px 6px;min-width:0} /* sem espaço, a etiqueta desce: o serviço não some */
.a-s{flex:0 1 auto;font-size:12px;color:var(--muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-tags{display:flex;gap:4px;flex:none}
.tag{display:inline-flex;align-items:center;gap:3px;height:19px;padding:0 7px;border-radius:999px;background:var(--sunken);color:var(--ink-2);font-size:10.5px;font-weight:680;white-space:nowrap}
.tag .ic{width:11px;height:11px}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.bad{background:var(--bad-soft);color:var(--bad)}
.tag.acc{background:var(--accent-soft);color:var(--accent-text)}
.appt.short{flex-direction:row;align-items:center;padding-block:0}
.appt.short::before{top:6px;bottom:6px}
.appt.short .a-l2{display:none}
.appt.is-done{--barra:var(--ok);background:var(--raised);box-shadow:none}
.appt.is-done .a-n,.appt.is-done .a-l1 b{color:var(--ink-2)}
.appt.is-noshow{--barra:var(--bad);background:var(--surface) repeating-linear-gradient(135deg,color-mix(in oklab, var(--bad-soft) 70%, transparent) 0 6px,transparent 6px 12px);box-shadow:none}
.appt.is-noshow .a-n{text-decoration:line-through;color:var(--muted)}
.appt.is-aguardando{--barra:var(--warn);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--warn) 55%, transparent)}
.appt.is-live{--barra:rgb(255 255 255 / .75);z-index:3;border-color:transparent;color:var(--on-accent);background-color:var(--accent-fill);
  background-image:repeating-linear-gradient(135deg,transparent 0 10px,rgb(255 255 255 / .08) 10px 20px);background-size:100% 28.284px;
  animation:pole-lg 1.5s linear infinite;box-shadow:0 10px 22px -8px color-mix(in oklab, var(--accent) 70%, transparent)}
.appt.is-live .a-s,.appt.is-live .a-link,.appt.is-live .a-l1 b + .a-n::before{color:var(--on-accent)}
.tag.vivo{background:none;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .7);color:#fff}
@keyframes pole-lg{to{background-position:0 -28.284px}}
.appt.is-bloq{--barra:var(--faint);background:repeating-linear-gradient(135deg,var(--sunken) 0 6px,var(--surface) 6px 12px);box-shadow:none;color:var(--muted)}
.appt.is-bloq .a-l1 b{color:var(--ink-2)}
.appt.exemplo{opacity:.8}
.appt.exemplo:hover{opacity:1}
.appt.flash{animation:flash 1.1s ease 3}
@keyframes flash{50%{box-shadow:0 0 0 4px var(--accent-mid)}}

.rail{display:flex;flex-direction:column;gap:16px;min-width:0}

/* ---------- gaveta: atendimento e cliente ---------- */
.dw-id{display:flex;align-items:center;gap:14px}
.dw-id h2{font:720 24px/1.1 var(--font-display);font-stretch:118%;letter-spacing:-.025em}
.dw-id p{font-size:13px;color:var(--muted);margin-top:3px}
.kv3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kv3 > div{background:var(--surface);padding:12px 14px;min-width:0}
.kv3 dt{font-size:11.5px;color:var(--muted)}
.kv3 dd{font:650 16px/1.3 var(--font-display);font-stretch:112%;font-variant-numeric:tabular-nums;margin-top:3px}
.kv3 dd small{display:block;font:400 11.5px var(--font-ui);color:var(--muted)}
.ficha{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ficha-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--raised);border-bottom:1px solid var(--line)}
.ficha dl{display:grid;grid-template-columns:112px minmax(0,1fr);padding:4px 16px}
.ficha dt,.ficha dd{padding:10px 0;border-top:1px dashed var(--line-2);font-size:13.5px}
.ficha dt{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding-top:12px}
.ficha dl > :nth-child(1),.ficha dl > :nth-child(2){border-top:0}
.ficha-f{padding:10px 16px 12px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.obs{padding:12px 14px;border-radius:12px;background:var(--warn-soft);color:var(--ink-2);font-size:13px;display:flex;gap:10px}
.obs .ic{color:var(--warn);margin-top:2px}
.hist li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.hist li:first-child{border-top:0}
.hist .d{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px}
.pay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pay-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:74px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);font-size:13px;font-weight:600}
.pay-b:hover:not(:disabled){border-color:var(--accent-text);background:var(--accent-soft);color:var(--accent-text)}
.pay-b:disabled{opacity:.45}
.pay-b small{font-size:11px;font-weight:500;color:var(--muted)}
.rows{display:flex;flex-direction:column}
.rows > div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.rows > div:first-child{border-top:0}
.rows dt{color:var(--muted)}
.rows dd{font-weight:560;text-align:right}

/* ---------- modal de novo agendamento ---------- */
.picks{display:flex;gap:6px;flex-wrap:wrap}
.pick{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);font-size:13px;font-weight:550}
.pick small{font-weight:450;color:var(--muted);font-size:11.5px}
.pick:hover:not(:disabled){border-color:var(--ink-2)}
.pick[aria-pressed="true"]{border-color:var(--accent-text);background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent-text)}
.pick:disabled{opacity:.4}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px}
.slot{height:36px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);font-size:13px;font-weight:560;font-variant-numeric:tabular-nums}
.slot:hover{border-color:var(--ink-2)}
.slot[aria-pressed="true"]{background:var(--accent-fill);border-color:transparent;color:var(--on-accent)}
.sug{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.sel-cli{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--raised)}
.sel-cli > div{flex:1;min-width:0}

/* ---------- cadastros ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.toolbar .input{max-width:320px}
.pros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pro{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:18px;min-width:0}
.pro-h{display:flex;gap:14px;align-items:center}
.pro-h > div{flex:1;min-width:0}
.pro-n{font:720 21px/1.1 var(--font-display);font-stretch:125%;letter-spacing:-.025em}
.pro-s{font-size:12.5px;color:var(--muted)}
.kvs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kvs.dois{grid-template-columns:repeat(2,minmax(0,1fr))}
.kvs dt{font-size:11.5px;color:var(--muted)}
.kvs dd{font:650 17px/1.3 var(--font-display);font-stretch:112%;font-variant-numeric:tabular-nums}
.stock{display:flex;align-items:center;gap:10px}
.stock .nivel{width:72px;height:6px;border-radius:3px;background:var(--line);overflow:hidden;flex:none}
.stock .nivel i{display:block;height:100%;background:var(--accent-fill);border-radius:3px}
.stock .nivel i.warn{background:var(--c-o)}
.stock .nivel i.bad{background:var(--bad)}
.stock b{font-variant-numeric:tabular-nums;width:22px}
.stack{display:flex}
.stack .av{box-shadow:0 0 0 2px var(--surface)}
.stack .av + .av{margin-left:-3px}

.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card > .kebab{position:absolute;top:14px;right:12px}
.card-n{font:700 18px/1.2 var(--font-display);font-stretch:118%;letter-spacing:-.015em}
.card p{font-size:13px;color:var(--muted);flex:1}
.price{display:flex;align-items:baseline;gap:4px}
.price b{font:720 30px/1 var(--font-display);font-stretch:118%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price span{color:var(--muted);font-size:13px}
.card-f{display:flex;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.card-f b{color:var(--ink);font-weight:600}

/* ---------- financeiro ---------- */
.fin{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.sum > div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;font-size:13.5px}
.sum dt{color:var(--muted)}
.sum dd{font-variant-numeric:tabular-nums;font-weight:560}
.sum .tot{border-top:1px solid var(--line-2);margin-top:4px;padding-top:12px}
.sum .tot dt{color:var(--ink);font-weight:600}
.sum .tot dd{font:700 20px/1 var(--font-display);font-stretch:112%}
.hero-n{font:740 44px/1 var(--font-display);font-stretch:125%;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.chart{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:230px auto;column-gap:10px;padding:18px 18px 14px}
.ch-y{position:relative}
.ch-y span{position:absolute;right:0;transform:translateY(50%);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ch-plot{position:relative}
.chart{--bar:color-mix(in oklab, var(--accent) 32%, #DCD8FF)}
.ch-plot > i{position:absolute;left:0;right:0;height:1px;background:repeating-linear-gradient(to right,var(--line-2) 0 4px,transparent 4px 9px)}
.ch-plot > i.base{background:var(--line-2)}
.ch-bars{position:absolute;inset:0;display:flex;gap:clamp(2px,.55vw,8px);align-items:stretch}
.bar{position:relative;flex:1;display:flex;align-items:flex-end;min-width:0;outline:none}
.bar .b{width:100%;height:var(--h);min-height:2px;border-radius:7px 7px 3px 3px;background:linear-gradient(to top,color-mix(in oklab, var(--bar) 18%, transparent),var(--bar))}
.bar.best .b{background:linear-gradient(to top,var(--accent-2),var(--accent-fill));box-shadow:0 10px 24px -10px var(--accent-fill)}
.bar.best .b::before{content:"";position:absolute;left:50%;top:calc(100% - var(--h) - 5px);width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 3px var(--c-m)}
.bar.today .b{background:repeating-linear-gradient(135deg,color-mix(in oklab, var(--bar) 55%, transparent) 0 4px,transparent 4px 8px);box-shadow:inset 0 0 0 1.5px var(--bar)}
.bar.closed .b{background:var(--line-2)}
.bar:hover .b,.bar:focus-visible .b{filter:brightness(1.12) saturate(1.2)}
.bar .top-l{position:absolute;left:50%;bottom:calc(var(--h) + 14px);transform:translateX(-50%);z-index:2;padding:4px 9px;border-radius:999px;background:var(--c-m);color:#fff;font-size:11.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 6px 16px -6px var(--c-m)}
.tip{position:absolute;left:50%;bottom:calc(var(--h) + 10px);transform:translateX(-50%);z-index:3;padding:7px 10px;border-radius:9px;background:var(--ink);color:var(--paper);font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
.tip b{display:block;font-size:13.5px;font-variant-numeric:tabular-nums}
.tip em{font-style:normal;opacity:.7}
.bar.l .tip{left:0;transform:none}
.bar.r .tip{left:auto;right:0;transform:none}
.bar:hover .tip,.bar:focus-visible .tip{opacity:1}
.bar:hover .top-l,.bar:focus-visible .top-l{opacity:0}
.ch-x{grid-column:2;display:flex;gap:3px;padding-top:8px}
.ch-x span{flex:1;min-width:0;text-align:center;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;overflow:visible;white-space:nowrap}
.ch-x span.hoje{color:var(--accent-text);font-weight:650}
.hbar{display:flex;align-items:center;gap:10px}
.hbar .bar-t{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden;min-width:60px}
.hbar .bar-t i{display:block;height:100%;background:var(--ink-2);border-radius:3px}

/* ---------- página de agendamento ---------- */
.pg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:start}
.pg-info{max-width:460px;display:flex;flex-direction:column;gap:22px;padding-top:6px}
.lead{font-size:15px;color:var(--ink-2);line-height:1.6}
.linkbox{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:14px;min-width:0}
.linkbox span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.linkbox b{color:var(--ink);font-weight:600}
.phone{width:380px;height:780px;flex:none;border-radius:54px;padding:11px;background:var(--bezel);box-shadow:0 0 0 1px var(--line-2),0 40px 70px -30px rgb(0 0 0 / .45);position:relative}
.phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);z-index:5;width:98px;height:27px;border-radius:20px;background:var(--bezel)}
.scr{height:100%;border-radius:43px;overflow:hidden;background:var(--paper);display:flex;flex-direction:column}
.scr-body{flex:1;overflow-y:auto;padding:60px 18px 20px;display:flex;flex-direction:column;gap:20px;scrollbar-width:none}
/* coluna que rola: sem isso, o que tem overflow próprio (menu de atalhos, carrosséis) é esmagado */
.scr-body > *{flex-shrink:0}
.scr-foot{padding:12px 16px 24px;border-top:1px solid var(--line);background:var(--surface)}
.pub-n{font:760 25px/1.02 var(--font-display);font-stretch:125%;letter-spacing:-.035em}
.steps{display:flex;gap:4px}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--line)}
.steps i.on{background:var(--accent-fill)}
.pub-t{font:700 17px/1.2 var(--font-display);font-stretch:118%;letter-spacing:-.015em}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface);text-align:left}
.opt:hover:not(:disabled){border-color:var(--line-2)}
.opt[aria-pressed="true"]{border-color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent-text);background:var(--accent-soft)}
.opt:disabled{opacity:.55}
.o-t{flex:1;min-width:0}
.o-n{display:block;font-weight:600;font-size:14px}
.o-s{display:block;font-size:12px;color:var(--muted)}
.o-p{font-weight:650;font-size:14px;font-variant-numeric:tabular-nums}
.who-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.who-b{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px 12px;border-radius:13px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600}
.who-b small{font-size:11px;font-weight:450;color:var(--muted)}
.who-b[aria-pressed="true"]{border-color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent-text);background:var(--accent-soft)}
.days{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.day{flex:none;width:52px;padding:8px 0 7px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:1px}
.day b{font:680 18px/1.1 var(--font-display);font-stretch:112%;font-variant-numeric:tabular-nums}
.day small{font-size:11px;color:var(--muted)}
.day[aria-pressed="true"]{background:var(--accent-fill);color:var(--on-accent);border-color:transparent}
.day[aria-pressed="true"] small{color:rgb(255 255 255 / .82)}
.day:disabled{opacity:.4}
.slot-g{display:flex;flex-direction:column;gap:8px}
.slot-g h4{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* WhatsApp com máscara: selo verde quando o número está completo */
.tel-wrap{position:relative}
.campo-tel .input{padding-right:46px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tel-ok{position:absolute;right:12px;top:50%;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;opacity:0;transform:translateY(-50%) scale(.6);transition:opacity .15s,transform .15s;pointer-events:none}
.campo-tel.valido .tel-ok{opacity:1;transform:translateY(-50%) scale(1)}
.campo-tel.valido .input{border-color:color-mix(in oklab, var(--ok) 55%, var(--line-2))}
.done-mark{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--accent-fill);color:var(--on-accent)}
.pub-foot{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--muted);padding-top:4px}
.pub-foot .brand{font-size:12px;color:var(--muted)}

/* ---------- meu estabelecimento ---------- */
.dados{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.dados-col{display:flex;flex-direction:column;gap:14px;min-width:0}
/* barra de salvar: gruda no rodapé enquanto há alteração pendente */
.salvar{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:10px 10px 10px 18px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.salvar.sujo{border-color:var(--accent-mid);box-shadow:var(--shadow)}
.salvar:not(.sujo){position:static}
/* o aviso sobe para não tampar o Salvar */
body:has(.salvar.sujo) .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.salvar .btn:disabled{opacity:.5}
.salvar-st{margin-right:auto;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.salvar-st .ic{color:var(--ok)}
.salvar.sujo .salvar-st{color:var(--ink)}
.salvar-st i{width:8px;height:8px;border-radius:50%;background:var(--c-o);box-shadow:0 0 0 4px color-mix(in oklab, var(--c-o) 20%, transparent)}
.form-sec{display:flex;flex-direction:column;gap:16px;padding:20px;border-top:1px solid var(--line)}
.form-sec:first-child{border-top:0}
.form-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* logo: campo no formulário, lápis na prévia e o recorte */
.logo-campo{display:flex;align-items:center;gap:16px}
.logo-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.logo-acoes .hint{flex-basis:100%}
.logo-edit{position:relative;align-self:flex-start;display:inline-flex;padding:0;border:0;background:none;border-radius:18px}
.logo-edit .lapis{position:absolute;right:-7px;bottom:-7px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--ink-2);box-shadow:0 0 0 1px var(--line),var(--shadow-sm)}
.logo-edit::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgb(10 8 18 / .35);opacity:0;transition:opacity .15s}
.logo-edit:hover::after,.logo-edit:focus-visible::after{opacity:1}
.corte-area{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start}
.corte-lado{display:flex;flex-direction:column;gap:18px;min-width:0}
.quadro{position:relative;width:var(--qw);height:var(--qh);border-radius:var(--qr);overflow:hidden;flex:none;box-shadow:0 0 0 1px var(--line)}
.quadro img{position:absolute;max-width:none;user-select:none;pointer-events:none}
.quadro.grande{cursor:grab;touch-action:none}
.quadro.grande:active{cursor:grabbing}
.quadro.fundo-branco{background:#fff}
.quadro.fundo-preto{background:#0B0A10}
.quadro.fundo-transp{background:repeating-conic-gradient(#E6E5EE 0 25%,#fff 0 50%) 0 0/14px 14px}
.minis{display:flex;align-items:flex-end;gap:16px}
.minis > span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.faixa{width:100%;accent-color:var(--accent-fill)}
.prev{position:sticky;top:76px;display:flex;flex-direction:column;gap:14px}
.prev-card{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.prev-card .scr-body{padding:22px 18px;overflow:visible}

/* ---------- responsivo das telas ---------- */
@media (max-width:1280px){
  .home{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1180px){
  .fin,.dados{grid-template-columns:minmax(0,1fr)}
  .rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .prev{position:static}
  .pg{grid-template-columns:minmax(0,1fr);gap:28px}
  .pg-info{max-width:none}
}
@media (max-width:900px){
  .pros,.cards3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .rail{grid-template-columns:minmax(0,1fr)}
  .rolagem .li .chip{display:none}
  .panel-h:has(.cont){flex-wrap:nowrap}
  .sec-t:has(.cont){flex-direction:column;align-items:flex-start;gap:2px}
  .sec-t .cont{margin-left:0}
  .cal-scroll{max-height:70vh}
  .cal-grid{grid-template-columns:44px repeat(var(--cols),minmax(150px,1fr))}
  .cal-hd{padding:10px 8px;gap:8px}
  .hr{right:5px}
  .now-pill{right:2px;padding:3px 4px}
  .appt.mid.is-aguardando .a-s{display:none}
  .ag-resumo{margin-left:0;width:100%}
  /* card de 30 min no celular: só a etiqueta que pede ação cabe sem cortar */
  .appt.mid .tag:not(.warn):not(.vivo):not(.bad),.appt.is-live .tag.ok,.appt.is-live .tag.acc{display:none}
  .legend{gap:6px 14px}
  .phone{width:100%;height:auto;padding:0;border-radius:18px;background:none;box-shadow:none;border:1px solid var(--line)}
  .phone::before{display:none}
  .scr{border-radius:18px;height:auto}
  .scr-body{padding:22px 16px;overflow:visible}
  .form-2{grid-template-columns:minmax(0,1fr)}
  .corte-area{grid-template-columns:minmax(0,1fr);justify-items:center}
  .corte-lado{width:100%}
  .salvar{bottom:calc(80px + env(safe-area-inset-bottom,0px));padding-left:14px}
  body:has(.salvar.sujo) .toast{bottom:calc(154px + env(safe-area-inset-bottom,0px))}
  .salvar-st{display:none}
  .salvar .btn{flex:1}
  .kvs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-n{font-size:36px}
  .chart{grid-template-columns:40px minmax(0,1fr);padding-inline:12px}
}

/* ---------- cliente em cartão, no meio da tela ----------
   Limpo de propósito: sem capa, sem ícone colorido em cada número, sem degradê. Tipografia,
   linhas finas e uma cor só (o violeta) para o que importa. O topo fica preso ao rolar, com o
   nome e as ações sempre à mão. As entradas só animam ao abrir (.abrindo): o relógio redesenha
   a tela e o cartão não pode piscar a cada minuto. */
.drawer.centro{top:50%;left:50%;right:auto;bottom:auto;width:min(900px, 100% - 48px);max-height:min(840px, 100% - 48px);overflow:hidden;border:1px solid var(--line);border-radius:20px;
  transform:translate(-50%,-50%);box-shadow:0 40px 100px -30px rgb(10 8 18 / .45);animation:cf-abre .28s cubic-bezier(.2,.8,.2,1)}
@keyframes cf-abre{from{opacity:0;transform:translate(-50%,-48%) scale(.98)}}
.drawer.centro .dw-scroll{flex:0 1 auto;min-height:0}
.dw-scroll.cf{padding:0 0 28px;gap:0}

/* topo: foto, nome e ações; fica preso ao rolar */
.cf-topo{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:16px;padding:20px 20px 18px 28px;background:var(--surface);border-bottom:1px solid var(--line)}
.cf-av{position:relative;flex:none}
.cf-av .av{background:var(--sunken);color:var(--ink-2)}
.cf-coroa{position:absolute;right:-5px;bottom:-4px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:var(--accent-fill);color:#fff;box-shadow:0 0 0 3px var(--surface)}
.cf-coroa .ic{width:11px;height:11px}
.cf-nome{flex:1;min-width:0}
.cf-nome h2{font:720 22px/1.15 var(--font-display);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-apelido{font-weight:500;color:var(--muted)}
.cf-nome p{margin-top:3px;font-size:13px;color:var(--muted)}
.cf-acts{display:flex;align-items:center;gap:6px;flex:none}
.cf-acts .btn{height:36px}
.cf-acts .kebab,.cf-acts .icon-btn{width:36px;height:36px}
.cf-chips{padding:16px 28px 0}
.cf-botoes-m{display:none}

/* números: uma faixa só, dividida por linhas finas */
.cf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:16px 28px 0;border:1px solid var(--line);border-radius:14px}
.cf-stats > div{min-width:0;padding:14px 16px;border-left:1px solid var(--line)}
.cf-stats > div:first-child{border-left:0}
.cf-stats dt{font-size:12px;color:var(--muted)}
.cf-stats dd{margin-top:5px;font:700 17px/1.2 var(--font-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-stats span{display:block;margin-top:2px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-stats .alerta dd,.cf-stats .alerta span{color:var(--bad)}

/* seções: título discreto em caixa alta, conteúdo com linhas finas */
.cf-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.cf-t h3{font-size:11.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cf-t small{font-size:12px;color:var(--muted)}
.cf-vazio{padding:12px 0;font-size:13px;color:var(--muted)}

/* ritmo */
.cf-ritmo{margin:22px 28px 0}
.cf-rt-leg{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}
.cf-rt-leg i{width:8px;height:8px;border-radius:50%;background:var(--accent-fill)}
.cf-rt-leg i.p{margin-left:8px;background:none;border:1.5px dashed var(--ok)}
.cf-ritmo.atrasado .cf-rt-leg i.p{border-color:var(--bad)}
.cf-rt-pista{position:relative;height:70px;margin:0 40px}
.cf-rt-base{position:absolute;left:-40px;right:-40px;top:32px;height:1px;background:var(--line-2);transform-origin:left}
.cf-rt-atraso{position:absolute;top:31px;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--bad) 0 5px,transparent 5px 9px)}
.cf-rt-v,.cf-rt-hoje,.cf-rt-prox{position:absolute;top:32px;transform:translate(-50%,-50%);display:grid;place-items:center}
.cf-rt-v i{width:10px;height:10px;border-radius:50%;background:var(--accent-fill);box-shadow:0 0 0 3px var(--surface)}
.cf-rt-v small,.cf-rt-prox small{position:absolute;top:14px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.cf-rt-hoje i{width:1.5px;height:24px;background:var(--ink)}
.cf-rt-hoje.cheio i{width:12px;height:12px;border-radius:50%;background:var(--accent-fill);box-shadow:0 0 0 3px var(--surface),0 0 0 5px color-mix(in oklab, var(--accent) 30%, transparent)}
.cf-rt-hoje small{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:700;color:var(--ink)}
.cf-rt-prox i{width:14px;height:14px;border-radius:50%;border:1.5px dashed var(--ok);background:var(--surface)}
.cf-rt-prox small{color:var(--ok);font-weight:650}
.cf-rt-prox.atr i{border-color:var(--bad)}
.cf-rt-prox.atr small{color:var(--bad)}
.cf-rt-nota{display:none}
.drawer.abrindo .cf-rt-base{animation:cf-risca .8s cubic-bezier(.2,.7,.2,1) .1s both}
@keyframes cf-risca{from{transform:scaleX(0)}}
.drawer.abrindo .cf-rt-v,.drawer.abrindo .cf-rt-hoje,.drawer.abrindo .cf-rt-prox{animation:cf-surge .4s ease calc(.3s + var(--i, 6) * .06s) both}
.drawer.abrindo .cf-rt-atraso{animation:cf-surge .4s ease .7s both}
@keyframes cf-surge{from{opacity:0}}

/* duas colunas: ficha e histórico à esquerda, clube e contato à direita */
.cf-grade{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:32px;align-items:start;padding:26px 28px 0}
.cf-col{display:flex;flex-direction:column;gap:26px;min-width:0}
.cf-ficha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;margin:0}
.cf-ficha > div{padding:10px 0;border-top:1px solid var(--line)}
.cf-ficha dt{font-size:12px;color:var(--muted)}
.cf-ficha dd{margin-top:3px;font-size:14px;font-weight:600;line-height:1.4}
.cf-ficha-pe{margin-top:4px;font-size:12px;color:var(--faint)}
.cf-hist{margin:0;padding:0;list-style:none}
.cf-hist li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.cf-h-d{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cf-hist li.hoje .cf-h-d{color:var(--accent-text);font-weight:700}
.cf-h-t{min-width:0;font-size:13.5px}
.cf-h-t b{font-weight:600}
.cf-h-t small{margin-left:6px;font-size:12.5px;color:var(--muted)}
.cf-h-v{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* clube e pacote: cartão escuro e sóbrio */
.cf-cartao{display:flex;flex-direction:column;gap:2px;padding:16px 16px 14px;border-radius:14px;background:#16131F;color:#F4F3FA;border:1px solid #16131F}
[data-theme="dark"] .cf-cartao{background:#0F0D16;border-color:var(--line)}
.cf-c-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgb(255 255 255 / .55)}
.cf-c-top > span:first-child{display:inline-flex;align-items:center;gap:6px}
.cf-c-top .ic{width:14px;height:14px;color:#A78BFA}
.cf-cartao.pacote .cf-c-top .ic{color:#FFB067}
.cf-c-st{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;background:rgb(255 255 255 / .08);font-size:11px;font-weight:650;letter-spacing:0;text-transform:none;color:rgb(255 255 255 / .85)}
.cf-c-st i{width:6px;height:6px;border-radius:50%;background:#5FD39A}
.cf-c-st.warn i{background:#FFB547}
.cf-c-st.bad i{background:#FF6B5B}
.cf-c-plano{margin-top:12px;font:700 18px/1.2 var(--font-display);letter-spacing:-.01em;color:#fff}
.cf-c-preco{font-size:13px;color:rgb(255 255 255 / .6)}
.cf-c-preco small{font-size:12px}
.cf-c-uso{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12.5px;color:rgb(255 255 255 / .8)}
.cf-c-uso .pips i{background:rgb(255 255 255 / .16)}
.cf-c-uso .pips i.on{background:#A78BFA}
.cf-cartao.pacote .cf-c-uso .pips i.on{background:#FFB067}
.cf-c-pe{display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid rgb(255 255 255 / .1);font-size:12px;color:rgb(255 255 255 / .5)}
.cf-cartao.vazio{align-items:flex-start;gap:4px;background:none;color:var(--ink);border:1px dashed var(--line-2)}
.cf-cartao.vazio b{font-size:14px;font-weight:650}
.cf-cartao.vazio small{margin-bottom:8px;font-size:12.5px;color:var(--muted)}

.cf-dados{margin:0}
.cf-dados > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.cf-dados dt{color:var(--muted)}
.cf-dados dd{min-width:0;font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-dados dd small{font-weight:500;color:var(--muted)}

.drawer.abrindo .cf-chips,.drawer.abrindo .cf-stats,.drawer.abrindo .cf-ritmo,.drawer.abrindo .cf-grade{animation:cf-sobe .45s cubic-bezier(.2,.8,.2,1) both}
.drawer.abrindo .cf-stats{animation-delay:.04s}
.drawer.abrindo .cf-ritmo{animation-delay:.08s}
.drawer.abrindo .cf-grade{animation-delay:.12s}
@keyframes cf-sobe{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.drawer.centro,.drawer.centro *{animation:none!important;transition:none!important}}
@media (max-width:900px){
  .cf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-stats > div:nth-child(3){border-left:0}
  .cf-stats > div:nth-child(n+3){border-top:1px solid var(--line)}
  .cf-grade{grid-template-columns:minmax(0,1fr);gap:26px}
}
@media (max-width:760px){
  .drawer.centro{top:auto;left:0;right:0;bottom:0;width:100%;max-height:calc(100% - 20px);border-radius:20px 20px 0 0;border-bottom:0;transform:none;animation:cf-sobe-m .3s cubic-bezier(.2,.8,.2,1)}
  @keyframes cf-sobe-m{from{opacity:0;transform:translateY(50px)}}
  .cf-topo{gap:12px;padding:14px 12px 14px 18px}
  .cf-av .av{--s:48px!important}
  .cf-nome h2{font-size:19px}
  .cf-acts .btn{display:none}
  .cf-botoes-m{display:flex;gap:8px;padding:14px 18px 0}
  .cf-botoes-m .btn{flex:1}
  .cf-chips{padding:12px 18px 0}
  .cf-stats{margin:14px 18px 0}
  .cf-ritmo{margin:20px 18px 0}
  .cf-rt-pista{margin:0 28px}
  .cf-rt-base{left:-28px;right:-28px}
  .cf-rt-leg{display:none}
  .cf-rt-v small,.cf-rt-prox small{display:none}
  .cf-rt-v.pri small,.cf-rt-v.ult small{display:block}
  .cf-rt-nota{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12px;font-weight:650;color:var(--ok)}
  .cf-rt-nota.atr{color:var(--bad)}
  .cf-grade{padding:22px 18px 0}
  .cf-ficha{grid-template-columns:minmax(0,1fr)}
}

/* ---------- revisão de 30/09/2026: peças novas ---------- */
/* corrigir pagamento: a forma que está valendo fica marcada */
.pay-b.atual{border-color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent-text)}
/* ficha do corte: botões de escrever/editar ao lado do título */
.ficha-a{display:flex;align-items:center;gap:4px;margin-left:auto}
.cf-t:has(.btn){align-items:center}
/* Agenda: aviso de dia fechado com horário marcado */
.cal-aviso{margin:12px 14px 0}
/* caixa fechado e depois mexido */
.aviso-caixa{display:flex;gap:6px;align-items:flex-start;margin-top:10px;color:var(--warn)}
.aviso-caixa .ic{flex:none;margin-top:1px}
/* linha que já não vale (horário que o cliente cancelou) */
.li.passou{opacity:.62}
/* novo agendamento: os sete dias, com a data embaixo */
.picks.dias-nv .pick{flex-direction:column;justify-content:center;gap:0;height:44px;min-width:54px;padding:0 10px;line-height:1.2}
.picks.dias-nv .pick small{font-size:11px}
/* caixa de texto curta nos formulários (observações) */
textarea.input.curta{min-height:64px}
/* Meu estabelecimento: avisos do horário de funcionamento */
#d-hor-aviso{display:flex;flex-direction:column;gap:8px;margin-top:12px}
#d-hor-aviso:empty{display:none}

/* ---------- revisão visual de 30/09/2026 ---------- */
/* gráfico do mês: a etiqueta do melhor dia tem espaço em cima; dia que ainda não chegou é uma casa vazia */
.chart{padding-top:36px}
.bar.futura{pointer-events:none}
/* etiqueta do melhor dia nas pontas: alinha pela borda, para não sair do gráfico nem cobrir o eixo */
.bar.l .top-l{left:0;transform:none}
.bar.r .top-l{left:auto;right:0;transform:none}
/* tabelas que não cabem: saem as colunas de menos peso, e o assinante vira um bloco de duas linhas no celular */
.so-cel{display:none}
@media (max-width:1100px){
  .md-fora{display:none}
  .tb-assin .hide-sm{display:none}
  .tb-assin .show-sm{display:inline}
}
/* tablet: o celular da página de agendamento vem antes do texto, no meio */
@media (min-width:761px) and (max-width:1180px){
  .pg .phone{order:-1;justify-self:center}
}
@media (max-width:760px){
  .who .cell-t{white-space:normal}
  .stock .nivel{display:none}
  .so-cel{display:block}
  .tb-pac th:nth-child(2),.tb-pac td:nth-child(2){display:none}
  .tb-assin thead{display:none}
  .tb-assin tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}
  .tb-assin tr:last-child{border-bottom:0}
  .tb-assin td{padding:0;border:0;position:static}
  .tb-assin td.empty{grid-column:1 / -1;padding:16px 0}
  /* Clientes: o nome fica com o espaço que sobra, e o telefone não quebra no meio */
  .tb-cli td:first-child,.tb-cli th:first-child{width:100%}
  .tb-cli .cell-s{white-space:nowrap}
  .tbl-wrap th,.tbl-wrap td{padding-inline:10px}
  .tbl-wrap th.acts,.tbl-wrap td.acts{padding-left:2px;padding-right:8px}
  .tb-assin .who{min-height:40px}
  .dia-nav .icon-btn{width:40px;height:40px}
  /* texto de apoio dos indicadores quebra a linha em vez de cortar */
  .m-s{white-space:normal}
  /* alvos de toque: 40 px no mínimo */
  .btn.sm,.seg button,.pick,.check-i,.slot,.menu > button{min-height:40px}
  .kebab,.icon-btn{width:40px;height:40px}
  .dia-t,.link{min-height:40px}
  .dia-t{display:inline-flex;align-items:center}
  /* o aviso sobe para não cobrir o botão do rodapé da página do cliente */
  body:has(#phone .scr-foot) .toast{bottom:calc(152px + env(safe-area-inset-bottom,0px))}
}
/* seletor de hora e data no celular: diz qual campo está sendo escolhido */
.sel-nome{display:none;margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sel-pop.folha .sel-nome{display:block}

/* ---------- segunda conferência (01/10/2026) ---------- */
/* dois atendimentos que se cruzam na mesma coluna: o que começa depois fica recuado, e os dois continuam à mão */
.appt.sobre{left:38%;z-index:2;box-shadow:-3px 0 0 var(--paper), var(--shadow-sm)}
@media (max-width:760px){
  /* cabeçalho da coluna: a situação do barbeiro quebra em duas linhas em vez de cortar; o contador sai */
  .hd-s{white-space:normal;line-height:1.25}
  .hd-n2{display:none}
}
@media (max-width:760px){
  /* telas de confirmação da página do cliente (sem rodapé): o aviso vai para cima, fora do botão principal */
  body:has(#phone .tela-feito) .toast,body:has(#phone .tela-assinado) .toast{bottom:auto;top:calc(12px + env(safe-area-inset-top,0px))}
}
/* gaveta do atendimento: o título da ficha não quebra em duas linhas */
.ficha-h .sec-t{white-space:nowrap}

/* ---------- segunda conferência visual (01/10/2026) ---------- */
/* a régua de horas e o cabeçalho ficam por cima dos cards quando a grade rola de lado */
.cal-gut{z-index:5}
.cal-hd{z-index:6}
.cal-hd.gut{z-index:7}
/* aviso (toast): com a gaveta do atendimento aberta, fica ao lado dela, não em cima dos botões */
@media (min-width:761px){
  body:has(.drawer:not([hidden]):not(.centro)) .toast{left:16px;right:calc(min(460px, 100%) + 16px)}
}
@media (max-width:760px){
  /* no celular, com gaveta, modal ou a página do cliente na tela, o aviso vai para cima (os botões ficam embaixo) */
  body:has(.drawer:not([hidden])) .toast,body:has(.modal-wrap:not([hidden])) .toast,body:has(#phone .scr) .toast{bottom:auto;top:calc(12px + env(safe-area-inset-top,0px))}
  /* com a gaveta ou a página do cliente, logo abaixo da barra de cima (onde ficam o fechar e o voltar) */
  body:has(.drawer:not([hidden])) .toast,body:has(#phone .scr) .toast{top:calc(64px + env(safe-area-inset-top,0px))}
  /* filtros: a aba escolhida fica sempre à vista */
  .toolbar .seg{flex-wrap:wrap}
  .toolbar .input{max-width:none}
  /* assinantes: o botão de pagar não espreme o nome */
  .tb-assin tr{grid-template-columns:minmax(0,1fr) auto auto}
  .tb-assin td:first-child{grid-column:1 / 3}
  .tb-assin td:nth-child(3){grid-column:3;justify-self:end}
  .tb-assin td:nth-child(5){grid-column:1}
  .tb-assin td:last-child{grid-column:2 / 4}
  .tb-assin td.empty{grid-column:1 / -1}
  .m-l{white-space:normal}
  /* alvos de toque que tinham ficado abaixo de 40 px */
  .cf-acts .kebab,.cf-acts .icon-btn{width:40px;height:40px}
  .round.sm{width:40px;height:40px}
  .simnao button,.dia-h .input,.sel-barb .input,.sel-nav,.sel-tit{min-height:40px}
}
.md-h .icon-btn{flex:none}
/* Caixa: o cartão da gaveta ocupa a coluna inteira no tablet e no celular */
@media (max-width:1180px){ .fin .rail{display:grid !important} }
/* foco do teclado sempre visível */
.menu > button:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
.main{scroll-padding:84px 0 96px}
.promo :focus-visible,.pc-cover :focus-visible{outline-color:#fff}
/* textos que eram cortados com dado normal */
.metric .m-s,.todo-t small,.li-t small{white-space:normal}
.cf-nome h2{white-space:normal}
.cf-c-st{white-space:nowrap;flex:none}
.pro-h{flex-wrap:wrap}
p.hint > .ic{display:inline-block;vertical-align:-2px}
.cf-rt-hoje:not(.cheio) small{bottom:27px}
.corte-lado .seg{flex-wrap:wrap}
.input::placeholder{color:var(--muted)}
/* o poste da etiqueta "Na cadeira" continua claro no tema escuro */
.tag.vivo .pole{background-color:#fff;background-image:repeating-linear-gradient(135deg,var(--accent-fill) 0 4px,#fff 4px 8px)}

/* botão de copiar dentro da caixa do link */
.linkbox span{flex:1}
.lk-copiar{flex:none;display:grid;place-items:center;width:34px;height:34px;margin:-6px -6px -6px 0;border-radius:9px;border:1px solid var(--line);background:var(--paper);color:var(--muted);cursor:pointer}
.lk-copiar:hover{color:var(--ink);border-color:var(--accent-mid)}
.lk-copiar.ok{color:var(--ok);border-color:var(--ok)}
@media (max-width:760px){ .lk-copiar{width:40px;height:40px} }