/* ─── Variáveis ─────────────────────────────────────────────────────────── */
:root {
  --primary: #7c3aed;
  --primary-d: #5b21b6;
  --primary-l: #ede9fe;
  --secondary: #0d9488;
  --secondary-l: #ccfbf1;
  --accent: #d97706;
  --accent-l: #fef3c7;
  --danger: #dc2626;
  --danger-l: #fee2e2;
  --success: #16a34a;
  --success-l: #dcfce7;
  --warn: #d97706;
  --warn-l: #fef3c7;
  --bg: #f5f3ff;
  --surface: #ffffff;
  --border: #e5e7eb;
  --text: #1e1b4b;
  --muted: #6b7280;
  --light: #9ca3af;
  --sidebar-w: 240px;
  --radius: 12px;
  --radius-s: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font:inherit; border:none; background:none; }
input,select,textarea { font:inherit; }
img { max-width:100%; }

/* ─── Auth screens ───────────────────────────────────────────────────────── */
.auth-screen {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(124,58,237,.55) 0%, transparent 50%),
    radial-gradient(ellipse at 88% 78%, rgba(8,145,178,.4)  0%, transparent 50%),
    radial-gradient(ellipse at 75% 5%,  rgba(236,72,153,.3) 0%, transparent 40%),
    radial-gradient(ellipse at 5%  90%, rgba(16,185,129,.2) 0%, transparent 35%),
    linear-gradient(160deg, #0a0518 0%, #100336 40%, #040f1e 100%);
  padding:1rem; position:relative; overflow:hidden;
  animation:aurora-shift 18s ease-in-out infinite;
}
@keyframes aurora-shift {
  0%,100% { filter:hue-rotate(0deg) brightness(1); }
  50%      { filter:hue-rotate(25deg) brightness(1.08); }
}

/* Ambient orbs — bigger, more colorful */
.auth-orb { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; animation:orb-drift ease-in-out infinite; }
.auth-orb-1 { width:500px; height:500px; background:rgba(124,58,237,.28); top:-130px; left:-130px; animation-duration:13s; }
.auth-orb-2 { width:400px; height:400px; background:rgba(8,145,178,.22); bottom:-80px; right:-80px; animation-duration:16s; animation-delay:-6s; }
.auth-orb-3 { width:280px; height:280px; background:rgba(236,72,153,.18); top:40%; left:60%; animation-duration:20s; animation-delay:-10s; }
@keyframes orb-drift {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(35px,-40px) scale(1.1); }
  66%      { transform:translate(-28px,28px) scale(.91); }
}

/* Floating mystical particles — larger + glow */
.auth-particle {
  position:absolute; pointer-events:none;
  animation:particle-rise linear infinite; opacity:0;
  will-change:transform,opacity;
  filter:drop-shadow(0 0 6px currentColor);
}
@keyframes particle-rise {
  0%   { transform:translateY(105vh) rotate(0deg) scale(.7);   opacity:0; }
  6%   { opacity:.7; }
  85%  { opacity:.5; }
  100% { transform:translateY(-100px) rotate(400deg) scale(1.2); opacity:0; }
}
.p1  { left:4%;  font-size:1.8rem; animation-duration:13s; animation-delay:0s;   }
.p2  { left:13%; font-size:1.1rem; animation-duration:17s; animation-delay:-4s;  }
.p3  { left:24%; font-size:2.2rem; animation-duration:11s; animation-delay:-8s;  }
.p4  { left:38%; font-size:1rem;   animation-duration:15s; animation-delay:-2s;  }
.p5  { left:52%; font-size:1.9rem; animation-duration:10s; animation-delay:-6s;  }
.p6  { left:64%; font-size:.9rem;  animation-duration:18s; animation-delay:-3s;  }
.p7  { left:75%; font-size:1.5rem; animation-duration:12s; animation-delay:-9s;  }
.p8  { left:85%; font-size:2.4rem; animation-duration:16s; animation-delay:-1s;  }
.p9  { left:92%; font-size:1.2rem; animation-duration:14s; animation-delay:-7s;  }
.p10 { left:30%; font-size:1.6rem; animation-duration:20s; animation-delay:-5s;  }

