/* =========================================================
   DESIGN SYSTEM
   Preto + verde. Mobile-first, tema único.
   ========================================================= */

:root{
  /* ======================================================================
     O app é escuro e só. O tema claro foi removido: a marca foi desenhada
     no preto, e manter duas paletas significava testar tudo duas vezes.
     Estes são os valores que antes viviam no bloco do tema escuro.
     ====================================================================== */

  /* --verde, --verde-claro, --ambar e --azul são FUNDOS com texto branco
     por cima (botões, chips, checks). Clarear derruba o contraste do
     texto. O verde usado como TEXTO é o --verde-esc. */
  --verde:#007F5F;
  --verde-esc:#00D7A2;
  --verde-claro:#00B386;
  --verde-tint:#0A2620;
  --verde-tint2:#081D18;
  --verde-borda:rgba(0,215,162,.34);
  /* o verde da marca, tirado da faixa da logo. Toda a família de verdes
     acima deriva dele (o cartão de nível foi a referência): o
     --verde-esc é ele puro, e --verde/--verde-claro são versões mais
     escuras, porque levam texto branco por cima. */
  --verde-logo:#00D7A2;
  --verde-grad:linear-gradient(135deg,#008F6B,#00C495);
  --ambar:#F0A500;
  --ambar-tint:#2C240D;
  --ambar-tint2:#231C09;
  --ambar-borda:#4A3B14;
  --ambar-tx:#F2C95E;
  --vermelho:#FF7A6B;
  --azul:#3B82C4;
  --azul-tint:#0E2233;
  --azul-tint2:#0A1A27;
  --azul-borda:#1E3C55;
  --azul-tx:#AECFE9;
  --azul-tx2:#8CB2CE;
  --roxo-tint:#1D1836;
  --tint-neutro:#111C19;
  --erro-bg:#33150F;
  --erro-tx:#FF9E91;
  --tinta:#FFFFFF;
  --tinta-2:#C3D6CB;
  --cinza:#9DB2A7;
  --cinza-c:#7E9389;
  --linha:rgba(0,215,162,.18);
  --fundo:#000000;
  --branco:#0B120F;
  /* a barra de baixo e opaca de proposito: com backdrop-filter ela
     borrava a pagina a cada pixel de rolagem e corrompia o quadro em
     webview fraca. Sobre fundo preto o borrao nem aparecia. */
  --nav-fundo:#000000;
  --tracejado:rgba(0,215,162,.30);
  --brilho:rgba(0,215,162,.11);
  --r-sm:13px;
  --r:20px;
  --r-lg:26px;
  --sombra:0 0 0 rgba(0,0,0,0);
  --sombra-alta:0 18px 50px rgba(0,0,0,.6), 0 0 40px rgba(0,215,162,.10);
  /* a barra de baixo tem que passar POR BAIXO do risquinho do iPhone e
     da barra de gestos do Android, senao os botoes ficam embaixo dele.
     env() vale 0 em aparelho sem recorte, entao nao muda nada la. */
  --nav-h:calc(76px + env(safe-area-inset-bottom, 0px));

  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{height:100%;}

body{
  font-family:'Manrope',-apple-system,sans-serif;
  background:var(--fundo);
  color:var(--tinta);
  font-size:15px;
  line-height:1.5;
  overscroll-behavior-y:none;
}

/* atmosfera: brilho verde suave no topo */
body::before{
  content:'';
  position:fixed;inset:0 0 auto 0;height:340px;
  background:radial-gradient(120% 100% at 50% 0%, var(--brilho) 0%, rgba(0,168,126,0) 70%);
  pointer-events:none;z-index:0;
}

h1,h2,h3,h4,.display{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.15;}

button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,select{font-family:inherit;font-size:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}

/* ---------- estrutura ---------- */
#app{position:relative;z-index:1;max-width:520px;margin:0 auto;min-height:100%;padding-bottom:calc(var(--nav-h) + 20px);}

/* .tela e .stagger são só layout agora. A entrada em cascata que morava
   aqui virou a animação de troca de tela (App.cascata), que roda uma vez
   por troca em vez de toda vez que a tela é redesenhada no lugar.
   O @keyframes sobe continua aqui porque os blocos que abrem (receita,
   exercício) ainda usam ele. */
.tela{padding:0 18px 24px;}
@keyframes sobe{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ---------- topo ---------- */
/* A marca fica no centro exato da tela, não no centro do espaço que
   sobra: por isso ela é posicionada, e não uma coluna da grade. Com
   `1fr auto 1fr` ela saía do meio nas telas de título mais longo, porque
   a coluna da esquerda não encolhe abaixo do texto.
   Inserida por App.pintarMarcaTopo(). */
.topo{
  padding:26px 18px 18px;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.topo-marca{
  position:absolute;left:50%;top:30px;transform:translateX(-50%);
  width:130px;height:auto;opacity:.95;pointer-events:none;
}
/* ⚠️ SÓ NA TELA INICIAL a marca divide a linha com o título: ela ocupa
   dos 147px aos 243px numa tela de 390, e a saudação tem que caber antes
   disso. Como lá o título é "Bom dia / <primeiro nome>", sobra espaço.
   Nas outras abas a marca fica sozinha na faixa de cima (.marca-linha) e
   o título tem a largura toda. */
.topo-saud{font-size:13px;color:var(--cinza);font-weight:600;}
.topo-nome{font-size:21px;margin-top:2px;}
.streak-badge{
  display:inline-flex;align-items:center;gap:3px;vertical-align:middle;margin-left:8px;
  background:rgba(255,122,41,.14);border:1px solid rgba(255,122,41,.4);
  color:#FF7A29;font-size:13px;font-weight:800;letter-spacing:-.01em;
  padding:2px 9px 2px 7px;border-radius:20px;
}
.topo h1{font-size:21px;}
.topo-sub{font-size:13.5px;color:var(--cinza);margin-top:4px;font-weight:500;}

/* ---------- cards ----------
   Contorno no menta da marca, mas apagado: o contorno cheio fica só nos
   cartões de destaque (nível, promoção do Duo), senão nada se destaca. */
.card{
  background:var(--branco);border:1px solid var(--verde-borda);border-radius:var(--r);
  padding:18px;box-shadow:var(--sombra);margin-bottom:14px;
}
.card-tt{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza);margin-bottom:14px;display:flex;align-items:center;gap:7px;}
.card-tt .n{margin-left:auto;letter-spacing:0;text-transform:none;font-size:12.5px;color:var(--cinza-c);}

.secao-tt{font-size:18px;margin:26px 0 12px;}
.secao-tt:first-child{margin-top:8px;}

/* ---------- anel de calorias ---------- */
.anel-wrap{display:flex;align-items:center;gap:20px;}
.anel{position:relative;width:132px;height:132px;flex-shrink:0;}
.anel svg{transform:rotate(-90deg);width:100%;height:100%;}
.anel .trilho{fill:none;stroke:var(--verde-tint);stroke-width:12;}
.anel .barra{fill:none;stroke:url(#gradAnel);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.3,1);}
.anel-centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.anel-num{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:800;line-height:1;letter-spacing:-.03em;}
.anel-lbl{font-size:10.5px;color:var(--cinza);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:4px;}

.anel-info{flex:1;min-width:0;}
.anel-info .meta-grande{font-size:13px;color:var(--cinza);font-weight:600;}
.anel-info .meta-val{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;margin:2px 0 12px;}
.mini-stat{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-top:1px solid var(--linha);}
.mini-stat .k{color:var(--cinza);font-weight:600;}
.mini-stat .v{font-weight:800;}

/* ---------- barras de meta ---------- */
.meta-linha{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--linha);}
.meta-linha:last-child{border-bottom:none;padding-bottom:0;}
.meta-linha:first-child{padding-top:0;}
.meta-ic{
  width:40px;height:40px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:19px;
}
.meta-ic.agua{background:var(--azul-tint);}
.meta-ic.sono{background:var(--roxo-tint);}
.meta-ic.treino{background:var(--verde-tint);}
.meta-ic.dieta{background:var(--ambar-tint);}
.meta-corpo{flex:1;min-width:0;}
.meta-topo{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;gap:10px;}
.meta-nome{font-size:13.5px;font-weight:700;}
.meta-num{font-size:13px;font-weight:800;color:var(--verde-esc);white-space:nowrap;}
.meta-num.pendente{color:var(--cinza-c);}
.barra{height:7px;border-radius:20px;background:var(--linha);overflow:hidden;}
.barra i{display:block;height:100%;border-radius:20px;background:var(--verde-logo);transition:width .6s cubic-bezier(.2,.7,.3,1);}
.barra.azul i{background:linear-gradient(90deg,#3B82C4,#6FB3E8);}
.barra.roxo i{background:linear-gradient(90deg,#7C6BC4,#A99BE8);}

.btn-mini{
  width:34px;height:34px;border-radius:11px;border:1px solid var(--linha);
  background:var(--branco);font-size:17px;font-weight:700;color:var(--verde-esc);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .12s, background .12s;
}
.btn-mini:active{transform:scale(.9);background:var(--verde-tint);}

/* ---------- nível ----------
   Era um cartão verde cheio, com degradê e emoji, do tamanho de um
   banner. Virou um cartão como os outros da tela (mesmo fundo escuro,
   mesmo raio), separado do resto só pelo contorno no verde da marca.
   Um terço mais baixo que antes: o emoji de 34px saiu e todos os
   tamanhos encolheram junto. */
.nivel-card{
  background:var(--branco);
  border:1px solid var(--verde-logo);
  color:var(--tinta);
  padding:9px 13px;
  position:relative;overflow:hidden;
}
.nivel-topo{display:flex;align-items:center;gap:13px;position:relative;}
.nivel-n{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza-c);}
.nivel-nome{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--tinta);margin-top:1px;}
.nivel-pts{margin-left:auto;text-align:right;position:relative;}
.nivel-pts b{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;display:block;line-height:1.1;color:var(--verde-logo);}
.nivel-pts span{font-size:10px;color:var(--cinza-c);font-weight:700;}
.nivel-barra{height:5px;border-radius:20px;background:var(--verde-tint);overflow:hidden;margin:8px 0 5px;position:relative;}
.nivel-barra i{display:block;height:100%;background:var(--verde-logo);border-radius:20px;transition:width .8s cubic-bezier(.2,.7,.3,1);}
.nivel-falta{font-size:11px;color:var(--cinza);font-weight:600;position:relative;}
.nivel-falta b{color:var(--tinta-2);}

/* ---------- divulgação do Plano Duo (Perfil) ----------
   Mesmo cartão do nível acima (fundo escuro, contorno verde fino). O
   selo copia o gradiente e o pulso do badge de desconto do pop-up de
   saída do quiz. O botão fica colado na base, largura total, separado
   do resto por uma linha — o overflow:hidden do .nivel-card já cuida
   de arredondar os cantos de baixo do botão junto com o cartão. */
.duo-promo{padding:0;}
.duo-promo-corpo{padding:9px 13px 12px;}
.duo-badge{
  margin-left:auto;background:linear-gradient(135deg,#00A87E,var(--verde-logo));
  color:#fff;font-size:10px;font-weight:900;letter-spacing:.2px;text-transform:uppercase;
  padding:5px 10px;border-radius:8px;transform:rotate(-4deg);white-space:nowrap;
  animation:duoDescontoPulse 1.6s ease-in-out infinite;box-shadow:0 6px 14px rgba(0,0,0,.35);
}
@keyframes duoDescontoPulse{
  0%,100%{transform:rotate(-4deg) scale(1);}
  50%{transform:rotate(-4deg) scale(1.08);}
}
.duo-promo-btn{
  display:block;width:100%;border:none;border-top:1px solid var(--verde-tint);
  background:transparent;color:var(--verde-logo);font-weight:800;font-size:14px;
  padding:13px;cursor:pointer;font-family:inherit;
}
.duo-promo-btn:active{background:var(--verde-tint);}

/* ---------- streak ---------- */
.streak-linha{display:flex;gap:10px;}
.streak-box{
  flex:1;background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
  padding:14px 12px;text-align:center;box-shadow:var(--sombra);
}
.streak-box .n{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:800;line-height:1;letter-spacing:-.02em;}
.streak-box .l{font-size:10.5px;color:var(--cinza);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:6px;}
.streak-box.destaque{background:linear-gradient(140deg,var(--ambar),#FFC64D);border-color:transparent;color:#3B2A00;}
.streak-box.destaque .l{color:#6B4E00;}

/* ---------- refeições ---------- */
.ref{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);margin-bottom:12px;box-shadow:var(--sombra);overflow:hidden;}
.ref-cab{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;}
.ref-ic{width:42px;height:42px;border-radius:13px;background:var(--verde-tint);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.ref-nome{font-size:15.5px;font-weight:800;letter-spacing:-.01em;}
.ref-meta{font-size:12px;color:var(--cinza);font-weight:600;margin-top:2px;}
.ref-dir{margin-left:auto;text-align:right;flex-shrink:0;}
.ref-kcal{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;}
.ref-kcal span{font-size:11px;color:var(--cinza);font-weight:700;}
.ref-prog{font-size:11.5px;color:var(--verde-esc);font-weight:800;margin-top:2px;}
.ref-prog.zero{color:var(--cinza-c);}
.ref-seta{margin-left:10px;color:var(--cinza-c);font-size:13px;transition:transform .25s;}
.ref.aberta .ref-seta{transform:rotate(180deg);}

.ref-corpo{display:none;padding:0 18px 16px;border-top:1px solid var(--linha);}
.ref.aberta .ref-corpo{display:block;animation:sobe .28s both;}

.alim{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--linha);}
.alim:last-of-type{border-bottom:none;}
.check{
  width:23px;height:23px;border-radius:8px;border:2px solid var(--linha);flex-shrink:0;margin-top:1px;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:900;
  transition:all .18s cubic-bezier(.2,.7,.3,1);
}
.alim.feito .check{background:var(--verde);border-color:var(--verde);transform:scale(1.05);}
.alim-corpo{flex:1;min-width:0;}
.alim-nome{font-size:14px;font-weight:700;transition:color .2s;}
.alim.feito .alim-nome{color:var(--cinza-c);text-decoration:line-through;}
.alim-det{font-size:12.5px;color:var(--cinza);margin-top:3px;font-weight:600;}
.alim-alt{margin-top:7px;display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.alt-tt{font-size:10.5px;color:var(--cinza-c);font-weight:800;text-transform:uppercase;letter-spacing:.04em;width:100%;margin-bottom:1px;}
.alt-op{background:var(--verde-tint2);color:var(--verde-esc);border-radius:7px;padding:3px 8px;font-size:11px;font-weight:700;line-height:1.4;}
.alim.feito .alt-op{background:var(--tint-neutro);color:var(--cinza-c);}

/* botão e modal de troca de alimento */
.btn-troca{
  margin-top:8px;padding:7px 12px;border-radius:9px;
  background:var(--verde-tint2);border:1px solid var(--verde-borda);
  font-size:11.5px;font-weight:800;color:var(--verde-esc);
  transition:transform .12s, background .14s;
}
.btn-troca:active{transform:scale(.96);background:var(--verde-tint);}
.btn-troca.ativa{background:var(--ambar-tint);border-color:var(--ambar-borda);color:var(--ambar-tx);}
.alim.feito .btn-troca{opacity:.5;}

.troca-lista{display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow-y:auto;margin-bottom:14px;}
.troca-op{
  display:flex;align-items:flex-start;gap:11px;text-align:left;
  padding:13px 14px;border-radius:13px;border:1.5px solid var(--linha);
  background:var(--branco);transition:all .14s;
}
.troca-op.on{border-color:var(--verde);background:var(--verde-tint2);}
.to-check{
  width:21px;height:21px;border-radius:7px;flex-shrink:0;margin-top:1px;
  border:2px solid var(--linha);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#fff;
}
.troca-op.on .to-check{background:var(--verde);border-color:var(--verde);}
.to-txt{flex:1;min-width:0;}
.to-txt b{display:block;font-size:14px;font-weight:700;line-height:1.4;}
.troca-op.on .to-txt b{color:var(--verde-esc);}
.to-txt small{display:block;font-size:11.5px;color:var(--cinza);font-weight:600;margin-top:3px;}
.troca-nota{font-size:11.5px;color:var(--cinza-c);line-height:1.55;font-weight:600;text-align:center;}

.ci-sub{font-size:11px;color:var(--ambar);font-weight:700;margin-top:2px;}
.ci-troca{
  flex-shrink:0;padding:5px 10px;border-radius:8px;background:var(--verde-tint2);
  border:1px solid var(--verde-borda);font-size:11px;font-weight:800;color:var(--verde-esc);margin-right:4px;
}
.ci-troca:active{transform:scale(.94);}

.tag-opc{background:var(--ambar-tint);color:var(--ambar-tx);border-radius:6px;padding:2px 7px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-left:5px;vertical-align:middle;}
.alim.opcional .check{border-style:dashed;}


.var-nome{
  font-size:12.5px;font-weight:800;color:var(--verde-esc);
  background:var(--verde-tint2);border-radius:8px;padding:6px 10px;
  margin:-6px 0 12px;display:inline-block;
}

/* cardápio completo */
.cardapio-item{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--linha);}
.cardapio-item:last-child{border-bottom:none;padding-bottom:0;}
.cardapio-item.opc{opacity:.78;}
.cai-nome{font-size:13.5px;font-weight:700;}
.cai-det{font-size:12px;color:var(--cinza);font-weight:600;margin-top:2px;}
.cai-kcal{margin-left:auto;font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:800;flex-shrink:0;text-align:right;}
.cai-kcal span{display:block;font-size:9.5px;color:var(--cinza-c);font-weight:700;font-family:'Manrope',sans-serif;}

/* lista de compras */
.compra-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--linha);}
.compra-item:last-child{border-bottom:none;}
.ci-nome{font-size:13.5px;font-weight:700;flex:1;min-width:0;}
.ci-qtd{font-size:13px;font-weight:800;color:var(--verde-esc);flex-shrink:0;}
.alim-kcal{font-size:12.5px;font-weight:800;color:var(--tinta-2);flex-shrink:0;text-align:right;}
.alim-kcal span{display:block;font-size:10.5px;color:var(--cinza-c);font-weight:700;margin-top:2px;}

.ref-acoes{display:flex;gap:8px;margin-top:14px;}
.btn-ref{flex:1;padding:11px;border-radius:12px;font-size:12.5px;font-weight:800;border:1px solid var(--linha);background:var(--branco);transition:all .15s;}
.btn-ref.p{background:var(--verde);color:#fff;border-color:var(--verde);}
.btn-ref:active{transform:scale(.97);}

/* ---------- treinos ---------- */
/* o cartão do plano é o único bloco verde cheio da tela: clareia no meio
   e fecha escuro embaixo, como nas telas de referência */
.plano-cab{
  background:linear-gradient(140deg,#0C6B3C 0%,#23A063 44%,#053F24 100%);
  color:#fff;border:none;
}
.plano-cab h3{font-size:20px;margin-bottom:6px;}
.plano-cab p{font-size:13px;opacity:.92;line-height:1.5;font-weight:500;}
.plano-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
.tag{
  background:rgba(3,12,7,.58);border:1px solid rgba(255,255,255,.42);
  border-radius:20px;padding:5px 12px;font-size:11.5px;font-weight:800;color:#fff;
}
.tag.claro{background:var(--verde-tint);color:var(--verde-esc);}

.dias-fila{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none;}
.dias-fila::-webkit-scrollbar{display:none;}
.dia-chip{
  flex-shrink:0;min-width:62px;padding:11px 8px;border-radius:15px;text-align:center;
  border:1px solid var(--linha);background:var(--branco);transition:all .18s;
}
.dia-chip .d{font-size:11.5px;font-weight:800;color:var(--cinza);text-transform:uppercase;letter-spacing:.04em;}
.dia-chip .p{width:5px;height:5px;border-radius:50%;background:var(--verde);margin:6px auto 0;opacity:0;}
.dia-chip.ativo{background:var(--verde);border-color:var(--verde);color:#fff;box-shadow:0 6px 16px rgba(0,168,126,.28);}
.dia-chip.ativo .d{color:#fff;}
.dia-chip.hoje .p{opacity:1;}
.dia-chip.ativo .p{background:#fff;}

.ex-bloco{border-bottom:1px solid var(--linha);}
.ex-bloco:last-of-type{border-bottom:none;}
.ex{display:flex;align-items:center;gap:13px;padding:14px 0;cursor:pointer;}
.ex-seta{color:var(--cinza-c);font-size:12px;flex-shrink:0;transition:transform .25s;}
.ex-bloco.aberto .ex-seta{transform:rotate(180deg);color:var(--verde);}

.ex-corpo{display:none;padding:2px 0 16px;}
.ex-bloco.aberto .ex-corpo{display:block;animation:sobe .26s both;}

.carga-hist{display:flex;gap:7px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none;}
.carga-hist::-webkit-scrollbar{display:none;}
.carga-pt{flex-shrink:0;background:var(--verde-tint2);border-radius:11px;padding:8px 11px;text-align:center;min-width:56px;}
.cp-peso{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:800;color:var(--verde-esc);line-height:1;}
.cp-peso span{font-size:10px;font-weight:700;}
.cp-data{font-size:10px;color:var(--cinza);font-weight:700;margin-top:4px;}
.carga-vazio{font-size:12.5px;color:var(--cinza);line-height:1.5;font-weight:600;margin-bottom:12px;}

/* uma linha por série: número, carga e repetições. O cabeçalho rotula as
   colunas uma vez só, em vez de repetir label em cada linha. */
.carga-form{display:flex;flex-direction:column;gap:7px;}
.carga-cab,.carga-serie{display:grid;grid-template-columns:28px 1fr 1fr;gap:8px;align-items:center;}
.carga-cab span{font-size:10.5px;font-weight:800;color:var(--cinza);text-transform:uppercase;letter-spacing:.04em;}
.carga-cab span:first-child{text-align:center;}
.cs-n{width:28px;height:28px;border-radius:50%;background:var(--verde-tint);color:var(--verde-esc);
  font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.carga-serie input{width:100%;padding:10px 11px;border-radius:11px;border:1px solid var(--linha);
  background:var(--branco);font-size:14.5px;font-weight:700;color:var(--tinta);}
.carga-serie input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-tint);}
.carga-form .carga-btn{width:100%;margin-top:5px;}

.carga-campo{flex:1;min-width:0;}
.carga-campo{flex:1;min-width:0;}
.carga-campo label{display:block;font-size:11px;font-weight:800;color:var(--cinza);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em;}
.carga-campo input{width:100%;padding:11px 12px;border-radius:11px;border:1px solid var(--linha);background:var(--branco);font-size:14.5px;font-weight:700;}
.carga-campo input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-tint);}
.carga-btn{padding:11px 18px;border-radius:11px;background:var(--verde);color:#fff;font-size:13.5px;font-weight:800;flex-shrink:0;transition:transform .12s;}
.carga-btn:active{transform:scale(.96);}

/* evolução de carga (aba progresso) */
.carga-destaque{background:var(--verde-tint2);border-radius:14px;padding:14px 16px;margin-bottom:14px;display:flex;align-items:center;gap:14px;}
.cd-n{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;color:var(--verde-esc);line-height:1;letter-spacing:-.03em;}
.cd-n span{font-size:14px;}
.cd-l{font-size:11.5px;color:var(--cinza);font-weight:600;line-height:1.45;}

.carga-linha{padding:12px 0;border-bottom:1px solid var(--linha);}
.carga-linha:last-child{border-bottom:none;padding-bottom:0;}
.cl-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.cl-nome{font-size:13.5px;font-weight:700;}
.cl-ganho{font-size:12.5px;font-weight:800;color:var(--cinza-c);flex-shrink:0;}
.cl-ganho.sobe{color:var(--verde);}
.cl-ganho.desce{color:var(--vermelho);}
.cl-corpo{display:flex;align-items:center;gap:12px;margin-top:8px;}
.spark{width:86px;height:26px;flex-shrink:0;}
.spark-vazio{width:86px;font-size:10.5px;color:var(--cinza-c);font-weight:700;flex-shrink:0;}
.cl-nums{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--cinza);font-weight:700;}
.cl-nums .seta{color:var(--cinza-c);}
.cl-nums .atual{color:var(--tinta);font-weight:800;}
.ex-n{
  width:30px;height:30px;border-radius:10px;background:var(--verde-tint);color:var(--verde-esc);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;flex-shrink:0;
}
.ex-nome{font-size:14px;font-weight:700;}
.ex-det{font-size:12.5px;color:var(--cinza);margin-top:2px;font-weight:600;}
.ex-serie{margin-left:auto;font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:800;color:var(--verde-esc);flex-shrink:0;}

/* organizador da semana */
.dia-org{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--linha);}
.dia-org:last-of-type{border-bottom:none;}
.dia-org-lbl{font-size:13.5px;font-weight:800;width:92px;flex-shrink:0;display:flex;align-items:center;gap:6px;}
.hoje-tag{background:var(--verde);color:#fff;font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em;}
/* não é <select>: abre a folha de escolha, senão o navegador desenha
   a lista do jeito dele e ignora o tema do app */
.sel-dia{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;
  padding:11px 13px;border-radius:12px;border:1px solid var(--verde-borda);
  background:var(--verde-tint2);font-size:13px;font-weight:800;color:var(--verde-esc);
  transition:transform .12s,border-color .14s;
}
.sel-dia:active{transform:scale(.985);border-color:var(--verde);}
.sd-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sd-seta{flex-shrink:0;font-size:11px;opacity:.65;line-height:1;}
.sel-dia.sel-descanso{background:var(--tint-neutro);border-color:var(--linha);color:var(--cinza);}

/* cardio prescrito pelo objetivo */
.cardio-card{background:linear-gradient(140deg,var(--azul-tint),var(--azul-tint2));border-color:var(--azul-borda);}
.cardio-card.off{background:linear-gradient(140deg,var(--tint-neutro),var(--fundo));border-color:var(--linha);}
.cardio-txt{font-size:14px;color:var(--azul-tx);line-height:1.6;font-weight:600;margin:0;}
.cardio-card.off .cardio-txt{color:var(--tinta-2);}
.cardio-dica{font-size:12.5px;color:var(--azul-tx2);line-height:1.55;font-weight:600;margin:9px 0 0;font-style:italic;}
.cardio-card.off .cardio-dica{color:var(--cinza);}

/* ---------- cardio registrado dentro do treino ---------- */
.cardio-rec{font-size:12.5px;color:var(--cinza);line-height:1.55;font-weight:600;margin:0 0 12px;}
.cardio-tipos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.cardio-tipo{padding:9px 13px;border-radius:20px;border:1px solid var(--linha);background:var(--branco);
  font-size:12.5px;font-weight:800;color:var(--tinta-2);font-family:inherit;cursor:pointer;}
.cardio-tipo.on{border-color:var(--verde-esc);background:var(--verde-tint);color:var(--verde-esc);}
.cardio-campos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.cardio-campos.um{grid-template-columns:1fr;}
.cardio-campos label{display:flex;flex-direction:column;gap:6px;font-size:10.5px;font-weight:800;
  color:var(--cinza);text-transform:uppercase;letter-spacing:.04em;}
.cardio-campos input{width:100%;padding:11px 12px;border-radius:11px;border:1px solid var(--linha);
  background:var(--branco);font-size:15px;font-weight:700;color:var(--tinta);font-family:inherit;}
.cardio-campos input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-tint);}
.cardio-feito{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.cardio-feito > div:first-child{flex:1;min-width:0;}
.cf-tipo{font-size:15px;font-weight:800;color:var(--tinta);}
.cf-det{font-size:13px;font-weight:700;color:var(--cinza);margin-top:2px;}
.cf-kcal{font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:800;color:var(--verde-esc);line-height:1;}
.cf-kcal span{font-family:inherit;font-size:12px;margin-left:3px;color:var(--cinza);}
.cardio-acoes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.cardio-acoes .btn{padding:11px;font-size:13.5px;}

/* − / + séries, no topo do exercício aberto */
.series-ajuste{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.series-ajuste span{flex:1;font-size:10.5px;font-weight:800;color:var(--cinza);text-transform:uppercase;letter-spacing:.04em;}
.series-ajuste b{min-width:22px;text-align:center;font-size:16px;font-weight:800;color:var(--tinta);}
.series-ajuste .btn-mini{width:34px;height:34px;font-size:18px;}

/* ---------- treino concluído (a tela dos stories) ---------- */
.rt-tela{padding:18px 18px calc(28px + env(safe-area-inset-bottom, 0px));max-width:460px;margin:0 auto;}
.rt-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.rt-selo{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:20px;
  background:var(--verde-tint);border:1px solid var(--verde-borda);color:var(--verde-esc);font-size:12.5px;font-weight:800;}
.rt-selo svg{color:var(--verde-esc);}
.rt-previa{aspect-ratio:9/16;width:100%;border-radius:22px;overflow:hidden;border:1px solid var(--verde-borda);
  background:#030605;margin-bottom:16px;box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 40px rgba(0,215,162,.10);}
.rt-previa img{width:100%;height:100%;display:block;}
.rt-carregando{height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--cinza);}

/* estado final do treino: não é botão, não volta atrás */
.treino-feito{
  text-align:center;padding:16px;border-radius:16px;
  background:var(--verde-tint);color:var(--verde-esc);
  font-size:15px;font-weight:800;letter-spacing:-.01em;
  border:1px solid var(--verde-borda);
}

.descanso{text-align:center;padding:34px 20px;}
.descanso .em{font-size:38px;}
.descanso h3{font-size:19px;margin:12px 0 8px;}
.descanso p{font-size:13.5px;color:var(--cinza);line-height:1.6;}

/* ---------- biblioteca ---------- */
.busca{
  width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--linha);
  background:var(--branco);font-size:14px;font-weight:600;box-shadow:var(--sombra);
}
.busca::placeholder{color:var(--cinza-c);font-weight:600;}
.busca:focus{outline:none;border-color:var(--verde);}

.cats{display:flex;gap:7px;overflow-x:auto;padding:12px 0;scrollbar-width:none;}
.cats::-webkit-scrollbar{display:none;}
.cat{
  flex-shrink:0;padding:8px 15px;border-radius:20px;border:1px solid var(--linha);
  background:var(--branco);font-size:12.5px;font-weight:800;color:var(--cinza);transition:all .16s;white-space:nowrap;
}
.cat.on{background:var(--verde);border-color:var(--verde);color:#fff;}

.bib-item{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);padding:15px 16px;margin-bottom:10px;box-shadow:var(--sombra);}
.bib-topo{display:flex;align-items:center;gap:11px;}
.bib-ic{width:38px;height:38px;border-radius:12px;background:var(--verde-tint);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.bib-nome{font-size:14.5px;font-weight:800;letter-spacing:-.01em;}
.bib-cat{font-size:11.5px;color:var(--verde-esc);font-weight:800;margin-top:2px;}
.bib-desc{font-size:13px;color:var(--cinza);line-height:1.55;margin-top:11px;font-weight:500;}
.bib-musc{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}
.musc{background:var(--verde-tint2);color:var(--verde-esc);border-radius:8px;padding:4px 9px;font-size:10.5px;font-weight:800;}

/* ---------- gráfico de peso ---------- */
.grafico{position:relative;height:170px;margin:8px 0 4px;}
.grafico svg{width:100%;height:100%;overflow:visible;}
.g-eixo{font-size:10px;fill:var(--cinza-c);font-weight:700;}

.peso-fila{display:flex;gap:10px;margin-bottom:14px;}
.peso-box{flex:1;background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);padding:15px 13px;box-shadow:var(--sombra);}
.peso-box .l{font-size:11px;color:var(--cinza);font-weight:800;text-transform:uppercase;letter-spacing:.05em;}
.peso-box .n{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;font-weight:800;margin-top:6px;letter-spacing:-.03em;}
.peso-box .n small{font-size:13px;color:var(--cinza);font-weight:700;}
.peso-box .d{font-size:11.5px;font-weight:800;margin-top:4px;color:var(--verde);}

/* ---------- progresso ---------- */
.toggle{display:flex;background:var(--verde-tint2);border-radius:14px;padding:4px;margin-bottom:16px;}
.toggle button{flex:1;padding:10px;border-radius:11px;font-size:13px;font-weight:800;color:var(--cinza);transition:all .18s;}
.toggle button.on{background:var(--branco);color:var(--verde-esc);box-shadow:var(--sombra);}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);padding:16px;box-shadow:var(--sombra);}
.stat .ic{font-size:19px;}
.stat .n{font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:800;margin-top:9px;line-height:1;letter-spacing:-.03em;}
.stat .n small{font-size:13px;color:var(--cinza);font-weight:700;letter-spacing:0;}
.stat .l{font-size:11.5px;color:var(--cinza);font-weight:700;margin-top:6px;}

/* ---------- formulários ---------- */
.campo{margin-bottom:16px;}
.campo label{display:block;font-size:12.5px;font-weight:800;color:var(--tinta-2);margin-bottom:7px;}
.campo input,.campo select{
  width:100%;padding:14px 15px;border-radius:14px;border:1px solid var(--linha);
  background:var(--branco);font-size:15px;font-weight:600;transition:border-color .16s;
}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-tint);}
.campo .dica{font-size:11.5px;color:var(--cinza-c);margin-top:6px;font-weight:600;}

.opcoes{display:grid;gap:9px;}
.opcoes.duas{grid-template-columns:1fr 1fr;}
.opc{
  padding:15px 14px;border-radius:15px;border:1.5px solid var(--linha);background:var(--branco);
  text-align:left;transition:all .16s;
}
.opc .t{font-size:14px;font-weight:800;}
.opc .s{font-size:11.5px;color:var(--cinza);margin-top:3px;font-weight:600;line-height:1.4;}
.opc.on{border-color:var(--verde);background:var(--verde-tint2);box-shadow:0 0 0 3px var(--verde-tint);}
.opc.on .t{color:var(--verde-esc);}

.btn{
  display:block;width:100%;padding:16px;border-radius:16px;background:var(--verde);color:#fff;
  font-size:15px;font-weight:800;letter-spacing:-.01em;
  box-shadow:0 8px 22px rgba(0,168,126,.30);transition:transform .14s,box-shadow .14s;
}
.btn:active{transform:translateY(1px) scale(.99);box-shadow:0 4px 14px rgba(0,168,126,.26);}
.btn:disabled{opacity:.55;box-shadow:none;}
.btn.sec{background:var(--branco);color:var(--tinta);border:1px solid var(--linha);box-shadow:var(--sombra);}
.btn.perigo{background:var(--branco);color:var(--vermelho);border:1px solid var(--linha);box-shadow:none;}

/* ---------- navegação inferior ---------- */
.nav{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  max-width:520px;margin:0 auto;height:var(--nav-h);
  background:var(--nav-fundo);
  border-top:1px solid var(--linha);
  display:flex;align-items:flex-start;padding:9px 6px env(safe-area-inset-bottom, 0px);
}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 2px;color:var(--cinza-c);transition:color .16s;}
.nav button.on{color:var(--verde);}
.nav .ic{display:flex;align-items:center;justify-content:center;height:23px;transition:transform .2s;}
.nav .ic svg{display:block;}
.nav button.on .ic{transform:translateY(-2px) scale(1.08);}
.nav .lbl{font-size:10px;font-weight:800;letter-spacing:-.01em;}

/* ---------- onboarding / login ---------- */
.onb{padding:38px 22px 40px;max-width:520px;margin:0 auto;position:relative;z-index:1;}
.onb-logo{
  width:60px;height:60px;border-radius:19px;
  background:linear-gradient(140deg,var(--verde),var(--verde-claro));
  display:flex;align-items:center;justify-content:center;font-size:28px;
  box-shadow:0 10px 28px rgba(0,168,126,.32);margin-bottom:22px;
}
.onb h1{font-size:29px;line-height:1.15;}
.onb .sub{font-size:14.5px;color:var(--cinza);margin:10px 0 28px;line-height:1.6;font-weight:500;}

.passos{display:flex;gap:6px;margin-bottom:24px;}
.passo{flex:1;height:4px;border-radius:10px;background:var(--linha);transition:background .3s;}
.passo.on{background:var(--verde);}

/* ---------- tela de login (e-mail + código) ----------
   Usa cores fixas em vez dos tokens: ela tem foto de fundo e degradê
   próprios, então não acompanha as superfícies do resto do app. */
.tela-login{
  min-height:100dvh;max-width:520px;margin:0 auto;padding:40px 26px 24px;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background:#000 url('../imagem-teladelogin.jpg') center/cover no-repeat;
}
/* escuro embaixo, clareando pra cima: deixa a foto mais visível no topo e
   garante contraste pro texto na parte de baixo (campos e botão) */
.tela-login::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.22) 35%, rgba(0,0,0,.5) 65%, rgba(0,0,0,.92) 100%);
}
/* margem automática em cima/embaixo centraliza o bloco principal no espaço
   que sobra ACIMA do rodapé — assim "Suporte" fica sempre colado embaixo */
