/* Three layouts. Color tokens remain owned by each business, not the design. */
@font-face { font-family:'Fio Street'; src:url('./fonts/SedgwickAveDisplay-Regular.ttf') format('truetype'); font-weight:400 900; font-style:normal; font-display:swap; }
:root { --design-serif: 'Playfair Display', Georgia, serif; --design-street: 'Fio Street', Impact, 'Arial Narrow', 'Arial Black', sans-serif; }
.booking-brand { display:flex; align-items:center; gap:12px; min-width:0; padding:14px 0; }
.booking-brand-mark { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--brand-label); overflow:hidden; }
.booking-brand-mark img { width:100%; height:100%; object-fit:contain; padding:4px; background:#fff; }
.booking-brand-initial { font:700 22px/1 system-ui,sans-serif; }
.booking-brand-copy { min-width:0; }
.booking-brand-copy strong { display:block; font:700 15px/1.4 system-ui,sans-serif; overflow-wrap:anywhere; }
.booking-brand-copy small { display:block; color:var(--muted); font:400 12px/1.5 system-ui,sans-serif; }
.summary-card>.booking-brand { padding:16px; border-bottom:1px solid var(--line); }
.success-card>.booking-brand { margin-bottom:12px; }
.history-item>.booking-brand { padding:0 0 12px; }
.history-item .booking-brand-mark { width:34px; height:34px; flex-basis:34px; border-radius:8px; }
.history-item .booking-brand-copy strong { font-size:13px; }
.assistant-avatar img { width:100%; height:100%; object-fit:contain; padding:3px; background:#fff; border-radius:inherit; }
.mini-avatar img { width:100%; height:100%; object-fit:contain; padding:2px; background:#fff; border-radius:inherit; }
.design-welcome { display:none; }
html[data-client-design] body { min-width:0; }
.admin-brand-preview[data-preview-design=urban] header strong,
.admin-brand-preview[data-preview-design=urban] h4 { font-family:var(--design-street); line-height:1.25; }
html[data-client-design] .brand-copy strong { white-space:normal; overflow-wrap:anywhere; text-overflow:clip; line-height:1.3; }
html[data-client-design] .brand-visual:has(img:not([hidden])) { background:#fff; }

/* CLÁSSICO: an editorial masthead and a centered booking column. */
html[data-client-design=classic] body { background:var(--canvas); }
html[data-client-design=classic] .page-shell { max-width:1080px; }
html[data-client-design=classic] .site-header { padding:20px 0; border-top:3px solid var(--brand); border-bottom:1px solid var(--line-strong); }
html[data-client-design=classic] .brand-visual { width:66px; height:66px; flex-basis:66px; border-radius:50%; outline:1px solid var(--line-strong); outline-offset:4px; margin:5px; }
html[data-client-design=classic] .brand-copy strong { font:700 clamp(21px,3vw,30px)/1.25 var(--design-serif); color:var(--canvas-ink); }
html[data-client-design=classic] .brand-copy small { letter-spacing:.15em; text-transform:uppercase; font-size:10px; margin-top:7px; }
html[data-client-design=classic] .design-welcome { display:block; text-align:center; padding:34px 12px; color:var(--canvas-ink); }
html[data-client-design=classic] .design-welcome p { font:400 11px/1.5 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.2em; margin:0 0 12px; }
html[data-client-design=classic] .design-welcome h2 { font:700 clamp(28px,4vw,43px)/1.2 var(--design-serif); margin:0; }
html[data-client-design=classic] .booking-layout { max-width:820px; margin:auto; grid-template-columns:minmax(0,1fr); gap:24px; }
html[data-client-design=classic] .details-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
html[data-client-design=classic] .conversation-card { border-radius:4px; border-top:3px solid var(--brand); box-shadow:0 8px 32px #0000000a; }
html[data-client-design=classic] :is(.details-card,.plans-showcase,.plan-ad,.choice-panel) { border-radius:4px; }
html[data-client-design=classic] .conversation-header { padding:24px 28px; }
html[data-client-design=classic] .conversation-header h1 { font-family:var(--design-serif); letter-spacing:-.025em; font-size:27px; }
html[data-client-design=classic] :is(.primary-button,.secondary-button,.option-card,.express-service,.slot-button,.input,.textarea) { border-radius:4px; }
html[data-client-design=classic] .primary-button { letter-spacing:.035em; }
html[data-client-design=classic] .plans-showcase { margin:24px auto; max-width:820px; border-top:3px solid var(--brand); }
html[data-client-design=classic] :is(.plans-intro h2,.plan-ad h3,.details-heading h2) { font-family:var(--design-serif); }

/* URBANO: spray, cut-paper edges and street lettering only in display headings. */
html[data-client-design=urban] body { background:radial-gradient(circle at 1px 1px,var(--line) .7px,transparent .9px) 0 0/8px 8px,var(--canvas); }
html[data-client-design=urban] .page-shell { max-width:1280px; }
html[data-client-design=urban] .site-header { padding:16px 20px; background:var(--surface); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--accent); gap:18px; }
html[data-client-design=urban] .brand-visual { width:56px; height:56px; flex-basis:56px; border-radius:0; border:2px solid var(--ink); }
html[data-client-design=urban] .brand-copy strong { font-family:var(--design-street); font-size:clamp(20px,3vw,29px); font-weight:900; letter-spacing:.035em; text-transform:uppercase; color:var(--ink); }
html[data-client-design=urban] .brand-copy small { color:var(--ink); }
html[data-client-design=urban] .design-welcome { display:block; position:relative; overflow:hidden; isolation:isolate; padding:30px 28px; margin:28px 0; background:var(--brand); color:var(--on-brand); border:2px solid var(--ink); }
html[data-client-design=urban] .design-welcome::after { content:''; position:absolute; z-index:-1; width:240px; height:100px; right:-25px; top:25px; transform:rotate(-17deg); border-top:7px solid currentColor; border-bottom:3px solid currentColor; opacity:.12; pointer-events:none; }
html[data-client-design=urban] .design-welcome p { display:inline-block; margin:0 0 16px; padding:5px 10px; border:1px solid currentColor; transform:rotate(-3deg); font:700 10px/1.5 ui-monospace,monospace; text-transform:uppercase; letter-spacing:.15em; }
html[data-client-design=urban] .design-welcome h2 { max-width:720px; margin:0; font:900 clamp(33px,6vw,65px)/1.05 var(--design-street); text-transform:uppercase; letter-spacing:-.025em; transform:skew(-6deg); overflow-wrap:anywhere; }
html[data-client-design=urban] :is(.conversation-card,.details-card,.plan-ad) { border:2px solid var(--ink); border-radius:0; box-shadow:5px 5px 0 var(--line-strong); }
html[data-client-design=urban] .conversation-header { border-bottom:2px solid var(--ink); }
html[data-client-design=urban] .conversation-header h1 { font:900 28px/1.15 var(--design-street); letter-spacing:.015em; text-transform:uppercase; }
html[data-client-design=urban] .details-heading { border-bottom:2px solid var(--ink); }
html[data-client-design=urban] .details-heading h2 { font-family:var(--design-street); font-size:23px; letter-spacing:.02em; text-transform:uppercase; }
html[data-client-design=urban] :is(.primary-button,.plan-ad-button) { border:2px solid var(--ink); border-radius:0; box-shadow:3px 3px 0 var(--ink); font-weight:800; }
html[data-client-design=urban] :is(.secondary-button,.input,.textarea,.option-card,.express-service,.slot-button,.day-card,.progress-pill) { border-radius:0; }
html[data-client-design=urban] .plans-showcase { border-radius:0; border:2px solid var(--ink); margin-bottom:26px; }
html[data-client-design=urban] :is(.plans-intro h2,.plan-ad h3) { font-family:var(--design-street); text-transform:uppercase; letter-spacing:.02em; }
html[data-client-design=urban] .plans-intro h2 { font-size:32px; }

/* BARBER PANEL: keep navigation, actions and status semantics intact. */
html[data-admin-design=classic] .topbar { padding:22px 0; border-top:3px solid var(--brand); border-bottom:1px solid var(--line-strong); }
html[data-admin-design=classic] :is(.topbar h2,.card-title) { font-family:var(--design-serif); }
html[data-admin-design=classic] .topbar h2 { font-size:35px; }
html[data-admin-design=classic] :is(.card,.stat-card,.finance-kpi,.wf-stat,.finance-panel) { border-radius:5px; border-top:3px solid var(--brand); box-shadow:0 4px 20px #00000008; }
html[data-admin-design=classic] .brand h1 { font-family:var(--design-serif); font-size:23px; }
html[data-admin-design=classic] .brand-icon { width:58px; height:58px; border-radius:50%; }
html[data-admin-design=classic] :is(.btn,.appointment,.time-box,.input,.select,.textarea) { border-radius:5px; }
html[data-admin-design=classic] .appointment { border-left:3px solid var(--line-strong); }
@media(min-width:1101px) {
  html[data-admin-design=classic] .app { grid-template-columns:minmax(0,1fr); }
  html[data-admin-design=classic] .sidebar { position:relative; inset:auto; width:100%; height:auto; max-height:none; padding:20px 32px 0; border-right:0; border-bottom:1px solid var(--line-strong); }
  html[data-admin-design=classic] .sidebar .brand { width:100%; justify-content:center; padding-bottom:18px; text-align:center; border:0; }
  html[data-admin-design=classic] .nav { display:flex; gap:4px; overflow-x:auto; padding-bottom:12px; }
  html[data-admin-design=classic] .nav button { width:auto; flex:0 0 auto; border-radius:4px; padding-inline:13px; }
  html[data-admin-design=classic] .nav button.active { box-shadow:inset 0 -3px 0 var(--brand); }
  html[data-admin-design=classic] .side-note { display:none; }
}
html[data-admin-design=urban] body { background:radial-gradient(circle at 1px 1px,var(--line) .7px,transparent .9px) 0 0/8px 8px,var(--bg); }
html[data-admin-design=urban] .sidebar { border-right:2px solid var(--ink); }
html[data-admin-design=urban] .brand { border-bottom:2px solid var(--ink); }
html[data-admin-design=urban] .brand h1 { font-family:var(--design-street); font-size:24px; letter-spacing:.025em; text-transform:uppercase; }
html[data-admin-design=urban] .brand-icon { border:2px solid var(--ink); border-radius:0; width:52px; height:52px; }
html[data-admin-design=urban] .topbar { position:relative; padding:24px; border:2px solid var(--ink); background:var(--card); box-shadow:5px 5px 0 var(--accent); }
html[data-admin-design=urban] .topbar h2 { font:900 clamp(29px,4vw,44px)/1.1 var(--design-street); text-transform:uppercase; color:var(--ink); transform:skew(-5deg); }
html[data-admin-design=urban] .topbar p { color:var(--ink); }
html[data-admin-design=urban] :is(.card,.stat-card,.finance-kpi,.finance-panel) { border:2px solid var(--ink); border-radius:0; box-shadow:4px 4px 0 var(--line-strong); }
html[data-admin-design=urban] .card-header { border-bottom:2px solid var(--ink); }
html[data-admin-design=urban] .card-title { font-family:var(--design-street); font-size:23px; text-transform:uppercase; letter-spacing:.025em; }
html[data-admin-design=urban] .btn { border-radius:0; }
html[data-admin-design=urban] .btn-primary { border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); }
html[data-admin-design=urban] :is(.nav button,.appointment,.time-box,.input,.select,.textarea) { border-radius:2px; }
html[data-admin-design=urban] .nav button.active { background:var(--brand); color:var(--on-brand); box-shadow:3px 3px 0 var(--ink); }

@media(max-width:760px) {
  html[data-client-design] .site-header { position:sticky; top:0; z-index:12; background:var(--canvas); margin-inline:-4px; padding:12px 4px; }
  html[data-client-design] .site-header .brand-copy strong { max-width:none; font-size:16px; }
  html[data-client-design] .site-header .header-actions { align-self:center; }
  html[data-client-design=classic] .site-header { padding:14px 4px; }
  html[data-client-design=classic] .brand-visual { width:48px; height:48px; flex-basis:48px; }
  html[data-client-design=classic] .brand-copy strong { font-size:20px; }
  html[data-client-design=classic] .details-column { grid-template-columns:minmax(0,1fr); }
  html[data-client-design=classic] .conversation-header { padding:20px 16px; }
  html[data-client-design=classic] .conversation-header h1 { font-size:24px; }
  html[data-client-design=classic] .design-welcome { padding:24px 10px; }
  html[data-client-design=urban] .site-header { padding:12px; background:var(--surface); margin-inline:0; gap:10px; }
  html[data-client-design=urban] .site-header .brand-copy strong { font-size:21px; }
  html[data-client-design=urban] .brand-visual { width:42px; height:42px; flex-basis:42px; }
  html[data-client-design=urban] .design-welcome { padding:24px 18px; margin:24px 0; }
  html[data-client-design=urban] .conversation-header h1 { font-size:25px; }
  html[data-admin-design=urban] .topbar { padding:18px; margin-right:4px; }
  html[data-admin-design=classic] .topbar h2 { font-size:29px; }
  .booking-brand-copy { overflow-wrap:anywhere; }
}
@media(prefers-reduced-motion:reduce) { .design-welcome * { animation:none!important; } }
@media(max-width:360px) {
  html[data-client-design] .site-header .brand { flex-basis:100%; }
  html[data-client-design] .site-header .header-actions { margin-left:auto; }
}