/* ============================================================
   App — sistema
   As peças com que as telas novas se montam. Só usam os tokens novos
   (tokens.css, primeira metade), nunca os nomes da ponte.

   Regras que valem para todas (docs/plano-design.md, secções 2 e 6):
   - alvo de toque ≥ 44 px, mesmo quando o desenho é menor;
   - vidro só no que flutua e é pequeno, nunca em lista longa;
   - nada importante só por cor;
   - o que se mexe respeita "reduzir movimento".
   Ver tudo junto: tools/catalogo.html.
   ============================================================ */

/* O span que recebe o SVG não pode herdar a entrelinha do texto: com
   a letra grande, o desenho descia e saía da caixa. */
:is(.linha__icone, .linha__seta, .botao, .botao-redondo, .ficha, .menu__item, .passo, .vazio__icone) [data-icon] {
  display: grid;
  place-items: center;
  line-height: 0;
}

/* ── texto ────────────────────────────────────────────────── */
.t-titulo-grande { font: var(--t-titulo-grande); letter-spacing: var(--k-titulo-grande); }
.t-titulo1   { font: var(--t-titulo1); letter-spacing: var(--k-titulo1); }
.t-titulo2   { font: var(--t-titulo2); letter-spacing: var(--k-titulo2); }
.t-titulo3   { font: var(--t-titulo3); letter-spacing: var(--k-titulo3); }
.t-destaque  { font: var(--t-destaque); letter-spacing: var(--k-corpo); }
.t-corpo     { font: var(--t-corpo); letter-spacing: var(--k-corpo); }
.t-chamada   { font: var(--t-chamada); letter-spacing: var(--k-chamada); }
.t-subtitulo { font: var(--t-subtitulo); letter-spacing: var(--k-subtitulo); }
.t-rodape    { font: var(--t-rodape); letter-spacing: var(--k-rodape); }
.t-legenda1  { font: var(--t-legenda1); letter-spacing: var(--k-legenda1); }
.t-legenda2  { font: var(--t-legenda2); letter-spacing: var(--k-legenda2); }
.t-numero    { font: var(--t-numero); letter-spacing: var(--k-numero); font-variant-numeric: tabular-nums; }
.t-2 { color: var(--texto-2); }
.t-tabular { font-variant-numeric: tabular-nums; }

/* ── material: vidro ──────────────────────────────────────── */
.vidro {
  background: var(--vidro);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
  box-shadow: inset 0 0 0 0.5px var(--vidro-borda), var(--sombra-flutuante);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidro { background: var(--superficie); }
}

/* ── título da tela ───────────────────────────────────────── */
.titulo-grande {
  font: var(--t-titulo-grande);
  letter-spacing: var(--k-titulo-grande);
  margin: 0;
  padding: var(--e-2) var(--margem) 0;
  color: var(--texto);
}
.titulo-grande__sub {
  font: var(--t-subtitulo);
  letter-spacing: var(--k-subtitulo);
  color: var(--texto-2);
  margin: 2px 0 0;
  padding: 0 var(--margem);
}

/* ── lista agrupada ───────────────────────────────────────── */
.grupo { margin: 0 var(--margem) var(--e-7); }
/* Nas telas o conteúdo já tem a margem do .main: a lista agrupada
   ganhava outra por cima e ficava mais estreita que os cartões ao lado
   (os ajustes do fim da aba Treino). Nas folhas a margem continua. */
.main .grupo { margin-inline: 0; }
.grupo__cabecalho {
  font: var(--t-rodape);
  letter-spacing: var(--k-rodape);
  color: var(--texto-2);
  margin: 0;
  padding: 0 var(--e-4) var(--e-2);
}
.grupo__corpo {
  background: var(--superficie);
  border-radius: var(--raio-cartao);
  overflow: hidden;
}
.grupo__rodape {
  font: var(--t-rodape);
  letter-spacing: var(--k-rodape);
  color: var(--texto-2);
  margin: 0;
  padding: var(--e-2) var(--e-4) 0;
}

