/* ===== Gymzee — design system (híbrido: painel claro/premium · app do aluno escuro/energético) ===== */
:root {
  /* Neutros do tema CLARO (painel + apex) */
  --ink-900:#0E1116; --ink-700:#39404B; --ink-500:#6B7480; --ink-300:#E6E8EC; --ink-200:#F0F1F4;
  --surface:#FFFFFF; --bg:#F4F5F7; --bg-elev:#FAFBFC;
  --success:#1FA971; --warn:#E8A23D; --danger:#E5484D; --streak:#FF6A2B;

  /* Tokens de componente (trocados no tema escuro) */
  --appbar-bg:rgba(255,255,255,.85); --appbar-border:var(--ink-300);
  --tabbar-bg:#0E1116; --tabbar-fg:#FFFFFF; --tabbar-dim:#8A93A0;
  --hairline:var(--ink-300); --hover:#EDEFF3; --track:#EAECF0;

  /* Marca (sobrescrita por requisição no _Layout) */
  --brand:#0E1116; --brand-contrast:#FFFFFF; --brand-dark:#000; --brand-tint:rgba(14,17,22,.10);

  /* Escala / raio / sombra (premium: difusa, baixa opacidade, em camadas) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --sh-card:0 1px 3px rgba(16,24,40,.04), 0 10px 26px -10px rgba(16,24,40,.12);
  --sh-pop:0 10px 34px -8px rgba(16,24,40,.18);
}

/* ===== Tema ESCURO — escopado ao app do aluno (body.gz-dark) ===== */
body.gz-dark {
  --ink-900:#F4F6FA; --ink-700:#C3CAD6; --ink-500:#8B94A4; --ink-300:#2A313C; --ink-200:#222933;
  --surface:#161B22; --bg:#0C0F14; --bg-elev:#1B2230;
  --appbar-bg:rgba(12,15,20,.82); --appbar-border:#222933;
  --tabbar-bg:#11161E; --tabbar-fg:#F4F6FA; --tabbar-dim:#79828F;
  --hairline:#262D38; --hover:#1B2230; --track:#222A35;
  --sh-1:none; --sh-card:0 1px 0 rgba(255,255,255,.03), 0 12px 30px -14px rgba(0,0,0,.6);
  --sh-pop:0 14px 40px -10px rgba(0,0,0,.7);
  background:radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%), var(--bg);
}

