/* ============================================================
   App — casca
   O que envolve as telas: topo, título grande, abas, botão do
   assistente, folha, menu, alerta e avisos. No jeito da Apple
   (docs/plano-design.md, 5.2 e 6): o vidro fica só no que flutua, e o
   conteúdo passa por baixo.

   A coluna do app: até 720 px ocupa a tela; entre 720 e 900 fica ao
   centro; a partir de 900 encosta à esquerda. O que é fixo (topo, abas,
   botão do assistente, avisos) segue a coluna por --col-esq e --col-w —
   posição e largura, e não "right": 100vw conta a barra de rolagem do
   computador e a coluna não, e tudo o que se alinhava pela direita
   ficava 15 px fora.
   ============================================================ */

:root {
  --topo-h: 52px;
  --fundo-folha: light-dark(#F2F2F7, #1C1C1E);
}

html, body { background: var(--fundo-agrupado); }

.app {
  min-height: 100dvh;
  max-width: 720px;
  margin-inline: auto;
  position: relative;
}
@media (min-width: 900px) {
  :root { --app-left: max(24px, calc(50vw - 500px)); --app-w: 640px; }
  .app { max-width: var(--app-w); margin-inline: 0; margin-left: var(--app-left); }
}

.main {
  padding: calc(var(--area-topo) + var(--topo-h)) var(--margem)
    calc(var(--area-baixo) + var(--tabbar) + 48px + var(--folga-baixo, 0px));
  outline: none;
}
/* Com o treino a correr há mais uma barra flutuante por cima das abas,
   e o último cartão da tela ficava escondido debaixo dela. */
body:has(#sessaoBarra:not([hidden])) { --folga-baixo: 56px; }

/* ── topo ─────────────────────────────────────────────────── */

.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: calc(var(--area-topo) + var(--topo-h));
  padding: var(--area-topo) var(--margem) 0;
  pointer-events: none;
}
.topo > * { pointer-events: auto; }
/* Borda de rolagem: quando há conteúdo por baixo, o topo esbate-o em
   vez de ganhar uma barra sólida. */
.topo::before {
  content: "";
  position: absolute;
  inset: 0 0 -24px;
  z-index: -1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--fundo-agrupado) 94%, transparent) 55%, transparent);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, #000 62%, transparent);
  opacity: 0;
  transition: opacity var(--rapido) linear;
  pointer-events: none;
}
.topo.is-rolado::before { opacity: 1; }
/* Sem desfoque (reduzir transparência — o Windows com os efeitos de
   transparência desligados, muito Android de entrada), o degradê a 88 %
   deixava o texto de baixo legível por trás do título: "Últimos treinos
   Treino". Aí o topo fica opaco, como a HIG pede, e só a franja de
   baixo esbate. */
@media (prefers-reduced-transparency: reduce) {
  .topo::before {
    background: var(--fundo-agrupado);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  }
}
.topo__voltar { grid-column: 1; justify-self: start; }
.topo__titulo {
  grid-column: 2;
  max-width: 52vw;
  font: var(--t-destaque);
  letter-spacing: var(--k-corpo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--rapido) linear, transform var(--medio) var(--suave);
}
.topo.is-rolado .topo__titulo { opacity: 1; transform: none; }
.topo__acoes { grid-column: 3; justify-self: end; display: flex; gap: var(--e-3); }

.tela__cabeca { margin: 0 calc(-1 * var(--margem)) var(--e-5); }
.tela__cabeca .titulo-grande { padding-top: 0; }

/* ── abas ─────────────────────────────────────────────────── */

.abas {
  position: fixed;
  z-index: 40;
  /* Um redondo só, à direita: a câmera. Com dois, as quatro abas
     ficavam com 51 px cada e "Progresso" encostava em "Treino". */
  left: var(--margem);
  right: calc(var(--margem) + var(--tabbar) + var(--e-3));
  bottom: calc(var(--area-baixo) + 10px);
  height: var(--tabbar);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 4px;
  border-radius: var(--raio-capsula);
  transition: height var(--medio) var(--mola);
}
.abas__pilula {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 4);
  border-radius: var(--raio-capsula);
  background: var(--preench-2);
  transform: translateX(calc(100% * var(--i, 0)));
  transition: transform var(--medio) var(--mola), opacity var(--rapido) linear;
}
.abas:not(:has([aria-current="page"])) .abas__pilula { opacity: 0; }
.abas__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--raio-capsula);
  background: none;
  color: var(--texto);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.abas__item[aria-current="page"] { color: var(--destaque); }
