/* ═══════════════════════════════════════════════════════════════════════
   Corpo — folha de estilo

   Dois temas completos (escuro e claro), mobile-first, e uma camada de
   vidro sobre o fundo vivo. Toda cor sai de variável: trocar o tema é
   trocar o bloco de tokens, nada mais.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Tokens: tema escuro (padrão) ─────────────────────────────────── */
:root {
  --fundo:        #070d18;
  --fundo-alto:   #0d1626;
  --vidro:        rgba(19, 30, 51, .72);
  --vidro-borda:  rgba(146, 180, 226, .14);
  --vidro-alto:   rgba(30, 45, 72, .8);
  --texto:        #eaf1fb;
  --texto-medio:  #a9bcd6;
  --texto-fraco:  #6d84a3;
  --trilho:       rgba(146, 180, 226, .16);

  --agua:  #38bdf8;
  --kcal:  #fb923c;
  --prot:  #f472b6;
  --carb:  #fbbf24;
  --gord:  #4ade80;
  --pers:  #a78bfa;
  --perigo:#f87171;
  --ok:    #34d399;

  --sombra-1: 0 1px 2px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.28);
  --sombra-2: 0 8px 30px rgba(0,0,0,.45);
  --raio:     18px;
  --raio-p:   12px;
  --borrao:   blur(14px) saturate(140%);

  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  --seguro-cima:  env(safe-area-inset-top, 0px);
  --altura-abas:  66px;
}

/* ─── Tokens: tema claro ───────────────────────────────────────────── */
[data-tema="claro"] {
  --fundo:        #eef4fb;
  --fundo-alto:   #ffffff;
  --vidro:        rgba(255, 255, 255, .82);
  --vidro-borda:  rgba(24, 62, 110, .12);
  --vidro-alto:   rgba(255, 255, 255, .95);
  --texto:        #0f2338;
  --texto-medio:  #47617e;
  --texto-fraco:  #7d94ae;
  --trilho:       rgba(24, 62, 110, .11);

  --agua:  #0284c7;
  --kcal:  #ea580c;
  --prot:  #db2777;
  --carb:  #d97706;
  --gord:  #16a34a;
  --pers:  #7c3aed;
  --perigo:#dc2626;
  --ok:    #059669;

  --sombra-1: 0 1px 2px rgba(24,62,110,.06), 0 6px 18px rgba(24,62,110,.09);
  --sombra-2: 0 12px 34px rgba(24,62,110,.16);
}

/* ─── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* O atributo `hidden` vale mais que qualquer `display` de classe.
 *
 * Sem esta regra, `.festa { display: flex }` vence o `display: none` que o
 * navegador aplica ao `hidden` — e o overlay de celebração fica invisível
 * MAS cobrindo a tela inteira, engolindo todo clique do app. A bancada de
 * navegador pegou exatamente isso: o botão de água parou de responder
 * depois da primeira comemoração. Vale para `.folha`, `#chip-sequencia`
 * e `#limpar-busca` pela mesma razão. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
  padding-bottom: calc(var(--altura-abas) + var(--seguro-baixo));
  transition: background-color .4s ease, color .4s ease;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.015em; }
p { margin: 0; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--agua);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─── Fundo vivo ───────────────────────────────────────────────────── */
#fundo {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
  display: block;
  pointer-events: none;
}

#brilho {
  position: fixed; inset: -20%;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(38% 30% at 18% 12%, color-mix(in srgb, var(--agua) 40%, transparent), transparent 70%),
    radial-gradient(34% 28% at 84% 26%, color-mix(in srgb, var(--pers) 32%, transparent), transparent 70%),
    radial-gradient(40% 34% at 62% 86%, color-mix(in srgb, var(--gord) 26%, transparent), transparent 70%);
  filter: blur(50px);
  animation: deriva 26s ease-in-out infinite alternate;
}
[data-tema="claro"] #brilho { opacity: .38; }

@keyframes deriva {
  0%   { transform: translate3d(0,0,0)      scale(1); }
  50%  { transform: translate3d(2%,-2%,0)   scale(1.06); }
  100% { transform: translate3d(-2%,2.5%,0) scale(1.03); }
}

/* ─── Topo ─────────────────────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(10px + var(--seguro-cima)) 16px 10px;
  background: color-mix(in srgb, var(--fundo) 78%, transparent);
  backdrop-filter: var(--borrao);
  -webkit-backdrop-filter: var(--borrao);
  border-bottom: 1px solid var(--vidro-borda);
}

.marca { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.06rem; letter-spacing: -.02em; }
.marca-icone { font-size: 1.24rem; }

.topo-acoes { display: flex; align-items: center; gap: 8px; }

.chip-sequencia {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kcal) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--kcal) 34%, transparent);
  color: var(--kcal);
  font-size: .82rem; font-weight: 700;
  white-space: nowrap;
}

/* ─── Conteúdo e telas ─────────────────────────────────────────────── */
#conteudo { max-width: 620px; margin: 0 auto; padding: 14px 14px 26px; }

.tela { display: none; animation: entra .32s cubic-bezier(.22,.85,.3,1); }
.tela.ativa { display: block; }

