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

/* ---------- Tokens (layout premium de barbearia: tema escuro por padrão, destaque na cor da marca) ---------- */
:root{
  --gold:#d6a756;
  --gold-2:#e8c07a;
  --gold-soft:rgba(214,167,86,0.14);
  --on-gold:#1a1408;

  --bg:#0c0e12;
  --surface:#171b22;
  --surface-2:#1d222b;
  --surface-3:#262c37;
  --text:#eef0f4;
  --text-dim:#a9b0bd;
  --text-faint:#7b8494;
  --accent:var(--gold);
  --accent-strong:var(--gold-2);
  --accent-soft:var(--gold-soft);
  --on-accent:var(--on-gold);
  --secondary:#e0736a;
  --secondary-soft:rgba(224,115,106,0.14);
  --tertiary:#3fb79a;
  --tertiary-soft:rgba(63,183,154,0.14);
  --rose:#e0709a;
  --rose-soft:rgba(224,112,154,0.15);
  --success:#3fb97f;
  --success-soft:rgba(63,185,127,0.14);
  --warning:#e8b04a;
  --warning-soft:rgba(232,176,74,0.14);
  --danger:#ef6a5e;
  --danger-soft:rgba(239,106,94,0.14);
  --type-normal:#e8c13a;
  --type-normal-soft:rgba(232,193,58,0.15);
  --type-fixed:#4b8ef0;
  --type-fixed-soft:rgba(75,142,240,0.15);
  --whatsapp:#25d366;
  --border:#262c37;
  --border-strong:#343c4a;
  --shadow:rgba(0,0,0,0.35);
  --shadow-strong:rgba(0,0,0,0.55);
  --ring:rgba(214,167,86,0.35);
  --overlay:rgba(4,5,8,0.7);
  --glass:rgba(12,14,18,0.78);

  --font-display:'Playfair Display',ui-serif,Georgia,serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Inter',ui-sans-serif,system-ui,sans-serif;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:20px;
  --sidebar-w:264px;
  --topbar-h:64px;
  color-scheme: dark;
}
/* Tema claro opcional (botão de alternar, salvo em localStorage). */
:root[data-theme="light"]{
  --gold:#a8741f;
  --gold-2:#8a5e14;
  --gold-soft:rgba(168,116,31,0.12);
  --on-gold:#ffffff;
  --bg:#f4f2ee;
  --surface:#ffffff;
  --surface-2:#f8f6f2;
  --surface-3:#ece8e0;
  --text:#1b1f27;
  --text-dim:#566071;
  --text-faint:#7e8797;
  --secondary:#c2473d;
  --secondary-soft:rgba(194,71,61,0.10);
  --tertiary:#1f8a70;
  --tertiary-soft:rgba(31,138,112,0.10);
  --rose:#b83b6b;
  --rose-soft:rgba(184,59,107,0.10);
  --success:#2b8a5b;
  --success-soft:rgba(43,138,91,0.10);
  --warning:#9a6a0e;
  --warning-soft:rgba(154,106,14,0.12);
  --danger:#c2392d;
  --danger-soft:rgba(194,57,45,0.10);
  --type-normal:#8a6d00;
  --type-normal-soft:rgba(200,160,0,0.16);
  --type-fixed:#1d4ed8;
  --type-fixed-soft:rgba(29,78,216,0.10);
  --border:#e3ded4;
  --border-strong:#cfc8ba;
  --shadow:rgba(40,32,16,0.10);
  --shadow-strong:rgba(40,32,16,0.22);
  --ring:rgba(168,116,31,0.30);
  --overlay:rgba(24,20,12,0.5);
  --glass:rgba(244,242,238,0.8);
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh;
}
h1,h2,h3,h4{ font-family:var(--font-display); text-wrap:balance; margin:0; color:var(--text); }
p{ margin:0; }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; font-size:14px; }
a{ color:var(--accent-strong); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.display{ font-family:var(--font-display); }




/* Aviso de manutenção programada (cadastrado pelo Supervisor) — só aparece
   para o Administrador/Barbeiro, nunca na tela de agendamento do cliente
   (ver includes/layout_top.php). Fica fora do fluxo "sticky" do .topbar de
   propósito: rola junto com a página em vez de ficar fixo, para não
   competir por espaço com a barra de navegação em telas pequenas. */
.maintenance-banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 20px; background:var(--warning-soft); color:var(--warning);
  border-bottom:1px solid var(--warning); font-size:13.5px; font-weight:600;
}
.maintenance-banner .ic{ flex:none; font-size:15px; }
.maintenance-banner .txt{ flex:1 1 auto; min-width:0; }
.maintenance-banner .txt strong{ font-weight:700; }
.maintenance-banner-close{
  flex:none; appearance:none; border:none; background:transparent; color:inherit;
  font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:8px; opacity:.75;
}
.maintenance-banner-close:hover{ opacity:1; background:rgba(0,0,0,0.08); }
@media (max-width:640px){
  .maintenance-banner{ padding:9px 12px; font-size:12.5px; }
}
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; min-width:0; text-decoration:none; }
.brand-logo{ width:42px; height:42px; border-radius:11px; flex:none; overflow:hidden; background:#0b0904;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--border-strong); }
.brand-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Sem logo configurada ainda (Horários → Marca própria): mostra um ícone neutro no lugar da imagem. */
.brand-logo.placeholder{ display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:17px; background:var(--surface-2); }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-text .name{ font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.brand-text .tag{ font-size:11px; color:var(--text-faint); letter-spacing:.6px; text-transform:uppercase; white-space:nowrap; }
.app-version{ font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--text-faint);
  background:var(--surface-3); padding:2px 7px; border-radius:99px; vertical-align:middle; margin-left:2px; letter-spacing:.2px; }

.user-chip{ display:flex; align-items:center; gap:10px; }
/* Círculo de avatar: a foto da pessoa (img cobrindo o círculo) ou, sem foto
   cadastrada, as iniciais do nome sobre uma cor de fundo estável (ver
   mpb_avatar_html() em includes/helpers.php e o equivalente em JS usado no
   "quem está online", assets/js/presence.js). */
.avatar-circle{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  color:#fff; font-weight:700; overflow:hidden; flex:none; line-height:1; box-shadow:0 0 0 2px var(--surface); }
.avatar-circle img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-sm{ width:24px; height:24px; font-size:10px; }
.avatar-md{ width:34px; height:34px; font-size:13px; }
.avatar-lg{ width:64px; height:64px; font-size:22px; }
/* Pilha de avatares sobrepostos (quem está online agora, no botão de presença). */
.avatar-stack{ display:inline-flex; align-items:center; }
.avatar-stack .avatar-circle{ margin-left:-8px; }
.avatar-stack .avatar-circle:first-child{ margin-left:0; }
/* "+N" ao final da pilha quando há mais gente online do que cabe nos avatares mostrados. */
.avatar-overflow{ background:var(--surface-3); color:var(--text-dim); font-size:9.5px; }
.presence-widget{ position:relative; }
.presence-dot{ width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 rgba(111,174,94,0.6); animation:presence-pulse 2s infinite; flex:none; }
@keyframes presence-pulse{
  0%{ box-shadow:0 0 0 0 rgba(111,174,94,0.55); }
  70%{ box-shadow:0 0 0 6px rgba(111,174,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(111,174,94,0); }
}
.presence-panel{ position:absolute; top:calc(100% + 8px); left:0; z-index:201; min-width:240px; max-width:300px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 12px 32px var(--shadow-strong); padding:14px; }
.presence-panel.hidden{ display:none; }
.presence-panel h4{ font-size:12.5px; font-weight:700; color:var(--text-dim); margin:0 0 10px; text-transform:uppercase; letter-spacing:.3px; }
.presence-list{ display:flex; flex-direction:column; gap:7px; max-height:280px; overflow-y:auto; }
.presence-empty{ font-size:13px; color:var(--text-faint); padding:6px 0; }
.presence-row{ display:flex; align-items:flex-start; gap:9px; padding:8px 10px; border-radius:9px; background:var(--surface-2); }
.presence-row .dot{ width:7px; height:7px; border-radius:50%; background:var(--success); flex:none; margin-top:6px; }
.presence-row .info{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.presence-row .nm{ font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.presence-row .meta{ display:flex; align-items:center; gap:7px; }
.presence-row .role{ font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--text-faint); flex:none; }
.presence-row .since{ font-size:10.5px; color:var(--text-faint); flex:none; font-family:var(--font-mono); }
@media (max-width:640px){
  .presence-panel{ left:auto; right:0; }
}
.role-badge{ font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:4px 9px; border-radius:99px; }
.role-badge.admin{ background:var(--accent-soft); color:var(--accent-strong); }
.role-badge.client{ background:var(--secondary-soft); color:var(--secondary); }
.role-badge.barber{ background:var(--type-fixed-soft); color:var(--type-fixed); }
.cat-badge{ font-size:11px; font-weight:700; letter-spacing:.3px; padding:4px 9px; border-radius:99px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.cat-badge.barber{ background:var(--accent-soft); color:var(--accent-strong); }
.cat-badge.tattoo{ background:var(--secondary-soft); color:var(--secondary); }
.cat-badge.estetica{ background:var(--tertiary-soft); color:var(--tertiary); }
.cat-badge.pet{ background:var(--warning-soft); color:var(--warning); }
.cat-badge.salao{ background:var(--rose-soft); color:var(--rose); }
.user-name{ font-weight:700; font-size:13.5px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.lang-switcher{ display:inline-flex; }
.lang-switcher select{ appearance:none; -webkit-appearance:none; border:1px solid var(--border-strong); background:var(--surface-2);
  color:var(--text); padding:6px 26px 6px 10px; border-radius:7px; font-weight:600; font-size:12.5px; cursor:pointer;
  font-family:var(--font-body);
  background-image:linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position:calc(100% - 14px) center, calc(100% - 9px) center; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.lang-switcher select:hover{ background-color:var(--surface-3); }
.lang-switcher select:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
@media (max-width:640px){
  .lang-switcher select{ max-width:52px; padding:6px 20px 6px 8px; text-overflow:ellipsis; }
}

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--text); padding:9px 15px; border-radius:var(--radius-sm); font-weight:600;
  font-size:13.5px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space:nowrap; user-select:none; text-decoration:none; }
.btn:hover{ background:var(--surface-3); }
.btn:active{ transform:scale(.97); }
.btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.btn.primary{ background:linear-gradient(135deg,var(--accent),var(--accent-strong)); border-color:transparent; color:var(--on-accent); }
.btn.primary:hover{ filter:brightness(1.07); background:linear-gradient(135deg,var(--accent),var(--accent-strong)); }
.btn.danger{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
.btn.danger:hover{ filter:brightness(0.95); }
.btn.ghost{ background:transparent; border-color:transparent; }
.btn.ghost:hover{ background:var(--surface-2); }
.btn.sm{ padding:6px 11px; font-size:12.5px; border-radius:7px; }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }


.auth-wrap{ min-height:100vh; display:flex; flex-direction:column;
  background: radial-gradient(1100px 460px at 12% -8%, var(--accent-soft) 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 0%, var(--secondary-soft) 0%, transparent 55%), var(--bg); }
.auth-header{ display:flex; align-items:center; gap:12px; padding:22px 24px; }
.auth-body{ flex:1; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; max-width:980px; width:100%; }
.auth-pitch{ padding:12px 8px; }
.auth-pitch .eyebrow{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--accent-strong); margin-bottom:14px; display:block; }
.auth-pitch h1{ font-size:clamp(32px,5vw,48px); font-weight:800; line-height:1.05; margin-bottom:16px; }
.auth-pitch h1 em{ font-style:italic; color:var(--accent-strong); }
.auth-pitch p{ color:var(--text-dim); font-size:15.5px; max-width:44ch; margin-bottom:20px; }
.pitch-list{ display:flex; flex-direction:column; gap:12px; }
.pitch-list .row{ display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--text-dim); }
.pitch-list .dot{ width:30px; height:30px; border-radius:9px; flex:none; background:var(--secondary-soft); color:var(--secondary);
  display:flex; align-items:center; justify-content:center; font-size:13px; }
.pitch-list .dot.b{ background:var(--accent-soft); color:var(--accent-strong); }
.pitch-list .dot.c{ background:var(--success-soft); color:var(--success); }

.auth-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:0 20px 50px var(--shadow-strong); padding:8px; width:100%; max-width:420px; margin:0 auto; }
.auth-tabs{ display:flex; gap:4px; padding:8px; }
.auth-tab{ flex:1; text-align:center; padding:10px; border-radius:var(--radius-sm); font-weight:700; font-size:13.5px;
  cursor:pointer; color:var(--text-dim); background:transparent; border:1px solid transparent; text-decoration:none; display:block; }
.auth-tab.active{ background:var(--surface-2); color:var(--text); border-color:var(--border); }
.auth-panel{ padding:18px 22px 24px; }

/* ---------- Tela inicial "Escolha seu serviço" (BARBER & TATTOO) ---------- */
.choose-body{ flex:1; display:flex; align-items:center; justify-content:center; padding:28px 20px 56px; }
.choose-inner{ max-width:1100px; width:100%; text-align:center; }
.choose-hero-logo{ max-height:120px; width:auto; max-width:80%; margin:0 auto 18px; display:block; object-fit:contain; }
.choose-eyebrow{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:3px; text-transform:uppercase; color:var(--accent-strong); margin-bottom:12px; display:block; }
.choose-inner h1{ font-size:clamp(30px,5vw,46px); font-weight:800; margin-bottom:10px; }
.choose-inner .sub{ color:var(--text-dim); font-size:15.5px; margin-bottom:36px; }
.choose-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; text-align:left; }
.choose-grid > .choose-card{ flex:0 0 calc((100% - 36px) / 3); min-width:0; }
.choose-card{ display:block; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.choose-card:hover{ transform:translateY(-5px); border-color:var(--accent); box-shadow:0 20px 40px -16px var(--shadow-strong); }
.choose-photo{ height:230px; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.choose-photo.ph-barber{ background-color:var(--accent-soft); background-image:linear-gradient(155deg, var(--accent-soft), var(--surface-2)); }
.choose-photo.ph-tattoo{ background-color:var(--secondary-soft); background-image:linear-gradient(155deg, var(--secondary-soft), var(--surface-2)); }
.choose-photo.ph-estetica{ background-color:var(--tertiary-soft); background-image:linear-gradient(155deg, var(--tertiary-soft), var(--surface-2)); }
.choose-photo.ph-pet{ background-color:var(--warning-soft); background-image:linear-gradient(155deg, var(--warning-soft), var(--surface-2)); }
.choose-photo .ic{ font-size:52px; color:var(--accent-strong); opacity:.85; }
.choose-photo.ph-tattoo .ic{ color:var(--secondary); }
.choose-photo.ph-estetica .ic{ color:var(--tertiary); }
.choose-photo.ph-pet .ic{ color:var(--warning); }
.choose-photo.ph-salao{ background-color:var(--rose-soft); background-image:linear-gradient(155deg, var(--rose-soft), var(--surface-2)); }
.choose-photo.ph-salao .ic{ color:var(--rose); }
.choose-card-body{ padding:18px 20px 22px; }
.choose-card-body .kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-faint); margin-bottom:5px; }
.choose-card-body h3{ font-size:22px; font-weight:800; margin-bottom:6px; }
.choose-card-body p{ color:var(--text-dim); font-size:13.5px; margin-bottom:16px; min-height:1.4em; }
.choose-card-body .go{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:var(--accent-strong); }
.choose-card-body .go i{ transition:transform .18s ease; }
.choose-card:hover .go i{ transform:translateX(4px); }
@media (max-width:1100px){ .choose-grid > .choose-card{ flex-basis:calc((100% - 18px) / 2); } .choose-inner{ max-width:920px; } }
@media (max-width:720px){ .choose-grid > .choose-card{ flex-basis:100%; } .choose-photo{ height:190px; } }

/* ---------- Tela "Empresas" (lista de unidades de um segmento, antes do login) ---------- */
.company-back{ display:inline-flex; align-items:center; gap:8px; color:var(--text-dim); text-decoration:none; font-weight:600;
  font-size:13.5px; margin-bottom:22px; }
.company-back:hover{ color:var(--accent-strong); }
.company-list{ display:flex; flex-direction:column; gap:14px; text-align:left; }
.company-item{ display:flex; align-items:center; gap:16px; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.company-item:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 16px 32px -18px var(--shadow-strong); }
.company-item[hidden]{ display:none; }
.company-icon{ flex:none; width:48px; height:48px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-strong); font-size:19px; overflow:hidden; }
.company-icon.tattoo{ background:var(--secondary-soft); color:var(--secondary); }
.company-icon.estetica{ background:var(--tertiary-soft); color:var(--tertiary); }
.company-icon.pet{ background:var(--warning-soft); color:var(--warning); }
.company-icon.salao{ background:var(--rose-soft); color:var(--rose); }
/* Negócio com marca própria (Horários → Marca própria) cadastrada: mostra a logo em vez do ícone genérico. */
.company-icon.has-logo{ background:var(--surface-2); }
.company-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.company-info{ flex:1; min-width:0; }
.company-name{ font-size:17px; font-weight:800; margin-bottom:4px; }
.company-address{ display:flex; align-items:center; gap:6px; color:var(--text-dim); font-size:13px; }
.company-address i{ color:var(--text-faint); font-size:12px; }
.company-arrow{ flex:none; color:var(--accent-strong); transition:transform .18s ease; }
.company-item:hover .company-arrow{ transform:translateX(4px); }
@media (max-width:520px){ .company-item{ padding:14px; gap:12px; } .company-icon{ width:40px; height:40px; font-size:16px; } .company-name{ font-size:15.5px; } }
.company-filters{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.company-select,
.company-search{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); padding:11px 14px; }
.company-select i,
.company-search i{ color:var(--text-faint); font-size:14px; }
.company-select select,
.company-search input{ flex:1; min-width:0; border:none; background:none; outline:none; color:var(--text); font-size:14.5px; font-family:inherit; }
.company-select select{ appearance:none; -webkit-appearance:none; cursor:pointer; }
.company-search input::placeholder{ color:var(--text-faint); }
.company-select:focus-within,
.company-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.company-empty{ text-align:center; color:var(--text-dim); font-size:14px; padding:20px 0 0; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--text-dim); margin-bottom:6px; letter-spacing:.2px; }
.field input, .field select, .field textarea{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text); outline:none; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.field-hint{ font-size:11.5px; color:var(--text-faint); margin-top:5px; }
.radio-row{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-opt{ display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text-dim); font-size:13.5px; font-weight:600; cursor:pointer; flex:1; min-width:120px; justify-content:center; }
.radio-opt input[type="radio"]{ width:16px; height:16px; flex:none; padding:0; margin:0; border:none; border-radius:50%; background:none; accent-color:var(--accent); outline:none; }
.radio-opt:has(input:checked){ border-color:var(--accent); color:var(--text); background:var(--accent-soft); }
.form-error{ background:var(--danger-soft); color:var(--danger); border-radius:9px; padding:9px 11px; font-size:13px; font-weight:600; margin-bottom:12px; }
.form-note{ background:var(--accent-soft); color:var(--accent-strong); border-radius:9px; padding:9px 11px; font-size:12.5px; font-weight:600; margin-bottom:14px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.three-col{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }



.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.section-head h2{ font-size:22px; font-weight:700; }
.section-head .sub{ color:var(--text-dim); font-size:13px; margin-top:2px; }
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:0 1px 2px var(--shadow); }
.empty-state{ padding:40px 20px; text-align:center; color:var(--text-faint); }
.empty-state .glyph{ font-family:var(--font-display); font-size:32px; color:var(--text-faint); margin-bottom:8px; }

