:root {
  --primary: #C4788A;
  --primary-light: #f5e0e5;
  --primary-dark: #a85e70;
  --secondary: #9B8AC4;
  --secondary-light: #ede9f8;
  --accent: #7A9E7E;
  --accent-light: #e4f0e5;
  --gold: #D4A853;
  --gold-light: #fdf3e0;
  --bg: #faf8f9;
  --bg2: #f3f0f5;
  --card: #ffffff;
  --text: #2d2535;
  --text2: #7a6e80;
  --text3: #b0a8b5;
  --border: #ede9f0;
  --shadow: 0 2px 20px rgba(196,120,138,0.08);
  --shadow-lg: 0 8px 40px rgba(196,120,138,0.14);
  --radius: 18px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}

/* ─── SIDEBAR ─────────────────────────────────────── */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:260px;
  background:var(--card);border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:100;
  transition:var(--transition);
  box-shadow:4px 0 30px rgba(196,120,138,0.06);
}
.sidebar-logo{
  padding:28px 24px 24px;
  border-bottom:1px solid var(--border);
}
.logo-mark{
  display:flex;align-items:center;gap:10px;
}
.logo-icon{
  width:38px;height:38px;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  box-shadow:0 4px 12px rgba(196,120,138,0.35);
}
.logo-text h1{
  font-family:'Playfair Display',serif;
  font-size:18px;font-weight:700;
  color:var(--text);letter-spacing:-0.3px;
}
.logo-text span{
  font-size:11px;color:var(--text2);font-weight:400;letter-spacing:0.5px;
}
.sidebar-studio{
  padding:16px 24px;
  background:linear-gradient(135deg,var(--primary-light),var(--secondary-light));
  margin:16px 12px;border-radius:var(--radius-sm);
}
.studio-name{font-size:13px;font-weight:600;color:var(--primary-dark);}
.studio-sub{font-size:11px;color:var(--text2);}
.sidebar-nav{
  flex:1;overflow-y:auto;padding:8px 12px;
}
.nav-section{
  margin-bottom:8px;
}
.nav-label{
  font-size:10px;font-weight:600;color:var(--text3);
  letter-spacing:1.2px;text-transform:uppercase;
  padding:12px 12px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;border-radius:var(--radius-sm);
  cursor:pointer;transition:var(--transition);
  font-size:14px;font-weight:500;color:var(--text2);
  margin-bottom:2px;position:relative;
}
.nav-item:hover{background:var(--bg);color:var(--text);}
.nav-item.active{
  background:linear-gradient(135deg,var(--primary-light),var(--secondary-light));
  color:var(--primary-dark);font-weight:600;
}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:60%;background:var(--primary);border-radius:0 2px 2px 0;
}
.nav-item svg{width:17px;height:17px;flex-shrink:0;}
.sidebar-bottom{
  padding:16px 12px;border-top:1px solid var(--border);
}
.user-card{
  display:flex;align-items:center;gap:10px;
  padding:12px;border-radius:var(--radius-sm);
  cursor:pointer;transition:var(--transition);
}
.user-card:hover{background:var(--bg);}
.user-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#fff;font-weight:600;flex-shrink:0;
}
.user-info{flex:1;}
.user-name{font-size:13px;font-weight:600;color:var(--text);}
.user-role{font-size:11px;color:var(--text2);}

/* ─── MAIN ─────────────────────────────────────────── */
.main{
  margin-left:260px;
  min-height:100vh;
  transition:var(--transition);
}
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(250,248,249,0.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 32px;
  height:68px;
  display:flex;align-items:center;justify-content:space-between;
}
.topbar-left{display:flex;align-items:center;gap:16px;}
.menu-toggle{
  display:none;width:38px;height:38px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-xs);cursor:pointer;
  align-items:center;justify-content:center;
}
.page-title{
  font-family:'Playfair Display',serif;
  font-size:22px;font-weight:600;color:var(--text);
}
.topbar-right{display:flex;align-items:center;gap:10px;}
.topbar-btn{
  width:38px;height:38px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-xs);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);color:var(--text2);
  position:relative;
}
.topbar-btn:hover{border-color:var(--primary);color:var(--primary);}
.badge{
  position:absolute;top:-4px;right:-4px;
  width:16px;height:16px;
  background:var(--primary);border-radius:50%;
  font-size:9px;color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
}
.btn-primary{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;border:none;border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;transition:var(--transition);
  box-shadow:0 4px 14px rgba(196,120,138,0.35);
  white-space:nowrap;
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(196,120,138,0.45);
}
.btn-primary svg{width:15px;height:15px;}
.btn-secondary{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;
  background:var(--card);color:var(--text2);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;
  cursor:pointer;transition:var(--transition);
}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;background:transparent;
  color:var(--text2);border:none;border-radius:var(--radius-xs);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  cursor:pointer;transition:var(--transition);
}
.btn-ghost:hover{background:var(--bg2);color:var(--text);}