@keyframes entra {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Cartões ──────────────────────────────────────────────────────── */
.cartao {
  background: var(--vidro);
  backdrop-filter: var(--borrao);
  -webkit-backdrop-filter: var(--borrao);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  padding: 16px;
  margin-bottom: 13px;
}

.cartao-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.cartao-cabeca h2 { font-size: 1rem; display: flex; align-items: center; gap: 7px; }
.cartao-valor { font-size: .92rem; font-weight: 700; color: var(--texto-medio); white-space: nowrap; }

.detalhe { color: var(--texto-medio); font-size: .87rem; line-height: 1.45; }
.detalhe.destaque { color: var(--texto); font-weight: 600; }
.rodape-nota { color: var(--texto-fraco); font-size: .78rem; line-height: 1.5; margin-top: 12px; }
.nota-alerta { display: block; margin-top: 8px; color: var(--perigo); font-weight: 600; font-size: .84rem; }

/* ─── Botões ───────────────────────────────────────────────────────── */
.botao {
  appearance: none;
  font: inherit; font-size: .89rem; font-weight: 600;
  color: var(--texto);
  background: var(--vidro-alto);
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  padding: 10px 15px;
  min-height: 42px;
  cursor: pointer;
  transition: transform .12s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.botao:hover { border-color: color-mix(in srgb, var(--agua) 45%, transparent); }
.botao:active { transform: scale(.96); }

.botao-primario {
  background: linear-gradient(135deg, var(--agua), color-mix(in srgb, var(--agua) 62%, var(--pers)));
  border-color: transparent;
  color: #04111f;
}
[data-tema="claro"] .botao-primario { color: #fff; }
.botao-primario:hover { filter: brightness(1.07); }

.botao-fantasma { background: transparent; color: var(--texto-medio); }
.botao-perigo { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 40%, transparent); background: transparent; }
.botao-pequeno { padding: 7px 13px; min-height: 36px; font-size: .83rem; }
.botao-bloco { display: block; width: 100%; margin-top: 12px; }

.botao-icone {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  font: inherit; font-size: 1.14rem; line-height: 1;
  color: var(--texto);
  background: var(--vidro-alto);
  border: 1px solid var(--vidro-borda);
  border-radius: 50%;
  cursor: pointer;
  transition: transform .12s ease, background-color .18s ease;
  -webkit-tap-highlight-color: transparent;
  flex: none;
}
.botao-icone:active { transform: scale(.92); }

/* ─── Alternador (segmentado) ──────────────────────────────────────── */
.alternador {
  display: inline-flex;
  padding: 3px;
  background: var(--trilho);
  border-radius: 999px;
  gap: 2px;
}
.alternador-largo { display: flex; width: 100%; margin-bottom: 12px; }
.alternador-largo .alt-op { flex: 1; }

.alt-op {
  appearance: none;
  font: inherit; font-size: .83rem; font-weight: 650;
  color: var(--texto-medio);
  background: transparent;
  border: 0; border-radius: 999px;
  padding: 8px 14px;
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.alt-op.ativo {
  background: var(--vidro-alto);
  color: var(--texto);
  box-shadow: var(--sombra-1);
}

/* ─── Barra de data ────────────────────────────────────────────────── */
/* No celular a data ocupa a linha inteira e o Dia|Semana desce para a
 * própria linha. Dividir a linha faz a pílula da data quebrar em duas
 * alturas ("hoje · sáb, 8 / ago") e o cabeçalho fica torto. */
.barra-data {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 13px; flex-wrap: wrap;
}
.rotulo-data {
  appearance: none;
  flex: 1; min-width: 0;
  font: inherit; font-weight: 700; font-size: .96rem;
  color: var(--texto);
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 42px;
  cursor: pointer;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}
.barra-data .alternador { flex: 1 0 100%; }
.barra-data .alternador .alt-op { flex: 1; }

@media (min-width: 620px) {
  .barra-data .alternador { flex: none; }
  .barra-data .alternador .alt-op { flex: none; }
}

/* ─── Água e garrafas ──────────────────────────────────────────────── */
.cartao-agua { position: relative; overflow: hidden; }
.cartao-agua::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--agua), transparent);
  opacity: .5;
}

.garrafas {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 4px 0 12px;
  min-height: 48px;
  align-items: flex-end;
}

.garrafa {
  --enche: 0;
  position: relative;
  width: 27px; height: 48px;
  background: var(--trilho);
  clip-path: polygon(38% 0, 62% 0, 62% 13%, 79% 25%, 83% 34%, 83% 93%, 74% 100%, 26% 100%, 17% 93%, 17% 34%, 21% 25%, 38% 13%);
  flex: none;
  transition: filter .3s ease;
}
.garrafa::after {
  content: ""; position: absolute; inset: 0; top: auto;
  height: calc(var(--enche) * 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--agua) 85%, #fff), var(--agua));
  transition: height .5s cubic-bezier(.3,.9,.35,1);
}
.garrafa.cheia { filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--agua) 45%, transparent)); }
.garrafa.excedente::after { background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 85%, #fff), var(--ok)); }

/* ─── Plano de goles ───────────────────────────────────────────────── */
.plano-goles {
  margin: 12px 0 14px;
  padding: 12px;
  background: color-mix(in srgb, var(--agua) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--agua) 26%, transparent);
  border-radius: var(--raio-p);
}
.plano-cabeca { margin-bottom: 10px; }