.alert-banner{ padding:11px 14px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; border:1px solid transparent; }
.alert-banner.error{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }
.alert-banner.ok{ background:var(--success-soft); color:var(--success); border-color:var(--success); }
.alert-banner.warning{ background:var(--warning-soft); color:var(--warning); border-color:var(--warning); }

.week-nav{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.day-strip{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; margin-bottom:12px; }
.day-chip{ flex:none; min-width:64px; text-align:center; padding:7px 4px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); cursor:pointer; }
.day-chip .d{ font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px; }
.day-chip .n{ font-family:var(--font-mono); font-weight:700; font-size:15px; }
.day-chip.selected{ background:var(--accent-soft); border-color:var(--accent); }
.day-chip.blocked{ opacity:.4; cursor:not-allowed; }
.day-chip.blocked .n{ text-decoration:line-through; }

.cal-scroll{ overflow:auto; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); max-height:62vh; }
.cal-grid{ display:grid; grid-template-columns:64px repeat(7,minmax(122px,1fr)); min-width:930px; }
.cal-corner{ position:sticky; top:0; left:0; z-index:3; background:var(--surface-2); border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
.cal-daycol-head{ position:sticky; top:0; z-index:2; background:var(--surface-2); border-bottom:1px solid var(--border);
  border-right:1px solid var(--border); padding:8px 6px; text-align:center; }
.cal-daycol-head .d{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); }
.cal-daycol-head .n{ font-family:var(--font-mono); font-weight:700; font-size:16px; }
.cal-daycol-head.today{ color:var(--accent-strong); }
.cal-daycol-head.blocked{ opacity:.45; }
.cal-time{ position:sticky; left:0; z-index:1; background:var(--surface-2); border-right:1px solid var(--border);
  border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); padding:3px 6px; text-align:right; }