.abas__icone { display: grid; width: 26px; height: 26px; line-height: 0; }
.abas__icone svg { width: 100%; height: 100%; }
.abas__icone--cheio,
.abas__item[aria-current="page"] .abas__icone { display: none; }
.abas__item[aria-current="page"] .abas__icone--cheio { display: grid; }
.abas__rotulo {
  font: var(--t-legenda2);
  letter-spacing: var(--k-legenda2);
  white-space: nowrap;
  transition: opacity var(--rapido) linear;
}
/* Ao rolar para baixo, as abas encolhem e deixam o conteúdo respirar;
   ao rolar para cima, voltam. */
.abas.is-recolhida { height: 50px; }
.abas.is-recolhida .abas__rotulo { opacity: 0; height: 0; overflow: hidden; }

.btn-camera {
  position: fixed;
  z-index: 40;
  right: var(--margem);
  bottom: calc(var(--area-baixo) + 10px);
  width: var(--tabbar);
  height: var(--tabbar);
  color: var(--destaque);
  transition: width var(--medio) var(--mola), height var(--medio) var(--mola), transform var(--rapido) var(--suave);
}
.btn-camera svg { width: 27px; height: 27px; }
.abas.is-recolhida + .btn-camera { width: 50px; height: 50px; }
.chat-open .btn-camera { visibility: hidden; }

/* O assistente vive no topo, ao lado da conta: é a mesma peça redonda,
   e é onde o iOS põe o botão que abre uma folha (compor, procurar). */
.botao-redondo--assistente { color: var(--destaque); }
.botao-redondo--assistente svg { width: 23px; height: 23px; }
.chat-open .botao-redondo--assistente { visibility: hidden; }
/* Com o treino aberto em tela cheia, a casca inteira sai da frente. */
.is-sessao .abas,
.is-sessao .btn-camera,
.is-sessao .topo { visibility: hidden; }