.linha {
  --recuo: var(--e-4);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: var(--altura-linha);
  margin: 0;
  padding: 11px var(--e-4);
  border: 0;
  background: none;
  color: var(--texto);
  font: var(--t-corpo);
  letter-spacing: var(--k-corpo);
  text-align: left;
  text-decoration: none;
}
.linha:has(.linha__icone) { --recuo: calc(var(--e-4) + 1.75em + var(--e-3)); }
.linha:has(.linha__sub) { min-height: var(--altura-linha-sub); padding-block: 9px; }
.linha + .linha::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--recuo);
  right: 0;
  border-top: 0.5px solid var(--separador);
}
button.linha, a.linha, label.linha { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.linha:active, a.linha:active, label.linha:active { background: var(--preench-3); }

/* em, e não px: o ícone cresce com a letra, como o símbolo da Apple */
.linha__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 0.45em;
  background: var(--cor, var(--destaque));
  color: #FFFFFF;
}
.linha__icone svg { width: 1.1em; height: 1.1em; }
.linha__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.linha__sub {
  font: var(--t-subtitulo);
  letter-spacing: var(--k-subtitulo);
  color: var(--texto-2);
}
.linha__valor {
  flex: none;
  max-width: 50%;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.linha__seta { flex: none; display: grid; width: 0.8em; height: 0.8em; color: var(--texto-3); }
.linha__seta svg { width: 100%; height: 100%; }
.linha--destrutiva { color: var(--erro); justify-content: center; }
.linha__entrada {
  flex: 1;
  min-width: 0;
  min-height: 24px;
  border: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  letter-spacing: inherit;
  text-align: right;
}
.linha__entrada:focus { outline: none; }
.linha:has(.linha__entrada:focus-visible) { box-shadow: inset 0 0 0 2px var(--destaque); border-radius: inherit; }

/* ── botões ───────────────────────────────────────────────── */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--botao-medio);
  padding: 0 var(--e-4);
  border: 0;
  border-radius: var(--raio-capsula);
  background: var(--preench-2);
  color: var(--destaque);
  font: var(--t-destaque);
  letter-spacing: var(--k-corpo);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--rapido) var(--suave), opacity var(--rapido) linear;
}
.botao::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)) 0; }
.botao:active { transform: scale(0.97); opacity: 0.8; }
.botao svg { width: 1.15em; height: 1.15em; flex: none; }
.botao--proeminente { background: var(--destaque); color: var(--sobre-destaque); }
.botao--tingido { background: var(--destaque-suave); color: var(--destaque); }
.botao--simples { background: none; padding-inline: var(--e-2); }
.botao--destrutivo { color: var(--erro); }
/* branco sobre o vermelho do escuro dá 3:1; preto dá 7:1 */
.botao--proeminente.botao--destrutivo { background: var(--erro); color: var(--sobre-destaque); }
.botao--grande { min-height: var(--botao-grande); padding: 0 var(--e-6); }
.botao--bloco { display: flex; width: 100%; }
.botao[disabled], .botao[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
@media (max-width: 360px) { .botao { white-space: normal; text-align: center; } }

.botao-redondo {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--alvo);
  height: var(--alvo);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--preench-3);
  color: var(--texto);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--rapido) var(--suave);
}
.botao-redondo:active { transform: scale(0.92); }
.botao-redondo svg { width: 22px; height: 22px; }
.botao-redondo.vidro { background: var(--vidro); }

.carregando {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(1turn); } }

