/* NoLimit — camada visual inspirada nas Human Interface Guidelines da Apple (iOS).
   Carregada depois do app.css: redefine cores, tipografia e componentes. */

/* ---------- cores do sistema (escuro) ---------- */
:root {
  --bg: #000000; --surface: #1C1C1E; --surface-2: #2C2C2E; --surface-3: #3A3A3C;
  --line: rgba(84, 84, 88, .55); --fg: #FFFFFF; --muted: #8E8E93;
  --accent: #0A84FF; --accent-fg: #FFFFFF; --accent-soft: rgba(10, 132, 255, .16);
  --ok: #30D158; --ok-soft: rgba(48, 209, 88, .16); --bad: #FF453A; --warn: #FF9F0A;
  --fill: rgba(118, 118, 128, .24); --sheet: #1C1C1E; --tabbar: rgba(22, 22, 24, .82);
  --t-musculacao: #0A84FF; --t-corrida: #FF9F0A; --t-bike: #FFD60A; --t-natacao: #64D2FF; --t-muay_thai: #FF375F;
  --t-forca: #BF5AF2; --t-caminhada: #30D158; --t-mobilidade: #5E5CE6; --t-outro: #8E8E93; --t-crossfit: #FF375F;
  --r: 12px; --r-sm: 10px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Inter", system-ui, Roboto, sans-serif;
  --shadow: 0 1px 0 rgba(255, 255, 255, .02);
  color-scheme: dark;
}
/* ---------- cores do sistema (claro) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F2F2F7; --surface: #FFFFFF; --surface-2: #F2F2F7; --surface-3: #E5E5EA;
    --line: rgba(60, 60, 67, .18); --fg: #000000; --muted: #8A8A8E;
    --accent: #007AFF; --accent-soft: rgba(0, 122, 255, .12);
    --ok: #34C759; --ok-soft: rgba(52, 199, 89, .14); --bad: #FF3B30; --warn: #FF9500;
    --fill: rgba(118, 118, 128, .12); --sheet: #F2F2F7; --tabbar: rgba(249, 249, 249, .86);
    --t-musculacao: #007AFF; --t-corrida: #FF9500; --t-bike: #D6A700; --t-natacao: #32ADE6; --t-muay_thai: #FF2D55;
    --t-forca: #AF52DE; --t-caminhada: #34C759; --t-mobilidade: #5856D6; --t-crossfit: #FF2D55;
    --shadow: 0 1px 2px rgba(0, 0, 0, .04);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F2F2F7; --surface: #FFFFFF; --surface-2: #F2F2F7; --surface-3: #E5E5EA;
  --line: rgba(60, 60, 67, .18); --fg: #000000; --muted: #8A8A8E;
  --accent: #007AFF; --accent-soft: rgba(0, 122, 255, .12);
  --ok: #34C759; --ok-soft: rgba(52, 199, 89, .14); --bad: #FF3B30; --warn: #FF9500;
  --fill: rgba(118, 118, 128, .12); --sheet: #F2F2F7; --tabbar: rgba(249, 249, 249, .86);
  --t-musculacao: #007AFF; --t-corrida: #FF9500; --t-bike: #D6A700; --t-natacao: #32ADE6; --t-muay_thai: #FF2D55;
  --t-forca: #AF52DE; --t-caminhada: #34C759; --t-mobilidade: #5856D6; --t-crossfit: #FF2D55;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04);
  color-scheme: light;
}

/* ---------- base ---------- */
html, body { font-family: var(--font); font-size: 17px; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { line-height: 1.3; }
::selection { background: var(--accent-soft); }
button { -webkit-user-select: none; user-select: none; }
#view { gap: 22px; padding-top: calc(env(safe-area-inset-top) + 10px); }
.muted { color: var(--muted); }
.small { font-size: 13px; letter-spacing: -.005em; }
a { color: var(--accent); }

/* toque: resposta discreta, como no iOS */
.btn, .icon-btn, .chip, .item, button.item, .seg button, .tabs a, .check, .sets .ck, .add-set, .ex-rest, .card h2 a {
  transition: opacity .15s ease, transform .15s ease, background-color .2s ease;
}
.btn:active, .icon-btn:active, .chip:active, button.item:active, .add-set:active, .tabs a:active { opacity: .55; }
.btn:active { transform: scale(.985); }
:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }

