@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* =========================================================
   Tokens. A cor da clínica entra em --brand (definida em brand.js).
   ========================================================= */
:root{
  --brand: #1F6F63;
  --brand-ink: #FFFFFF;
  --mix: #FFFFFF;
  --brand-soft: color-mix(in srgb, var(--brand) 10%, var(--mix));
  --brand-tint: color-mix(in srgb, var(--brand) 18%, var(--mix));
  --brand-line: color-mix(in srgb, var(--brand) 35%, var(--mix));
  --brand-deep: color-mix(in srgb, var(--brand) 78%, #000000);

  --bg: #F1F3F1;
  --surface: #FFFFFF;
  --surface-2: #F7F8F7;
  --surface-3: #ECEFED;
  --ink: #17201E;
  --ink-2: #56625E;
  --ink-3: #8C9692;
  --line: #E1E5E2;
  --line-2: #CFD6D2;
  --danger: #A63A2B;

  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 7px;
  --focus: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);

  /* nomes antigos ainda usados em estilos inline */
  --ink-soft: var(--ink-2);
  --card: var(--surface);
  --ivory: var(--surface-2);
  --ivory-deep: var(--surface-3);
  --radius-card: var(--r-lg);
  --radius-sm: var(--r-sm);
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:14px;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:inherit; font-weight:650; margin:0; color:var(--ink); letter-spacing:-.012em;}
button{font-family:inherit; cursor:pointer; color:inherit; transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;}
input,select,textarea{font-family:inherit; color:inherit;}
a{color:var(--brand-deep);}
:focus-visible{outline:none; box-shadow:var(--focus);}
::selection{background:var(--brand-tint);}
.ic{width:19px; height:19px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }

/* ================= LOGIN ================= */
.login-shell{min-height:100vh; display:flex; background:var(--surface);}
.login-visual{
  flex:1.05; position:relative; overflow:hidden;
  background:var(--brand); color:var(--brand-ink);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:56px 60px;
}
.login-visual::after{
  content:""; position:absolute; right:-18%; bottom:-28%; width:70%; aspect-ratio:1;
  border-radius:50%; border:1px solid currentColor; opacity:.14; pointer-events:none;
}
.login-visual::before{
  content:""; position:absolute; right:-8%; bottom:-16%; width:46%; aspect-ratio:1;
  border-radius:50%; border:1px solid currentColor; opacity:.1; pointer-events:none;
}
.login-visual-content{position:relative; margin:auto 0; max-width:520px;}
.login-mark{width:64px; height:64px; border-radius:18px; overflow:hidden; margin-bottom:36px;
  background:color-mix(in srgb, var(--brand-ink) 14%, transparent); display:flex; align-items:center; justify-content:center;}
.login-logo{width:100%; height:100%; object-fit:cover;}
.login-mono{font-weight:700; font-size:22px; letter-spacing:.02em;}
.login-visual-title{font-size:clamp(40px, 5.2vw, 68px); line-height:1.02; font-weight:700; letter-spacing:-.035em; color:inherit; margin-bottom:16px;}
.login-visual-tag{font-size:17px; opacity:.82; margin:0; max-width:34ch;}
.login-visual-footer{position:relative; font-size:13px; opacity:.7;}

.login-form-panel{flex:1; display:flex; align-items:center; justify-content:center; padding:32px;}
.login-card{width:360px; max-width:100%;}
.login-card-head{margin-bottom:28px;}
.login-mark-mobile{display:none; width:48px; height:48px; border-radius:14px; margin-bottom:20px; background:var(--brand); color:var(--brand-ink);}
.login-mark-mobile .login-mono{font-size:17px;}
.login-card h1{font-size:26px; margin-bottom:8px;}
.login-card p{font-size:14px; color:var(--ink-2); margin:0;}
.demo-note{font-size:13px; background:var(--brand-soft); color:var(--brand-deep); border:1px solid var(--brand-line); border-radius:var(--r-md); padding:10px 12px; margin-bottom:18px;}
.hint{font-size:12.5px; color:var(--ink-2); margin-top:14px;}
.login-error{color:var(--danger);}

/* ================= APP SHELL ================= */
.app-shell{display:flex; min-height:100vh;}