/* ── campos ───────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__rotulo {
  font: var(--t-rodape);
  letter-spacing: var(--k-rodape);
  color: var(--texto-2);
  padding: 0 var(--e-4);
}
.campo__entrada {
  width: 100%;
  min-height: var(--altura-linha);
  padding: 10px var(--e-4);
  border: 0;
  border-radius: var(--raio-controle);
  background: var(--superficie);
  color: var(--texto);
  font: var(--t-corpo);
  letter-spacing: var(--k-corpo);
}
textarea.campo__entrada { resize: vertical; min-height: 88px; }
.campo__entrada::placeholder { color: var(--texto-3); }
.campo__entrada:focus-visible { outline: 2px solid var(--destaque); outline-offset: 0; }
.campo__dica, .campo__erro {
  font: var(--t-rodape);
  letter-spacing: var(--k-rodape);
  color: var(--texto-2);
  margin: 0;
  padding: 0 var(--e-4);
}
.campo__erro { color: var(--erro); }
.campo--erro .campo__entrada { box-shadow: inset 0 0 0 1.5px var(--erro); }

/* ── segmentado ───────────────────────────────────────────── */
/* <div class="segmentado" role="radiogroup" style="--n:3; --i:0"> + botões role="radio" */
.segmentado {
  --n: 2;
  --i: 0;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 2px;
  border-radius: var(--raio-capsula);
  background: var(--preench-2);
}
.segmentado::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / var(--n));
  border-radius: var(--raio-capsula);
  background: light-dark(#FFFFFF, #636366);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.12), 0 1px 1px rgb(0 0 0 / 0.04);
  transform: translateX(calc(100% * var(--i)));
  transition: transform var(--medio) var(--mola);
}
.segmentado > button {
  position: relative;
  z-index: 1;
  min-height: 32px;
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--raio-capsula);
  background: none;
  color: var(--texto);
  font: var(--t-subtitulo);
  font-weight: 500;
  letter-spacing: var(--k-subtitulo);
  cursor: pointer;
}
.segmentado > button::after { content: ""; position: absolute; inset: -6px 0; }
.segmentado > [aria-checked="true"] { font-weight: 600; }

/* ── interruptor ──────────────────────────────────────────── */
/* <input type="checkbox" role="switch" class="interruptor"> */
.interruptor {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: var(--raio-capsula);
  background: var(--preench-1);
  cursor: pointer;
  transition: background-color var(--rapido) linear;
}
.interruptor::before { content: ""; position: absolute; inset: -7px -2px; }
.interruptor::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.15), 0 1px 1px rgb(0 0 0 / 0.16);
  transition: transform var(--medio) var(--mola);
}
.interruptor:checked { background: var(--sucesso); }
.interruptor:checked::after { transform: translateX(20px); }
.interruptor:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
/* com contraste alto, a posição também se lê sem cor */
@media (prefers-contrast: more) {
  .interruptor:checked { box-shadow: inset 12px 0 0 -9px #FFFFFF; }
}
:root[data-contraste="mais"] .interruptor:checked { box-shadow: inset 12px 0 0 -9px #FFFFFF; }

/* ── passo (−/+) ──────────────────────────────────────────── */
.passo {
  display: inline-flex;
  align-items: stretch;
  flex: none;
  border-radius: var(--raio-capsula);
  background: var(--preench-2);
}
.passo > button {
  position: relative;
  display: grid;
  place-items: center;
  width: 47px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  cursor: pointer;
}
.passo > button::after { content: ""; position: absolute; inset: -6px 0; }
.passo > button + button { border-left: 0.5px solid var(--separador); }
.passo > button:active { background: var(--preench-2); }
.passo > button:first-child:active { border-radius: var(--raio-capsula) 0 0 var(--raio-capsula); }
.passo > button:last-child:active { border-radius: 0 var(--raio-capsula) var(--raio-capsula) 0; }
.passo > button[disabled] { color: var(--texto-3); pointer-events: none; }
.passo svg { width: 16px; height: 16px; }

/* ── fichas ───────────────────────────────────────────────── */
.fichas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.ficha {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--raio-capsula);
  background: var(--preench-2);
  color: var(--texto);
  font: var(--t-subtitulo);
  font-weight: 500;
  letter-spacing: var(--k-subtitulo);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--rapido) linear, transform var(--rapido) var(--suave);
}
.ficha::after { content: ""; position: absolute; inset: -4px 0; }
.ficha:active { transform: scale(0.96); }
.ficha svg { width: 16px; height: 16px; }
.ficha[aria-pressed="true"], .ficha[aria-checked="true"] { background: var(--destaque); color: var(--sobre-destaque); }

