/* ============================================================
   AgendaMais — Design System (Operate mode, profissional)
   Sem dependências externas. Um acento, neutros afinados,
   elevação real, estados completos e foco acessível.
   ============================================================ */
:root{
  /* Acento (marca) */
  --brand:#4f46e5; --brand-600:#4f46e5; --brand-700:#4338ca; --brand-800:#3730a3;
  --brand-soft:#eef2ff; --brand-soft-2:#e0e7ff; --brand-ink:#3730a3;
  --brand-ring:rgba(79,70,229,.32);

  /* Neutros (conteúdo) */
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#fbfcfd;
  --border:#e6e8ec; --border-strong:#d5d9e0;
  --ink:#0f172a; --ink-2:#475569; --muted:#64748b; --faint:#94a3b8;

  /* Sidebar (segunda camada neutra) */
  --side-bg:#0f1629; --side-2:#1c2740; --side-line:#24304b;
  --side-ink:#cdd5e3; --side-muted:#8a95ac;

  /* Semânticos */
  --ok:#059669; --ok-soft:#ecfdf5; --ok-ink:#047857;
  --warn:#d97706; --warn-soft:#fffbeb; --warn-ink:#b45309;
  --danger:#dc2626; --danger-soft:#fef2f2; --danger-ink:#b91c1c;
  --info:#0284c7; --info-soft:#eff6ff; --info-ink:#0369a1;

  /* Raio + elevação + tempo */
  --r-xs:8px; --r-sm:10px; --r:12px; --r-lg:16px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 6px 16px -4px rgba(16,24,40,.10),0 2px 6px -2px rgba(16,24,40,.06);
  --shadow-lg:0 16px 40px -12px rgba(16,24,40,.20),0 8px 16px -8px rgba(16,24,40,.10);
  --t:.16s cubic-bezier(.2,.6,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter var","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv02","cv03","cv04","ss01";letter-spacing:-.006em;
}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.18;letter-spacing:-.02em;color:var(--ink);font-weight:700}
h1{font-size:1.55rem}h2{font-size:1.12rem}h3{font-size:1rem}
p{margin:0 0 .6rem}
a{color:var(--brand-700);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--brand-800)}
small,.small{font-size:.8rem}
.muted{color:var(--muted)}
.center{text-align:center}
.container{max-width:1120px;margin:0 auto;padding:0 1.1rem}
hr{border:none;border-top:1px solid var(--border);margin:1.1rem 0}
::selection{background:var(--brand-soft-2)}

/* Ícones */
.ic{flex-shrink:0;vertical-align:-.18em}

/* Foco acessível — anel consistente em tudo que é focável */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--brand-ring);border-radius:var(--r-xs)
}