/* A linha do tempo dos copos que faltam. Rola sozinha quando são muitos —
   4 L viram 11 copos, e a alternativa seria quebrar em três fileiras. */
.plano-linha {
  display: flex; gap: 7px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.plano-linha::-webkit-scrollbar { display: none; }

.gole {
  flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 62px;
  padding: 8px 6px;
  border-radius: 10px;
  background: var(--vidro-alto);
  border: 1px solid transparent;
  font-size: .68rem; color: var(--texto-fraco);
  text-align: center;
}
.gole strong { font-size: .84rem; font-weight: 700; color: var(--texto); }
.gole.proximo {
  border-color: var(--agua);
  background: color-mix(in srgb, var(--agua) 16%, transparent);
}
.gole.proximo strong { color: var(--agua); }
.gole.grande { border-color: color-mix(in srgb, var(--perigo) 45%, transparent); }
.gole.grande strong { color: var(--perigo); }

.acoes-rapidas { display: flex; flex-wrap: wrap; gap: 8px; }
.acoes-espalhadas { justify-content: space-between; }

/* As ações da água em grade de 2 colunas: em fila livre elas caem em três
 * fileiras irregulares no celular estreito. */
.cartao-agua .acoes-rapidas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cartao-agua .acoes-rapidas .botao { width: 100%; padding-inline: 10px; }
@media (min-width: 520px) {
  .cartao-agua .acoes-rapidas { display: flex; }
  .cartao-agua .acoes-rapidas .botao { width: auto; padding-inline: 15px; }
}

/* ─── Anel de calorias ─────────────────────────────────────────────── */
.macros-grade {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 16px;
  align-items: center;
}

.anel-caixa { position: relative; width: 128px; height: 128px; }
.anel { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel-trilho { fill: none; stroke: var(--trilho); stroke-width: 11; }
.anel-arco {
  fill: none;
  stroke: var(--kcal);
  stroke-width: 11;
  stroke-linecap: round;
  transition: stroke-dashoffset .7s cubic-bezier(.3,.9,.35,1), stroke .4s ease;
}
.anel-arco.batida { stroke: var(--ok); }

.anel-centro {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; pointer-events: none;
}
.anel-centro strong { font-size: 1.62rem; font-weight: 720; letter-spacing: -.03em; line-height: 1; }
.anel-sub { font-size: .74rem; color: var(--texto-medio); }

/* ─── Barras de progresso ──────────────────────────────────────────── */
.barras { display: flex; flex-direction: column; gap: 11px; }

.barra-linha { display: block; }
.barra-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 5px;
  font-size: .82rem;
}
.barra-nome { color: var(--texto-medio); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.barra-num { font-weight: 700; white-space: nowrap; }
.barra-num small { color: var(--texto-fraco); font-weight: 600; }

.barra-trilho {
  height: 8px;
  background: var(--trilho);
  border-radius: 999px;
  overflow: hidden;
}
.barra-preenche {
  height: 100%;
  border-radius: 999px;
  background: var(--cor, var(--agua));
  width: 0;
  transition: width .7s cubic-bezier(.3,.9,.35,1), background-color .4s ease;
}
.barra-preenche.batida { background: var(--ok); }
.barra-preenche.excedeu { background: repeating-linear-gradient(45deg, var(--perigo), var(--perigo) 6px, color-mix(in srgb, var(--perigo) 60%, #000) 6px, color-mix(in srgb, var(--perigo) 60%, #000) 12px); }

/* ─── Refeições ────────────────────────────────────────────────────── */
.refeicoes { display: flex; flex-direction: column; gap: 14px; }

.grupo-refeicao { }
.grupo-cabeca {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid var(--vidro-borda);
  font-size: .84rem; font-weight: 700; color: var(--texto-medio);
}
.grupo-total { color: var(--texto-fraco); font-weight: 600; }

.item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
}
.item-info { flex: 1; min-width: 0; }
.item-nome {
  font-size: .9rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-sub { font-size: .76rem; color: var(--texto-fraco); }
.item-kcal { font-size: .86rem; font-weight: 700; white-space: nowrap; color: var(--kcal); }
.item-apagar {
  appearance: none; background: transparent; border: 0;
  color: var(--texto-fraco); font-size: 1.1rem; line-height: 1;
  width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; flex: none;
  -webkit-tap-highlight-color: transparent;
}
.item-apagar:hover { color: var(--perigo); background: color-mix(in srgb, var(--perigo) 12%, transparent); }

.vazio {
  text-align: center; padding: 26px 12px;
  color: var(--texto-fraco); font-size: .87rem; line-height: 1.6;
}
.vazio-icone { display: block; font-size: 2rem; margin-bottom: 8px; opacity: .75; }

/* ─── Semana ───────────────────────────────────────────────────────── */
.grade-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dia-semana {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 2px;
  border-radius: var(--raio-p);
  background: var(--trilho);
  font-size: .68rem; color: var(--texto-medio);
  text-align: center;
}
.dia-semana.hoje { outline: 2px solid var(--agua); outline-offset: -2px; }
.dia-semana.futuro { opacity: .42; }
.dia-copo {
  width: 100%; height: 34px;
  border-radius: 6px;
  background: var(--vidro-alto);
  position: relative; overflow: hidden;
}
.dia-copo::after {
  content: ""; position: absolute; inset: auto 0 0 0;
  height: calc(var(--enche, 0) * 100%);
  background: var(--agua);
  transition: height .6s cubic-bezier(.3,.9,.35,1);
}
.dia-copo.batido::after { background: var(--ok); }
.dia-nome { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   TREINO
   ═══════════════════════════════════════════════════════════════════ */

.cartao-sessao { position: relative; overflow: hidden; }
.cartao-sessao::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--pers), transparent);
  opacity: .55;
}

.chip-sessao {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pers) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--pers) 36%, transparent);
  color: var(--pers);
  font-size: .8rem; font-weight: 700;
  white-space: nowrap;
}
.chip-sessao.feito {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  color: var(--ok);
}
.chip-sessao.descanso {
  background: var(--trilho); border-color: transparent; color: var(--texto-fraco);
}

