/* ===================== RESET & ROOT ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --cream: #FAF8F4; --warm-white: #FFFFFF; --charcoal: #1C1C1A;
  --muted: #7A7870; --accent: #C4956A; --accent-light: #F0E6D8;
  --border: #E8E4DC; --sidebar-w: 220px;
  --success: #5A8A6A; --success-light: #EDF5F0;
  --danger: #C0503A; --danger-light: #FDF0ED;
  --info: #2E6DA4; --info-light: #EBF3FB;
  --warning: #B8860B; --warning-light: #FDF8E6;
}
html, body { height: 100%; font-family: 'DM Sans', sans-serif; color: var(--charcoal); background: var(--cream); overflow: hidden; }

/* ===================== SCREENS ===================== */
.screen { display: none; width: 100%; height: 100vh; overflow-y: auto; }
.screen.active { display: flex; flex-direction: column; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===================== SHARED SIDEBAR ===================== */
.app-layout { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: var(--sidebar-w); background: var(--charcoal); display: flex; flex-direction: column; flex-shrink: 0; height: 100vh; overflow-y: auto; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 22px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.brand-icon { width: 32px; height: 32px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.sidebar-brand .brand-icon { border-radius: 9px; overflow: hidden; background-color: #050505; }
.brand-icon svg { width: 16px; height: 16px; fill: white; }
.brand-name { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 400; color: white; cursor: pointer; }
.sidebar-business { padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.business-row { display:flex; align-items:center; gap:9px; }
.branch-switch { width:100%; margin-top:10px; background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:8px 9px; font:600 11px 'DM Sans',sans-serif; }
.branch-switch option { color:#1c1c1a; }
.business-photo { width:30px; height:30px; border-radius:8px; background:rgba(196,149,106,0.22); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; flex-shrink:0; background-size:cover; background-position:center; }
.business-photo img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.business-badge { font-size: 10px; color: rgba(255,255,255,0.35); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.business-name { font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 500; }
.sidebar-nav { flex: 1; padding: 12px 0; }
.sidebar-logout { margin: 10px 14px 16px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.62); font-family: 'DM Sans', sans-serif; font-size: 12px; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.sidebar-logout:hover { background: rgba(255,255,255,0.07); color: white; }
.sidebar-logout svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.nav-section { padding: 0 12px; margin-bottom: 4px; }
.nav-label { font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.25); padding: 8px 8px 5px; display: block; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; transition: background 0.15s; margin-bottom: 2px; }
.nav-item:hover { background: rgba(255,255,255,0.07); }
.nav-item.active { background: rgba(196,149,106,0.18); }
.nav-item svg { width: 16px; height: 16px; fill: rgba(255,255,255,0.45); flex-shrink: 0; }
.nav-item.active svg { fill: var(--accent); }
.nav-item span { font-size: 13px; color: rgba(255,255,255,0.5); }
.nav-item.active span { color: rgba(255,255,255,0.9); font-weight: 500; }
.nav-badge { margin-left: auto; background: var(--accent); color: white; font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 10px; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
.user-row:hover { background: rgba(255,255,255,0.07); }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: white; flex-shrink: 0; }
.user-name { font-size: 12px; color: rgba(255,255,255,0.8); font-weight: 500; }
.user-role { font-size: 10px; color: rgba(255,255,255,0.35); }

/* MAIN AREA */
.main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar { background: var(--warm-white); border-bottom: 1px solid var(--border); padding: 0 28px; height: 58px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.topbar h1 { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 400; }
.topbar-sub { font-size:11px; color:var(--muted); margin-top:1px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.page-content { flex: 1; overflow-y: auto; padding: 26px 30px; background: var(--cream); }

/* ===================== BUTTONS ===================== */
.btn-primary { display: inline-flex; align-items: center; justify-content:center; gap: 7px; min-height:36px; padding: 9px 18px; background: var(--charcoal); color: white; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.12s; white-space:nowrap; }
.btn-primary:hover { background: #2E2E2A; box-shadow:0 6px 16px rgba(28,28,26,0.12); transform:translateY(-1px); }
.btn-primary svg { width: 14px; height: 14px; fill: white; }
.btn-accent { background: var(--accent); }
.btn-accent:hover { background: #B5845A; }
.btn-outline { min-height:36px; padding: 8px 14px; background: none; border: 1px solid var(--border); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight:500; color: var(--charcoal); cursor: pointer; transition: all 0.15s; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-link-copy { display: flex; align-items: center; gap: 7px; padding: 8px 14px; background: var(--accent-light); color: var(--accent); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; border: none; border-radius: 8px; cursor: pointer; }
.btn-link-copy svg { width: 14px; height: 14px; fill: var(--accent); }
.btn-notif { width: 36px; height: 36px; background: none; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
.btn-notif svg { width: 16px; height: 16px; fill: var(--muted); }
.notif-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; border: 1.5px solid white; }
.btn-save { padding: 9px 20px; background: var(--charcoal); color: white; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; border: none; border-radius: 8px; cursor: pointer; }
.btn-cancel-modal { padding: 9px 16px; background: none; border: 1px solid var(--border); color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: 13px; border-radius: 8px; cursor: pointer; }
.btn-danger { padding: 9px 16px; background: none; border: 1px solid var(--danger); color: var(--danger); font-family: 'DM Sans', sans-serif; font-size: 13px; border-radius: 8px; cursor: pointer; }
.btn-icon { width: 30px; height: 30px; background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.btn-icon svg { width: 14px; height: 14px; fill: var(--muted); }
.btn-icon:hover { background: var(--cream); }

/* ===================== CARDS & SECTIONS ===================== */
.stats-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card { background: var(--warm-white); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; min-width:0; }
.stat-val { font-family: 'Cormorant Garamond', serif; font-size: 27px; font-weight: 400; line-height:1; }
.stat-label { font-size: 11px; color: var(--muted); margin-top: 5px; line-height:1.25; }
.stat-sub { font-size: 11px; color: var(--success); margin-top: 3px; }
.section-card { background: var(--warm-white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.section-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.section-title { font-size: 14px; font-weight: 500; }
.section-action { font-size: 12px; color: var(--accent); cursor: pointer; background: none; border: none; font-family: 'DM Sans', sans-serif; font-weight: 500; }
.btn-secondary { padding: 10px 16px; background: var(--warm-white); color: var(--charcoal); border: 1px solid var(--border); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.btn-secondary:hover { background: var(--cream); }

/* FIELDS */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; padding: 10px 13px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--charcoal); background: var(--cream); border: 1px solid var(--border); border-radius: 8px; outline: none; transition: border-color 0.2s; appearance: none; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: #C0BDB5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.select-wrap { position: relative; }
.select-wrap::after { content: '▾'; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }
.image-upload-row { display:grid; grid-template-columns:180px 1fr; gap:12px; margin-bottom:16px; }
.image-uploader { display:flex; flex-direction:column; gap:7px; background:var(--cream); border:1px dashed var(--border); border-radius:12px; padding:12px; cursor:pointer; }
.image-uploader input { display:none; }
.image-uploader strong { font-size:13px; font-weight:500; }
.image-uploader small { font-size:11px; color:var(--muted); line-height:1.4; }
.image-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px; }
.image-secondary-btn { align-self:flex-start; border:none; background:transparent; color:var(--accent); font-size:12px; font-weight:600; padding:0; cursor:pointer; }
.image-secondary-btn:hover { text-decoration:underline; }
.image-clear-btn { align-self:flex-start; border:none; background:transparent; color:var(--danger); font-size:12px; font-weight:600; padding:0; cursor:pointer; }
.image-clear-btn:hover { text-decoration:underline; }
.image-preview { width:70px; height:70px; border-radius:50%; background:var(--accent-light); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; overflow:hidden; background-size:cover; background-position:center; border:1px solid var(--border); }
.image-preview.cover { width:100%; height:86px; border-radius:10px; }
.photo-avatar { background-size:cover !important; background-position:center !important; color:transparent !important; }
.storage-card { background:var(--cream); border:1px solid var(--border); border-radius:12px; padding:13px; margin:-4px 0 16px; }
.storage-card-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:9px; }
.storage-title { font-size:13px; font-weight:600; color:var(--charcoal); }
.storage-sub,.storage-hint { font-size:11px; color:var(--muted); line-height:1.45; }
.storage-card strong { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400; color:var(--charcoal); }
.storage-bar { height:8px; border-radius:999px; background:var(--border); overflow:hidden; margin-bottom:8px; }
.storage-bar div { height:100%; width:0%; background:var(--success); border-radius:999px; transition:width 0.2s, background 0.2s; }
.storage-bar div.warn { background:var(--warning); }
.storage-bar div.danger { background:var(--danger); }
.user-limit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.branch-tools { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:14px 0; flex-wrap:wrap; }
.branch-list { display:grid; gap:10px; }
.branch-card { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px; border:1px solid var(--border); border-radius:8px; background:var(--warm-white); }
.branch-card.active { border-color:var(--accent); box-shadow:0 8px 24px rgba(196,149,106,0.12); }
.branch-card-title { font-weight:700; color:var(--charcoal); }
.branch-card-meta { margin-top:3px; color:var(--muted); font-size:12px; }
.branch-card-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.status-pill { border-radius:999px; padding:4px 8px; font-size:10px; font-weight:700; background:var(--soft-gray); color:var(--muted); }
.status-pill.active { background:var(--success-light); color:var(--success); }
.access-role-row { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); }
.access-role-row:last-child { border-bottom:none; }
.btn-copy.danger { color:#C0503A; border-color:#F0C8BF; }
.access-perm-grid { display:grid; gap:8px; max-height:420px; overflow:auto; padding-right:4px; }
.access-perm-row { display:grid; grid-template-columns:1fr 150px; gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--border); border-radius:8px; background:var(--warm-white); }
.access-perm-row span { font-size:12px; font-weight:600; color:var(--charcoal); }
.access-perm { width:100%; border:1px solid var(--border); border-radius:7px; padding:7px 8px; background:var(--cream); font:600 11px 'DM Sans',sans-serif; color:var(--charcoal); }
.plan-feature-list { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 14px; }
.plan-feature-list span { padding:4px 7px; border-radius:999px; background:var(--soft-gray); color:var(--charcoal); font-size:10px; font-weight:700; }
.plan-feature-empty { margin:10px 0 14px; color:var(--muted); font-size:12px; }
.user-limit-card { background:var(--cream); border:1px solid var(--border); border-radius:10px; padding:12px; }
.user-limit-card span { display:block; font-size:11px; color:var(--muted); margin-bottom:4px; }
.user-limit-card strong { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:400; }
.user-access-row { display:grid; grid-template-columns:minmax(0,1.2fr) 130px 110px auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); }
.user-access-row:last-child { border-bottom:0; }
.user-access-name { font-size:13px; font-weight:600; }
.user-access-sub { font-size:11px; color:var(--muted); margin-top:2px; }
.user-role-pill,.user-status-pill { display:inline-flex; border-radius:999px; padding:4px 9px; font-size:11px; font-weight:600; background:var(--accent-light); color:var(--accent); }
.user-status-pill.active { background:var(--success-light); color:var(--success); }
.user-status-pill.pending { background:#FDF8E6; color:var(--warning); }
.user-status-pill.suspended { background:#FDF0ED; color:var(--danger); }
.invite-link-box { display:flex; gap:8px; align-items:center; background:var(--cream); border:1px solid var(--border); border-radius:9px; padding:8px 10px; }
.invite-link-box code { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--muted); }

/* TOGGLE */
.toggle { width: 40px; height: 22px; border-radius: 11px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.toggle.on { background: var(--success); }
.toggle.off { background: var(--border); }
.toggle::after { content: ''; position: absolute; width: 18px; height: 18px; background: white; border-radius: 50%; top: 2px; left: 2px; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle.on::after { left: 20px; }

/* STATUS PILLS */
.status-pill { font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 20px; }
.pill-confirmada { background: var(--success-light); color: var(--success); }
.pill-pendiente { background: var(--warning-light); color: var(--warning); }
.pill-cancelada { background: var(--danger-light); color: var(--danger); }
.pill-completada { background: #F0F0F0; color: #888; }
.pill-atendiendo { background: var(--info-light); color: var(--info); }

/* MODAL */
.modal-overlay { position: fixed; inset: 0; background: rgba(28,28,26,0.5); z-index: 500; display: none; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal { background: var(--warm-white); border-radius: 16px; width: 500px; max-width: 95vw; max-height: 90vh; overflow-y: auto; animation: modalIn 0.25s ease; }
@keyframes modalIn { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: none; } }
.modal-header { padding: 18px 24px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 400; }
.modal-close { width: 30px; height: 30px; background: none; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; font-size: 17px; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.modal-body { padding: 18px 24px; }
.modal-footer { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

/* ===== SCREEN: LOGIN ===== */
#screen-login { flex-direction: row; overflow: hidden; min-height: 100vh; background:linear-gradient(135deg,#070706 0%,#17120E 54%,#251A10 100%); position:relative; }
#screen-login::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 24% 18%,rgba(226,184,120,.18),transparent 32%),radial-gradient(circle at 74% 22%,rgba(196,149,106,.18),transparent 34%),radial-gradient(circle at 14% 82%,rgba(226,184,120,.12),transparent 30%),linear-gradient(90deg,rgba(7,7,6,.70),rgba(7,7,6,.24)); pointer-events:none; }
#screen-login::after { content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.035) 36%,transparent 58%),radial-gradient(ellipse at 52% 50%,rgba(196,149,106,.08),transparent 42%); mix-blend-mode:screen; opacity:.72; pointer-events:none; }
.login-left { flex: 1; min-width: 0; background:transparent; display: flex; flex-direction: column; justify-content: space-between; padding: 58px 60px 52px; position: relative; overflow: hidden; padding-right:min(54vw,720px); }
.login-left::before { display:none; }
.login-left::after  { content:''; position:absolute; left:54px; right:54px; bottom:34px; height:1px; background:linear-gradient(90deg,rgba(226,184,120,.42),transparent); pointer-events:none; }
.login-brand { display:flex; align-items:center; gap:10px; z-index:1; }
.login-logo { width:230px; max-width:42vw; height:auto; display:block; mix-blend-mode:screen; filter:drop-shadow(0 16px 30px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(226,184,120,.08)); -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,#000 90%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,#000 90%,transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; }
.login-brand-icon { width:34px; height:34px; background:var(--accent); border-radius:9px; display:flex; align-items:center; justify-content:center; overflow:hidden; background-color:#050505; }
.login-brand-icon svg { width:17px; height:17px; fill:white; }
.login-brand-name { font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:400; color:white; }
.login-hero { z-index:1; margin-top:36px; }
.login-kicker { display:inline-flex; color:rgba(255,255,255,.68); border:1px solid rgba(196,149,106,.42); border-radius:999px; padding:6px 12px; font-size:11px; font-weight:600; margin-bottom:18px; background:rgba(255,255,255,.05); }
.login-hero h1 { font-family:'Cormorant Garamond',serif; font-size:54px; font-weight:300; color:#F8F4EC; line-height:1.08; margin-bottom:18px; max-width:560px; text-wrap:balance; }
.login-hero h1 em { font-style:italic; color:var(--accent); }
.login-hero p { font-size:15px; color:rgba(248,244,236,0.68); line-height:1.75; max-width:500px; }
.login-features { z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:560px; }
.login-feature { display:flex; align-items:center; gap:10px; min-height:42px; font-size:13px; color:rgba(248,244,236,0.76); background:rgba(255,255,255,.055); border:1px solid rgba(212,175,55,0.18); border-radius:10px; padding:10px 12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.login-feature:first-child { color:#F8F4EC; border-color:rgba(226,184,120,.30); background:rgba(196,149,106,.10); }
.login-feature::before { content:''; width:7px; height:7px; border-radius:50%; background:#E2B878; box-shadow:0 0 12px rgba(226,184,120,.35); flex-shrink:0; }
.login-right { position:absolute; top:30px; right:clamp(48px,8vw,180px); bottom:30px; width:470px; min-width:0; display: flex; align-items: center; justify-content: center; padding:38px 48px; background:linear-gradient(180deg,rgba(255,253,249,.96) 0%,rgba(250,248,244,.94) 100%); border:1px solid rgba(232,228,220,.72); border-radius:22px; overflow-y: auto; box-shadow:0 26px 70px rgba(0,0,0,.18); z-index:2; }
.login-form-wrap { width: 100%; max-width: 370px; background:rgba(255,255,255,.96); border:1px solid rgba(232,228,220,.9); border-radius:14px; padding:24px; box-shadow:0 24px 60px rgba(28,28,26,.10); }
.login-tabs { display:flex; gap:4px; border:1px solid var(--border); background:var(--cream); border-radius:10px; padding:4px; margin-bottom:24px; }
.login-tab { flex:1; min-height:38px; padding:9px 10px; font-size:11px; font-weight:700; color:var(--muted); background:none; border:none; border-radius:8px; cursor:pointer; letter-spacing:0.04em; text-transform:uppercase; position:relative; transition:color 0.2s,background 0.2s,box-shadow 0.2s; }
.login-tab::after { display:none; }
.login-tab.active { color:white; background:var(--charcoal); box-shadow:0 6px 14px rgba(28,28,26,.12); }
.login-panel { display:none; animation:fadeIn 0.25s ease; }
.login-panel.active { display:block; }
.login-form-title { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:400; margin-bottom:4px; }
.login-form-sub { font-size:13px; color:var(--muted); margin-bottom:24px; }
.login-submit { width:100%; justify-content:center; padding:13px; background:var(--charcoal); }
.login-proof { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.login-proof span { font-size:10px; font-weight:700; color:#7A4A20; background:var(--accent-light); border-radius:999px; padding:5px 8px; }
.alert { padding:10px 13px; border-radius:8px; font-size:13px; margin-bottom:14px; display:none; align-items:center; gap:8px; }
.alert.error { background:#FDF0ED; color:var(--danger); border:1px solid #F0C8BF; }
.alert.success { background:var(--success-light); color:var(--success); border:1px solid #B8D8C4; }
.alert.warning { display:block; background:var(--warning-light); color:#7A5800; border:1px solid #EAD28C; line-height:1.5; }
.forgot { text-align:right; margin-top:-8px; margin-bottom:14px; }
.forgot a { font-size:12px; color:var(--muted); text-decoration:none; cursor:pointer; }
.terms { font-size:11px; color:var(--muted); text-align:center; margin-top:16px; line-height:1.6; }
.terms a { color:var(--accent); text-decoration:none; }
.auth-legal-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.auth-legal-footer a { font-size:11px; color:var(--muted); text-decoration:none; font-weight:600; }
.auth-legal-footer a:hover { color:var(--accent); text-decoration:underline; }
.legal-inline-footer { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.legal-inline-footer a { font-size:11px; color:var(--accent); text-decoration:none; font-weight:600; }
.legal-inline-footer a:hover,.terms a:hover,.bk-footer-links a:hover { text-decoration:underline; }

/* ===== SCREEN: ONBOARDING ===== */
#screen-onboarding { background: var(--cream); }
.onb-topbar { background:var(--warm-white); border-bottom:1px solid var(--border); padding:0 44px; height:58px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.onb-brand { display:flex; align-items:center; gap:9px; }
.onb-brand-icon { width:30px; height:30px; background:var(--accent); border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; background-color:#050505; }
.onb-brand-icon svg { width:15px; height:15px; fill:white; }
.onb-brand-name { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:400; }
.onb-progress { background:var(--warm-white); border-bottom:1px solid var(--border); padding:14px 44px 0; flex-shrink:0; }
.onb-steps-row { display:flex; max-width:560px; margin:0 auto; }
.onb-step { flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; padding-bottom:14px; position:relative; }
.onb-step:not(:last-child)::after { content:''; position:absolute; top:13px; left:60%; right:-40%; height:1.5px; background:var(--border); z-index:0; transition:background 0.3s; }
.onb-step.done:not(:last-child)::after,.onb-step.active:not(:last-child)::after { background:var(--accent); }
.onb-circle { width:26px; height:26px; border-radius:50%; background:var(--cream); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; color:var(--muted); z-index:1; transition:all 0.3s; }
.onb-step.done .onb-circle { background:var(--accent); border-color:var(--accent); color:white; }
.onb-step.active .onb-circle { background:var(--charcoal); border-color:var(--charcoal); color:white; }
.onb-step-label { font-size:10px; color:var(--muted); }
.onb-step.active .onb-step-label { color:var(--charcoal); font-weight:500; }
.onb-step.done .onb-step-label { color:var(--accent); }
.onb-body { flex:1; overflow-y:auto; padding:36px 24px; }
.onb-inner { max-width:860px; margin:0 auto; }
.onb-panel { display:none; animation:fadeIn 0.25s ease; }
.onb-panel.active { display:block; }
.step-badge { display:inline-block; font-size:10px; font-weight:500; letter-spacing:0.09em; text-transform:uppercase; color:var(--accent); background:var(--accent-light); padding:3px 10px; border-radius:20px; margin-bottom:10px; }
.onb-panel h2 { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:400; margin-bottom:4px; }
.onb-panel p { font-size:13px; color:var(--muted); margin-bottom:22px; }
.onb-card { background:var(--warm-white); border:1px solid var(--border); border-radius:12px; padding:22px 26px; margin-bottom:16px; }
.onb-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:20px; }
.onb-plan-card { background:var(--warm-white); border:1px solid var(--border); border-radius:10px; padding:18px; position:relative; display:flex; flex-direction:column; min-height:250px; }
.onb-plan-card.recommended { border-color:var(--accent); border-width:2px; background:#FFFDF9; }
.onb-plan-card.selected { border-color:var(--accent); border-width:2px; background:linear-gradient(180deg,#fffdf8 0%,#fff8ec 100%); box-shadow:0 14px 32px rgba(196,149,106,.2); }
.plan-selected-badge { position:absolute; top:12px; right:12px; padding:5px 9px; border-radius:999px; background:var(--charcoal); color:white; font-size:10px; font-weight:700; letter-spacing:.02em; }
.onb-plan-name { font-family:'Cormorant Garamond',serif; font-size:24px; line-height:1; margin:6px 0 8px; color:var(--charcoal); }
.onb-plan-price { font-family:'Cormorant Garamond',serif; font-size:30px; line-height:1; color:var(--charcoal); margin-bottom:8px; }
.onb-plan-price span { font-family:'DM Sans',sans-serif; font-size:12px; color:var(--muted); }
.onb-plan-trial { display:inline-flex; align-self:flex-start; padding:4px 9px; border-radius:20px; background:var(--accent-light); color:var(--accent); font-size:11px; font-weight:600; margin-bottom:12px; }
.onb-plan-desc { font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:16px; flex:1; }
.onb-footer { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.btn-back { padding:10px 20px; background:none; border:1px solid var(--border); border-radius:8px; font-family:'DM Sans',sans-serif; font-size:13px; color:var(--muted); cursor:pointer; }
.btn-next { padding:10px 26px; background:var(--charcoal); color:white; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; border:none; border-radius:8px; cursor:pointer; }
.days-grid { display:flex; gap:7px; flex-wrap:wrap; }
.day-btn { padding:7px 13px; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500; color:var(--muted); background:var(--cream); border:1px solid var(--border); border-radius:20px; cursor:pointer; transition:all 0.15s; }
.day-btn.selected { background:var(--charcoal); border-color:var(--charcoal); color:white; }
.service-item,.svc-item-row { display:grid; grid-template-columns:1fr 90px 90px 34px; gap:8px; align-items:center; padding:10px 12px; background:var(--cream); border:1px solid var(--border); border-radius:9px; margin-bottom:7px; }
.service-item input,.svc-item-row input { padding:7px 9px; font-family:'DM Sans',sans-serif; font-size:13px; color:var(--charcoal); background:white; border:1px solid var(--border); border-radius:6px; outline:none; width:100%; }
.service-item input:focus,.svc-item-row input:focus { border-color:var(--accent); }
.btn-rm { width:30px; height:30px; background:none; border:1px solid var(--border); border-radius:6px; color:var(--muted); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.btn-rm:hover { background:var(--danger-light); border-color:#F0C8BF; color:var(--danger); }
.btn-add { display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; font-weight:500; color:var(--accent); background:none; border:1.5px dashed var(--accent); border-radius:9px; padding:9px; cursor:pointer; width:100%; margin-top:8px; }
.btn-add:hover { background:var(--accent-light); }
.staff-item,.staff-item-row { display:grid; grid-template-columns:1fr 1fr 34px; gap:8px; align-items:center; padding:10px 12px; background:var(--cream); border:1px solid var(--border); border-radius:9px; margin-bottom:7px; }
.staff-item input,.staff-item select,.staff-item-row input,.staff-item-row select { padding:7px 9px; font-family:'DM Sans',sans-serif; font-size:13px; color:var(--charcoal); background:white; border:1px solid var(--border); border-radius:6px; outline:none; width:100%; appearance:none; }
.onb-finish { text-align:center; padding:32px; }
.finish-icon { width:56px; height:56px; background:var(--accent-light); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.finish-icon svg { width:24px; height:24px; fill:var(--accent); }

/* ===== DASHBOARD ===== */
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.kpi-card { background:var(--warm-white); border:1px solid var(--border); border-radius:8px; padding:12px 14px; position:relative; overflow:hidden; min-width:0; }
.kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:8px 8px 0 0; }
.kpi-card.k-accent::before { background:var(--accent); }
.kpi-card.k-success::before { background:var(--success); }
.kpi-card.k-info::before { background:var(--info); }
.kpi-card.k-warn::before { background:var(--warning); }
.kpi-label { font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; line-height:1.25; }
.kpi-value { font-family:'Cormorant Garamond',serif; font-size:29px; font-weight:400; line-height:1; margin-bottom:5px; }
.kpi-sub { font-size:11px; color:var(--muted); line-height:1.35; }
.kpi-sub .up { color:var(--success); }
.kpi-sub .dn { color:var(--danger); }
.two-col { display:grid; grid-template-columns:1fr 340px; gap:18px; }
.cita-list { }
.cita-item { display:flex; align-items:center; gap:12px; padding:11px 18px; border-bottom:1px solid var(--border); transition:background 0.12s; cursor:pointer; }
.cita-item:last-child { border-bottom:none; }
.cita-item:hover { background:var(--cream); }
.cita-time { font-size:12px; font-weight:500; color:var(--muted); min-width:44px; }
.cita-bar { width:3px; height:34px; border-radius:2px; flex-shrink:0; }
.cita-info { flex:1; }
.cita-name { font-size:13px; font-weight:500; margin-bottom:1px; }
.cita-detail { font-size:12px; color:var(--muted); }
.cita-staff { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
.staff-dot { width:22px; height:22px; border-radius:50%; background:var(--accent-light); display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:500; color:var(--accent); }
.proxima-card { background:var(--charcoal); border-radius:12px; padding:18px; margin:0 18px 14px; }
.proxima-lbl { font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:8px; }
.proxima-time { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:300; color:white; margin-bottom:3px; }
.proxima-name { font-size:14px; font-weight:500; color:rgba(255,255,255,0.9); margin-bottom:2px; }
.proxima-svc  { font-size:12px; color:rgba(255,255,255,0.45); margin-bottom:12px; }
.proxima-footer { display:flex; align-items:center; justify-content:space-between; }
.countdown { font-size:11px; color:var(--accent); background:rgba(196,149,106,0.15); padding:3px 9px; border-radius:20px; }
.bar-track { height:7px; background:var(--cream); border-radius:4px; overflow:hidden; border:1px solid var(--border); }
.bar-fill { height:100%; border-radius:4px; background:var(--accent); }
.kpi-mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); }
.kpi-mini { background:var(--warm-white); padding:12px 14px; text-align:center; }
.kpi-mini-val { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400; }
.kpi-mini-lbl { font-size:11px; color:var(--muted); margin-top:2px; }

/* ===== CALENDAR ===== */
.cal-toolbar { background:var(--warm-white); border-bottom:1px solid var(--border); padding:12px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; flex-shrink:0; box-shadow:0 4px 14px rgba(28,28,26,0.03); }
.view-tabs { display:flex; gap:4px; }
#screen-calendario .view-tabs { background:var(--cream); border:1px solid var(--border); border-radius:9px; padding:3px; }
.view-tab { padding:6px 12px; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500; color:var(--muted); background:none; border:1px solid var(--border); border-radius:6px; cursor:pointer; }
.view-tab.active { background:var(--charcoal); color:white; border-color:var(--charcoal); }
#screen-calendario .view-tab { border:none; border-radius:7px; padding:7px 13px; }
.nav-week { display:flex; align-items:center; gap:7px; }
.nav-week button { width:30px; height:30px; background:var(--cream); border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:14px; color:var(--muted); display:flex; align-items:center; justify-content:center; }
.nav-week button:hover { color:var(--charcoal); border-color:#D7C9BA; }
.week-label { font-size:13px; font-weight:600; min-width:180px; text-align:center; background:#FFFDF9; border:1px solid var(--border); border-radius:8px; padding:7px 12px; }
.staff-filter { display:flex; align-items:center; gap:7px; margin-left:auto; }
.staff-chip { display:flex; align-items:center; gap:5px; padding:6px 11px; border-radius:20px; border:1.5px solid; cursor:pointer; font-size:12px; font-weight:600; transition:opacity 0.2s,background 0.2s; background:#FFFDF9; }
.staff-chip .dot { width:7px; height:7px; border-radius:50%; }
.cal-wrap { flex:1; overflow:auto; }
.cal-grid { min-width:700px; }
.cal-header { display:grid; grid-template-columns:56px repeat(3,1fr); background:#FFFDF9; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; box-shadow:0 4px 12px rgba(28,28,26,0.03); }
.cal-header-time { border-right:1px solid var(--border); }
.col-header { padding:10px 12px; border-right:1px solid var(--border); }
.col-day { font-size:10px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:1px; }
.col-date { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:400; }
.col-header.today .col-date,.col-header.today .col-day { color:var(--accent); }
.col-count { font-size:11px; color:var(--muted); }
.cal-body { display:grid; grid-template-columns:56px repeat(3,1fr); }
.time-col { border-right:1px solid var(--border); }
.time-slot-cell { height:60px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:flex-end; padding:5px 7px 0 0; }
.time-label { font-size:10px; color:var(--muted); }
.day-col { border-right:1px solid var(--border); position:relative; }
.hour-cell { height:60px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.1s; }
.hour-cell:hover { background:rgba(196,149,106,0.04); }
.appt { position:absolute; left:3px; right:3px; border-radius:7px; padding:5px 7px; cursor:pointer; overflow:hidden; transition:opacity 0.15s; z-index:5; }
.appt:hover { opacity:0.88; }
.appt-name { font-size:11px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appt-svc  { font-size:10px; opacity:0.78; }
.appt.green  { background:#D4EDD8; border-left:3px solid var(--success); color:#2D5A38; }
.appt.amber  { background:#FDF3D0; border-left:3px solid var(--warning); color:#7A5800; }
.appt.blue   { background:#D6E8F7; border-left:3px solid var(--info); color:#14416B; }
.appt.coral  { background:#FAE0D8; border-left:3px solid var(--danger); color:#7A2A1A; }
.appt.accent { background:var(--accent-light); border-left:3px solid var(--accent); color:#7A4A20; }
.appt.blocked { background:#F0EEEA; border-left:3px solid #C0BDB5; color:var(--muted); }
.appt.cancelled { opacity:0.52; text-decoration:line-through; filter:saturate(0.55); }
.now-line { position:absolute; left:0; right:0; height:2px; background:var(--accent); z-index:8; pointer-events:none; }
.now-line::before { content:''; position:absolute; left:-4px; top:-4px; width:10px; height:10px; background:var(--accent); border-radius:50%; }
.cal-mobile-day { display:none; }
.cal-mobile-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.cal-mobile-kicker { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.cal-mobile-title { font-family:'Cormorant Garamond',serif; font-size:24px; line-height:1.05; }
.cal-mobile-new { min-height:34px; padding:8px 12px; font-size:12px; }
.cal-mobile-staff-group { background:var(--warm-white); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:12px; }
.cal-mobile-staff-head { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); font-size:12px; font-weight:700; }
.cal-mobile-staff-head strong { margin-left:auto; min-width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--cream); color:var(--muted); font-size:11px; }
.cal-mobile-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.cal-mobile-appt-list { display:flex; flex-direction:column; }
.cal-mobile-appt { display:grid; grid-template-columns:58px 1fr auto; gap:10px; align-items:center; padding:12px; border-bottom:1px solid var(--border); border-left:4px solid var(--appt-accent,var(--accent)); background:#FFFDF9; cursor:default; }
.cal-mobile-appt[role="button"] { cursor:pointer; }
.cal-mobile-appt:last-child { border-bottom:none; }
.cal-mobile-appt.cancelled { opacity:.55; text-decoration:line-through; }
.cal-mobile-free { background:#F6FBF7; border-left-color:#5F936F; }
.cal-mobile-free[role="button"]:hover { background:#EDF7EF; }
.cal-mobile-blocked { background:#F5F3EF; border-left-color:#B0ABA3; opacity:.88; }
.cal-mobile-availability-pill,
.cal-mobile-blocked-pill { align-self:center; justify-self:end; border-radius:999px; padding:4px 8px; font-size:10px; font-weight:800; white-space:nowrap; }
.cal-mobile-availability-pill { background:#E6F2E9; color:#2F7D4F; }
.cal-mobile-blocked-pill { background:#EAE6DF; color:#7A746C; }
.cal-mobile-appt-time { font-size:14px; font-weight:800; color:var(--charcoal); line-height:1.05; }
.cal-mobile-appt-time span { display:block; margin-top:3px; font-size:10px; font-weight:600; color:var(--muted); }
.cal-mobile-appt-main { min-width:0; }
.cal-mobile-appt-name { font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-mobile-appt-detail,.cal-mobile-appt-notes { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.cal-mobile-empty { background:var(--warm-white); border:1px dashed var(--border); border-radius:10px; padding:18px; color:var(--muted); font-size:13px; text-align:center; }

/* ===== SERVICES ===== */
.cat-tabs { display:flex; gap:7px; margin-bottom:18px; flex-wrap:wrap; }
.compact-filter-row { margin:0 0 18px; padding:0 2px; }
.compact-tabs { margin:0; flex:0 0 auto; }
#screen-servicios .compact-tabs { background:#F4EFE7; border:1px solid #D9C7B3; border-radius:10px; padding:4px; gap:4px; box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
#screen-servicios .compact-tabs .view-tab { border:none; border-radius:7px; background:transparent; color:#805E3C; padding:8px 15px; min-width:118px; font-weight:700; white-space:nowrap; }
#screen-servicios .compact-tabs .view-tab.active { background:var(--charcoal); color:#fff; box-shadow:0 5px 14px rgba(28,28,26,0.18); }
.cat-tab { padding:6px 14px; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500; color:var(--muted); background:var(--warm-white); border:1px solid var(--border); border-radius:20px; cursor:pointer; transition:all 0.15s; }
.cat-tab.active { background:var(--charcoal); color:white; border-color:var(--charcoal); }
.module-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; padding:12px 14px; background:var(--warm-white); border:1px solid var(--border); border-radius:10px; }
.module-toolbar-main { flex:1 1 360px; min-width:240px; display:flex; align-items:center; gap:10px; }
.module-toolbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-left:auto; }
.module-toolbar-note { font-size:13px; color:var(--muted); line-height:1.4; }
.search-wrap { position:relative; flex:1; max-width:300px; }
.module-search { max-width:440px; }
.search-wrap svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; fill:var(--muted); pointer-events:none; }
.search-wrap input { width:100%; min-height:36px; padding:8px 11px 8px 32px; font-family:'DM Sans',sans-serif; font-size:13px; color:var(--charcoal); background:var(--cream); border:1px solid var(--border); border-radius:8px; outline:none; transition:border-color 0.15s, box-shadow 0.15s; }
.search-wrap input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(196,149,106,0.12); }
.services-grid-3 { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
#screen-promociones .compact-filter-row { margin-bottom:20px; }
#screen-promociones .promo-layout { padding-top:2px; }
.svc-card { background:var(--warm-white); border:1px solid var(--border); border-radius:11px; overflow:hidden; transition:box-shadow 0.2s,transform 0.2s; cursor:pointer; }
.svc-card:hover { box-shadow:0 4px 18px rgba(28,28,26,0.08); transform:translateY(-2px); }
.svc-card-top { height:4px; }
.svc-card-media { height:84px; margin:10px 10px 0; border-radius:8px; border:1px solid var(--border); background:linear-gradient(135deg,var(--cream),#F0E8DC); color:var(--muted); font-size:12px; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; overflow:hidden; filter:saturate(1.14) contrast(1.08); }
.svc-card-media.has-img { color:transparent; }
.svc-card-body { padding:12px 14px 10px; }
.svc-cat { font-size:10px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.svc-name { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:400; margin-bottom:4px; }
.svc-desc { font-size:11px; color:var(--muted); line-height:1.4; margin-bottom:9px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:31px; }
.svc-meta { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px; }
.meta-chip { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--muted); background:var(--cream); padding:3px 8px; border-radius:20px; border:1px solid var(--border); }
.meta-chip.danger-chip { color:var(--danger); background:var(--danger-light); border-color:#F0C8BF; }
.product-img { height:88px; margin:10px 10px 0; border-radius:8px; border:1px solid var(--border); background:linear-gradient(135deg,var(--cream),#F0E8DC); color:var(--muted); font-size:12px; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; overflow:hidden; filter:saturate(1.14) contrast(1.08); }
.product-img.has-img { color:transparent; }
.svc-price { font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:400; }
.svc-price span { font-family:'DM Sans',sans-serif; font-size:12px; color:var(--muted); }
.svc-card-foot { padding:8px 14px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.svc-status { display:flex; align-items:center; gap:5px; font-size:12px; }
.svc-dot { width:6px; height:6px; border-radius:50%; }
.card-actions { display:flex; gap:5px; }

/* ===== PROMOTIONS ===== */
.promo-layout { display:block; max-width:100%; }
.promo-layout .services-grid-3 { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.promo-card { background:linear-gradient(180deg,#fff 0%,#FFFDF8 100%); border:1px solid rgba(196,149,106,.28); border-radius:12px; overflow:hidden; transition:box-shadow 0.2s,transform 0.2s,border-color .2s; box-shadow:0 6px 16px rgba(28,28,26,.04); }
.promo-card:hover { box-shadow:0 10px 22px rgba(28,28,26,0.10); transform:translateY(-2px); border-color:rgba(196,149,106,.55); }
.promo-card-img { height:78px; margin:10px 10px 0; border-radius:8px; background-size:cover; background-position:center; border:1px solid rgba(196,149,106,.24); overflow:hidden; filter:saturate(1.14) contrast(1.08); }
.promo-card-img.fallback { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1C1C1A 0%,#8A6B49 100%); color:white; font-family:'Cormorant Garamond',serif; font-size:21px; }
.promo-card-body { padding:12px 14px 10px; }
#screen-promociones .promo-card .svc-card-foot { padding:10px 14px 12px; }
.promo-targets { font-size:11px; color:var(--muted); line-height:1.45; background:var(--cream); border:1px solid var(--border); border-radius:8px; padding:8px 9px; }
.field-hint { margin-top:6px; font-size:11px; line-height:1.4; color:var(--muted); }

/* ===== STAFF ===== */
.staff-kpi-row { grid-template-columns:repeat(4,minmax(160px,1fr)); gap:8px; }
.staff-kpi-row .stat-card { min-height:72px; padding:14px 16px; }
.staff-kpi-row .stat-val { font-size:22px; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.staff-kpi-row .stat-label { font-size:11px; }
.staff-featured-kpi .stat-val { font-size:17px; }
.staff-action-toolbar { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:12px 14px; }
.staff-action-row { width:100%; display:flex; align-items:stretch; justify-content:flex-end; gap:10px; }
.staff-action-group { position:relative; display:flex; align-items:center; gap:7px; padding:21px 8px 8px; background:#FFFDF9; border:1px solid var(--border); border-radius:10px; }
.staff-action-group.admin { background:#FBF7F1; border-color:#E2D4C4; }
.staff-action-label { position:absolute; top:6px; left:10px; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.staff-feature-toggle { min-height:36px; display:inline-flex !important; align-items:center; gap:10px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--warm-white); color:var(--charcoal) !important; font-size:12px !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; cursor:default; margin:0 !important; }
.staff-feature-toggle span { white-space:nowrap; }
.staff-feature-toggle .toggle { cursor:pointer; }
.staff-toolbar-note { width:100%; border-top:1px solid var(--border); padding:10px 4px 0; font-size:13px; color:var(--muted); line-height:1.45; text-align:left; }
.staff-grid-3 { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.staff-roles-panel { margin-bottom:16px; }
.roles-list { display:flex; flex-wrap:wrap; gap:8px; padding:14px 18px; }
.role-chip { display:inline-flex; align-items:center; gap:6px; background:var(--cream); border:1px solid var(--border); border-radius:20px; color:var(--charcoal); font-size:12px; padding:6px 10px; }
.role-chip-count { color:var(--muted); font-size:11px; }
.role-manager-list { display:grid; gap:8px; margin-top:10px; }
.role-manager-row { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--cream); border:1px solid var(--border); border-radius:8px; padding:9px 10px; }
.role-manager-row span { font-size:13px; color:var(--charcoal); }
.role-manager-actions { display:flex; align-items:center; gap:8px; }
.role-usage { font-size:11px; color:var(--muted); }
.global-block-card { display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--cream); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:12px; }
.global-block-list { display:grid; gap:8px; margin-bottom:14px; }
.global-block-empty { font-size:12px; color:var(--muted); border:1px dashed var(--border); border-radius:9px; padding:10px 12px; }
.global-block-item { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--warm-white); border:1px solid var(--border); border-radius:9px; padding:10px 12px; }
.global-block-item strong { display:block; font-size:13px; color:var(--charcoal); margin-bottom:2px; }
.global-block-item span { font-size:12px; color:var(--muted); }
.hours-grid-head { display:grid; grid-template-columns:90px 1fr 1fr 44px; gap:10px; padding:0 0 8px; border-bottom:1px solid var(--border); }
.hours-grid-head span { font-size:10px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); }
.check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.check-grid.scroll { max-height:190px; overflow:auto; padding-right:3px; }
.check-card { display:flex !important; align-items:center; gap:8px; margin:0 !important; min-height:38px; background:var(--cream); border:1px solid var(--border); border-radius:8px; padding:9px 10px; color:var(--charcoal) !important; font-size:12px !important; letter-spacing:0 !important; text-transform:none !important; cursor:pointer; transition:background 0.15s,border-color 0.15s,box-shadow 0.15s; }
.check-card input { width:16px !important; height:16px; padding:0 !important; margin:0; accent-color:var(--accent); appearance:auto; flex-shrink:0; }
.check-card:has(input:checked) { background:#F7EEE6; border-color:var(--accent); box-shadow:0 0 0 1px rgba(196,149,106,0.14) inset; }
.selection-summary { margin-top:8px; font-size:12px; color:var(--muted); }
.manual-override-card { display:flex !important; align-items:flex-start; gap:10px; margin:0 0 14px !important; padding:11px 12px; border:1px solid rgba(196,149,106,.45); background:#FFF8EF; border-radius:10px; color:var(--charcoal) !important; text-transform:none !important; letter-spacing:0 !important; cursor:pointer; }
.manual-override-card input { width:17px !important; height:17px; margin-top:2px; accent-color:var(--accent); appearance:auto; flex-shrink:0; }
.manual-override-card span { display:grid; gap:3px; font-size:12px; line-height:1.35; }
.manual-override-card small { color:#8C6B4E; font-size:11px; line-height:1.35; }
.manual-override-warning { display:block; color:#8A5B22; background:#FFF8EF; border:1px solid rgba(196,149,106,.35); border-radius:8px; padding:8px 10px; line-height:1.35; }
.staff-card { background:var(--warm-white); border:1px solid var(--border); border-radius:11px; overflow:hidden; transition:box-shadow 0.2s,transform 0.2s; }
.staff-card.featured-staff-card { border-color:rgba(196,149,106,.75); box-shadow:0 8px 24px rgba(196,149,106,.12); }
.staff-card.featured-staff-card .staff-card-hd { background:linear-gradient(180deg,#FFF9F2 0%,#FFFDFC 100%); }
.featured-staff-badge { display:inline-flex; align-items:center; border-radius:20px; padding:2px 7px; background:#F7EEE6; color:#7A4A20; border:1px solid rgba(196,149,106,.35); font-size:10px; font-weight:700; }
.staff-card:hover { box-shadow:0 4px 18px rgba(28,28,26,0.07); transform:translateY(-2px); }
.staff-card-hd { padding:16px 15px 12px; display:flex; align-items:flex-start; gap:11px; border-bottom:1px solid var(--border); }
.staff-av { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:17px; color:white; flex-shrink:0; }
.staff-info { flex:1; }
.staff-nm { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:400; margin-bottom:2px; }
.staff-rl { font-size:12px; color:var(--muted); margin-bottom:5px; }
.staff-st { display:inline-flex; align-items:center; gap:4px; font-size:10px; padding:2px 7px; border-radius:20px; }
.st-active { background:var(--success-light); color:var(--success); }
.st-vacation { background:var(--info-light); color:var(--info); }
.st-inactive { background:#F0EEEA; color:var(--muted); }
.st-dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.staff-card-bd { padding:12px 15px; }
.staff-meta2 { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:10px; }
.sm-lbl { font-size:10px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:1px; }
.sm-val { font-size:13px; font-weight:500; }
.staff-bio { font-size:12px; color:var(--muted); line-height:1.45; margin:-2px 0 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.skills-list { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:10px; }
.skill-pill { font-size:10px; color:var(--charcoal); background:var(--cream); border:1px solid var(--border); padding:2px 7px; border-radius:20px; }
.day-pills { display:flex; gap:3px; }
.staff-cut-history { display:grid; gap:8px; max-height:420px; overflow:auto; padding-right:4px; }
.staff-cut-item { border:1px solid var(--border); border-radius:9px; background:var(--warm-white); overflow:hidden; }
.staff-cut-item summary { cursor:pointer; display:flex; justify-content:space-between; gap:12px; align-items:center; padding:11px 13px; font-size:13px; color:var(--charcoal); }
.staff-cut-item summary span { color:var(--muted); font-size:12px; }
.staff-cut-summary { border-top:1px solid var(--border); padding:8px 13px; display:grid; gap:5px; background:var(--cream); }
.staff-cut-summary div { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); }
.staff-cut-summary strong { color:var(--charcoal); }
.day-pill-s { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:500; }
.day-pill-s.on { background:var(--charcoal); color:white; }
.day-pill-s.off { background:var(--cream); color:var(--muted); border:1px solid var(--border); }
.staff-pay-box { border:1px solid var(--border); border-radius:12px; background:#FFFDF9; padding:14px; margin-bottom:16px; }
.staff-color-grid { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.staff-color-choice { width:30px; height:30px; border-radius:999px; border:1px solid var(--border); background:var(--warm-white); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.staff-color-choice input { display:none; }
.staff-color-choice span { width:20px; height:20px; border-radius:999px; background:var(--staff-color); display:block; }
.staff-color-choice:has(input:checked) { border-color:var(--charcoal); box-shadow:0 0 0 2px rgba(28,28,26,.12); }
#stm-color-custom { width:34px; height:30px; padding:2px; border:1px solid var(--border); border-radius:999px; background:var(--warm-white); cursor:pointer; }
.commission-list { display:flex; flex-direction:column; gap:7px; max-height:220px; overflow:auto; padding-right:4px; }
.commission-row { display:grid; grid-template-columns:1fr 92px; gap:10px; align-items:center; border:1px solid var(--border); border-radius:9px; background:var(--warm-white); padding:9px; }
.commission-row.muted { opacity:.62; }
.commission-row strong { display:block; font-size:12px; color:var(--charcoal); margin-bottom:1px; }
.commission-row span { display:block; font-size:10px; color:var(--muted); }
.commission-row input { width:100%; padding:7px 9px; font-family:'DM Sans',sans-serif; font-size:12px; background:var(--cream); border:1px solid var(--border); border-radius:7px; outline:none; text-align:right; }

/* ===== CLIENTS ===== */
.filter-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.filter-tab { padding:6px 13px; font-size:12px; font-weight:500; color:var(--muted); background:var(--warm-white); border:1px solid var(--border); border-radius:20px; cursor:pointer; transition:all 0.15s; }
.filter-tab.active { background:var(--charcoal); color:white; border-color:var(--charcoal); }
.table-wrap { background:var(--warm-white); border:1px solid var(--border); border-radius:13px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
#screen-clientes .compact-filter-row { margin-bottom:14px; }
#screen-clientes .table-wrap { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
#screen-clientes table { min-width:920px; }
#screen-finanzas .table-wrap { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
#screen-finanzas .table-wrap table { min-width:820px; }
table { width:100%; border-collapse:collapse; }
thead th { padding:11px 14px; font-size:10px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); text-align:left; border-bottom:1px solid var(--border); background:var(--cream); white-space:nowrap; }
tbody tr { border-bottom:1px solid var(--border); transition:background 0.12s; cursor:pointer; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:#FDFBF8; }
td { padding:12px 14px; font-size:13px; vertical-align:middle; }
.client-name-cell { display:flex; align-items:center; gap:9px; }
.client-av { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; color:white; flex-shrink:0; }
.client-nm { font-weight:500; margin-bottom:1px; }
.client-em { font-size:11px; color:var(--muted); }
.badge { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:500; padding:2px 7px; border-radius:20px; }
.badge-vip { background:#FDF3D0; color:#7A5800; }
.badge-regular { background:var(--info-light); color:var(--info); }
.badge-nuevo { background:var(--success-light); color:var(--success); }
.badge-riesgo { background:var(--danger-light); color:var(--danger); }
.badge-inactivo { background:#F0EEEA; color:var(--muted); }
.btn-sm { padding:4px 10px; font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500; border-radius:6px; cursor:pointer; transition:all 0.15s; border:1px solid var(--border); background:none; color:var(--charcoal); }
.btn-sm.accent2 { background:var(--accent-light); border-color:var(--accent); color:#7A4A20; }
.btn-sm.danger { color:var(--danger); border-color:#F0C8BF; background:var(--danger-light); }
.row-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; min-width:190px; }
.drawer-overlay { position:fixed; inset:0; background:rgba(28,28,26,0.4); z-index:400; display:none; }
.drawer-overlay.open { display:block; }
.drawer { position:fixed; top:0; right:-540px; width:min(520px,100vw); height:100vh; background:var(--warm-white); z-index:401; overflow-y:auto; transition:right 0.3s ease; border-left:1px solid var(--border); }
.drawer.open { right:0; }
.drawer-hd { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.drawer-av { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:500; color:white; }
.drawer-nm { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:400; }
.drawer-rl { font-size:12px; color:var(--muted); }
.drawer-cl { margin-left:auto; width:30px; height:30px; background:none; border:1px solid var(--border); border-radius:7px; cursor:pointer; font-size:17px; color:var(--muted); display:flex; align-items:center; justify-content:center; }
.drawer-sec { padding:14px 22px; border-bottom:1px solid var(--border); }
.drawer-sec-title { font-size:10px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.info-lbl { font-size:11px; color:var(--muted); margin-bottom:1px; }
.info-val { font-size:13px; font-weight:500; }
.hist-item { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.hist-item:last-child { border-bottom:none; }
.hist-date { font-size:12px; color:var(--muted); min-width:76px; }
.hist-svc { font-size:13px; font-weight:500; }
.hist-staff { font-size:11px; color:var(--muted); }
.hist-price { font-size:13px; font-weight:500; margin-left:auto; }
.drawer-collapse-title { width:100%; display:flex; align-items:center; justify-content:space-between; padding:0; background:none; border:none; font-family:'DM Sans',sans-serif; font-size:10px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); cursor:pointer; }
.drawer-collapsible { display:none; margin-top:10px; }
.drawer-collapsible.open { display:block; }
.package-card { border:1px solid var(--border); border-radius:10px; background:#FFFDF9; padding:12px; }
.package-empty { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px dashed var(--border); border-radius:10px; background:#FFFDF9; padding:12px; }
.package-empty strong { display:block; font-size:13px; color:var(--charcoal); margin-bottom:2px; }
.package-empty span { display:block; font-size:11px; color:var(--muted); }
.package-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:10px; }
.package-name { font-size:14px; font-weight:600; color:var(--charcoal); }
.package-sub { font-size:11px; color:var(--muted); margin-top:2px; }
.package-state { font-size:10px; font-weight:600; color:#7A4A20; background:var(--accent-light); border:1px solid rgba(196,149,106,0.35); border-radius:999px; padding:3px 8px; white-space:nowrap; }
.package-state.done { color:var(--success); background:var(--success-light); border-color:rgba(90,138,106,0.28); }
.package-progress { height:7px; background:var(--border); border-radius:999px; overflow:hidden; margin-bottom:10px; }
.package-progress div { height:100%; background:var(--accent); border-radius:999px; }
.payment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px; }
.payment-grid div { background:var(--warm-white); border:1px solid var(--border); border-radius:8px; padding:8px; }
.payment-grid span { display:block; font-size:10px; color:var(--muted); margin-bottom:2px; }
.payment-grid strong { font-size:13px; color:var(--charcoal); }
.session-list { display:flex; flex-direction:column; gap:7px; }
.session-row { display:flex; align-items:center; gap:9px; padding:8px; border:1px solid var(--border); border-radius:9px; background:var(--warm-white); }
.session-dot { width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; background:#EEEAE3; color:var(--muted); }
.session-dot.completada { background:var(--success); color:white; }
.session-dot.cancelada { background:var(--danger); color:white; }
.session-dot.confirmada,.session-dot.pendiente,.session-dot.atendiendo { background:var(--accent); color:white; }
.session-main { flex:1; min-width:0; }
.session-service { font-size:12px; font-weight:600; color:var(--charcoal); }
.session-detail { font-size:10px; color:var(--muted); margin-top:1px; }
.session-side { display:flex; flex-direction:column; gap:5px; align-items:flex-end; flex-shrink:0; }
.mini-status { display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; border-radius:999px; padding:3px 7px; color:#7A4A20; background:var(--accent-light); white-space:nowrap; }
.mini-status.completada { color:var(--success); background:var(--success-light); }
.mini-status.cancelada { color:var(--danger); background:var(--danger-light); }
.mini-status.sin_programar { color:var(--muted); background:#F0EEEA; }
.mini-status.atendiendo { color:#7A5800; background:#FDF3D0; }
.btn-session-schedule { font-family:'DM Sans',sans-serif; font-size:10px; font-weight:600; border:1px solid var(--accent); border-radius:7px; background:white; color:#7A4A20; padding:4px 8px; cursor:pointer; }
.scheduled-service-card { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid var(--border); border-radius:9px; background:#FFFDF9; margin-bottom:7px; }
.scheduled-service-name { font-size:13px; font-weight:600; color:var(--charcoal); }
.scheduled-service-meta { font-size:11px; color:var(--muted); margin-top:2px; }
.history-row { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.history-row:last-child { border-bottom:none; }
.history-date { font-size:12px; color:var(--muted); min-width:72px; }
.history-main { flex:1; min-width:0; }
.history-service { font-size:13px; font-weight:500; }
.history-staff { font-size:11px; color:var(--muted); }
.history-price { font-size:13px; font-weight:500; }
.empty-note { font-size:13px; color:var(--muted); padding:8px 0; }
.drawer-ft { padding:14px 22px; display:flex; gap:8px; }
.btn-drawer { flex:1; padding:9px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; border-radius:8px; cursor:pointer; }
.btn-drawer.primary { background:var(--charcoal); color:white; border:none; }
.btn-drawer.outline { background:none; border:1px solid var(--border); color:var(--charcoal); }
.danger-outline { color:var(--danger) !important; border-color:#F0C8BF !important; background:#FFF8F6 !important; }
.settings-warning { margin-top:8px; max-width:560px; color:#7A5800; background:#FFF8E6; border:1px solid #EAD28C; border-radius:8px; padding:8px 10px; font-size:11px; line-height:1.45; }

/* ===== FINANCE ===== */
.finance-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; padding:12px 14px; background:var(--warm-white); border:1px solid var(--border); border-radius:10px; }
.finance-toolbar-copy { font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.finance-tabs { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto; }
.finance-tab,.range-chip { padding:7px 12px; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600; color:var(--muted); background:var(--cream); border:1px solid var(--border); border-radius:999px; cursor:pointer; }
.finance-tab.active,.range-chip.active { background:var(--charcoal); color:white; border-color:var(--charcoal); }
.finance-range-control { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; max-width:100%; }
.range-tabs { display:flex; gap:5px; flex-wrap:wrap; }
.range-chip { padding:5px 10px; font-size:11px; }
.range-input { height:29px; padding:5px 9px; font-family:'DM Sans',sans-serif; font-size:11px; color:var(--charcoal); background:var(--warm-white); border:1px solid var(--border); border-radius:8px; outline:none; }
.range-label { font-size:11px; color:var(--muted); background:var(--cream); border:1px solid var(--border); border-radius:8px; padding:6px 9px; white-space:nowrap; }
.range-custom { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.range-custom span { font-size:11px; color:var(--muted); }
.finance-action-btn { padding:8px 13px; border:none; border-radius:8px; background:var(--charcoal); color:white; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600; cursor:pointer; box-shadow:0 6px 16px rgba(28,28,26,0.12); }
.finance-action-btn.secondary { background:var(--accent); }
.finance-panel-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,0.85fr); gap:16px; align-items:start; max-width:100%; }
.finance-panel-grid.finance-panel-stack { grid-template-columns:1fr; gap:14px; }
.finance-primary-card { width:100%; }
.finance-secondary-card .finance-list { padding:12px 18px 16px; }
.finance-panel-grid.payroll-panel-stack { grid-template-columns:1fr; gap:14px; }
.payroll-summary-card { width:100%; }
.finance-wide-table { overflow-x:auto; }
.finance-wide-table table { min-width:900px; }
.finance-wide-table th,
.finance-wide-table td { padding:14px 16px; vertical-align:middle; }
.finance-wide-table th:last-child,
.finance-wide-table td:last-child { text-align:right; white-space:nowrap; }
.finance-wide-table th:nth-last-child(2),
.finance-wide-table td:nth-last-child(2) { white-space:nowrap; }
.sales-table-wrap table { min-width:820px; }
.sales-table-wrap th:nth-child(3),
.sales-table-wrap td:nth-child(3) { min-width:260px; }
.expenses-table-wrap table { min-width:920px; }
.expenses-table-wrap th:nth-child(3),
.expenses-table-wrap td:nth-child(3) { min-width:220px; }
.payroll-table-wrap { overflow-x:auto; }
.payroll-table-wrap table { min-width:980px; }
.payroll-table-wrap th,
.payroll-table-wrap td { padding:14px 16px; white-space:nowrap; }
.payroll-table-wrap th:nth-child(n+2),
.payroll-table-wrap td:nth-child(n+2) { text-align:right; }
.payroll-table-wrap th:first-child,
.payroll-table-wrap td:first-child { text-align:left; min-width:190px; white-space:normal; }
.payroll-table-wrap th:last-child,
.payroll-table-wrap td:last-child { text-align:right; min-width:140px; }
.payroll-movements-card .finance-list { padding:12px 18px 16px; }
.payroll-movements-card .cash-history-inline { padding:0 18px 18px; }
.finance-methods { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px; }
.finance-method-card { border:1px solid var(--border); border-radius:10px; background:#FFFDF9; padding:13px; box-shadow:0 4px 12px rgba(28,28,26,0.03); }
.finance-method-card span,.cash-summary span,.client-finance-mini span,.report-block span { display:block; font-size:10px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.finance-method-card strong,.cash-summary strong,.client-finance-mini strong { font-size:18px; font-weight:600; color:var(--charcoal); }
.cash-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0 16px 16px; }
.cash-summary div { border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--warm-white); box-shadow:0 4px 12px rgba(28,28,26,0.025); }
.cash-cut-box { margin:0 16px 16px; padding:12px; border:1px dashed var(--border); border-radius:10px; display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--cream); }
.cash-cut-box strong { display:block; font-size:13px; margin-bottom:2px; }
.cash-cut-box span { display:block; font-size:11px; color:var(--muted); }
.cash-history-inline,.cash-history-modal { padding:0 16px 16px; }
.cash-history-inline summary.cash-history-title { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cash-history-inline summary.cash-history-title::-webkit-details-marker { display:none; }
.cash-history-inline summary.cash-history-title::after { content:'Mostrar'; font-size:10px; letter-spacing:0; text-transform:none; color:var(--accent); border:1px solid rgba(196,149,106,.35); border-radius:999px; padding:3px 8px; background:#FFFDF9; }
.cash-history-inline[open] summary.cash-history-title::after { content:'Ocultar'; }
.cash-history-title { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:2px 0 8px; }
.cash-cut-accordion { border:1px solid var(--border); border-radius:10px; background:#FFFDF9; margin-bottom:8px; overflow:hidden; }
.cash-cut-accordion summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; }
.cash-cut-accordion summary::-webkit-details-marker { display:none; }
.cash-cut-accordion summary strong { display:block; font-size:13px; color:var(--charcoal); }
.cash-cut-accordion summary span { display:block; font-size:11px; color:var(--muted); margin-top:2px; }
.cash-cut-summary-right { text-align:right; white-space:nowrap; }
.cash-cut-detail { border-top:1px solid var(--border); padding:12px; }
.cash-summary.compact { padding:0 0 10px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.cash-summary.compact strong { font-size:13px; overflow-wrap:anywhere; }
.cash-cut-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:10px; }
.finance-list { padding:8px 16px 16px; }
.finance-list.compact { padding:6px 0 0; }
.finance-list-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.finance-list-row:last-child { border-bottom:none; }
.finance-row-title { font-size:13px; font-weight:600; color:var(--charcoal); }
.finance-row-sub { font-size:11px; color:var(--muted); margin-top:2px; }
.finance-row-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:11px; color:var(--muted); }
.table-wrap.flat { border:none; border-radius:0; }
.mini-status.pagado { color:var(--success); background:var(--success-light); }
.mini-status.parcial { color:#7A5800; background:#FDF3D0; }
.mini-status.pendiente { color:var(--warning); background:#FFF4D8; }
.mini-status.reembolso { color:var(--danger); background:var(--danger-light); }
.client-finance-mini { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center; }
.client-finance-mini div { background:#FFFDF9; border:1px solid var(--border); border-radius:9px; padding:9px; }
.client-finance-list { margin-top:10px; border-top:1px solid var(--border); }
.report-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px; }
.report-block { border:1px solid var(--border); border-radius:10px; background:#FFFDF9; padding:14px; }
.report-block strong { display:block; font-size:22px; margin-bottom:8px; color:var(--charcoal); }
.report-bar { height:7px; background:var(--border); border-radius:999px; overflow:hidden; }
.report-bar div { height:100%; background:var(--success); border-radius:999px; }
.report-bar.danger div { background:var(--danger); }
.report-bar.warn div { background:var(--accent); }

/* ===== NOTIFICATIONS ===== */
.notif-content { display:grid; grid-template-columns:1fr 360px; gap:20px; }
.notif-toolbar { display:flex; align-items:center; gap:7px; margin-bottom:16px; flex-wrap:wrap; }
.notif-toolbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-left:auto; flex-wrap:wrap; }
.feed-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.mark-all-btn { margin-left:auto; font-size:12px; color:var(--accent); cursor:pointer; background:none; border:none; font-family:'DM Sans',sans-serif; font-weight:500; }
.notif-group { margin-bottom:18px; }
.notif-group-lbl { font-size:10px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; padding-left:3px; }
.notif-card { background:var(--warm-white); border:1px solid var(--border); border-radius:11px; padding:12px 14px; margin-bottom:7px; display:flex; gap:11px; align-items:flex-start; cursor:pointer; position:relative; transition:background 0.12s; }
.notif-card:hover { background:#FDFBF8; }
.notif-card.unread { border-left:3px solid var(--accent); background:#FDFAF6; }
.notif-card.unread::before { content:''; position:absolute; top:12px; right:12px; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.notif-card.priority-urgente { border-color:#E7B9A9; }
.notif-card.priority-importante { border-color:#E6D5A7; }
.notif-ic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-ic svg { width:17px; height:17px; }
.ic-booking { background:var(--success-light); } .ic-booking svg { fill:var(--success); }
.ic-cancel  { background:var(--danger-light); }  .ic-cancel svg  { fill:var(--danger); }
.ic-remind  { background:var(--warning-light); } .ic-remind svg  { fill:var(--warning); }
.ic-promo   { background:var(--accent-light); }  .ic-promo svg   { fill:var(--accent); }
.ic-stock   { background:var(--warning-light); } .ic-stock svg   { fill:var(--warning); }
.ic-package { background:var(--info-light); }    .ic-package svg { fill:var(--info); }
.ic-noshow  { background:#F0EEEA; }              .ic-noshow svg  { fill:var(--muted); }
.ic-system  { background:var(--info-light); }    .ic-system svg  { fill:var(--info); }
.notif-body { flex:1; }
.notif-title { font-size:13px; font-weight:500; margin-bottom:2px; }
.notif-desc  { font-size:12px; color:var(--muted); line-height:1.5; }
.notif-time  { font-size:11px; color:var(--muted); margin-top:5px; }
.notif-actions { display:flex; gap:5px; margin-top:7px; }
.btn-nsm { padding:4px 10px; font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500; border-radius:6px; cursor:pointer; }
.btn-nview { background:none; border:1px solid var(--border); color:var(--charcoal); }
.btn-ndismiss { background:none; border:1px solid var(--border); color:var(--muted); }
.config-card { background:var(--warm-white); border:1px solid var(--border); border-radius:13px; overflow:hidden; margin-bottom:16px; }
.config-hd { padding:14px 18px; border-bottom:1px solid var(--border); }
.config-hd-title { font-size:13px; font-weight:500; }
.config-hd-sub { font-size:11px; color:var(--muted); }
.config-row { display:flex; align-items:center; justify-content:space-between; padding:11px 18px; border-bottom:1px solid var(--border); }
.config-row:last-child { border-bottom:none; }
.config-row-title { font-size:13px; font-weight:500; margin-bottom:1px; }
.config-row-desc  { font-size:11px; color:var(--muted); }
.phone-mock { background:var(--charcoal); border-radius:13px; padding:18px; }
.phone-lbl { font-size:10px; letter-spacing:0.09em; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:10px; }
.phone-notif { background:white; border-radius:9px; padding:11px; }
.phone-nh { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.phone-app-ic { width:18px; height:18px; background:var(--accent); border-radius:4px; display:flex; align-items:center; justify-content:center; }
.phone-app-ic svg { width:9px; height:9px; fill:white; }
.phone-app-nm { font-size:10px; font-weight:500; color:#333; }
.phone-pt { font-size:12px; color:#999; margin-left:auto; }
.phone-title { font-size:13px; font-weight:600; margin-bottom:2px; }
.phone-body  { font-size:11px; color:#666; line-height:1.4; }
.floating-notification-host { position:fixed; right:22px; top:22px; z-index:10020; display:flex; flex-direction:column; gap:10px; width:min(360px, calc(100vw - 28px)); pointer-events:none; }
.floating-notification { pointer-events:auto; display:flex; gap:11px; align-items:flex-start; position:relative; padding:13px 42px 13px 13px; background:rgba(255,255,255,.96); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:13px; box-shadow:0 18px 46px rgba(31,24,17,.18); cursor:pointer; animation:floatNotifIn .24s ease-out; backdrop-filter:blur(12px); }
.floating-notification.priority-urgente { border-left-color:var(--danger); }
.floating-notification.priority-importante { border-left-color:var(--warning); }
.floating-notification.leaving { animation:floatNotifOut .2s ease-in forwards; }
.floating-notif-ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.floating-notif-ic svg { width:18px; height:18px; }
.floating-notif-body { min-width:0; flex:1; }
.floating-notif-kicker { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:2px; }
.floating-notif-title { font-size:13px; font-weight:700; color:var(--charcoal); margin-bottom:2px; }
.floating-notif-desc { font-size:12px; color:var(--muted); line-height:1.45; }
.floating-notif-action { margin-top:8px; padding:5px 10px; border:1px solid var(--accent); border-radius:7px; background:var(--accent); color:white; font-family:'DM Sans',sans-serif; font-size:11px; font-weight:700; cursor:pointer; }
.floating-notif-close { position:absolute; top:9px; right:10px; width:24px; height:24px; border:none; border-radius:50%; background:transparent; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; }
.floating-notif-close:hover { background:var(--cream); color:var(--charcoal); }
@keyframes floatNotifIn { from{opacity:0; transform:translateY(-10px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes floatNotifOut { to{opacity:0; transform:translateY(-8px) scale(.98);} }

/* ===== SETTINGS ===== */
.settings-page { padding:0; }
.settings-layout { display:grid; grid-template-columns:220px 1fr; gap:0; min-height:100%; background:var(--warm-white); }
.settings-nav { background:#FBFAF7; border-right:1px solid var(--border); padding:18px 12px; overflow-y:auto; }
.settings-nav-lbl { font-size:9px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); padding:7px 9px; margin-bottom:4px; display:block; }
.settings-nav-item { display:flex; align-items:center; gap:9px; min-height:36px; padding:8px 10px; border-radius:8px; cursor:pointer; transition:background 0.12s,color 0.12s,box-shadow 0.12s; font-size:13px; color:var(--muted); margin-bottom:3px; }
.settings-nav-item:hover { background:var(--cream); color:var(--charcoal); }
.settings-nav-item.active { background:var(--accent-light); color:#7A4A20; font-weight:600; box-shadow:0 0 0 1px rgba(196,149,106,0.16) inset; }
.settings-nav-item svg { width:14px; height:14px; fill:currentColor; flex-shrink:0; }
.settings-body { padding:28px 30px 36px; overflow-y:auto; background:var(--cream); }
.settings-sec { display:none; max-width:940px; }
.cal-block-cell { background:repeating-linear-gradient(135deg,#F5F1EA 0,#F5F1EA 8px,#EFE8DE 8px,#EFE8DE 16px) !important; cursor:not-allowed !important; position:relative; }
.cal-block-cell::after { content:attr(data-block-label); position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:11px; color:#9A8066; font-weight:500; pointer-events:none; }
.settings-sec.active { display:block; }
.sec-title { font-family:'Cormorant Garamond',serif; font-size:27px; font-weight:400; margin-bottom:3px; }
.sec-sub { font-size:13px; color:var(--muted); margin-bottom:22px; }
.set-card { background:var(--warm-white); border:1px solid var(--border); border-radius:11px; overflow:hidden; margin-bottom:16px; box-shadow:0 6px 18px rgba(28,28,26,0.03); }
.set-card-hd { padding:14px 18px; border-bottom:1px solid var(--border); background:#FFFDF9; }
.set-card-title { font-size:13px; font-weight:600; }
.set-card-sub { font-size:11px; color:var(--muted); }
.set-card-body { padding:18px; }
#screen-configuracion .field input,
#screen-configuracion .field select,
#screen-configuracion .field textarea { background:#FFFDF9; }
#screen-configuracion .image-uploader { background:#FFFDF9; border-radius:10px; }
#screen-configuracion .storage-card { background:#FFFDF9; margin:0 0 16px; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); }
.toggle-row:last-child { border-bottom:none; }
.toggle-row-title { font-size:13px; font-weight:500; margin-bottom:1px; }
.toggle-row-desc  { font-size:11px; color:var(--muted); line-height:1.45; }
.link-box { display:flex; align-items:center; gap:9px; background:var(--cream); border:1px solid var(--border); border-radius:8px; padding:9px 12px; }
.link-url { flex:1; font-size:12px; color:var(--info); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-copy { padding:5px 12px; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500; background:var(--charcoal); color:white; border:none; border-radius:6px; cursor:pointer; flex-shrink:0; }
.btn-copy.copied { background:var(--success); }
.plan-hero { background:var(--charcoal); border-radius:12px; padding:18px 22px; margin-bottom:14px; display:flex; align-items:center; gap:14px; }
.plan-hero.blocked { background:#3A2420; }
.plan-badge2 { background:var(--accent); color:white; font-size:10px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase; padding:3px 9px; border-radius:20px; flex-shrink:0; }
.plan-nm { font-family:'Cormorant Garamond',serif; font-size:20px; color:white; margin-bottom:1px; }
.plan-desc2 { font-size:11px; color:rgba(255,255,255,0.45); }
.plan-price2 { font-family:'Cormorant Garamond',serif; font-size:26px; color:white; margin-left:auto; }
.plan-price2 span { font-family:'DM Sans',sans-serif; font-size:11px; color:rgba(255,255,255,0.35); }
.plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.plan-opt { border:1px solid var(--border); border-radius:11px; padding:14px; text-align:center; }
.plan-opt.recommended { border-color:var(--accent); border-width:2px; background:var(--accent-light); }
.plan-opt-rec { font-size:9px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:3px; }
.plan-opt-nm { font-size:13px; font-weight:500; margin-bottom:6px; }
.plan-opt-price { font-family:'Cormorant Garamond',serif; font-size:24px; margin-bottom:4px; }
.plan-opt-price span { font-family:'DM Sans',sans-serif; font-size:11px; color:var(--muted); }
.plan-opt-desc { font-size:11px; color:var(--muted); margin-bottom:10px; }
.btn-plan { width:100%; padding:7px; font-family:'DM Sans',sans-serif; font-size:12px; border-radius:7px; cursor:pointer; }
.btn-plan.dark { background:var(--charcoal); color:white; border:none; }
.btn-plan.light { background:none; border:1px solid var(--border); color:var(--charcoal); }
.btn-plan.selected { background:var(--accent); color:white; border:1px solid var(--accent); font-weight:700; }
.billing-panel { margin-bottom:16px; }
.billing-alert { display:flex; align-items:center; gap:8px; padding:11px 13px; border-radius:9px; font-size:12px; margin-bottom:12px; }
.billing-alert strong { font-size:13px; }
.billing-alert.danger { background:var(--danger-light); color:#7A2A1A; border:1px solid #F0C8BF; }
.billing-promo-alert { position:relative; overflow:hidden; display:grid; grid-template-columns:160px 1fr; gap:14px; align-items:center; padding:15px 16px; margin-bottom:14px; border-radius:14px; border:1px solid #D8A85F; background:linear-gradient(135deg,#1C1C1A 0%,#332414 58%,#6B451E 100%); color:#FFF9ED; box-shadow:0 16px 36px rgba(105,67,28,.18); }
.billing-promo-alert::before { content:''; position:absolute; inset:1px; border-radius:13px; border:1px solid rgba(255,224,157,.28); pointer-events:none; }
.billing-promo-glow { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; min-height:82px; padding:14px; border-radius:12px; background:linear-gradient(135deg,rgba(255,242,205,.18),rgba(205,144,76,.36)); border:1px solid rgba(255,224,157,.45); color:#FFE6A9; font-family:'Cormorant Garamond',serif; font-size:25px; font-weight:700; text-align:center; line-height:1; }
.billing-promo-copy { position:relative; z-index:1; }
.billing-promo-copy span { display:block; margin-bottom:3px; color:#E4BB7A; font-size:10px; font-weight:800; text-transform:uppercase; }
.billing-promo-copy strong { display:block; font-family:'Cormorant Garamond',serif; font-size:29px; line-height:1; color:#FFFDF9; margin-bottom:6px; }
.billing-promo-copy p { margin:0 0 7px; color:rgba(255,249,237,.86); font-size:13px; line-height:1.45; }
.billing-promo-copy small { color:#FFE0A2; font-size:12px; font-weight:700; }
.billing-promo-copy .billing-next-period { display:block; margin-top:5px; padding-top:7px; border-top:1px solid rgba(255,224,157,.22); color:#FFF4D1; }
.billing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.billing-card { background:var(--warm-white); border:1px solid var(--border); border-radius:9px; padding:12px 14px; }
.billing-card span { display:block; font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.billing-card strong { display:block; font-family:'Cormorant Garamond',serif; font-size:24px; line-height:1; color:var(--charcoal); margin-bottom:5px; }
.billing-card small { font-size:11px; color:var(--muted); }
.billing-checkout { background:var(--warm-white); border:1px solid var(--border); border-radius:12px; padding:16px; display:grid; grid-template-columns:1.1fr 1.1fr 190px; align-items:center; gap:14px; }
.billing-eyebrow { display:inline-flex; align-items:center; width:max-content; margin-bottom:7px; padding:4px 8px; border-radius:999px; background:#F1E1C8; color:#8B5E2E; font-size:9px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
.billing-title { font-size:15px; font-weight:700; margin-bottom:4px; color:var(--charcoal); }
.billing-sub { font-size:12px; color:var(--muted); line-height:1.45; }
.billing-cycles { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.billing-cycles button { position:relative; min-height:70px; background:var(--cream); border:1px solid var(--border); border-radius:10px; padding:10px; cursor:pointer; font-family:'DM Sans',sans-serif; text-align:left; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease; }
.billing-cycles button:hover { border-color:#CFA46C; box-shadow:0 8px 18px rgba(132,88,44,.12); transform:translateY(-1px); }
.billing-cycles button.promo { border-color:#D3A052; background:linear-gradient(180deg,#FFF9E9 0%,#F7E8CA 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }
.billing-cycles button.active { background:linear-gradient(135deg,#1C1C1A 0%,#2B2117 100%); border-color:#D6A55F; color:white; box-shadow:0 10px 24px rgba(28,28,26,.22),0 0 0 1px rgba(214,165,95,.28); }
.billing-cycles strong { display:block; font-size:14px; margin-bottom:3px; }
.billing-cycles span { display:block; font-size:10px; color:var(--muted); }
.billing-cycles button.active span { color:rgba(255,255,255,0.55); }
.billing-cycles em { position:absolute; top:7px; right:7px; padding:3px 6px; border-radius:999px; background:#C89547; color:#FFFDF9; font-size:9px; font-style:normal; font-weight:800; text-transform:uppercase; }
.billing-cycles button.active em { background:#FFE2A4; color:#3A2410; }
.billing-total { display:flex; flex-direction:column; gap:7px; align-items:stretch; }
.billing-total span { font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.billing-total strong { font-family:'Cormorant Garamond',serif; font-size:28px; line-height:1; }
.billing-modal-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.billing-modal-summary div { background:var(--cream); border:1px solid var(--border); border-radius:9px; padding:10px; }
.billing-modal-summary span { display:block; font-size:10px; color:var(--muted); margin-bottom:4px; }
.billing-modal-summary strong { font-size:13px; color:var(--charcoal); }
.billing-payment-hero { margin-bottom:12px; padding:16px; border-radius:14px; background:linear-gradient(135deg,#1C1C1A 0%,#2A2118 58%,#6A431E 100%); border:1px solid #D4A05A; color:#FFF9ED; box-shadow:0 14px 34px rgba(28,28,26,.16); }
.billing-payment-hero span { display:block; margin-bottom:6px; color:#E6BC75; font-size:10px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
.billing-payment-hero strong { display:block; font-family:'Cormorant Garamond',serif; font-size:30px; line-height:1; color:#FFFDF9; }
.billing-payment-hero p { margin:7px 0 0; color:#F2D8AA; font-size:13px; font-weight:700; }
.billing-payment-note { margin:10px 0; padding:12px 13px; border-radius:11px; background:#FFF8EA; border:1px solid #E6CA9D; color:#6F4B25; font-size:12px; font-weight:700; line-height:1.5; }
.billing-support-note { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; margin-top:10px; padding:12px 13px; border-radius:11px; background:var(--warm-white); border:1px solid var(--border); }
.billing-support-note strong { color:var(--charcoal); font-size:12px; }
.billing-support-note span { color:var(--muted); font-size:12px; line-height:1.5; }
.global-subscription-promo { position:fixed; right:24px; bottom:22px; z-index:900; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; width:min(560px,calc(100vw - 48px)); padding:12px; border-radius:14px; border:1px solid #D5A257; background:linear-gradient(135deg,#1C1C1A 0%,#2F2317 72%,#67411F 100%); color:#FFFDF9; box-shadow:0 20px 46px rgba(28,28,26,.28); }
.global-promo-mark { padding:7px 10px; border-radius:999px; background:#FFE1A1; color:#382513; font-size:11px; font-weight:800; text-transform:uppercase; white-space:nowrap; }
.global-promo-copy strong { display:block; font-size:13px; margin-bottom:2px; }
.global-promo-copy span { display:block; color:#E5C088; font-size:11px; line-height:1.35; }
.global-promo-actions { display:flex; align-items:center; gap:7px; }
.global-subscription-promo button { border:1px solid rgba(255,225,161,.55); background:rgba(255,255,255,.08); color:#FFF9ED; border-radius:9px; padding:8px 11px; font-size:12px; font-weight:700; cursor:pointer; }
.global-subscription-promo button:hover { background:rgba(255,255,255,.15); }
.global-subscription-promo .global-promo-close { display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border-radius:50%; font-size:18px; line-height:1; color:#FFE1A1; }
.global-subscription-expiry { position:fixed; right:24px; bottom:22px; z-index:905; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; width:min(560px,calc(100vw - 48px)); padding:12px; border-radius:14px; border:1px solid #D8A85F; background:linear-gradient(135deg,#FFF8EA 0%,#FFFDF8 100%); color:#1C1C1A; box-shadow:0 20px 46px rgba(105,67,28,.18); }
.global-subscription-expiry.stacked { bottom:92px; }
.global-expiry-mark { padding:7px 10px; border-radius:999px; background:#C4956A; color:white; font-size:11px; font-weight:800; text-transform:uppercase; white-space:nowrap; }
.global-expiry-copy strong { display:block; font-size:13px; margin-bottom:2px; }
.global-expiry-copy span { display:block; color:#6F6257; font-size:11px; line-height:1.35; }
.global-expiry-actions { display:flex; align-items:center; gap:7px; }
.global-subscription-expiry button { border:1px solid #D8A85F; background:#1C1C1A; color:#FFF9ED; border-radius:9px; padding:8px 11px; font-size:12px; font-weight:700; cursor:pointer; }
.global-subscription-expiry button:hover { background:#2A2118; }
.global-subscription-expiry .global-expiry-close { display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border-radius:50%; background:#FFFDF9; color:#7A4A20; font-size:18px; line-height:1; }
.global-client-message { position:fixed; left:24px; bottom:22px; z-index:910; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; width:min(520px,calc(100vw - 48px)); padding:12px; border-radius:14px; border:1px solid #B9C7A4; background:linear-gradient(135deg,#F9FFF3 0%,#EEF6E7 100%); color:#1C1C1A; box-shadow:0 20px 46px rgba(28,28,26,.16); }
.global-message-mark { padding:7px 10px; border-radius:999px; background:#5F936F; color:white; font-size:11px; font-weight:800; text-transform:uppercase; white-space:nowrap; }
.global-message-copy strong { display:block; font-size:13px; margin-bottom:2px; }
.global-message-copy span { display:block; color:#5D6A58; font-size:11px; line-height:1.35; }
.global-message-actions { display:flex; align-items:center; gap:7px; }
.global-client-message button { border:1px solid #C7D4BA; background:#FFFDF9; color:#263624; border-radius:9px; padding:8px 11px; font-size:12px; font-weight:700; cursor:pointer; }
.global-client-message button:hover { background:#F2F7ED; }
.global-client-message .global-message-close { display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border-radius:50%; font-size:18px; line-height:1; color:#5F6A57; }
.client-message-body { color:var(--copy); font-size:14px; line-height:1.7; background:var(--cream); border:1px solid var(--border); border-radius:12px; padding:14px; }
.client-message-footer { margin-top:12px; color:var(--muted); font-size:12px; line-height:1.5; }
.category-list { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.category-row { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--cream); border:1px solid var(--border); border-radius:9px; padding:10px 12px; }
.category-row strong { display:block; font-size:13px; font-weight:600; }
.category-row span { display:block; font-size:11px; color:var(--muted); margin-top:2px; }
.danger-zone { background:var(--warm-white); border:1px solid #F0C8BF; border-radius:12px; padding:18px; }
.danger-title { font-size:14px; font-weight:500; color:var(--danger); margin-bottom:5px; }
.danger-desc  { font-size:13px; color:var(--muted); margin-bottom:12px; line-height:1.5; }

/* ===== BOOKING PORTAL ===== */
#screen-booking { background:linear-gradient(180deg,#FBFAF7 0%,var(--cream) 42%,#F6F1EA 100%); scroll-behavior:smooth; }
#screen-booking.active { display:block; height:100vh; overflow-y:auto; overflow-x:hidden; }
.bk-header { background:rgba(255,253,249,.92); border-bottom:1px solid rgba(226,217,207,.82); padding:12px clamp(18px,4vw,60px); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; min-height:60px; backdrop-filter:blur(16px); box-shadow:0 8px 24px rgba(28,28,26,.06); }
.bk-header-actions { display:flex; align-items:center; gap:12px; }
.bk-brand { display:flex; align-items:center; gap:9px; }
.bk-brand-nm { font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:500; }
#screen-booking .bk-header .btn-primary { min-height:38px; border-radius:10px; box-shadow:0 8px 18px rgba(196,149,106,.22); }
#screen-booking .bk-header .btn-outline { min-height:38px; border-radius:10px; background:#FFFDF9; }
.bk-hero { background:var(--booking-hero-bg,var(--charcoal)); padding:56px clamp(18px,4vw,60px) 64px; display:block; position:relative; overflow:hidden; }
html.has-booking-cover .bk-hero { background-image:linear-gradient(90deg,rgba(28,28,26,.88),rgba(28,28,26,.64) 44%,rgba(28,28,26,.34)),var(--booking-hero-image); background-size:cover; background-position:center; }
.bk-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 42%,rgba(0,0,0,.12)); pointer-events:none; }
.bk-hero::after { content:''; position:absolute; left:clamp(18px,4vw,60px); right:clamp(18px,4vw,60px); bottom:0; height:1px; background:linear-gradient(90deg,transparent,rgba(196,149,106,.56),transparent); pointer-events:none; }
.bk-hero-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,430px); gap:clamp(28px,5vw,64px); align-items:center; max-width:1180px; margin:0 auto; width:100%; position:relative; z-index:1; }
.bk-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,0.08); border:1px solid rgba(196,149,106,0.48); color:#F2D2B1; font-size:10px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; padding:7px 12px; border-radius:20px; margin-bottom:20px; backdrop-filter:blur(10px); }
.bk-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.bk-h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(44px,6vw,72px); font-weight:300; color:white; line-height:1.02; margin-bottom:18px; max-width:620px; text-wrap:balance; }
.bk-h1 em { font-style:italic; color:var(--accent); }
.bk-p { font-size:15px; color:rgba(255,255,255,0.70); line-height:1.75; margin-bottom:28px; max-width:470px; }
.bk-branch-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:640px; }
.bk-branch-mini { border:1px solid rgba(196,149,106,.42); background:rgba(255,255,255,.075); border-radius:12px; padding:12px 14px; display:grid; gap:4px; backdrop-filter:blur(12px); box-shadow:0 12px 26px rgba(0,0,0,.12); }
.bk-branch-mini strong { color:#fff; font-size:13px; font-weight:600; }
.bk-branch-mini span,.bk-branch-mini small { color:rgba(255,255,255,0.66); font-size:12px; line-height:1.4; }
.bk-card { background:linear-gradient(180deg,#FFFDF9 0%,#FFFFFF 100%); border:1px solid rgba(255,255,255,.74); border-radius:18px; padding:24px; box-shadow:0 24px 56px rgba(0,0,0,0.28); width:100%; max-width:430px; justify-self:end; box-sizing:border-box; }
.bk-card-title { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:500; margin-bottom:3px; }
.bk-card-sub { font-size:12px; color:var(--muted); margin-bottom:16px; }
.bk-dots { display:flex; gap:7px; margin-bottom:18px; }
.bk-dot { height:4px; border-radius:999px; flex:1; background:#E9E2D8; transition:background 0.3s,transform 0.3s; }
.bk-dot.active { background:var(--accent); }
.bk-dot.done { background:var(--charcoal); }
.bk-form-filter-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:8px; align-items:end; }
.bk-form-filter-grid .field select { min-height:39px; padding:9px 30px 9px 12px; font-size:13px; background:#FFFDF9; }
.bk-form-filter-grid .select-wrap::after { right:11px; }
.svc-opt { display:flex; align-items:center; gap:10px; padding:12px 13px; border:1.5px solid var(--border); border-radius:11px; cursor:pointer; transition:all 0.15s; margin-bottom:8px; background:#FFFDF9; }
.bk-service-options { max-height:304px; overflow-y:auto; padding-right:4px; margin-right:-4px; margin-bottom:6px; }
.bk-service-options::-webkit-scrollbar { width:6px; }
.bk-service-options::-webkit-scrollbar-thumb { background:#D8D0C5; border-radius:8px; }
.bk-unavailable-card { padding:20px 16px; border:1px solid #E2C8A8; border-radius:14px; background:linear-gradient(180deg,#FFF8EA 0%,#FFFDF8 100%); text-align:center; color:var(--charcoal); }
.bk-unavailable-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; margin-bottom:10px; border-radius:50%; background:#C4956A; color:#fff; font-weight:800; }
.bk-unavailable-card strong { display:block; font-size:15px; margin-bottom:6px; }
.bk-unavailable-card p { margin:0 auto 10px; max-width:320px; color:#6F6257; font-size:13px; line-height:1.45; }
.bk-unavailable-card span { display:inline-flex; padding:6px 10px; border-radius:999px; background:#F2E6D8; color:#7A4A20; font-size:12px; font-weight:700; }
.svc-opt:hover,.svc-opt.selected { border-color:var(--accent); background:linear-gradient(180deg,#FFF8EE 0%,var(--accent-light) 100%); box-shadow:0 8px 18px rgba(196,149,106,.13); }
.svc-opt-color { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.svc-opt-nm { font-size:13px; font-weight:700; }
.svc-opt-dur { font-size:11px; color:var(--muted); }
.svc-opt-price { font-size:13px; font-weight:500; margin-left:auto; }
.promo-option-price { display:flex; flex-direction:column; align-items:flex-end; gap:1px; line-height:1.1; }
.promo-option-price span { font-size:10px; color:var(--muted); text-decoration:line-through; font-weight:500; }
.promo-option-price strong { font-size:13px; color:#8A6507; }
.bk-staff-choice { display:flex; align-items:center; gap:8px; background:#FFFDF9; border:1px solid var(--border); border-radius:10px; padding:11px 12px; margin:2px 0 10px; color:var(--charcoal); font-size:12px; cursor:pointer; }
.bk-staff-choice input { width:15px; height:15px; accent-color:var(--accent); }
.mini-cal-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; background:#FFFDF9; border:1px solid var(--border); border-radius:12px; padding:7px 8px; }
.mini-cal-month { font-size:13px; font-weight:700; }
.mini-cal-nav { width:28px; height:28px; background:white; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:13px; color:var(--muted); }
.mini-date-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:16px; }
.mini-day-lbl { font-size:9px; color:var(--muted); text-align:center; font-weight:500; }
.mini-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:11px; border-radius:10px; cursor:pointer; transition:all 0.12s; min-height:32px; }
.mini-cell:hover { background:var(--accent-light); }
.mini-cell.selected { background:var(--accent); color:white; font-weight:500; }
.mini-cell.today { border:1.5px solid var(--accent); color:var(--accent); font-weight:500; }
.mini-cell.disabled { color:#D4D0C8; cursor:default; }
.mini-cell.disabled:hover { background:none; }
.time-slots-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:14px; max-height:174px; overflow-y:auto; padding-right:4px; }
.time-slots-grid::-webkit-scrollbar { width:6px; }
.time-slots-grid::-webkit-scrollbar-thumb { background:#D8D0C5; border-radius:8px; }
.bk-slot-warning { margin:-2px 0 8px; font-size:11px; line-height:1.35; color:var(--danger); font-weight:700; }
.ts { padding:9px 0; font-size:12px; font-weight:700; text-align:center; border:1.5px solid var(--border); border-radius:9px; cursor:pointer; transition:all 0.12s; background:#FFFDF9; }
.ts:hover { border-color:var(--accent); color:var(--accent); }
.ts.selected { background:var(--charcoal); border-color:var(--charcoal); color:white; }
.ts.unavail { color:#D4D0C8; cursor:default; text-decoration:line-through; }
.ts.unavail:hover { border-color:var(--border); color:#D4D0C8; }
.btn-bk-next { width:100%; min-height:44px; padding:12px; background:var(--accent); color:white; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700; border:none; border-radius:11px; cursor:pointer; transition:background 0.2s,transform 0.2s,box-shadow 0.2s; margin-top:4px; box-shadow:0 10px 22px rgba(196,149,106,.22); }
.btn-bk-next:hover { background:#B5845A; }
.btn-bk-next:disabled { background:var(--border); color:var(--muted); cursor:default; }
.btn-bk-next.ghost { background:none; border:1px solid var(--border); color:var(--charcoal); }
.btn-bk-next.ghost:hover { background:var(--cream); }
.bk-resumen { background:linear-gradient(180deg,#FFF8EE 0%,var(--accent-light) 100%); border:1px solid rgba(196,149,106,.22); border-radius:10px; padding:11px 12px; margin-bottom:12px; font-size:12px; color:#7A4A20; }
.bk-sections { padding:58px clamp(18px,4vw,60px); max-width:1180px; margin:0 auto; box-sizing:border-box; }
.bk-branch-filter-wrap { margin:8px 0 22px; }
.bk-filter-title { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.bk-filter-row { display:flex; gap:8px; flex-wrap:wrap; }
.bk-filter-chip { border:1px solid var(--border); background:var(--warm-white); color:var(--muted); border-radius:999px; padding:8px 13px; font:600 12px 'DM Sans',sans-serif; cursor:pointer; }
.bk-filter-chip.active { background:var(--charcoal); color:white; border-color:var(--charcoal); }
.bk-sec-label { font-size:10px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.bk-sec-title { font-family:'Cormorant Garamond',serif; font-size:clamp(30px,4vw,42px); font-weight:300; margin-bottom:6px; line-height:1.05; }
.bk-sec-sub { font-size:13px; color:var(--muted); margin-bottom:30px; line-height:1.6; max-width:620px; }
.bk-content-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,0.9fr); gap:clamp(24px,4vw,46px); margin-bottom:44px; align-items:start; }
.bk-products-section { margin-bottom:52px; }
.bk-promos-section { margin-bottom:50px; padding:22px; border:1px solid rgba(196,149,106,.20); border-radius:20px; background:linear-gradient(180deg,#FFFDF8 0%,#FBF5EC 100%); box-shadow:0 18px 42px rgba(28,28,26,0.045); }
.bk-list-title { font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); margin:4px 0 10px; }
.bk-svc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:42px; }
.bk-products-grid { grid-template-columns:repeat(3,1fr); margin-bottom:0; }
.bk-svc-card { background:linear-gradient(180deg,#fff 0%,#FBFAF7 100%); border:1px solid var(--border); border-radius:18px; padding:18px; cursor:pointer; transition:box-shadow 0.2s,transform 0.2s,border-color 0.2s; min-height:158px; position:relative; overflow:hidden; box-shadow:0 10px 24px rgba(28,28,26,0.04); }
.bk-product-card { min-height:166px; }
.bk-svc-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0.80; filter:saturate(1.12) contrast(1.08); pointer-events:none; }
.bk-svc-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,0.76) 0%,rgba(255,255,255,0.62) 56%,rgba(255,255,255,0.50) 100%); }
.bk-svc-card::after { content:''; position:absolute; top:-34px; right:-34px; width:92px; height:92px; border-radius:50%; background:var(--card-glow,rgba(196,149,106,0.13)); pointer-events:none; }
.bk-svc-card:hover { box-shadow:0 16px 34px rgba(28,28,26,0.12); transform:translateY(-3px); border-color:#D8CFC3; }
.bk-svc-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; position:relative; z-index:1; }
.bk-svc-nm { font-size:14px; font-weight:700; margin-bottom:4px; position:relative; z-index:1; }
.bk-svc-desc { font-size:11px; color:var(--muted); line-height:1.5; margin-bottom:10px; position:relative; z-index:1; }
.bk-svc-ft { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.bk-svc-price { font-family:'Cormorant Garamond',serif; font-size:21px; }
.bk-svc-dur { font-size:11px; color:var(--muted); }
.bk-price-promo { display:flex; flex-direction:column; gap:2px; min-width:0; }
.bk-price-before { font-size:10px; color:var(--muted); line-height:1.1; }
.bk-price-before span { text-decoration:line-through; }
.bk-price-now { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.bk-price-now span { font-size:10px; font-weight:700; color:#8A6507; letter-spacing:.06em; text-transform:uppercase; }
.bk-price-now strong { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:500; color:#8A6507; }
.bk-staff-list { display:flex; flex-direction:column; gap:12px; }
.bk-staff-card { background:linear-gradient(180deg,#fff 0%,#FBFAF7 100%); border:1px solid var(--border); border-radius:18px; padding:18px; display:flex; align-items:flex-start; gap:14px; text-align:left; box-shadow:0 10px 26px rgba(28,28,26,0.055); }
.bk-staff-card.bk-staff-featured { border-color:rgba(196,149,106,.7); box-shadow:0 14px 34px rgba(196,149,106,.14); }
.bk-staff-av { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:22px; color:white; margin:0 auto 10px; box-shadow:0 8px 20px rgba(28,28,26,.12); }
.bk-staff-nm { font-size:14px; font-weight:500; margin-bottom:2px; }
.bk-featured-badge { display:inline-flex; margin-left:8px; vertical-align:middle; border-radius:999px; padding:3px 8px; background:#F7EEE6; border:1px solid rgba(196,149,106,.45); color:#7A4A20; font-size:10px; font-weight:700; }
.bk-staff-rl { font-size:12px; color:var(--muted); margin-bottom:7px; }
.bk-staff-bio { font-size:12px; color:var(--muted); line-height:1.55; margin:7px 0 8px; }
.bk-how-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bk-how-grid > div { background:var(--warm-white); border:1px solid var(--border); border-radius:18px; padding:20px 16px; box-shadow:0 10px 26px rgba(28,28,26,0.045); }
.bk-how-num { width:42px; height:42px; border-radius:50%; background:var(--accent); color:white; font-family:'Cormorant Garamond',serif; font-size:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; box-shadow:0 8px 18px rgba(196,149,106,.22); }
.bk-how-title { font-size:13px; font-weight:700; text-align:center; margin-bottom:5px; }
.bk-how-desc { font-size:12px; color:var(--muted); text-align:center; line-height:1.6; }
.bk-footer { background:linear-gradient(135deg,#1C1C1A 0%,#28231D 100%); padding:30px clamp(18px,4vw,60px); display:flex; align-items:center; justify-content:space-between; }
.bk-footer-brand { font-family:'Cormorant Garamond',serif; font-size:17px; color:white; }
.bk-footer-links { display:flex; gap:16px; }
.bk-footer-links a { font-size:11px; color:rgba(255,255,255,0.35); text-decoration:none; cursor:pointer; }
.bk-footer-pw { font-size:10px; color:rgba(255,255,255,0.2); }
.bk-footer-pw span { color:var(--accent); }
.bk-promo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.bk-promo-card { min-height:158px; border:1px solid rgba(196,149,106,0.50); background:linear-gradient(90deg,#D4AF37 0 5px,transparent 5px),linear-gradient(180deg,#D4AF37 0 4px,transparent 4px),linear-gradient(180deg,#fff 0%,#FFF8EB 100%); box-shadow:0 12px 28px rgba(184,134,11,0.12); }
.bk-promo-card::before { content:''; position:absolute; inset:0; border:1px solid rgba(255,255,255,0.72); border-radius:16px; pointer-events:none; z-index:2; }
.bk-promo-card::after { background:radial-gradient(circle at top right,rgba(212,175,55,0.28),transparent 54%); }
.bk-promo-card .bk-svc-bg::after { background:linear-gradient(90deg,rgba(255,255,255,0.72) 0%,rgba(255,250,238,0.62) 62%,rgba(255,244,204,0.50) 100%); }
.bk-promo-card:hover { border-color:#D4AF37; box-shadow:0 16px 34px rgba(184,134,11,0.18); }
.bk-promo-card .bk-svc-icon { margin-bottom:9px; }
.bk-promo-ribbon { position:absolute; top:10px; right:12px; z-index:3; color:#B8860B; font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700; line-height:1; text-shadow:0 1px 0 #fff,0 4px 14px rgba(184,134,11,0.20); }
.bk-promo-ribbon::before,.bk-promo-ribbon::after { content:''; position:absolute; right:-12px; width:54px; height:2px; background:linear-gradient(90deg,transparent,#D4AF37); opacity:.72; }
.bk-promo-ribbon::before { top:-7px; }
.bk-promo-ribbon::after { bottom:-8px; }
.bk-promo-icon { background:linear-gradient(135deg,#FFF8E1,#F3D78A); box-shadow:inset 0 0 0 1px rgba(184,134,11,0.16); }
.bk-promo-badge { display:inline-flex; position:relative; z-index:1; color:#8A6507; background:#FFF4CC; border:1px solid rgba(184,134,11,0.22); font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; margin-bottom:8px; }
.bk-promo-title { font-size:16px; color:var(--charcoal); padding-right:56px; }
.bk-promo-desc { color:var(--muted); min-height:34px; }
.bk-promo-foot .bk-svc-price { color:#8A6507; font-size:22px; }
.bk-confirm-box { text-align:center; padding:10px 0; }
.bk-confirm-icon { width:52px; height:52px; background:var(--success-light); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 13px; }
.bk-confirm-icon svg { width:22px; height:22px; fill:var(--success); }
.bk-confirm-title { font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:400; margin-bottom:6px; }
.bk-confirm-detail { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:12px; }
.bk-confirm-note { background:var(--cream); border-radius:8px; padding:9px 11px; font-size:11px; color:var(--muted); }
.bk-confirm-support-note { margin-top:8px; background:#FFF8EF; border:1px solid rgba(196,149,106,.35); border-radius:8px; padding:9px 11px; font-size:11px; line-height:1.45; color:#8A5B22; }
.bk-confirm-folio-wrap { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; border:1px solid var(--border); border-radius:9px; padding:7px 12px; color:var(--charcoal); margin:8px 0 8px; min-width:190px; }
.bk-confirm-folio-wrap span { font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.bk-confirm-folio-wrap strong { font-size:13px; letter-spacing:.04em; }
.bk-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.bk-manage-section { margin-bottom:52px; padding:22px; border:1px solid var(--border); border-radius:20px; background:var(--warm-white); box-shadow:0 14px 34px rgba(28,28,26,0.05); }
.bk-manage-card { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; }
.bk-manage-card .field { margin-bottom:0; }
.bk-manage-card .btn-bk-next { min-width:150px; }
.bk-manage-result { grid-column:1/-1; margin-top:4px; }
.bk-manage-panel { background:var(--cream); border:1px solid var(--border); border-radius:12px; padding:14px; font-size:12px; color:var(--muted); line-height:1.55; }
.bk-manage-panel strong { color:var(--charcoal); }
.bk-manage-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.bk-manage-actions button { width:auto; min-width:140px; }
.bk-reschedule-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.month-stat-row { display:flex; align-items:center; justify-content:space-between; padding:9px 16px; border-bottom:1px solid var(--border); }
.month-stat-row:last-child { border-bottom:none; }
.month-stat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-right:8px; }
.month-stat-label { font-size:13px; color:var(--charcoal); flex:1; }
.month-stat-bar-wrap { flex:1; max-width:80px; height:5px; background:var(--border); border-radius:3px; overflow:hidden; margin:0 10px; }
.month-stat-bar { height:100%; border-radius:3px; transition:width 0.4s ease; }
.month-stat-val { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:400; min-width:28px; text-align:right; }
.month-stat-pct { font-size:10px; color:var(--muted); min-width:32px; text-align:right; }

@media (max-width: 1100px) {
  .services-grid-3,.staff-grid-3 { grid-template-columns:repeat(2,1fr); }
  .promo-layout { grid-template-columns:1fr; }
  .notif-content { grid-template-columns:1fr; }
  .finance-panel-grid { grid-template-columns:1fr; }
  .report-grid { grid-template-columns:repeat(2,1fr); }
  .billing-checkout { grid-template-columns:1fr; }
  .bk-hero { padding:42px 28px 50px; }
  .bk-content-grid { grid-template-columns:1fr; }
  .bk-products-grid { grid-template-columns:repeat(2,1fr); }
  .bk-promo-grid { grid-template-columns:repeat(2,1fr); }
  .bk-branch-summary { grid-template-columns:1fr; }
}

@media (max-width: 820px) {
  html,body { overflow:auto; }
  .screen,.screen.active { min-height:100vh; height:auto; }
  .app-layout { min-height:100vh; height:auto; }
  .sidebar { width:72px; transition:width .18s ease; }
  .sidebar-brand,.sidebar-business { padding-left:12px; padding-right:12px; }
  .brand-name,.sidebar-business,.nav-label,.nav-item span,.nav-badge,.user-name,.user-role,.sidebar-logout span { display:none; }
  .sidebar-business { display:block; position:relative; padding-top:8px; padding-bottom:8px; }
  .sidebar-business:has(.branch-switch)::after { content:'Suc'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:rgba(255,255,255,.72); font-size:9px; font-weight:800; letter-spacing:.02em; pointer-events:none; }
  .sidebar-business .business-row { display:none; }
  .sidebar-business .branch-switch { display:block; width:48px; height:34px; margin:0; padding:0 6px; border-radius:9px; color:transparent; font-size:0; background-color:rgba(255,255,255,0.08); cursor:pointer; }
  .sidebar-business .branch-switch option { color:#1c1c1a; font-size:12px; }
  .sidebar:focus-within { width:220px; }
  .sidebar:focus-within .brand-name,
  .sidebar:focus-within .nav-label,
  .sidebar:focus-within .nav-item span,
  .sidebar:focus-within .nav-badge,
  .sidebar:focus-within .sidebar-logout span { display:inline; }
  .sidebar:focus-within .sidebar-business { padding-left:14px; padding-right:14px; }
  .sidebar:focus-within .sidebar-business::after { display:none; }
  .sidebar:focus-within .sidebar-business .business-row { display:flex; }
  .sidebar:focus-within .sidebar-business .branch-switch { width:100%; height:auto; margin-top:10px; padding:8px 9px; color:#fff; font-size:11px; }
  .sidebar:focus-within .nav-item { justify-content:flex-start; }
  .sidebar:focus-within .sidebar-logout { justify-content:flex-start; padding:10px 12px; }
  .sidebar-logout { justify-content:center; margin:10px 12px 16px; padding:10px; }
  .nav-item { justify-content:center; padding:10px; }
  .main-area { min-width:0; }
  .topbar { padding:0 16px; flex-wrap:wrap; height:auto; min-height:58px; gap:10px; }
  .topbar-right { flex-wrap:wrap; justify-content:flex-end; }
  .page-content { padding:18px; }
  .settings-page { padding:0; }
  .stats-row,.kpi-grid { grid-template-columns:repeat(2,1fr); }
  .module-toolbar { flex-direction:column; align-items:stretch; }
  .module-toolbar-main { width:100%; min-width:0; flex-basis:auto; }
  .module-toolbar-actions { width:100%; justify-content:flex-start; margin-left:0; }
  .module-toolbar .search-wrap { flex-basis:auto; max-width:none; }
  .staff-action-toolbar { align-items:stretch; }
  .staff-action-row { flex-direction:column; align-items:stretch; }
  .staff-action-group { flex-wrap:wrap; }
  .staff-action-group .btn-primary,.staff-action-group .btn-secondary,.staff-feature-toggle { flex:1 1 170px; justify-content:center; }
  .staff-toolbar-note { text-align:left; }
  .notif-toolbar-actions { width:100%; justify-content:flex-start; margin-left:0; }
  #screen-login { flex-direction:column; min-height:100vh; }
  .login-left { min-height:320px; padding:32px 28px; }
  .login-right { position:relative; top:auto; right:auto; bottom:auto; width:100%; min-width:0; padding:32px 24px; border-radius:0; border-left:none; border-right:none; box-shadow:none; }
  .login-form-wrap { max-width:460px; padding:22px; }
  .login-hero h1 { font-size:40px; }
  .login-features { grid-template-columns:1fr; }
  .cal-toolbar { align-items:stretch; }
  .staff-filter { width:100%; margin-left:0; overflow-x:auto; padding-bottom:2px; }
  #screen-calendario .cal-toolbar { padding:10px 14px; gap:10px; }
  #screen-calendario .view-tabs { width:auto; flex-shrink:0; }
  #screen-calendario .nav-week { flex:1; min-width:220px; }
  #screen-calendario .cal-wrap { background:var(--cream); padding:14px; }
  #screen-calendario .cal-desktop-grid { display:none; }
  #screen-calendario .cal-mobile-day { display:block; }
  #screen-calendario .cal-month-view { min-width:560px; background:var(--warm-white); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
  .finance-toolbar { flex-direction:column; align-items:stretch; }
  .finance-tabs { justify-content:flex-start; margin-left:0; }
  .finance-toolbar-copy { white-space:normal; }
  .settings-layout { grid-template-columns:1fr; }
  .onb-plan-grid { grid-template-columns:1fr; }
  .settings-nav { display:flex; overflow-x:auto; border-right:none; border-bottom:1px solid var(--border); gap:4px; padding:12px 14px; }
  .settings-nav-lbl { display:none; }
  .settings-nav-item { white-space:nowrap; flex-shrink:0; }
  .settings-body { padding:22px 18px 28px; }
  .settings-sec { max-width:none; }
  .user-limit-grid { grid-template-columns:repeat(2,1fr); }
  .user-access-row { grid-template-columns:1fr 1fr; }
  .drawer { width:100vw; }
  .bk-header { padding:12px 18px; flex-wrap:wrap; gap:10px; position:sticky; }
  .bk-header-actions { flex-wrap:wrap; justify-content:flex-start; gap:8px; width:100%; }
  .bk-admin-back { display:none; }
  .floating-notification-host { top:auto; right:12px; bottom:14px; width:calc(100vw - 24px); }
  .floating-notification { border-radius:12px; }
  .bk-hero-inner { grid-template-columns:1fr; }
  .bk-card { max-width:520px; justify-self:center; }
  .bk-manage-card { grid-template-columns:1fr; }
  .bk-manage-card .btn-bk-next { min-width:0; }
  .screen:has(.app-layout),
  .screen.active:has(.app-layout) { height:100dvh; min-height:100dvh; overflow:hidden; }
  .screen:has(.app-layout) .app-layout { height:100dvh; min-height:100dvh; overflow:hidden; }
  .screen:has(.app-layout) .sidebar { height:100dvh; overflow-y:auto; overflow-x:hidden; }
  .screen:has(.app-layout) .main-area { height:100dvh; overflow:hidden; }
  .screen:has(.app-layout) .topbar { position:relative; z-index:20; flex-shrink:0; box-shadow:0 8px 18px rgba(28,28,26,.04); }
  .screen:has(.app-layout) .page-content { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
  #screen-dashboard .two-col { grid-template-columns:1fr; gap:16px; }
  #screen-dashboard .section-card { min-width:0; width:100%; }
  #screen-dashboard .cita-list { min-height:120px; }
  #screen-dashboard .cita-item { align-items:flex-start; padding:12px 14px; }
  #screen-dashboard .cita-info { min-width:0; }
  #screen-dashboard .cita-name,
  #screen-dashboard .cita-detail { overflow-wrap:anywhere; }
}

@media (max-width: 620px) {
  .services-grid-3,.staff-grid-3,.bk-svc-grid,.bk-products-grid,.bk-promo-grid,.bk-how-grid { grid-template-columns:1fr; }
  .stats-row,.kpi-grid,.user-limit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .stat-card,.kpi-card,.user-limit-card { min-height:86px; padding:10px 12px; border-radius:9px; }
  .stat-val,.kpi-value,.user-limit-card strong { font-size:22px; line-height:1; overflow-wrap:anywhere; }
  .stat-label,.stat-sub,.kpi-label,.kpi-sub,.user-limit-card span,.user-access-sub { font-size:10px; line-height:1.25; }
  .kpi-card::before { height:2px; }
  #ss-plan .plans-grid { display:flex; grid-template-columns:none; gap:10px; overflow-x:auto; padding:3px 2px 10px; margin:0 -2px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  #ss-plan .plans-grid::-webkit-scrollbar { height:6px; }
  #ss-plan .plans-grid::-webkit-scrollbar-thumb { background:#D8D0C5; border-radius:999px; }
  #ss-plan .plan-opt { flex:0 0 min(210px,78vw); scroll-snap-align:start; padding:13px 12px; min-height:auto; text-align:center; }
  #ss-plan .plan-opt-nm { font-size:13px; line-height:1.15; min-height:30px; display:flex; align-items:center; justify-content:center; }
  #ss-plan .plan-opt-price { font-size:25px; white-space:normal; }
  #ss-plan .plan-feature-list { gap:4px; justify-content:center; max-height:116px; overflow:auto; padding-right:2px; }
  #ss-plan .plan-feature-list span { font-size:9px; padding:4px 6px; }
  #ss-plan .plan-opt-desc { font-size:10px; line-height:1.35; }
  #ss-plan .btn-plan { min-height:34px; }
  .finance-methods,.cash-summary,.client-finance-mini,.report-grid,.billing-grid,.billing-modal-summary { grid-template-columns:1fr; }
  .login-left { padding:28px 22px; }
  .login-right { padding:22px 16px 30px; }
  .login-form-wrap { border-radius:12px; padding:18px; box-shadow:none; }
  .login-hero h1 { font-size:36px; }
  .login-kicker { font-size:10px; }
  .login-tabs { margin-bottom:20px; }
  #screen-dashboard .topbar { align-items:flex-start; }
  #screen-dashboard .topbar h1 { font-size:20px; }
  #screen-dashboard .topbar-right { gap:6px; }
  #screen-dashboard .btn-link-copy { padding:8px 10px; font-size:11px; }
  #screen-dashboard .btn-notif { width:34px; height:34px; flex:0 0 34px; }
  .finance-tab { width:100%; text-align:center; }
  .nav-week { width:100%; justify-content:space-between; }
  .week-label { min-width:0; flex:1; }
  #screen-calendario .topbar-sub { display:none; }
  #screen-calendario .cal-toolbar { padding:9px 12px; }
  #screen-calendario .view-tabs { width:100%; }
  #screen-calendario .view-tab { flex:1; }
  #screen-calendario .nav-week { width:100%; min-width:0; }
  #screen-calendario .staff-filter { gap:6px; }
  #screen-calendario .cal-wrap { padding:12px; }
  .cal-mobile-summary { align-items:flex-start; flex-direction:column; }
  .cal-mobile-new { width:100%; }
  .cal-mobile-appt { grid-template-columns:54px 1fr; align-items:start; }
  .cal-mobile-appt .status-pill,
  .cal-mobile-appt .cal-mobile-availability-pill,
  .cal-mobile-appt .cal-mobile-blocked-pill { grid-column:2; justify-self:start; margin-top:4px; }
  .cash-summary.compact { grid-template-columns:1fr; }
  .cash-cut-accordion summary { align-items:flex-start; flex-direction:column; }
  .cash-cut-summary-right { text-align:left; }
  .billing-cycles { grid-template-columns:1fr; }
  .billing-promo-alert { grid-template-columns:1fr; }
  .billing-promo-glow { min-height:58px; font-size:22px; }
  .billing-promo-copy strong { font-size:25px; }
  .global-subscription-promo { left:12px; right:12px; bottom:12px; width:auto; grid-template-columns:1fr; }
  .global-promo-actions { width:100%; }
  .global-subscription-promo button { width:100%; }
  .global-subscription-promo .global-promo-close { width:38px; flex:0 0 38px; }
  .global-subscription-expiry { left:12px; right:12px; bottom:12px; width:auto; grid-template-columns:1fr; }
  .global-subscription-expiry.stacked { bottom:150px; }
  .global-expiry-actions { width:100%; }
  .global-subscription-expiry button { width:100%; }
  .global-subscription-expiry .global-expiry-close { width:38px; flex:0 0 38px; }
  .global-client-message { left:12px; right:12px; bottom:12px; width:auto; grid-template-columns:1fr; }
  .global-subscription-promo + .global-client-message,
  .global-client-message:has(+ .global-subscription-promo),
  .global-subscription-expiry + .global-client-message,
  .global-client-message:has(+ .global-subscription-expiry) { bottom:132px; }
  .global-subscription-expiry.stacked + .global-client-message { bottom:282px; }
  .global-message-actions { width:100%; }
  .global-client-message button { width:100%; }
  .global-client-message .global-message-close { width:38px; flex:0 0 38px; }
  .cash-cut-box { flex-direction:column; align-items:flex-start; }
  .field-row { grid-template-columns:1fr; }
  .image-upload-row { grid-template-columns:1fr; }
  .user-access-row { grid-template-columns:1fr; }
  .modal { width:calc(100vw - 24px); max-height:88vh; border-radius:12px; }
  .modal-footer { flex-wrap:wrap; }
  .modal-footer button { flex:1 1 auto; }
  .service-item,.svc-item-row { grid-template-columns:1fr; }
  .staff-item,.staff-item-row { grid-template-columns:1fr; }
  .btn-rm { width:100%; }
  .login-hero h1,.bk-h1 { font-size:38px; }
  #screen-booking.active { height:100dvh; min-height:100dvh; overflow-y:auto; }
  .bk-header { align-items:flex-start; }
  .bk-header-actions span { width:100%; font-size:12px !important; }
  #screen-booking .bk-header .btn-primary,
  #screen-booking .bk-header .btn-outline { flex:1 1 140px; justify-content:center; }
  .bk-hero { padding:22px 16px 18px; }
  html.has-booking-cover .bk-hero {
    background-color:#0B0A09;
    background-image:linear-gradient(90deg,rgba(11,10,9,.72),rgba(28,20,14,.42)),var(--booking-hero-image);
    background-size:cover,100% auto;
    background-position:center,center top;
    background-repeat:no-repeat;
  }
  .bk-hero-inner { gap:18px; }
  .bk-hero-inner > div:first-child { min-height:230px; display:flex; flex-direction:column; justify-content:center; }
  .bk-h1 { font-size:34px; line-height:1.04; margin-bottom:14px; max-width:330px; }
  .bk-form-filter-grid { grid-template-columns:1fr; gap:0; }
  .bk-p { font-size:13px; line-height:1.55; margin-bottom:18px; max-width:420px; }
  .bk-badge { margin-bottom:14px; padding:6px 10px; font-size:9px; }
  .bk-branch-summary { grid-template-columns:1fr; }
  .bk-branch-mini { padding:10px 12px; border-radius:10px; }
  .bk-card { padding:20px; border-radius:16px; max-width:none; }
  .bk-card-title { font-size:24px; }
  .mini-cell { min-height:38px; border-radius:12px; }
  .bk-confirm-actions,.bk-reschedule-grid { grid-template-columns:1fr; }
  .bk-service-options { max-height:248px; overflow-y:auto; padding-right:4px; margin-right:-4px; }
  .bk-sections { padding:38px 16px; }
  .bk-sec-title { font-size:31px; }
  .bk-promos-section,.bk-manage-section { padding:18px; border-radius:18px; }
  .bk-content-grid { gap:34px; margin-bottom:40px; }
  .bk-svc-card,.bk-staff-card,.bk-how-grid > div { border-radius:16px; }
  .bk-footer { padding:24px 16px; flex-direction:column; gap:12px; align-items:flex-start; }
  .time-slots-grid { grid-template-columns:repeat(2,1fr); max-height:196px; overflow-y:auto; padding-right:4px; }
  .ts { min-height:42px; display:flex; align-items:center; justify-content:center; }
  .table-wrap { overflow-x:auto; }
  table { min-width:760px; }
}