.rail{
  width:212px; flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  padding:18px 12px;
  position:sticky; top:0; height:100vh;
}
.brand-row{display:flex; align-items:center; gap:11px; margin:0 4px 26px; min-height:40px;}
.brand-logo{width:38px; height:38px; border-radius:11px; object-fit:cover; flex-shrink:0;}
.rail .brand-mark{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  background:var(--brand); color:var(--brand-ink);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; letter-spacing:.02em;
}
.brand-name{font-weight:650; font-size:15px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.rail-nav{display:flex; flex-direction:column; gap:2px;}
.rail-btn{
  width:100%; height:40px; border-radius:var(--r-md); border:none;
  background:transparent; color:var(--ink-2);
  display:flex; align-items:center; gap:11px; padding:0 11px;
  font-size:14px; font-weight:500; text-align:left;
}
.rail-btn:hover{background:var(--surface-2); color:var(--ink);}
.rail-btn.active{background:var(--brand-soft); color:var(--brand-deep); font-weight:600;}
.rail-btn.active .ic{stroke-width:2;}
.rail-bottom{margin-top:auto; border-top:1px solid var(--line); padding-top:10px;}

.workspace{flex:1; display:flex; min-width:0; position:relative;}

/* ================= SIDE PANEL (agenda) ================= */
.side-panel{
  width:264px; flex-shrink:0;
  padding:20px 16px;
  border-right:1px solid var(--line);
  background:var(--surface-2);
  overflow-y:auto; height:100vh; position:sticky; top:0;
}
.mini-cal{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; margin-bottom:14px;}
.mini-cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.mini-cal-head .mtitle{font-size:14px; font-weight:600;}
.mini-cal-head .mtitle::first-letter{text-transform:uppercase;}
.mini-cal-nav{display:flex; gap:4px;}
.mini-cal-nav button{width:26px; height:26px; border:1px solid var(--line); background:var(--surface); border-radius:8px; font-size:12px; color:var(--ink-2);}
.mini-cal-nav button:hover{border-color:var(--line-2); color:var(--ink);}
.mini-cal table{width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums;}
.mini-cal th{color:var(--ink-3); font-weight:500; padding:4px 0; font-size:11px; text-transform:none; letter-spacing:0; border:none;}
.mini-cal td{text-align:center; padding:2px 0; border:none;}
.mini-cal tbody tr:hover{background:transparent;}
.mini-cal .day-cell{
  width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  margin:0 auto; cursor:pointer; color:var(--ink);
}
.mini-cal .day-cell:hover{background:var(--surface-3);}
.mini-cal .day-cell.muted{color:var(--ink-3); opacity:.6;}
.mini-cal .day-cell.in-week{background:var(--brand-soft);}
.mini-cal .day-cell.today{box-shadow:inset 0 0 0 1.5px var(--brand); font-weight:600;}
.mini-cal .day-cell.selected{background:var(--brand); color:var(--brand-ink); font-weight:600;}

.reminder-card{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:var(--r-lg); padding:14px 16px; margin-bottom:14px;
}
.reminder-card .rlabel{font-size:12px; color:var(--ink-2); margin-bottom:4px; font-weight:500;}
.reminder-card .rtitle{font-size:15px; font-weight:650; margin-bottom:2px;}
.reminder-card .rtime{font-size:13px; color:var(--brand-deep); font-weight:500; font-variant-numeric:tabular-nums;}
.reminder-card .rclient{font-size:13px; color:var(--ink-2); margin-top:6px;}

.filters-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; margin-bottom:14px;}
.filters-card h3{font-size:13.5px; margin-bottom:8px;}
.filters-card select{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); font-size:13px;}
.filter-row{display:flex; align-items:center; gap:9px; padding:5px 0; font-size:13px; color:var(--ink-2); cursor:pointer;}
.filter-row input{accent-color:var(--brand); width:15px; height:15px; margin:0;}

/* ================= AGENDA ================= */
.cal-main{flex:1; min-width:0; padding:20px 26px 28px; overflow-y:auto;}
.cal-topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:14px; flex-wrap:wrap;}
.cal-topbar .titles{display:flex; align-items:center; gap:8px;}
.cal-topbar h2{font-size:22px; font-weight:650; margin:0 6px; font-variant-numeric:tabular-nums; text-transform:none;}
.cal-nav-btn{width:34px; height:34px; border:1px solid var(--line); background:var(--surface); border-radius:var(--r-md); font-size:13px; color:var(--ink-2);}
.cal-nav-btn:hover{border-color:var(--line-2); color:var(--ink);}
.view-toggle{display:flex; gap:2px; background:var(--surface-3); border-radius:var(--r-md); padding:3px;}
.view-toggle button{border:none; background:transparent; padding:6px 14px; border-radius:8px; font-size:13px; color:var(--ink-2); font-weight:500;}
.view-toggle button:hover{color:var(--ink);}
.view-toggle button.active{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(23,32,30,.08);}
.btn-create{
  background:var(--brand); color:var(--brand-ink); border:none; border-radius:var(--r-md);
  padding:10px 16px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.btn-create:hover{background:var(--brand-deep);}
.topbar-actions{display:flex; align-items:center; gap:10px;}
.topbar-actions .btn{padding:10px 16px; font-size:13.5px;}

.week-grid-wrap{background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden;}
.week-header{display:grid; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:3;}
.week-header .gmt-cell{padding:12px 10px; font-size:11px; color:var(--ink-3); display:flex; align-items:flex-end;}
.week-header .day-col{padding:10px 8px 12px; text-align:center; border-left:1px solid var(--line);}
.week-header .dname{font-size:12px; color:var(--ink-2); margin-bottom:2px; font-weight:500;}
.week-header .dnum{font-size:20px; font-weight:650; font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; border-radius:10px;}
.week-header .day-col.today .dname{color:var(--brand-deep);}
.week-header .day-col.today .dnum{background:var(--brand); color:var(--brand-ink);}

.week-body{display:grid; position:relative;}
.hour-label{font-size:11px; color:var(--ink-3); padding:5px 10px 0 0; text-align:right; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums;}
.hour-bgcell{border-left:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer;}
.hour-bgcell:hover{background:var(--brand-soft);}

/* cartões da agenda: fundo pela situação, faixa à esquerda pela situação */
.evt-card{
  border-radius:9px; padding:8px 10px 8px 13px; font-size:12.5px; cursor:pointer;
  margin:2px 3px; overflow:hidden; position:relative;
  display:flex; flex-direction:column; justify-content:flex-start; gap:2px;
  box-shadow:inset 0 0 0 1px rgba(23,32,30,.06);
}
.evt-card:hover{box-shadow:inset 0 0 0 1px rgba(23,32,30,.16), 0 4px 14px rgba(23,32,30,.12); z-index:2;}
.evt-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:currentColor; opacity:.55;}
.evt-card.blk-card::before, .evt-card.room-busy-card::before{display:none;}
.evt-card .etitle{font-weight:600; font-size:13px; line-height:1.28; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.evt-card .etime{font-size:11.5px; opacity:.85; display:flex; align-items:center; gap:4px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.evt-card.cancelado{opacity:.75;}
.evt-card.cancelado .etitle{text-decoration:line-through;}
.room-busy-card{
  background:repeating-linear-gradient(135deg, var(--surface-3), var(--surface-3) 6px, var(--surface-2) 6px, var(--surface-2) 12px);
  color:var(--ink-3); cursor:default; box-shadow:inset 0 0 0 1px var(--line);
}
.empty-day-hint{font-size:11px; color:var(--ink-3);}

/* ================= MÊS ================= */
.month-grid-wrap{background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden;}
.month-grid{display:grid; grid-template-columns:repeat(7, 1fr);}
.month-daycol-head{padding:10px; text-align:center; font-size:12px; color:var(--ink-2); font-weight:500; border-bottom:1px solid var(--line);}
.month-cell{
  min-height:112px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:8px; cursor:pointer; display:flex; flex-direction:column; gap:3px;
}
.month-cell:hover{background:var(--surface-2);}
.month-cell .mnum{font-size:13px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:8px;}
.month-cell.today .mnum{background:var(--brand); color:var(--brand-ink);}
.month-cell.muted{background:var(--surface-2);}
.month-cell.muted .mnum{color:var(--ink-3);}
.month-chip{font-size:11px; padding:3px 6px 3px 9px; border-radius:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; position:relative; font-weight:500;}
.month-chip::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:currentColor; opacity:.55;}
.month-more{font-size:11px; color:var(--ink-2); padding-left:4px;}

/* ================= TELAS SIMPLES ================= */
.simple-main{flex:1; min-width:0; padding:28px 32px 40px; overflow-y:auto;}
.simple-header{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px;}
.simple-header h2{font-size:24px; font-weight:700; letter-spacing:-.02em;}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px;}
.stat-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 18px 16px;}
.stat-grid .stat-card:first-child{background:var(--brand); border-color:var(--brand); color:var(--brand-ink);}
.stat-grid .stat-card:first-child .label,
.stat-grid .stat-card:first-child .value,
.stat-grid .stat-card:first-child .delta{color:inherit;}
.stat-grid .stat-card:first-child .label,
.stat-grid .stat-card:first-child .delta{opacity:.8;}
.stat-card .label{font-size:13px; color:var(--ink-2); font-weight:500;}
.stat-card .value{font-size:28px; margin-top:6px; font-weight:700; color:var(--ink); letter-spacing:-.01em; font-variant-numeric:tabular-nums; line-height:1.15;}
.stat-card .delta{font-size:12.5px; margin-top:4px; color:var(--ink-2);}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; margin-bottom:16px;}
.panel h3{font-size:15px; margin-bottom:14px; font-weight:650; display:flex; align-items:center; gap:8px;}
.panel-hint{font-size:12px; font-weight:500; color:var(--ink-2); background:var(--surface-3); padding:2px 8px; border-radius:999px;}
.panel-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.panel-grid-2{margin-bottom:16px;}
.panel-grid-2 > .panel{margin-bottom:0;}
.chart-wrap{position:relative; height:250px;}
.chart-wrap-sm{position:relative; height:210px;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; font-size:12px; color:var(--ink-2); font-weight:500; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
td{padding:11px 10px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums;}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}