.cal-cell{ border-right:1px solid var(--border); border-bottom:1px solid var(--border); min-height:30px; position:relative; padding:2px; background:var(--surface); }
.cal-cell.hour-start{ border-bottom-color:var(--border-strong); }
.cal-cell.drop-hover{ background:var(--accent-soft); }
.cal-cell.past{ background:var(--surface-2); opacity:.55; }
.cal-cell.blocked{ background:repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 6px, var(--surface-3) 6px, var(--surface-3) 12px); opacity:.6; cursor:not-allowed; }
.appt-card{ position:relative; border-radius:7px; padding:4px 7px; font-size:11.5px; line-height:1.25; cursor:grab; border-left:3px solid var(--accent);
  background:var(--accent-soft); color:var(--text); box-shadow:0 1px 3px var(--shadow); overflow:hidden; }
.appt-card .nm{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appt-card .sv{ color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10.5px; }
.appt-card.cancelled{ opacity:.5; text-decoration:line-through; cursor:default; }
.appt-card.done{ opacity:.6; cursor:default; }
.appt-card.dragging{ opacity:.35; }
.appt-card.has-finalize-btn .nm, .appt-card.has-finalize-btn .sv{ padding-right:18px; }
/* Botão "Finalizar atendimento": clique único e direto, sem depender de duplo clique. */
.appt-finalize-btn{ position:absolute; top:3px; right:3px; width:16px; height:16px; border-radius:50%; border:none; padding:0;
  background:var(--surface); color:var(--text-dim); display:flex; align-items:center; justify-content:center; font-size:9px;
  cursor:pointer; box-shadow:0 1px 2px var(--shadow); line-height:1; }
.appt-finalize-btn:hover{ background:var(--success); color:#fff; }

.view-toggle{ display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:2px; }
.view-toggle button, .view-toggle a{ border:none; background:transparent; color:var(--text-dim); font-weight:700; font-size:12.5px; padding:6px 12px;
  border-radius:7px; cursor:pointer; text-decoration:none; display:inline-block; }
.view-toggle button.active, .view-toggle a.active{ background:var(--accent); color:var(--on-accent); }

.month-nav{ display:flex; align-items:center; gap:10px; }
.month-nav-label{ font-family:var(--font-mono); font-weight:700; font-size:14px; min-width:160px; text-align:center; }

.month-grid{ display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden; background:var(--surface); }
.month-head-cell{ background:var(--surface-2); text-align:center; font-size:11px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--text-faint); padding:8px 4px; border-bottom:1px solid var(--border); }
.month-cell{ min-height:112px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:6px;
  position:relative; background:var(--surface); display:flex; flex-direction:column; gap:4px; }
.month-grid > .month-cell:nth-child(7n+7){ border-right:none; }
.month-daynum{ font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--text-dim); flex:none; }
.month-cell.today .month-daynum{ color:var(--accent-strong); }
.month-cell.today .today-dot{ color:var(--accent); font-size:16px; }
.month-cell.other-month{ background:var(--surface-2); }
.month-cell.other-month .month-daynum{ color:var(--text-faint); opacity:.6; }
.month-cell.past{ opacity:.6; }
.month-cell.blocked{ background:repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 6px, var(--surface-3) 6px, var(--surface-3) 12px); cursor:not-allowed; }
.month-cell.drop-hover{ outline:2px solid var(--accent); outline-offset:-2px; background:var(--accent-soft); }
.month-chips{ display:flex; flex-direction:column; gap:3px; overflow-y:auto; max-height:88px; }
.appt-chip{ position:relative; border-radius:6px; padding:3px 6px; font-size:10.5px; line-height:1.3; cursor:grab; border-left:3px solid var(--accent);
  background:var(--accent-soft); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; }
.appt-chip .t{ font-family:var(--font-mono); font-weight:700; }
.appt-chip.done{ opacity:.6; cursor:default; }
.appt-chip.dragging{ opacity:.35; }
.appt-chip.has-finalize-btn{ padding-right:20px; }
.chip-finalize-btn{ position:absolute; top:50%; right:2px; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; border:none; padding:0;
  background:var(--surface); color:var(--text-dim); display:flex; align-items:center; justify-content:center; font-size:8px;
  cursor:pointer; box-shadow:0 1px 2px var(--shadow); line-height:1; }