.login-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;margin:auto 0;}
.login-footer{position:relative;z-index:1;width:100%;text-align:center;padding-top:18px;}
.login-footer a{color:#8CA79B;font-size:13px;font-weight:700;text-decoration:none;}
.login-footer a:active{opacity:.7;}

/* ---------- transições entre telas ----------
   Toda troca de tela anima a entrada da nova. O lado vem de ORDEM_TELAS
   em js/app.js: avançou no fluxo, entra pela direita; voltou, pela
   esquerda. Tela fora do fluxo (as abas de baixo) faz só um cruzamento.
   Só o #app é animado — nav, modal, toast e o brilho do topo ficam de
   fora dele, então nada position:fixed quebra durante a animação. */
/* Cada pedaço da tela nova entra por conta própria, um atrás do outro:
   é a cascata que faz parecer que a página virou. Deslizar o bloco
   inteiro daria sensação de tela empurrada, não de conteúdo novo.
   --lado (no #app) é a direção: positivo entra pela direita, negativo
   pela esquerda, zero sobe de baixo (as abas). --i (em cada elemento) é
   a vez dele na fila. Os dois são escritos por App.cascata(). */
.entra-el{
  animation:elementoEntra 420ms cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * 45ms);
}
@keyframes elementoEntra{
  from{opacity:0;transform:translate(var(--lado,0px),var(--sobe,12px));}
  to  {opacity:1;transform:none;}
}