/* ── Card glowing border (rotating halo) ── */
.auth-box-wrap {
  position:relative; z-index:2;
  padding:2px; border-radius:30px;
  animation:card-enter .65s cubic-bezier(.34,1.56,.64,1) both;
}
.auth-box-wrap::before {
  content:''; position:absolute; inset:-1px; border-radius:31px;
  background:conic-gradient(from 0deg, #7c3aed, #ec4899, #06b6d4, #10b981, #d97706, #7c3aed);
  animation:halo-spin 5s linear infinite;
  opacity:.7;
  filter:blur(2px);
}
@keyframes halo-spin { to { transform:rotate(360deg); } }

/* Card glassmorphism */
.auth-box {
  background:rgba(10,5,30,.72);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  box-shadow:
    0 40px 80px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(255,255,255,.04);
  padding:2.5rem; width:100%; max-width:420px;
  position:relative; z-index:1;
  animation:card-glow 6s ease-in-out infinite;
}
@keyframes card-enter {
  from { opacity:0; transform:translateY(45px) scale(.93); }
  to   { opacity:1; transform:none; }
}
@keyframes card-glow {
  0%,100% { box-shadow:0 40px 80px rgba(0,0,0,.65), 0 0 60px rgba(124,58,237,.3),  inset 0 1px 0 rgba(255,255,255,.15); }
  33%      { box-shadow:0 40px 80px rgba(0,0,0,.65), 0 0 70px rgba(236,72,153,.28), inset 0 1px 0 rgba(255,255,255,.15); }
  66%      { box-shadow:0 40px 80px rgba(0,0,0,.65), 0 0 65px rgba(6,182,212,.25),  inset 0 1px 0 rgba(255,255,255,.15); }
}

/* Logo */
.auth-logo { text-align:center; margin-bottom:1.75rem; }
.auth-icon-wrap {
  display:inline-flex; align-items:center; justify-content:center;
  width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, rgba(192,132,252,.5), rgba(8,145,178,.25));
  box-shadow:0 0 40px rgba(192,132,252,.6), 0 0 80px rgba(124,58,237,.3), inset 0 0 25px rgba(255,255,255,.08);
  margin-bottom:.85rem; position:relative;
  animation:icon-breathe 4s ease-in-out infinite;
}
/* Orbital rings */
.auth-icon-wrap::before {
  content:''; position:absolute; inset:-14px; border-radius:50%;
  border:1.5px solid rgba(192,132,252,.45);
  border-top-color:transparent; border-right-color:transparent;
  animation:orbit-cw 7s linear infinite;
}
.auth-icon-wrap::after {
  content:''; position:absolute; inset:-24px; border-radius:50%;
  border:1px solid rgba(6,182,212,.35);
  border-bottom-color:transparent; border-left-color:transparent;
  animation:orbit-ccw 11s linear infinite;
}
@keyframes orbit-cw  { to { transform:rotate(360deg); } }
@keyframes orbit-ccw { to { transform:rotate(-360deg); } }
@keyframes icon-breathe {
  0%,100% { transform:scale(1);    box-shadow:0 0 40px rgba(192,132,252,.6), 0 0 80px rgba(124,58,237,.3), inset 0 0 25px rgba(255,255,255,.08); }
  50%      { transform:scale(1.07); box-shadow:0 0 65px rgba(192,132,252,.8), 0 0 110px rgba(124,58,237,.4), inset 0 0 35px rgba(255,255,255,.1); }
}
.auth-logo .icon { font-size:3rem; }
.auth-logo h1 {
  font-size:1.75rem; font-weight:800; letter-spacing:-.03em; margin-top:.3rem;
  background:linear-gradient(135deg, #e9d5ff 0%, #c084fc 30%, #67e8f9 65%, #6ee7b7 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.auth-logo p { color:rgba(216,180,254,.65); font-size:.875rem; margin-top:.3rem; letter-spacing:.05em; text-transform:uppercase; font-weight:500; }

/* Twinkling stars row */
.auth-stars { display:flex; justify-content:center; gap:.6rem; margin-top:.7rem; }
.auth-star { font-size:.8rem; color:#fbbf24; text-shadow:0 0 8px rgba(251,191,36,.8); animation:star-twinkle 2s ease-in-out infinite; }
.auth-star:nth-child(2){ animation-delay:.4s; }
.auth-star:nth-child(3){ animation-delay:.8s; }
.auth-star:nth-child(4){ animation-delay:1.2s; }
.auth-star:nth-child(5){ animation-delay:1.6s; }
@keyframes star-twinkle {
  0%,100% { opacity:.35; transform:scale(.9); }
  50%      { opacity:1;   transform:scale(1.5); }
}

/* Divider */
.auth-divider { display:flex; align-items:center; gap:.75rem; margin:.5rem 0 1.25rem; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(192,132,252,.3), transparent); }
.auth-divider span { font-size:.7rem; color:rgba(196,181,253,.4); letter-spacing:.1em; text-transform:uppercase; }

/* Form labels */
.auth-box .form-group { margin-bottom:1.1rem; }
.auth-box .form-group label { color:rgba(216,180,254,.9); font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; display:block; margin-bottom:.4rem; }

/* ── Input fix (ID selectors beat global styles) ── */
#view-login input, #view-setup input {
  width:100%; padding:.75rem 1rem;
  background:rgba(255,255,255,.06) !important;
  border:1.5px solid rgba(192,132,252,.25) !important;
  border-radius:12px; color:#f3f4f6 !important; font-size:.95rem;
  transition:all .25s; outline:none;
}
#view-login input::placeholder, #view-setup input::placeholder { color:rgba(156,163,175,.4) !important; }
#view-login input:focus, #view-setup input:focus {
  border-color:rgba(192,132,252,.7) !important;
  background:rgba(192,132,252,.1) !important;
  box-shadow:0 0 0 3px rgba(192,132,252,.18), 0 0 24px rgba(192,132,252,.12) !important;
}