.badge{padding:3px 10px 3px 8px; border-radius:999px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;}
.badge.pendente{background:#E7EEF6; color:#2D4F73;}
.badge.aguardando{background:#FBEBD3; color:#7A4A0E;}
.badge.reagendar{background:#F8DDEB; color:#842456;}
.badge.confirmado{background:#DCEFE2; color:#1B5A33;}
.badge.concluido{background:#ECEAF3; color:#4B4566;}
.badge.cancelado{background:#F6E1DE; color:#8A3226;}

.row-actions{display:flex; gap:6px;}
.icon-btn{border:1px solid var(--line); background:var(--surface); border-radius:8px; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; text-decoration:none; color:var(--ink);}
.icon-btn:hover{border-color:var(--line-2); background:var(--surface-2);}

.filters{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.filters select,.filters input{padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-md); font-size:13.5px; background:var(--surface); min-width:160px;}
.filters select:focus,.filters input:focus{outline:none; border-color:var(--brand); box-shadow:var(--focus);}

.empty-state{text-align:center; padding:44px 16px; color:var(--ink-2); font-size:14px;}

/* ================= FORMULÁRIOS ================= */
.form-row{margin-bottom:16px; position:relative;}
.form-row label{display:block; font-size:13px; color:var(--ink); margin-bottom:6px; font-weight:500;}
.form-row input,.form-row select,.form-row textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--r-md);
  font-size:14px; background:var(--surface); color:var(--ink);
}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--ink-3);}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none; border-color:var(--brand); box-shadow:var(--focus);}
.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field-hint{font-size:12.5px; color:var(--ink-2); margin:6px 0 0;}

.slots-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:6px;}
.slot-btn{padding:9px 4px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); font-size:13px; font-weight:500; font-variant-numeric:tabular-nums;}
.slot-btn:hover{border-color:var(--brand); color:var(--brand-deep);}
.slot-btn.selected{background:var(--brand); color:var(--brand-ink); border-color:var(--brand);}
.slot-btn:disabled{opacity:.35; text-decoration:line-through; cursor:not-allowed; border-color:var(--line);}
.slot-btn:disabled:hover{color:inherit;}

.custom-time-row{display:flex; align-items:center; gap:10px; margin-top:10px; font-size:13px; color:var(--ink-2);}
.custom-time-row input{width:auto; padding:8px 10px;}

.deposit-row{background:var(--surface-2); border-radius:var(--r-md); padding:12px 14px; border:1px solid var(--line);}

.suggestions-box{
  position:absolute; top:100%; left:0; right:0; z-index:20;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  margin-top:4px; max-height:200px; overflow-y:auto; box-shadow:0 10px 26px rgba(23,32,30,.12);
}
.suggestion-item{padding:9px 12px; font-size:13.5px; cursor:pointer;}
.suggestion-item:hover{background:var(--brand-soft);}
.suggestion-item .sname{font-weight:500;}
.suggestion-item .sphone{font-size:12px; color:var(--ink-2);}

.service-checklist{display:flex; flex-direction:column; gap:6px; max-height:230px; overflow-y:auto;}
.service-check-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface); font-size:13.5px; cursor:pointer;
}
.service-check-item:has(input:checked){border-color:var(--brand); background:var(--brand-soft);}
.service-check-item input{accent-color:var(--brand); width:16px; height:16px; flex-shrink:0; margin:0;}
.service-check-item span:first-of-type{flex:1;}
.service-check-item .scprice{color:var(--ink-2); font-size:13px; font-variant-numeric:tabular-nums;}
.service-total{margin-top:10px; font-size:14px; font-weight:650; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums;}
.sc-price-input{width:96px; text-align:right; padding:6px 8px; font-size:13px; flex-shrink:0; border:1px solid var(--line-2); border-radius:8px;}
.sc-session-row{margin:-2px 0 6px 12px; padding:8px 12px; background:var(--surface-2); border-radius:var(--r-sm); font-size:13px;}
.sc-session-row select{padding:4px 8px; border-radius:6px; border:1px solid var(--line-2); font-size:13px;}

