/* Timer de ejercicio — estilos. Oscuro siempre; cada fase con su degradado. */
/* registradas para que el cambio de color entre fases sea un fundido */
@property --c { syntax: "<color>"; inherits: true; initial-value: #f59e0b; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #ea580c; }

:root {
  --bg: #0e0f13;
  --bg2: #1a1c23;
  --bg3: #272a33;
  --line: #22252d;
  --track: #353944;
  --text: #f5f6f8;
  --soft: #c3c7d1;
  --muted: #8b90a0;
  --accent: #34d399;
  --accent-2: #059669;
  --danger: #fb7185;
  /* cada fase: color claro y oscuro de su degradado */
  --prepare: #f59e0b;
  --prepare-2: #ea580c;
  --work: #10b981;
  --work-2: #047857;
  --rest: #fb7185;
  --rest-2: #e11d48;
  --recovery: #a78bfa;
  --recovery-2: #7c3aed;
  --cooldown: #38bdf8;
  --cooldown-2: #2563eb;
  --rounds: #e2e8f0;
  --cycles: #94a3b8;
  /* --c y --c2: colores de la fase que toca (los fija data-phase, que cambia app.js) */
  --c: var(--prepare);
  --c2: var(--prepare-2);
  --font: "Avenir Next Condensed", "AvenirNextCondensed-Bold", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, "Bahnschrift", system-ui, sans-serif;
  color-scheme: dark;
}
[data-phase=prepare] { --c: var(--prepare); --c2: var(--prepare-2); }
[data-phase=work], [data-phase=done] { --c: var(--work); --c2: var(--work-2); }
[data-phase=rest] { --c: var(--rest); --c2: var(--rest-2); }
[data-phase=recovery] { --c: var(--recovery); --c2: var(--recovery-2); }
[data-phase=cooldown] { --c: var(--cooldown); --c2: var(--cooldown-2); }
[data-phase=end] { --c: var(--muted); --c2: var(--muted); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body {
  font-family: var(--font);
  font-stretch: condensed;
  font-weight: 700;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
  overflow: hidden;
}
input, select { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .3; cursor: default; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg .fill { fill: currentColor; stroke: none; }

#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.scroll { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#v-rutinas, #v-crono, #v-ajustes { width: 100%; max-width: 760px; margin: 0 auto; }

.ibtn { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; }
.ibtn:active { background: rgba(255, 255, 255, .1); }
.accent { color: var(--accent); }

/* ---------- Timer ---------- */
#v-timer {
  background: radial-gradient(120% 50% at 50% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 75%);
  transition: --c .35s, --c2 .35s;
}
.t-head {
  flex: none;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 4px) 6px 8px;
  color: var(--soft);
}
.t-title { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.05; text-transform: uppercase; }
#t-name { max-width: 100%; color: var(--muted); font-size: 19px; line-height: 1.3; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#t-total { font-size: 28px; color: var(--text); font-variant-numeric: tabular-nums; }

/* la fase que corre: tarjeta con el degradado de su color */
.t-now {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px;
  padding-bottom: 28px;
  border-radius: 30px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(255, 255, 255, .2), transparent 60%),
    linear-gradient(160deg, var(--c), var(--c2));
}
.t-counts { align-self: stretch; display: flex; justify-content: space-between; padding: 14px 20px 0; }
.t-count { display: flex; align-items: baseline; gap: 7px; text-transform: uppercase; }
.t-count > small { font-size: 15px; letter-spacing: .1em; opacity: .85; }
.t-count b { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.t-count b small { font-size: .62em; opacity: .7; }
.t-phase { margin-top: auto; font-size: min(14vw, 8.5vh); font-weight: 800; line-height: 1; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.t-time {
  margin-bottom: auto;
  font-size: min(37vw, 27vh);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.t-phase, .t-time { text-shadow: 0 3px 18px rgba(0, 0, 0, .14); }
.t-bar { position: absolute; left: 20px; right: 20px; bottom: 16px; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .28); }
.t-bar i { display: block; width: 100%; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
@keyframes blink { 50% { opacity: .3; } }
.paused .t-time { animation: blink 1.4s ease-in-out infinite; }

/* la que sigue: tarjeta oscura con un punto de su color */
.t-next {
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 14px;
  height: clamp(62px, 10vh, 92px);
  margin: 10px 10px 0;
  padding: 0 20px;
  position: relative;
  border-radius: 22px;
  background: var(--bg2);
  transition: --c .35s;
}
.t-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c); }
.t-next-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; text-transform: uppercase; }
.t-next-txt small { color: var(--muted); font-size: 14px; letter-spacing: .1em; }
#t-next-phase { color: var(--c); font-size: min(7vw, 3.8vh); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#t-next-time { font-size: min(10vw, 5.4vh); font-weight: 800; font-variant-numeric: tabular-nums; }
#t-next-time:empty { display: none; }
.done .t-next-txt small { display: none; }
/* aviso de la mitad: tapa la tarjeta «Sigue» unos segundos */
.t-half {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: inherit;
  background: var(--text);
  color: var(--bg);
  font-size: min(7vw, 3.8vh);
  text-transform: uppercase;
  opacity: 0;
  transform: scale(.96);
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.t-half b { font-size: 1.35em; }
.halfway .t-half { opacity: 1; transform: none; }

/* botones: atrás · iniciar o pausar · saltar (el cronómetro usa los mismos) */
.t-ctrl, .sw-ctrl { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.t-ctrl { padding: 14px 12px 10px; }
.side { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--soft); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.side:has(:disabled) > span { opacity: .3; }
.round { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--bg2); color: var(--text); }
.round:active { background: var(--bg3); }
.t-play { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--c); font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.play {
  width: min(24vw, 12vh, 96px);
  height: min(24vw, 12vh, 96px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--c), var(--c2));
  color: #fff;
  box-shadow: 0 12px 28px -12px var(--c2), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .1s;
}
.play:active { transform: scale(.94); }
.play svg { width: 44%; height: 44%; fill: currentColor; stroke: none; }
.play svg.i-again { fill: none; stroke: currentColor; stroke-width: 2.6; }
.play .i-pause, .play .i-again { display: none; }
.running .play .i-play, .done .play .i-play { display: none; }
.running .play .i-pause, .done .play .i-again { display: block; }