* { -webkit-tap-highlight-color: transparent; box-sizing:border-box; }
html { font-size:16px; }
body {
  font-family:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--bg); color:var(--ink-900);
  margin:0; min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,.gz-num { font-family:"Bricolage Grotesque", system-ui, sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.gz-num, .gz-money { font-variant-numeric:tabular-nums; }
a { color:var(--brand-dark); text-decoration:none; }
a:hover { text-decoration:underline; }
.text-muted { color:var(--ink-500) !important; }

/* ===== App shell ===== */
.gz-appbar {
  position:sticky; top:0; z-index:30; height:58px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--s4); background:var(--appbar-bg);
  border-bottom:1px solid var(--appbar-border); backdrop-filter:saturate(1.6) blur(12px);
}
.gz-brand { display:flex; align-items:center; gap:var(--s2); color:var(--ink-900); font-weight:700; }
.gz-brand:hover { text-decoration:none; }
.gz-logo { height:30px; max-height:30px; max-width:150px; object-fit:contain; display:block; }
/* Logo do Gymzee (apex/landing): ícone + wordmark */
.gz-logo-gz { height:26px; width:26px; margin-right:.45rem; border-radius:7px; }
/* Logo escura some no appbar escuro do aluno → plaquinha clara garante contraste sempre */
body.gz-dark .gz-appbar .gz-logo { background:#fff; padding:4px 9px; border-radius:9px; max-width:164px; }

/* <details> recolhível com chevron limpo (treinos recorrentes, cardápio do aluno…) */
details.gz-collapse > summary { cursor:pointer; display:flex; align-items:center; justify-content:space-between; list-style:none; }
details.gz-collapse > summary::-webkit-details-marker { display:none; }
details.gz-collapse > summary::after { content:"▾"; color:var(--ink-500); font-size:.9em; transition:transform .2s; }
details.gz-collapse[open] > summary::after { transform:rotate(180deg); }
.gz-monogram {
  width:32px; height:32px; border-radius:11px; display:grid; place-items:center;
  background:var(--brand); color:var(--brand-contrast); font-family:"Bricolage Grotesque",sans-serif; font-weight:700; box-shadow:var(--sh-1);
}
.gz-brand-name { font-family:"Bricolage Grotesque",sans-serif; font-size:1.1rem; letter-spacing:-.02em; }

.gz-shell { display:flex; max-width:1240px; margin:0 auto; }
main { flex:1 1 auto; min-width:0; padding:var(--s4); }
@media (min-width:992px){ main { padding:var(--s6); } }

/* Sidebar (desktop) */
.gz-sidebar {
  flex:0 0 248px; flex-direction:column; gap:3px; padding:var(--s5) var(--s3);
  border-right:1px solid var(--hairline); background:var(--surface);
  position:sticky; top:58px; height:calc(100vh - 58px);
}
.gz-side-link {
  display:flex; align-items:center; gap:var(--s3); padding:11px 13px; border-radius:var(--r-md);
  color:var(--ink-700); font-weight:500; transition:background .15s, color .15s;
}
.gz-side-link:hover { background:var(--hover); text-decoration:none; }
.gz-side-link.active { background:var(--brand); color:var(--brand-contrast); font-weight:600; box-shadow:var(--sh-1); }
.gz-side-link i { font-size:1.15rem; width:1.3em; text-align:center; }
.gz-side-link .gz-side-badge { margin-left:auto; background:var(--danger); color:#fff; font-size:.7rem; font-weight:700; min-width:20px; height:20px; border-radius:var(--r-pill); display:grid; place-items:center; padding:0 6px; }
.gz-side-link.active .gz-side-badge { background:rgba(255,255,255,.25); }
.gz-side-sep { color:var(--ink-500); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; padding:var(--s5) 13px var(--s2); }

/* ===== Bottom tab bar (mobile) ===== */
.gz-tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  height:calc(66px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  display:flex; background:var(--tabbar-bg); box-shadow:0 -8px 30px -12px rgba(0,0,0,.4);
  border-top:1px solid rgba(255,255,255,.04);
}
.gz-tab {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--tabbar-dim); font-size:.68rem; font-weight:500; text-decoration:none; position:relative; padding-top:7px;
  transition:color .15s;
}
.gz-tab:hover { text-decoration:none; color:var(--tabbar-fg); }
.gz-tab i { font-size:1.3rem; }
.gz-tab.active { color:var(--tabbar-fg); }
.gz-tab.active::before { content:""; position:absolute; top:0; width:30px; height:3px; border-radius:0 0 4px 4px; background:var(--brand); }
.gz-tab .gz-badge {
  position:absolute; top:5px; right:50%; transform:translateX(18px);
  background:var(--danger); color:#fff; font-size:.62rem; font-weight:700;
  min-width:17px; height:17px; border-radius:var(--r-pill); display:grid; place-items:center; padding:0 4px;
}
body.has-tabbar main { padding-bottom:calc(74px + env(safe-area-inset-bottom)); }
@media (min-width:992px){ .gz-tabbar { display:none; } body.has-tabbar main { padding-bottom:var(--s6); } }

/* ===== Cards & componentes ===== */
.gz-card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--sh-card); padding:var(--s5); }
.gz-card.gz-tap { transition:transform .15s, box-shadow .15s; }
.gz-card.gz-tap:hover { transform:translateY(-2px); box-shadow:var(--sh-pop); }