.reschedule-flag{margin-top:10px; padding:9px 12px; background:#F8DDEB; color:#842456; border-radius:var(--r-md); font-size:13px; font-weight:500;}
.edit-section-title{font-size:13px; font-weight:650; color:var(--ink); margin:20px 0 10px; padding-top:16px; border-top:1px solid var(--line);}
.edit-section-title:first-of-type{margin-top:0; padding-top:0; border-top:none;}

.package-progress{margin-bottom:14px; display:flex; flex-direction:column; gap:8px;}
.package-progress-item{display:flex; align-items:center; gap:10px; font-size:13px; background:var(--surface-2); padding:8px 12px; border-radius:var(--r-md);}
.ppname{flex:1; font-weight:500;}
.pdots{display:flex; gap:4px; flex-wrap:wrap;}
.pdot{width:20px; height:20px; border-radius:50%; background:var(--surface); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-size:10.5px; color:var(--ink-2);}
.pdot.done{background:var(--brand); border-color:var(--brand); color:var(--brand-ink); font-weight:600;}
.ppcount{color:var(--ink-2); font-size:12px;}

.side-panel-toggle{
  position:absolute; left:264px; top:50%; transform:translateY(-50%); z-index:15;
  width:20px; height:44px; border:1px solid var(--line); border-left:none; background:var(--surface);
  border-radius:0 8px 8px 0; color:var(--ink-3); font-size:12px;
}
.side-panel-toggle:hover{color:var(--ink);}
.side-panel.collapsed{width:0; padding:0; overflow:hidden; border-right:none;}
.side-panel.collapsed + .side-panel-toggle{left:0;}
.side-panel[style*="none"] + .side-panel-toggle{display:none;}

/* ================= RELATÓRIO ================= */
.report-modal-box{width:96vw; max-width:1200px; max-height:92vh;}
.report-controls{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line);}
.report-range{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.report-range label{font-size:13px; color:var(--ink-2); display:flex; align-items:center; gap:6px;}
.report-range input{padding:8px 10px; border:1px solid var(--line-2); border-radius:var(--r-sm); font-size:13px;}
.report-content{overflow-x:auto;}
.report-day-head{display:flex; gap:40px; background:var(--surface-3); padding:10px 14px; border-radius:8px 8px 0 0; font-size:13px; margin-top:22px;}
.report-day-head:first-child{margin-top:0;}
.report-day-head .rlabel{display:block; font-weight:500; color:var(--ink-2); font-size:12px;}
.report-day-head .rvalue{color:var(--ink); font-size:13.5px; font-weight:600;}
.report-table{width:100%; border-collapse:collapse; font-size:13px; margin-bottom:4px;}
.report-table th{background:var(--surface); border-bottom:1px solid var(--line-2); padding:8px 10px; text-align:left; font-size:12px;}
.report-table td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top;}
.report-table tr:hover{background:var(--surface-2);}
.report-table a{color:var(--brand-deep); font-weight:600;}

@media print{
  body *{visibility:hidden;}
  #report-modal, #report-modal *{visibility:visible;}
  #report-modal{position:fixed; inset:0; background:#fff;}
  .modal-overlay#report-modal{padding:0; align-items:flex-start;}
  .report-modal-box{width:100%; max-width:100%; max-height:none; box-shadow:none; border-radius:0;}
  .report-range, .modal-actions{display:none !important;}
  .report-day-head{break-inside:avoid; background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .report-table tr{break-inside:avoid;}
}

/* ================= ASSISTENTE DE AGENDAMENTO ================= */
.wizard-modal{width:540px;}
.wizard-head{margin-bottom:20px;}
.wizard-head h3{margin-bottom:14px;}
.wizard-steps{display:flex; align-items:center; gap:8px;}
.wizard-step{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line-2); background:var(--surface);
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; color:var(--ink-3);
}
.wizard-step.active{background:var(--brand); border-color:var(--brand); color:var(--brand-ink);}
.wizard-step.done{background:var(--brand-tint); border-color:var(--brand-tint); color:var(--brand-deep);}
.warrow{width:22px; height:1px; background:var(--line-2); color:transparent; font-size:0; overflow:hidden;}
.wizard-subtitle{font-size:13.5px; color:var(--ink-2); margin-bottom:16px;}
.room-readonly{padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); font-size:14px; color:var(--ink-2);}
.last-service-hint{
  background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:var(--r-md);
  padding:10px 14px; font-size:13px; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.last-service-hint button{border:1px solid var(--brand); background:var(--surface); color:var(--brand-deep); border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:600; flex-shrink:0;}

.client-menu-wrap{position:relative; display:inline-block;}
.client-menu{
  position:absolute; right:0; top:calc(100% + 4px); z-index:30;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  min-width:180px; box-shadow:0 12px 30px rgba(23,32,30,.14); padding:5px; text-align:left;
}
.client-menu a, .client-menu button{display:block; width:100%; text-align:left; background:none; border:none; padding:9px 10px; font-size:13.5px; color:var(--ink); border-radius:7px; text-decoration:none;}
.client-menu a:hover, .client-menu button:hover{background:var(--surface-2);}

.template-list{display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto;}
.template-item{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r-md); cursor:pointer; background:var(--surface); font-size:14px;}
.template-item:hover{border-color:var(--brand); background:var(--brand-soft);}
.template-item .tarrow{color:var(--ink-3); font-size:12px;}

.existing-item{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; margin-bottom:6px; font-size:13px; background:var(--surface);}
.existing-item:hover{border-color:var(--brand);}
.existing-item .edate{color:var(--ink-2);}

.anamnese-question{margin-bottom:18px;}
.anamnese-question > .qlabel{font-size:13.5px; font-weight:500; margin-bottom:8px; display:block;}
.anamnese-options{display:flex; flex-direction:column; gap:6px;}
.anamnese-options label{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); font-weight:400;}
.anamnese-options input{accent-color:var(--brand); width:15px; height:15px; margin:0;}
.anamnese-note-input{margin-top:8px;}