/* Submit button */
.auth-box .btn-primary {
  background:linear-gradient(135deg, #6d28d9 0%, #7c3aed 40%, #0891b2 100%);
  box-shadow:0 4px 24px rgba(124,58,237,.5), 0 0 40px rgba(124,58,237,.2);
  border:none; color:#fff; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:.9rem; padding:.85rem; border-radius:12px;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  position:relative; overflow:hidden;
}
.auth-box .btn-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%);
  transform:translateX(-100%); animation:shimmer 3s ease-in-out infinite;
}
@keyframes shimmer { 60%,100% { transform:translateX(150%); } }
.auth-box .btn-primary:hover { transform:translateY(-3px) scale(1.01); box-shadow:0 10px 40px rgba(124,58,237,.65), 0 0 60px rgba(124,58,237,.3); }
.auth-box .btn-primary:active { transform:none; }

/* Auth footer link */
.auth-link { text-align:center; margin-top:1.5rem; font-size:.85rem; }
.auth-link a { color:rgba(167,243,208,.8) !important; transition:color .2s; }
.auth-link a:hover { color:#6ee7b7 !important; text-shadow:0 0 12px rgba(110,231,183,.5); }

/* ─── Layout ─────────────────────────────────────────────────────────────── */
#layout { display:flex; min-height:100vh; }

/* Sidebar */
#sidebar {
  width:var(--sidebar-w); background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:fixed; top:0; left:0; height:100vh;
  z-index:100; transition:transform .25s;
}
.sidebar-logo {
  padding:1.25rem 1.5rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:.75rem;
}
.sidebar-logo .icon { font-size:1.75rem; }
.sidebar-logo .name { font-weight:700; font-size:1rem; color:var(--primary); line-height:1.2; }
.sidebar-logo .tagline { font-size:.7rem; color:var(--muted); }
.sidebar-nav { flex:1; overflow-y:auto; padding:.75rem 0; }
.sidebar-nav a {
  display:flex; align-items:center; gap:.75rem; padding:.7rem 1.5rem;
  color:var(--muted); font-size:.9rem; font-weight:500; transition:all .15s; border-radius:0;
}
.sidebar-nav a:hover { background:var(--primary-l); color:var(--primary); }
.sidebar-nav a.active { background:var(--primary-l); color:var(--primary); font-weight:600; }
.sidebar-nav a .nav-icon { font-size:1.1rem; width:20px; text-align:center; }
.sidebar-footer {
  padding:1rem 1.5rem; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:.75rem;
}
.sidebar-footer .avatar {
  width:32px; height:32px; border-radius:50%; background:var(--primary-l);
  display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
}
.sidebar-footer .user-info { flex:1; min-width:0; }
.sidebar-footer .user-name { font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-footer .user-role { font-size:.7rem; color:var(--muted); }
.sidebar-footer .logout-btn { color:var(--muted); font-size:1rem; padding:.25rem; border-radius:6px; }
.sidebar-footer .logout-btn:hover { background:var(--danger-l); color:var(--danger); }

/* Main content area */
#main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }

/* Top header (desktop hidden, mobile shown) */
#topbar {
  display:none; align-items:center; gap:1rem; padding:.75rem 1rem;
  background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:90;
}
#topbar .menu-btn { font-size:1.4rem; color:var(--muted); }
#topbar .page-title { font-weight:700; font-size:1.1rem; flex:1; }