/* o título grande vem letra por letra, no lugar de entrar como bloco.
   --atraso põe a primeira letra na mesma batida da cascata. */
/* cada palavra é uma caixa só: sem isto, letra inline-block solta deixa
   a linha quebrar no meio da palavra ("reaj / ustado") */
.letreando .palavra{display:inline-block;white-space:nowrap;}
.letreando .letra{
  display:inline-block;white-space:pre;
  animation:letraSurge 380ms cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--atraso,40ms) + var(--l,0) * 26ms);
}
@keyframes letraSurge{
  from{opacity:0;transform:translateY(.26em);}
  to  {opacity:1;transform:none;}
}

/* a capa da abertura: cópia parada do último quadro, some por cima da
   tela seguinte (que já está montada embaixo) */
/* Duas camadas de propósito: só o FUNDO preto desbota. A logo que está
   voando fica por cima dele, sempre opaca, senão ela sumiria no meio do
   caminho e reapareceria de repente no destino.
   Animação e não transition: a capa nasce e some no mesmo quadro, e
   transition em elemento recém-inserido não tem estado anterior pra
   interpolar — pularia direto pro opacity:0. */
.capa-abertura{position:fixed;inset:0;z-index:60;}
.capa-fundo{position:absolute;inset:0;background:#000;}
.capa-abertura.saindo .capa-fundo{animation:capaSai 620ms ease both;}
@keyframes capaSai{0%,78%{opacity:1;}100%{opacity:0;}}
/* a logo da capa desliza e encolhe até cair em cima da logo da tela de
   baixo; --dx/--dy/--esc são medidos em App.trocarDaAbertura() */
.capa-abertura.juntando .abertura-logo{
  animation:marcaEncaixa 620ms cubic-bezier(.4,0,.2,1) both;
}
@keyframes marcaEncaixa{
  from{transform:translate(0,0) scale(1);}
  to  {transform:translate(var(--dx,0),var(--dy,0)) scale(var(--esc,1));}
}

/* o resto da tela de baixo sobe enquanto a capa some. A logo fica de
   fora: ela só acende no fim, quando a da capa já encaixou nela — senão
   apareceriam duas logos ao mesmo tempo. */
.tela-login.entrando .login-content > *:not(.login-logo):not(.letreando){
  animation:conteudoEntra 560ms cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(240ms + var(--i,0) * 60ms);
}
.tela-login.entrando .login-footer{animation:conteudoEntra 560ms 400ms ease both;}
/* 600ms e não 620: aos 600 a logo que voa já está a menos de 1px do
   destino, então as duas coincidem e a troca não aparece. Acender junto
   com o pouso arriscaria um quadro sem logo nenhuma. */
.tela-login.entrando .login-logo{animation:marcaChega 1ms 600ms both;}
/* a marca do cabeçalho, quando é ela o destino do voo */
.marca-chegando{animation:marcaChega 1ms 600ms both;}
/* sem destino nenhum: a logo desbota junto com o fundo, em vez de ficar
   parada por cima do app até a capa ser removida */
.capa-abertura.sumindo .abertura-logo{animation:capaSai 620ms ease both;}
@keyframes conteudoEntra{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes marcaChega{from{opacity:0;}to{opacity:1;}}

@media (prefers-reduced-motion: reduce){
  .entra-el,.letreando .letra,
  .capa-abertura.juntando .abertura-logo,
  .capa-abertura.sumindo .abertura-logo,
  .marca-chegando,
  .tela-login.entrando .login-content > *,
  .tela-login.entrando .login-footer{animation:none;}
  .capa-abertura.saindo{animation-duration:1ms;}
}

/* ---------- abertura do app ----------
   Usa o arquivo da logo (logo-focusfit.png). A mira é o "O" de FOCUS e
   fica em 33,9% da largura / 30% da altura da imagem: esse ponto é o
   pivô de tudo (--cx/--cy).

   A logo inteira está na tela desde o primeiro quadro, escondida atrás
   de um recorte circular em cima da mira. O recorte fica na PRÓPRIA
   imagem, no mesmo sistema de coordenadas da escala — então o raio
   acompanha a mira sozinho, sem desencontrar dela no meio do caminho.

   O raio de 23px não é solto: medido no arquivo, as pontas da mira vão
   até 111px do centro e a letra mais próxima (o C) começa em 123px —
   numa largura de 280px isso vira 21,9px e 24,3px. 23px cabe no meio,
   cobrindo a mira inteira sem encostar no C nem no F. Mexeu na largura
   da logo ou trocou o arquivo? Refaça essa conta. */
/* a abertura é preta e só: nada de foto nem de degradê por cima */
.tela-abertura{background:#000;}
.tela-abertura::before{display:none;}

.abertura-logo{--cx:33.9%;--cy:30%;--dur:2s;width:280px;}
.abertura-logo img{width:100%;display:block;}

/* wrapper: só o passeio que leva a mira até o meio da tela e volta */
.abertura-logo.tocar{animation:aberturaAnda var(--dur) cubic-bezier(.45,.05,.2,1) both;}
@keyframes aberturaAnda{
  0%      {opacity:0;transform:translate(16.1%,20%);}
  10%,26% {opacity:1;transform:translate(16.1%,20%);}
  100%    {opacity:1;transform:translate(0,0);}
}

/* O rastro de luz verde do arquivo passa dentro do recorte: medido na
   imagem, ele fica entre 81px e 111px do centro da mira e só abaixo
   dela, então um recorte menor cortaria a ponta de baixo da mira.
   Em vez disso, enquanto a mira está ampliada a imagem passa por um
   filtro: tira a cor, escurece, estoura o contraste e devolve o brilho.
   O rastro tem luminância ~164 e a mira ~251, então essa conta joga o
   rastro pro preto (some no fundo escuro) e mantém a mira branca.
   A cor volta no mesmo quadro em que FOCUS e FIT aparecem. Trocou o
   arquivo da logo? Confira essas duas luminâncias antes. */
/* imagem: escala e recorte na mesma curva e nas mesmas coordenadas */
.abertura-logo.tocar img{
  transform-origin:var(--cx) var(--cy);
  animation:aberturaMira var(--dur) cubic-bezier(.45,.05,.2,1) both;
}
@keyframes aberturaMira{
  /* mira grande e parada, só ela à vista */
  0%,26% {transform:scale(6);clip-path:circle(23px at var(--cx) var(--cy));
          filter:grayscale(1) brightness(.55) contrast(4) brightness(1.5);}
  /* encolhe até o tamanho final com o recorte colado nela */
  74%    {clip-path:circle(23px at var(--cx) var(--cy));
          filter:grayscale(1) brightness(.55) contrast(4) brightness(1.5);}
  /* o círculo abre: a cor volta junto com FOCUS e FIT */
  100%   {transform:scale(1);clip-path:circle(260px at var(--cx) var(--cy));
          filter:grayscale(0) brightness(1) contrast(1) brightness(1);}
}

/* círculo girando das telas de carregamento */
.girando{
  width:62px;height:62px;border-radius:50%;
  border:4px solid rgba(0,215,162,.18);border-top-color:#00D7A2;
  animation:girar 900ms linear infinite;
  box-shadow:0 0 26px rgba(0,215,162,.25);
}
@keyframes girar{to{transform:rotate(360deg);}}

/* ---------- tela "Seu perfil" (revisão das respostas do quiz) ----------
   Herda o fundo e os botões da tela de login; o que muda é que ela rola
   e alinha o conteúdo à esquerda, em vez de centralizar verticalmente. */
.tela-perfil{justify-content:flex-start;padding-top:44px;}
.tela-perfil .login-content{margin:0;}
.login-h1.esq,.login-sub.esq{text-align:left;}
.login-sub.esq{margin-bottom:22px;}

.rev-secao{
  width:100%;margin:20px 0 10px;
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#00D7A2;
}
.rev-linha{
  width:100%;margin-bottom:9px;border-radius:15px;
  border:1.5px solid rgba(0,215,162,.4);background:rgba(8,26,22,.55);
  overflow:hidden;transition:border-color .16s;
}
.rev-linha.aberta{border-color:#00D7A2;background:rgba(10,38,31,.8);}
.rev-topo{
  display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:none;cursor:pointer;padding:11px 14px;text-align:left;
}
.rev-ic{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.rev-ic svg{width:21px;height:21px;}
.rev-txt{flex:1;min-width:0;}
.rev-rot{display:block;font-size:11.5px;font-weight:600;color:#8CA79B;line-height:1.3;}
.rev-val{display:block;font-size:15px;font-weight:800;color:#fff;line-height:1.35;margin-top:2px;}
.rev-val.rev-vazio{color:#6C8478;font-weight:600;}
/* seta apontando pra direita; ao abrir a linha ela gira pra baixo,
   que é o jeito conhecido de mostrar "isto abre" */
.rev-seta{flex-shrink:0;display:flex;transition:transform .2s;}
.rev-seta svg{width:18px;height:18px;}
.rev-linha.aberta .rev-seta{transform:rotate(90deg);}

.rev-ops{display:flex;flex-wrap:wrap;gap:8px;padding:2px 14px 14px;}
.rev-op{
  border-radius:30px;padding:9px 15px;cursor:pointer;
  border:1.5px solid rgba(0,215,162,.35);background:rgba(0,0,0,.35);
  font-size:13px;font-weight:700;color:#c3d6cb;transition:all .14s;
}
.rev-op.on{background:linear-gradient(135deg,var(--verde),var(--verde-claro));border-color:transparent;color:#fff;}
.rev-op.ok{background:rgba(0,215,162,.16);border-color:#00D7A2;color:#00D7A2;}
.rev-input{
  flex:1;min-width:130px;height:42px;padding:0 14px;border-radius:21px;
  border:1.5px solid rgba(0,215,162,.4);background:rgba(0,0,0,.4);
  color:#fff;font-size:15px;font-weight:700;outline:none;
}
.rev-input:focus{border-color:#00D7A2;}

/* conteúdo que abre dentro dos blocos da tela "Seu plano está pronto" */
.plano-corpo{padding:2px 16px 14px;}
.plano-item{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid rgba(0,215,162,.14);
}
.plano-item:last-of-type{border-bottom:none;}
.plano-item-nome{font-size:13.5px;font-weight:600;color:#c3d6cb;}
.plano-item-nome small{color:#7E9389;font-weight:600;}
.plano-item-val{font-size:14px;font-weight:800;color:#fff;white-space:nowrap;text-align:right;}
.plano-item-val small{font-size:11.5px;font-weight:600;color:#7E9389;}
.plano-item-val.plano-folga{color:#7E9389;font-weight:700;}
.plano-nota{font-size:12.5px;color:#8CA79B;line-height:1.6;margin-top:12px;font-weight:500;}

/* a marca vem do arquivo (logo-focusfit.png), não desenhada em CSS:
   é a mesma imagem da abertura e do giro das telas de carregamento */
.login-logo{display:block;width:170px;margin:0 auto 46px;}

.login-h1{width:100%;text-align:center;font-family:'Bricolage Grotesque','Manrope',sans-serif;font-size:33px;font-weight:800;color:#fff;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(0,0,0,.6);}
.login-sub{width:100%;text-align:center;font-size:14.5px;color:#c3d6cb;margin:12px 0 32px;line-height:1.6;font-weight:500;text-shadow:0 1px 12px rgba(0,0,0,.6);}
.login-sub strong{color:#fff;}

.login-campo{position:relative;width:100%;margin-bottom:14px;}
.login-campo .ic{position:absolute;left:20px;top:50%;transform:translateY(-50%);display:flex;pointer-events:none;}
.login-campo input{
  width:100%;height:58px;padding:0 20px 0 50px;border-radius:29px;
  border:1.5px solid rgba(0,215,162,.45);background:rgba(14,44,37,.28);
  color:#fff;font-size:15px;font-weight:600;transition:border-color .16s,background .16s;
}
.login-campo.sem-icone input{padding-left:20px;}
.login-campo input::placeholder{color:#5C7A6C;}
.login-campo input:focus{outline:none;border-color:#00D7A2;background:rgba(14,44,37,.45);}

.login-btn{
  display:block;width:100%;height:58px;border-radius:29px;border:none;cursor:pointer;
  background:linear-gradient(90deg,#007F5F 0%,#00B386 50%,#007F5F 100%);color:#fff;
  font-family:'Manrope',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.01em;margin-top:10px;
  box-shadow:0 16px 34px rgba(0,215,162,.4),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .14s,box-shadow .14s;
}
.login-btn:active{transform:translateY(1px) scale(.99);}
.login-btn:disabled{opacity:.55;box-shadow:none;}

.login-alt{width:100%;text-align:center;margin-top:26px;font-size:13.5px;color:#7E9389;font-weight:600;}
.login-alt button{background:none;border:none;font-size:inherit;font-weight:700;color:#8CA79B;cursor:pointer;}
.login-alt .login-link{color:#00D7A2;font-weight:800;}
.tela-login .erro{position:relative;width:100%;background:rgba(224,90,78,.14);border:1px solid rgba(224,90,78,.3);color:#F2A79C;border-radius:12px;padding:12px 14px;font-size:13px;font-weight:700;margin-bottom:16px;text-align:center;}

.aviso{background:var(--ambar-tint);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--ambar-tx);line-height:1.5;font-weight:600;margin-bottom:16px;}
.erro{background:var(--erro-bg);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--erro-tx);font-weight:700;margin-bottom:14px;}

.vazio{text-align:center;padding:44px 24px;color:var(--cinza);}
.vazio .em{font-size:36px;}
.vazio p{font-size:13.5px;margin-top:12px;line-height:1.6;font-weight:500;}

/* ---------- perfil ---------- */
.perfil-topo{text-align:center;padding:14px 0 22px;}
.perfil-av-caixa{position:relative;width:82px;margin:0 auto 14px;}
.perfil-av{
  width:82px;height:82px;border-radius:26px;overflow:hidden;
  background:linear-gradient(140deg,var(--verde),var(--verde-claro));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:800;
  box-shadow:0 12px 30px rgba(0,168,126,.34);
}
.perfil-av img{width:100%;height:100%;object-fit:cover;display:block;}
/* o emoji de câmera no canto, igual ao badge de "editar" que apps de
   contato usam — some quando ela toca em qualquer lugar do círculo. */
.av-editar{
  position:absolute;right:-4px;bottom:-4px;width:30px;height:30px;border-radius:50%;
  background:var(--branco);border:2px solid var(--fundo);
  display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;
  cursor:pointer;box-shadow:var(--sombra-alta);
}
.perfil-nome{font-size:22px;}
.perfil-mail{font-size:13px;color:var(--cinza);margin-top:3px;font-weight:600;}

.lista-item{display:flex;align-items:center;gap:13px;padding:15px 0;border-bottom:1px solid var(--linha);}
.lista-item:last-child{border-bottom:none;}
.lista-k{font-size:13.5px;color:var(--cinza);font-weight:700;}
.lista-v{margin-left:auto;font-size:14px;font-weight:800;}

/* ---------- toast ---------- */
/* ⚠️ Achado ao investigar "aviso aparece em branco": o fundo padrão era
   var(--tinta), que É BRANCO (#FFFFFF) — sobrando do tema claro que foi
   removido. Com color:#fff por cima, todo toast SEM o verde (a maioria:
   "Conferindo pagamento...", "Corrida apagada.", erros de permissão
   etc.) tinha texto branco em fundo branco. Invisível sempre, não só
   às vezes — só não pegava quem visse mais os toasts verdes de sucesso. */
.toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + 18px);transform:translate(-50%,20px);
  background:var(--branco);border:1px solid var(--linha);color:var(--tinta);padding:13px 20px;border-radius:14px;
  font-size:13.5px;font-weight:700;z-index:100;opacity:0;pointer-events:none;
  transition:all .3s cubic-bezier(.2,.7,.3,1);box-shadow:var(--sombra-alta);max-width:90%;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0);}
.toast.verde{background:var(--verde-grad);}

/* ---------- comemoração de subida de nível ---------- */
.nivelup{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;
  background:rgba(8,20,15,.92);backdrop-filter:blur(6px);
  overflow:hidden;
}
.nivelup.on{display:flex;animation:nuEntra .4s ease both;}
.nivelup.saindo{animation:nuSai .32s ease both;}
@keyframes nuEntra{from{opacity:0}to{opacity:1}}
@keyframes nuSai{to{opacity:0;transform:scale(1.04)}}

.nu-brilho{position:absolute;inset:0;animation:nuPulsa 2.6s ease-in-out infinite;}
@keyframes nuPulsa{0%,100%{opacity:.55}50%{opacity:1}}

/* confete */
.nu-confete{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.nu-confete i{
  position:absolute;top:-8%;display:block;opacity:0;
  animation-name:nuCai;animation-timing-function:cubic-bezier(.25,.6,.5,1);
  animation-iteration-count:1;animation-fill-mode:both;
}
@keyframes nuCai{
  0%{opacity:0;transform:translate3d(0,-40px,0) rotate(0)}
  8%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--desvio),108vh,0) rotate(var(--giro))}
}

/* selo central */
.nu-caixa{position:relative;text-align:center;padding:30px 26px;max-width:400px;width:100%;}
.nu-selo-area{
  position:relative;height:186px;display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;perspective:760px;
}

.nu-anel{
  position:absolute;width:128px;height:128px;border-radius:50%;
  border:2px solid;opacity:0;
  animation:nuAnel 2.4s cubic-bezier(.2,.7,.3,1) infinite;
}
.nu-anel.a2{animation-delay:.7s}
.nu-anel.a3{animation-delay:1.4s}
@keyframes nuAnel{
  0%{transform:scale(.7);opacity:.9}
  100%{transform:scale(2.5);opacity:0}
}

.nu-raios{position:absolute;width:150px;height:150px;animation:nuGira 14s linear infinite;}
.nu-raios b{
  position:absolute;left:50%;top:0;width:2px;height:52px;margin-left:-1px;
  transform-origin:50% 75px;opacity:.42;
}
@keyframes nuGira{to{transform:rotate(360deg)}}

/* emoji solto, sem moldura, com profundidade e flutuação 3D */
.nu-selo{
  position:relative;font-size:112px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  filter:
    drop-shadow(0 3px 0 rgba(0,0,0,.22))
    drop-shadow(0 12px 20px rgba(0,0,0,.42))
    drop-shadow(0 28px 52px var(--brilho, rgba(255,255,255,.35)));
  animation:nuSelo .85s cubic-bezier(.18,1.5,.4,1) .1s both,
            nuFlutua 4.2s ease-in-out 1s infinite;
}
@keyframes nuSelo{
  0%{transform:scale(0) rotate(-40deg);opacity:0}
  60%{opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes nuFlutua{
  0%,100%{transform:translateY(0) rotateX(0deg) rotateY(0deg)}
  25%{transform:translateY(-9px) rotateX(10deg) rotateY(-9deg)}
  50%{transform:translateY(-2px) rotateX(0deg) rotateY(0deg)}
  75%{transform:translateY(-7px) rotateX(-8deg) rotateY(9deg)}
}

/* halo luminoso atrás do emoji */
.nu-halo{
  position:absolute;width:220px;height:220px;border-radius:50%;
  filter:blur(22px);opacity:.55;
  animation:nuHalo 3.2s ease-in-out infinite;
}
@keyframes nuHalo{0%,100%{transform:scale(.9);opacity:.42}50%{transform:scale(1.1);opacity:.7}}

.nu-tag{
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);animation:nuSobe .5s ease .45s both;
}
.nu-nome{
  font-family:'Bricolage Grotesque',sans-serif;font-size:42px;font-weight:800;
  letter-spacing:-.03em;line-height:1.05;margin:6px 0 10px;
  animation:nuSobe .5s ease .55s both;
}
.nu-n{font-size:13px;font-weight:800;color:rgba(255,255,255,.72);animation:nuSobe .5s ease .65s both;}
.nu-frase{
  font-size:15px;color:rgba(255,255,255,.9);line-height:1.6;font-weight:500;
  margin:16px auto 0;max-width:300px;animation:nuSobe .5s ease .75s both;
}
.nu-prox{
  font-size:12.5px;color:rgba(255,255,255,.62);font-weight:600;margin-top:20px;
  animation:nuSobe .5s ease .85s both;
}
.nu-prox b{color:#fff;}
@keyframes nuSobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.nu-btn{
  margin-top:26px;padding:15px 44px;border-radius:16px;
  background:#fff;color:#0B120F;font-size:15px;font-weight:800;
  box-shadow:0 12px 36px rgba(0,0,0,.3);
  animation:nuSobe .5s ease .95s both;transition:transform .14s;
}
.nu-btn:active{transform:scale(.96);}

@media (max-height:640px){
  .nu-selo-area{height:118px}
  .nu-selo{width:84px;height:84px;font-size:40px;border-radius:28px}
  .nu-nome{font-size:34px}
  .nu-frase{font-size:14px;margin-top:12px}
}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(15,28,23,.55);backdrop-filter:blur(3px);z-index:200;display:none;align-items:flex-end;justify-content:center;}
.modal-bg.on{display:flex;}
.modal{
  background:var(--branco);border-radius:26px 26px 0 0;padding:26px 22px 32px;
  width:100%;max-width:520px;animation:sobeModal .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes sobeModal{from{transform:translateY(100%);}to{transform:none;}}
.modal h3{font-size:20px;margin-bottom:6px;}
.modal .m-sub{font-size:13.5px;color:var(--cinza);margin-bottom:20px;font-weight:500;}
.modal-puxador{width:38px;height:4px;border-radius:10px;background:var(--linha);margin:-8px auto 18px;}

@media (min-width:521px){
  .modal-bg{align-items:center;}
  .modal{border-radius:26px;margin:0 20px;}
}

/* ---------- alternador de tema ---------- */
.tema-linha{display:flex;align-items:center;gap:13px;padding:4px 0;}
.tema-ic{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  background:var(--verde-tint);
}
.tema-txt .t{font-size:14px;font-weight:800;}
.tema-txt .s{font-size:12px;color:var(--cinza);font-weight:600;margin-top:2px;line-height:1.4;}
.switch{
  margin-left:auto;flex-shrink:0;width:52px;height:31px;border-radius:20px;
  background:var(--linha);position:relative;transition:background .22s;
}
.switch.on{background:var(--verde);}
.switch i{
  position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.22);
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.switch.on i{transform:translateX(21px);}

/* =========================================================
   FORMA DOS COMPONENTES
   Os tokens acima dão a cor do app inteiro. O que vive aqui é o que muda
   de FORMA: pílulas no lugar de retângulos, contorno verde no lugar de
   sombra, círculos nos ícones. Fica depois das regras base de propósito,
   pra ganhar delas no empate de especificidade.
   ========================================================= */

/* o cartão se define pelo contorno; um véu verde bem fraco no topo dá
   o volume, já que sombra preta não aparece sobre preto */
.card:not(.plano-cab):not(.cardio-card):not(.livre-card),
.stat,
.streak-box,
.ref,
.dia-chip{
  background:linear-gradient(180deg,rgba(0,215,162,.05),rgba(0,215,162,0) 62%),var(--branco);
}

/* o destaque virou contorno aceso, não bloco âmbar: nas telas de
   referência é sempre o contorno que marca "este aqui" */
.streak-box.destaque{
  background:linear-gradient(180deg,rgba(0,215,162,.10),rgba(0,215,162,0) 70%),var(--branco);
  border-color:#00D7A2;color:var(--tinta);
  box-shadow:0 0 24px rgba(0,215,162,.16);
}
.streak-box.destaque .l{color:var(--cinza);}

/* botões viram pílula, com brilho verde no principal e contorno nos outros */
.btn{
  border-radius:999px;padding:18px;
  background:linear-gradient(90deg,#008F6B,#00B386 52%,#008F6B);
  box-shadow:0 14px 30px rgba(0,215,162,.30),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.sec{
  background:transparent;border:1.5px solid var(--verde-borda);
  color:var(--tinta);box-shadow:none;
}
.btn.perigo{
  background:transparent;border:1.5px solid rgba(255,122,107,.42);
  color:var(--vermelho);box-shadow:none;
}
.btn-mini{border-radius:50%;width:38px;height:38px;}

/* seletor de período: pílula vazada com o lado ativo preenchido */
.toggle{
  background:transparent;border:1.5px solid var(--verde-borda);
  border-radius:999px;padding:5px;
}
.toggle button{border-radius:999px;}
/* com três abas (Treino, Corrida e Biblioteca) o rótulo aperta em tela
   estreita; o cadeado da Biblioteca ainda soma um caractere */
.toggle button{padding-left:4px;padding-right:4px;font-size:12.5px;white-space:nowrap;}
.toggle.duas button{font-size:13px;}
.toggle button.on{
  background:linear-gradient(90deg,#008F6B,#00B386);color:#fff;
  box-shadow:0 6px 18px rgba(0,215,162,.26);
}

/* ícone das metas e das refeições: círculo, como nas telas */
.meta-ic{width:44px;height:44px;border-radius:50%;}
.ref-ic{border-radius:50%;}

/* marcar alimento: círculo cheio de verde */
.check{width:26px;height:26px;border-radius:50%;border-width:2px;}
.alim.feito .check{box-shadow:0 0 14px rgba(0,215,162,.35);}

/* barra de progresso: trilho fundo e preenchimento com brilho */
.barra{background:#16241E;}
.barra i{box-shadow:0 0 12px rgba(0,215,162,.40);}
.barra.azul i{box-shadow:0 0 12px rgba(59,130,196,.40);}
.barra.roxo i{box-shadow:0 0 12px rgba(124,107,196,.40);}

/* dia selecionado e item aceso da navegação ganham o mesmo brilho */
.dia-chip.ativo{
  background:linear-gradient(135deg,#008F6B,#00B386);
  box-shadow:0 6px 20px rgba(0,215,162,.30);
}
.nav button.on{color:var(--verde-esc);}
.nav button.on .ic{filter:drop-shadow(0 0 10px rgba(0,215,162,.55));}

/* etiqueta clara dentro do cartão de nível continua legível no escuro */
.tag.claro{background:rgba(255,255,255,.16);color:#fff;}

/* ---------- boas-vindas (camada por cima da tela inicial) ----------
   A tela inicial continua montada e visível atrás, só escurecida: a pessoa
   já vê o app dela enquanto lê, e o "Continuar" libera o que ela está
   vendo, em vez de revelar algo desconhecido. */
.bv-bg{
  position:fixed;inset:0;z-index:220;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(2,8,5,.76);backdrop-filter:blur(3px);
}
.bv-bg.on{display:flex;animation:bvFundo 260ms ease both;}
.bv-bg.saindo{animation:bvFundo 300ms ease both reverse;}
@keyframes bvFundo{from{opacity:0;}to{opacity:1;}}

.bv-caixa{
  width:100%;max-width:400px;max-height:100%;overflow-y:auto;
  background:var(--branco);border:1px solid var(--verde-borda);
  border-radius:var(--r-lg);padding:28px 24px 24px;text-align:center;
  box-shadow:var(--sombra-alta);
  animation:bvCaixa 380ms cubic-bezier(.2,.7,.3,1) both;
}
.bv-bg.saindo .bv-caixa{animation:bvCaixa 280ms ease both reverse;}
@keyframes bvCaixa{from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:none;}}
.bv-caixa{
  background:linear-gradient(180deg,rgba(0,215,162,.10),rgba(0,215,162,.01) 60%),var(--branco);
  border-color:#00D7A2;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(0,215,162,.14);
}

.bv-marca{
  width:56px;height:56px;border-radius:50%;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--verde-tint);color:var(--verde-esc);
}
.bv-tt{font-size:24px;margin-bottom:12px;}
.bv-txt{font-size:14px;line-height:1.65;color:var(--tinta-2);font-weight:500;margin-bottom:14px;text-align:left;}
.bv-txt b{color:var(--tinta);font-weight:800;}
.bv-sup{margin:4px 0 10px;text-align:center;}

/* nada rola atrás enquanto a camada está aberta */
body.travado{overflow:hidden;}

/* ---------- linha de lista clicável (ajuda e suporte) ---------- */
.lista-link{width:100%;text-align:left;gap:13px;}
.lista-ic{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--verde-tint);display:flex;align-items:center;justify-content:center;font-size:17px;
}
.lista-t{font-size:14px;font-weight:800;color:var(--tinta);}
.lista-s{font-size:11.5px;color:var(--cinza);font-weight:600;margin-top:2px;}
.lista-seta{margin-left:auto;color:var(--cinza-c);font-size:20px;font-weight:700;}
.lista-link:active{opacity:.6;}

/* título de cartão: nas telas de referência ele é um título de verdade,
   branco e grande, não uma etiqueta maiúscula miúda */
.card-tt{
  font-family:'Bricolage Grotesque','Manrope',sans-serif;
  font-size:17px;font-weight:800;letter-spacing:-.01em;
  text-transform:none;color:var(--tinta);gap:10px;margin-bottom:16px;
}
.card-tt .n{font-size:12.5px;font-weight:700;color:var(--cinza);}

/* ---------- "como foi o treino?" ---------- */
.esforco-fila{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.esforco-op{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:14px;align-items:center;text-align:left;
  padding:14px 16px;border-radius:var(--r);
  border:1.5px solid var(--linha);background:var(--branco);
  transition:border-color .14s,background .14s,transform .12s;
}
.esforco-op:active{transform:scale(.99);border-color:var(--verde-claro);background:var(--verde-tint);}
.esforco-op .e{grid-row:1 / span 2;font-size:26px;}
.esforco-op .t{font-size:15px;font-weight:800;color:var(--tinta);}
.esforco-op .s{font-size:12.5px;color:var(--cinza);font-weight:600;}

/* a leitura do histórico, na aba de Treinos */
.esforco-lida{display:flex;align-items:flex-start;gap:12px;}
.el-ic{font-size:20px;line-height:1.3;flex-shrink:0;}
.el-txt{font-size:13.5px;line-height:1.6;font-weight:600;color:var(--tinta-2);margin:0;}
.esforco-lida.pesado{border-color:var(--ambar-borda);background:var(--ambar-tint2);}
.esforco-lida.leve{border-color:var(--verde-borda);}

/* ---------- sua semana (7 bolinhas) ---------- */
.sem-fila{display:flex;gap:7px;margin-bottom:14px;}
.sem-dia{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.sem-dia .b{
  width:100%;aspect-ratio:1;max-width:40px;border-radius:50%;
  border:1.5px solid var(--linha);background:var(--tint-neutro);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;color:transparent;
  transition:all .25s cubic-bezier(.2,.7,.3,1);
}
.sem-dia .d{font-size:10.5px;font-weight:800;color:var(--cinza-c);letter-spacing:.04em;}
.sem-dia.on .b{
  background:linear-gradient(135deg,var(--verde),var(--verde-claro));
  border-color:transparent;color:#fff;
}
/* fora da rotina é escolha, não falha: azul, não vazio */
.sem-dia.fora .b{background:var(--azul);border-color:transparent;color:#fff;}
.sem-dia.hoje .d{color:var(--verde-esc);}
.sem-dia.hoje .b{border-color:var(--verde-claro);}
.sem-dia.futuro .b{opacity:.4;}
.sem-txt{font-size:12.5px;line-height:1.6;color:var(--cinza);font-weight:600;margin-bottom:14px;}
.sem-nums{display:flex;gap:10px;padding-top:14px;border-top:1px solid var(--linha);}
.sem-nums div{flex:1;text-align:center;}
.sem-nums b{
  display:block;font-family:'Bricolage Grotesque',sans-serif;
  font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1;
}
.sem-nums b small{font-size:12px;color:var(--cinza-c);}
.sem-nums span{display:block;font-size:10.5px;color:var(--cinza);font-weight:700;margin-top:5px;}

/* ---------- dia fora da rotina ----------
   Usa a mesma casca das refeições (.ref), então encolhe e abre igual a
   elas; o que está aqui é só o miolo. */
.fora-ref .ref-ic{color:var(--verde-esc);}
.fora-ref .ref-prog{font-size:12px;}
.fora-txt{font-size:13.5px;line-height:1.6;color:var(--tinta-2);font-weight:600;margin:14px 0 12px;}
.fora-aviso{font-size:12.5px;line-height:1.6;color:var(--ambar-tx);font-weight:700;
  background:var(--ambar-tint);border-radius:12px;padding:11px 13px;margin-bottom:16px;}
.fora-bloqueado{font-size:12px;color:var(--cinza-c);font-weight:600;line-height:1.55;
  text-align:center;margin-top:10px;}
.ref-corpo .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;}
.ref-corpo .btn[disabled]:hover{transform:none;}

/* ---------- resumo de domingo ---------- */
.resumo-chamada{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border-color:var(--verde-borda);}
.rc-ic{font-size:22px;flex-shrink:0;}
.rc-t{font-size:14.5px;font-weight:800;color:var(--tinta);}
.rc-s{font-size:12px;color:var(--cinza);font-weight:600;margin-top:2px;}
.res-abre{text-align:center;padding:26px 18px;}
.res-n{font-size:56px;line-height:1;}
.res-n small{font-size:24px;color:var(--cinza-c);}
.res-l{font-size:13.5px;color:var(--cinza);font-weight:700;margin-top:8px;}
.res-peso{font-size:13px;color:var(--tinta-2);font-weight:700;margin-top:16px;padding-top:16px;border-top:1px solid var(--linha);}
.res-peso.bom{color:var(--verde-esc);}
.res-linha{padding:14px 0;border-bottom:1px solid var(--linha);}
.res-linha:last-child{border-bottom:none;}
.res-foco{border-color:var(--verde-borda);}
.rf-t{font-size:15px;font-weight:800;color:var(--verde-esc);margin-bottom:8px;}
.rf-txt{font-size:13.5px;line-height:1.65;color:var(--tinta-2);font-weight:500;margin:0;}

/* ---------- fotos de progresso ---------- */
.foto-txt{font-size:13px;line-height:1.6;color:var(--tinta-2);font-weight:500;margin-bottom:16px;}
.foto-label{display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;cursor:pointer;}
.foto-galeria{margin-top:10px;}
.foto-aviso{
  font-size:11.5px;line-height:1.6;color:var(--cinza);font-weight:600;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--linha);
}
.foto-par{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.foto-par figure{margin:0;}
.foto-par img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-sm);display:block;}
.foto-par figcaption{font-size:11px;color:var(--cinza);font-weight:700;text-align:center;margin-top:8px;}
.foto-dif{
  text-align:center;font-size:14px;font-weight:800;color:var(--verde-esc);
  margin:-4px 0 4px;
}
.foto-grade{display:grid;grid-template-columns:1fr 1fr;gap:22px 10px;}
.foto-item{margin:0;min-width:0;}
.fi-img{position:relative;}
.foto-item img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);display:block;
  border:1px solid var(--linha);}
.foto-item figcaption{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  font-size:12px;color:var(--tinta-2);font-weight:700;text-align:center;margin-bottom:8px;}
.fi-peso{background:var(--verde-tint);color:var(--verde-esc);border-radius:20px;
  padding:2px 8px;font-size:10.5px;font-weight:800;}

/* salvar e compartilhar, embaixo de cada foto: um em cima do outro,
   porque com duas fotos por linha não cabem lado a lado */
.foto-acoes{display:grid;grid-template-columns:1fr;gap:6px;margin-top:8px;}
.foto-acoes button{display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--verde-tint2);border:1px solid var(--linha);border-radius:11px;
  padding:8px 6px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;
  color:var(--tinta-2);}
.foto-acoes button:hover{color:var(--verde-esc);border-color:var(--verde-borda);}
.foto-acoes svg{flex-shrink:0;}
.foto-x{
  position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);
}

/* ---------- lembretes ---------- */
.lembrete-nota{
  font-size:11.5px;line-height:1.6;color:var(--cinza);font-weight:600;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--linha);
}
/* Os cartões que são um botão de atalho: ícone, texto e seta numa
   linha só. Sem isto o <button> encolhe no conteúdo e o texto vem
   centralizado, com a seta caindo pra baixo. As regras viviam no bloco
   do "dia fora da rotina" e foram junto quando ele foi reescrito. */
.fora-btn,
.perdidas{display:flex;align-items:center;gap:13px;width:100%;text-align:left;}
.fora-btn:active,.perdidas:active{opacity:.7;}
.fb-ic{flex-shrink:0;}
.fb-t{font-size:14.5px;font-weight:800;color:var(--tinta);}
.fb-s{font-size:12px;color:var(--cinza);font-weight:600;margin-top:2px;line-height:1.5;}
.perdidas{border-color:var(--ambar-borda);}
.perdidas{background:var(--ambar-tint2);}

/* ---------- ícones de traço (js/icones.js) ----------
   Herdam a cor de quem os contém, então o mesmo desenho serve aceso na
   navegação e apagado numa lista. Precisam ficar alinhados com o texto
   ao lado, daí o flex nos contêineres. */
.card-tt svg{flex-shrink:0;color:var(--verde-esc);}
.meta-ic svg,.lista-ic svg,.fb-ic svg,.rc-ic svg,.tema-ic svg,.el-ic svg{display:block;}
.meta-ic.agua svg{color:#5AA9E6;}
.meta-ic.sono svg{color:#9B8CE0;}
.meta-ic.treino svg,.meta-ic.dieta svg{color:var(--verde-esc);}
.lista-ic svg,.tema-ic svg{color:var(--verde-esc);}
.fb-ic,.rc-ic,.el-ic{display:flex;align-items:center;color:var(--verde-esc);}
.btn svg,.btn.sec svg{vertical-align:-4px;margin-right:7px;color:currentColor;}
.btn-mini svg{color:var(--verde-esc);}
.vazio .em svg,.descanso .em svg,.rev-vazio .em svg{margin:0 auto;color:var(--verde-esc);}
.esforco-lida.pesado .el-ic{color:var(--ambar-tx);}

/* botão redondo preenchido: o "concluir treino" das telas de referência */
.btn-mini.cheio{
  background:linear-gradient(135deg,var(--verde),var(--verde-claro));
  border-color:transparent;color:#fff;
}
.btn-mini.cheio svg{color:#fff;}
.btn-mini.cheio{box-shadow:0 0 18px rgba(0,215,162,.35);}
/* o "concluir" apagado enquanto o treino está pendente: acende só
   depois do toque, pra aceso significar feito */
.btn-mini.apagado{border-color:var(--linha);background:transparent;}
.btn-mini.apagado svg{color:var(--cinza-c);}
.btn-mini.feito{pointer-events:none;}

/* a razão do cardio sai do cartão verde e vira nota embaixo dele */
.plano-porque{
  font-size:12.5px;line-height:1.6;color:var(--cinza);font-weight:600;
  margin:-4px 2px 16px;
}

/* botão quadrado arredondado do cabeçalho (biblioteca de exercícios) */
.btn-mini.quadrado{width:42px;height:42px;border-radius:13px;}
.btn-mini.quadrado{border-radius:13px;border-color:var(--verde-borda);}

/* ícone da refeição: verde, como o resto dos ícones do app */
.ref-ic svg{color:var(--verde-esc);}

/* ---------- marca sozinha no topo (todas as abas menos a Início) ----------
   O cabeçalho vira duas etapas: a marca em cima, e só depois o título da
   tela. Dá respiro e faz a marca aparecer igual em todas elas. */
.marca-linha{display:flex;justify-content:center;padding:26px 18px 0;--marca:150px;}
/* O arquivo da logo tem ar transparente: 14,4% da altura em cima e 43%
   embaixo (medido no PNG). Sem cortar isso com margem negativa, a marca
   parece flutuar longe do título mesmo com o espaçamento zerado. Como a
   imagem é 2:1, a altura é metade da largura — daí os fatores. */
.marca-linha img{
  width:var(--marca);height:auto;opacity:.95;display:block;
  margin-top:calc(var(--marca) * -0.072);
  margin-bottom:calc(var(--marca) * -0.215);
}

/* com a marca fora da linha, o título não disputa espaço e volta ao
   tamanho cheio; o espaço acima dele é o que separa as duas etapas */
.marca-linha + .topo{padding-top:18px;}
.marca-linha + .topo h1{font-size:26px;}

/* o "Criar Conta" embaixo do botão de código, na tela de login */
.login-criar{display:block;width:100%;margin-top:16px;text-align:center;
  font-size:13.5px;font-weight:600;color:var(--cinza);text-decoration:none;}
.login-criar strong{color:var(--verde-esc);font-weight:800;text-decoration:underline;}
.login-criar:hover strong{color:var(--tinta);}

/* ===== AGENDA E CALENDÁRIO DO TREINO ===== */
.agenda-card .tema-linha{margin-bottom:2px;}
.agenda-hora{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--linha);}
.agenda-hora label{font-size:13.5px;font-weight:700;color:var(--tinta-2);}
.agenda-hora input{
  flex-shrink:0;background:var(--verde-tint2);border:1px solid var(--verde-borda);
  color:var(--tinta);border-radius:12px;padding:10px 13px;
  font-family:inherit;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;
  color-scheme:dark;                        /* senão o relógio do navegador vem branco */
}
.agenda-nota{font-size:11.5px;color:var(--cinza-c);line-height:1.6;font-weight:600;margin-top:10px;}

.cal-card{padding:16px 14px 14px;}
.cal-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-mes{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;
  color:var(--tinta);letter-spacing:-.01em;}
.cal-nav{width:34px;height:34px;flex-shrink:0;border-radius:11px;border:1px solid var(--linha);
  background:var(--verde-tint2);color:var(--tinta-2);font-size:19px;line-height:1;
  cursor:pointer;font-family:inherit;}
.cal-nav:hover{color:var(--verde-esc);border-color:var(--verde-borda);}

.cal-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-cab{margin-bottom:6px;}
.cal-cab div{text-align:center;font-size:10px;font-weight:800;letter-spacing:.02em;
  color:var(--cinza-c);text-transform:uppercase;}
.cal-vazio{aspect-ratio:1;}

.cal-dia{
  position:relative;aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  border:1px solid transparent;border-radius:12px;background:var(--verde-tint2);
  cursor:pointer;font-family:inherit;padding:0;
}
.cal-dia:hover{border-color:var(--verde-borda);}
.cd-n{font-size:13px;font-weight:700;color:var(--tinta-2);font-variant-numeric:tabular-nums;line-height:1;}
.cd-p{width:5px;height:5px;border-radius:50%;background:transparent;}
.cd-h{position:absolute;bottom:3px;font-size:8.5px;font-weight:800;color:var(--cinza-c);
  letter-spacing:-.02em;line-height:1;}

/* os quatro estados do dia */
.cal-dia.feito{background:var(--verde-tint);border-color:var(--verde-borda);}
.cal-dia.feito .cd-n{color:var(--verde-esc);font-weight:800;}
.cal-dia.feito .cd-p{background:var(--verde-esc);}
.cal-dia.previsto .cd-p{background:var(--cinza-c);}
.cal-dia.perdido{opacity:.55;}
.cal-dia.perdido .cd-p{background:var(--vermelho);}
.cal-dia.descanso{background:transparent;}
/* antes do cadastro: o dia existe no mês, mas não é dela */
.cal-dia.antes{background:transparent;opacity:.3;cursor:default;}
.cal-dia.antes .cd-n{color:var(--cinza-c);font-weight:600;}
.cal-dia.antes:hover{border-color:transparent;}
.cal-dia.descanso .cd-n{color:var(--cinza-c);font-weight:600;}

/* HOJE: o círculo verde. Fica por cima de qualquer estado. */
.cal-dia.hoje{border-radius:50%;background:var(--verde);border-color:transparent;}
.cal-dia.hoje .cd-n{color:#fff;font-weight:800;}
.cal-dia.hoje .cd-p{background:rgba(255,255,255,.8);}
.cal-dia.hoje .cd-h{color:rgba(255,255,255,.85);}
.cal-dia.hoje.perdido{opacity:1;}
/* hoje sendo descanso, o ponto sumiria de qualquer jeito: sem ele o
   círculo não promete um treino que não existe */
.cal-dia.hoje.descanso .cd-p,
.cal-dia.hoje.antes .cd-p{background:transparent;}

.cal-legenda{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--linha);}
.cl{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--cinza);}
.cl::before{content:'';width:6px;height:6px;border-radius:50%;}
.cl.feito::before{background:var(--verde-esc);}
.cl.previsto::before{background:var(--cinza-c);}
.cl.perdido::before{background:var(--vermelho);}
.cl.descanso::before{background:transparent;border:1px solid var(--cinza-c);}

/* a lista de exercícios dentro do modal do dia */
.dia-ex{margin:4px 0 16px;display:flex;flex-direction:column;gap:7px;}
.dia-ex > div{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--tinta-2);}
.dia-ex span{flex-shrink:0;min-width:42px;text-align:center;background:var(--verde-tint);
  color:var(--verde-esc);border-radius:7px;padding:3px 6px;font-size:11px;font-weight:800;}
.dia-ex-mais{font-size:12px;color:var(--cinza-c);font-weight:700;padding-left:52px;}

/* ===== MODO CORRIDA (produto extra) ===== */
.corrida-capa{
  background:linear-gradient(140deg,#0C6B3C 0%,#23A063 44%,#053F24 100%);
  border:none;color:#fff;text-align:center;padding:26px 20px 22px;position:relative;overflow:hidden;
}
.corrida-capa::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.07) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.28) 100%);
}
.corrida-capa > *{position:relative;z-index:1;}
.corrida-cad{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;
  border-radius:50%;background:rgba(3,12,7,.34);border:1px solid rgba(255,255,255,.28);margin-bottom:14px;}
.corrida-capa h3{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;}
.corrida-capa p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.9);font-weight:600;}
.corrida-selo{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  background:rgba(3,12,7,.58);border:1px solid rgba(255,255,255,.42);border-radius:20px;
  padding:6px 14px;font-size:11.5px;font-weight:800;color:#fff;}

.corrida-nota{font-size:12px;color:var(--cinza-c);line-height:1.6;font-weight:600;margin-top:14px;}

/* o bloco do preço */
.corrida-preco{text-align:center;}
.corrida-val{font-family:'Bricolage Grotesque',sans-serif;font-size:40px;font-weight:800;
  color:var(--verde-esc);line-height:1;letter-spacing:-.03em;}
.corrida-val small{font-size:17px;font-weight:800;letter-spacing:0;color:var(--cinza);margin-left:2px;}
.corrida-val-sub{font-size:12.5px;color:var(--cinza);font-weight:600;line-height:1.6;margin:8px 0 18px;}
.corrida-japaguei{display:block;width:100%;margin-top:12px;font-size:13px;font-weight:700;
  color:var(--cinza-c);text-decoration:underline;background:none;border:none;cursor:pointer;font-family:inherit;}
.corrida-japaguei:hover{color:var(--tinta-2);}

/* a sessão liberada */
.corrida-papel{font-size:12.5px;color:var(--cinza);font-weight:600;line-height:1.6;margin:-4px 0 14px;}
/* o botão que abre o cronômetro: é a ação principal da aba */
.corrida-iniciar{display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:16px;padding:17px 18px;}

/* o × que apaga uma corrida do histórico */
.corrida-apagar{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:none;border:none;cursor:pointer;font-family:inherit;font-size:19px;line-height:1;
  color:var(--cinza-c);opacity:.7;}
.corrida-apagar:hover{opacity:1;color:var(--vermelho);background:var(--tint-neutro);}

/* ===== CRONÔMETRO EM TELA CHEIA =====
   Sai da rolagem do app: enquanto corre, a pessoa olha de relance, com o
   celular na mão ou na braçadeira. Números grandes, nada mais. */
.corrida-tela{
  position:fixed;inset:0;z-index:70;background:var(--fundo);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px 20px calc(26px + env(safe-area-inset-bottom, 0px));text-align:center;
}
.corrida-tela.contando{justify-content:center;gap:10px;}

/* a contagem 3, 2, 1 */
.corrida-num{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.05em;
  font-size:min(46vw,230px);line-height:1;color:var(--verde-esc);
  text-shadow:0 0 70px rgba(74,222,138,.38);
  animation:corridaPulso .92s cubic-bezier(.16,.9,.3,1) both;
}
.corrida-prep{font-size:15px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--cinza);}
@keyframes corridaPulso{
  0%{transform:scale(.45);opacity:0;}
  26%{transform:scale(1.06);opacity:1;}
  56%{transform:scale(1);opacity:1;}
  100%{transform:scale(.94);opacity:.45;}
}

/* a faixinha do GPS, no alto */
.corrida-gps{
  position:absolute;top:calc(18px + env(safe-area-inset-top, 0px));left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--tint-neutro);border:1px solid var(--linha);border-radius:20px;
  padding:7px 15px;font-size:11.5px;font-weight:800;color:var(--cinza);
}
.corrida-gps::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cinza-c);}
.corrida-gps.on{color:var(--verde-esc);border-color:var(--verde-borda);}
.corrida-gps.on::before{background:var(--verde-esc);animation:corridaPisca 1.8s ease-in-out infinite;}
@keyframes corridaPisca{0%,100%{opacity:1;}50%{opacity:.25;}}

/* o cronômetro. Tabular pra largura não dançar a cada segundo */
.corrida-crono{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:min(21vw,86px);line-height:1;color:var(--tinta);
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
}
.corrida-crono-l{margin-top:8px;font-size:11.5px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cinza);}

/* km, ritmo e calorias, lado a lado */
.corrida-linhas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:400px;margin-top:34px;
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);padding:18px 10px;
}
.corrida-linhas > div{display:flex;flex-direction:column;align-items:center;gap:5px;}
.corrida-linhas > div + div{border-left:1px solid var(--linha);}
.corrida-linhas b{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:800;
  letter-spacing:-.02em;color:var(--verde-esc);font-variant-numeric:tabular-nums;}
.corrida-linhas span{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza-c);}

.corrida-acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:400px;margin-top:20px;}
.corrida-acoes .btn{margin:0;}

.corrida-aviso-tela{margin-top:18px;max-width:330px;font-size:11.5px;line-height:1.6;
  font-weight:600;color:var(--cinza-c);}

.corrida-rodape{text-align:center;font-size:11.5px;color:var(--cinza-c);line-height:1.6;
  font-weight:600;margin:22px 0 6px;}

/* ===== REAJUSTE MENSAL (virada de mês) ===== */
.tela-reajuste .login-content{padding-bottom:40px;}
.reaj-selo{display:inline-block;background:var(--verde-tint);border:1px solid var(--verde-borda);
  color:var(--verde-esc);text-transform:uppercase;letter-spacing:1px;font-size:11px;font-weight:800;
  padding:6px 14px;border-radius:20px;margin-bottom:16px;}
.reaj-card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);
  padding:18px 18px 16px;margin-bottom:12px;width:100%;}
.reaj-card.destaque{background:linear-gradient(180deg,rgba(0,215,162,.08),rgba(0,215,162,0) 70%),var(--branco);
  border-color:var(--verde-borda);}
.reaj-rot{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--cinza-c);
  font-weight:800;margin-bottom:10px;}
.reaj-linha{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.reaj-linha .de{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:700;
  color:var(--cinza-c);text-decoration:line-through;letter-spacing:-.02em;}
.reaj-linha .seta{color:var(--cinza-c);font-size:17px;font-weight:800;}
.reaj-linha .para{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;font-weight:800;
  color:var(--verde-esc);line-height:1;letter-spacing:-.03em;}
.reaj-nota{font-size:13px;color:var(--cinza);line-height:1.6;font-weight:600;margin-top:10px;}
.reaj-nota.bom{color:var(--verde-esc);font-weight:700;}
.reaj-fases{display:flex;gap:7px;margin-top:14px;}
.reaj-fases span{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:800;background:var(--verde-tint2,rgba(0,215,162,.10));
  color:var(--cinza-c);border:1px solid var(--linha);}
.reaj-fases span.on{background:var(--verde-esc);color:#04150C;border-color:transparent;}
.reaj-carga{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--linha);}
.reaj-carga:last-of-type{border-bottom:none;}
.reaj-carga .ex{font-size:13.5px;font-weight:700;color:var(--tinta-2);flex:1;min-width:0;}
.reaj-carga .v{font-size:13px;color:var(--cinza);font-weight:700;flex-shrink:0;}
.reaj-carga .v .alvo{color:var(--verde-esc);}

/* ===== VÍDEO DE EXECUÇÃO ===== */
.video-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:12px;padding:12px;border-radius:var(--r-sm);
  background:var(--verde-tint);border:1px solid var(--verde-borda);
  color:var(--verde-esc);font-size:13.5px;font-weight:800;cursor:pointer;
  transition:background .16s;}
.video-btn:hover{background:rgba(0,215,162,.18);}
/* 16:9 sem depender de aspect-ratio dentro de iframe */
.video-caixa{position:relative;width:100%;padding-top:56.25%;border-radius:var(--r-sm);
  overflow:hidden;background:#000;}
.video-caixa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.video-quadro{width:100%;border-radius:var(--r-sm);display:block;background:#000;}

/* ===== SINO E CENTRAL DE NOTIFICAÇÕES ===== */
/* ocupa o lugar que era do avatar no cabeçalho da tela inicial, então
   tem o mesmo tamanho dele pra o cabeçalho não mudar de altura */
.sino-btn{position:relative;width:44px;height:44px;flex-shrink:0;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--branco);
  border:1px solid var(--linha);color:var(--cinza-c);cursor:pointer;transition:color .16s,border-color .16s;}
.sino-btn:hover{color:var(--verde-esc);border-color:var(--verde-borda);}
.sino-bolha{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;
  border-radius:20px;background:var(--verde-esc);color:#04150C;font-size:11px;font-weight:900;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--fundo);}

.notif{display:flex;gap:13px;align-items:flex-start;background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--r);padding:16px;margin-bottom:10px;position:relative;}
.notif.lida{opacity:.55;}
.notif-ic{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--verde-tint);color:var(--verde-esc);}
.notif.oferta{border-color:var(--verde-borda);
  background:linear-gradient(180deg,rgba(0,215,162,.07),rgba(0,215,162,0) 70%),var(--branco);}
.notif.oferta .notif-ic{background:var(--verde-esc);color:#04150C;}
.notif-txt{flex:1;min-width:0;}
.notif-t{font-size:15px;font-weight:800;color:var(--tinta);line-height:1.35;}
.notif-s{font-size:13px;color:var(--cinza);line-height:1.6;font-weight:600;margin-top:5px;}
.notif-acao{margin-top:11px;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:800;color:var(--verde-esc);}
.notif-ponto{position:absolute;top:16px;right:16px;width:8px;height:8px;border-radius:50%;
  background:var(--verde-esc);}

/* ===== REAJUSTE TRANCADO ===== */
.reaj-card.trancado{position:relative;border-color:var(--verde-borda);}
.reaj-cad{position:absolute;top:16px;right:16px;color:var(--cinza-c);}
.reaj-item{display:flex;gap:11px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--linha);font-size:13.5px;color:var(--cinza);
  line-height:1.6;font-weight:600;}
.reaj-item:last-child{border-bottom:none;}
.reaj-item svg{flex-shrink:0;margin-top:2px;color:var(--verde-esc);}
.reaj-item b{color:var(--tinta);}
.reaj-card.preco{text-align:center;}
.reaj-val{font-family:'Bricolage Grotesque',sans-serif;font-size:40px;font-weight:800;
  color:var(--verde-esc);line-height:1;letter-spacing:-.03em;}
.reaj-val span{font-size:17px;font-weight:700;color:var(--cinza);letter-spacing:0;}
.reaj-val-sub{font-size:12.5px;color:var(--cinza);font-weight:600;line-height:1.6;margin:10px 0 18px;}
.reaj-depois{display:block;width:100%;margin-top:16px;background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--cinza-c);text-decoration:underline;}
.reaj-depois:hover{color:var(--tinta-2);}

/* ---------- reajuste: escolha entre anual e mensal ---------- */
.reaj-planos{display:flex;flex-direction:column;gap:10px;}
.reaj-plano{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;
  padding:15px 14px;border-radius:var(--r-sm);cursor:pointer;font-family:inherit;
  background:var(--verde-tint2);border:1.5px solid var(--linha);transition:border-color .16s;}
.reaj-plano:hover{border-color:var(--verde-borda);}
.reaj-plano.destaque{border-color:var(--verde-logo);background:var(--verde-tint);}
.reaj-plano .v{font-family:'Bricolage Grotesque',sans-serif;font-size:27px;font-weight:800;
  color:var(--tinta);line-height:1;letter-spacing:-.03em;}
.reaj-plano .v small{font-size:14px;font-weight:700;color:var(--cinza);letter-spacing:0;}
.reaj-plano.destaque .v{color:var(--verde-logo);}
.reaj-plano .s{font-size:12px;color:var(--cinza);font-weight:600;}
.reaj-plano .selo{background:var(--verde-logo);color:#04150C;font-size:10.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:20px;margin-bottom:4px;}

/* ---------- botão da biblioteca no cabeçalho ----------
   Era um ícone de livro sem rótulo, que ninguém associava a nada. Virou
   o nome escrito, numa pílula ao lado do título. */
.bib-link{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  max-width:64%;padding:9px 13px;border-radius:999px;cursor:pointer;font-family:inherit;
  background:var(--branco);border:1px solid var(--verde-borda);color:var(--verde-esc);
  font-size:11.5px;font-weight:800;line-height:1.25;text-align:center;
  transition:border-color .16s,background .16s;}
.bib-link:hover{border-color:var(--verde-esc);background:var(--verde-tint);}
.bib-link:active{transform:scale(.97);}
/* em tela estreita o nome inteiro mais o cadeado não cabem numa linha
   ao lado do título; encolhe um pouco em vez de quebrar em duas */
@media (max-width:374px){
  .bib-link{font-size:10.5px;padding:8px 10px;max-width:68%;}
}

/* a camada de venda da biblioteca (mesmo formato da de boas-vindas) */
.bib-razoes{display:flex;flex-direction:column;gap:11px;margin:4px 0 18px;text-align:left;}
.bib-razoes > div{display:flex;gap:10px;align-items:flex-start;font-size:13px;
  line-height:1.55;color:var(--tinta-2);font-weight:500;}
.bib-razoes span{flex-shrink:0;color:var(--verde-esc);display:flex;margin-top:1px;}
.bib-razoes b{color:var(--tinta);font-weight:800;}
.bib-preco{font-family:'Bricolage Grotesque',sans-serif;font-size:34px;font-weight:800;
  color:var(--verde-esc);line-height:1;letter-spacing:-.03em;margin-bottom:16px;}
.bib-preco span{display:block;font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;
  color:var(--cinza);letter-spacing:0;margin-top:6px;}
.bib-depois{display:block;width:100%;margin-top:14px;background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--cinza-c);text-decoration:underline;}
.bib-depois:hover{color:var(--tinta-2);}