/* ---------- título grande ---------- */
.ph { padding-top: 4px; align-items: flex-end; }
.ph h1 { font-size: 34px; font-weight: 700; letter-spacing: -.022em; line-height: 1.12; }
.ph .sub { font-size: 15px; color: var(--muted); margin-top: 3px; text-transform: none; }
.icon-btn { width: 36px; height: 36px; background: var(--fill); color: var(--accent); }
.icon-btn .ico { width: 19px; height: 19px; stroke-width: 2; }

/* ---------- cartões = listas agrupadas ---------- */
.card { border-radius: var(--r); padding: 14px 16px; gap: 10px; box-shadow: var(--shadow); }
.card h2 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.card h2 a, .card h2 button.link { font-size: 15px; font-weight: 400; color: var(--accent); }
.empty { font-size: 15px; padding: 12px 6px; }

/* linhas com separador recuado (inset) */
.item { padding: 11px 0; border-top: 0; position: relative; gap: 12px; }
.item + .item::before, button.item + button.item::before, .item + button.item::before, button.item + .item::before {
  content: ""; position: absolute; top: 0; left: 48px; right: 0; height: .5px; background: var(--line);
}
.list > .item:first-child::before { display: none; }
button.item { border-top: 0; }
.item .t { font-size: 17px; font-weight: 400; letter-spacing: -.02em; }
.item .s { font-size: 14px; margin-top: 1px; }
.item .r { font-weight: 500; font-size: 17px; }
.dot { width: 34px; height: 34px; border-radius: 9px; background: var(--fill); }
.dot .ico { width: 18px; height: 18px; stroke-width: 2; }
.dayhead { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: uppercase; color: var(--muted); padding: 16px 0 4px; }