.chip-finalize-btn:hover{ background:var(--success); color:#fff; }
@media (max-width:900px){
  .month-cell{ min-height:82px; padding:4px; }
  .month-chips{ max-height:56px; }
  .month-head-cell{ font-size:9.5px; padding:6px 2px; }
}
.appt-ghost{ position:fixed; z-index:200; pointer-events:none; border-radius:7px; padding:5px 9px; font-size:11.5px;
  background:var(--accent); color:var(--on-accent); box-shadow:0 8px 22px var(--shadow-strong); font-weight:700; }

/* Cor do card do agendamento por TIPO (agenda mensal, semanal e "Meus agendamentos"):
   amarelo para agendamento normal, azul para cliente fixo, vermelho para o corte de
   fidelidade (10º grátis) — nessa ordem de prioridade. As três usam tokens de tema
   (claro/escuro) para o texto continuar legível nos dois modos. */
.appt-type-normal{ border-left-color:var(--type-normal); background:var(--type-normal-soft); color:var(--text); }
.appt-type-fixed{ border-left-color:var(--type-fixed); background:var(--type-fixed-soft); color:var(--text); }
.appt-type-loyalty{ border-left-color:var(--danger); background:var(--danger-soft); color:var(--text); }

/* Cores por tipo de serviço — usadas apenas na etiqueta de serviço dos avisos
   (svc-tag); o tema escuro é o padrão do sistema, então os tons escuros/legíveis
   vêm sem guarda nenhuma; o modo claro (opt-in) recebe o tom pastel original. */
.svc-corte_simples{ border-left-color:#8a8f5e; background:#2a2e1c; color:#eef0dd; }
.svc-corte_tesoura{ border-left-color:#4e7d8c; background:#1c2a2e; color:#dfeaee; }
.svc-corte_degrade{ border-left-color:#6a5a9c; background:#241f34; color:#e4e0f2; }
.svc-barba{ border-left-color:#8a5a12; background:var(--warning-soft); }
.svc-bigode{ border-left-color:#9c6a1f; background:var(--accent-soft); }
.svc-barba_bigode{ border-left-color:#7c2c20; background:var(--secondary-soft); }
.svc-corte_barba_bigode{ border-left-color:#9c2b1f; background:var(--danger-soft); }
.svc-pintura{ border-left-color:#3c6a38; background:var(--success-soft); }
.svc-outro{ border-left-color:#6c5c46; background:var(--surface-3); }
:root[data-theme="light"] .svc-corte_simples{ background:#eef0dd; color:#241c14; }
:root[data-theme="light"] .svc-corte_tesoura{ background:#dfeaee; color:#241c14; }
:root[data-theme="light"] .svc-corte_degrade{ background:#e4e0f2; color:#241c14; }

.svc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.svc-chip{ border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); padding:9px 14px;
  border-radius:99px; font-size:13px; font-weight:700; cursor:pointer; }
.svc-chip.active{ background:var(--accent); border-color:var(--accent-strong); color:var(--on-accent); }

/* Escolha do barbeiro no agendamento: cartões com avatar + nota, em vez de um <select> simples. */
.prof-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.prof-card{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--border-strong); background:var(--surface-2); cursor:pointer; transition:border-color .12s ease, background .12s ease; }
.prof-card:hover{ background:var(--surface-3); }
.prof-card.active{ border-color:var(--accent); background:var(--accent-soft); }
.prof-nopref{ background:var(--surface-3); color:var(--text-faint); font-size:15px; }
.pc-body{ min-width:0; }
.pc-name{ font-weight:700; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-rating{ display:flex; align-items:center; gap:6px; margin-top:2px; }
.pc-rating .stars{ font-size:12px; margin-top:0; }
.pc-count{ font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); }
.pc-rating.pc-norating{ font-size:11.5px; color:var(--text-faint); font-style:italic; }

.slot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px; }
.slot-btn{ padding:9px 4px; text-align:center; border-radius:9px; border:1px solid var(--border-strong); background:var(--surface);
  font-family:var(--font-mono); font-weight:600; font-size:13px; cursor:pointer; }
.slot-btn.taken{ opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.slot-btn.selected{ background:var(--accent); border-color:var(--accent-strong); color:var(--on-accent); }
.slot-btn:hover:not(.taken):not(.selected){ border-color:var(--accent); }
.slot-btn.waitlistable{ opacity:.6; cursor:pointer; border-style:dashed; border-color:var(--warning); }
.slot-btn.waitlistable:hover{ opacity:.85; border-color:var(--warning); }

.appt-list{ display:flex; flex-direction:column; gap:10px; }
.appt-row{ display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); flex-wrap:wrap; }
.appt-row .datebox{ flex:none; width:56px; text-align:center; padding:8px 4px; border-radius:10px; background:var(--surface-2); font-family:var(--font-mono); }
.appt-row .datebox .dd{ font-size:18px; font-weight:700; line-height:1; }
.appt-row .datebox .mm{ font-size:10px; color:var(--text-faint); text-transform:uppercase; }
.appt-row .info{ flex:1; min-width:0; }
.appt-row .info .svc{ font-weight:700; font-size:14px; }
.appt-row .info .meta{ font-size:12.5px; color:var(--text-dim); font-family:var(--font-mono); }
.appt-row.cancelled{ opacity:.5; }
.status-pill{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; text-transform:uppercase; letter-spacing:.3px; }
.status-pill.scheduled{ background:var(--success-soft); color:var(--success); }
.status-pill.cancelled{ background:var(--danger-soft); color:var(--danger); }
.status-pill.done{ background:var(--surface-3); color:var(--text-faint); }
.drag-handle{ cursor:grab; color:var(--text-faint); font-size:18px; flex:none; touch-action:none; }

table.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.data-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint);
  padding:9px 12px; border-bottom:1px solid var(--border-strong); white-space:nowrap; }
table.data-table td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.data-table tr:last-child td{ border-bottom:none; }
.table-scroll{ overflow-x:auto; }
.qty-badge{ font-family:var(--font-mono); font-weight:700; }
.qty-badge.low{ color:var(--danger); }
.stock-chip{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:99px; text-transform:uppercase; }
.stock-chip.ok{ background:var(--success-soft); color:var(--success); }
.stock-chip.low{ background:var(--danger-soft); color:var(--danger); }

.reminder-sent-tag{ font-size:12px; font-weight:700; color:var(--success); }
.freq-chip{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; }
.freq-chip.weekly{ background:var(--accent-soft); color:var(--accent-strong); }
.freq-chip.monthly{ background:var(--secondary-soft); color:var(--secondary); }
.freq-chip.biweekly{ background:var(--danger-soft); color:var(--danger); }
.freq-chip.none{ background:var(--surface-3); color:var(--text-faint); }
.pay-chip{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:99px; text-transform:uppercase; }
.pay-chip.pago{ background:var(--success-soft); color:var(--success); }
.pay-chip.parcial{ background:var(--warning-soft); color:var(--warning); }
.pay-chip.pendente{ background:var(--danger-soft); color:var(--danger); }
.pay-chip.aberto{ background:var(--warning-soft); color:var(--warning); }

.grid-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.stat-tile{ padding:16px 18px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface); }
.stat-tile .num{ font-family:var(--font-mono); font-size:26px; font-weight:700; }
.stat-tile .lbl{ font-size:12px; color:var(--text-dim); margin-top:2px; }

/* Fidelidade */
.loyalty-row{ display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
.loyalty-row .nm{ font-weight:700; min-width:160px; }
.loyalty-bar{ flex:1; height:10px; border-radius:99px; background:var(--surface-2); overflow:hidden; min-width:120px; }
.loyalty-bar .fill{ height:100%; background:var(--accent); border-radius:99px; transition:width .3s ease; }
.loyalty-bar.full .fill{ background:var(--success); }
.loyalty-count{ font-family:var(--font-mono); font-weight:700; font-size:13px; min-width:44px; text-align:right; }
.loyalty-badge{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; background:var(--success-soft); color:var(--success); }

/* Profissionais */
.prof-card{ display:flex; gap:14px; padding:14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); align-items:center; }
.prof-photo{ width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--surface-2); flex:none; border:2px solid var(--border-strong); }
.prof-photo.placeholder{ display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:20px; color:var(--text-faint); }
.prof-info{ flex:1; min-width:0; }
.prof-info .nm{ font-weight:700; }
.prof-info .meta{ font-size:12.5px; color:var(--text-dim); }
.prof-status{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:99px; }
.prof-status.active{ background:var(--success-soft); color:var(--success); }
.prof-status.inactive{ background:var(--surface-3); color:var(--text-faint); }

/* Dashboard: KPIs coloridos, resumo executivo e gráficos (SVG feitos à mão, sem dependências externas) */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:20px; }
.kpi-tile{ position:relative; padding:16px 18px 14px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface); overflow:hidden; }
.kpi-tile .kpi-head{ display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--kpi-c, var(--accent)); margin-bottom:11px; }
.kpi-tile .kpi-head .ic{ width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--kpi-c, var(--accent)) 18%, transparent); color:var(--kpi-c, var(--accent)); font-size:12px; flex:none; }
.kpi-tile .num{ font-family:var(--font-mono); font-size:23px; font-weight:700; color:var(--text); line-height:1.15; }
.kpi-tile .lbl{ font-size:11.5px; color:var(--text-faint); margin-top:4px; }

.dash-layout{ display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start; }
.exec-summary{ position:relative; padding:18px 18px 16px 21px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface); overflow:hidden; }
.exec-summary::before{ content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background:var(--accent); }
.exec-summary h3{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--accent); margin-bottom:10px; }
.exec-summary .headline{ font-size:14.5px; font-weight:700; line-height:1.4; margin-bottom:8px; color:var(--text); }
.exec-summary p{ font-size:12.5px; color:var(--text-dim); line-height:1.6; margin:0 0 16px; }
.exec-focus{ display:flex; gap:9px; padding:10px 11px; border-radius:10px; background:var(--warning-soft); margin-bottom:9px; align-items:flex-start; }
.exec-focus:last-child{ margin-bottom:0; }
.exec-focus i{ color:var(--warning); font-size:12.5px; margin-top:2px; flex:none; }
.exec-focus .t{ font-size:11.5px; font-weight:700; color:var(--text); margin-bottom:2px; }
.exec-focus .d{ font-size:11.5px; color:var(--text-dim); line-height:1.45; }
@media (max-width:900px){ .dash-layout{ grid-template-columns:1fr; } }

