/* ============================================================
   Treino Full Body — estilo geral
   ============================================================ */
:root{
  --bg:#0E1116; --surface:#161B22; --surface2:#1C232D; --line:#28313D;
  --text:#E9ECF1; --muted:#8B95A5;
  --red:#D6252C; --blue:#2E7BD6; --yellow:#E2A90F; --green:#2E9E5B;
  --accent:var(--red); --c:var(--red);
  box-sizing:border-box;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F1F2F4; --surface:#FFFFFF; --surface2:#F7F8FA; --line:#DCE0E6;
    --text:#131820; --muted:#616C7A;
  }
}
:root[data-theme="light"]{
  --bg:#F1F2F4; --surface:#FFFFFF; --surface2:#F7F8FA; --line:#DCE0E6;
  --text:#131820; --muted:#616C7A;
}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.45; min-height:100vh;
  display:flex; flex-direction:column;
}
body.tem-barra{padding-bottom:88px}
h1,h2,h3,.disp{font-family:'Oswald','Arial Narrow',Impact,sans-serif; font-weight:600; margin:0}
a{color:inherit}
button,input,textarea,select{font-family:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--c); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px);
}
.topo-in{max-width:960px; margin:0 auto; padding:9px 14px; display:flex; align-items:center; gap:14px}
.marca{display:flex; align-items:center; gap:9px; text-decoration:none}
.marca-ico{
  width:32px; height:32px; display:grid; place-items:center; border-radius:3px;
  background:var(--accent); color:#fff; font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:.04em;
}
.marca-txt{font-family:'Oswald',sans-serif; font-size:18px; letter-spacing:.02em; white-space:nowrap}
.menu{display:flex; gap:4px; margin-left:8px; flex:1}
.menu a{
  text-decoration:none; font-size:14.5px; font-weight:600; color:var(--muted);
  padding:7px 11px; border-radius:3px;
}
.menu a:hover{color:var(--text); background:var(--surface2)}
.menu a.ativo{color:var(--text); background:var(--surface2); box-shadow:inset 0 -2px 0 var(--accent)}
.usuario{display:flex; align-items:center; gap:9px}
.nome-user{font-size:14px; color:var(--muted); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:560px){
  .marca-txt{display:none}
  .nome-user{display:none}
  .topo-in{gap:8px; padding:8px 12px}
}

/* ---------- botões ---------- */
.btn{
  border:1px solid var(--line); background:var(--surface2); border-radius:3px;
  padding:10px 14px; font-size:14px; font-weight:600; text-decoration:none; display:inline-block; text-align:center;
}
.btn:hover{border-color:var(--muted)}
.btn.p{background:var(--c); border-color:var(--c); color:#fff}
.btn.perigo{color:var(--red); border-color:var(--red)}
.btn.peq{padding:6px 10px; font-size:13px}
.btn.pex{padding:6px 9px; font-size:15px; line-height:1}

/* ---------- conteúdo ---------- */
.conteudo{flex:1; width:100%; max-width:960px; margin:0 auto; padding:0 14px}

/* ---------- entrar / cadastrar ---------- */
.caixa{max-width:420px; margin:44px auto 60px; background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:26px 24px}
.caixa h1{font-size:28px; margin-bottom:4px}
.caixa .lead{color:var(--muted); font-size:14.5px; margin:0 0 20px}
.campo{margin-bottom:14px}
.campo label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:4px}
.campo input,.campo textarea,.campo select{
  width:100%; background:var(--surface2); border:1px solid var(--line);
  border-radius:3px; padding:11px 11px; font-size:16px;
}
.campo textarea{min-height:170px; resize:vertical; line-height:1.5}
.recado{border-radius:3px; padding:10px 12px; font-size:14px; margin-bottom:16px}
.recado.erro{background:rgba(214,37,44,.12); border:1px solid var(--red); color:var(--text)}
.recado.ok{background:rgba(46,158,91,.12); border:1px solid var(--green)}
.alt{text-align:center; font-size:14px; color:var(--muted); margin:18px 0 0}
.alt a{color:var(--c); font-weight:600}