/* ================= BOTÕES ================= */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:var(--r-md); font-size:14px; font-weight:600; border:1px solid transparent; text-decoration:none; white-space:nowrap;}
.btn-primary{background:var(--brand); color:var(--brand-ink);}
.btn-primary:hover{background:var(--brand-deep);}
.btn-primary:disabled{opacity:.6; cursor:wait;}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-2); font-weight:500;}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--ink-3);}
.btn-block{width:100%; padding:12px 18px;}
.btn-sm{padding:7px 12px; font-size:13px;}

/* ================= MODAL ================= */
.modal-overlay{position:fixed; inset:0; background:rgba(16,24,22,.42); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;}
.modal{background:var(--surface); border-radius:16px; width:460px; max-width:100%; padding:24px; max-height:90vh; overflow-y:auto; box-shadow:0 24px 60px rgba(16,24,22,.22);}
.modal h3{font-size:18px; margin-bottom:16px;}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:22px;}

/* ================= CONFIGURAÇÕES ================= */
.settings-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:16px; align-items:start;}
.logo-actions{display:flex; gap:8px; flex-wrap:wrap;}
.logo-actions label.btn{margin:0; cursor:pointer;}
.color-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.swatches{display:flex; gap:8px;}
.swatch{width:30px; height:30px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line-2); padding:0;}
.swatch.on{box-shadow:0 0 0 2px var(--ink);}
.color-row input[type="color"]{width:44px; height:32px; padding:2px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); cursor:pointer;}
.settings-save{display:flex; align-items:center; gap:14px; margin-top:6px; padding-top:16px; border-top:1px solid var(--line);}
.set-status{font-size:13px; color:var(--ink-2);}
.preview-panel{position:sticky; top:20px;}
.brand-preview{display:grid; grid-template-columns:42% 1fr; border:1px solid var(--line); border-radius:12px; overflow:hidden; min-height:250px;}
.pv-side{background:var(--brand); color:var(--brand-ink); padding:20px 16px; display:flex; flex-direction:column; gap:6px;}
.pv-mark{width:40px; height:40px; border-radius:11px; overflow:hidden; background:color-mix(in srgb, var(--brand-ink) 16%, transparent); display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.pv-mark img{width:100%; height:100%; object-fit:cover;}
.pv-mono{font-weight:700; font-size:14px;}
.pv-name{font-weight:700; font-size:19px; line-height:1.1; letter-spacing:-.02em; overflow-wrap:anywhere;}
.pv-tag{font-size:12px; opacity:.8;}
.pv-body{background:var(--surface-2); padding:18px 14px; display:flex; flex-direction:column; gap:8px;}
.pv-line{height:10px; border-radius:5px; background:var(--surface-3); margin-bottom:6px;}
.pv-line.w60{width:60%;}
.pv-card{font-size:12px; background:var(--brand-soft); color:var(--brand-deep); border-radius:8px; padding:8px 10px; display:flex; align-items:center; gap:8px; font-weight:500;}
.pv-card span{width:3px; align-self:stretch; border-radius:2px; background:var(--brand);}
.pv-btn{margin-top:auto; align-self:flex-start; background:var(--brand); color:var(--brand-ink); font-size:12px; font-weight:600; padding:7px 12px; border-radius:8px;}

/* ================= WHATSAPP ================= */
.wa-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; align-items:start;}
.wa-text{color:var(--ink-2); max-width:62ch; margin:0 0 18px;}
.wa-locked{max-width:720px;}
.wa-status-row{display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line);}
.wa-dot{width:12px; height:12px; border-radius:50%; flex-shrink:0; background:var(--ink-3);}
.wa-dot.on{background:#25A35A; box-shadow:0 0 0 4px #DCEFE2;}
.wa-dot.off{background:#C2462F; box-shadow:0 0 0 4px #F6E1DE;}
.wa-status-title{font-weight:650; font-size:16px;}
.wa-status-sub{font-size:13px; color:var(--ink-2);}
.wa-steps{margin:0 0 18px; padding-left:20px; color:var(--ink-2); display:flex; flex-direction:column; gap:6px;}
.wa-steps strong{color:var(--ink); font-weight:600;}
.wa-qr-box{margin-top:18px; text-align:center; padding:18px; border:1px dashed var(--line-2); border-radius:var(--r-lg);}
.wa-qr-box img{width:240px; max-width:100%; aspect-ratio:1; border-radius:8px;}
.wa-toggle-row{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px;}
.wa-toggle-title{font-weight:600;}
.switch{position:relative; width:44px; height:26px; flex-shrink:0;}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1;}
.switch span{position:absolute; inset:0; border-radius:999px; background:var(--line-2); transition:background-color .15s ease;}
.switch span::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .15s ease;}
.switch input:checked + span{background:var(--brand);}
.switch input:checked + span::after{transform:translateX(18px);}
.switch input:focus-visible + span{box-shadow:var(--focus);}
.wa-usage-num{font-size:30px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.wa-usage-of{font-size:14px; font-weight:500; color:var(--ink-2); letter-spacing:0;}
.wa-bar{height:8px; border-radius:999px; background:var(--surface-3); margin:10px 0 8px; overflow:hidden;}
.wa-bar div{height:100%; background:var(--brand); border-radius:999px;}
.wa-bar div.warn{background:#C98A1E;}
.wa-bar div.full{background:#C2462F;}
.wa-preview-title{margin-top:22px;}
.wa-bubble{background:#E7F6E1; border-radius:4px 14px 14px 14px; padding:12px 14px; font-size:13.5px; line-height:1.5; max-width:360px; color:#1E2A22;}

/* ================= RESPONSIVO ================= */
@media (max-width:1180px){
  .stat-grid{grid-template-columns:1fr 1fr;}
  .settings-grid{grid-template-columns:1fr;}
  .wa-grid{grid-template-columns:1fr;}
  .preview-panel{position:static;}
}
@media (max-width:960px){
  .side-panel{display:none;}
  .side-panel-toggle{display:none;}
  .week-header .dname{font-size:11px;}
  .cal-main,.simple-main{padding:18px;}
  .rail{width:68px; padding:16px 10px;}
  .rail .rlabel, .brand-name{display:none;}
  .brand-row{justify-content:center; margin:0 0 22px;}
  .rail-btn{justify-content:center; padding:0;}
}
@media (max-width:720px){
  body{font-size:14px;}
  .login-shell{flex-direction:column;}
  .login-visual{display:none;}
  .login-form-panel{padding:28px 20px; align-items:flex-start; padding-top:12vh;}
  .login-mark-mobile{display:flex;}

  .modal-overlay{padding:0; align-items:flex-end;}
  .modal, .wizard-modal{width:100%; max-width:100%; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); border-radius:18px 18px 0 0; max-height:90vh;}
  .form-grid-2{grid-template-columns:1fr;}
  .slots-grid{grid-template-columns:repeat(4,1fr);}
  .panel-grid-2{grid-template-columns:1fr; gap:12px;}

  .stat-grid{grid-template-columns:1fr 1fr; gap:8px;}
  .stat-card{padding:14px;}
  .stat-card .value{font-size:21px;}
  .simple-main, .cal-main{padding:16px 14px calc(84px + env(safe-area-inset-bottom));}
  .simple-header{flex-wrap:wrap;}
  .simple-header h2{font-size:21px;}
  .panel{padding:16px; overflow-x:auto;}
  table{font-size:13px;}
  th, td{padding:9px 7px;}

  .cal-topbar{gap:10px;}
  .cal-topbar h2{font-size:18px;}
  .topbar-actions{flex-wrap:wrap; gap:8px; width:100%;}
  .topbar-actions .btn-create{flex:1; justify-content:center;}
  .hour-label{font-size:10.5px; padding-right:4px;}
  .evt-card{padding:5px 5px 5px 9px; margin:1px;}
  .evt-card .etitle{font-size:11px; -webkit-line-clamp:3;}
  .evt-card .etime{font-size:10px;}
  .month-cell{min-height:76px; padding:4px;}
  .month-chip{font-size:9.5px; padding:2px 4px 2px 6px;}

  .rail{
    width:100%; height:calc(62px + env(safe-area-inset-bottom)); flex-direction:row; padding:0 4px env(safe-area-inset-bottom);
    position:fixed; top:auto; bottom:0; left:0; z-index:40; border-right:none; border-top:1px solid var(--line);
  }
  .brand-row{display:none;}
  .rail-nav{flex-direction:row; flex:1; justify-content:flex-start; align-items:center; overflow-x:auto; scrollbar-width:none; gap:0;}
  .rail-nav::-webkit-scrollbar{display:none;}
  .rail-nav .rail-btn{flex:0 0 auto; min-width:60px !important;}
  .rail-nav .rail-btn{flex-direction:column; height:54px; gap:3px; font-size:10.5px; width:auto; min-width:46px; padding:0 4px; border-radius:10px;}
  .rail-nav .rail-btn .rlabel{display:block;}
  .rail-nav .rail-btn.active{background:transparent;}
  .rail-nav .rail-btn.active .ic{background:var(--brand-soft); border-radius:8px; padding:3px 10px; box-sizing:content-box;}
  .rail-bottom{margin-top:0; border-top:none; padding-top:0; display:flex; align-items:center;}
  .rail-bottom .rail-btn{width:44px; height:44px; justify-content:center; padding:0;}
}

/* acesso da equipe */
.pass-row{display:flex; gap:8px;}
.pass-row input{font-family:ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing:.04em;}
.link-btn{background:none; border:none; padding:0 0 0 6px; color:var(--brand-deep); font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:2px;}

/* painel do dono */
.owner-shell{max-width:1200px; margin:0 auto; padding:28px 24px 40px;}
.owner-top{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
.owner-top h2{font-size:24px; font-weight:700;}
.owner-top .field-hint{margin:2px 0 0;}
.owner .panel{overflow-x:auto;}
.owner .o-plan{padding:6px 8px; border:1px solid var(--line-2); border-radius:8px; font-size:13px; background:var(--surface);}
.owner-msg{white-space:pre-wrap; font-family:inherit; font-size:13.5px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin:10px 0 0; user-select:all;}

.owner .row-actions{flex-wrap:wrap; min-width:200px;}

/* mensagens, agendamento online, relatórios, página pública */
.msg-tabs{display:flex; gap:4px; background:var(--surface-3); border-radius:var(--r-md); padding:3px; margin-bottom:14px; width:fit-content; max-width:100%; overflow-x:auto;}
.msg-tab{border:none; background:transparent; padding:7px 14px; border-radius:8px; font-size:13px; color:var(--ink-2); font-weight:500; white-space:nowrap;}
.msg-tab.on{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(23,32,30,.08);}
.msg-text{width:100%; padding:12px; border:1px solid var(--line-2); border-radius:var(--r-md); font-size:14px; line-height:1.5; resize:vertical; background:var(--surface);}
.msg-text:focus{outline:none; border-color:var(--brand); box-shadow:var(--focus);}
.msg-chips{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 14px;}
.msg-chip{border:1px solid var(--line-2); background:var(--surface-2); border-radius:999px; padding:4px 10px; font-size:12.5px; color:var(--ink-2); font-family:ui-monospace, Menlo, monospace;}
.msg-chip:hover{border-color:var(--brand); color:var(--brand-deep);}
.msg-extra{margin-top:6px;}
.check-line{display:flex !important; align-items:center; gap:10px; font-weight:500;}
.check-line input{width:auto !important; accent-color:var(--brand);}
.link-box{margin-top:8px; padding:9px 12px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); font-size:13px; word-break:break-all; color:var(--ink-2);}
.rep-select{padding:8px 12px; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface); font-size:13.5px;}
.rep-select-sm{padding:4px 8px; font-size:12.5px; margin-left:auto;}
.rep-row{display:grid; grid-template-columns:minmax(80px,32%) 1fr auto; gap:12px; align-items:center; padding:7px 0;}
.rep-name{font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rep-track{height:10px; background:var(--surface-3); border-radius:999px; overflow:hidden;}
.rep-fill{height:100%; background:var(--brand); border-radius:999px;}
.rep-val{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;}
.rep-sub{font-weight:400; color:var(--ink-3); font-size:12px;}

body.book{background:var(--bg);}
.book-head{background:var(--brand); color:var(--brand-ink); padding:22px 20px;}
.book-brand{max-width:560px; margin:0 auto; display:flex; align-items:center; gap:14px;}
.book-brand h1{color:inherit; font-size:20px; letter-spacing:-.02em;}
.book-brand p{margin:2px 0 0; font-size:13px; opacity:.85;}
.book-brand .brand-mark{background:color-mix(in srgb, var(--brand-ink) 16%, transparent); color:inherit;}
.book-main{max-width:560px; margin:0 auto; padding:18px 16px 30px;}
.book-step{font-size:16px; display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.book-step span{width:26px; height:26px; border-radius:50%; background:var(--brand); color:var(--brand-ink); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;}
.book-services{display:flex; flex-direction:column; gap:8px;}
.book-svc{display:grid; grid-template-columns:1fr auto; gap:2px 12px; text-align:left; padding:13px 14px; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface);}
.book-svc:hover{border-color:var(--brand);}
.book-svc.on{border-color:var(--brand); background:var(--brand-soft);}
.bs-name{font-weight:600;} .bs-price{font-weight:600; font-variant-numeric:tabular-nums; grid-row:1; grid-column:2;}
.bs-meta{font-size:12.5px; color:var(--ink-2);}
.book-summary{padding:12px 14px; background:var(--brand-soft); border-radius:var(--r-md); margin:4px 0 16px; font-size:14px;}
.book-done{text-align:center; padding:34px 20px;}
.book-check{width:56px; height:56px; border-radius:50%; background:var(--brand); color:var(--brand-ink); font-size:28px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
.book-foot{text-align:center; font-size:12.5px; color:var(--ink-3); padding:0 0 28px;}
.book-brand .brand-mark{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;}
.book-brand .brand-logo{width:46px; height:46px; border-radius:13px; object-fit:cover; flex-shrink:0;}

.plan-pill{margin-left:12px; font-size:12.5px; font-weight:500; padding:3px 10px; border-radius:999px; background:var(--surface-3); color:var(--ink-2); vertical-align:middle;}
.plan-pill.full{background:#FBEBD3; color:#7A4A0E;}
.msg-tab[data-k="followup"]::after, .msg-tab[data-k="birthday"]::after{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--line-2); margin-left:8px;}
.msg-tab.flag-on::after{background:#25A35A !important;}
.o-plan-cell .field-hint{margin:2px 0 0;}

/* fichas */
.hz-line{font-size:11px; font-weight:600; color:#8A3226; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hz-chip{display:inline-block; font-size:11.5px; font-weight:600; background:#F6E1DE; color:#8A3226; border-radius:999px; padding:2px 8px; margin:0 4px 4px 0; white-space:nowrap;}
.fi-kpi{text-align:left; cursor:pointer; font:inherit;}
.fi-kpi:hover{border-color:var(--line-2);}
.fi-kpi.on{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand);}
.fi-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); align-items:start;}
.fi-tm{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.fi-tm:last-child{border-bottom:none;}
.fi-qr{display:flex; justify-content:center; padding:10px 0 14px; min-height:230px;}
.sig-pad{width:100%; height:150px; border:1px dashed var(--line-2); border-radius:12px; background:#fff; touch-action:none; display:block;}
.sig-box{margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2);}
.sig-box img{max-width:240px; display:block; margin-top:6px; background:#fff; border-radius:8px;}
@media (max-width:1180px){ .fi-grid{grid-template-columns:1fr;} }

.btn-danger{color:#A63A2B !important; border-color:#E8C9C4 !important;}
.btn-danger:hover{background:#FBEDEA !important;}

/* tema escuro */
[data-theme="dark"]{
  --mix:#1B2220; --bg:#0F1412; --surface:#171E1B; --surface-2:#1C2421; --surface-3:#242D29;
  --ink:#E8EEEB; --ink-2:#A9B6B0; --ink-3:#74827C; --line:#27312D; --line-2:#36423D; --danger:#E57C6B;
  --brand-deep: color-mix(in srgb, var(--brand) 45%, #FFFFFF); color-scheme:dark;
}
[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.6);}
[data-theme="dark"] .btn-ghost{background:var(--surface-2);}
[data-theme="dark"] .login-shell, [data-theme="dark"] .login-form-panel{background:var(--surface);}
[data-theme="dark"] .sig-pad{background:#fff;}
[data-theme="dark"] .hz-chip{background:#4A2A25; color:#F2B8AD;}
[data-theme="dark"] .hz-line{color:#F2B8AD;}
[data-theme="dark"] .wa-bubble{background:#1F3A2A; color:#DDEEE2;}
[data-theme="dark"] .badge.pendente{background:#1E2F44; color:#9CC3EE;} [data-theme="dark"] .badge.aguardando{background:#3E2F18; color:#F0C98B;}
[data-theme="dark"] .badge.reagendar{background:#40222F; color:#F0AACB;} [data-theme="dark"] .badge.confirmado{background:#1D3A28; color:#9FDDB3;}
[data-theme="dark"] .badge.concluido{background:#2B2840; color:#BDB6E4;} [data-theme="dark"] .badge.cancelado{background:#40231F; color:#F0AFA3;}

/* avisos, diálogos, carregamento */
#toast-box{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:400; max-width:min(92vw,380px);}
.toast{background:var(--ink); color:var(--surface); padding:12px 16px; border-radius:12px; font-size:13.5px; box-shadow:0 10px 30px rgba(0,0,0,.25); opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s;}
.toast.in{opacity:1; transform:none;} .toast.warn{background:#A63A2B; color:#fff;}
.dlg-msg{white-space:pre-wrap; margin:0 0 14px; font-size:14.5px; line-height:1.5;}
.dlg-input{width:100%; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface); font-size:14px;}
.btn-danger-solid{background:#A63A2B; color:#fff; border-color:#A63A2B;} .btn-danger-solid:hover{background:#8A2F22;}
html.is-loading body::before{content:""; position:fixed; top:0; left:0; height:3px; width:35%; background:var(--brand); z-index:500; animation:loadbar 1.1s ease-in-out infinite;}
@keyframes loadbar{0%{transform:translateX(-100%);} 100%{transform:translateX(300%);}}

/* início */
.hero{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.hero h2{font-size:28px; font-weight:700; letter-spacing:-.02em;}
.hero-date{margin:2px 0 0; color:var(--ink-2); font-size:14px;}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap;}
.today-row{display:grid; grid-template-columns:62px 1fr auto; gap:12px; align-items:center; width:100%; text-align:left; padding:11px 12px; border:1px solid transparent; border-bottom-color:var(--line); background:transparent; border-radius:var(--r-md);}
.today-row:hover{background:var(--surface-2);}
.today-row.next{border-color:var(--brand-line); background:var(--brand-soft);}
.tr-time{font-weight:700; font-variant-numeric:tabular-nums; font-size:15px;}
.tr-main{display:flex; flex-direction:column; gap:2px; min-width:0;} .tr-sub{font-size:13px; color:var(--ink-2);}
.chart-wrap{position:relative;}
.chart-empty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--ink-2); font-size:14px; background:color-mix(in srgb, var(--surface) 82%, transparent);}

/* agenda */
.now-line{position:relative; height:0; border-top:2px solid #E5484D; z-index:5; pointer-events:none; align-self:start;}
.now-line::before{content:""; position:absolute; left:-5px; top:-6px; width:10px; height:10px; border-radius:50%; background:#E5484D;}
.evt-card.dragging{opacity:.45;}
.evt-card[draggable="true"]{cursor:grab;}
.hour-bgcell.drop-ok{background:var(--brand-tint);}
.color-legend{display:flex; flex-wrap:wrap; gap:6px 14px; margin:-6px 0 12px; font-size:12.5px; color:var(--ink-2);}
.color-legend:empty{display:none;}
.color-legend .lg{display:inline-flex; align-items:center; gap:6px;}
.color-legend i{width:12px; height:12px; border-radius:4px; border:1px solid; display:inline-block;}
@media (max-width:720px){ #toast-box{bottom:78px; right:12px; left:12px; max-width:none;} .hero h2{font-size:23px;} .today-row{grid-template-columns:50px 1fr;} .today-row .badge{grid-column:2; justify-self:start;} #color-toggle{display:none;} }

/* primeiros passos */
.ob{margin-bottom:16px; border-color:var(--brand-line);}
.ob-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;} .ob-head h3{margin:0;}
.ob-bar{height:8px; border-radius:999px; background:var(--surface-3); margin:12px 0 6px; overflow:hidden;} .ob-bar div{height:100%; background:var(--brand); border-radius:999px; transition:width .4s;}
.ob-list{display:grid; grid-template-columns:repeat(2,1fr); gap:6px 18px;}
.ob-row{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line);}
.ob-ck{width:24px; height:24px; border-radius:50%; border:2px solid var(--line-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff;}
.ob-row.done .ob-ck{background:var(--brand); border-color:var(--brand);} .ob-row.done .ob-tx{opacity:.6;}
.ob-tx{display:flex; flex-direction:column; flex:1; min-width:0;} .ob-tx span{font-size:12.5px; color:var(--ink-2);}
@media (max-width:900px){.ob-list{grid-template-columns:1fr;}}

.room-row{display:flex; gap:8px; margin-bottom:8px; max-width:420px;} .room-row input{flex:1; padding:9px 12px; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface);}

/* fotos */
.ph-modal{width:720px; max-width:96vw;}
.ph-up{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px;} .ph-up select,.ph-up input[type=date],.ph-up input[type=text]{padding:8px 10px; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface); font-size:13.5px;} .ph-up input[type=text]{flex:1; min-width:140px;}
.ph-day{margin-top:14px;} .ph-date{font-weight:600; margin-bottom:8px; font-size:14px;}
.ph-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
.ph-item{position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface-2);} .ph-item.sel{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand);}
.ph-item img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; cursor:zoom-in;}
.ph-kind{position:absolute; top:8px; left:8px; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px; background:#fff; color:var(--ink);} .ph-kind.antes{background:#FBEBD3; color:#7A4A0E;} .ph-kind.depois{background:#DCEFE2; color:#1B5A33;}
.ph-pick{display:flex; align-items:center; gap:6px; font-size:12.5px; padding:6px 8px;} .ph-note{font-size:12px; color:var(--ink-2); padding:0 8px 8px;}
.ph-del{position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; font-size:12px;}
.ph-view{background:var(--surface); border-radius:16px; padding:18px; max-width:96vw; max-height:94vh; overflow:auto; display:flex; flex-direction:column; gap:12px; align-items:center;} .ph-view.two{display:grid; grid-template-columns:1fr 1fr; width:min(1100px,96vw);}
.ph-view figure{margin:0;} .ph-view img{max-width:100%; max-height:74vh; border-radius:10px; display:block; margin:0 auto;} .ph-view figcaption{font-size:13px; color:var(--ink-2); text-align:center; margin-top:6px;} .ph-view .ph-close{grid-column:1/-1; justify-self:center;}
@media (max-width:720px){.ph-view.two{grid-template-columns:1fr;}}
.fi-grid > .panel{min-width:0; overflow-x:auto;}
#fi-table .row-actions{flex-wrap:wrap; justify-content:flex-end;}
#fi-table td:last-child{min-width:150px;}

.paywall{position:fixed; inset:0; z-index:250; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:20px; overflow:auto;}
.paywall-in{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:30px; max-width:560px; width:100%; box-shadow:0 30px 70px rgba(16,32,28,.14);} .paywall-in h2{margin:18px 0 6px;} body.locked{overflow:hidden;}
.trial-card{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; border-color:var(--brand-line); background:var(--brand-soft);} .trial-card.soon{border-color:#E8B96A; background:#FDF3E1;}