.dash-charts{ display:grid; grid-template-columns:1fr; gap:18px; }
.dash-charts.two-up{ grid-template-columns:1fr 1fr; }
@media (max-width:820px){ .dash-charts.two-up{ grid-template-columns:1fr; } }
.chart-card{ padding:18px; }
.chart-card h3{ font-size:15px; margin-bottom:4px; }
.chart-card .sub{ font-size:12px; color:var(--text-dim); margin-bottom:14px; }
.chart-svg .area-fill{ opacity:.85; }
.chart-svg .line-path{ fill:none; stroke-width:2.5px; stroke-linejoin:round; stroke-linecap:round; }
.chart-svg .pt{ transition:r .15s ease; cursor:pointer; }
.chart-svg .pt:hover{ r:5.5; }
.chart-svg .bar-shape{ cursor:pointer; transition:opacity .15s ease; }
.chart-svg .bar-shape:hover{ opacity:.82; }
.chart-legend{ display:flex; gap:16px; margin-bottom:8px; font-size:12px; color:var(--text-dim); }
.chart-legend .lg{ display:flex; align-items:center; gap:6px; }
.chart-legend .sw{ width:10px; height:10px; border-radius:3px; }
.chart-svg text{ font-family:var(--font-mono); fill:var(--text-dim); }
.chart-svg .axis-line{ stroke:var(--border-strong); stroke-width:1; }
.bar-tip{ font-size:10px; }
.year-select{ padding:7px 10px; border-radius:8px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); }

/* Modal */
.modal-overlay{ position:fixed; inset:0; background:var(--overlay); backdrop-filter:blur(4px); display:flex; align-items:center;
  justify-content:center; z-index:100; padding:16px; }
.modal-box{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 24px 60px var(--shadow-strong);
  width:100%; max-width:460px; max-height:88vh; overflow:auto; }
.modal-box.wide{ max-width:640px; }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:18px 20px 4px; }
.modal-head h3{ font-size:19px; }
.modal-close{ background:none; border:none; font-size:20px; color:var(--text-faint); cursor:pointer; line-height:1; padding:4px; }
.modal-body{ padding:14px 20px 22px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; padding-top:6px; flex-wrap:wrap; }

.alert-modal .modal-box{ max-width:400px; text-align:center; border-color:var(--accent); }
.alert-modal .ring{ width:56px; height:56px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center; font-size:26px; margin:20px auto 6px; }
.alert-modal.prospeccao .ring{ background:var(--secondary-soft); color:var(--secondary); }
.alert-modal.cancelado .modal-box{ border-color:var(--danger); }
.alert-modal.cancelado .ring{ background:var(--danger-soft); color:var(--danger); }

.repeat-banner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 18px; margin-bottom:16px; border-radius:14px; background:var(--accent-soft); border:1px solid var(--accent); }

/* Modal "Meus dados" (assets/js/booking.js, tela de agendamento do cliente). */
.profile-photo-row{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.pm-photo-actions{ display:flex; flex-wrap:wrap; gap:8px; }

/* Modal de avaliação do atendimento (assets/js/rating-modal.js). */
.rating-modal .modal-box{ max-width:420px; text-align:center; border-color:var(--accent); }
.rating-prof{ display:flex; align-items:center; gap:12px; text-align:left; padding:4px 0 14px; }
.rp-name{ font-weight:700; font-size:15px; }
.rp-svc{ font-size:12.5px; color:var(--text-faint); margin-top:2px; }
.rm-progress{ font-size:11.5px; color:var(--text-faint); margin-bottom:6px; }
#rm-stars{ font-size:34px; justify-content:center; gap:6px; margin:4px 0 16px; }
.rm-comment{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text); font-family:inherit; resize:vertical; }
.repeat-banner .rb-title{ font-weight:700; font-size:14.5px; }
.repeat-banner .rb-sub{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.repeat-banner .rb-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.booking-summary{ margin-top:22px; padding:14px 16px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); }
.booking-summary .bs-title{ font-size:12.5px; font-weight:700; color:var(--text-dim); letter-spacing:.3px; text-transform:uppercase; margin-bottom:10px; }
.bs-rows{ display:flex; flex-direction:column; gap:7px; }
.bs-row{ display:flex; align-items:baseline; gap:8px; font-size:14px; }
.bs-row .bs-k{ color:var(--text-dim); font-weight:600; min-width:92px; flex:none; }
.bs-row .bs-v{ font-weight:700; color:var(--text); }
.bs-row .bs-v.muted{ font-weight:600; color:var(--text-faint); }
.bs-row .bs-v.price{ font-family:var(--font-mono); color:var(--accent-strong); }
.alert-modal h3{ font-size:20px; }
.alert-modal .who{ font-family:var(--font-display); font-size:22px; font-weight:700; margin:10px 0 2px; }
.alert-modal .when{ font-family:var(--font-mono); color:var(--text-dim); font-size:14px; }
.alert-modal .svc-tag{ display:inline-block; margin-top:10px; padding:5px 12px; border-radius:99px; font-weight:700; font-size:12.5px; }

#toast-wrap{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{ background:var(--text); color:var(--bg); padding:10px 18px; border-radius:99px; font-size:13.5px; font-weight:600;
  box-shadow:0 8px 20px var(--shadow-strong); animation:toast-in .18s ease; }
.toast.error{ background:var(--danger); color:#fff; }
.toast.ok{ background:var(--success); color:#fff; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

.footer-note{ text-align:center; color:var(--text-faint); font-size:11.5px; padding:18px 0 4px; }
.footer-note a{ color:var(--text-faint); text-decoration:underline; }
.footer-note a:hover{ color:var(--accent-strong); }
.footer-dev-credit{ text-align:center; color:var(--text-faint); font-size:11px; padding:2px 0 16px; }
.footer-dev-credit a{ color:var(--text-faint); text-decoration:underline; font-weight:600; }
.footer-dev-credit a:hover{ color:var(--accent-strong); }

.share-fab{ position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:200;
  background:var(--accent); color:var(--on-accent); border:1px solid var(--accent-strong); border-left:none;
  border-radius:12px 0 0 12px; padding:14px 10px; font-family:inherit; font-weight:700; font-size:13px;
  cursor:pointer; box-shadow:-2px 2px 14px var(--shadow-strong); display:flex; flex-direction:column;
  align-items:center; gap:6px; writing-mode:vertical-rl; text-orientation:mixed; }
.share-fab:hover{ background:var(--accent-strong); }
.share-fab .ic{ writing-mode:horizontal-tb; font-size:17px; }
.share-panel{ position:fixed; top:50%; right:56px; transform:translateY(-50%); z-index:201;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 12px 32px var(--shadow-strong); padding:14px; display:flex; flex-direction:column;
  gap:6px; min-width:216px; }
.share-panel.hidden{ display:none; }
.share-panel h4{ font-size:12.5px; font-weight:700; color:var(--text-dim); margin:0 0 6px; text-transform:uppercase; letter-spacing:.3px; }
.share-opt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; text-decoration:none;
  color:var(--text); font-weight:600; font-size:13.5px; background:var(--surface-2); border:none; width:100%;
  text-align:left; cursor:pointer; font-family:inherit; }
.share-opt:hover{ background:var(--surface-3); }
.share-opt .ic{ font-size:17px; width:20px; text-align:center; flex:none; }
@media (max-width:640px){
  .share-fab{ padding:10px 7px; font-size:11.5px; }
  .share-fab .ic{ font-size:15px; }
  .share-panel{ right:auto; left:50%; top:auto; bottom:16px; transform:translateX(-50%); min-width:0;
    width:calc(100vw - 32px); max-width:320px; }
}

@media (max-width:640px){
  .auth-grid{ grid-template-columns:1fr; gap:26px; }
  .auth-pitch{ text-align:center; padding:0; }
  .pitch-list{ display:none; }
  .two-col,.three-col{ grid-template-columns:1fr; }
  .section-head h2{ font-size:19px; }
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }

/* ---------- Histórico de Atualizações ---------- */
.changelog{ display:flex; flex-direction:column; gap:0; max-width:780px; }
.changelog-entry{ display:flex; gap:18px; }
.changelog-marker{ flex:none; display:flex; flex-direction:column; align-items:center; width:64px; }
.changelog-version{ font-family:var(--font-mono); font-weight:800; font-size:12.5px; color:var(--on-accent);
  background:var(--accent); padding:5px 10px; border-radius:99px; white-space:nowrap; }
.changelog-line{ flex:1; width:2px; background:var(--border-strong); margin:8px 0; min-height:24px; }
.changelog-card{ flex:1; padding:18px 20px; margin-bottom:20px; }
.changelog-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.changelog-head h3{ font-size:16.5px; }
.changelog-date{ font-size:11.5px; color:var(--text-faint); }
.changelog-list{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.changelog-list li{ color:var(--text-dim); font-size:13.5px; line-height:1.5; }
@media (max-width:640px){
  .changelog-marker{ width:44px; }
  .changelog-version{ font-size:11px; padding:4px 8px; }
}

/* ---------- WhatsApp (Prospecção / Aniversariantes) ---------- */
.wa-btn{ color:#25D366 !important; border-color:rgba(37,211,102,.35) !important; white-space:nowrap; }
.wa-btn:hover{ background:rgba(37,211,102,.12) !important; }

/* ---------- Avaliação por estrelas ---------- */
.stars{ display:inline-flex; gap:2px; margin-top:4px; font-size:15px; line-height:1; }
.stars .star{ color:var(--text-faint); }
.stars .star.filled{ color:var(--accent); }
.stars.pending .star{ cursor:pointer; transition:transform .1s ease; }
.stars.pending .star:hover{ transform:scale(1.18); }
.stars.pending:hover .star{ color:var(--accent); }
.stars.rated{ cursor:default; }

/* ---------- Aviso de cookies (rodapé, todas as páginas) ---------- */
/* Entra animado de baixo pra cima: começa deslocado para fora da tela
   (translateY) e a classe .cookie-banner-in desliza ele até a posição final —
   por padrão já fica com pointer-events:none pra não capturar cliques
   enquanto está fora da tela (relevante em telas onde ele avança por cima de
   outro conteúdo antes de terminar de aparecer). */
#mpb-cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--surface);
  border-top:3px solid var(--accent); box-shadow:0 -12px 30px -10px var(--shadow-strong);
  padding:18px 22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  transform:translateY(100%); transition:transform .45s cubic-bezier(.16,1,.3,1);
  pointer-events:none; }
#mpb-cookie-banner.cookie-banner-in{ transform:translateY(0); pointer-events:auto; }
.cookie-icon{ flex:none; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-strong); font-size:18px; }
.cookie-copy{ flex:1 1 320px; min-width:220px; }
.cookie-copy h4{ font-size:15.5px; font-weight:800; margin:0 0 4px; }
.cookie-copy p{ font-size:13px; color:var(--text-dim); margin:0; line-height:1.5; }
.cookie-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:none; }
.cookie-link-btn{ background:none; border:none; color:var(--accent-strong); font-weight:700; font-size:13px; text-decoration:underline;
  cursor:pointer; padding:6px 2px; white-space:nowrap; }