.sessao-nome { font-size: 1.16rem; letter-spacing: -.02em; margin-bottom: 4px; }

/* Ficha de exercícios */
.exercicios { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }

.exercicio {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  background: var(--trilho);
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  transition: background-color .25s ease, border-color .25s ease, opacity .25s ease;
}
.exercicio.riscado { opacity: .58; border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.exercicio.riscado .ex-nome { text-decoration: line-through; }

.ex-marcar {
  appearance: none;
  width: 30px; height: 30px;
  border: 2px solid var(--texto-fraco);
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: .95rem; line-height: 1; color: transparent;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
  flex: none;
}
.ex-marcar[aria-pressed="true"] {
  border-color: var(--ok); background: var(--ok); color: #05130d;
}

.ex-info { min-width: 0; }
.ex-nome { font-size: .9rem; font-weight: 600; line-height: 1.25; }
.ex-sub { font-size: .74rem; color: var(--texto-fraco); margin-top: 2px; }
.ex-sub .subiu { color: var(--ok); font-weight: 700; }
.ex-sub .caiu { color: var(--texto-medio); }

.ex-carga { position: relative; display: flex; align-items: center; flex: none; }
.ex-carga input {
  width: 74px;
  font: inherit; font-size: 16px; font-weight: 700; text-align: right;
  color: var(--texto);
  background: var(--fundo-alto);
  border: 1px solid var(--vidro-borda);
  border-radius: 10px;
  padding: 8px 26px 8px 8px;
  min-height: 40px;
  -webkit-appearance: none; appearance: none;
}
.ex-carga input::-webkit-outer-spin-button,
.ex-carga input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ex-carga em {
  position: absolute; right: 8px;
  font-style: normal; font-size: .72rem; color: var(--texto-fraco); pointer-events: none;
}

/* Calendário do mês */
.calendario-cabeca {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
  margin-bottom: 6px;
  font-size: .66rem; font-weight: 700; color: var(--texto-fraco); text-align: center;
}
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }

.cal-dia {
  appearance: none;
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font: inherit; font-size: .78rem; font-weight: 650;
  color: var(--texto-medio);
  background: var(--trilho);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background-color .25s ease;
  min-height: 38px;
}
.cal-dia:active { transform: scale(.93); }
.cal-dia.vazia { background: transparent; cursor: default; pointer-events: none; }
.cal-dia .cal-marca { font-size: .58rem; font-weight: 800; letter-spacing: .02em; line-height: 1; }

.cal-dia.feito {
  background: color-mix(in srgb, var(--ok) 22%, transparent);
  color: var(--ok);
}
.cal-dia.previsto {
  background: color-mix(in srgb, var(--pers) 16%, transparent);
  color: var(--pers);
}
.cal-dia.perdido {
  background: color-mix(in srgb, var(--perigo) 14%, transparent);
  color: var(--perigo);
}
.cal-dia.hoje { outline: 2px solid var(--agua); outline-offset: -2px; color: var(--texto); }
.cal-dia.futuro { opacity: .55; }

