/* AgendaBarber v4.5 — refinamento visual. Somente CSS. */
:root{
  --bg:#f2eee6;
  --card:#fffdfa;
  --border:#ddd6ca;
  --border-strong:#c9c0b2;
  --text:#25231f;
  --text-2:#66615a;
  --text-muted:#928b81;
  --barber-red:#7c3034;
  --barber-blue:#204866;
  --cream:#f6f0e5;
  --brass:#8c704b;
  --danger:#973f3f;
  --danger-bg:#faeeee;
  --success:#416438;
  --success-bg:#edf4e9;
  --radius:11px;
}

html{background:var(--bg);}
html::before{
  height:3px;
  opacity:.72;
  background:repeating-linear-gradient(135deg,
    var(--barber-red) 0 6px,
    #f8f4eb 6px 12px,
    var(--barber-blue) 12px 18px,
    #f8f4eb 18px 24px);
}

body{
  background:
    radial-gradient(circle at 50% -120px, rgba(32,72,102,.055), transparent 330px),
    linear-gradient(180deg,#f7f3ec 0,var(--bg) 260px);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Página principal */
body:not(.admin-page):not(.demo-page){
  max-width:560px;
  padding:22px 18px 34px;
}

.brand-lockup{
  gap:12px;
  margin:5px 0 16px;
  padding:2px 2px 0;
}
.brand-emblem{
  width:42px;
  height:42px;
  border-radius:13px;
  background:linear-gradient(145deg,#fffefa,#f8f2e8);
  border-color:#d8cfbf;
  box-shadow:0 5px 16px rgba(45,39,31,.06), inset 0 1px 0 rgba(255,255,255,.85);
}
.brand-emblem svg{width:20px;height:20px;}
h1{
  font-size:22px;
  font-weight:720;
  letter-spacing:-.025em;
  line-height:1.1;
}
.sub{font-size:12.5px;color:var(--text-2);margin-top:4px;}

.tabs{
  gap:4px;
  padding:4px;
  margin-bottom:13px;
  border:1px solid var(--border);
  border-radius:13px;
  background:rgba(255,253,250,.76);
  box-shadow:0 3px 12px rgba(45,39,31,.025);
}
.tab{
  border:0;
  border-radius:9px;
  background:transparent;
  padding:10px 12px;
  box-shadow:none;
  color:var(--text-2);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .1s ease;
}
.tab:hover{background:rgba(255,255,255,.7);color:var(--text);}
.tab.active{
  background:var(--accent);
  color:#fff;
  box-shadow:0 5px 14px rgba(24,61,93,.16);
}

.card{
  border-color:var(--border);
  border-radius:16px;
  padding:14px;
  margin-bottom:10px;
  box-shadow:0 7px 24px rgba(45,39,31,.045), inset 0 1px 0 rgba(255,255,255,.75);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.card h2{
  font-size:14.5px;
  font-weight:680;
  letter-spacing:-.01em;
  margin:0 0 11px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(221,214,202,.72);
}
.section-icon{
  width:25px;
  height:25px;
  border-radius:8px;
  background:linear-gradient(145deg,#faf5eb,#f2eadc);
  color:var(--brass);
  border-color:rgba(140,112,75,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.section-icon svg{width:13.5px;height:13.5px;}

.field-label{
  color:#625d56;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.005em;
}
input[type=text],input[type=email],input[type=date],input[type=password],input[type=number],input[type=time],select,textarea{
  min-height:40px;
  padding:9px 11px;
  border-color:var(--border-strong);
  border-radius:10px;
  background:#fffefa;
  color:var(--text);
  box-shadow:inset 0 1px 2px rgba(40,35,29,.025);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg);
  background:#fff;
}
input[type=color]{
  border:1px solid var(--border-strong)!important;
  border-radius:10px!important;
  background:#fffefa!important;
  cursor:pointer;
}

button{
  min-height:40px;
  padding:9px 12px;
  border-radius:10px;
  font-weight:650;
  letter-spacing:-.005em;
  box-shadow:0 4px 10px rgba(24,61,93,.10);
  transition:transform .10s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;
}
button:hover{filter:brightness(.97);box-shadow:0 6px 14px rgba(24,61,93,.14);}
button:active{transform:translateY(1px);box-shadow:0 2px 7px rgba(24,61,93,.10);}
button.secondary{
  background:#fffefa;
  color:#4c4943;
  border-color:var(--border-strong);
  box-shadow:none;
}
button.secondary:hover{background:#f8f3ea;}
button.danger{
  background:#fffafa;
  color:var(--danger);
  border-color:#d9aaaa;
  box-shadow:none;
}
button.danger:hover{background:var(--danger-bg);}

label.svc{
  padding:9px 10px;
  border-radius:10px;
  background:#fffefa;
  transition:border-color .15s ease,background .15s ease,transform .1s ease;
}
label.svc:hover{border-color:#c7bdaf;background:#fff;}
label.svc.checked{
  border-color:var(--accent);
  background:linear-gradient(90deg,var(--accent-bg),rgba(255,255,255,.55));
  box-shadow:inset 3px 0 0 var(--accent);
}
.svc-meta{color:#898279;}
.totals{padding-top:9px;margin-top:5px;}

.slots{gap:7px;margin:9px 0;}
.slot{
  padding:9px 5px;
  border-radius:9px;
  background:#fffefa;
  transition:transform .10s ease,border-color .15s ease,background .15s ease;
}
.slot:hover{border-color:var(--accent);transform:translateY(-1px);}
.slot.selected{box-shadow:0 4px 11px rgba(24,61,93,.14);}

.hint{font-size:11.5px;line-height:1.45;color:var(--text-muted);}
.msg{border:1px solid transparent;line-height:1.4;}
.msg.success{border-color:#cddfc6;}
.msg.error{border-color:#e5c2c2;}

.quick-nav{
  gap:5px;
  padding:3px;
  margin:6px 0 9px;
  background:#f6f1e8;
  border:1px solid var(--border);
  border-radius:11px;
}
.quick-nav button{
  min-height:34px;
  padding:7px 8px;
  border:0;
  background:transparent;
  color:var(--text-2);
}
.quick-nav button:hover{background:#fffefa;}

.agenda-head{margin-bottom:7px;}
.agenda-date{font-size:11.5px;color:#777168;}
.appt{
  padding:10px 11px;
  border-left-width:3px;
  border-radius:11px;
  background:#fffefa;
  box-shadow:0 3px 11px rgba(45,39,31,.03);
}
.appt-time{font-size:17px;letter-spacing:-.02em;}
.appt-name{font-size:13.5px;}
.appt-detail{font-size:11.5px;}
.status-badge{font-size:9.5px;padding:3px 7px;}
.appt-actions{gap:5px;margin-top:8px;}
.appt-actions button{min-height:34px;padding:7px 6px;}

.onboarding{
  background:linear-gradient(155deg,#fffdfa 0,#f8f4ec 58%,var(--accent-bg) 150%);
  border-top:1px solid var(--border);
}
.checklist{gap:6px;margin:7px 0 10px;}
.checkitem{font-size:12.5px;}
.checkdot{width:19px;height:19px;}

.svc-row,.client-row,.block-row{padding:7px 0;}
.svc-row button,.client-row button,.block-row button{min-height:30px;border-radius:8px;}

.week-row{
  grid-template-columns:78px 88px 1fr 1fr;
  gap:6px;
  padding:6px 0;
}
.schedule-subtitle{
  grid-template-columns:78px 88px 1fr 1fr;
  gap:6px;
  color:#8c857b;
  padding:1px 0 5px;
}
.week-day{font-size:11.5px;}
.day-toggle{font-size:10.5px;}
.week-row input[type=time]{min-height:34px;padding:6px 7px;}
.week-row.closed{opacity:.55;}

.pill-note{background:#f2eee7;color:#6f6961;border:1px solid #e4ddd2;}
.history-box{background:#fffefa;}

/* Barra de rolagem discreta em navegadores compatíveis */
*{scrollbar-color:#c7beb1 transparent;scrollbar-width:thin;}

/* Administração */
.admin-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 30% -80px,rgba(32,72,102,.06),transparent 360px),
    var(--bg);
}
.admin-page .wrap{max-width:940px;}
.admin-page .admin-head{margin:4px 0 16px;}
.admin-page .admin-mark{
  width:42px;height:42px;border-radius:13px;
  background:linear-gradient(145deg,#fffefa,#f8f2e8);
  border-color:#d8cfbf;
  box-shadow:0 5px 16px rgba(45,39,31,.05);
}
.admin-page .card{padding:15px;border-radius:15px;}
.admin-page h1{font-size:23px;}
.admin-page h2{font-size:15px;}
.admin-page .badge{border:1px solid rgba(0,0,0,.04);font-weight:650;}

/* Demonstração */
.demo-page{
  min-height:100vh;
  max-width:570px;
  padding:22px 18px 34px;
  background:
    radial-gradient(circle at 50% -100px,rgba(32,72,102,.055),transparent 330px),
    linear-gradient(180deg,#f7f3ec,var(--bg));
}
.demo-page .top{gap:12px;}
.demo-page .mark{
  width:42px;height:42px;border-radius:13px;
  background:linear-gradient(145deg,#fffefa,#f8f2e8);
  border-color:#d8cfbf;
  box-shadow:0 5px 16px rgba(45,39,31,.05);
}
.demo-page .demo{background:#f3eadc;color:#725c3e;border:1px solid #dfceb5;font-weight:700;letter-spacing:.04em;}
.demo-page .tabs{
  padding:4px;border:1px solid var(--border);border-radius:13px;background:rgba(255,253,250,.76);
}
.demo-page .tabs button{border:0;box-shadow:none;}
.demo-page .card{padding:14px;border-radius:16px;margin-bottom:10px;}
.demo-page .svc,.demo-page .appt{background:#fffefa;border-radius:10px;}
.demo-page .svc.selected{border-color:var(--a);background:linear-gradient(90deg,rgba(24,61,93,.09),#fffefa);box-shadow:inset 3px 0 0 var(--a);}

@media (max-width:420px){
  body:not(.admin-page):not(.demo-page),.demo-page{padding-left:12px;padding-right:12px;}
  .card{padding:12px;border-radius:14px;}
  .week-row,.schedule-subtitle{grid-template-columns:64px 76px 1fr 1fr;gap:5px;}
  .week-day{font-size:11px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important;}
}

/* v4.6 — fila sem horário */
.walkin-toggle{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--border);border-radius:11px;background:#fffefa;margin-bottom:9px;cursor:pointer;}
.walkin-toggle input{width:19px;height:19px;margin:1px 0 0;flex:none;}
.walkin-toggle span{display:grid;gap:2px;font-size:12.5px;line-height:1.35;}
.walkin-toggle small{font-size:11px;color:var(--text-muted);font-weight:400;}
.walkin-qr{text-align:center;padding:12px;margin:9px 0;border:1px dashed var(--border-strong);border-radius:12px;background:#fff;}
.walkin-qr img{display:block;width:220px;max-width:100%;height:auto;margin:0 auto 8px;border-radius:8px;}
.walkin-row{display:grid;grid-template-columns:32px 1fr;gap:9px;padding:10px;border:1px solid var(--border);border-radius:11px;margin-bottom:7px;background:#fffefa;align-items:start;}
.walkin-row.called{border-color:var(--accent);background:linear-gradient(90deg,var(--accent-bg),#fffefa);}
.walkin-row.in_service{border-color:#b9cfb1;background:var(--success-bg);}
.walkin-number{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#f0ece4;color:var(--text-2);font-weight:750;font-size:13px;}
.walkin-row.called .walkin-number{background:var(--accent);color:#fff;}
.walkin-row.in_service .walkin-number{background:var(--success);color:#fff;}
.walkin-main{min-width:0;display:grid;gap:2px;}
.walkin-main b{font-size:13.5px;}
.walkin-main span{font-size:11.5px;color:var(--text-2);line-height:1.35;}
.walkin-main small{font-size:10.5px;color:var(--text-muted);font-weight:650;text-transform:uppercase;letter-spacing:.025em;}
.walkin-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.walkin-actions button{margin:0;min-height:32px;padding:6px;font-size:11.5px;}
.walkin-status{padding:15px;border:1px solid var(--border);border-radius:13px;background:#fffefa;text-align:center;margin-bottom:9px;}
.walkin-status h3{margin:0 0 4px;font-size:18px;letter-spacing:-.02em;}
.walkin-status p{margin:0 0 12px;font-size:12px;color:var(--text-2);}
.walkin-status.called{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-bg),#fffefa);}
.walkin-status.service,.walkin-status.done{border-color:#bed3b6;background:var(--success-bg);}
.walkin-status.out{border-color:#e0c5c5;background:#fff7f7;}
.walkin-position,.walkin-estimate{display:inline-grid;min-width:126px;padding:10px 12px;margin:3px;border-radius:11px;background:#f5f1e9;}
.walkin-position b,.walkin-estimate b{font-size:23px;color:var(--accent);line-height:1;}
.walkin-position span,.walkin-estimate span{font-size:10.5px;color:var(--text-muted);margin-top:4px;}
@media(max-width:380px){.walkin-actions{grid-template-columns:1fr 1fr}.walkin-position,.walkin-estimate{min-width:115px}}