/* Views */
.view { display:none; padding:1.5rem; flex:1; animation:fadeIn .2s; }
.view.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* View header */
.view-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem; }
.view-header h2 { font-size:1.4rem; font-weight:700; }
.view-header .subtitle { color:var(--muted); font-size:.9rem; }

/* ─── Cards / KPI ────────────────────────────────────────────────────────── */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.card {
  background:var(--surface); border-radius:var(--radius); padding:1.25rem;
  box-shadow:var(--shadow); border:1px solid var(--border);
}
.card-kpi { display:flex; flex-direction:column; gap:.25rem; }
.card-kpi .kpi-label { font-size:.8rem; color:var(--muted); font-weight:500; display:flex; align-items:center; gap:.4rem; }
.card-kpi .kpi-value { font-size:1.8rem; font-weight:800; color:var(--text); }
.card-kpi .kpi-sub { font-size:.75rem; color:var(--muted); }

/* ─── Tabela ─────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:var(--radius); box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; background:var(--surface); font-size:.9rem; }
th { padding:.75rem 1rem; text-align:left; font-weight:600; color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); background:#fafafa; }
td { padding:.75rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:#fafafe; }

/* ─── Forms ──────────────────────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.form-group label { font-size:.85rem; font-weight:600; color:var(--text); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],
input[type=number],input[type=password],select,textarea {
  width:100%; padding:.65rem .9rem; border:1.5px solid var(--border); border-radius:var(--radius-s);
  font-size:.9rem; color:var(--text); background:var(--surface); transition:border-color .15s;
}
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
textarea { resize:vertical; min-height:80px; }
.search-bar {
  display:flex; gap:.75rem; margin-bottom:1rem; align-items:center; flex-wrap:wrap;
}
.search-bar input { flex:1; min-width:200px; }
.color-picker-row { display:flex; align-items:center; gap:.75rem; }
.color-picker-row input[type=color] { width:40px; height:38px; border-radius:var(--radius-s); border:1.5px solid var(--border); padding:2px; cursor:pointer; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.2rem; border-radius:var(--radius-s); font-weight:600; font-size:.9rem; transition:all .15s; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-d); }
.btn-secondary { background:var(--primary-l); color:var(--primary); }
.btn-secondary:hover { background:#ddd6fe; }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#15803d; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#b91c1c; }
.btn-ghost { background:transparent; color:var(--muted); border:1.5px solid var(--border); }
.btn-ghost:hover { background:var(--bg); color:var(--text); }
.btn-sm { padding:.4rem .75rem; font-size:.8rem; }
.btn-icon { padding:.5rem; border-radius:var(--radius-s); }
.btn-icon:hover { background:var(--bg); }
.btns-row { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .65rem; border-radius:99px; font-size:.75rem; font-weight:600; }
.badge-agendado   { background:#e0f2fe; color:#0369a1; }
.badge-confirmado { background:var(--secondary-l); color:#0f766e; }
.badge-concluido  { background:var(--success-l); color:var(--success); }
.badge-cancelado  { background:#f3f4f6; color:var(--muted); }
.badge-falta      { background:var(--danger-l); color:var(--danger); }
.badge-online     { background:var(--accent-l); color:var(--accent); }
.badge-pago       { background:var(--success-l); color:var(--success); }
.badge-pendente   { background:var(--warn-l); color:var(--warn); }

/* ─── Agenda / Calendário ─────────────────────────────────────────────────── */
.agenda-controls {
  display:flex; align-items:center; gap:1rem; margin-bottom:1rem; flex-wrap:wrap;
}
.agenda-controls .nav-group { display:flex; align-items:center; gap:.5rem; }
.agenda-controls .period-label { font-weight:700; font-size:1rem; min-width:200px; }
.agenda-tabs { display:flex; background:var(--bg); border-radius:var(--radius-s); padding:3px; gap:2px; }
.agenda-tabs button { padding:.4rem .9rem; border-radius:6px; font-size:.85rem; color:var(--muted); font-weight:500; transition:all .15s; }
.agenda-tabs button.active { background:var(--surface); color:var(--primary); font-weight:700; box-shadow:var(--shadow); }
.week-grid { display:flex; overflow:auto; border-radius:var(--radius); box-shadow:var(--shadow); background:var(--surface); border:1px solid var(--border); }
.week-hours { width:56px; flex-shrink:0; border-right:1px solid var(--border); padding-top:44px; }
.week-hour-label { height:60px; font-size:.72rem; color:var(--muted); padding:.25rem .5rem; text-align:right; border-bottom:1px solid #f3f4f6; }
.week-days { flex:1; display:flex; min-width:0; }
.week-day { flex:1; display:flex; flex-direction:column; border-right:1px solid var(--border); min-width:100px; }
.week-day:last-child { border-right:none; }
.week-day-header {
  text-align:center; padding:.5rem .25rem; border-bottom:1px solid var(--border);
  font-size:.8rem; font-weight:600; position:sticky; top:0; background:var(--surface); z-index:2;
}
.week-day-header .day-num { font-size:1.1rem; font-weight:700; margin-bottom:.1rem; }
.week-day-header.today .day-num { background:var(--primary); color:#fff; border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; margin:0 auto .1rem; }
.week-day-slots { position:relative; }
.week-slot { height:60px; border-bottom:1px solid #f3f4f6; cursor:pointer; transition:background .1s; }
.week-slot:hover { background:var(--primary-l); }
.week-appointment {
  position:absolute; left:2px; right:2px; border-radius:6px; padding:.2rem .4rem;
  font-size:.72rem; font-weight:600; color:#fff; overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow); transition:opacity .15s; z-index:1;
}
.week-appointment:hover { opacity:.9; }
.week-appointment .appt-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.week-appointment .appt-service { opacity:.85; font-weight:400; }

/* Day list view */
.day-list { display:flex; flex-direction:column; gap:.5rem; }
.day-slot-item {
  background:var(--surface); border-radius:var(--radius-s); padding:.75rem 1rem;
  display:flex; align-items:center; gap:1rem; box-shadow:var(--shadow); cursor:pointer;
  border-left:4px solid var(--border); transition:transform .1s;
}
.day-slot-item:hover { transform:translateX(2px); }
.day-slot-time { font-weight:700; font-size:.95rem; min-width:90px; }
.day-slot-info { flex:1; min-width:0; }
.day-slot-info .client { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.day-slot-info .service { font-size:.8rem; color:var(--muted); }
.day-slot-actions { display:flex; gap:.5rem; }

/* ─── Clientes ───────────────────────────────────────────────────────────── */
.clients-layout { display:grid; grid-template-columns:340px 1fr; gap:1rem; }
.client-list-panel { display:flex; flex-direction:column; gap:.5rem; max-height:calc(100vh - 160px); overflow-y:auto; }
.client-item {
  background:var(--surface); border-radius:var(--radius-s); padding:.85rem 1rem;
  display:flex; align-items:center; gap:.85rem; box-shadow:var(--shadow); cursor:pointer;
  border:1.5px solid transparent; transition:border-color .15s;
}
.client-item:hover { border-color:var(--primary-l); }
.client-item.active { border-color:var(--primary); background:var(--primary-l); }
.client-avatar {
  width:40px; height:40px; border-radius:50%; background:var(--primary-l);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700;
  color:var(--primary); flex-shrink:0;
}
.client-info { flex:1; min-width:0; }
.client-info .name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.client-info .meta { font-size:.78rem; color:var(--muted); }
.client-detail-panel { background:var(--surface); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); min-height:300px; }
.client-detail-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:200px; color:var(--muted); gap:.75rem; }
.client-detail-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border); }
.client-detail-avatar { width:56px; height:56px; border-radius:50%; background:var(--primary-l); display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; color:var(--primary); flex-shrink:0; }
.client-detail-name { font-size:1.2rem; font-weight:700; }
.client-detail-meta { font-size:.85rem; color:var(--muted); }
.client-detail-contact { display:flex; gap:1rem; flex-wrap:wrap; margin-top:.5rem; }
.client-detail-contact a { font-size:.85rem; color:var(--primary); display:flex; align-items:center; gap:.3rem; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem 1.5rem; margin-bottom:1.5rem; }
.info-item .il { font-size:.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.info-item .iv { font-size:.9rem; margin-top:.15rem; }
.section-title { font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:1.25rem 0 .75rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.session-history { display:flex; flex-direction:column; gap:.5rem; }
.session-item { display:flex; align-items:center; gap:.75rem; padding:.6rem .9rem; border-radius:var(--radius-s); background:var(--bg); font-size:.85rem; cursor:pointer; }
.session-item:hover { background:var(--primary-l); }
.session-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.session-date { font-weight:600; min-width:80px; }
.session-info { flex:1; color:var(--muted); }

/* ─── Serviços ───────────────────────────────────────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.service-card { background:var(--surface); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); border:1px solid var(--border); display:flex; flex-direction:column; gap:.75rem; }
.service-card-header { display:flex; align-items:center; gap:.75rem; }
.service-color-dot { width:16px; height:16px; border-radius:50%; flex-shrink:0; }
.service-card-name { font-weight:700; font-size:1rem; flex:1; }
.service-card-desc { font-size:.85rem; color:var(--muted); line-height:1.5; }
.service-card-meta { display:flex; gap:1rem; font-size:.85rem; }
.service-card-meta .meta-item { display:flex; align-items:center; gap:.3rem; color:var(--muted); }
.service-card-meta .meta-value { font-weight:700; color:var(--text); }
.service-card-actions { display:flex; gap:.5rem; margin-top:auto; }

/* ─── Financeiro ─────────────────────────────────────────────────────────── */
.fin-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }
.fin-card { background:var(--surface); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); border-left:4px solid var(--border); }
.fin-card.total { border-left-color:var(--primary); }
.fin-card.pago { border-left-color:var(--success); }
.fin-card.pendente { border-left-color:var(--warn); }
.fin-card .label { font-size:.8rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.fin-card .value { font-size:1.6rem; font-weight:800; margin-top:.25rem; }
.fin-filters { display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; margin-bottom:1rem; }
.fin-filters .form-group { margin:0; }
.fin-filters label { font-size:.8rem; }
.fin-filters input { width:160px; }

/* ─── Config ─────────────────────────────────────────────────────────────── */
.config-section { background:var(--surface); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); margin-bottom:1.5rem; }
.config-section h3 { font-size:1rem; font-weight:700; margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.5rem; }
.disponibilidade-table { width:100%; border-collapse:collapse; }
.disponibilidade-table th,.disponibilidade-table td { padding:.6rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.9rem; }
.disponibilidade-table th { font-weight:600; color:var(--muted); font-size:.8rem; text-transform:uppercase; }
.bloqueios-list { display:flex; flex-direction:column; gap:.5rem; }
.bloqueio-item { display:flex; align-items:center; gap:.75rem; padding:.6rem .9rem; background:var(--bg); border-radius:var(--radius-s); font-size:.85rem; }
.bloqueio-item .bl-date { font-weight:700; min-width:90px; }
.bloqueio-item .bl-motivo { flex:1; color:var(--muted); }

