/* Identidade da Escola São Luís Gonzaga: azul-marinho do brasão, dourado do aro e do "L",
   marfim do lírio. As fases vêm dessas cores: preparação = marfim, luta = dourado,
   descanso = azul royal. Diferem também em claridade, então seguem distintas para
   daltônicos. Texto das fases com contraste de pelo menos 7:1 (paleta revisada pelo
   Brand Guardian). Para ajustar, mude só os tokens.
   Pensado primeiro para celular (375 px): alvos de toque de 44 px, texto de 16 px nos campos
   (o iPhone dá zoom abaixo disso) e áreas seguras do aparelho respeitadas. */
:root {
  color-scheme: dark;
  --brand: #d8a93b;
  --brand-strong: #f2de8e;
  --on-brand: #0b1631;
  --bg: #040814;
  --chrome: #0b1631;
  --panel: #0e1b3b;
  --text: #f7f3e8;
  --muted: #a9b4d0;
  --line: #24345e;
  --field-line: #6a7aa6;
  --prep: #f5efdc;
  --work: #e2a72e;
  --rest: #1f47b8;
  --rest-ink: #7fa2ff;
  --idle: #16244a;
  --on-phase: #0a1633;
  --on-rest: #fffaf0;
  --rounds: #8fb4ff;
  --cycles: #f2de8e;
  --accent: var(--brand);
  --alert: #ff8f80;
  --tap: 44px;
  /* Condensada em todos os aparelhos: Android usa Roboto Condensed, Windows usa Impact. */
  --display: "Bebas Neue", "Oswald", "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", Impact, "Haettenschweiler", sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 20px 0 4px;
  padding-left: 8px;
  border-left: 3px solid var(--brand);
}

.hint {
  color: var(--muted);
  font-size: .9rem;
  margin: 4px 0;
}

/* ---------- Tela do timer ---------- */

/* Ocupa a altura toda no celular; no computador vira um aparelho centralizado. */
.stage {
  width: 100%;
  max-width: 720px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--chrome);
}

/* Barra do topo: menu | treino e tempo que falta | modo parede. */
.bar {
  display: grid;
  grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap);
  align-items: center;
  gap: 8px;
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: 14px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  background: var(--chrome);
}
/* Brasão da escola à esquerda do nome do treino e do tempo que falta. */
.bar-title {
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  grid-template-areas: "crest name" "crest total";
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  text-align: center;
  min-width: 0;
}
.bar-crest { grid-area: crest; height: 52px; width: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.bar-title .title-select { grid-area: name; justify-self: center; }
.bar-title .bar-total { grid-area: total; }

/* O nome do treino é o próprio seletor: toque nele para trocar de treino. */
.title-select {
  width: auto;
  max-width: 100%;
  field-sizing: content;
  min-height: 32px;
  padding: 2px 22px 2px 6px;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d8a93b'/%3E%3C/svg%3E") no-repeat right 6px center;
  appearance: none;
  -webkit-appearance: none;
  color: var(--brand-strong);
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-overflow: ellipsis;
}
.title-select option, .title-select optgroup { background: var(--panel); color: var(--text); font-family: system-ui, sans-serif; text-transform: none; }
.bar-total, .phase, .clock, .next-label, .next-clock, .count-num {
  font-weight: 700;
  font-synthesis: none;
}
.bar-total {
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--stage-color, var(--text));
}

button.icon-btn {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--stage-color, var(--text));
}
.icon-btn svg { width: 26px; height: 26px; }

/* Fase atual. A cor vem do data-phase do .stage (definido em app.js). */
.now {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
  background: var(--now-bg);
  color: var(--now-fg);
  text-align: center;
}
.stage { --now-bg: var(--idle); --now-fg: var(--text); --stage-color: var(--text); }
.stage[data-phase="prep"] { --now-bg: var(--prep); --now-fg: var(--on-phase); --stage-color: var(--prep); }
.stage[data-phase="work"] { --now-bg: var(--work); --now-fg: var(--on-phase); --stage-color: var(--work); }
.stage[data-phase="rest"] { --now-bg: var(--rest); --now-fg: var(--on-rest); --stage-color: var(--rest-ink); }
.stage[data-phase="done"] { --now-bg: var(--bg); --now-fg: var(--brand-strong); --stage-color: var(--brand-strong); }