.gz-kpi { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--sh-card); }
.gz-kpi .gz-kpi-num { font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:2rem; line-height:1; letter-spacing:-.02em; }
.gz-kpi .gz-kpi-label { color:var(--ink-500); font-size:.82rem; margin-top:4px; }

.gz-list-card {
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  box-shadow:var(--sh-card); padding:var(--s4) var(--s5); margin-bottom:var(--s3);
  display:flex; flex-direction:column; gap:var(--s3); transition:transform .15s, box-shadow .15s;
}
.gz-list-card:hover { transform:translateY(-2px); box-shadow:var(--sh-pop); }
.gz-list-top { display:flex; align-items:center; gap:var(--s3); }
.gz-avatar {
  width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center;
  background:var(--brand); color:var(--brand-contrast); font-family:"Bricolage Grotesque",sans-serif; font-weight:700; box-shadow:var(--sh-1);
}
.gz-list-name { font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:1.02rem; letter-spacing:-.01em; }
.gz-list-meta { color:var(--ink-500); font-size:.86rem; display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); }
.gz-list-actions { display:flex; gap:var(--s2); flex-wrap:wrap; }
.gz-list-actions .btn { flex:1; min-width:96px; min-height:42px; }

.gz-pill { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:600; padding:4px 11px; border-radius:var(--r-pill); }
.gz-pill.is-ativo { background:rgba(31,169,113,.14); color:var(--success); }
.gz-pill.is-inadimplente { background:rgba(232,162,61,.16); color:#b9791f; }
.gz-pill.is-inativo { background:var(--ink-200); color:var(--ink-500); }
.gz-pill.is-perigo { background:rgba(229,72,77,.14); color:var(--danger); }
.gz-streak { color:var(--streak); font-weight:700; }

.gz-meter { height:9px; border-radius:var(--r-pill); background:var(--track); overflow:hidden; }
.gz-meter > span { display:block; height:100%; background:var(--brand); border-radius:var(--r-pill); transition:width .5s ease; }
.gz-meter.warn > span { background:var(--warn); } .gz-meter.full > span { background:var(--danger); }

/* Anel de nível (gamificação do aluno) */
.gz-ring {
  position:relative; width:152px; height:152px; border-radius:50%; margin:0 auto;
  background:conic-gradient(var(--brand) calc(var(--pct,0) * 1%), var(--track) 0);
  display:grid; place-items:center; box-shadow:0 0 0 1px var(--hairline) inset;
}
.gz-ring-in { width:120px; height:120px; border-radius:50%; background:var(--surface); display:grid; place-items:center; box-shadow:var(--sh-1); }
.gz-ring-emoji { font-size:3.1rem; line-height:1; }
.gz-glow { box-shadow:0 0 0 1px var(--hairline), 0 0 38px -6px var(--brand); }

.gz-fab {
  position:fixed; right:var(--s4); bottom:calc(82px + env(safe-area-inset-bottom)); z-index:35;
  width:58px; height:58px; border-radius:18px; border:none; box-shadow:var(--sh-pop);
  background:var(--brand); color:var(--brand-contrast); font-size:1.7rem; display:grid; place-items:center;
  text-decoration:none; transition:transform .15s;
}
.gz-fab:hover { color:var(--brand-contrast); text-decoration:none; transform:translateY(-2px) scale(1.04); }
@media (min-width:992px){ .gz-fab { bottom:var(--s6); } }

.gz-empty { text-align:center; color:var(--ink-500); padding:var(--s7) var(--s4); }
.gz-empty .gz-empty-icon { font-size:2.6rem; opacity:.4; }

.gz-section-title { display:flex; align-items:center; gap:var(--s2); margin:0 0 var(--s4); font-size:1.3rem; }
.gz-section-title::before { content:""; width:4px; height:1.05em; border-radius:3px; background:var(--brand); }

/* ===== Bootstrap remap → marca ===== */
.btn { border-radius:var(--r-md); font-weight:600; padding:.5rem 1rem; transition:transform .12s, filter .15s, background .15s; }
.btn:active { transform:scale(.98); }
.btn-lg { border-radius:var(--r-lg); padding:.7rem 1.3rem; }
.btn-primary { background:var(--brand); border-color:var(--brand); color:var(--brand-contrast); box-shadow:var(--sh-1); }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background:var(--brand-dark); border-color:var(--brand-dark); color:var(--brand-contrast); filter:brightness(1.04); }
.btn-outline-secondary { color:var(--ink-700); border-color:var(--hairline); }
.btn-outline-secondary:hover { background:var(--hover); color:var(--ink-900); border-color:var(--ink-500); }
.btn-outline-primary { color:var(--brand-dark); border-color:var(--brand); }
.btn-outline-primary:hover { background:var(--brand); color:var(--brand-contrast); }
.btn:focus, .form-control:focus, .form-select:focus { box-shadow:0 0 0 .22rem var(--brand-tint); border-color:var(--brand); }
.form-control, .form-select, textarea.form-control { border-radius:var(--r-md); border-color:var(--hairline); background:var(--surface); color:var(--ink-900); padding:.55rem .8rem; }
.form-control::placeholder { color:var(--ink-500); }
.form-label { font-weight:600; font-size:.9rem; color:var(--ink-700); margin-bottom:.3rem; }
.card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--sh-card); }
.alert { border-radius:var(--r-md); border:1px solid transparent; }
.table { vertical-align:middle; color:var(--ink-900); }
.progress { background:var(--track); border-radius:var(--r-pill); }
.progress-bar { border-radius:var(--r-pill); }