/* Teléfono acostado, tablet o computador: el tiempo a la izquierda, lo demás a la derecha */
@media (orientation: landscape) and (min-aspect-ratio: 5/4) {
  #v-timer { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: auto 1fr auto; }
  .t-head { grid-column: 1 / -1; }
  .t-now { grid-row: 2 / span 2; margin: 0 0 10px 10px; }
  .t-next { grid-column: 2; grid-row: 2; height: auto; margin: 0 10px; }
  .t-ctrl { grid-column: 2; grid-row: 3; }
  .t-time { font-size: min(22vw, 36vh); }
  .t-phase { font-size: min(8vw, 12vh); }
  #t-next-phase { font-size: min(3.6vw, 7vh); }
  #t-next-time { font-size: min(6vw, 11vh); }
  .play { width: min(12vw, 22vh, 96px); height: min(12vw, 22vh, 96px); }
  .t-ctrl .round { width: 56px; height: 56px; }
  .sw-time { font-size: min(13vw, 24vh); padding: 3vh 0 2vh; }
}

/* ---------- Encabezado de las otras pestañas ---------- */
.v-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 6px) 8px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.v-head h1 { grid-column: 2; margin: 0; text-align: center; font-size: 30px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.v-head .ibtn { grid-column: 3; }

/* ---------- Rutinas ---------- */
.cards { list-style: none; margin: 0; padding: 12px 12px 0; display: grid; gap: 10px; }
.card {
  display: grid;
  grid-template-columns: 1fr auto 48px;
  align-items: center;
  gap: 8px;
  padding: 12px 2px 12px 16px;
  background: var(--bg2);
  border: 2px solid transparent;
  border-radius: 18px;
  cursor: pointer;
}
.card.on { border-color: var(--accent); }
.card .nm { font-size: 26px; line-height: 1.1; text-transform: uppercase; overflow-wrap: anywhere; }
.card .sum { display: block; margin-top: 3px; color: var(--muted); font-size: 16px; font-weight: 600; }
.card .tot { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.card .ibtn { width: 46px; height: 46px; color: var(--muted); }
.wide {
  display: block;
  width: calc(100% - 24px);
  margin: 14px 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--bg2);
  color: var(--accent);
  font-size: 22px;
  text-align: center;
  text-transform: uppercase;
}
.wide:active, .card:active { background: var(--bg3); }
.wide.danger { color: var(--danger); }
.note { margin: 10px 20px 28px; color: var(--muted); font-size: 16px; font-weight: 600; line-height: 1.4; text-align: center; }

/* ---------- Cronómetro ---------- */
#v-crono { --c: var(--accent); --c2: var(--accent-2); }
.sw-time {
  flex: none;
  padding: 6vh 0 4vh;
  text-align: center;
  font-size: min(20vw, 15vh);
  font-weight: 800;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.sw-ctrl { padding: 0 12px 16px; }
.laps { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0 0 12px; list-style: none; border-top: 1px solid var(--line); }
.laps li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.laps li span:last-child { color: var(--muted); }
.laps li.best { color: var(--work); }
.laps li.worst { color: var(--rest); }

/* ---------- Ajustes ---------- */
.sec { margin: 0; padding: 20px 16px 8px; color: var(--muted); font-size: 18px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.set {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 68px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.set b { font-size: 23px; font-weight: 700; text-transform: uppercase; }
.set small { display: block; margin-top: 2px; color: var(--muted); font-size: 15px; font-weight: 600; text-transform: uppercase; }
.set.off { opacity: .35; pointer-events: none; }
.set select {
  -webkit-appearance: none;
  appearance: none;
  max-width: 62%;
  padding: 8px 22px 8px 0;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b90a0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right center / 15px;
  color: var(--accent);
  font: inherit;
  font-size: 21px;
  text-align: right;
  text-align-last: right;
  text-transform: uppercase;
  text-overflow: ellipsis;
  cursor: pointer;
}
.switch input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 62px;
  height: 36px;
  margin: 0;
  border-radius: 18px;
  background: var(--track);
  cursor: pointer;
  transition: background-color .2s;
}
.switch input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: transform .2s;
}
.switch input:checked { background: var(--accent); }
.switch input:checked::before { transform: translateX(26px); }
.vol { gap: 12px; }
.vol input { flex: 1; min-width: 0; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 34px; margin: 0; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(var(--accent), var(--accent)) 0 / var(--p, 50%) 100% no-repeat, var(--track);
}
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -13px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--track); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; }
.pill { flex: none; padding: 10px 18px; border-radius: 20px; background: var(--accent); color: var(--bg); font-size: 18px; text-transform: uppercase; }