.phase {
  font-family: var(--display);
  font-size: clamp(2.8rem, 15vw, 5.5rem);
  line-height: .85;
  max-width: 100%;
  text-transform: uppercase;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}

.clock {
  font-family: var(--display);
  font-size: min(40vw, 36vh, 16rem);
  font-size: min(40vw, 36dvh, 16rem);
  font-variant-numeric: tabular-nums;
  line-height: .9;
  letter-spacing: -.01em;
}
.clock.paused { opacity: .5; }

.meta {
  margin-top: 6px;
  font-size: .95rem;
  font-weight: 700;
  opacity: .8;
}

/* Contagem final: o painel pisca em azul-marinho só 3 vezes (não pisca sem parar).
   Branco quase não se distinguia do marfim da preparação. */
.now.warn { animation: flash 1s steps(2, start) 3; }
@keyframes flash {
  to { background: var(--on-phase); color: var(--brand-strong); }
}
@media (prefers-reduced-motion: reduce) {
  .now.warn { animation: none; outline: 6px solid #ffffff; outline-offset: -6px; }
}

/* Reiniciar o tempo atual: botão redondo no canto, como nos timers de academia. */
button.round-btn {
  position: absolute;
  top: -22px;
  z-index: 2;
  right: max(12px, env(safe-area-inset-right));
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--chrome);
  border: 3px solid var(--now-bg);
  color: var(--text);
}
.round-btn svg { width: 24px; height: 24px; }

/* "A seguir": cor da próxima fase, para o atleta já saber o que vem. */
.next {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 .4em;
  padding: 6px 12px;
  background: var(--next-bg);
  color: var(--next-fg);
  text-align: center;
}
.next { --next-bg: var(--idle); --next-fg: var(--text); }
.next[data-phase="prep"] { --next-bg: var(--prep); --next-fg: var(--on-phase); }
.next[data-phase="work"] { --next-bg: var(--work); --next-fg: var(--on-phase); }
.next[data-phase="rest"] { --next-bg: var(--rest); --next-fg: var(--on-rest); }
.next-label {
  font-family: var(--display);
  font-size: clamp(1.6rem, 8vw, 2.6rem);
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.next-clock {
  font-family: var(--display);
  font-size: clamp(2.6rem, 15vw, 4.6rem);
  line-height: .95;
  font-variant-numeric: tabular-nums;
}

/* Rodapé: rounds que faltam | iniciar/pausar com anel | ciclos que faltam. */
.dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 14px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  background: var(--chrome);
}
.count {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}
.count-num {
  font-family: var(--display);
  font-size: clamp(3rem, 16vw, 4.6rem);
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.rounds .count-num { color: var(--rounds); }
.cycles .count-num { color: var(--cycles); }
.count-cap {
  font-family: var(--display);
  font-size: .8rem;
  max-width: 9ch;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.1;
}

.play { display: flex; flex-direction: column; align-items: center; gap: 4px; }
button.play-btn {
  position: relative;
  width: 112px;
  height: 112px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--stage-color);
}
.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--line); stroke-width: 9; }
.ring-bar {
  fill: none;
  stroke: var(--stage-color);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset .35s linear;
}
.stage[data-phase="idle"] .ring-bar { stroke: var(--brand); }
.play-icon { position: relative; width: 38px; height: 38px; fill: currentColor; }
.stage[data-phase="idle"] .play-btn { color: var(--text); }
.play-label {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stage-color);
}

/* Ações menos usadas, discretas, abaixo do rodapé. */
.aux {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--chrome);
}
.aux button {
  min-width: 0;
  min-height: var(--tap);
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Logo da academia: só no modo parede. */
.logo { display: none; max-width: 200px; max-height: 90px; object-fit: contain; }
.brand-logo { height: 48px; width: auto; }

/* ---------- Botões e campos ---------- */

button, .button {
  font: inherit;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  min-height: var(--tap);
  background: var(--accent);
  color: var(--on-brand);
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
}
.secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--muted);
}
.danger { color: var(--alert); border-color: var(--alert); }
/* Primeiro toque em ação destrutiva: o botão fica branco e pede confirmação. */
button.armed { background: #ffffff; color: var(--on-brand); border-color: #ffffff; }
button:disabled { opacity: .4; cursor: default; }

.stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .9rem;
  color: var(--muted);
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  font-size: .95rem;
  color: var(--text);
}