/* Botão "Preferências de cookies": pílula com ícone+texto logo que aparece
   (ao aceitar/rejeitar/salvar), recolhendo sozinho pouco depois para um
   círculo só com o ícone — .fab-collapsed controla esse estado recolhido. Os
   dois estados usam "width" fixo (não "max-width"/auto): com box-sizing:
   border-box, width já inclui o padding, e um valor fixo nos dois lados é o
   que garante uma transição suave em qualquer navegador — animar a partir de
   "auto" não tem suporte confiável. O :hover no estado recolhido reexpande a
   pílula temporariamente, só com CSS, pra quem passar o mouse lembrar o que
   o botão faz. */
.cookie-reopen-link{ position:fixed; right:14px; bottom:14px; z-index:90; height:38px; width:232px; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:999px; padding:0 14px; font-size:12px; font-weight:700; color:var(--text-dim); cursor:pointer;
  box-shadow:0 8px 20px -8px var(--shadow-strong); display:inline-flex; align-items:center; justify-content:flex-start;
  overflow:hidden; white-space:nowrap;
  transition:width .4s cubic-bezier(.16,1,.3,1), padding .4s cubic-bezier(.16,1,.3,1), background .15s ease, border-color .15s ease; }
.cookie-reopen-link .fab-label{ display:inline-block; max-width:170px; overflow:hidden; white-space:nowrap;
  margin-left:7px; opacity:1; transition:max-width .35s cubic-bezier(.16,1,.3,1), opacity .2s ease, margin-left .35s cubic-bezier(.16,1,.3,1); }
.cookie-reopen-link:hover{ color:var(--accent-strong); border-color:var(--accent); }
.cookie-reopen-link.hidden{ display:none; }
.cookie-reopen-link.fab-collapsed{ width:38px; padding:0; justify-content:center; }
.cookie-reopen-link.fab-collapsed .fab-label{ max-width:0; opacity:0; margin-left:0; }
.cookie-reopen-link.fab-collapsed:hover{ width:232px; padding:0 14px; justify-content:flex-start; }
.cookie-reopen-link.fab-collapsed:hover .fab-label{ max-width:170px; opacity:1; margin-left:7px; }
body.mpb-cookie-open #toast-wrap{ bottom:calc(18px + 96px); }
@media (max-width:720px){
  #mpb-cookie-banner{ flex-direction:column; align-items:flex-start; padding:16px; }
  .cookie-actions{ width:100%; justify-content:flex-start; }
}
@media (max-width:520px){ .cookie-reopen-link{ right:10px; bottom:10px; height:34px; } }

.cookie-pref-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:12px 0;
  border-bottom:1px solid var(--border); }
.cookie-pref-row:last-child{ border-bottom:none; }
.cookie-pref-info strong{ display:block; font-size:14px; margin-bottom:3px; }
.cookie-pref-info span{ font-size:12.5px; color:var(--text-dim); line-height:1.4; display:block; max-width:360px; }
.cookie-switch{ position:relative; flex:none; width:42px; height:24px; margin-top:2px; }
.cookie-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.cookie-switch .slider{ position:absolute; inset:0; background:var(--surface-3); border:1px solid var(--border-strong);
  border-radius:999px; transition:background .18s ease; pointer-events:none; }
.cookie-switch .slider::before{ content:""; position:absolute; width:18px; height:18px; left:2px; top:2px; background:#fff;
  border-radius:50%; transition:transform .18s ease; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.cookie-switch input:checked + .slider{ background:var(--accent); border-color:var(--accent-strong); }
.cookie-switch input:checked + .slider::before{ transform:translateX(18px); }
.cookie-switch input:disabled{ cursor:not-allowed; }
.cookie-switch input:disabled + .slider{ opacity:.6; }

/* ---------- Favoritar site / definir como página inicial (rodapé) ---------- */
/* Mesmo comportamento de recolher para círculo do .cookie-reopen-link (ver
   comentário lá, incluindo por que usamos "width" fixo nos dois estados em
   vez de "max-width"/auto): pílula com ícone+texto ao aparecer, recolhe para
   um círculo só com a estrela pouco depois, e reexpande no :hover. */
#mpb-fav-fab{ position:fixed; left:18px; bottom:18px; z-index:95; height:44px; width:180px; display:inline-flex; align-items:center; justify-content:flex-start;
  background:var(--accent); color:var(--on-accent); border:none; border-radius:999px; padding:0 16px; font-weight:800;
  font-size:13px; cursor:pointer; box-shadow:0 10px 24px -10px var(--shadow-strong);
  overflow:hidden; white-space:nowrap;
  transition:width .4s cubic-bezier(.16,1,.3,1), padding .4s cubic-bezier(.16,1,.3,1), background .15s ease; }
#mpb-fav-fab .fab-label{ display:inline-block; max-width:150px; overflow:hidden; white-space:nowrap;
  margin-left:8px; opacity:1; transition:max-width .35s cubic-bezier(.16,1,.3,1), opacity .2s ease, margin-left .35s cubic-bezier(.16,1,.3,1); }
#mpb-fav-fab:hover{ background:var(--accent-strong); }
#mpb-fav-fab.hidden{ display:none; }
#mpb-fav-fab.fab-collapsed{ width:44px; padding:0; justify-content:center; }
#mpb-fav-fab.fab-collapsed .fab-label{ max-width:0; opacity:0; margin-left:0; }
#mpb-fav-fab.fab-collapsed:hover{ width:180px; padding:0 16px; justify-content:flex-start; }
#mpb-fav-fab.fab-collapsed:hover .fab-label{ max-width:150px; opacity:1; margin-left:8px; }
body.mpb-cookie-open #mpb-fav-fab{ display:none; }
.fav-intro{ font-size:13px; color:var(--text-dim); line-height:1.5; margin:0 0 14px; }
.fav-browser-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.fav-browser-tab{ border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-dim);
  border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:700; cursor:pointer; }