/* A barra do treino a correr, encostada por cima das abas. */
.sessao-barra {
  position: fixed;
  z-index: 39;
  left: var(--margem);
  right: var(--margem);
  bottom: calc(var(--area-baixo) + var(--tabbar) + 18px);
}
.chat-open .sessao-barra, .is-sessao .sessao-barra { visibility: hidden; }
.sbarra {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: 46px;
  padding: 7px 16px;
  border: 0;
  border-radius: var(--raio-capsula);
  background: var(--superficie);
  color: var(--texto);
  text-align: left;
  box-shadow: var(--sombra-flutuante);
  cursor: pointer;
}
.sbarra__ponto {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sucesso);
  animation: sbarra-pulsa 2s var(--suave) infinite;
}
@keyframes sbarra-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.sbarra__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sbarra__txt b { font: 600 0.875rem var(--fonte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbarra__txt small { font: var(--t-legenda1); color: var(--texto-2); }
.sbarra__t { font: 700 1rem var(--fonte); color: var(--sucesso); }
@media (prefers-reduced-motion: reduce) { .sbarra__ponto { animation: none; } }

/* ── avisos ───────────────────────────────────────────────── */

.toasts {
  position: fixed;
  z-index: 90;
  left: var(--margem);
  right: var(--margem);
  bottom: calc(var(--area-baixo) + var(--tabbar) + 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  pointer-events: none;
}
/* com o assistente aberto, acima do campo e da fila de sugestões */
.chat-open .toasts { bottom: calc(var(--area-baixo) + 118px); }
/* Com uma folha aberta, o aviso sobe para o alto da tela, como a faixa
   do iOS: em baixo caía em cima do texto e dos botões da folha ("Água:
   1,5 L — desfazer" tapava a nota do peso e o Salvar). */
body:has(#sheet:not([hidden])) .toasts {
  bottom: auto;
  top: calc(var(--area-topo) + 10px);
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  max-width: 100%;
  min-height: 44px;
  padding: 8px 8px 8px 18px;
  border-radius: 22px;
  background: var(--superficie);
  color: var(--texto);
  font: var(--t-subtitulo);
  letter-spacing: var(--k-subtitulo);
  box-shadow: var(--sombra-flutuante);
  animation: aviso-entra var(--medio) var(--mola);
}
.toast strong { font-weight: 600; }
.toast__action {
  flex: none;
  min-height: 32px;
  margin-left: auto;
  padding: 0 12px;
  border: 0;
  border-radius: var(--raio-capsula);
  background: var(--destaque-suave);
  color: var(--destaque);
  font: var(--t-subtitulo);
  font-weight: 600;
}
.toast:not(:has(.toast__action)) { padding-right: 18px; }
.toast.is-out { animation: aviso-sai 160ms var(--suave) forwards; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes aviso-sai { to { opacity: 0; transform: translateY(8px); } }

/* ── a coluna em tela larga ─────────────────────────────── */

@media (min-width: 721px) {
  :root { --col-esq: calc((100% - 720px) / 2); --col-w: 720px; }
  .topo { right: auto; left: var(--col-esq); width: var(--col-w); }
  .abas { right: auto; left: calc(var(--col-esq) + var(--margem)); width: calc(var(--col-w) - 2 * var(--margem) - var(--tabbar) - var(--e-3)); }
  .btn-camera { right: auto; left: calc(var(--col-esq) + var(--col-w) - var(--margem) - var(--tabbar)); }
  .abas.is-recolhida + .btn-camera { left: calc(var(--col-esq) + var(--col-w) - var(--margem) - 50px); }
  .toasts { right: auto; left: calc(var(--col-esq) + var(--margem)); width: calc(var(--col-w) - 2 * var(--margem)); }
}
@media (min-width: 900px) {
  :root { --col-esq: var(--app-left); --col-w: var(--app-w); }
}

/* ── folha ────────────────────────────────────────────────── */

.sheet {
  position: fixed;
  inset: 0;
  /* acima do assistente (80) e abaixo dos avisos (90), do menu e do alerta */
  z-index: 85;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--veu);
  animation: fade var(--medio) linear;
  transition: opacity 240ms linear;
}
.sheet__panel {
  /* o que estava desenhado para o fundo da tela ganha o da folha */
  --bg: var(--fundo-folha);
  --surface: light-dark(#FFFFFF, #2C2C2E);
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - var(--area-topo) - 10px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--margem) calc(var(--area-baixo) + var(--e-6));
  border-radius: var(--raio-sheet) var(--raio-sheet) 0 0;
  background: var(--fundo-folha);
  box-shadow: var(--sombra-flutuante);
  animation: folha-sobe var(--lento) var(--suave);
  transition: transform var(--medio) var(--mola);
}
.sheet__panel.is-arrastando { transition: none; }
.sheet.is-saindo .sheet__panel { transform: translateY(105%) !important; transition: transform 240ms var(--suave); }
.sheet.is-saindo .sheet__scrim { opacity: 0; }
@keyframes folha-sobe { from { transform: translateY(100%); } }

.sheet__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--alvo) 1fr var(--alvo);
  align-items: center;
  gap: var(--e-2);
  margin: 0 calc(-1 * var(--margem)) var(--e-3);
  padding: 16px var(--margem) var(--e-2);
  background: linear-gradient(to bottom, var(--fundo-folha) 78%, transparent);
  touch-action: none;
}
.sheet__alca {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--preench-1);
  transform: translateX(-50%);
}
.sheet__fechar { background: var(--preench-3); }
.sheet__fechar svg { width: 18px; height: 18px; }
.sheet__titulo {
  margin: 0;
  font: var(--t-destaque);
  letter-spacing: var(--k-corpo);
  text-align: center;
  overflow-wrap: anywhere;
}

/* Rótulo de seção dentro de uma folha longa: o fio devolve a separação
   sem inventar mais um tamanho de tipo. */
.sheet__body > .eyebrow {
  color: var(--texto-2);
  padding-top: var(--e-5);
  margin-top: var(--e-5);
  border-top: 0.5px solid var(--separador);
}
.sheet__body > .eyebrow:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

/* O pé fica à mão, mesmo numa folha comprida: o "Salvar" de um
   formulário de catorze campos não pode estar no fim de tudo. */
.sheet__foot {
  display: flex;
  gap: var(--e-2);
  margin-top: var(--e-5);
  position: sticky;
  bottom: calc(var(--area-baixo) * -1 - var(--e-6));
  padding: var(--e-3) 0 calc(var(--area-baixo) + var(--e-3));
  background: linear-gradient(to bottom, transparent, var(--fundo-folha) 40%);
}
/* O botão que fecha uma folha é a ação principal dela, e tinha 36 px de
   altura: 44 é o que o dedo pede (docs/plano-design.md §9). */
.sheet__foot .btn { flex: 1; min-height: 44px; }
/* O botão novo (.botao) também: sem isto o "Continuar" de uma folha
   ficava do tamanho da palavra, encostado à esquerda, e um segundo
   botão ao lado não tinha com quem dividir a linha. */