/* ─── Modal ──────────────────────────────────────────────────────────────── */
#modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex;
  align-items:center; justify-content:center; z-index:1000; padding:1rem;
  backdrop-filter:blur(2px); animation:fadeIn .15s;
}
.modal-box {
  background:var(--surface); border-radius:20px; width:100%; max-width:560px;
  max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg);
  animation:slideUp .2s;
}
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); z-index:1; }
.modal-header h3 { font-size:1.1rem; font-weight:700; }
.modal-close { font-size:1.4rem; color:var(--muted); padding:.25rem; border-radius:var(--radius-s); }
.modal-close:hover { background:var(--bg); color:var(--text); }
.modal-body { padding:1.5rem; }
.modal-footer { display:flex; gap:.75rem; justify-content:flex-end; padding:1rem 1.5rem; border-top:1px solid var(--border); position:sticky; bottom:0; background:var(--surface); }
.whatsapp-link { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; background:#25d366; color:#fff; border-radius:var(--radius-s); font-size:.85rem; font-weight:600; }
.whatsapp-link:hover { background:#1ebe5d; }

/* ─── Toast ──────────────────────────────────────────────────────────────── */
#toast {
  position:fixed; bottom:1.5rem; right:1.5rem; padding:.85rem 1.25rem;
  border-radius:var(--radius-s); font-weight:600; font-size:.9rem;
  color:#fff; background:#1e1b4b; box-shadow:var(--shadow-lg);
  transform:translateY(100px); opacity:0; transition:all .25s; z-index:2000; max-width:320px;
}
#toast.show { transform:none; opacity:1; }
#toast.success { background:var(--success); }
#toast.error { background:var(--danger); }
#toast.warn { background:var(--warn); }

/* ─── Empty / loading states ─────────────────────────────────────────────── */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1rem; gap:.75rem; color:var(--muted); text-align:center; }
.empty-state .empty-icon { font-size:3rem; }
.empty-state p { max-width:280px; line-height:1.5; }
.loading { display:flex; justify-content:center; padding:2rem; }
.spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ─── Mobile bottom nav ───────────────────────────────────────────────────── */
#bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; background:var(--surface);
  border-top:1px solid var(--border); padding:.5rem 0 calc(.5rem + env(safe-area-inset-bottom));
  z-index:100; justify-content:space-around;
}
#bottom-nav a { display:flex; flex-direction:column; align-items:center; gap:.2rem; color:var(--muted); font-size:.65rem; font-weight:600; padding:.3rem .5rem; border-radius:var(--radius-s); flex:1; }
#bottom-nav a.active { color:var(--primary); }
#bottom-nav a .bnav-icon { font-size:1.3rem; }
.mobile-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:99; }