.fav-browser-tab.active{ background:var(--accent); color:var(--on-accent); border-color:var(--accent-strong); }
.fav-steps{ display:none; }
.fav-steps.active{ display:block; }
.fav-steps h5{ font-size:13px; font-weight:800; margin:14px 0 6px; }
.fav-steps h5:first-child{ margin-top:0; }
.fav-steps ol{ margin:0 0 4px; padding-left:20px; color:var(--text-dim); font-size:13.5px; line-height:1.6; }
.fav-steps kbd{ background:var(--surface-2); border:1px solid var(--border-strong); border-radius:5px; padding:1px 6px; font-size:12px; font-family:inherit; }
.fav-note{ font-size:12px; color:var(--text-faint); margin-top:12px; line-height:1.5; }
.fav-url-box{ display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:9px 12px; margin:4px 0 4px; }
.fav-url-box input{ flex:1; min-width:0; border:none; background:none; outline:none; color:var(--text); font-size:13px; font-family:inherit; }
@media (max-width:520px){ #mpb-fav-fab{ left:12px; bottom:12px; height:40px; font-size:12px; } #mpb-fav-fab.fab-collapsed{ width:40px; } #mpb-fav-fab.fab-collapsed:hover{ width:180px; } }

/* =====================================================================
   SHELL — menu lateral fixo + barra superior com vidro (blur)
   ===================================================================== */
html{ scroll-behavior:smooth; }
#app-root{ min-height:100vh; display:flex; align-items:stretch; }
.barber-stripe{ display:none; }
.auth-wrap > .barber-stripe, .auth-wrap .barber-stripe{ display:block; height:3px; flex:none; background:linear-gradient(90deg,var(--accent),var(--accent-strong)); }

.sidebar{ position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); z-index:60; display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--border); transition:transform .25s ease; }
.sb-brand{ display:flex; align-items:center; gap:12px; padding:18px 18px 14px; text-decoration:none; min-width:0; }
.sb-brand .brand-text .name{ font-family:var(--font-display); font-weight:700; font-size:18px; }
.brand-logo{ width:42px; height:42px; border-radius:12px; flex:none; overflow:hidden; background:var(--surface-3);
  box-shadow:0 0 0 1px var(--border-strong); }
.brand-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-logo.placeholder{ display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:17px; background:var(--accent-soft); }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.brand-text .name{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-text .tag{ font-size:10px; color:var(--text-faint); letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.sb-brand .brand-text{ flex:1 1 auto; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0; }
.app-version{ font-size:10px; font-weight:700; color:var(--text-faint); background:var(--surface-3); padding:2px 7px; border-radius:99px; vertical-align:middle; margin-left:2px; }

.sb-nav{ flex:1; overflow-y:auto; padding:4px 12px 16px; scrollbar-width:thin; }
.sb-group{ margin-top:14px; }
.sb-group-title{ font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-faint); padding:0 10px 6px; }
.sb-link{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:11px; text-decoration:none; color:var(--text-dim);
  font-weight:600; font-size:13.5px; margin-bottom:2px; position:relative; transition:background .12s ease,color .12s ease; }
.sb-link i{ width:18px; text-align:center; font-size:14px; flex:none; color:var(--text-faint); transition:color .12s ease; }
.sb-link:hover{ background:var(--surface-2); color:var(--text); }
.sb-link:hover i{ color:var(--accent); }
.sb-link.active{ background:var(--accent-soft); color:var(--text); }
.sb-link.active i{ color:var(--accent); }
.sb-link.active::before{ content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.sb-link .cnt{ margin-left:auto; font-size:11px; font-weight:700; min-width:20px; text-align:center; padding:1px 7px; border-radius:99px; background:var(--accent); color:var(--on-accent); }
.sb-link .cnt[hidden]{ display:none; }

.sb-foot{ border-top:1px solid var(--border); padding:12px 14px; display:flex; align-items:center; gap:10px; }
.sb-foot .who{ min-width:0; flex:1; line-height:1.25; }
.sb-foot .who .n{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-foot .who .r{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.5px; }
.sb-foot .out{ flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--text-dim);
  background:var(--surface-2); text-decoration:none; border:1px solid var(--border); }
.sb-foot .out:hover{ color:var(--danger); border-color:var(--danger); }
.sb-backdrop{ position:fixed; inset:0; background:var(--overlay); z-index:55; display:none; }
body.sb-open .sb-backdrop{ display:block; }

.main-col{ flex:1; min-width:0; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100vh; }
.topbar{ position:sticky; top:0; z-index:40; height:var(--topbar-h); display:flex; align-items:center; gap:14px; padding:0 28px;
  background:var(--glass); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--border); }
.tb-menu{ display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; flex:none; }
.tb-title{ min-width:0; flex:1 1 260px; margin-right:auto; line-height:1.2; }
.tb-title .t{ font-family:var(--font-display); font-size:20px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-title .s{ font-size:12px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-search{ position:relative; width:220px; flex:0 1 220px; min-width:130px; }
.tb-search i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:13px; pointer-events:none; }
.tb-search input{ width:100%; padding:9px 12px 9px 34px; border-radius:99px; border:1px solid var(--border); background:var(--surface); color:var(--text); outline:none; font-size:13px; }
.tb-search input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.user-chip{ display:flex; align-items:center; gap:10px; }
.topbar .user-name,.topbar .role-badge{ display:none; }
.tb-cta{ flex:none; }

.maintenance-banner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 28px; background:var(--warning-soft); color:var(--warning);
  border-bottom:1px solid var(--warning); font-size:13.5px; font-weight:600; }
.maintenance-banner .ic{ flex:none; font-size:15px; }
.maintenance-banner .txt{ flex:1 1 auto; min-width:0; }
.maintenance-banner .txt strong{ font-weight:700; }
.maintenance-banner-close{ flex:none; appearance:none; border:none; background:transparent; color:inherit; font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:8px; opacity:.75; }
.maintenance-banner-close:hover{ opacity:1; background:rgba(0,0,0,0.08); }

main.view{ flex:1; width:100%; max-width:1280px; margin:0 auto; padding:26px 28px 64px; }
.greeting-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.greeting-text{ font-weight:700; font-size:14px; }
.greeting-clock{ color:var(--text-faint); font-size:12.5px; }

.fab-new{ display:none; position:fixed; right:16px; bottom:16px; z-index:50; width:54px; height:54px; border-radius:50%; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:var(--on-accent); font-size:20px; text-decoration:none; box-shadow:0 10px 24px -6px var(--shadow-strong); }

@media (min-width:1025px){
  body:has(.sidebar) #mpb-fav-fab{ left:calc(var(--sidebar-w) + 18px); }
}
@media (max-width:1024px){
  .sidebar{ transform:translateX(-100%); box-shadow:none; }
  body.sb-open .sidebar{ transform:none; box-shadow:0 0 40px var(--shadow-strong); }
  .main-col{ margin-left:0; }
  .tb-menu{ display:inline-flex; align-items:center; justify-content:center; }
  .topbar{ padding:0 16px; }
  .maintenance-banner{ padding:10px 16px; }
  main.view{ padding:20px 16px 64px; }
  .tb-search{ width:190px; }
}
@media (max-width:720px){
  .tb-search,.tb-cta,.presence-widget .presence-label{ display:none; }
  .tb-title .t{ font-size:17px; }
  .fab-new{ display:flex; }
  .user-chip .lang-switcher select{ max-width:52px; }
  .topbar{ gap:10px; }
  .topbar .presence-widget{ display:none; }
  .tb-title{ flex-basis:80px; }
  .tb-title .s{ display:none; }
  .theme-toggle-btn .theme-label,.topbar .theme-toggle-btn span{ display:none; }
  .stat-tile,.kpi-tile{ padding:14px; }
  .kpi-grid{ grid-template-columns:1fr 1fr; }
}
@media print{
  .sidebar,.topbar,.fab-new,.sb-backdrop,.share-fab,#mpb-fav-fab,#mpb-cookie-banner,.cookie-reopen-link,.no-print{ display:none !important; }
  .main-col{ margin-left:0; }
  body{ background:#fff; color:#000; }
}


/* =====================================================================
   Componentes dos módulos novos (vales, relatórios, personalizar, WhatsApp)
   ===================================================================== */
dialog.dlg{ border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); color:var(--text); padding:0;
  width:min(520px, calc(100vw - 24px)); max-height:90vh; box-shadow:0 30px 80px var(--shadow-strong); animation:dlg-in .18s ease; overflow:auto; }
dialog.dlg.dlg-wide{ width:min(680px, calc(100vw - 24px)); }
dialog.dlg::backdrop{ background:var(--overlay); backdrop-filter:blur(4px); }
@keyframes dlg-in{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
.dlg-body{ padding:20px 22px 22px; }
.dlg-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.dlg-head h3{ font-size:19px; }
.dlg .modal-actions{ padding-top:10px; }
.btn.wa-send, .btn.wa-btn{ background:var(--whatsapp); border-color:var(--whatsapp); color:#04210f !important; }
.btn.wa-send:hover, .btn.wa-btn:hover{ background:var(--whatsapp) !important; filter:brightness(1.08); }
.btn.ghost.wa-btn{ background:transparent; color:var(--whatsapp) !important; border-color:rgba(37,211,102,.35); }
.danger-text{ color:var(--danger) !important; }

.filter-bar{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; padding:14px 16px; margin-bottom:16px; }
.filter-bar .field{ margin:0; flex:1 1 150px; min-width:130px; }
.filter-bar .filter-actions{ flex:0 0 auto; min-width:0; }
.filter-bar .preset-row{ flex:1 1 100%; display:flex; gap:8px; flex-wrap:wrap; }
.chip-link{ padding:5px 12px; border-radius:99px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-dim); font-size:12.5px; font-weight:600; text-decoration:none; }
.chip-link:hover{ color:var(--text); border-color:var(--border-strong); }
.chip-link.active{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); }

.report-tabs{ display:flex; gap:6px; margin-bottom:14px; overflow-x:auto; padding-bottom:2px; }
.rtab{ flex:none; padding:8px 16px; border-radius:99px; font-weight:700; font-size:13px; color:var(--text-dim); text-decoration:none; border:1px solid var(--border); background:var(--surface); }
.rtab:hover{ color:var(--text); background:var(--surface-2); }
.rtab.active{ background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:var(--on-accent); border-color:transparent; }

.loan-chip{ display:inline-block; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:99px; text-transform:uppercase; letter-spacing:.3px; }
.loan-chip.aberto{ background:var(--warning-soft); color:var(--warning); }
.loan-chip.parcial{ background:var(--type-fixed-soft); color:var(--type-fixed); }
.loan-chip.vencido{ background:var(--danger-soft); color:var(--danger); }
.loan-chip.quitado{ background:var(--success-soft); color:var(--success); }
.loan-chip.cancelado{ background:var(--surface-3); color:var(--text-faint); }
.loan-row{ cursor:pointer; }
.loan-row:hover td{ background:var(--surface-2); }
.loan-summary{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:10px; }
.loan-summary > div{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
.loan-summary .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); }
.pay-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.pay-form{ margin-top:16px; padding:14px; border:1px dashed var(--border-strong); border-radius:14px; }
.pay-form h4{ font-size:13px; margin-bottom:10px; font-family:var(--font-body); }
.muted-row td{ opacity:.55; }

