/* Timer HIIT — usa los tokens de reservas.css */
.hiit-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
#f-hiit{display:grid;gap:14px}
.btn.big{min-height:52px;padding:0 28px;font-size:.86rem}
.resumen{background:var(--surface-3);border-radius:12px;padding:12px 14px;font-size:14px;display:flex;flex-wrap:wrap;gap:6px 18px}
.resumen b{font:600 24px/1 var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-right:4px}
.presets{display:grid;gap:8px}
.preset{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.preset:hover{border-color:rgba(255,80,55,.4)}
.preset b{display:block;font-weight:700;font-size:14px}
.preset span{font-size:12px;color:var(--muted-2)}
.preset i{font-style:normal;font:600 20px/1 var(--display);color:var(--accent-ink)}
.tips{margin:0;padding-left:18px;display:grid;gap:8px;font-size:14px;color:var(--muted)}
.tips b{color:var(--ink)}

/* Pantalla del timer */
.timer{--fase:var(--gold);--fase-soft:var(--gold-soft);
  min-height:calc(100vh - 160px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vh,28px);
  text-align:center;border-radius:28px;padding:clamp(20px,4vw,40px) 16px;background:radial-gradient(circle at 50% 35%,var(--fase-soft),transparent 65%),rgba(10,12,16,.92);
  border:1px solid var(--line);box-shadow:inset 0 0 0 2px var(--fase-soft);transition:background-color .3s}
.timer[data-fase="trabajo"]{--fase:var(--accent);--fase-soft:rgba(255,80,55,.22)}
.timer[data-fase="descanso"],.timer[data-fase="pausa-serie"]{--fase:var(--clase);--fase-soft:rgba(127,178,255,.18)}
.timer.pausado .t-reloj{opacity:.45}
.t-top{display:flex;flex-direction:column;align-items:center;gap:6px}
.t-fase{font:600 clamp(40px,9vw,72px)/.9 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--fase)}
.t-round{font-size:15px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.t-reloj{font:600 clamp(120px,34vw,300px)/.8 var(--display);letter-spacing:.01em;color:#fff;font-variant-numeric:tabular-nums}
.t-bar{width:min(560px,100%);height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.t-bar i{display:block;height:100%;width:0;background:var(--fase);border-radius:999px}
.t-next{min-height:22px;font-size:15px;color:var(--muted)}
.t-next b{color:var(--ink)}
.t-ctrl{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.t-ctrl .btn{min-width:110px;min-height:52px}
.t-total{min-height:18px}

.fin h2{font-size:48px;margin:2px 0 16px}
.fin .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.sorteo{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 16px}
.sorteo span{font:600 18px/1 var(--display);padding:6px 10px;border-radius:10px;background:var(--accent-soft);color:var(--ink);font-variant-numeric:tabular-nums}

@media (max-width:900px){.hiit-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.fin .stats{grid-template-columns:minmax(0,1fr)}.t-ctrl .btn{min-width:0;flex:1 1 30%}}
@media (prefers-reduced-motion:reduce){.timer{transition:none}}