.legenda {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 12px;
  font-size: .72rem; color: var(--texto-fraco);
}
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.pt { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.pt-feito { background: var(--ok); }
.pt-previsto { background: var(--pers); }
.pt-perdido { background: var(--perigo); }
.pt-descanso { background: var(--trilho); }

/* Escolha da divisão (na folha) */
.divisoes { display: flex; flex-direction: column; gap: 8px; }
.divisao {
  appearance: none; text-align: left;
  display: block; width: 100%;
  font: inherit; color: var(--texto);
  background: var(--trilho);
  border: 2px solid transparent;
  border-radius: var(--raio-p);
  padding: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.divisao.escolhida { border-color: var(--pers); background: color-mix(in srgb, var(--pers) 12%, transparent); }
.divisao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.divisao-nome { font-size: .96rem; font-weight: 700; }
.divisao-meta { font-size: .7rem; color: var(--texto-fraco); white-space: nowrap; }
.divisao-desc { font-size: .8rem; color: var(--texto-medio); line-height: 1.45; }

.cartao-treino-resumo { border-left: 3px solid var(--pers); }

/* ─── Fagulha do peso ──────────────────────────────────────────────── */
.faisca { width: 100%; height: 64px; margin: 4px 0 10px; }
.faisca svg { width: 100%; height: 100%; display: block; overflow: visible; }
.faisca-linha { fill: none; stroke: var(--gord); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.faisca-area { fill: color-mix(in srgb, var(--gord) 16%, transparent); stroke: none; }
.faisca-ponta { fill: var(--gord); stroke: var(--fundo-alto); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ─── Cronômetro de descanso ───────────────────────────────────────── */
.cronometro {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 18px 0 6px;
  padding: 18px;
  background: var(--trilho);
  border: 2px solid transparent;
  border-radius: var(--raio);
  transition: border-color .3s ease, background-color .3s ease;
}
.cronometro.correndo { border-color: var(--pers); background: color-mix(in srgb, var(--pers) 10%, transparent); }
.cronometro.acabou   { border-color: var(--ok);   background: color-mix(in srgb, var(--ok) 14%, transparent); }

.cronometro-numero {
  font-size: 2.8rem; font-weight: 750; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cronometro.correndo .cronometro-numero { color: var(--pers); }
.cronometro.acabou .cronometro-numero { color: var(--ok); }
.cronometro-legenda { font-size: .76rem; color: var(--texto-fraco); }

/* ─── Barras do histórico de carga ─────────────────────────────────── */
.carga-barras {
  display: flex; align-items: flex-end; gap: 5px;
  height: 108px;
  margin: 12px 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.carga-barras::-webkit-scrollbar { display: none; }

.carga-col {
  flex: 1 0 22px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  height: 100%;
  font-size: .62rem; color: var(--texto-fraco);
}
.carga-haste {
  width: 100%;
  min-height: 6px;
  border-radius: 4px 4px 2px 2px;
  background: color-mix(in srgb, var(--pers) 45%, transparent);
  margin-top: auto;
  transition: height .5s cubic-bezier(.3,.9,.35,1);
}
.carga-haste.atual { background: var(--pers); }

/* ─── Busca e resultados ───────────────────────────────────────────── */
.busca-caixa { position: relative; margin-bottom: 12px; }
#busca {
  width: 100%;
  font: inherit; font-size: 16px;   /* 16px trava o zoom automático do iOS */
  color: var(--texto);
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  padding: 13px 44px 13px 17px;
  -webkit-appearance: none;
}
#busca::placeholder { color: var(--texto-fraco); }
#busca::-webkit-search-cancel-button { display: none; }
.limpar { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; }

.resultados { display: flex; flex-direction: column; gap: 7px; }

.resultado {
  appearance: none; text-align: left;
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  font: inherit;
  color: var(--texto);
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-p);
  padding: 11px 13px;
  cursor: pointer;
  transition: transform .12s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.resultado:active { transform: scale(.985); }
.resultado:hover { border-color: color-mix(in srgb, var(--agua) 45%, transparent); }

/* Alimento próprio ganha o "×" ao lado, fora do botão — botão dentro de
 * botão não é HTML válido e o clique não se separa direito. */
.resultado-linha { display: flex; align-items: center; gap: 6px; }
.resultado-linha .resultado { flex: 1; min-width: 0; }

.resultado-info { flex: 1; min-width: 0; }
.resultado-nome { font-size: .91rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultado-sub { font-size: .76rem; color: var(--texto-fraco); margin-top: 2px; }
.resultado-kcal { font-size: .82rem; font-weight: 700; color: var(--kcal); white-space: nowrap; }
.marca-meu {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pers);
  background: color-mix(in srgb, var(--pers) 16%, transparent);
  padding: 2px 6px; border-radius: 5px; margin-left: 6px;
}

/* ─── Formulários ──────────────────────────────────────────────────── */
.campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }

.campo { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; color: var(--texto-medio); font-weight: 600; }
.campo-largo { grid-column: 1 / -1; }
.campo-linha { flex-direction: row; align-items: center; justify-content: space-between; }

.campo-entrada { position: relative; display: flex; align-items: center; }
.campo-entrada em {
  position: absolute; right: 13px;
  font-style: normal; font-size: .78rem; color: var(--texto-fraco); pointer-events: none;
}

.campo input[type="number"],
.campo input[type="text"],
.campo input[type="time"],
.campo select,
.folha-corpo input,
.folha-corpo select {
  width: 100%;
  font: inherit; font-size: 16px; font-weight: 600;
  color: var(--texto);
  background: var(--fundo-alto);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-p);
  padding: 11px 13px;
  -webkit-appearance: none; appearance: none;
  min-height: 44px;
}
.campo select, .folha-corpo select {
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.campo input[type="number"] { padding-right: 46px; }
.campo input::-webkit-outer-spin-button,
.campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo input[type="number"] { -moz-appearance: textfield; }

/* Interruptor */
.interruptor { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.interruptor-trilho {
  width: 48px; height: 28px;
  background: var(--trilho);
  border-radius: 999px;
  position: relative;
  transition: background-color .25s ease;
}
.interruptor-trilho::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: var(--texto-medio);
  border-radius: 50%;
  transition: transform .25s cubic-bezier(.3,.9,.35,1), background-color .25s ease;
}
.interruptor input:checked + .interruptor-trilho { background: color-mix(in srgb, var(--agua) 45%, transparent); }
.interruptor input:checked + .interruptor-trilho::after { transform: translateX(20px); background: var(--agua); }
.interruptor input:focus-visible + .interruptor-trilho { outline: 2px solid var(--agua); outline-offset: 2px; }

/* Fichas (presets) */
.fichas { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.ficha {
  appearance: none;
  font: inherit; font-size: .82rem; font-weight: 650;
  color: var(--texto-medio);
  background: var(--trilho);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 13px; min-height: 36px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ficha.ativa { color: var(--agua); border-color: var(--agua); background: color-mix(in srgb, var(--agua) 13%, transparent); }

.lista-simples { display: flex; flex-direction: column; gap: 8px; }
.linha-simples {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--trilho);
  border-radius: var(--raio-p);
  font-size: .88rem;
}
.linha-simples .item-info { flex: 1; min-width: 0; }

/* ─── Abas ─────────────────────────────────────────────────────────── */
.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  padding: 6px 6px calc(6px + var(--seguro-baixo));
  background: color-mix(in srgb, var(--fundo) 84%, transparent);
  backdrop-filter: var(--borrao);
  -webkit-backdrop-filter: var(--borrao);
  border-top: 1px solid var(--vidro-borda);
}

.aba {
  appearance: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: inherit; font-size: .64rem; font-weight: 650;
  color: var(--texto-fraco);
  background: transparent; border: 0; border-radius: 14px;
  padding: 7px 2px; min-height: 52px;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.aba-icone { font-size: 1.14rem; line-height: 1; transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.aba-nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aba.ativa { color: var(--agua); background: color-mix(in srgb, var(--agua) 11%, transparent); }
.aba.ativa .aba-icone { transform: translateY(-2px) scale(1.12); }

/* ─── Folha deslizante ─────────────────────────────────────────────── */
.folha-fundo {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(2, 8, 18, .58);
  backdrop-filter: blur(3px);
  animation: aparece .25s ease;
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

.folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--fundo-alto);
  border-top: 1px solid var(--vidro-borda);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--sombra-2);
  animation: sobe .34s cubic-bezier(.22,.9,.3,1);
  padding-bottom: var(--seguro-baixo);
}
@keyframes sobe { from { transform: translateY(100%); } to { transform: none; } }

.folha-punho {
  width: 38px; height: 4px; border-radius: 999px;
  background: var(--trilho);
  margin: 9px auto 2px;
  flex: none;
}
.folha-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 16px 4px;
  flex: none;
}
.folha-cabeca h2 { font-size: 1.04rem; }
.folha-corpo { padding: 12px 16px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.previa {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 14px 0;
  padding: 13px;
  background: var(--trilho);
  border-radius: var(--raio-p);
  text-align: center;
}
.previa div { display: flex; flex-direction: column; gap: 2px; }
.previa strong { font-size: 1.06rem; font-weight: 720; letter-spacing: -.02em; }
.previa span { font-size: .68rem; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .04em; }
.previa .p-kcal strong { color: var(--kcal); }
.previa .p-prot strong { color: var(--prot); }
.previa .p-carb strong { color: var(--carb); }
.previa .p-gord strong { color: var(--gord); }

/* ─── Conquistas ───────────────────────────────────────────────────── */
.cartao-sequencia { text-align: center; }
.sequencia-grande { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 8px; }
.sequencia-icone { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 3px 14px color-mix(in srgb, var(--kcal) 55%, transparent)); }
.sequencia-grande strong { font-size: 3rem; font-weight: 760; letter-spacing: -.045em; line-height: 1; }

.placares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; }
.placar {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 6px;
  background: var(--trilho);
  border-radius: var(--raio-p);
}
.placar strong { font-size: 1.28rem; font-weight: 720; letter-spacing: -.02em; }
.placar span { font-size: .68rem; color: var(--texto-fraco); line-height: 1.3; }

.grade-conquistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
.conquista {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 7px;
  background: var(--trilho);
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  text-align: center;
}
.conquista.ganha {
  background: color-mix(in srgb, var(--pers) 12%, transparent);
  border-color: color-mix(in srgb, var(--pers) 34%, transparent);
}
.conquista-emoji { font-size: 1.7rem; line-height: 1; filter: grayscale(1); opacity: .34; transition: filter .4s ease, opacity .4s ease; }
.conquista.ganha .conquista-emoji { filter: none; opacity: 1; }
.conquista-nome { font-size: .74rem; font-weight: 700; line-height: 1.25; }
.conquista-desc { font-size: .65rem; color: var(--texto-fraco); line-height: 1.3; }

/* ─── Celebração ───────────────────────────────────────────────────── */
.festa {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(2, 8, 18, .62);
  backdrop-filter: blur(4px);
  animation: aparece .3s ease;
}
#festa-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.festa-cartao {
  position: relative;
  max-width: 340px; width: 100%;
  padding: 30px 24px 24px;
  background: var(--fundo-alto);
  border: 1px solid var(--vidro-borda);
  border-radius: 24px;
  box-shadow: var(--sombra-2);
  text-align: center;
  animation: pula .5s cubic-bezier(.2,1.5,.4,1);
}
@keyframes pula {
  from { transform: scale(.82); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.festa-emoji { font-size: 3.6rem; line-height: 1; margin-bottom: 10px; animation: gingado 1.5s ease-in-out infinite; }
@keyframes gingado {
  0%, 100% { transform: rotate(-7deg) scale(1); }
  50%      { transform: rotate(7deg) scale(1.09); }
}
.festa-cartao h2 { font-size: 1.4rem; margin-bottom: 7px; }
.festa-cartao p { color: var(--texto-medio); font-size: .92rem; line-height: 1.5; margin-bottom: 18px; }
.festa-cartao .botao { width: 100%; }

/* ─── Avisos (toasts) ──────────────────────────────────────────────── */
.avisos {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--altura-abas) + var(--seguro-baixo) + 12px);
  z-index: 45;
  display: flex; flex-direction: column; gap: 7px;
  pointer-events: none;
}
.aviso {
  margin: 0 auto; max-width: 420px; width: fit-content;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px;
  background: var(--fundo-alto);
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  box-shadow: var(--sombra-2);
  font-size: .87rem; font-weight: 600;
  animation: sobe-aviso .3s cubic-bezier(.22,.9,.3,1);
  pointer-events: auto;
}
.aviso.saindo { animation: some-aviso .3s ease forwards; }
.aviso.bom { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.aviso.ruim { border-color: color-mix(in srgb, var(--perigo) 45%, transparent); }
@keyframes sobe-aviso { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes some-aviso { to { opacity: 0; transform: translateY(10px); } }

/* ═══════════════════════════════════════════════════════════════════
   Telas maiores — a navegação vira coluna lateral e o Hoje abre em 2
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  body { padding-bottom: 0; padding-left: 220px; }

  .topo { padding-left: 234px; }

  .abas {
    top: 0; right: auto; bottom: 0;
    width: 220px;
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 5px;
    padding: 84px 14px 14px;
    border-top: 0;
    border-right: 1px solid var(--vidro-borda);
  }
  .aba {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    font-size: .93rem;
    padding: 12px 15px; min-height: 48px;
  }
  .aba-icone { font-size: 1.22rem; }
  .aba.ativa .aba-icone { transform: scale(1.1); }

  #conteudo { max-width: 900px; padding: 20px 24px 40px; }

  #tela-hoje {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
    align-items: start;
  }
  #tela-hoje.ativa { display: grid; }
  #tela-hoje .barra-data { grid-column: 1 / -1; }
  #tela-hoje > section:last-child { grid-column: 1 / -1; }

  .campos { grid-template-columns: repeat(3, 1fr); }

  .folha {
    left: 50%; bottom: auto; top: 50%; right: auto;
    transform: translate(-50%, -50%);
    width: min(520px, 92vw);
    max-height: 86dvh;
    border-radius: 22px;
    border: 1px solid var(--vidro-borda);
    animation: pula .34s cubic-bezier(.22,1.2,.35,1);
  }
  .folha-punho { display: none; }

  .avisos { bottom: 22px; left: 240px; }
}

@media (min-width: 1180px) {
  #conteudo { max-width: 1020px; }
}

/* Telas bem estreitas (iPhone SE e afins) */
@media (max-width: 359px) {
  #conteudo { padding: 12px 10px 22px; }
  .cartao { padding: 13px; }
  .macros-grade { grid-template-columns: 106px 1fr; gap: 12px; }
  .anel-caixa { width: 106px; height: 106px; }
  .anel-centro strong { font-size: 1.38rem; }
  .garrafa { width: 23px; height: 41px; }
  .campos { grid-template-columns: 1fr; }
  .aba-nome { font-size: .58rem; }
  .abas { padding-inline: 3px; }
  .aba { padding-inline: 0; }
  .exercicio { grid-template-columns: 30px 1fr auto; gap: 7px; padding: 9px 8px; }
  .ex-carga input { width: 64px; }
  .calendario, .calendario-cabeca { gap: 3px; }
}

/* ─── Quem pediu menos movimento, recebe menos movimento ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #brilho { animation: none; }
}

/* ─── Relatório ────────────────────────────────────────────────────── */
.rel-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}
.rel-bloco {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px;
  background: var(--trilho);
  border-radius: var(--raio-p);
}
.rel-bloco strong { font-size: 1.24rem; font-weight: 730; letter-spacing: -.025em; line-height: 1.1; }
.rel-bloco span { font-size: .68rem; color: var(--texto-fraco); line-height: 1.3; }

.rel-linha {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--vidro-borda);
  font-size: .85rem;
}
.rel-linha:last-child { border-bottom: 0; }
.rel-nome { flex: 1; color: var(--texto-medio); font-weight: 600; }
.rel-valor { font-weight: 700; white-space: nowrap; }

.rel-delta {
  min-width: 62px; text-align: right;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
/* A cor segue o TIPO do alvo, não a direção da seta: subir calorias não é
   vitória, e subir água não é problema. */
.rel-delta.bom { color: var(--ok); }
.rel-delta.atencao { color: var(--kcal); }
.rel-delta.igual { color: var(--texto-fraco); }

/* ═══════════════════════════════════════════════════════════════════
   PRIMEIRA ABERTURA
   ═══════════════════════════════════════════════════════════════════ */
.apresentacao {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, var(--fundo) 92%, transparent);
  backdrop-filter: blur(6px);
  animation: aparece .3s ease;
}
@media (min-width: 620px) { .apresentacao { align-items: center; } }

.apr-caixa {
  width: 100%; max-width: 520px;
  max-height: 94dvh;
  display: flex; flex-direction: column;
  background: var(--fundo-alto);
  border: 1px solid var(--vidro-borda);
  border-radius: 26px 26px 0 0;
  box-shadow: var(--sombra-2);
  padding-bottom: var(--seguro-baixo);
  animation: sobe .4s cubic-bezier(.22,.9,.3,1);
}
@media (min-width: 620px) {
  .apr-caixa { border-radius: 24px; animation: pula .38s cubic-bezier(.22,1.2,.35,1); }
}

.apr-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px 6px;
  flex: none;
}
.apr-pontos { display: flex; gap: 6px; }
.apr-ponto {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--trilho);
  transition: background-color .3s ease, width .3s ease;
}
.apr-ponto.feito { background: color-mix(in srgb, var(--agua) 55%, transparent); }
.apr-ponto.agora { background: var(--agua); width: 20px; }