.bar-list{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.bar-row{ display:grid; grid-template-columns:96px 1fr 110px; align-items:center; gap:12px; font-size:12.5px; }
.bar-row .lbl{ color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-row .track{ height:10px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.bar-row .fill{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-strong)); }
.bar-row .val{ text-align:right; font-weight:700; }

.custom-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start; }
.pad-card{ padding:22px; }
.card-title{ font-size:16px; display:flex; align-items:center; gap:10px; margin-bottom:6px; font-family:var(--font-body); font-weight:700; }
.card-title i{ color:var(--accent); }
.card-desc{ color:var(--text-dim); font-size:13px; margin-bottom:18px; line-height:1.55; }
.card-desc code{ background:var(--surface-3); padding:1px 6px; border-radius:6px; font-size:12px; }
.card-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.color-row{ display:flex; gap:10px; align-items:center; }
.color-row input[type=color]{ width:52px; height:42px; padding:3px; border-radius:10px; flex:none; cursor:pointer; }
.color-row input[type=text]{ max-width:140px; font-variant-numeric:tabular-nums; text-transform:lowercase; }
.swatches{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.swatch{ width:30px; height:30px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border-strong); cursor:pointer; padding:0; }
.swatch:hover{ transform:scale(1.12); }
.logo-row{ display:flex; gap:14px; align-items:center; }
.logo-preview{ width:64px; height:64px; border-radius:14px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; color:var(--text-faint); overflow:hidden; flex:none; font-size:22px; }
.logo-preview img{ width:100%; height:100%; object-fit:contain; }
.mini-app{ display:grid; grid-template-columns:150px 1fr; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--bg); min-height:210px; }
.mini-side{ background:var(--surface); border-right:1px solid var(--border); padding:12px 10px; display:flex; flex-direction:column; gap:4px; }
.mini-brand{ display:flex; align-items:center; gap:8px; margin-bottom:8px; min-width:0; }
.mini-logo{ width:28px; height:28px; border-radius:8px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:12px; overflow:hidden; flex:none; }
.mini-logo img{ width:100%; height:100%; object-fit:cover; }
.mini-name{ font-family:var(--font-display); font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-link{ font-size:11.5px; padding:7px 8px; border-radius:8px; color:var(--text-dim); display:flex; gap:8px; align-items:center; }
.mini-link.active{ background:var(--accent-soft); color:var(--text); }
.mini-link.active i{ color:var(--accent); }
.mini-main{ padding:14px; }
.mini-btns{ display:flex; gap:8px; margin-bottom:14px; }
.mini-kpi{ display:flex; gap:10px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.mini-kpi-ic{ width:32px; height:32px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.mini-kpi-n{ font-weight:800; font-size:15px; }

.auth-card{ border-radius:var(--radius-lg); }
.stars .star.filled{ color:var(--accent); }

@media (max-width:1024px){ .custom-grid{ grid-template-columns:1fr; } .loan-summary{ grid-template-columns:1fr 1fr; } }
/* Tabelas viram cards no celular (cada célula mostra o rótulo via data-label) */
@media (max-width:720px){
  table.responsive-table, table.responsive-table tbody, table.responsive-table tr, table.responsive-table td{ display:block; width:100%; }
  table.responsive-table thead{ display:none; }
  table.responsive-table tr{ border:1px solid var(--border); border-radius:14px; margin:10px; padding:6px 12px; width:auto; background:var(--surface-2); }
  table.responsive-table td{ border:none; padding:7px 0; display:flex; justify-content:space-between; gap:12px; text-align:right; }
  table.responsive-table td::before{ content:attr(data-label); color:var(--text-faint); font-size:11px; text-transform:uppercase; letter-spacing:.4px; text-align:left; flex:none; }
  table.responsive-table td:not([data-label])::before{ content:none; }
  .bar-row{ grid-template-columns:60px 1fr 90px; gap:8px; }
  .filter-bar .field{ flex:1 1 100%; }
  .mini-app{ grid-template-columns:1fr; } .mini-side{ display:none; }
}

.ts-wrap{ display:flex; justify-content:center; min-height:65px; }
.ts-wrap .cf-turnstile{ width:100%; }
.card > .sub{ font-size:13px; color:var(--text-dim); line-height:1.5; }

/* ============ Módulos operacionais: Caixa, Comissões, Pacotes, Faltas, Ficha, QR/PIX ============ */
.sale-lines{ min-height:40px; border:1px dashed var(--border-strong); border-radius:12px; padding:4px 12px; }
.sale-total{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; margin:10px 0 4px; border-radius:12px; background:var(--accent-soft); color:var(--accent-strong); font-weight:700; }
.sale-total strong{ font-size:22px; color:var(--text); }
.plan-card.off{ opacity:.55; }
.plan-card .card-title{ font-size:15px; }

.ficha-alerts{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.ficha-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0 14px; }
.ficha-timeline{ display:flex; flex-direction:column; gap:10px; }
.ficha-item{ border:1px solid var(--border); border-radius:14px; padding:12px 14px; background:var(--surface-2); }
.ficha-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ficha-body{ margin-top:8px; font-size:13.5px; line-height:1.55; color:var(--text-dim); }
.ficha-photos{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.ficha-photo{ display:flex; flex-direction:column; gap:4px; width:120px; font-size:11px; color:var(--text-faint); text-align:center; text-decoration:none; }
.ficha-photo img{ width:120px; height:120px; object-fit:cover; border-radius:12px; border:1px solid var(--border); background:var(--surface); }

.qr-layout{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
.qr-box{ width:220px; height:220px; flex:none; display:flex; align-items:center; justify-content:center; }
.pix-box{ display:flex; gap:18px; padding:16px 18px; align-items:flex-start; flex-wrap:wrap; }
.pix-box .pix-info{ flex:1; min-width:240px; }
.pix-code{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-family:var(--font-mono); font-size:11.5px; resize:none; word-break:break-all; }
.pix-qr{ width:170px; height:170px; flex:none; }

#qr-print-sheet{ display:none; }

@media print{
  .no-print{ display:none !important; }
  body.print-qr #app-root, body.print-qr .fab-new-wrap, body.print-qr #toast-wrap, body.print-qr #mpb-cookie-banner, body.print-qr .share-fab, body.print-qr #mpb-fav-fab{ display:none !important; }
  body.print-qr #qr-print-sheet{ display:flex !important; position:static; min-height:100vh; align-items:center; justify-content:center; background:#fff; color:#111; }
  .qr-poster{ text-align:center; padding:40px; font-family:Arial, Helvetica, sans-serif; }
  .qr-poster-name{ font-size:34px; font-weight:800; margin-bottom:10px; }
  .qr-poster-cta{ font-size:26px; font-weight:700; margin-bottom:24px; }
  .qr-poster-code{ display:flex; justify-content:center; margin-bottom:20px; }
  .qr-poster-sub{ font-size:16px; margin-bottom:10px; }
  .qr-poster-url{ font-size:13px; color:#555; word-break:break-all; }
}
@media (max-width:640px){
  .qr-box{ width:100%; }
  .pix-qr{ margin:0 auto; }
}