/* ---------- dias ---------- */
.days{display:flex; gap:6px; overflow-x:auto; padding:12px 0 10px; scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:1 0 auto; min-width:54px; border:1px solid var(--line); background:var(--surface); border-radius:3px; padding:7px 4px 6px; text-align:center; line-height:1.1}
.day .d{font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:.06em}
.day .t{display:block; font-size:10px; color:var(--muted); margin-top:2px}
.day[aria-pressed="true"]{background:var(--c); border-color:var(--c); color:#fff}
.day[aria-pressed="true"] .t{color:rgba(255,255,255,.85)}
.day.hoje::after{content:""; display:block; height:3px; width:18px; margin:5px auto -2px; background:var(--c); border-radius:2px}
.day[aria-pressed="true"].hoje::after{background:rgba(255,255,255,.9)}

/* ---------- capa do dia ---------- */
.hero{padding:16px 0 14px; border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(38px,12vw,58px); line-height:.9; text-transform:uppercase; color:var(--c)}
.hero .sub{font-size:15px; color:var(--muted); margin-top:8px; max-width:62ch}
.meter{margin-top:14px; height:6px; background:var(--surface2); border-radius:3px; overflow:hidden}
.meter i{display:block; height:100%; width:0; background:var(--c); transition:width .25s ease}
.meter-lab{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-top:7px}

/* ---------- exercícios ---------- */
.grupo{display:flex; align-items:center; gap:10px; margin:22px 0 8px}
.grupo h2{font-size:13px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; font-weight:500}
.grupo i{flex:1; height:1px; background:var(--line)}
.ex{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:12px 13px; margin-bottom:8px}
.ex.done{border-color:var(--c)}
.ex .top{display:flex; justify-content:space-between; gap:8px; align-items:flex-start}
.ex .nome{font-weight:600; font-size:16.5px; flex:1}
.ex .reps{font-family:'Oswald',sans-serif; font-size:16px; color:var(--c); white-space:nowrap}
.ex .meta{font-size:13px; color:var(--muted); margin-top:2px}
.icones{display:flex; gap:4px}
.ico{width:32px; height:32px; border:1px solid var(--line); background:var(--surface2); border-radius:3px; display:grid; place-items:center; padding:0; font-size:15px; color:var(--muted); line-height:1}
.ico.tem{color:var(--c); border-color:var(--c)}
.linha{display:flex; align-items:center; gap:10px; margin-top:11px; flex-wrap:wrap}
.sets{display:flex; gap:6px; flex-wrap:wrap}
.set{width:38px; height:38px; border-radius:3px; border:1px solid var(--line); background:var(--surface2); font-family:'Oswald',sans-serif; font-size:15px; color:var(--muted); display:grid; place-items:center; padding:0}
.set[aria-pressed="true"]{background:var(--c); border-color:var(--c); color:#fff}
.carga{margin-left:auto; display:flex; align-items:center; gap:6px}
.carga input{width:76px; height:38px; text-align:right; padding:0 8px; font-size:16px; font-weight:600; background:var(--surface2); border:1px solid var(--line); border-radius:3px; font-family:'Oswald',sans-serif}
.carga input::-webkit-outer-spin-button,.carga input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.carga span{font-size:13px; color:var(--muted)}

/* ---------- cardio ---------- */
.fase{display:flex; gap:12px; align-items:baseline; padding:11px 13px; background:var(--surface); border:1px solid var(--line); border-radius:4px; margin-bottom:6px; width:100%; text-align:left}
.fase.ativa{border-color:var(--c); background:var(--surface2)}
.fase .t{font-family:'Oswald',sans-serif; font-size:17px; color:var(--c); min-width:58px}
.fase .n em{display:block; font-style:normal; font-size:13px; color:var(--muted)}

/* ---------- barra do cronômetro ---------- */
.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:35; background:var(--surface);
  border-top:1px solid var(--line); padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
}
.bar .in{max-width:960px; margin:0 auto; display:flex; align-items:center; gap:10px}
.clock{font-family:'Oswald',sans-serif; font-size:34px; line-height:1; font-variant-numeric:tabular-nums; min-width:92px}
.clock.run{color:var(--c)}
.bar .lab{font-size:13px; color:var(--muted); flex:1; min-width:0}
.acoes{display:flex; gap:8px; margin:18px 0 8px; flex-wrap:wrap}
.acoes .btn{flex:1; min-width:140px}
.nota{font-size:13px; color:var(--muted); margin:16px 0 0; max-width:66ch}
.estado{font-size:12.5px; color:var(--muted); text-align:center; padding:10px 0 28px; min-height:20px}

/* ---------- modais ---------- */
.mask{position:fixed; inset:0; z-index:60; background:rgba(5,8,12,.72); display:none; align-items:center; justify-content:center; padding:16px 12px}
.mask.on{display:flex}
.modal{background:var(--bg); border:1px solid var(--line); border-radius:5px; width:100%; max-width:880px; max-height:100%; display:flex; flex-direction:column; overflow:hidden}
.modal .cab{display:flex; align-items:flex-start; gap:10px; padding:14px 15px; border-bottom:1px solid var(--line)}
.modal .cab h3{font-size:21px; line-height:1.15; flex:1}
.modal .cab .sub{font-size:13px; color:var(--muted); margin-top:3px}
.fechar{width:34px; height:34px; border:1px solid var(--line); background:var(--surface2); border-radius:3px; font-size:17px; line-height:1; padding:0}
.corpo{overflow:auto; -webkit-overflow-scrolling:touch}
.duas{display:grid; grid-template-columns:1fr 1fr}
@media (max-width:660px){.duas{grid-template-columns:1fr}}
.pane{padding:15px}
.pane+.pane{border-left:1px solid var(--line)}
@media (max-width:660px){.pane+.pane{border-left:0; border-top:1px solid var(--line)}}
.gifbox{background:var(--surface2); border:1px solid var(--line); border-radius:4px; min-height:190px; display:grid; place-items:center; overflow:hidden}
.gifbox img{width:100%; height:auto; display:block; max-height:52vh; object-fit:contain}
.gifbox .vazio{color:var(--muted); font-size:13.5px; text-align:center; padding:26px 18px; max-width:30ch}
.pane h4{font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; font-weight:500; margin:0 0 8px}
.exec{white-space:pre-wrap; font-size:15.5px; line-height:1.55}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.chip{background:var(--surface2); border:1px solid var(--line); border-radius:3px; padding:5px 9px; font-size:13px; color:var(--muted)}
.chip b{color:var(--text); font-weight:600}
.tres{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.rodape-modal{display:flex; gap:8px; padding:12px 15px; border-top:1px solid var(--line); background:var(--surface); flex-wrap:wrap}
.rodape-modal .btn{flex:1; min-width:120px}
.arquivo{display:block; border:1px dashed var(--line); border-radius:4px; padding:12px; text-align:center; font-size:14px; color:var(--muted); background:var(--surface2); cursor:pointer}
.arquivo input{display:none}

/* ---------- progresso ---------- */
.tabela{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-bottom:26px}
.tabela th,.tabela td{padding:9px 11px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line)}
.tabela th{background:var(--surface2); font-family:'Oswald',sans-serif; font-weight:500; font-size:13px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
.tabela tr:last-child td{border-bottom:0}
.tabela td.num{font-family:'Oswald',sans-serif; text-align:right}
.vazio-aviso{color:var(--muted); font-size:14.5px; padding:22px 0}

/* ---------- rodapé ---------- */
.rodape{margin-top:46px; background:var(--surface); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0px)}
body.tem-barra .rodape{margin-bottom:76px}
.rodape-in{max-width:960px; margin:0 auto; padding:26px 14px 18px; display:grid; grid-template-columns:2fr 1fr 1.4fr; gap:26px}
@media (max-width:660px){.rodape-in{grid-template-columns:1fr; gap:18px}}
.rodape-col strong{font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:7px}
.rodape-col p{margin:0; font-size:13.5px; color:var(--muted); max-width:44ch}
.rodape-col a{display:block; font-size:13.5px; color:var(--muted); text-decoration:none; padding:2px 0}
.rodape-col a:hover{color:var(--text)}
.rodape-fim{
  max-width:960px; margin:0 auto; padding:12px 14px 20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--muted); flex-wrap:wrap;
}