.apr-corpo {
  padding: 8px 20px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.apr-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: 10px; }
.apr-corpo h2 { font-size: 1.42rem; letter-spacing: -.03em; margin-bottom: 8px; }
.apr-corpo > .detalhe { margin-bottom: 16px; }
#apr-campos > .campos { margin-bottom: 10px; }

.apr-pe {
  display: flex; gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--vidro-borda);
  flex: none;
}
.apr-pe .botao { flex: 1; }


/* --- Pistas visiveis -------------------------------------------------
   Recurso cuja unica pista e o `title` e recurso que ninguem encontra:
   no celular o title NUNCA aparece. Cada acao escondida atras de um
   toque ganhou um icone proprio. */
.item-acao, .ex-acao {
  appearance: none; background: transparent; border: 0;
  color: var(--texto-fraco);
  font-size: 1rem; line-height: 1;
  width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; flex: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background-color .2s ease;
}
.item-acao:hover, .ex-acao:hover {
  color: var(--agua);
  background: color-mix(in srgb, var(--agua) 12%, transparent);
}
.exercicio { grid-template-columns: 34px 1fr auto auto; }
@media (max-width: 359px) { .exercicio { grid-template-columns: 30px 1fr auto auto; } }

.ficha.apagando {
  border-color: var(--perigo);
  color: var(--perigo);
  background: color-mix(in srgb, var(--perigo) 12%, transparent);
}


