/* Tema Chumbo e prata: layout em preto e cinza. Os cartões e gráficos do Dashboard mantêm as cores originais. */
:root {
  --primary: #3f3f46; --primary-dark: #27272a; --primary-soft: #ececee;
  --bg: #fafafa; --card: #fff; --text: #18181b; --muted: #71717a; --border: #e4e4e7; --line: #ececee;
  --ink: #27272a; --ink-2: #3f3f46; --silver: #e4e4e7;
  --grad: linear-gradient(180deg, #52525b, #3f3f46);
  --success: #2f7d57;
}

/* botões */
.btn.primary { background: var(--grad); border-color: #000; box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 3px 10px rgba(0,0,0,.25); }
.btn.primary:hover { background: linear-gradient(180deg, #63636b, #4a4a51); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 5px 14px rgba(0,0,0,.3); }
.btn.outline { border-color: #a1a1aa; color: var(--text); }
.btn.outline:hover { background: #fafafa; border-color: var(--ink-2); }
.btn:hover { border-color: #a1a1aa; }
.ico-o { color: var(--text); }
.btn.success { background: var(--success); border-color: var(--success); box-shadow: none; }

/* campos */
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(63, 63, 70, .12); border-color: #52525b; }
:focus-visible { outline: 3px solid rgba(63, 63, 70, .3); }
::selection { background: rgba(63, 63, 70, .16); }
.price-input.changed { border-color: #52525b; background: #fafafa; }
.search i { color: #71717a; }
input[type=checkbox], input[type=radio] { accent-color: #52525b; }

/* abas, chips, interruptores */
.tabs button.active, .mc-tabs button.active { background: var(--grad); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.chip.on, .day.on { background: #52525b; border-color: #52525b; color: #fff; }
.switch input:checked + span { background: linear-gradient(180deg, #2fa66a, #1c8a52); }
.stepper button { border-color: #52525b; color: #52525b; }
.check-card.on, .serve.on, .robo-item.on { border-color: #52525b; background: #fafafa; }
.serve.on i { color: #52525b; }
.model-card:hover, .check-card:hover, .serve:hover { border-color: #52525b; }
.wiz-tabs button.active { color: #27272a; border-bottom-color: #27272a; }
.mc-group-head .ord { background: #ececee; color: #52525b; }
.mc-comp { border-left-color: #e4e4e7; }
.thumb { background-color: #ececee; color: #71717a; }
.module .ic, .model-card .ic { background: #ececee; color: #52525b; }
.module a.go { color: #52525b; font-weight: 700; }
.module:hover { border-color: #a1a1aa; }
.hours-bar b, .progress b { background: linear-gradient(90deg, #71717a, #52525b); }
.badge.orange { background: #ececee; color: #52525b; }
.badge.info { background: #ececee; color: #52525b; }

/* menu lateral escuro */
.sidebar { background: linear-gradient(180deg, #27272a, #323236); border-right: 0; box-shadow: none; }
.side-brand { border-bottom: 1px solid rgba(255,255,255,.1); }
.side-brand strong { color: #fafafa; }
.brand-logo { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px rgba(228,228,231,.35), 0 4px 12px rgba(0,0,0,.4); }
#nav a { color: #e4e4e7; }
#nav a i { color: #a1a1aa; }
#nav a small { color: #7a7a82; }
#nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
#nav a.active { background: rgba(228,228,231,.13); color: var(--silver); box-shadow: inset 3px 0 0 var(--silver); }
#nav a.active i, #nav a.active small { color: var(--silver); }
.tag { background: var(--silver); color: #27272a; }
.logout { color: #a1a1aa; }
.logout:hover { background: rgba(255,255,255,.07); color: #fff; }

/* barra superior e extras */
.topbar { border-bottom: 1px solid var(--border); }
.icon-btn.bell { color: #52525b; }
.help-fab { background: var(--grad); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.hub-hero { background: linear-gradient(135deg, #27272a, #3a3a3f); }
.save-bar { background: #27272a; }
.toast { background: #27272a; }
#bellCount { background: #dc2f3a; }

/* login */
.login { background: radial-gradient(900px 500px at 20% 0%, rgba(228,228,231,.14), transparent 60%), linear-gradient(160deg, #27272a, #3a3a3f); }
.login-card { border: 1px solid rgba(228,228,231,.25); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.brand-logo.big { box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(63,63,70,.25), 0 10px 28px rgba(0,0,0,.3); }
.brand-badge { background: linear-gradient(145deg, #52525b, #27272a); color: #fff; box-shadow: none; }
.bi-star-fill.ico-o { color: #1c9a5e; }
.side-brand { border-bottom: 0; }