/* ─── PAGE CONTENT ─────────────────────────────────── */
.page{display:none;padding:32px;}
.page.active{display:block;}

/* ─── CARDS / STATS ─────────────────────────────────── */
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin-bottom:24px;
}
.stat-card{
  background:var(--card);border-radius:var(--radius);
  padding:22px;border:1px solid var(--border);
  transition:var(--transition);position:relative;overflow:hidden;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.stat-card::after{
  content:'';position:absolute;
  top:-30px;right:-30px;
  width:80px;height:80px;
  border-radius:50%;
  opacity:0.07;
}
.stat-card.rose::after{background:var(--primary);}
.stat-card.purple::after{background:var(--secondary);}
.stat-card.green::after{background:var(--accent);}
.stat-card.gold::after{background:var(--gold);}
.stat-icon{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.stat-icon.rose{background:var(--primary-light);}
.stat-icon.purple{background:var(--secondary-light);}
.stat-icon.green{background:var(--accent-light);}
.stat-icon.gold{background:var(--gold-light);}
.stat-icon svg{width:18px;height:18px;}
.stat-icon.rose svg{color:var(--primary);}
.stat-icon.purple svg{color:var(--secondary);}
.stat-icon.green svg{color:var(--accent);}
.stat-icon.gold svg{color:var(--gold);}
.stat-value{
  font-family:'Playfair Display',serif;
  font-size:28px;font-weight:700;color:var(--text);
  line-height:1;margin-bottom:4px;
}
.stat-label{font-size:12px;color:var(--text2);font-weight:500;}
.stat-delta{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:600;margin-top:8px;
  padding:3px 8px;border-radius:20px;
}
.stat-delta.up{background:#e8f5e9;color:#388e3c;}
.stat-delta.down{background:#fce4ec;color:#e53935;}

/* ─── GRID 2 COL ─────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.grid-3{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:20px;}
.card{
  background:var(--card);border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);overflow:hidden;
}
.card-header{
  padding:20px 24px 0;
  display:flex;align-items:center;justify-content:space-between;
}
.card-title{
  font-family:'Playfair Display',serif;
  font-size:17px;font-weight:600;color:var(--text);
}
.card-body{padding:16px 24px 20px;}

/* ─── CHART ─────────────────────────────────────────── */
.chart-wrap{padding:16px 20px 20px;height:220px;position:relative;}

/* ─── TABLE ─────────────────────────────────────────── */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead th{
  padding:10px 16px;text-align:left;
  font-size:11px;font-weight:600;color:var(--text2);
  letter-spacing:0.6px;text-transform:uppercase;
  border-bottom:1px solid var(--border);background:var(--bg);
}
thead th:first-child{border-radius:var(--radius-sm) 0 0 0;}
thead th:last-child{border-radius:0 var(--radius-sm) 0 0;}
tbody td{
  padding:13px 16px;font-size:13px;color:var(--text);
  border-bottom:1px solid var(--border);vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--bg);}

/* ─── STATUS BADGES ─────────────────────────────────── */
.badge-status{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:20px;
  font-size:11px;font-weight:600;
}
.badge-status::before{content:'';width:6px;height:6px;border-radius:50%;}
.status-agendado{background:#e8f0fe;color:#1565c0;}
.status-agendado::before{background:#1565c0;}
.status-concluido{background:#e8f5e9;color:#2e7d32;}
.status-concluido::before{background:#2e7d32;}
.status-cancelado{background:#fce4ec;color:#c62828;}
.status-cancelado::before{background:#c62828;}

/* ─── MODALS ─────────────────────────────────────────── */
.overlay{
  position:fixed;inset:0;
  background:rgba(45,37,53,0.45);
  z-index:200;display:none;
  align-items:center;justify-content:center;
  padding:20px;
  backdrop-filter:blur(4px);
}
.overlay.open{display:flex;}
.modal{
  background:var(--card);border-radius:var(--radius);
  width:100%;max-width:520px;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 24px 80px rgba(45,37,53,0.18);
  animation:modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalIn{
  from{opacity:0;transform:translateY(20px) scale(0.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.modal-header{
  padding:24px 28px 0;
  display:flex;align-items:center;justify-content:space-between;
}
.modal-title{
  font-family:'Playfair Display',serif;
  font-size:20px;font-weight:700;color:var(--text);
}
.modal-close{
  width:32px;height:32px;border-radius:var(--radius-xs);
  background:var(--bg);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--text2);transition:var(--transition);
}
.modal-close:hover{background:var(--primary-light);color:var(--primary);}
.modal-body{padding:20px 28px 28px;}

/* ─── FORM ─────────────────────────────────────────── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-group{margin-bottom:16px;}
.form-label{
  display:block;font-size:12px;font-weight:600;
  color:var(--text2);margin-bottom:6px;letter-spacing:0.3px;
}
.form-control{
  width:100%;padding:11px 14px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:14px;color:var(--text);
  transition:var(--transition);outline:none;
  -webkit-appearance:none;
}
.form-control:focus{
  border-color:var(--primary);
  background:var(--card);
  box-shadow:0 0 0 3px rgba(196,120,138,0.12);
}
textarea.form-control{resize:vertical;min-height:80px;}
select.form-control{cursor:pointer;}
.form-actions{
  display:flex;gap:10px;justify-content:flex-end;
  margin-top:8px;
}

/* ─── LIST ITEMS ─────────────────────────────────────── */
.item-list{display:flex;flex-direction:column;gap:10px;}
.item-card{
  background:var(--bg);border-radius:var(--radius-sm);
  padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--border);
  transition:var(--transition);
}
.item-card:hover{border-color:var(--primary-light);background:var(--card);box-shadow:var(--shadow);}
.item-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.item-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary-light),var(--secondary-light));
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:var(--primary-dark);
  flex-shrink:0;
}
.item-name{font-size:14px;font-weight:600;color:var(--text);}
.item-sub{font-size:12px;color:var(--text2);}
.item-actions{display:flex;gap:6px;}
.action-btn{
  width:30px;height:30px;border-radius:var(--radius-xs);
  background:var(--card);border:1px solid var(--border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text2);transition:var(--transition);
}
.action-btn:hover{border-color:var(--primary);color:var(--primary);}
.action-btn.danger:hover{border-color:#e53935;color:#e53935;}
.action-btn svg{width:14px;height:14px;}

/* ─── AGENDA ─────────────────────────────────────────── */
.agenda-card{background:var(--bg);border-radius:var(--radius-sm);padding:14px 16px;border:1px solid var(--border);transition:var(--transition);}
.agenda-card:hover{border-color:var(--primary-light);background:var(--card);box-shadow:var(--shadow);}
.agenda-card-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px;}
.agenda-card-info{flex:1;min-width:0;}
.agenda-card-bottom{display:flex;align-items:center;justify-content:space-between;}
.agenda-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;flex-wrap:wrap;gap:12px;
}
.date-nav{display:flex;align-items:center;gap:10px;}
.date-nav button{
  width:34px;height:34px;border-radius:var(--radius-xs);
  background:var(--card);border:1px solid var(--border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text2);transition:var(--transition);
}
.date-nav button:hover{border-color:var(--primary);color:var(--primary);}
.date-display{
  font-family:'Playfair Display',serif;
  font-size:17px;font-weight:600;color:var(--text);
  min-width:160px;text-align:center;
}
.view-toggle{display:flex;background:var(--bg);border-radius:var(--radius-xs);padding:3px;border:1px solid var(--border);}
.view-btn{
  padding:6px 14px;border-radius:6px;border:none;
  background:transparent;font-size:12px;font-weight:600;
  color:var(--text2);cursor:pointer;transition:var(--transition);
}
.view-btn.active{background:var(--card);color:var(--primary);box-shadow:0 1px 4px rgba(0,0,0,0.08);}

/* ─── CALENDAR WEEK ─────────────────────────────────── */
.week-grid{
  display:grid;grid-template-columns:60px repeat(7,1fr);
  border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;background:var(--card);
}
.week-header{
  background:var(--bg);border-bottom:1px solid var(--border);
  padding:10px 6px;text-align:center;font-size:11px;font-weight:600;
  color:var(--text2);letter-spacing:0.3px;
}
.week-header.today-col{background:var(--primary-light);color:var(--primary-dark);}
.time-col{font-size:11px;color:var(--text3);padding:0 8px;text-align:right;border-right:1px solid var(--border);}
.time-slot{
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  min-height:50px;position:relative;
  transition:var(--transition);cursor:pointer;
}
.time-slot:hover{background:var(--primary-light);}
.appt-block{
  position:absolute;left:2px;right:2px;
  border-radius:6px;padding:4px 7px;
  font-size:11px;font-weight:600;
  overflow:hidden;cursor:pointer;
  transition:var(--transition);
}
.appt-block:hover{transform:scale(1.02);z-index:10;}
.appt-block.rose{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;}
.appt-block.purple{background:linear-gradient(135deg,var(--secondary),#7e6fb0);color:#fff;}
.appt-block.green{background:linear-gradient(135deg,var(--accent),#5d8261);color:#fff;}

/* ─── FINANCE ─────────────────────────────────────────── */
.finance-summary{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-bottom:20px;
}
.finance-card{
  background:var(--card);border-radius:var(--radius);
  padding:20px;border:1px solid var(--border);
  text-align:center;
}
.finance-card .amount{
  font-family:'Playfair Display',serif;
  font-size:26px;font-weight:700;
  margin:8px 0 4px;
}
.finance-card .label{font-size:12px;color:var(--text2);}

/* ─── BUDGET / ORÇAMENTO ─────────────────────────────── */
.budget-preview{
  background:linear-gradient(135deg,#fff5f7,#f8f5ff);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:32px;max-width:600px;margin:0 auto;
}
.budget-company{margin-bottom:20px;}
.budget-company h2{
  font-family:'Playfair Display',serif;
  font-size:24px;font-weight:700;color:var(--text);
}
.budget-info{font-size:12px;color:var(--text2);margin-top:4px;}
.budget-divider{height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:2px;margin:20px 0;}
.budget-client{margin-bottom:20px;}
.budget-label{font-size:11px;font-weight:600;color:var(--text2);letter-spacing:0.8px;text-transform:uppercase;}
.budget-value{font-size:15px;font-weight:600;color:var(--text);margin-top:2px;}
.budget-services{
  background:#fff;border-radius:var(--radius-sm);
  border:1px solid var(--border);overflow:hidden;
  margin-bottom:20px;
}
.budget-service-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--border);
  font-size:14px;
}
.budget-service-row:last-child{border-bottom:none;}
.budget-total{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  border-radius:var(--radius-sm);color:#fff;
}
.budget-total .total-label{font-size:14px;font-weight:600;}
.budget-total .total-amount{
  font-family:'Playfair Display',serif;
  font-size:22px;font-weight:700;
}

/* ─── SEARCH BAR ─────────────────────────────────────── */
.search-bar{
  display:flex;align-items:center;gap:10px;
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:9px 14px;
  transition:var(--transition);
  max-width:280px;width:100%;
}
.search-bar:focus-within{border-color:var(--primary);}
.search-bar svg{width:15px;height:15px;color:var(--text3);flex-shrink:0;}
.search-bar input{
  border:none;background:transparent;outline:none;
  font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text);
  width:100%;
}
.search-bar input::placeholder{color:var(--text3);}

/* ─── TABS ─────────────────────────────────────────── */
.tabs{display:flex;gap:4px;background:var(--bg);border-radius:var(--radius-sm);padding:4px;border:1px solid var(--border);margin-bottom:20px;width:fit-content;}
.tab{
  padding:7px 16px;border-radius:6px;border:none;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  color:var(--text2);cursor:pointer;transition:var(--transition);background:transparent;
}
.tab.active{background:var(--card);color:var(--primary);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,0.08);}

/* ─── FILTERS ─────────────────────────────────────────── */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.filter-chip{
  padding:7px 14px;border-radius:20px;
  font-size:12px;font-weight:600;
  border:1.5px solid var(--border);
  background:var(--card);color:var(--text2);
  cursor:pointer;transition:var(--transition);
}
.filter-chip.active{
  border-color:var(--primary);
  background:var(--primary-light);
  color:var(--primary-dark);
}
.filter-chip:hover{border-color:var(--primary);color:var(--primary);}

/* ─── VIP BADGE ─────────────────────────────────────── */
.vip-badge{
  display:inline-flex;align-items:center;gap:3px;
  background:var(--gold-light);color:var(--gold);
  padding:2px 8px;border-radius:10px;
  font-size:10px;font-weight:700;letter-spacing:0.5px;
}

/* ─── EMPTY STATE ─────────────────────────────────────── */
.empty{
  text-align:center;padding:50px 20px;
}
.empty-icon{
  width:64px;height:64px;
  background:var(--primary-light);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
}
.empty-icon svg{width:28px;height:28px;color:var(--primary);}
.empty h3{font-family:'Playfair Display',serif;font-size:18px;font-weight:600;color:var(--text);margin-bottom:6px;}
.empty p{font-size:13px;color:var(--text2);}

/* ─── FORM REQUIRED ─────────────────────────────────────── */
.form-label.req::after{content:' *';color:var(--primary);font-weight:700;}
.form-control:invalid:not(:placeholder-shown){border-color:#e57373;}

/* ─── NOTIFICATION PANEL ─────────────────────────────── */
#notifPanel{transition:opacity 0.2s ease;}

/* ─── FOCUS STYLES ────────────────────────────────────── */
.nav-item:focus-visible,.action-btn:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible,.quick-btn:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;
}
button:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

/* ─── COLOR PICKER ─────────────────────────────────────── */
.color-swatches{display:flex;gap:10px;flex-wrap:wrap;}
.swatch{
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:3px solid transparent;transition:var(--transition);
}
.swatch.selected,.swatch:hover{border-color:var(--text);transform:scale(1.1);}

/* ─── TOAST ─────────────────────────────────────────── */
.toast-wrap{
  position:fixed;bottom:24px;right:24px;
  z-index:500;display:flex;flex-direction:column;gap:8px;
}
.toast{
  background:var(--text);color:#fff;
  padding:12px 18px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
  animation:toastIn 0.3s ease,toastOut 0.3s ease 2.7s forwards;
  max-width:320px;
}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
@keyframes toastOut{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(20px);}}
.toast.success{background:linear-gradient(135deg,#388e3c,#2e7d32);}
.toast.error{background:linear-gradient(135deg,#e53935,#c62828);}
.toast svg{width:15px;height:15px;flex-shrink:0;}

/* ─── ONBOARDING ─────────────────────────────────────── */
.welcome-hero{
  background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
  border-radius:var(--radius);padding:32px;color:#fff;
  margin-bottom:24px;position:relative;overflow:hidden;
}
.welcome-hero::before{
  content:'✦';position:absolute;top:-10px;right:30px;
  font-size:120px;opacity:0.06;
}
.welcome-hero h2{
  font-family:'Playfair Display',serif;
  font-size:26px;font-weight:700;margin-bottom:6px;
}
.welcome-hero p{font-size:14px;opacity:0.85;}
.quick-actions{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-bottom:24px;
}
.quick-btn{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:16px;
  text-align:center;cursor:pointer;transition:var(--transition);
}
.quick-btn:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow);}
.quick-btn svg{
  width:22px;height:22px;margin:0 auto 8px;display:block;
  color:var(--primary);
}
.quick-btn span{font-size:12px;font-weight:600;color:var(--text2);}

/* ─── SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--text3);}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:1100px){
  /* ── ORIGINAL (inalterado) ── */
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .quick-actions{grid-template-columns:repeat(2,1fr);}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .finance-summary{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  /* ── ORIGINAL (inalterado) ── */
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .menu-toggle{display:flex;}
  .page{padding:20px 16px;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .topbar{padding:0 16px;}
  .page-title{font-size:18px;}
  .week-grid{overflow-x:auto;}
  .finance-summary{grid-template-columns:1fr;}
  /* ── ADIÇÕES ≤768px — apenas acrescentam, não sobrescrevem nada acima ── */
  .action-btn{min-width:36px;min-height:36px;}
  .action-btn svg{pointer-events:none;}
  .item-left{min-width:0;flex:1;}
  .item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
  .item-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
  .modal-body{padding:16px 20px 20px;}
  .modal-header{padding:20px 20px 0;}
  .search-bar{max-width:100%;width:100%;}
  .tabs{flex-wrap:wrap;}
  button,.action-btn,.nav-item,.quick-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
}
@media(max-width:480px){
  /* ── ORIGINAL (inalterado) ── */
  .stats-grid{grid-template-columns:1fr;}
  /* ── ADIÇÕES ≤480px — apenas acrescentam, não sobrescrevem nada acima ── */
  .action-btn{min-width:40px;min-height:40px;}
  .item-card{flex-wrap:wrap;row-gap:10px;}
  .item-left{width:100%;}
  .agenda-header{flex-direction:column;align-items:stretch;gap:10px;}
  .agenda-header .date-display{min-width:0;}
  .agenda-header .filters{flex-wrap:wrap;margin:0;}
  .agenda-header > div:last-child{width:100%;}
  .modal-body{padding:14px 14px 18px;}
  .modal-header{padding:16px 14px 0;}
  .modal{border-radius:14px;}
  .btn-primary,.btn-secondary{padding:9px 14px;font-size:13px;}
  thead th{padding:8px 8px;font-size:10px;}
  tbody td{padding:10px 8px;font-size:12px;}
}

/* ─── SIDEBAR OVERLAY (MOBILE) ────────────────────────── */
.sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.4);z-index:99;
}
.sidebar-overlay.open{display:block;}

/* ─── PRINT / PDF ─────────────────────────────────────── */
@media print{
  .sidebar,.topbar,.no-print{display:none!important;}
  .main{margin:0;}
  .page{display:block!important;padding:20px;}
  .overlay{display:none!important;}
  #modalVerOrc{display:block!important;position:static!important;background:none!important;padding:0!important;}
  #modalVerOrc .modal{box-shadow:none!important;max-width:100%!important;max-height:none!important;overflow:visible!important;}
  #modalVerOrc .modal-header{display:none!important;}
}

/* ─── CONFIG SECTION ─────────────────────────────────── */
.config-section{
  background:var(--card);border-radius:var(--radius);
  border:1px solid var(--border);padding:24px;
  margin-bottom:16px;
}
.config-title{
  font-family:'Playfair Display',serif;
  font-size:16px;font-weight:600;color:var(--text);
  margin-bottom:16px;display:flex;align-items:center;gap:8px;
}
.config-title svg{width:18px;height:18px;color:var(--primary);}

/* ─── MINI CALENDAR ─────────────────────────────────── */
.mini-cal{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;}
.mini-cal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
}
.mini-cal-nav{
  display:flex;gap:6px;
}
.mini-cal-nav button{
  width:28px;height:28px;border-radius:6px;
  background:var(--bg);border:1px solid var(--border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text2);font-size:13px;transition:var(--transition);
}
.mini-cal-nav button:hover{border-color:var(--primary);color:var(--primary);}
.mini-cal-grid{padding:12px;}
.cal-days-header{
  display:grid;grid-template-columns:repeat(7,1fr);
  margin-bottom:4px;
}
.cal-day-name{
  text-align:center;font-size:10px;font-weight:600;
  color:var(--text3);padding:4px 0;
}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:12px;border-radius:6px;cursor:pointer;
  transition:var(--transition);color:var(--text);
}
.cal-day:hover{background:var(--primary-light);color:var(--primary-dark);}
.cal-day.today{background:var(--primary);color:#fff;font-weight:700;}
.cal-day.has-appt{position:relative;}
.cal-day.has-appt::after{
  content:'';position:absolute;bottom:3px;
  width:4px;height:4px;border-radius:50%;background:var(--secondary);
}
.cal-day.other-month{color:var(--text3);}
.cal-day.selected{background:var(--primary-light);color:var(--primary-dark);font-weight:600;}

/* ─── TODAY AGENDA ─────────────────────────────────────── */
.today-slot{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;
  border-left:3px solid var(--primary);
  background:var(--bg);border-radius:0 var(--radius-xs) var(--radius-xs) 0;
  margin-bottom:6px;
}
.today-slot-time{font-size:12px;font-weight:700;color:var(--text2);min-width:45px;}
.today-slot-name{font-size:13px;font-weight:600;color:var(--text);}
.today-slot-service{font-size:11px;color:var(--text2);}
.today-slot-price{font-size:13px;font-weight:700;color:var(--accent);margin-left:auto;}

/* ─── LOADING SKELETON ─────────────────────────────────── */
.skeleton{
  background:linear-gradient(90deg,var(--bg) 25%,var(--border) 50%,var(--bg) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:6px;
}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ─── CLIENT HISTORY ─────────────────────────────────── */
.history-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.history-item:last-child{border-bottom:none;}
.history-date{font-size:11px;color:var(--text2);min-width:80px;}
.history-service{font-size:13px;font-weight:600;color:var(--text);}
.history-value{font-size:13px;font-weight:700;color:var(--accent);margin-left:auto;}

/* ─── NOTIFICATIONS PANEL ────────────────────────────── */
.notif-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--primary);flex-shrink:0;
  margin-top:4px;
}
.notif-item{
  display:flex;gap:10px;padding:12px 0;
  border-bottom:1px solid var(--border);
}
.notif-item:last-child{border-bottom:none;}
.notif-text{font-size:13px;color:var(--text);}
.notif-time{font-size:11px;color:var(--text3);margin-top:2px;}

/*---------------GUIA DO USUARIO------------------*/
.btn-guia {
    text-decoration: none;
    background: #ffffff;
    color: #864ef7;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    margin-right: 12px;
    transition: all 0.2s ease;
}

.btn-guia:hover {
    background: #f3f0ff;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
  .btn-guia {
    font-size: 10px;
    padding: 4px 6px;
    margin-right: 0px;
    white-space: nowrap;
    align-self: center;
  }
  .topbar-right {
    gap: 4px;
  }
}



/* ═══════════════════════════════════════════════════════════════════
   PWA — Adições para excelência em dispositivos móveis e instalado
   Nenhuma regra existente foi alterada; apenas adições ao final.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Safe Area (notch / Dynamic Island / barra Android) ─────────── */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Topbar respeita notch quando o app está instalado (standalone) */
@media all and (display-mode: standalone) {
  .topbar {
    padding-top: max(0px, env(safe-area-inset-top, 0px));
    height: calc(68px + env(safe-area-inset-top, 0px));
  }
  /* Sidebar também respeita o safe-area lateral em iPads e telefones landscape */
  .sidebar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }
  /* Toast fica acima da home bar no iPhone */
  .toast-wrap {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  /* Banner de instalação não aparece quando já está instalado */
  #pwaInstallBanner {
    display: none !important;
  }
}

/* ── Tap targets mínimos 44px (WCAG + Apple HIG) ────────────────── */
@media (max-width: 768px) {
  .action-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .date-nav button {
    min-width: 44px;
    min-height: 44px;
  }
  .topbar-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }
  .nav-item {
    min-height: 44px;
  }
  /* Evita zoom indesejado em inputs no iOS */
  .form-control,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="date"],
  input[type="time"],
  input[type="month"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── Overscroll behavior para feel nativo ────────────────────────── */
html {
  overscroll-behavior-y: none;
}
.sidebar-nav,
.modal,
.item-list,
.table-wrap {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Seleção de texto desativada em elementos de UI ─────────────── */
.nav-item,
.quick-btn,
.filter-chip,
.action-btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.tab,
.topbar-btn,
.stat-card {
  -webkit-user-select: none;
  user-select: none;
}

/* ── Transições suaves na troca de página (SPA feel) ────────────── */
.page {
  -webkit-animation: none;
  animation: none;
}
.page.active {
  animation: pageIn 0.2s ease both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Splash screen / loading state ──────────────────────────────── */
@media all and (display-mode: standalone) {
  body::before {
    content: none;
  }
}

/* ── Scrollbar oculta no mobile (mas funcional) ─────────────────── */
@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 0; height: 0; }
}

/* ── Melhorias de legibilidade no mobile ────────────────────────── */
@media (max-width: 480px) {
  .welcome-hero h2 { font-size: 22px; }
  .card-title      { font-size: 15px; }
  .stat-value      { font-size: 24px; }
  .modal-title     { font-size: 18px; }
  /* Orçamento preview no mobile */
  .budget-preview  { padding: 20px 16px; }
  .budget-total .total-amount { font-size: 18px; }
}

/* ── Botão Guia do Usuário — responsivo no modo instalado ────────── */
@media (max-width: 480px) {
  .btn-guia {
    font-size: 12px;
    padding: 7px 10px;
    margin-right: 6px;
  }
}

/* ── Cor primária personalizada reflete no theme-color ───────────── */
/* (via JS que atualiza a meta tag; regra apenas documental) */