/* ── anel e barra ─────────────────────────────────────────── */
/* Um anel só, na cor da marca. Três anéis concêntricos coloridos são
   o desenho do Apple Watch, e não se imitam. */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.anel {
  --tam: 168px;
  --esp: 14px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tam);
  aspect-ratio: 1;
  transition: --p var(--lento) var(--suave);
}
.anel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--cor, var(--destaque)) calc(min(var(--p), 100) * 1%), var(--preench-2) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--esp)), #000 calc(100% - var(--esp) + 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--esp)), #000 calc(100% - var(--esp) + 0.5px));
}
.anel__meio { position: relative; text-align: center; }

.barra {
  display: block;
  /* --p já está registada acima, e por isso pode ser animada: é ela que
     a largura segue. Sem esta linha a barra saltava para o valor. */
  transition: --p var(--lento) var(--suave);
  height: 6px;
  overflow: hidden;
  border-radius: var(--raio-capsula);
  background: var(--preench-2);
}
.barra > span {
  display: block;
  height: 100%;
  width: calc(min(var(--p, 0), 100) * 1%);
  border-radius: inherit;
  background: var(--cor, var(--destaque));
  transition: width var(--lento) var(--suave);
}

/* ── esqueleto, vazio ─────────────────────────────────────── */
.esqueleto {
  display: block;
  min-height: 1em;
  border-radius: var(--raio-pequeno);
  background: var(--preench-2);
  animation: pulsar 1.6s ease-in-out infinite;
}
@keyframes pulsar { 50% { opacity: 0.45; } }

.vazio { padding: var(--e-8) var(--e-6); text-align: center; }
.vazio__icone { display: inline-grid; width: 44px; height: 44px; color: var(--texto-2); }
.vazio__icone svg { width: 100%; height: 100%; }
.vazio__titulo { font: var(--t-titulo3); letter-spacing: var(--k-titulo3); margin: var(--e-3) 0 0; }
.vazio__texto {
  font: var(--t-subtitulo);
  letter-spacing: var(--k-subtitulo);
  color: var(--texto-2);
  margin: var(--e-2) auto var(--e-5);
  max-width: 34ch;
}

/* ── menu e alerta (o desenho; o comportamento vem na etapa 3) ── */
.menu {
  min-width: 250px;
  max-width: calc(100vw - 2 * var(--margem));
  padding: 6px 0;
  border-radius: 22px;
}
.menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  width: 100%;
  min-height: var(--alvo);
  padding: 0 var(--e-4);
  border: 0;
  background: none;
  color: var(--texto);
  font: var(--t-corpo);
  letter-spacing: var(--k-corpo);
  text-align: left;
  cursor: pointer;
}
.menu__item svg { width: 20px; height: 20px; flex: none; }
.menu__item:active { background: var(--preench-3); }
.menu__item--destrutivo { color: var(--erro); }
.menu__divisao { height: 8px; margin: 6px 0; background: var(--preench-3); border: 0; }

.alerta {
  width: min(300px, calc(100vw - 64px));
  padding: var(--e-5) var(--e-5) var(--e-4);
  border-radius: 32px;
}
.alerta__titulo { font: var(--t-destaque); letter-spacing: var(--k-corpo); margin: 0; }
.alerta__texto {
  font: var(--t-subtitulo);
  letter-spacing: var(--k-subtitulo);
  color: var(--texto);
  margin: var(--e-1) 0 var(--e-5);
}
.alerta__botoes { display: flex; gap: var(--e-2); }
.alerta__botoes > .botao { flex: 1; min-height: 44px; }
.alerta__botoes--pilha { flex-direction: column; }

/* ── movimento reduzido ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; }
  .carregando { animation-duration: 2.4s; }
  .botao:active, .botao-redondo:active, .ficha:active { transform: none; }
}