input, select {
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--field-line);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
  min-width: 0;
  min-height: var(--tap);
  touch-action: manipulation;
}
.check input {
  width: 24px;
  height: 24px;
  min-height: 0;
  accent-color: var(--brand);
}

input:invalid { border-color: var(--alert); }

.row input { flex: 1; width: auto; }

/* ---------- Editor ---------- */

.editor {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Abre logo abaixo do cabeçalho fixo do painel, sem esconder o campo Nome. */
  scroll-margin-top: 80px;
}

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.apply-all {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.beep-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.cycles { display: flex; flex-direction: column; gap: 14px; }

.cycle {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cycle > .small { align-self: flex-start; margin-top: 4px; }

.cycle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.cycle-head h3 { margin: 0; font-size: 1rem; }
.cycle-actions { display: flex; gap: 8px; }

button.small { padding: 8px 12px; font-size: .9rem; }
button.icon { padding: 8px 0; min-width: var(--tap); justify-self: end; background: transparent; border-color: transparent; }
button.icon.danger { color: var(--alert); }

/* Cada tempo ocupa três linhas: nome | preparação, duração, descanso | contagem.
   Funciona igual no celular e no desktop (o painel nunca passa de 560 px). */
.round-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "name name name name name del"
    "prep prep dur  dur  rest rest"
    "up   up   up   up   up   up";
  gap: 8px 6px;
  align-items: end;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.cycle .round-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.c-name { grid-area: name; }
.c-prep { grid-area: prep; }
.c-dur { grid-area: dur; }
.c-rest { grid-area: rest; }
.c-up { grid-area: up; }
.c-del { grid-area: del; align-self: end; }
.no-rest .rest-field { display: none; }

/* Legenda de cada campo, sempre visível: sem cabeçalho de colunas. */
.f { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cap { font-size: .8rem; color: var(--muted); }

/* ---------- Configurações (painel sobreposto) ---------- */


body.sheet-open { overflow: hidden; }

/* Celular: ocupa a tela inteira. Telas largas: cartão centralizado sobre fundo escurecido. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(0, 0, 0, .78);
  padding-block: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-bottom));
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}
.sheet-body {
  max-width: 560px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: 16px;
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sheet-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.sheet-title { margin: 0; }
.sheet-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.group { padding: 12px 0 16px; border-bottom: 1px solid var(--line); }
.group:last-child { border-bottom: 0; padding-bottom: 0; }
.group h3 {
  margin: 4px 0 6px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-left: 8px;
  border-left: 3px solid var(--brand);
}
.current { margin: 8px 0 0; font-size: .95rem; }

/* Grupos do editor: tempos, sons e repetição. */
.block {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.block legend {
  padding: 0 6px;
  font-weight: 700;
  font-size: .95rem;
}

.sync-status { font-size: .9rem; margin: 6px 0; color: var(--muted); }
.sync-status[data-status="ok"] { color: var(--text); }
.sync-status[data-status="offline"],
.sync-status[data-status="unauthorized"],
.sync-status[data-status="error"] { color: var(--alert); }

.code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .05em;
  color: var(--text);
  user-select: all;
}

/* Aviso rápido no topo: fica visível mesmo com o teclado aberto ou a tela rolada. */
.notice {
  position: fixed;
  z-index: 30;
  top: max(12px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  max-width: 560px;
  margin-inline: auto;
  padding: 12px 14px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--brand-strong);
  border-radius: 10px;
  font-size: .95rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .6);
}
.notice:empty { display: none; }


/* ---------- Modo parede (display do coach) ---------- */

/* Mesma tela, sem os botões de menu: logo da academia no topo e "Sair" no rodapé. */
.wall .stage { max-width: none; }
.wall .bar { grid-template-columns: auto minmax(0, 1fr) auto; }
.wall #settingsBtn, .wall #wallBtn { display: none; }
.wall .logo { display: block; grid-column: 1; max-height: 72px; max-width: 30vw; }
.wall .logo.brand-only { display: block; }
.wall .bar-title { grid-column: 2; }
.wall .bar-crest { display: none; }
.wall .title-select { pointer-events: none; background-image: none; padding-right: 6px; }
.wall .aux { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Celular e telas estreitas ---------- */

@media (max-width: 480px) {
  .sheet { padding-inline: 0; padding-top: 0; }
  .sheet-body { border-radius: 0 0 16px 16px; border-inline: 0; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .block { padding: 10px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .apply-all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .apply-all button { grid-column: 1 / -1; }
  .beep-row { grid-template-columns: minmax(0, 1fr); }
  .cycle { padding: 10px; }
}

/* Telas baixas em pé (celular pequeno): diminui o botão e o "a seguir" para tudo caber. */
@media (orientation: portrait) and (max-height: 700px) {
  button.play-btn { width: 92px; height: 92px; }
  .phase { font-size: clamp(2rem, 11vw, 3.6rem); }
  .clock { font-size: min(38vw, 30vh); font-size: min(38vw, 30dvh); }
  .next { padding-block: 2px; }
  .dock { padding-top: 8px; }
  .next-clock { font-size: clamp(2.2rem, 12vw, 3.6rem); }
  .count-num { font-size: clamp(2.6rem, 14vw, 4rem); }
}

/* ---------- Deitado (celular, tablet, computador, TV) ---------- */

/* A fase atual fica à esquerda, grande; "a seguir" e os contadores numa coluna à direita. */
@media (orientation: landscape) {
  .stage {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 28%);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "now bar"
      "now next"
      "now dock"
      "now aux";
  }
  .bar { grid-area: bar; padding-bottom: 6px; }
  .now { grid-area: now; grid-row: 1 / -1; flex-direction: row; gap: 2vw; padding-top: max(12px, env(safe-area-inset-top)); }
  .now > div:not(.phase) { flex: none; }
  .phase {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: clamp(1.6rem, 10dvh, 4rem);
    max-height: 100%;
  }
  .clock { font-size: min(28vw, 72vh, 24rem); font-size: min(28vw, 72dvh, 24rem); }
  .meta { position: absolute; bottom: 10px; left: 0; right: 0; }
  button.round-btn { top: max(12px, env(safe-area-inset-top)); }
  .title-select { font-size: .85rem; background-image: none; padding-right: 6px; }
  .next { grid-area: next; flex-direction: column; align-items: center; justify-content: center; }
  .next-clock { font-size: clamp(2.4rem, 7vw, 5rem); }
  /* Ciclos (amarelo) em cima, rounds (azul) embaixo, botão ao lado. */
  .dock {
    grid-area: dock;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "cycles play" "rounds play";
    padding-block: 10px;
  }
  .dock .cycles { grid-area: cycles; }
  .dock .rounds { grid-area: rounds; }
  .dock .play { grid-area: play; }
  .count { flex-direction: row; gap: 6px; align-items: baseline; justify-content: center; }
  .count-num { font-size: clamp(2.4rem, 5vw, 4.6rem); }
  .aux { grid-area: aux; grid-template-columns: 1fr 1fr; padding-inline: 8px; }
  .wall .aux { grid-template-columns: 1fr 1fr; }
  .wall #exitWall { grid-column: 1 / -1; }
}

/* Celular deitado: tela baixa. Some o "a seguir" detalhado e o rodapé fica compacto. */
@media (orientation: landscape) and (max-height: 480px) {
  .bar { padding-block: 4px 2px; }
  .bar-total { font-size: 1.5rem; }
  .bar-crest { height: 36px; }
  .now { padding-top: 12px; }
  .clock { font-size: min(26vw, 70vh); font-size: min(26vw, 70dvh); }
  .meta { display: none; }
  .next { padding-block: 4px; }
  .next-label { font-size: 1.1rem; }
  .next-clock { font-size: 2.2rem; }
  .dock { padding-block: 4px; row-gap: 2px; }
  button.play-btn { width: 76px; height: 76px; }
  .play-icon { width: 28px; height: 28px; }
  .play-label { display: none; }
  .count-num { font-size: 2.8rem; }
  .count-cap { font-size: .8rem; }
  .aux { padding-block: 4px max(4px, env(safe-area-inset-bottom)); }
  .aux button { min-height: 40px; padding-block: 6px; }
  .wall .logo { max-height: 36px; }
}