/* ---------- números e indicadores ---------- */
.kpis { gap: 12px; }
.kpi { border-radius: var(--r); padding: 14px 16px; gap: 2px; box-shadow: var(--shadow); }
.kpi .l { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: -.005em; color: var(--muted); }
.kpi .v { font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.kpi.big .v { font-size: 40px; letter-spacing: -.03em; }
.kpi .d { font-size: 13px; }
.sheet .kpi { box-shadow: none; }

/* ---------- botões ---------- */
.btn { border-radius: 12px; padding: 14px 18px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; background: var(--accent-soft); color: var(--accent); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.ok { background: var(--ok); color: #fff; }
.btn.danger { background: transparent; color: var(--bad); font-weight: 400; }
.btn.sm { padding: 7px 14px; font-size: 15px; border-radius: 999px; }
.btn:disabled { opacity: .35; }

/* ---------- campos ---------- */
.field { background: var(--fill); border: 0; border-radius: 10px; padding: 12px 14px; font-size: 17px; letter-spacing: -.02em; color: var(--fg); }
.field::placeholder { color: var(--muted); }
.field:focus { box-shadow: 0 0 0 3px var(--accent-soft); border-color: transparent; }
.sheet .field { background: var(--surface); }
label.lbl { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: 0; color: var(--muted); margin: 0 0 6px 4px; }
select.field { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

/* ---------- chips e controle segmentado ---------- */
.chips { gap: 8px; }
.chip { border: 0; background: var(--fill); color: var(--fg); padding: 7px 14px; font-size: 15px; font-weight: 500; border-radius: 999px; }
.chip.on { background: var(--accent); color: #fff; }
.seg { background: var(--fill); border-radius: 9px; padding: 2px; gap: 0; }
.seg button { border-radius: 7px; padding: 7px 0; font-size: 13px; font-weight: 500; color: var(--fg); letter-spacing: -.005em; }
.seg button.on { background: var(--surface); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); font-weight: 600; }
:root[data-theme="dark"] .seg button.on { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button.on { background: #636366; } }
.sheet .seg { background: var(--fill); }
.sheet .seg button.on { background: var(--surface); }

/* ---------- barra de abas translúcida ---------- */
.tabs { background: var(--tabbar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid var(--line); padding-top: 7px; }
.tabs a { font-size: 10px; font-weight: 500; gap: 3px; letter-spacing: .01em; color: #999; padding: 2px 0; }
.tabs a.on { color: var(--accent); }
.tabs svg { width: 25px; height: 25px; stroke-width: 1.8; }
.tabs a.on svg { stroke-width: 2.2; }

/* ---------- folhas (sheets) ---------- */
.sheet-bg { background: rgba(0, 0, 0, .4); }
.sheet { background: var(--sheet); border-radius: 14px 14px 0 0; padding-top: 8px; gap: 16px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .18); }
.sheet::before { width: 36px; height: 5px; background: var(--surface-3); }
.sheet h3 { font-size: 20px; font-weight: 700; letter-spacing: -.025em; text-align: left; }
.sheet .item { background: none; }
@keyframes up { from { transform: translateY(100%); } }
.sheet { animation: up .35s cubic-bezier(.32, .72, 0, 1); }

/* ---------- tarefas: círculo do iOS ---------- */
.check { width: 24px; height: 24px; border: 1.5px solid #C7C7CC; }
.check.on { background: var(--accent); border-color: var(--accent); }
.check.on::after { border-color: #fff; }
.tag { font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 999px; background: var(--fill); color: var(--muted); }
.tag.today { background: var(--accent-soft); color: var(--accent); }
.tag.late { background: rgba(255, 59, 48, .12); color: var(--bad); }

/* ---------- semana de treinos ---------- */
.week .d { font-size: 11px; font-weight: 500; text-transform: uppercase; }
.week .c { width: 36px; height: 36px; background: transparent; font-size: 17px; font-weight: 500; }
.week .c.today { outline: 0; background: var(--accent); color: #fff; font-weight: 600; }

/* ---------- barras de categorias ---------- */
.bar { font-size: 15px; }
.bar .tr { height: 8px; border-radius: 4px; background: var(--fill); }
.bar .fl { border-radius: 4px; }

/* ---------- treino em andamento ---------- */
.workout { background: var(--bg); }
.wk-head { background: var(--tabbar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--line); }
.wk-top .ttl { font-size: 17px; font-weight: 600; }
.wk-stats .l { font-size: 12px; font-weight: 400; color: var(--muted); }
.wk-stats .v { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.ex { background: var(--surface); border-radius: var(--r); padding: 14px 14px 10px; }
.ex-h .nm { font-size: 17px; font-weight: 600; color: var(--accent); }
.sets .st, .sets input, .sets .ck { background: var(--fill); }
.sets tr.feita td { background: var(--ok-soft); }
.add-set { background: var(--fill); border-radius: 10px; font-weight: 600; color: var(--fg); }
.rest-bar { background: var(--tabbar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid var(--line); }
.mini-treino { border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 122, 255, .35); }

/* ---------- avisos ---------- */
.toast { background: rgba(30, 30, 32, .92); color: #fff; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 999px; padding: 12px 20px; font-size: 15px; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }

/* ---------- login ---------- */
.login { gap: 18px; text-align: left; }
.login .logo { width: 72px; height: 72px; border-radius: 18px; font-size: 26px; letter-spacing: -.02em; background: linear-gradient(160deg, #3D9BFF, #0A64F0); box-shadow: 0 10px 30px rgba(10, 100, 240, .35); }
.login h1 { font-size: 40px; font-weight: 800; letter-spacing: -.035em; }
.login details summary { color: var(--accent); font-size: 15px; }

/* ---------- gráfico ---------- */
.chart text { font-family: var(--font); font-size: 10px; }

/* ---------- telas largas (iPad / computador) ---------- */
@media (min-width: 700px) {
  #view { max-width: 720px; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .kpi.big { grid-column: 1 / -1; }
}

/* cabeçalho com controles (ex.: mês em Finanças) quebra linha em telas estreitas */
.ph { flex-wrap: wrap; row-gap: 10px; }
.ph > .row { margin-left: auto; gap: 6px; }
.ph > .row > div { font-size: 15px; font-weight: 600; min-width: 7em !important; }