/* ================================================================
   OFICINA DESIGN SYSTEM v0.2
   Tokens are semantic: components should consume these variables
   instead of introducing one-off values.
   ================================================================ */
:root {
  /* Brand and surfaces */
  --color-brand-900: #0f3b37;
  --color-brand-700: #275b55;
  --color-brand-100: #dce9e5;
  --color-accent-600: #d65c45;
  --color-accent-500: #e76b53;
  --color-accent-100: #fae2dc;
  --color-warning-500: #d09a3d;
  --color-warning-100: #f6ead0;
  --color-danger-600: #a84e43;
  --color-danger-100: #f7ddda;
  --color-info-600: #3e6680;
  --color-info-100: #dfebf2;
  --color-neutral-900: #1a1f1d;
  --color-neutral-600: #7d8680;
  --color-neutral-300: #c8cbc7;
  --color-neutral-200: #e6e1d6;
  --color-neutral-100: #e6e1d6;
  --color-canvas: #f6f2eb;
  --color-surface: #fffdf9;
  --color-white: #ffffff;

  /* Typography */
  --font-body: "DM Sans", sans-serif;
  --font-display: "Manrope", sans-serif;
  --text-xs: .6875rem;
  --text-sm: .8125rem;
  --text-md: .9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 2rem;

  /* Spacing — 4px base grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Shape and elevation */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(17, 47, 43, .05);
  --shadow-md: 0 10px 28px rgba(17, 47, 43, .08);
  --shadow-lg: 0 24px 60px rgba(17, 47, 43, .16);
  --focus-ring: 0 0 0 3px rgba(29, 89, 80, .18);
  --duration-fast: 150ms;
  --duration-base: 220ms;

  /* Backwards-compatible semantic aliases */
  --ink: var(--color-neutral-900);
  --muted: var(--color-neutral-600);
  --green: var(--color-brand-900);
  --green-2: var(--color-brand-700);
  --mint: var(--color-brand-100);
  --cream: var(--color-canvas);
  --paper: var(--color-surface);
  --coral: var(--color-accent-500);
  --coral-soft: var(--color-accent-100);
  --gold: var(--color-warning-500);
  --line: var(--color-neutral-200);
  --white: var(--color-white);
  --shadow: var(--shadow-md);
  --radius: var(--radius-lg);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
::selection { background: var(--mint); color: var(--green); }

.app-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 252px; background: var(--green); color: rgba(255,255,255,.76); display: flex; flex-direction: column; padding: 28px 18px 20px; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); padding: 0 10px 30px; }
.brand-mark { position: relative; width: 42px; height: 42px; display: grid; place-items: center; }
.brand-mark::before, .brand-mark::after { content: none; }
.brand-mark svg { width: 40px; height: 40px; color: var(--white); }
.brand strong { display: block; font: 800 19px/1 "Manrope"; letter-spacing: -.04em; }
.brand small { display: block; color: var(--coral); font-size: 10px; letter-spacing: .28em; margin-top: 5px; font-weight: 700; }
.nav-label { padding: 0 12px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.34); font-weight: 700; }
.nav { display: grid; gap: 4px; }
.nav-item { width: 100%; border: 0; background: transparent; color: inherit; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; text-align: left; font-size: 14px; transition: .18s ease; }
.nav-item:hover { color: var(--white); background: rgba(255,255,255,.06); }
.nav-item.active { color: var(--white); background: rgba(255,255,255,.11); font-weight: 600; }
.nav-item.active::after { content: ""; margin-left: auto; width: 6px; height: 6px; background: var(--coral); border-radius: 50%; }
.icon { width: 19px; height: 19px; display: inline-grid; place-items: center; flex: none; }
.icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-foot { margin-top: auto; }
.shop-card { padding: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; display: flex; gap: 10px; align-items: center; }
.avatar { width: 36px; height: 36px; background: var(--coral-soft); color: var(--coral); border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.avatar.dark { background: var(--green); color: white; }
.avatar.gold { background: #f4e6c9; color: #8d6623; }
.avatar.mint { background: var(--mint); color: var(--green); }
.shop-card strong { color: white; font-size: 13px; display: block; }.shop-card small { font-size: 11px; color: rgba(255,255,255,.46); }

.main { grid-column: 2; min-width: 0; }
.topbar { height: 76px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(15,59,55,.08); background: rgba(246,242,235,.88); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 15; }
.breadcrumbs { color: var(--muted); font-size: 13px; }.breadcrumbs b { color: var(--ink); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.search { position: relative; }.search input { width: 220px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); padding: 10px 12px 10px 37px; outline: none; color: var(--ink); }.search .icon { position: absolute; left: 11px; top: 10px; color: var(--muted); width: 17px; }
.icon-btn { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--paper); border-radius: 11px; color: var(--ink); display: grid; place-items: center; position: relative; }.icon-btn .dot { position: absolute; right: 8px; top: 7px; width: 6px; height: 6px; background: var(--coral); border: 2px solid var(--paper); border-radius: 50%; }
.content { padding: 30px 34px 44px; max-width: 1540px; margin: 0 auto; }
.page-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; margin-bottom: 26px; }
.eyebrow { margin: 0 0 6px; color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 5px; font: 800 clamp(28px, 4vw, 38px)/1.1 "Manrope"; letter-spacing: -.045em; }
h2 { font: 800 20px/1.2 "Manrope"; letter-spacing: -.03em; }
h3 { font: 700 15px/1.25 "Manrope"; }
.sub { color: var(--muted); font-size: 14px; margin: 0; }
.btn { border: 0; border-radius: 11px; padding: 11px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 13px; transition: .18s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }.btn:active { transform: translateY(0); }
.btn-primary { background: var(--coral); color: white; box-shadow: 0 6px 16px rgba(232,111,81,.2); }.btn-primary:hover { background: #d96043; }
.btn-dark { background: var(--green); color: white; }.btn-soft { background: var(--mint); color: var(--green); }.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }.btn-sm { padding: 8px 11px; font-size: 12px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.card { background: var(--paper); border: 1px solid rgba(24,49,46,.07); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(24,49,46,.02); }
.metric { padding: 18px; min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.metric .metric-top { display: flex; justify-content: space-between; align-items: flex-start; }
.metric .metric-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--mint); color: var(--green); display: grid; place-items: center; }
.metric .metric-icon.coral { background: var(--coral-soft); color: var(--coral); }.metric .metric-icon.gold { background: #f5ead4; color: #9b6a1a; }
.metric strong { font: 800 25px/1 "Manrope"; letter-spacing: -.04em; }.metric p { color: var(--muted); font-size: 12px; margin: 7px 0 0; }.trend { color: #30765d; font-size: 11px; font-weight: 700; }.trend.down { color: var(--coral); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr); gap: 18px; }
.panel { padding: 20px; min-width: 0; }.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }.panel-head h2 { margin: 0; }.text-link { border: 0; background: transparent; color: var(--green-2); font-size: 12px; font-weight: 700; padding: 4px; }
.next-client { background: var(--green); color: white; padding: 22px; border-radius: var(--radius); position: relative; overflow: hidden; margin-bottom: 18px; }
.next-client::after { content: ""; position: absolute; width: 180px; height: 180px; border: 28px solid rgba(255,255,255,.04); border-radius: 50%; right: -70px; bottom: -100px; }
.next-label { color: #9fc5bc; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
.next-time { font: 800 38px/1 "Manrope"; letter-spacing: -.05em; margin: 10px 0 12px; }.next-client h2 { margin: 0 0 5px; }.next-client p { color: rgba(255,255,255,.6); margin: 0 0 20px; font-size: 13px; }.next-actions { display: flex; gap: 8px; position: relative; z-index: 2; }.next-actions .btn-ghost { border-color: rgba(255,255,255,.2); color: white; }
.timeline { display: grid; }.appointment { display: grid; grid-template-columns: 58px 3px minmax(0,1fr) auto; gap: 13px; min-height: 78px; }.appointment time { font: 700 13px "Manrope"; padding-top: 4px; }.rail { background: var(--line); position: relative; }.rail::before { content: ""; position: absolute; left: 50%; top: 7px; transform: translate(-50%,-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--mint); border: 2px solid var(--green-2); }.appointment.current .rail::before { background: var(--coral); border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-soft); }.appt-info { padding: 0 0 18px; min-width: 0; }.appt-info strong { display: block; font-size: 14px; }.appt-info span { color: var(--muted); font-size: 12px; }.badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1; background: var(--mint); color: var(--green-2); }.badge.coral { background: var(--coral-soft); color: #b34f38; }.badge.gold { background: #f6ead0; color: #936718; }.badge.gray { background: #eeeae2; color: #6e736e; }.badge.green { background: #d9eee3; color: #287053; }

/* Status badges — one visual language across agenda, plans and payments */
.badge::before { content: ""; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: currentColor; opacity: .72; }
.badge--scheduled { background: var(--color-info-100); color: var(--color-info-600); }
.badge--confirmed, .badge--active, .badge--completed { background: #dceee5; color: #286d52; }
.badge--pending, .badge--due-soon { background: var(--color-warning-100); color: #865d18; }
.badge--cancelled, .badge--expired, .badge--payment-pending { background: var(--color-danger-100); color: var(--color-danger-600); }
.badge--no-show { background: #e8e4df; color: #635f5a; }
.badge--in-service { background: var(--color-accent-100); color: #a94834; }
.badge--package-active { background: #e4e5f4; color: #565a87; }
.badge--depleted { background: var(--color-neutral-100); color: #696d68; }

/* Component refinements */
.card { transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease, transform var(--duration-base) ease; }
.card:hover { border-color: rgba(29, 89, 80, .14); box-shadow: var(--shadow-sm); }
.metric:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn { min-height: 40px; transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.btn-sm { min-height: 34px; }
.btn:disabled { opacity: .48; transform: none; box-shadow: none; }
.btn.is-saving { color: transparent; position: relative; pointer-events: none; }
.btn.is-saving::after { content: ""; position: absolute; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.45); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }
.quick-action { transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-fast) ease; }
.quick-action:hover { border-color: rgba(29,89,80,.24); transform: translateX(2px); }
.tab { transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.slot { transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease, background-color var(--duration-fast) ease; }
.slot:hover { transform: translateY(-2px); border-color: var(--green-2); background: #f8fbf9; }
.data-table tbody tr { transition: background-color var(--duration-fast) ease; }
.data-table tbody tr:hover { background: rgba(220,235,229,.3); }
.field input, .field textarea, .field select { min-height: 44px; transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease; }
.field input::placeholder, .field textarea::placeholder { color: #98a49f; }
.field-help { color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.modal { box-shadow: var(--shadow-lg); }
.modal-backdrop { animation-duration: var(--duration-fast); }
.modal { animation-duration: var(--duration-base); }

/* Reusable empty states */
.empty-state { padding: 42px 24px; text-align: center; color: var(--muted); }
.empty-state[hidden] { display: none; }
.empty-state__icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 14px; background: var(--mint); color: var(--green-2); }
.empty-state__icon .icon { width: 23px; height: 23px; }
.empty-state h3 { margin: 0 0 6px; color: var(--ink); font-size: 14px; }
.empty-state p { max-width: 360px; margin: 0 auto; font-size: 12px; line-height: 1.55; }
.empty-state .btn { margin-top: 16px; }
.empty-inline { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius-md); color: var(--muted); font-size: 12px; }
.empty-inline .icon { color: var(--green-2); }

/* Today: deliberate hierarchy, fewer competing surfaces */
.today-summary { margin-bottom: 18px; }
.today-summary .metric:first-child { border-color: rgba(29,89,80,.16); }
.attention-list { display: grid; gap: 9px; }
.attention-item { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.attention-item:last-child { border-bottom: 0; }
.attention-item .icon { width: 17px; color: var(--coral); margin-top: 1px; }
.attention-item strong { display: block; font-size: 12px; }
.attention-item span { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.next-client.is-complete { background: #31564f; }
.next-client.is-complete .next-label { color: #c2d8d2; }
.status-legend { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 14px; }
.status-legend > span:first-child { color: var(--muted); font-size: 10px; font-weight: 700; margin-right: 2px; }

@keyframes spin { to { transform: rotate(360deg); } }
.appt-end { display: flex; align-items: flex-start; gap: 8px; }
.free-slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.slot { padding: 12px 7px; border: 1px solid var(--line); border-radius: 11px; text-align: center; background: var(--paper); }.slot strong { display: block; font-size: 13px; }.slot span { color: var(--muted); font-size: 10px; }
.quick-list { display: grid; gap: 8px; margin-top: 12px; }.quick-action { border: 1px solid var(--line); background: transparent; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 11px; color: var(--ink); text-align: left; }.quick-action:hover { background: var(--cream); }.quick-action .icon { width: 17px; color: var(--coral); }.quick-action strong { display:block; font-size:12px; }.quick-action span { color: var(--muted); font-size:10px; display:block; margin-top:2px; }

.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }.tabs { display:flex; padding:4px; background:#ebe7de; border-radius:11px; }.tab { border:0; background:transparent; padding:8px 13px; border-radius:8px; color:var(--muted); font-size:12px; font-weight:700; }.tab.active { background:var(--paper); color:var(--ink); box-shadow:0 2px 8px rgba(24,49,46,.07); }.filter { margin-left:auto; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:10px; padding:9px 12px; font-size:12px; outline:none; }
.agenda-board { overflow:auto; padding:0; }.agenda-head, .agenda-row { min-width:820px; display:grid; grid-template-columns:76px repeat(3,1fr); }.agenda-head { background:#eeeae2; border-radius:17px 17px 0 0; }.agenda-head div { padding:14px; font-size:12px; font-weight:800; border-right:1px solid var(--line); }.agenda-head div span { color:var(--muted); font-weight:400; display:block; margin-top:2px; }.agenda-row { min-height:82px; border-top:1px solid var(--line); }.agenda-row > div { border-right:1px solid var(--line); padding:8px; }.agenda-hour { color:var(--muted); font-size:11px; text-align:center; }.event { padding:10px; border-left:3px solid var(--green-2); background:var(--mint); border-radius:8px; height:100%; }.event.coral { background:var(--coral-soft); border-color:var(--coral); }.event.gold { background:#f6ead0; border-color:var(--gold); }.event strong {display:block;font-size:12px}.event span{font-size:10px;color:var(--muted)}
.table-wrap { overflow:auto; }.data-table { width:100%; border-collapse:collapse; min-width:760px; }.data-table th { text-align:left; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding:11px 14px; border-bottom:1px solid var(--line); }.data-table td { padding:14px; border-bottom:1px solid var(--line); font-size:12px; vertical-align:middle; }.data-table tr:last-child td {border-bottom:0}.client-cell {display:flex;align-items:center;gap:10px}.client-cell strong{display:block;font-size:13px}.client-cell span{color:var(--muted);font-size:10px}.progress { width:100px;height:6px;border-radius:10px;background:#e6e2d9;overflow:hidden;margin-top:6px}.progress i{display:block;height:100%;background:var(--green-2);border-radius:inherit}.row-actions { display:flex; gap:5px; justify-content:flex-end; }.more-btn { border:0;background:transparent;color:var(--muted);padding:4px;font-size:18px; }
.insight { display:flex;align-items:center;gap:15px;padding:17px 20px;background:var(--green);color:white;border-radius:var(--radius);margin-bottom:16px; }.insight .icon{width:25px;color:#9fc5bc}.insight strong{font-size:13px;display:block}.insight span{font-size:11px;color:rgba(255,255,255,.58)}.insight .btn{margin-left:auto}
.cash-layout {display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.cash-total{background:var(--green);color:white;padding:25px;border-radius:var(--radius);margin-bottom:14px}.cash-total span{font-size:11px;color:#9fc5bc;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.cash-total strong{font:800 35px "Manrope";display:block;margin:8px 0}.cash-total small{color:rgba(255,255,255,.55)}.method-list{display:grid;gap:10px}.method{display:flex;justify-content:space-between;align-items:center;padding:13px;border-bottom:1px solid var(--line)}.method:last-child{border:0}.method div{display:flex;align-items:center;gap:9px}.method i{width:9px;height:9px;border-radius:50%;background:var(--green-2)}.method:nth-child(2) i{background:var(--coral)}.method:nth-child(3) i{background:var(--gold)}.method:nth-child(4) i{background:#b3b4af}.method strong{font-size:13px}.method span{color:var(--muted);font-size:11px}
.empty-note{padding:32px;text-align:center;color:var(--muted)}
.profile-plan{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px}.profile-plan>div{padding:14px;background:var(--cream);border-radius:12px}.profile-plan span{display:block;color:var(--muted);font-size:10px;margin-bottom:5px}.profile-plan strong{font-size:13px}.history-list{display:grid}.history-item{display:grid;grid-template-columns:62px 10px minmax(0,1fr) auto;gap:11px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.history-item:last-child{border-bottom:0}.history-date{font-size:11px;color:var(--muted)}.history-item>i{width:7px;height:7px;border-radius:50%;background:var(--green-2)}.history-item div strong{display:block;font-size:12px}.history-item div span{font-size:10px;color:var(--muted)}blockquote{margin:0;padding:14px;background:var(--cream);border-left:3px solid var(--coral);border-radius:0 10px 10px 0;font-size:13px;line-height:1.55}.privacy-note{font-size:10px;color:var(--muted);margin:12px 0 0}

.booking-page { min-height:100vh; background:var(--cream); }.booking-nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100% - 1120px)/2));border-bottom:1px solid var(--line)}.booking-nav .brand{padding:0;color:var(--ink)}.booking-nav .brand small{color:var(--muted)}.booking-main{max-width:1120px;margin:0 auto;padding:50px 24px 80px}.booking-hero{display:grid;grid-template-columns:1fr .85fr;gap:50px;align-items:center;margin-bottom:50px}.booking-hero h1{font-size:52px;max-width:620px}.booking-hero h1 em{color:var(--coral);font-style:normal}.booking-hero p{color:var(--muted);font-size:16px;line-height:1.65;max-width:560px}.location{display:flex;gap:8px;align-items:center;margin-top:22px;font-size:13px;font-weight:700}.barber-art{aspect-ratio:1.2;background:var(--green);border-radius:32px;position:relative;overflow:hidden;display:grid;place-items:center;color:white}.barber-art .big-mark{width:150px;height:150px;border:2px solid var(--coral);border-radius:50%;display:grid;place-items:center}.barber-art .big-mark svg{width:70px}.barber-art::before,.barber-art::after{content:"";position:absolute;border-radius:50%;border:25px solid rgba(255,255,255,.04);width:220px;height:220px}.barber-art::before{left:-110px;top:-100px}.barber-art::after{right:-100px;bottom:-100px}.booking-card{padding:26px}.stepper{display:flex;gap:8px;margin-bottom:26px}.step-dot{height:4px;flex:1;background:#e1ddd5;border-radius:5px}.step-dot.active{background:var(--coral)}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.choice{border:1px solid var(--line);background:var(--paper);padding:16px;border-radius:14px;text-align:left;position:relative;min-height:110px;color:var(--ink)}.choice:hover,.choice.selected{border-color:var(--green-2);box-shadow:0 0 0 1px var(--green-2)}.choice strong{display:block;font-size:14px;margin-bottom:7px}.choice span{display:block;color:var(--muted);font-size:11px;margin-top:3px}.choice b{color:var(--coral);font-size:12px}.booking-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:22px}.booking-summary{color:var(--muted);font-size:12px}.time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.time-btn{border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:10px;color:var(--ink);font-weight:700;font-size:12px}.time-btn:hover,.time-btn.selected{background:var(--green);color:white;border-color:var(--green)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:11px;font-weight:800}.field input,.field textarea,.field select{border:1px solid var(--line);background:var(--white);border-radius:10px;padding:11px;outline:none;color:var(--ink)}.field input:focus,.field textarea:focus{border-color:var(--green-2);box-shadow:0 0 0 3px var(--mint)}
.success-box{text-align:center;padding:26px 10px}.success-check{width:68px;height:68px;border-radius:50%;background:var(--mint);color:var(--green);display:grid;place-items:center;margin:0 auto 18px}.success-check .icon{width:32px}.success-box h2{font-size:25px}.booking-ticket{max-width:420px;margin:22px auto 0;background:var(--cream);border-radius:14px;padding:16px;text-align:left;display:grid;grid-template-columns:1fr 1fr;gap:12px}.booking-ticket span{font-size:10px;color:var(--muted);display:block}.booking-ticket strong{font-size:13px}

.modal-backdrop{position:fixed;inset:0;background:rgba(12,35,32,.55);backdrop-filter:blur(3px);z-index:50;display:grid;place-items:center;padding:20px;animation:fade .15s ease}.modal{width:min(520px,100%);max-height:90vh;overflow:auto;background:var(--paper);border-radius:20px;box-shadow:var(--shadow);padding:24px;animation:rise .2s ease}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-head h2{margin:0}.modal-close{border:0;background:#eeeae2;width:34px;height:34px;border-radius:9px;color:var(--ink)}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.toast{position:fixed;right:24px;bottom:24px;background:var(--green);color:white;padding:13px 17px;border-radius:12px;box-shadow:var(--shadow);font-size:12px;font-weight:700;z-index:80;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}
.mobile-top,.mobile-nav{display:none}
@keyframes fade{from{opacity:0}}@keyframes rise{from{transform:translateY(10px);opacity:0}}

/* Temporary Oficina brand: practical, crafted and straightforward. */
.booking-nav .brand { color: var(--green); }
.booking-nav .brand small { color: var(--coral); }
.booking-nav .brand-mark svg, .mobile-top .brand-mark svg { color: var(--green); }
.booking-hero h1 { font-size: clamp(38px, 4.2vw, 50px); max-width: 650px; }
.booking-hero p { max-width: 600px; }

/* Authentication */
.auth-loading{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:10px;background:var(--cream);color:var(--ink)}
.auth-loading__mark{width:72px;height:72px;margin-bottom:8px}.auth-loading__mark img{width:100%;height:100%}.auth-loading strong{font:800 22px var(--font-display)}.auth-loading span{font-size:12px;color:var(--muted)}
.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(360px,.8fr) minmax(500px,1.2fr);background:var(--paper)}
.auth-brand-panel{background:var(--green);color:white;padding:42px clamp(36px,5vw,72px);display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth-brand-panel::before,.auth-brand-panel::after{content:"";position:absolute;width:330px;height:330px;border:48px solid rgba(255,255,255,.035);border-radius:50%}.auth-brand-panel::before{right:-210px;top:-150px}.auth-brand-panel::after{left:-210px;bottom:-170px}
.auth-brand-panel .brand{padding:0;position:relative;z-index:1}.auth-brand-copy{margin:auto 0;position:relative;z-index:1}.auth-brand-copy .eyebrow{color:#a9cbc2}.auth-brand-copy h1{font-size:clamp(42px,5vw,68px);color:white;margin-bottom:20px}.auth-brand-copy p{max-width:400px;color:rgba(255,255,255,.62);font-size:15px;line-height:1.65}
.auth-trust{position:relative;z-index:1;display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.6);font-size:11px}.auth-trust .icon{color:var(--coral)}
.auth-form-panel{display:grid;place-items:center;padding:44px 24px;background:var(--cream)}.auth-form-wrap{width:min(430px,100%)}.auth-form-wrap>h2{font-size:30px;margin-bottom:8px}.auth-subtitle{color:var(--muted);font-size:14px;margin-bottom:24px}.auth-mobile-brand{display:none}
.auth-form{display:grid;gap:15px}.auth-form .field{gap:7px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-label-row .text-link{font-size:11px}.auth-submit{width:100%;min-height:48px;margin-top:4px}.auth-switch{text-align:center;color:var(--muted);font-size:12px;margin-top:20px}.auth-switch button{border:0;background:transparent;color:var(--green-2);font-weight:800;padding:2px 4px}.auth-divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:10px;margin:18px 0}.auth-divider::before,.auth-divider::after{content:"";height:1px;background:var(--line);flex:1}.auth-book{width:100%}
.local-admin-access{display:grid;gap:9px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);text-align:center}.local-admin-access span{color:var(--muted);font-size:11px}.local-admin-access .btn{width:100%}
.setup-notice{display:flex;gap:11px;align-items:flex-start;padding:13px;background:var(--color-warning-100);border:1px solid rgba(208,154,61,.25);border-radius:var(--radius-md);margin-bottom:20px;color:#76541a}.setup-notice .icon{margin-top:1px}.setup-notice strong,.setup-notice span{display:block}.setup-notice strong{font-size:12px}.setup-notice span{font-size:10px;margin-top:3px;line-height:1.5}.setup-notice code{font-size:9px;background:rgba(255,255,255,.45);padding:2px 4px;border-radius:4px}
.form-feedback{min-height:18px;color:var(--color-danger-600);font-size:11px;line-height:1.45}.form-feedback.success{color:#287053}

/* Customer portal */
.customer-app{min-height:100vh;background:var(--cream)}.customer-header{height:76px;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.customer-header__inner{height:100%;max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:34px}.customer-header .brand{padding:0;color:var(--green)}.customer-header .brand-mark svg{color:var(--green)}.customer-header .brand small{color:var(--coral)}
.customer-nav{display:flex;align-self:stretch;gap:2px}.customer-nav button{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:700;padding:0 12px;display:flex;align-items:center;gap:7px;position:relative}.customer-nav button::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:transparent}.customer-nav button:hover{color:var(--ink)}.customer-nav button.active{color:var(--green)}.customer-nav button.active::after{background:var(--coral)}.customer-nav .icon{width:16px}
.customer-user{margin-left:auto;display:flex;align-items:center;gap:9px}.customer-user>div:nth-child(2) strong,.customer-user>div:nth-child(2) span{display:block}.customer-user>div:nth-child(2) strong{font-size:11px}.customer-user>div:nth-child(2) span{font-size:9px;color:var(--muted);max-width:150px;overflow:hidden;text-overflow:ellipsis}.customer-user .icon-btn{margin-left:4px}
.customer-main{max-width:1080px;margin:0 auto;padding:42px 24px 80px}.customer-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}.customer-page-head h1{font-size:36px}.customer-page-head>div>p:last-child{color:var(--muted);font-size:14px;margin:0}
.customer-highlight{background:var(--green);color:white;border-radius:var(--radius-xl);padding:30px 34px;min-height:250px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative;margin-bottom:18px}.customer-highlight::after{content:"";position:absolute;right:-80px;bottom:-120px;width:270px;height:270px;border:45px solid rgba(255,255,255,.04);border-radius:50%}.customer-highlight>div:first-child{position:relative;z-index:2}.customer-highlight .next-label{color:#a9cbc2}.customer-highlight__date{display:block;font:800 28px var(--font-display);margin:13px 0 6px}.customer-highlight h2{font-size:20px;margin-bottom:6px;color:white}.customer-highlight p{color:rgba(255,255,255,.6);font-size:12px;margin-bottom:20px}.customer-highlight__actions{display:flex;gap:8px}.customer-highlight__actions .btn-ghost{border-color:rgba(255,255,255,.2);color:white}.customer-highlight__stamp{width:112px;height:112px;border:1px solid rgba(255,255,255,.16);border-radius:50%;display:grid;place-items:center;margin-right:60px;position:relative;z-index:1;color:var(--coral)}.customer-highlight__stamp .icon{width:42px;height:42px}.customer-highlight.is-empty{min-height:210px}
.customer-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.customer-summary-card{padding:19px;display:grid;grid-template-columns:1fr auto;align-items:start;min-height:150px}.customer-summary-card>.metric-icon{grid-column:2;grid-row:1/3;width:34px;height:34px;border-radius:10px;background:var(--mint);color:var(--green);display:grid;place-items:center}.customer-summary-card>p{grid-column:1;font-size:11px;color:var(--muted);margin-bottom:10px}.customer-summary-card>strong{grid-column:1/-1;font:800 17px var(--font-display);margin-bottom:10px}.customer-summary-card>.badge,.customer-summary-card>span:last-child{grid-column:1/-1}.customer-summary-card>span:last-child{font-size:10px;color:var(--muted)}
.customer-section{padding:22px;margin-top:18px}.customer-section .panel-head{margin-bottom:10px}.customer-appointments{display:grid}.customer-appointment{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:15px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.customer-appointment:last-child{border-bottom:0}.customer-appointment__date{width:50px;height:50px;border-radius:12px;background:var(--mint);display:grid;place-content:center;text-align:center;color:var(--green)}.customer-appointment__date strong{font:800 18px/1 var(--font-display)}.customer-appointment__date span{text-transform:uppercase;font-size:8px;font-weight:800;margin-top:3px}.customer-appointment__time{font-size:9px;color:var(--coral);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.customer-appointment h3{margin:4px 0 3px;font-size:13px}.customer-appointment p{margin:0;color:var(--muted);font-size:10px}
.customer-plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.customer-plan-grid .customer-section{margin:0}.customer-plan{padding:12px 0 20px;border-bottom:1px solid var(--line)}.customer-plan:last-child{border-bottom:0}.customer-plan>div:first-child{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.customer-plan>div:first-child>span{width:100%;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.customer-plan h3{margin:0;font-size:16px}.customer-plan__balance{margin-top:22px}.customer-plan__balance strong{font:800 30px var(--font-display)}.customer-plan__balance span{font-size:11px;color:var(--muted);margin-left:5px}.customer-plan .progress{width:100%;margin:8px 0 12px}.customer-plan>p{font-size:10px;color:var(--muted);margin:0}
.customer-profile-card{max-width:720px;padding:26px}.customer-profile-intro{display:flex;align-items:center;gap:13px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}.customer-profile-intro .avatar{width:52px;height:52px}.customer-profile-intro h2{margin:0 0 3px}.customer-profile-intro span{font-size:11px;color:var(--muted)}.customer-logout-mobile{display:none}.customer-mobile-nav{display:none}
.customer-loading{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.customer-loading i{height:150px;border-radius:var(--radius-lg);background:linear-gradient(90deg,var(--paper),#ece8df,var(--paper));background-size:200% 100%;animation:loading 1.3s infinite}@keyframes loading{to{background-position:-200% 0}}

/* White-label settings */
.settings-v4-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);gap:18px;align-items:start}.settings-v4-main{display:grid;gap:18px}.settings-section,.settings-catalog{padding:22px}.settings-section textarea{resize:vertical}.settings-v4-aside{position:sticky;top:96px}.settings-preview-card{padding:18px}.settings-preview{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:white}.settings-preview__cover{height:100px;background:var(--tenant-primary);background-size:cover;background-position:center;position:relative}.settings-preview__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,59,55,.08),transparent)}.settings-preview__body{padding:16px}.settings-preview__identity{display:flex;align-items:center;gap:10px;margin-top:-38px;position:relative}.settings-preview__identity>div{padding-top:35px}.settings-preview__identity strong,.settings-preview__identity span{display:block}.settings-preview__identity strong{font-size:14px}.settings-preview__identity span{font-size:9px;color:var(--muted);margin-top:2px}.public-avatar{width:48px;height:48px;border-radius:14px;background:var(--tenant-primary,var(--green));color:white;border:3px solid white;display:grid;place-items:center;font-weight:800}.public-avatar.small,.public-logo.small{width:48px;height:48px}.public-avatar.large,.public-logo.large{width:120px;height:120px;border-radius:28px}.public-logo{object-fit:cover;border-radius:14px;border:3px solid white;background:white}.settings-preview__body>p{font-size:9px;color:var(--muted);margin:12px 0}.settings-preview__services{display:grid;gap:6px;margin-bottom:12px}.settings-preview__services>div{display:flex;justify-content:space-between;font-size:9px;border-bottom:1px solid var(--line);padding-bottom:5px}.tenant-button{background:var(--tenant-accent,var(--coral));color:white;border:0}.settings-preview .tenant-button{width:100%;padding:9px;border-radius:8px;font-size:10px;font-weight:800}.settings-preview small{display:block;text-align:center;color:var(--muted);font-size:7px;margin-top:10px}.preview-actions{display:flex;gap:7px;margin-top:12px}.preview-actions .btn{flex:1}.color-field{height:44px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;padding:5px 10px;gap:10px;background:white}.color-field input{width:30px;height:30px;border:0;padding:0;min-height:0}.color-field code{font-size:11px}.check-row{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:white}.check-row input{width:18px;height:18px;accent-color:var(--green)}.check-row strong,.check-row small{display:block}.check-row strong{font-size:11px}.check-row small{font-size:9px;color:var(--muted);margin-top:2px}.payment-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.payment-settings-grid h3{font-size:12px}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:11px}.toggle-row input{accent-color:var(--green);width:18px;height:18px}.demo-warning{display:flex;align-items:center;gap:8px;background:var(--color-warning-100);color:#76541a;padding:11px 13px;border-radius:10px;font-size:10px;margin-top:16px}.settings-sticky-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 0}.settings-catalog{margin-top:18px}.settings-list{display:grid}.settings-list article{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.settings-list article:last-child{border-bottom:0}.settings-list article>div:first-child strong,.settings-list article>div:first-child span,.settings-list article>div:first-child small{display:block}.settings-list article>div:first-child strong{font-size:13px}.settings-list article>div:first-child span{font-size:10px;color:var(--muted);margin-top:3px}.settings-list article>div:first-child small{font-size:9px;color:var(--green-2);margin-top:4px}

/* Tenant public booking */
.tenant-booking{min-height:100vh;background:#f7f4ee;color:var(--ink)}.tenant-nav{height:76px;max-width:1160px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}.tenant-identity{display:flex;align-items:center;gap:10px}.tenant-identity>div strong,.tenant-identity>div span{display:block}.tenant-identity>div strong{font:800 15px var(--font-display)}.tenant-identity>div span{font-size:9px;color:var(--muted);margin-top:3px}.tenant-nav__actions{display:flex;align-items:center;gap:8px}.tenant-nav .btn{border-color:var(--tenant-primary);color:var(--tenant-primary)}.tenant-nav .text-link{color:var(--tenant-primary)}.tenant-main{max-width:1120px;margin:0 auto;padding:42px 24px 60px}.tenant-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center;margin-bottom:34px}.tenant-hero h1{font-size:clamp(38px,5vw,58px);color:var(--tenant-primary);margin-bottom:8px}.tenant-slogan{font:700 17px var(--font-display);color:var(--ink)!important}.tenant-hero>div:first-child>p:not(.eyebrow):not(.tenant-slogan){color:var(--muted);font-size:14px;line-height:1.6;max-width:560px}.tenant-contact{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;font-size:10px;color:var(--muted)}.tenant-contact span,.tenant-contact a{display:flex;align-items:center;gap:5px}.tenant-contact a{color:var(--tenant-primary);font-weight:800}.tenant-cover{height:310px;background:var(--tenant-primary);border-radius:28px;display:grid;place-items:center;background-size:cover;background-position:center;overflow:hidden;position:relative}.tenant-cover::after{content:"";position:absolute;width:210px;height:210px;border:35px solid rgba(255,255,255,.05);border-radius:50%;right:-80px;bottom:-100px}.tenant-cover .public-avatar{position:relative;z-index:2;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12)}.tenant-booking-card{padding:26px}.tenant-booking .step-dot.active{background:var(--tenant-accent)}.tenant-services{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tenant-service{border:1px solid var(--line);background:white;border-radius:13px;padding:15px;text-align:left;color:var(--ink);display:flex;justify-content:space-between;gap:12px}.tenant-service:hover,.tenant-service.selected{border-color:var(--tenant-primary);box-shadow:0 0 0 1px var(--tenant-primary)}.tenant-service strong,.tenant-service span{display:block}.tenant-service strong{font-size:13px}.tenant-service span{font-size:9px;color:var(--muted);margin-top:4px;line-height:1.4}.tenant-service>div:last-child{text-align:right}.tenant-service small,.tenant-service b{display:block;white-space:nowrap}.tenant-service small{font-size:9px;color:var(--muted)}.tenant-service b{font-size:12px;color:var(--tenant-accent);margin-top:5px}.tenant-booking .time-btn.selected{background:var(--tenant-primary);border-color:var(--tenant-primary)}.tenant-booking .choice.selected{border-color:var(--tenant-primary);box-shadow:0 0 0 1px var(--tenant-primary)}.tenant-booking .booking-bottom .tenant-button{min-width:120px}.tenant-ticket{background:white!important}.tenant-policy{display:flex;gap:10px;align-items:flex-start;padding:16px 4px;color:var(--muted)}.tenant-policy .icon{color:var(--tenant-primary)}.tenant-policy strong,.tenant-policy span{display:block}.tenant-policy strong{font-size:10px;color:var(--ink)}.tenant-policy span{font-size:9px;margin-top:2px}.tenant-signature{text-align:center;padding:18px;color:var(--muted);font-size:9px;border-top:1px solid var(--line)}.payment-choice-list{display:grid;gap:8px}.payment-choice{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);background:white;border-radius:12px;padding:13px;color:var(--ink)}.payment-choice:hover,.payment-choice.selected{border-color:var(--tenant-primary,var(--green));box-shadow:0 0 0 1px var(--tenant-primary,var(--green))}.payment-choice>.icon{color:var(--tenant-accent,var(--coral))}.payment-choice span strong,.payment-choice span small{display:block}.payment-choice span strong{font-size:12px}.payment-choice span small{font-size:9px;color:var(--muted);margin-top:3px}.payment-demo-box{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px}.payment-demo-box strong{font-size:12px}.payment-demo-box p{font-size:9px;color:var(--muted);margin:7px 0}.payment-demo-box code{display:block;word-break:break-all;background:white;border:1px dashed var(--line);padding:9px;border-radius:8px;font-size:9px;margin:10px 0}.payment-demo-box>div{display:flex;gap:7px}

/* Available plans and simulated subscriptions */
.plans-available{background:transparent;padding:18px 0}.available-plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.available-plan{padding:20px}.available-plan h3{font-size:17px}.available-plan>p{color:var(--muted);font-size:10px;min-height:42px;line-height:1.5}.available-plan>strong{font:800 24px var(--font-display)}.available-plan>strong small{font-size:9px;color:var(--muted)}.available-plan ul{padding-left:17px;color:var(--muted);font-size:10px;line-height:1.8;min-height:58px}.available-plan .btn{width:100%}.subscription-card .badge{margin-right:5px}.subscription-summary{background:var(--cream);padding:15px;border-radius:12px;margin-bottom:18px}.subscription-summary>strong{font:800 24px var(--font-display)}.subscription-summary>strong small{font-size:9px}.subscription-summary p{font-size:10px;color:var(--muted);margin:6px 0}.subscription-summary span{font-size:9px;color:var(--green-2)}.subscription-modal>h3{font-size:12px}.table-sub{display:block;color:var(--muted);font-size:9px;margin-top:2px}

@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.cash-layout{grid-template-columns:1fr}.booking-hero{gap:25px}.booking-hero h1{font-size:42px}}
@media(max-width:760px){
  .app-shell{display:block}.sidebar,.topbar{display:none}.main{padding-bottom:74px}.mobile-top{height:64px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(245,241,232,.93);backdrop-filter:blur(10px);z-index:15}.mobile-top .brand{padding:0;color:var(--ink)}.mobile-top .brand small{display:none}.mobile-top .brand-mark{width:32px;height:32px}.mobile-nav{position:fixed;bottom:0;left:0;right:0;background:var(--paper);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:25;padding:7px 4px max(7px,env(safe-area-inset-bottom))}.mobile-nav button{border:0;background:transparent;color:var(--muted);display:grid;place-items:center;gap:3px;font-size:9px}.mobile-nav button.active{color:var(--coral)}.mobile-nav .icon{width:19px}.content{padding:23px 17px 30px}.page-head{align-items:flex-start}.page-head h1{font-size:28px}.page-head .sub{max-width:260px}.page-head .btn span.label{display:none}.metric-grid{grid-template-columns:1fr 1fr;gap:9px}.metric{min-height:115px;padding:15px}.metric strong{font-size:21px}.dashboard-grid{display:block}.dashboard-grid>.card{margin-bottom:14px}.next-time{font-size:32px}.free-slots{grid-template-columns:repeat(3,1fr)}.toolbar{align-items:stretch}.filter{margin-left:0;flex:1}.insight{align-items:flex-start}.insight .btn{display:none}.choices{grid-template-columns:1fr}.booking-nav{padding:0 18px}.booking-nav .btn{padding:9px 11px}.booking-main{padding:30px 17px 60px}.booking-hero{grid-template-columns:1fr;margin-bottom:25px}.booking-hero h1{font-size:38px}.barber-art{display:none}.booking-card{padding:18px}.time-grid{grid-template-columns:repeat(3,1fr)}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.booking-bottom{gap:12px}.booking-summary{max-width:170px}.appointment{grid-template-columns:48px 3px minmax(0,1fr) auto}.appt-end .btn{font-size:0;padding:8px}.appt-end .btn .icon{font-size:initial}.table-wrap{margin:0 -10px}.cash-total{padding:20px}
  .profile-plan{grid-template-columns:1fr}.history-item{grid-template-columns:50px 8px minmax(0,1fr)}.history-item>.badge{display:none}
  .modal-backdrop{place-items:end center;padding:0}.modal{width:100%;max-height:92dvh;border-radius:22px 22px 0 0;padding:22px 18px max(18px,env(safe-area-inset-bottom))}.modal::before{content:"";display:block;width:42px;height:4px;border-radius:4px;background:var(--line);margin:-10px auto 18px}.modal-actions{position:sticky;bottom:0;background:var(--paper);padding-top:12px}.modal-actions .btn{min-height:46px;flex:1}.field input,.field textarea,.field select{font-size:16px}.btn{min-height:44px}.btn-sm{min-height:38px}.empty-state{padding:34px 18px}.data-table{max-width:100%}.panel{padding:17px}.today-summary{gap:10px}.badge{white-space:nowrap}.toast{left:16px;right:16px;bottom:84px;text-align:center}
  .mobile-top{background:rgba(246,242,235,.93)}.mobile-top .brand-mark svg{width:32px;height:32px}
  .auth-page{display:block;min-height:100dvh}.auth-brand-panel{display:none}.auth-form-panel{min-height:100dvh;padding:28px 20px 44px;align-items:start}.auth-form-wrap{max-width:none}.auth-mobile-brand{display:block;margin-bottom:44px}.auth-mobile-brand .brand{padding:0;color:var(--green)}.auth-mobile-brand .brand-mark svg{color:var(--green)}.auth-form-wrap>h2{font-size:27px}.auth-subtitle{margin-bottom:20px}.auth-form{gap:13px}.setup-notice{margin-bottom:16px}
  .customer-header{height:64px}.customer-header__inner{padding:0 17px}.customer-header .brand small{display:none}.customer-header .brand-mark{width:32px;height:32px}.customer-header .brand-mark svg{width:32px;height:32px}.customer-header .brand strong{font-size:17px}.customer-nav,.customer-user>div:nth-child(2),.customer-user .icon-btn{display:none}.customer-user{margin-left:auto}.customer-main{padding:27px 17px 94px}.customer-page-head{align-items:flex-start;margin-bottom:20px}.customer-page-head h1{font-size:28px}.customer-page-head>div>p:last-child{font-size:12px}.customer-page-head>.btn{width:44px;padding:0;font-size:0}.customer-page-head>.btn .icon{width:20px}.customer-highlight{padding:24px 20px;min-height:270px}.customer-highlight__date{font-size:23px}.customer-highlight__stamp{display:none}.customer-highlight__actions{flex-direction:column;align-items:stretch}.customer-highlight__actions .btn{width:100%}.customer-summary-grid{grid-template-columns:1fr;gap:10px}.customer-summary-card{min-height:130px}.customer-section{padding:18px;margin-top:12px}.customer-appointment{grid-template-columns:48px minmax(0,1fr);gap:12px}.customer-appointment>.badge{grid-column:2}.customer-appointment__date{width:46px;height:46px}.customer-plan-grid{grid-template-columns:1fr;gap:12px}.customer-profile-card{padding:19px}.customer-profile-card .form-grid{display:grid}.customer-logout-mobile{display:flex;width:100%;margin-top:16px}.customer-mobile-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper);border-top:1px solid var(--line);padding:7px 3px max(7px,env(safe-area-inset-bottom))}.customer-mobile-nav button{border:0;background:transparent;color:var(--muted);display:grid;place-items:center;gap:3px;font-size:8px;min-width:0}.customer-mobile-nav button.active{color:var(--coral)}.customer-mobile-nav .icon{width:19px}.customer-loading{grid-template-columns:1fr}.customer-loading i{height:120px}.customer-loading i:nth-child(n+2){display:none}
  .settings-v4-layout{grid-template-columns:1fr}.settings-v4-aside{position:static;order:-1}.settings-section,.settings-catalog{padding:18px}.payment-settings-grid{grid-template-columns:1fr}.settings-sticky-actions{position:sticky;bottom:72px;background:var(--cream);padding:10px 0;z-index:5}.settings-sticky-actions .btn{flex:1}.settings-list article{grid-template-columns:minmax(0,1fr) auto}.settings-list article>.row-actions{grid-column:1/-1;justify-content:flex-start}.settings-preview__cover{height:82px}
  .tenant-nav{height:68px;padding:0 17px}.tenant-identity>div span{display:none}.tenant-nav__actions .text-link{display:none}.tenant-nav__actions .btn{padding:9px 11px}.tenant-main{padding:24px 17px 42px}.tenant-hero{grid-template-columns:1fr;gap:18px;margin-bottom:22px}.tenant-hero h1{font-size:35px}.tenant-cover{height:170px}.tenant-cover .public-avatar.large,.tenant-cover .public-logo.large{width:88px;height:88px}.tenant-booking-card{padding:18px}.tenant-services{grid-template-columns:1fr}.tenant-service{padding:14px}.tenant-contact{gap:8px}.payment-demo-box>div{flex-direction:column}.tenant-booking .booking-bottom{align-items:flex-end}.tenant-signature{padding-bottom:28px}
  .available-plans-grid{grid-template-columns:1fr}.available-plan>p,.available-plan ul{min-height:0}.subscription-modal{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}

/* Oficina Barber v0.4 — acessos, papéis e permissões */
.access-types{display:flex;flex-wrap:wrap;gap:6px;margin:-10px 0 18px}.access-types strong{width:100%;font-size:10px;color:var(--ink)}.access-types span{padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);font-size:9px;font-weight:700}
.demo-access{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}.demo-access__head{grid-column:1/-1;display:flex;align-items:end;justify-content:space-between;margin-bottom:2px}.demo-access__head span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--coral);font-weight:800}.demo-access__head strong{font-size:11px}.demo-role-card{display:grid;grid-template-columns:32px minmax(0,1fr) 14px;align-items:center;gap:8px;text-align:left;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);transition:var(--transition)}.demo-role-card:hover,.demo-role-card:focus-visible{border-color:var(--green);box-shadow:0 0 0 2px rgba(15,59,55,.08);transform:translateY(-1px)}.demo-role-card>.icon{width:14px;color:var(--muted)}.demo-role-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--cream);color:var(--green)}.demo-role-icon .icon{width:16px}.demo-role-card strong,.demo-role-card small{display:block}.demo-role-card strong{font-size:10px}.demo-role-card small{font-size:8px;line-height:1.35;color:var(--muted);margin-top:2px}.demo-divider{margin-top:0}.shell-logout{width:100%;margin-top:8px}.sidebar-foot{display:grid;gap:4px}.customer-profile-intro p{font-size:10px;color:var(--muted);margin-top:4px}
/* Contexto multi-barbearia */
.barbershop-switcher,.public-shop-switch{display:grid;gap:2px}.barbershop-switcher{min-width:185px;margin-left:14px}.barbershop-switcher span,.public-shop-switch span,.customer-current-shop span{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}.barbershop-switcher select,.public-shop-switch select{min-height:34px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);padding:5px 28px 5px 9px;font:700 10px var(--font-body)}.customer-current-shop{display:grid;margin-left:14px}.customer-current-shop strong{font-size:11px}.public-shop-switch select{max-width:180px}.customer-preference-preview{display:flex;align-items:center;gap:14px;padding:17px 19px;margin-bottom:14px}.customer-preference-preview>div>span{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}.customer-preference-preview h2{font-size:17px;margin:3px 0}.customer-preference-preview p{font-size:10px;color:var(--muted)}
@media(max-width:760px){.demo-access{grid-template-columns:1fr}.demo-access__head{grid-column:1}.demo-role-card{min-height:58px}.access-types{margin-bottom:14px}.sidebar-foot .shell-logout{display:none}.barbershop-switcher{min-width:0;margin-left:auto}.barbershop-switcher span{display:none}.barbershop-switcher select{max-width:138px}.customer-current-shop{display:none}.public-shop-switch{position:absolute;top:70px;left:17px;right:17px}.public-shop-switch span{display:none}.public-shop-switch select{width:100%;max-width:none}.tenant-main{padding-top:64px}.customer-preference-preview{align-items:flex-start}.customer-preference-preview .metric-icon{flex:none}}
@media(max-width:760px){.mobile-nav.role-professional{grid-template-columns:repeat(7,1fr)}.mobile-nav.role-professional button{font-size:7px}.mobile-nav.role-professional .icon{width:17px}}
@media(max-width:420px){.metric-grid{grid-template-columns:1fr 1fr}.metric p{font-size:10px}.metric .metric-icon{width:30px;height:30px}.page-head{gap:10px}.page-head .btn{padding:10px}.next-actions{flex-wrap:wrap}.choices{grid-template-columns:1fr}.booking-hero h1{font-size:34px}}

/* ================================================================
   OFICINA v0.3 — personalização pública, serviços, planos e
   pagamentos demonstrativos.
   ================================================================ */
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.settings-stack { display: grid; gap: 18px; }
.settings-preview { position: sticky; top: 96px; }
.muted-small { color: var(--muted); font-size: 10px; }
.payment-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.payment-settings-grid h3 { margin: 0 0 10px; }
.payment-settings-grid label, .payment-choice-list label { display: flex; gap: 9px; align-items: center; padding: 10px 0; color: var(--ink); font-size: 13px; }
.payment-settings-grid input[type="checkbox"], .payment-choice-list input[type="radio"] { width: 17px; height: 17px; accent-color: var(--green); }
.demo-warning { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-warning-100); color: #75551d; font-size: 12px; line-height: 1.45; border: 1px solid rgba(208,154,61,.22); }
.public-preview { overflow: hidden; }
.public-preview-cover { height: 110px; background: linear-gradient(135deg, var(--preview-primary), #163f3b); background-size: cover; background-position: center; }
.public-preview-body { padding: 18px; }
.public-preview-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 13px; }
.public-preview-brand strong { display: block; font: 800 16px var(--font-display); }
.public-preview-brand span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.public-preview-body p { color: var(--muted); font-size: 12px; line-height: 1.45; }
.public-preview-body .btn { width: 100%; background: var(--preview-accent); color: white; margin-top: 14px; }
.public-preview-body small { display: block; text-align: center; color: var(--muted); margin-top: 12px; font-size: 10px; }
.public-avatar { width: 48px; height: 48px; border-radius: 16px; background: var(--preview-primary, var(--green)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.public-logo-img { width: 54px; height: 54px; border-radius: 16px; object-fit: contain; background: white; border: 1px solid var(--line); padding: 5px; flex: none; }
.service-mini-list { display: grid; gap: 8px; margin: 14px 0; }
.service-mini-list div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.service-mini-list div:last-child { border-bottom: 0; }
.service-mini-list strong { color: var(--preview-primary, var(--green)); }
.public-booking .step-dot.active { background: var(--public-accent); }
.public-booking .btn-primary { background: var(--public-accent); }
.public-booking .time-btn:hover, .public-booking .time-btn.selected { background: var(--public-primary); border-color: var(--public-primary); }
.public-booking-nav { background: var(--paper); }
.public-brand-head { display: flex; align-items: center; gap: 12px; }
.public-brand-head strong { display: block; font: 800 17px var(--font-display); color: var(--public-primary); }
.public-brand-head small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.public-hero h1 { color: var(--public-primary); }
.public-contact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.public-contact-row span, .map-link { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--paper); border: 1px solid var(--line); font-size: 12px; color: var(--ink); }
.map-link { color: var(--public-primary); font-weight: 800; margin-left: 8px; }
.public-cover-card { aspect-ratio: 1.2; background: linear-gradient(135deg, var(--public-primary), #113d39); background-size: cover; background-position: center; border-radius: 32px; position: relative; overflow: hidden; display: grid; place-items: center; color: white; }
.public-cover-card::after { content: ""; position: absolute; inset: 0; background: rgba(15,59,55,.35); }
.public-cover-card .big-mark { position: relative; z-index: 1; width: 150px; height: 150px; display: grid; place-items: center; border: 2px solid var(--public-accent); border-radius: 50%; }
.public-cover-card .big-mark svg { width: 72px; color: white; }
.public-footer { text-align: center; color: var(--muted); font-size: 11px; margin-top: 22px; }
.public-footer strong { color: var(--green); }
.service-choices .choice b { color: var(--public-accent); }
.booking-payments { display: grid; gap: 8px; }
.booking-payments label, .payment-choice-list label { border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-md); padding: 13px 14px; }
.demo-payment-box { margin-top: 14px; padding: 14px; border-radius: var(--radius-md); background: var(--cream); border: 1px solid var(--line); display: grid; gap: 7px; }
.demo-payment-box strong { color: var(--ink); }
.demo-payment-box p, .demo-payment-box span { color: var(--muted); font-size: 12px; margin: 0; }
.demo-payment-box code { display: block; padding: 10px; border-radius: 9px; background: var(--paper); border: 1px dashed var(--line); color: var(--green); font-size: 12px; overflow: auto; }
.available-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.available-plan { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; background: var(--paper); display: grid; gap: 10px; }
.available-plan h3 { margin: 0; font-size: 15px; }
.available-plan p { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 0; min-height: 34px; }
.available-plan > strong { font: 800 24px var(--font-display); color: var(--green); }
.available-plan > strong small { color: var(--muted); font-size: 11px; font-weight: 700; }
.available-plan > span { color: var(--muted); font-size: 11px; }
.available-plan .btn { margin-top: 6px; }
.plan-subscribe { display: grid; gap: 12px; }

@media(max-width:1050px){
  .settings-layout { grid-template-columns: 1fr; }
  .settings-preview { position: static; }
  .available-plans-grid { grid-template-columns: 1fr; }
}
@media(max-width:760px){
  .payment-settings-grid { grid-template-columns: 1fr; }
  .public-booking-nav .public-brand-head small { display: none; }
  .public-hero { grid-template-columns: 1fr; }
  .public-cover-card { min-height: 180px; aspect-ratio: auto; }
  .public-contact-row span, .map-link { width: 100%; justify-content: center; margin-left: 0; }
  .settings-layout .form-grid { grid-template-columns: 1fr; }
  .public-preview-cover { height: 90px; }
}