/* ---------------- Botões ---------------- */
.btn{
  --_bg:#fff;--_fg:var(--ink);--_bd:var(--border-strong);
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.58rem .95rem;border-radius:var(--r-sm);border:1px solid var(--_bd);
  background:var(--_bg);color:var(--_fg);font-weight:600;font-size:.9rem;font-family:inherit;
  cursor:pointer;white-space:nowrap;transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t),filter var(--t);
  box-shadow:var(--shadow-xs)
}
.btn:hover{filter:brightness(.98);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn .ic{width:17px;height:17px}
.btn-primary{--_bg:var(--brand);--_fg:#fff;--_bd:transparent;box-shadow:0 1px 2px rgba(67,56,202,.35),0 2px 8px -2px rgba(67,56,202,.45)}
.btn-primary:hover{--_bg:var(--brand-700);filter:none}
.btn-success{--_bg:var(--ok);--_fg:#fff;--_bd:transparent}
.btn-success:hover{filter:brightness(.95)}
.btn-danger{--_bg:var(--danger);--_fg:#fff;--_bd:transparent}
.btn-danger:hover{filter:brightness(.95)}
.btn-wa{--_bg:#25d366;--_fg:#08331b;--_bd:transparent;font-weight:700}
.btn-ghost{--_bg:#fff;--_fg:var(--ink-2);--_bd:var(--border-strong)}
.btn-ghost:hover{--_fg:var(--ink);background:var(--surface-2)}
.btn-sm{padding:.4rem .68rem;font-size:.82rem;border-radius:var(--r-xs);gap:.3rem}
.btn-sm .ic{width:15px;height:15px}
.btn-block{width:100%}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

/* ---------------- Cards ---------------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:1.35rem;margin-bottom:1.15rem
}
.card h2{font-size:1.05rem;margin-bottom:.9rem}

/* ---------------- KPIs ---------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1.15rem}
.kpi{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:1.15rem 1.2rem;box-shadow:var(--shadow-sm);transition:box-shadow var(--t),transform var(--t)
}
.kpi:hover{box-shadow:var(--shadow-md)}
.kpi .n{font-size:1.7rem;font-weight:750;letter-spacing:-.03em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi .l{color:var(--muted);font-size:.82rem;margin-top:.35rem;font-weight:500}

/* ---------------- Tabelas ---------------- */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;background:var(--surface)}
th,td{text-align:left;padding:.72rem .85rem;vertical-align:middle}
thead th{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:650;background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap
}
tbody td{border-bottom:1px solid var(--border);color:var(--ink-2)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--t)}
tbody tr:hover{background:var(--surface-2)}
td strong{color:var(--ink);font-weight:650}
/* Tabela solta (sem .table-wrap) mantém legibilidade */
.card>table,.card>.table-wrap{margin-top:.2rem}

/* ---------------- Badges ---------------- */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .55rem;border-radius:var(--r-pill);
  font-size:.74rem;font-weight:650;line-height:1.2;border:1px solid transparent}
.b-scheduled{background:var(--info-soft);color:var(--info-ink);border-color:#dbeafe}
.b-confirmed{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand-soft-2)}
.b-done{background:var(--ok-soft);color:var(--ok-ink);border-color:#d1fae5}
.b-canceled{background:var(--danger-soft);color:var(--danger-ink);border-color:#fecaca}
.b-no_show{background:var(--warn-soft);color:var(--warn-ink);border-color:#fde68a}
.b-online{background:#faf5ff;color:#7e22ce;border-color:#f3e8ff}

/* ---------------- Formulários ---------------- */
.field{margin-bottom:1rem}
label{display:block;font-weight:600;margin-bottom:.35rem;font-size:.85rem;color:var(--ink-2)}
input,select,textarea{
  width:100%;padding:.6rem .72rem;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font-size:.92rem;font-family:inherit;color:var(--ink);background:#fff;transition:border-color var(--t),box-shadow var(--t);
  appearance:none
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
input[type=checkbox],input[type=color]{width:auto}
input[type=color]{padding:.2rem;height:42px;cursor:pointer}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;padding-right:2rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){.row2{grid-template-columns:1fr}}

/* ---------------- Flash ---------------- */
.flash{padding:.8rem 1rem;border-radius:var(--r);margin-bottom:1.1rem;font-weight:600;font-size:.9rem;
  border:1px solid transparent;display:flex;gap:.5rem;align-items:center}
.flash.success{background:var(--ok-soft);color:var(--ok-ink);border-color:#d1fae5}
.flash.error{background:var(--danger-soft);color:var(--danger-ink);border-color:#fecaca}
.flash.info{background:var(--info-soft);color:var(--info-ink);border-color:#dbeafe}

/* ---------------- Banner de assinatura ---------------- */
.sub-banner{padding:.75rem 1.05rem;border-radius:var(--r);margin-bottom:1.1rem;font-weight:600;font-size:.9rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border:1px solid transparent}
.sub-trial{background:var(--info-soft);color:var(--info-ink);border-color:#dbeafe}
.sub-warn{background:var(--warn-soft);color:var(--warn-ink);border-color:#fde68a}
.sub-blocked{background:var(--danger-soft);color:var(--danger-ink);border-color:#fecaca}

/* ============================================================
   Layout do painel
   ============================================================ */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:250px;background:var(--side-bg);color:var(--side-ink);flex-shrink:0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh
}
.sidebar .brand{
  display:flex;align-items:center;gap:.6rem;padding:1.15rem 1.25rem;font-weight:750;color:#fff;
  font-size:1.15rem;letter-spacing:-.02em;border-bottom:1px solid var(--side-line)
}
.sidebar .brand .logo{
  width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,var(--brand),#7c73ff);
  display:grid;place-items:center;color:#fff;box-shadow:0 4px 10px -2px rgba(79,70,229,.6);flex-shrink:0
}
.sidebar .brand span{color:#a5b4fc}
.sidebar nav{padding:.7rem;display:flex;flex-direction:column;gap:.12rem;flex:1;overflow-y:auto}
.sidebar .nav-group{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--side-muted);
  font-weight:700;padding:.9rem .8rem .35rem}
.sidebar nav a{
  display:flex;align-items:center;gap:.7rem;color:var(--side-ink);padding:.6rem .8rem;border-radius:var(--r-sm);
  font-weight:550;font-size:.9rem;transition:background var(--t),color var(--t)
}
.sidebar nav a .ic{width:18px;height:18px;color:var(--side-muted);transition:color var(--t)}
.sidebar nav a:hover{background:var(--side-2);color:#fff;text-decoration:none}
.sidebar nav a:hover .ic{color:#c7d2fe}
.sidebar nav a.active{background:linear-gradient(90deg,var(--brand-700),var(--brand));color:#fff;box-shadow:0 4px 12px -4px rgba(79,70,229,.7)}
.sidebar nav a.active .ic{color:#fff}
.sidebar .foot{padding:.9rem 1rem;border-top:1px solid var(--side-line)}
.sidebar .foot .lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--side-muted);font-weight:700;margin-bottom:.25rem}
.sidebar .foot a{display:inline-flex;align-items:center;gap:.35rem;color:#93c5fd;font-size:.82rem;word-break:break-all}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);padding:.7rem 1.4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem
}
.topbar .who{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--muted)}
.topbar .avatar{width:30px;height:30px;border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand-700);
  display:grid;place-items:center;font-weight:700;font-size:.82rem}
.topbar .who a{display:inline-flex;align-items:center;gap:.3rem;color:var(--muted);font-weight:600}
.topbar .who a:hover{color:var(--ink)}
.content{padding:1.6rem 1.4rem;flex:1;max-width:1240px;width:100%}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap}
.page-head h1{margin:0}

.menu-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:.3rem;border-radius:var(--r-xs)}
@media(max-width:860px){
  .sidebar{position:fixed;left:-260px;top:0;bottom:0;z-index:60;transition:left var(--t);box-shadow:var(--shadow-lg)}
  .sidebar.open{left:0}
  .menu-toggle{display:inline-flex}
  .content{padding:1.1rem}
}
/* Backdrop quando o menu abre no mobile */
.sb-backdrop{display:none}

/* ============================================================
   Público / autenticação
   ============================================================ */
.public-wrap{min-height:100vh;display:flex;flex-direction:column}
.auth-box{max-width:410px;margin:6vh auto;padding:0 1rem;width:100%}
.brand-lg{display:flex;align-items:center;justify-content:center;gap:.55rem;font-weight:800;font-size:1.5rem;
  letter-spacing:-.03em;margin-bottom:1.3rem;color:var(--ink)}
.brand-lg .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(150deg,var(--brand),#7c73ff);
  display:grid;place-items:center;color:#fff;box-shadow:0 6px 16px -4px rgba(79,70,229,.6)}
.brand-lg span{color:var(--brand-700)}
.auth-box .card{box-shadow:var(--shadow-lg);border-radius:var(--r-lg);padding:1.6rem}

.hero{background:radial-gradient(120% 120% at 80% -10%,#312e81 0%,#0f1629 55%);color:#fff;padding:4.5rem 1rem 4rem;text-align:center}
.hero h1{font-size:2.5rem;max-width:800px;margin:0 auto 1rem;color:#fff;letter-spacing:-.03em;line-height:1.08}
.hero p{font-size:1.15rem;opacity:.86;max-width:640px;margin:0 auto 1.7rem}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:2rem 0}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.chip{background:var(--brand-soft);color:var(--brand-ink);padding:.35rem .8rem;border-radius:var(--r-pill);
  font-size:.85rem;font-weight:600;border:1px solid var(--brand-soft-2);transition:background var(--t)}
a.chip:hover{background:var(--brand-soft-2);text-decoration:none}

.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.5rem;margin-top:.6rem}
.slot{padding:.58rem;text-align:center;border:1px solid var(--border-strong);border-radius:var(--r-sm);cursor:pointer;
  background:#fff;font-weight:650;font-size:.9rem;color:var(--ink-2);transition:all var(--t)}
.slot:hover{border-color:var(--brand);color:var(--brand-700);background:var(--brand-soft)}
.slot.sel{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 4px 12px -3px var(--brand-ring)}

/* Utilitário de código inline */
code{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:.05rem .35rem;font-size:.85em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--brand-ink)}

/* ============================================================
   Recibo / cupom (impressão térmica 80mm + PDF)
   ============================================================ */
.receipt-page{background:#eceef2;min-height:100vh;padding:1.6rem 1rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.receipt-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.cupom{
  width:302px;max-width:100%;background:#fff;padding:16px 18px;box-shadow:var(--shadow-md);border-radius:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:#111;line-height:1.55
}
.cupom .c-center{text-align:center}
.cupom .c-title{font-weight:700;font-size:15px;letter-spacing:.02em}
.cupom .c-sub{font-size:11px;color:#555}
.cupom .c-tag{display:inline-block;border:1px solid #999;border-radius:4px;padding:1px 7px;font-size:10px;letter-spacing:.08em;margin-top:6px}
.cupom hr{border:none;border-top:1px dashed #b3b3b3;margin:9px 0}
.cupom .c-row{display:flex;justify-content:space-between;gap:10px}
.cupom .c-item{margin:3px 0}
.cupom .c-item .c-name{display:block}
.cupom .c-total{font-size:17px;font-weight:800}
.cupom .c-foot{text-align:center;font-size:11px;color:#555;margin-top:6px}
.cupom .c-sign{margin-top:22px;border-top:1px solid #333;padding-top:4px;text-align:center;font-size:11px}
@media print{
  @page{size:80mm auto;margin:0}
  html,body{background:#fff!important}
  .receipt-page{padding:0;background:#fff;display:block}
  .receipt-actions,.no-print{display:none!important}
  .cupom{width:80mm;box-shadow:none;border-radius:0;padding:4mm 3mm;font-size:11px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}