/* Toggles (form-switch) + swatches de cor (personalização) */
.form-check-input { cursor:pointer; }
.form-check-input:checked { background-color:var(--brand); border-color:var(--brand); }
.form-check-input:focus { box-shadow:0 0 0 .22rem var(--brand-tint); border-color:var(--brand); }
.form-switch .form-check-input { width:2.6em; height:1.4em; }
.gz-row-switch { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s3) 0; border-top:1px solid var(--hairline); }
.gz-row-switch:first-of-type { border-top:none; }
.gz-row-switch .gz-rs-title { font-weight:600; }
.gz-row-switch .gz-rs-sub { color:var(--ink-500); font-size:.84rem; }
.gz-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.gz-swatch { width:32px; height:32px; border-radius:10px; border:2px solid transparent; cursor:pointer; padding:0; box-shadow:var(--sh-1); transition:transform .12s; }
.gz-swatch:hover { transform:scale(1.08); }
.gz-swatch.sel { border-color:var(--ink-900); box-shadow:0 0 0 2px var(--surface) inset, var(--sh-1); }

/* Mini-preview do app do aluno (na tela de Config) */
.gz-prev { border-radius:24px; padding:18px 16px 16px; text-align:center; transition:background .2s, color .2s; }
.gz-prev.dark { background:radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--pc) 26%, transparent), transparent 60%), #0C0F14; color:#F4F6FA; }
.gz-prev.light { background:#F4F5F7; color:#0E1116; border:1px solid var(--ink-300); }
.gz-prev-ring { width:96px; height:96px; border-radius:50%; margin:6px auto 10px; display:grid; place-items:center; background:conic-gradient(var(--pc) 68%, rgba(128,128,128,.25) 0); }
.gz-prev-ring > div { width:74px; height:74px; border-radius:50%; display:grid; place-items:center; font-size:1.9rem; }
.gz-prev.dark .gz-prev-ring > div { background:#161B22; }
.gz-prev.light .gz-prev-ring > div { background:#fff; }
.gz-prev-pill { display:inline-block; font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:999px; background:color-mix(in srgb, var(--pc) 20%, transparent); color:var(--pc); }