/* ---------- Pestañas ---------- */
.tabbar {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px max(8px, calc((100% - 760px) / 2)) calc(4px + env(safe-area-inset-bottom));
  background: #13151a;
  border-top: 1px solid var(--line);
}
.tabbar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 0 5px;
  border-radius: 18px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.tabbar button[aria-current] { background: var(--bg3); color: var(--text); }
.tabbar svg { width: 28px; height: 28px; }

/* ---------- Editor de rutina ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: var(--bg);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s;
}
.sheet.open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.ed-head, .ed-body { width: 100%; max-width: 760px; margin: 0 auto; }
.ed-head {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 6px) 14px 8px;
  border-bottom: 1px solid var(--line);
}
.ed-head h2 { margin: 0; font-size: 28px; text-transform: uppercase; }
.txt { padding: 10px 4px; font-size: 24px; text-transform: uppercase; }
.txt.muted { justify-self: start; color: var(--muted); }
.txt.accent { justify-self: end; }
.ed-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.ed-name {
  display: block;
  width: calc(100% - 24px);
  margin: 14px 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--bg2);
  color: var(--text);
  font: 700 26px var(--font);
  text-align: center;
  text-transform: uppercase;
}
.ed-name::placeholder { color: var(--muted); }
.band { margin: 0; padding: 14px; background: #16181e; color: var(--muted); font-size: 26px; font-weight: 700; text-align: center; text-transform: uppercase; }
.row {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr auto 18px;
  align-items: center;
  column-gap: 10px;
  min-height: 86px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--line);
}
.row .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--d); }
.row b { display: block; font-size: 25px; line-height: 1.1; text-transform: uppercase; }
.row small { display: block; margin-top: 3px; color: var(--muted); font-size: 15px; font-weight: 600; text-transform: uppercase; }
.row .val { font-size: 46px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.row svg { width: 18px; height: 18px; color: var(--muted); }
.row select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.row:focus-within { background: rgba(255, 255, 255, .05); }
.row.dim { opacity: .4; }
.ed-total { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 16px; color: var(--muted); font-size: 22px; text-transform: uppercase; }
.ed-total b { color: var(--text); font-size: 36px; font-variant-numeric: tabular-nums; }
.ed-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; }
.ed-actions .wide { width: auto; margin: 0; }