/* ─── Sidebar overlay para mobile ────────────────────────────────────────── */
@media(max-width:768px) {
  #sidebar { transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  #sidebar.open { transform:none; }
  #main { margin-left:0; padding-bottom:70px; }
  #topbar { display:flex; }
  #bottom-nav { display:flex; }
  .mobile-overlay.show { display:block; }
  .clients-layout { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .fin-summary { grid-template-columns:1fr 1fr; }
  .week-day { min-width:80px; }
  .info-grid { grid-template-columns:1fr; }
  .fin-filters { flex-direction:column; align-items:stretch; }
  .fin-filters input { width:100%; }
}
@media(max-width:480px) {
  .cards-grid { grid-template-columns:1fr 1fr; }
  .fin-summary { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
}

/* ─── Cadastro — URL input ───────────────────────────────────────────────── */
.url-input-wrap { display:flex; align-items:stretch; border:1.5px solid rgba(192,132,252,.25); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.05); }
.url-prefix { font-size:.7rem; color:rgba(196,181,253,.5); background:rgba(255,255,255,.04); padding:.75rem .6rem; white-space:nowrap; border-right:1px solid rgba(192,132,252,.15); display:flex; align-items:center; }
.url-input-wrap input { flex:1; border:none !important; border-radius:0 !important; background:transparent !important; padding:.75rem .75rem !important; min-width:0; }
.url-input-wrap:focus-within { border-color:rgba(192,132,252,.7) !important; box-shadow:0 0 0 3px rgba(192,132,252,.15) !important; }
.slug-status { font-size:.78rem; margin-top:.35rem; min-height:1.1em; }
.slug-status.ok      { color:#6ee7b7; }
.slug-status.err     { color:#f87171; }
.slug-status.checking { color:rgba(196,181,253,.6); }
.auth-error { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:#fca5a5; border-radius:10px; padding:.65rem .9rem; font-size:.85rem; margin-bottom:.75rem; }

/* ─── Utilities ──────────────────────────────────────────────────────────── */
.hidden { display:none !important; }
.flex { display:flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.gap-1 { gap:.5rem; }
.gap-2 { gap:1rem; }
.mt-1 { margin-top:.5rem; }
.mt-2 { margin-top:1rem; }
.text-muted { color:var(--muted); }
.text-danger { color:var(--danger); }
.text-success { color:var(--success); }
.fw-700 { font-weight:700; }
.fs-sm { font-size:.85rem; }
.w-100 { width:100%; }
.separator { border:none; border-top:1px solid var(--border); margin:1rem 0; }