/* ============================================================
   FITGYM — Design System (white-label)
   As variáveis --brand e --bg são sobrescritas pelo theme.js
   com as cores cadastradas de cada academia.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,600;0,800;0,900&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --brand:#F5B301;          /* cor primária da academia (troca por tenant) */
  --brand-ink:#111111;      /* texto sobre a cor primária */
  --bg:#0E0F13;             /* fundo (troca por tenant) */
  --surface:#171922;
  --surface-2:#1F222E;
  --border:#2A2E3C;
  --text:#F2F3F7;
  --muted:#8B90A0;
  --ok:#3DDC84;
  --warn:#FFB020;
  --danger:#FF5A5A;
  --radius:16px;
  --font-display:'Archivo',sans-serif;
  --font-body:'Inter',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- layout base (mobile-first) ---------- */
.shell{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:20px 18px 96px}
.shell-wide{max-width:960px;margin:0 auto;min-height:100dvh;padding:24px 20px}

/* ---------- tipografia ---------- */
h1,h2,h3,.display{font-family:var(--font-display)}
.display{font-weight:900;text-transform:uppercase;letter-spacing:.02em;line-height:1.05}
.display-xl{font-size:34px}
.display-lg{font-size:26px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px}

/* ---------- header ---------- */
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.topbar .logo{width:40px;height:40px;border-radius:10px;object-fit:cover;background:var(--surface-2)}
.topbar .gym-name{font-family:var(--font-display);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.topbar .spacer{flex:1}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.card-brand{background:linear-gradient(135deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 70%,#000) 100%);color:var(--brand-ink);border:none}
.card-brand .muted{color:color-mix(in srgb,var(--brand-ink) 60%,transparent)}

/* ---------- vencimento ---------- */
.venc{display:flex;align-items:baseline;gap:10px}
.venc .dias{font-family:var(--font-display);font-weight:900;font-size:52px;line-height:1}
.venc.alerta .dias{color:var(--warn)}
.venc.vencido .dias{color:var(--danger)}

/* ---------- botões ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:15px 18px;border:none;border-radius:14px;cursor:pointer;
  font-family:var(--font-display);font-weight:800;font-size:15px;
  text-transform:uppercase;letter-spacing:.05em;text-decoration:none;
  transition:transform .12s ease,opacity .12s ease}
.btn:active{transform:scale(.98)}
.btn-brand{background:var(--brand);color:var(--brand-ink)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-sm{width:auto;padding:9px 14px;font-size:12px;border-radius:10px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- inputs ---------- */
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:14px 0 6px}
input,select,textarea{width:100%;padding:14px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-size:16px;font-family:var(--font-body)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
input[type=color]{padding:4px;height:52px;cursor:pointer}
.pin-input{letter-spacing:.5em;text-align:center;font-size:24px;font-weight:700}

/* ---------- lista de exercícios ---------- */
.ex-item{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border)}
.ex-item:last-child{border-bottom:none}
.ex-num{font-family:var(--font-display);font-weight:900;font-size:22px;color:var(--brand);min-width:32px}
.ex-nome{font-weight:700;font-size:16px}
.ex-meta{font-size:13px;color:var(--muted);margin-top:2px}
.ex-done .ex-nome{text-decoration:line-through;color:var(--muted)}
.ex-done .ex-num{color:var(--muted)}

/* ---------- séries (checkboxes de série) ---------- */
.series-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.serie-chip{min-width:52px;padding:10px 8px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--muted);font-weight:700;font-size:13px;
  cursor:pointer;text-align:center;transition:all .15s}
.serie-chip.done{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.carga-input{width:74px;padding:9px;font-size:14px;text-align:center}

/* ---------- cronômetro de descanso (assinatura do app) ---------- */
.timer-overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:24px;z-index:100}
.timer-overlay.on{display:flex}
.timer-ring{position:relative;width:240px;height:240px}
.timer-ring svg{transform:rotate(-90deg)}
.timer-ring .track{fill:none;stroke:var(--surface-2);stroke-width:12}
.timer-ring .prog{fill:none;stroke:var(--brand);stroke-width:12;stroke-linecap:round;
  transition:stroke-dashoffset 1s linear}
.timer-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:900;font-size:64px}

/* ---------- gráfico / evolução ---------- */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.stat .val{font-family:var(--font-display);font-weight:900;font-size:28px}
.stat .val.up{color:var(--ok)}
.stat .val.down{color:var(--danger)}

/* ---------- navegação inferior (app aluno) ---------- */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;
  display:flex;background:var(--surface);border-top:1px solid var(--border);z-index:50}
.tabbar a{flex:1;padding:12px 4px 16px;text-align:center;text-decoration:none;color:var(--muted);
  font-size:11px;font-weight:600}
.tabbar a.on{color:var(--brand)}
.tabbar .ico{font-size:20px;display:block;margin-bottom:2px}

/* ---------- tabelas admin ---------- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--border)}
td{padding:12px;border-bottom:1px solid var(--border);font-size:14px}
tr:last-child td{border-bottom:none}
.badge{display:inline-block;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:700}
.badge-ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.badge-warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.badge-danger{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger)}

/* ---------- util ---------- */
.row{display:flex;gap:10px;align-items:center}
.row .grow{flex:1}
.mt{margin-top:16px}.mb{margin-bottom:16px}
.center{text-align:center}
.divider{height:1px;background:var(--border);margin:18px 0}
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:var(--brand-ink);padding:12px 20px;border-radius:12px;
  font-weight:700;font-size:14px;z-index:200;display:none}
.toast.on{display:block}

@media (prefers-reduced-motion:no-preference){
  .fade-in{animation:fadeUp .4s ease both}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}