/* --- Ajuda em contexto -----------------------------------------------
   O circulo visivel tem 21 px, mas o BOTAO tem 34: dedo nao acerta alvo
   de 20 px. Foi a propria bancada que pegou isto — eu tinha acabado de
   por os "?" para o app ficar mais facil, e os fiz pequenos demais para
   tocar. Circulo pequeno por fora, area de toque grande por dentro. */
.ajuda {
  appearance: none;
  width: 34px; height: 34px;
  margin-left: 0;
  padding: 0; border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
  -webkit-tap-highlight-color: transparent;
}
.ajuda > span {
  display: grid; place-items: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 1px solid var(--vidro-borda);
  background: var(--trilho);
  color: var(--texto-fraco);
  font-size: .72rem; font-weight: 700; line-height: 1;
  transition: color .2s ease, border-color .2s ease;
}
.ajuda:hover > span { color: var(--agua); border-color: var(--agua); }
.ajuda:focus-visible { outline: 2px solid var(--agua); outline-offset: 0; border-radius: 50%; }

.ajuda-bloco {
  padding: 12px 0;
  border-bottom: 1px solid var(--vidro-borda);
}
.ajuda-bloco:last-of-type { border-bottom: 0; }
.ajuda-titulo { font-size: .92rem; font-weight: 700; margin-bottom: 4px; }
.ajuda-texto { font-size: .86rem; color: var(--texto-medio); line-height: 1.5; }


/* --- Secoes que abrem e fecham (tela Metas) --------------------------
   44 controles empilhados numa rolagem so nao e uma tela: e uma gaveta.
   Recolhidas, viram um indice do que existe. */
#tela-metas [data-recolhivel] .cartao-cabeca {
  margin-bottom: 12px;
  -webkit-tap-highlight-color: transparent;
}
#tela-metas [data-recolhivel].recolhida .cartao-cabeca { margin-bottom: 0; }
#tela-metas [data-recolhivel].recolhida { padding-bottom: 14px; }

.recolher-seta {
  margin-left: auto;
  padding-left: 8px;
  color: var(--texto-fraco);
  font-size: .8rem;
  transition: transform .25s ease;
  display: inline-block;
}
[data-recolhivel].recolhida .recolher-seta { transform: rotate(-90deg); }

#tela-metas [data-recolhivel] .cartao-cabeca h2 {
  flex: 1;
  display: flex; align-items: center; gap: 7px;
}