.sheet__foot .botao { flex: 1; min-height: 50px; justify-content: center; }
/* Uma folha que fala por um número grande (a festa) não precisa de
   título à vista; ele fica para o leitor de tela. */
.sheet__titulo[data-escondido] { visibility: hidden; }

@media (min-width: 720px) {
  .sheet { align-items: center; }
  .sheet__panel { border-radius: var(--raio-sheet); max-height: 84dvh; animation: folha-aparece var(--medio) var(--suave); }
  .sheet__alca { display: none; }
  .sheet__head { touch-action: auto; }
  .sheet.is-saindo .sheet__panel { transform: scale(.96) !important; opacity: 0; transition: transform 200ms var(--suave), opacity 200ms linear; }
}
@keyframes folha-aparece { from { opacity: 0; transform: scale(.96); } }
@keyframes fade { from { opacity: 0; } }

/* ── menu e alerta ────────────────────────────────────────── */

.camada { position: fixed; inset: 0; }
.camada[hidden] { display: none; }
.camada--menu { z-index: 95; }
.camada--alerta { z-index: 96; display: grid; place-items: center; padding: var(--e-6); }
.camada__fundo { position: absolute; inset: 0; }
.camada__fundo--escuro { background: var(--veu); animation: fade var(--rapido) linear; }

.camada--menu .menu {
  position: fixed;
  animation: menu-brota var(--medio) var(--mola);
}
.menu.is-saindo {
  opacity: 0;
  transform: scale(.8);
  transition: opacity 140ms linear, transform 140ms var(--suave);
}
@keyframes menu-brota { from { opacity: 0; transform: scale(.35); } }

.camada--alerta .alerta { position: relative; animation: alerta-entra var(--medio) var(--mola); }
@keyframes alerta-entra { from { opacity: 0; transform: scale(1.12); } }

/* ── a casca não se mexe para quem pediu menos movimento ── */
@media (prefers-reduced-motion: reduce) {
  .chat__panel, .sheet__panel, .camada--menu .menu, .camada--alerta .alerta, .toast { animation: fade 150ms linear; }
  .abas, .abas__pilula, .btn-camera, .topo__titulo { transition-duration: 0ms; }
}

/* O título das telas é da casca; o cabeçalho antigo da vista ficou só com a ação. */
.sect--so-acao { justify-content: flex-end; margin-top: calc(-1 * var(--e-2)); }

/* ── a troca de tela (ui/app.js, comTransicao) ────────────── */

/* A moldura não anda: o topo, as abas e o botão da câmera têm nome
   próprio, e por isso ficam parados enquanto o conteúdo desliza. */
.topo { view-transition-name: topo; }
.abas { view-transition-name: abas; }
.btn-camera { view-transition-name: camera; }
.main { view-transition-name: conteudo; }

/* A raiz também não: o que anda é o conteúdo, e dois desvanecidos
   por cima um do outro deixam a troca turva. */
::view-transition-old(root), ::view-transition-new(root),
::view-transition-old(topo), ::view-transition-new(topo),
::view-transition-old(abas), ::view-transition-new(abas),
::view-transition-old(camera), ::view-transition-new(camera) { animation: none; mix-blend-mode: normal; }

::view-transition-old(conteudo) { animation: sai-para-esquerda 220ms var(--suave) both; }
::view-transition-new(conteudo) { animation: entra-da-direita 260ms var(--suave) both; }
[data-indo="esquerda"]::view-transition-old(conteudo) { animation-name: sai-para-direita; }
[data-indo="esquerda"]::view-transition-new(conteudo) { animation-name: entra-da-esquerda; }

@keyframes sai-para-esquerda { to { opacity: 0; transform: translateX(-16px); } }
@keyframes entra-da-direita { from { opacity: 0; transform: translateX(22px); } }
@keyframes sai-para-direita { to { opacity: 0; transform: translateX(16px); } }
@keyframes entra-da-esquerda { from { opacity: 0; transform: translateX(-22px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── o grátis e o assistente ───────────────────────────────── */
/* O grátis não tem assistente nenhum (core/assinatura.js). A página
   ganha a marca em ui/licenca.js, e todo botão que fala com ele some de
   uma vez; o que só faz sentido no grátis (montar à mão no lugar de
   "montar com o assistente") aparece no lugar dele. */
html[data-plano="gratis"] :is([data-ask], [data-chat], [data-assistente], #btnAssistente) { display: none !important; }
html:not([data-plano="gratis"]) [data-gratis] { display: none !important; }