/* ============================================================
   Componentes — as peças que se repetem entre telas.
   Todo valor de cor vem de tokens.css. Nenhum literal aqui.
   ============================================================ */

/* ---------- cartões ---------- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: var(--r-m);
  padding: 19px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cartao.acento {
  background: linear-gradient(150deg, color-mix(in srgb, var(--acao-a) 12%, transparent), var(--superficie));
  border-color: color-mix(in srgb, var(--acao-a) 28%, transparent);
}
/* Bloqueio nunca usa vermelho de alarme: impedir alguém não é puni-la. */
.cartao.limite {
  background: color-mix(in srgb, var(--limite) 11%, transparent);
  border-color: color-mix(in srgb, var(--limite) 32%, transparent);
}
.cartao.reciclagem {
  background: color-mix(in srgb, var(--reciclagem) 10%, transparent);
  border-color: color-mix(in srgb, var(--reciclagem) 28%, transparent);
}

/* Sem fundo nem recuo no estado normal: o rótulo do cartão é uma legenda
   de arquivo — mono, maiúscula, cinza — alinhada com o conteúdo. A pílula
   colorida fica para os estados que precisam gritar (ativo, limite…), e
   são eles que devolvem o padding. */
.marca-rotulo {
  align-self: flex-start;
  font-family: var(--fonte-m);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-3);
  border-radius: var(--r-full);
}
.cartao.acento .marca-rotulo { color: var(--acao-a); background: color-mix(in srgb, var(--acao-a) 16%, transparent); padding: 5px 12px }
.cartao.limite .marca-rotulo { color: var(--limite); background: color-mix(in srgb, var(--limite) 16%, transparent); padding: 5px 12px }
.cartao.reciclagem .marca-rotulo { color: var(--reciclagem); background: color-mix(in srgb, var(--reciclagem) 16%, transparent); padding: 5px 12px }

/* ---------- botões ----------
   O botão nomeia o que a pessoa faz. Nunca "Enviar" ou "Confirmar". */
.botao {
  display: block;
  width: 100%;
  text-align: center;
  border: 0;
  border-radius: var(--r-full);
  font-family: var(--fonte-c);
  font-size: 16px;
  font-weight: 700;
  padding: 17px;
  cursor: pointer;
  transition: transform .12s ease, opacity .2s;
}
.botao:active { transform: scale(.985) }
.botao:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 3px }
.botao[disabled] { opacity: .45; cursor: default }

.botao.primario {
  background: linear-gradient(135deg, var(--acao-a), var(--acao-b));
  color: var(--acao-tinta);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--acao-a) 30%, transparent);
}
.botao.secundario {
  background: var(--superficie-2);
  color: var(--texto);
  border: 1px solid var(--contorno);
}
.botao.discreto {
  background: transparent;
  color: var(--texto-3);
  font-weight: 600;
  font-size: 14px;
  padding: 12px;
}
/* Quem clica aqui pediu ajuda. Nada de linguagem de fracasso. */
.botao.socorro {
  background: color-mix(in srgb, var(--limite) 13%, transparent);
  color: var(--limite);
  border: 1px solid color-mix(in srgb, var(--limite) 42%, transparent);
  font-size: 16.5px;
  padding: 19px;
}

/* ---------- card "O que a ciência mostra" ----------
   Estrutural, não decorativo. Card sem fonte não existe neste app. */
.ciencia {
  border-radius: var(--r-m); padding: 20px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--acao-a) 13%, transparent), var(--superficie));
  border: 1px solid color-mix(in srgb, var(--acao-a) 26%, transparent);
}
.ciencia .etiqueta {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acao-a);
}
.ciencia .numero {
  font-family: var(--fonte-d); font-size: 40px; font-weight: 700;
  letter-spacing: -.04em; margin-top: 11px; font-variant-numeric: tabular-nums;
}
.ciencia .frase { font-size: 14.5px; color: var(--texto-2); margin-top: 4px }
.ciencia .fonte {
  font-family: var(--fonte-m); font-size: 10.5px; color: var(--texto-3);
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.09);
}
.nivel {
  display: inline-block; font-family: var(--fonte-m); font-size: 10px;
  font-weight: 500; letter-spacing: .1em; padding: 3px 9px;
  border-radius: var(--r-full); margin-left: 8px; vertical-align: middle;
}
.nivel.a { background: color-mix(in srgb, var(--acao-a) 18%, transparent); color: var(--acao-a) }
.nivel.b { background: color-mix(in srgb, var(--f-reservas) 18%, transparent); color: var(--f-reservas) }
.nivel.c { background: color-mix(in srgb, var(--limite) 18%, transparent); color: var(--limite) }

/* ---------- grade de números ---------- */
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.mini {
  background: var(--superficie); border: 1px solid var(--contorno);
  border-radius: var(--r-m); padding: 17px;
}
.mini .rotulo {
  font-family: var(--fonte-m); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-3); font-weight: 500;
}
.mini .valor {
  font-family: var(--fonte-d); font-size: 28px; font-weight: 600;
  margin-top: 7px; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.mini .legenda { font-size: 12px; color: var(--texto-3); margin-top: 3px }

/* ---------- corpo aceso ---------- */
/* As pílulas de sistema viviam aqui e nunca foram usadas: a tela dos 16
   sistemas só existiu de verdade depois, em telas.css, com estado e
   intensidade próprios. */

/* ---------- faixa do dia ---------- */
.faixa { position: relative; height: 44px; border-radius: var(--r-full); background: rgba(255,255,255,.06); overflow: hidden }
.faixa .janela {
  position: absolute; top: 0; bottom: 0; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--f-reservas), color-mix(in srgb, var(--f-reservas) 60%, #fff));
  box-shadow: 0 0 26px color-mix(in srgb, var(--f-reservas) 55%, transparent);
}
.faixa .agora { position: absolute; top: 6px; bottom: 6px; width: 3px; border-radius: var(--r-full); background: #fff; box-shadow: 0 0 0 4px var(--base) }
.faixa-horas { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--fonte-m); font-size: 10px; color: var(--texto-3) }

/* ---------- ofensiva ----------
   Conta dias de adesão, nunca duração. Sem ranking, sem recorde. */
.ofensiva { display: flex; align-items: center; gap: 15px }
.ofensiva .chama {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--fonte-d); font-weight: 700; font-size: 20px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--acao-a), var(--acao-b));
  color: var(--acao-tinta);
  box-shadow: 0 0 24px color-mix(in srgb, var(--acao-a) 38%, transparent);
}
.ofensiva.protegida .chama { background: var(--superficie-2); color: var(--texto-3); box-shadow: none }
.semana { display: flex; gap: 5px; margin-top: 10px }
.semana span {
  flex: 1; height: 6px; border-radius: var(--r-full);
  background: rgba(255,255,255,.12);
}
.semana span.cumprido { background: var(--acao-a) }
.semana span.pausa { background: color-mix(in srgb, var(--reciclagem) 60%, transparent) }

/* ---------- campos ---------- */
.campo { display: flex; flex-direction: column; gap: 7px }
.campo label { font-size: 13px; font-weight: 600; color: var(--texto-2) }
.campo input, .campo textarea, .campo select {
  font-family: var(--fonte-c); font-size: 16px; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--contorno);
  border-radius: var(--r-p); padding: 14px 16px; width: 100%;
}
.campo textarea { min-height: 130px; resize: vertical; line-height: 1.6 }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--acao-a); outline-offset: 1px }
.campo .ajuda { font-size: 12px; color: var(--texto-3) }

.escolhas { display: flex; flex-direction: column; gap: 9px }
.escolha {
  display: flex; gap: 13px; align-items: flex-start; text-align: left;
  background: var(--superficie); border: 1px solid var(--contorno);
  border-radius: var(--r-m); padding: 16px; cursor: pointer;
  font-family: var(--fonte-c); color: var(--texto); width: 100%;
}
.escolha[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--acao-a) 50%, transparent);
  background: color-mix(in srgb, var(--acao-a) 10%, transparent);
}
.escolha:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 2px }
.escolha .titulo { font-family: var(--fonte-d); font-weight: 600; font-size: 15px }
.escolha .desc { font-size: 13px; color: var(--texto-3); margin-top: 3px }

/* ---------- os cards grandes de protocolo (nome chamativo + benefício) ---------- */
.protocolo-grande { flex-direction: column; padding: 0; cursor: default; overflow: hidden }
.protocolo-clicavel {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  width: 100%; background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  padding: 16px; gap: 2px;
}
.protocolo-clicavel:focus-visible { outline: 2px solid var(--acao-a); outline-offset: -2px }
.protocolo-clicavel .titulo { font-size: 17px }
.protocolo-numero { font-size: 12.5px; color: var(--texto-3) }
.protocolo-gancho { font-size: 14.5px; line-height: 1.55; color: var(--texto); margin-top: 8px }
.protocolo-detalhe { border-top: 1px solid var(--contorno); padding: 10px 16px 14px }
.protocolo-detalhe summary {
  font-family: var(--fonte-m); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-3); cursor: pointer;
}
.protocolo-detalhe .desc.evidencia { margin-top: 8px }

/* Variante de .escolha que empilha em coluna, sem o wrapper extra do
   onboarding — usada onde o cartão inteiro é um único botão. */
.protocolo-info-vertical { flex-direction: column; align-items: flex-start }
.protocolo-info-vertical .titulo { font-size: 17px }

/* ---------- chips de filtro ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px }
.chip {
  font-family: var(--fonte-c); font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--r-full);
  background: var(--superficie); color: var(--texto-3);
  border: 1px solid var(--contorno); cursor: pointer; transition: .2s;
}
.chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--acao-a) 16%, transparent);
  color: var(--acao-a);
  border-color: color-mix(in srgb, var(--acao-a) 44%, transparent);
}
.chip:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 2px }

/* ---------- listas expansíveis (receita, chá, estudo) ---------- */
.receita, .cha {
  background: var(--superficie); border: 1px solid var(--contorno);
  border-radius: var(--r-m); overflow: hidden;
}
.receita + .receita, .cha + .cha { margin-top: 9px }
.receita summary, .cha summary {
  padding: 16px 18px; cursor: pointer; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
}
.receita summary::-webkit-details-marker, .cha summary::-webkit-details-marker { display: none }
.receita summary:focus-visible, .cha summary:focus-visible { outline: 2px solid var(--acao-a); outline-offset: -2px }
.receita-topo, .cha summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.receita-nome, .cha-nome { font-family: var(--fonte-d); font-weight: 600; font-size: 15px; letter-spacing: -.01em }
.receita-tempo, .cha-sensacao {
  font-family: var(--fonte-m); font-size: 10.5px; color: var(--texto-3);
  white-space: nowrap; flex-shrink: 0;
}
.receita-macro { font-family: var(--fonte-m); font-size: 11px; color: var(--texto-3) }
.receita-corpo, .cha-corpo {
  padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--contorno);
}
.ingredientes, .modo { padding-left: 20px; display: flex; flex-direction: column; gap: 5px }
.ingredientes li, .modo li { font-size: 14px; color: var(--texto-2); line-height: 1.5 }
.modo li { padding-left: 4px }
.preparo { font-size: 14px; color: var(--texto-2); line-height: 1.55 }
.fontes { padding-left: 20px; display: flex; flex-direction: column; gap: 6px }
.fontes li { font-family: var(--fonte-m); font-size: 12px }
.grupo-titulo { margin-top: 10px; color: var(--texto-2) }
.conclusao { color: var(--acao-a); font-size: 14.5px; font-weight: 500 }
.linha-titulo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap }
.evidencia { font-style: italic }

/* ---------- respiração ---------- */
.respiracao { align-items: stretch }
.bolha-palco {
  position: relative; height: 210px; display: grid; place-items: center;
  cursor: pointer; user-select: none;
}
.bolha {
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
    color-mix(in srgb, var(--acao-a) 55%, transparent),
    color-mix(in srgb, var(--acao-b) 30%, transparent));
  box-shadow: 0 0 46px color-mix(in srgb, var(--acao-a) 32%, transparent);
  transform: scale(.8);
  transition: transform 4s cubic-bezier(.4,0,.5,1);
}
.bolha-rotulo {
  position: absolute; font-family: var(--fonte-d); font-weight: 500;
  font-size: 17px; color: var(--texto); letter-spacing: -.01em; pointer-events: none;
}

/* ---------- áudio ---------- */
.faixa-audio {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 0; border-bottom: 1px solid var(--contorno);
}
.faixa-audio:last-child { border-bottom: 0 }
.faixa-nome { font-family: var(--fonte-d); font-weight: 600; font-size: 14.5px }
.faixa-audio audio { width: 100%; height: 34px }

/* ---------- gráfico do painel ---------- */
.grafico {
  display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: 6px;
}
.coluna { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100% }
.coluna .barra {
  width: 100%; border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--acao-a), color-mix(in srgb, var(--acao-b) 70%, transparent));
  margin-top: auto;
}
.valor-barra { font-family: var(--fonte-m); font-size: 9.5px; color: var(--texto-3) }
.rotulo-barra { font-family: var(--fonte-m); font-size: 9px; color: var(--texto-3) }

.regua { margin-top: 6px }
.regua-trilho { height: 9px; border-radius: var(--r-full); background: rgba(255,255,255,.1); overflow: hidden }
.regua-preenchida {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--acao-a), var(--acao-b));
}
.regua-legenda {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-family: var(--fonte-m); font-size: 10.5px; color: var(--texto-3);
}
.fonte-estudo {
  font-family: var(--fonte-m); font-size: 10.5px; color: var(--texto-3);
  padding-top: 11px; border-top: 1px solid var(--contorno);
}

/* ---------- escada de indicação ---------- */
.degrau {
  display: flex; gap: 15px; align-items: center;
  background: var(--superficie); border: 1px solid var(--contorno);
  border-radius: var(--r-m); padding: 16px;
}
.degrau + .degrau { margin-top: 10px }
.degrau .bolha {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--fonte-d); font-weight: 700; font-size: 17px;
  background: rgba(255,255,255,.07); color: var(--texto-3);
  box-shadow: none; transform: none; transition: none;
}
.degrau.aberto { border-color: color-mix(in srgb, var(--acao-a) 40%, transparent) }
.degrau.aberto .bolha {
  background: linear-gradient(135deg, var(--acao-a), var(--acao-b));
  color: var(--acao-tinta);
  box-shadow: 0 0 20px color-mix(in srgb, var(--acao-a) 38%, transparent);
}
.degrau-texto h4 { font-size: 15px }
.degrau-texto p { font-size: 13px; margin-top: 2px }
.liberado { color: var(--acao-a); font-weight: 600 }

.contato {
  display: flex; align-items: center; gap: 12px;
  background: var(--superficie); border: 1px solid var(--contorno);
  border-radius: var(--r-m); padding: 13px 15px;
}
.contato + .contato { margin-top: 8px }
.contato-info { flex: 1; min-width: 0 }
.contato-nome { font-weight: 600; font-size: 14.5px }
.contato .botao { width: auto; padding: 10px 16px; font-size: 13px; margin: 0 }
.contato.enviado { opacity: .6 }
.remover {
  background: transparent; border: 0; color: var(--texto-3);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px;
}

/* ---------- chave liga/desliga ---------- */
.chave { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; padding: 8px 0 }
.chave input { position: absolute; opacity: 0; width: 0; height: 0 }
.chave-trilho {
  width: 48px; height: 28px; border-radius: var(--r-full); flex-shrink: 0;
  background: rgba(255,255,255,.14); position: relative; transition: background .25s;
}
.chave-bola {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--texto-3); transition: transform .25s, background .25s;
}
.chave input:checked ~ .chave-trilho { background: color-mix(in srgb, var(--acao-a) 55%, transparent) }
.chave input:checked ~ .chave-trilho .chave-bola { transform: translateX(20px); background: var(--acao-tinta) }
.chave input:focus-visible ~ .chave-trilho { outline: 2px solid var(--acao-a); outline-offset: 3px }

.como-botao { display: block; text-align: center; cursor: pointer; margin-top: 11px }
.como-botao.erro { color: var(--limite); border-color: color-mix(in srgb, var(--limite) 40%, transparent) }

/* Os segundos do anel: presentes para provar que o tempo anda, apagados
   para não disputar com a hora, que é o número que importa. */


/* ---------- barra de topo ----------
   Toda tela que não é raiz tem seta de voltar. A falta disso era o que mais
   fazia a pessoa se sentir presa dentro do app. */
.barra-topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  background: color-mix(in srgb, var(--base) 88%, transparent);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--contorno);
}
.barra-topo .voltar {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--texto);
  cursor: pointer;
  transition: background .2s;
}
.barra-topo .voltar:active { background: var(--superficie-2) }
.barra-topo .voltar:focus-visible { outline: 2px solid var(--acao-a); outline-offset: -2px }
.barra-meio {
  display: flex; flex-direction: column; align-items: center;
  min-width: 0; text-align: center;
}
.barra-sobre {
  font-family: var(--fonte-m); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texto-3); line-height: 1.4;
}
.barra-titulo {
  font-family: var(--fonte-d); font-weight: 600; font-size: 15.5px;
  letter-spacing: -.01em; color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.barra-acao { min-width: 44px; display: flex; justify-content: flex-end }
.acao-topo {
  border: 0; background: transparent; color: var(--acao-a);
  font-family: var(--fonte-c); font-size: 13.5px; font-weight: 700;
  padding: 10px 6px; cursor: pointer; white-space: nowrap;
}
.acao-topo:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 2px; border-radius: 8px }

/* Com a barra fixa no topo, a tela abaixo não precisa do respiro dela. */
.barra-topo + .tela { padding-top: 18px }

/* ---------- vitrine da indicação ----------
   Ninguém age por recompensa que não sabe que existe. O prêmio vem grande
   e antes de qualquer explicação. */
.vitrine { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px }
.vitrine-topo { display: flex; align-items: baseline; gap: 10px }
.vitrine-conta {
  font-family: var(--fonte-d); font-weight: 600; font-size: 46px;
  letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--acao-a), var(--acao-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vitrine-rot { font-size: 14px; color: var(--texto-2); line-height: 1.3 }

.premios { display: flex; flex-direction: column; gap: 11px }
.premio {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 62px 1fr; gap: 15px;
  padding: 18px; border-radius: var(--r-m);
  background: var(--superficie); border: 1px solid var(--contorno);
}
.premio.aberto {
  background: linear-gradient(150deg, color-mix(in srgb, var(--acao-a) 14%, transparent), var(--superficie));
  border-color: color-mix(in srgb, var(--acao-a) 40%, transparent);
}
.premio-selo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; border-radius: var(--r-p); padding: 10px 4px;
  background: rgba(255,255,255,.06);
}
.premio.aberto .premio-selo {
  background: linear-gradient(135deg, var(--acao-a), var(--acao-b));
  box-shadow: 0 0 22px color-mix(in srgb, var(--acao-a) 34%, transparent);
}
.premio-n {
  font-family: var(--fonte-d); font-weight: 700; font-size: 22px;
  letter-spacing: -.03em; color: var(--texto-3); font-variant-numeric: tabular-nums;
}
.premio.aberto .premio-n { color: var(--acao-tinta) }
.premio-l {
  font-family: var(--fonte-m); font-size: 8px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-3);
}
.premio.aberto .premio-l { color: color-mix(in srgb, var(--acao-tinta) 72%, transparent) }

.premio-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.premio-icone { font-size: 21px; line-height: 1; margin-bottom: 2px }
.premio-corpo h3 { font-size: 15.5px; line-height: 1.3 }
.premio-corpo p { font-size: 13px; color: var(--texto-3); line-height: 1.45 }
.premio-estado {
  font-family: var(--fonte-m); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-3); margin-top: 5px;
}
.premio-estado.aberto { color: var(--acao-a) }
.premio-barra {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255,255,255,.07);
}
.premio-barra i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--acao-a), var(--acao-b));
  transition: width .6s ease;
}

/* ---------- a faixa de ofensiva ----------
   A primeira coisa da tela. O fogo cresce com os dias: é o mesmo elemento
   em quatro intensidades, não quatro figurinhas diferentes. */
.ofensiva-faixa {
  --fogo-base: #FF8A5B;
  --fogo-topo: #FFC24A;
  --fogo-nucleo: #FFF0C4;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-m);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--fogo-base) 14%, transparent),
    var(--superficie));
  border: 1px solid color-mix(in srgb, var(--fogo-base) 26%, transparent);
}
.ofensiva-faixa.apagada {
  --fogo-base: rgba(255,255,255,.16);
  --fogo-topo: rgba(255,255,255,.22);
  --fogo-nucleo: rgba(255,255,255,.3);
  background: var(--superficie);
  border-color: var(--contorno);
}
.ofensiva-faixa.alta { --fogo-base: #FF6B3D; --fogo-topo: #FFD166 }
.ofensiva-faixa.lendaria { --fogo-base: #FF4E2E; --fogo-topo: #FFE08A; --fogo-nucleo: #FFFFFF }

.chama-bloco { position: relative; width: 46px; height: 54px; flex-shrink: 0; display: grid; place-items: center }
.chama-svg { width: 46px; height: 54px }
.ofensiva-faixa:not(.apagada) .chama-corpo {
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--fogo-base) 55%, transparent));
  animation: tremula 3.2s ease-in-out infinite;
  transform-origin: 50% 85%;
}
@keyframes tremula {
  0%, 100% { transform: scaleY(1) scaleX(1) }
  50%      { transform: scaleY(1.05) scaleX(.97) }
}
.chama-numero {
  position: absolute; bottom: 6px;
  font-family: var(--fonte-d); font-weight: 700; font-size: 17px;
  color: #3A1200; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.ofensiva-faixa.apagada .chama-numero { color: var(--texto-3); text-shadow: none }

.ofensiva-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.ofensiva-dias { font-family: var(--fonte-d); font-weight: 600; font-size: 16px; letter-spacing: -.018em }
.ofensiva-titulo { font-size: 12.5px; color: var(--texto-2) }
.ofensiva-barra {
  height: 4px; border-radius: var(--r-full);
  background: rgba(255,255,255,.1); margin-top: 5px; overflow: hidden;
}
.ofensiva-barra i {
  display: block; height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--fogo-base), var(--fogo-topo));
  transition: width .8s ease;
}
.ofensiva-falta { font-family: var(--fonte-m); font-size: 9.5px; color: var(--texto-3); margin-top: 3px }

/* ---------- o cartão do desafio, na tela Hoje ---------- */
.desafio-cartao-hoje {
  width: 100%; text-align: left; cursor: pointer; font-family: var(--fonte-c);
}
.desafio-cartao-hoje:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 2px }

/*
 * `color: inherit` porque isto é um BOTÃO fazendo papel de cartão.
 *
 * Todo outro cartão do app é um <section>, que herda a cor de texto clara
 * do tema. Um <button> não: sem regra de cor, ele cai no padrão do
 * navegador, que é preto — e o título "Como usar o app" ficava preto sobre
 * o fundo escuro do app, com contraste de 1,12:1. Invisível, e no meio dos
 * Ajustes, onde ninguém procura defeito.
 */
.como-usar { width: 100%; text-align: left; cursor: pointer; font-family: var(--fonte-c); color: inherit }
.como-usar:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 2px }

.medalha {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 68px; padding: 8px 4px; cursor: pointer;
  background: transparent; border: 0; font-family: var(--fonte-c);
}
.medalha:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 2px; border-radius: var(--r-p) }
/* `.medalha-simbolo` era o emoji da faixa; saiu junto com ele. */
.medalha-nome {
  font-size: 9px; color: var(--texto-3); text-align: center; line-height: 1.25;
  max-width: 68px;
  /* Duas linhas em vez de reticências: um nome cortado no meio não diz nada,
     e a medalha existe para ser reconhecida de relance. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- os sete pontos da semana ---------- */
.semana-pontos { display: flex; justify-content: space-between; gap: 5px; padding: 2px 6px }
.ponto-dia { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1 }
.ponto {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.ponto.cumprido { background: var(--acao-a); box-shadow: 0 0 8px color-mix(in srgb, var(--acao-a) 55%, transparent) }
.ponto.pausa { background: var(--reciclagem) }
.ponto.parou { background: var(--limite) }
.ponto-letra { font-family: var(--fonte-m); font-size: 8.5px; color: var(--texto-3) }

/* ---------- a próxima refeição, na tela inicial ---------- */
.proxima-refeicao {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 15px 16px; border-radius: var(--r-m); cursor: pointer;
  background: var(--superficie); border: 1px solid var(--contorno);
  font-family: var(--fonte-c); color: var(--texto); text-align: left;
}
.proxima-refeicao:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 2px }
.pr-icone {
  width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 18px; border-radius: 50%; background: var(--superficie-2);
}
.pr-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 }
.pr-rotulo {
  font-family: var(--fonte-m); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-3);
}
.pr-nome {
  font-family: var(--fonte-d); font-weight: 600; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-tempo { font-family: var(--fonte-m); font-size: 10px; color: var(--texto-3) }
.pr-seta { font-size: 22px; color: var(--texto-3); flex-shrink: 0 }

/* ---------- o card de ciência agora é tocável ---------- */
.ciencia { display: block; width: 100%; text-align: left; cursor: pointer; font-family: var(--fonte-c) }
.ciencia:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 2px }
.ciencia-nome {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 9px;
  font-family: var(--fonte-d); font-weight: 600; font-size: 19px;
  letter-spacing: -.022em; color: var(--texto);
}

/* ---------- conquistas ---------- */
/*
 * A vitrine. Duas decisões seguram o desenho inteiro:
 *
 * 1. Cada medalha tem uma DUPLA de cores (--m-a e --m-b), definida nas
 *    classes .m-<id> logo abaixo, sempre a partir dos tokens. A classe vai
 *    no cartão, então o próprio cartão ganho acende no tom da medalha —
 *    catorze cartões iguais em cinza virariam prateleira de arquivo morto.
 *
 * 2. O estado "a conquistar" NÃO é outro desenho: .medalhona.apagada só
 *    troca a dupla por cinza e apaga o brilho. A pessoa vê a peça exata
 *    que falta — cobiça precisa de objeto.
 */

/* A dupla de cores de cada medalha. Só tokens entram aqui. */
.m-primeiro               { --m-a: var(--acao-a);     --m-b: var(--acao-b) }
.m-primeira-semana        { --m-a: var(--f-digestao); --m-b: var(--f-reservas) }
.m-mes                    { --m-a: var(--acao-b);     --m-b: var(--reciclagem) }
.m-cem                    { --m-a: var(--f-cetose);   --m-b: var(--acao-a) }
.m-dez-jejuns             { --m-a: var(--acao-a);     --m-b: var(--f-cetose) }
.m-cinquenta-jejuns       { --m-a: var(--f-reservas); --m-b: var(--f-digestao) }
.m-semana-cheia           { --m-a: var(--acao-b);     --m-b: var(--f-gordura) }
.m-ouviu-o-corpo          { --m-a: var(--f-digestao); --m-b: var(--limite) }
.m-fez-a-pausa            { --m-a: var(--reciclagem); --m-b: var(--acao-b) }
.m-voltou                 { --m-a: var(--f-gordura);  --m-b: var(--acao-b) }
.m-primeira-semana-montada{ --m-a: var(--f-reservas); --m-b: var(--f-gordura) }
.m-leu-a-ciencia          { --m-a: var(--f-cetose);   --m-b: var(--acao-b) }
.m-atravessou-a-hora      { --m-a: var(--acao-b);     --m-b: var(--f-gordura) }
.m-percurso-fechado       { --m-a: var(--reciclagem); --m-b: var(--f-reservas) }

/* A peça em si. O SVG lê a dupla pelos stops e traços marcados. */
.medalhona { display: inline-grid; place-items: center; line-height: 0 }
.medalhona .g-a { stop-color: var(--m-a, var(--acao-a)) }
.medalhona .g-b { stop-color: var(--m-b, var(--acao-b)) }
.medalhona .g-luz { stop-color: var(--claro) }
.medalhona .t-luz { stroke: var(--claro) }
.medalhona .m-selo { fill: var(--base-2) }
.medalhona .m-estrela { fill: var(--claro); opacity: .9 }
.medalhona .m-traco { stroke: var(--claro) }

/* Apagada: mesmo desenho, sem cor e sem brilho. Só cor e opacidade mudam. */
.medalhona.apagada { --m-a: var(--texto-3); --m-b: var(--texto-3); opacity: .8 }
.medalhona.apagada .m-brilho { opacity: 0 }
.medalhona.apagada .m-traco { stroke: var(--texto-3) }

.conq-capa { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 0 4px }
.conq-capa h1 { font-size: 26px; letter-spacing: -.03em; margin-top: 2px }
.conq-sub { font-size: 14px; color: var(--texto-2) }
.conq-proximo { font-family: var(--fonte-m); font-size: 11px; color: var(--texto-3); margin-top: 4px }

.conq-conta { display: flex; align-items: baseline; gap: 8px; margin-top: 16px }
.conq-conta .v {
  font-family: var(--fonte-d); font-weight: 600; font-size: 30px;
  letter-spacing: -.03em; color: var(--acao-a); font-variant-numeric: tabular-nums;
}
.conq-conta .r { font-size: 13px; color: var(--texto-3) }
.conq-barra { height: 5px; border-radius: var(--r-full); background: rgba(255,255,255,.1); overflow: hidden; margin-top: 4px }
.conq-barra i {
  display: block; height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--acao-a), var(--acao-b));
}

.conq-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px }
.conq-medalha {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 18px 12px 16px; border-radius: var(--r-m);
  background: var(--superficie); border: 1px solid var(--contorno);
}
/* O cartão por ganhar fica sóbrio; quem apaga a medalha é .apagada. */
.conq-medalha:not(.ganha) { opacity: .78 }
.conq-medalha.ganha {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--m-a, var(--acao-a)) 13%, transparent), transparent 60%),
    var(--superficie);
  border-color: color-mix(in srgb, var(--m-a, var(--acao-a)) 32%, transparent);
  box-shadow: 0 14px 34px -22px color-mix(in srgb, var(--m-a, var(--acao-a)) 60%, transparent);
}
.cm-nome { font-family: var(--fonte-d); font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; margin-top: 2px }
.cm-frase { font-size: 12px; color: var(--texto-3); line-height: 1.4 }
.cm-porque { font-size: 11.5px; color: color-mix(in srgb, var(--m-a, var(--acao-a)) 82%, var(--texto)); line-height: 1.4; margin-top: 3px }

/* ---------- calendário ---------- */
.cal-capa { display: flex; align-items: baseline; gap: 10px; padding: 4px 0 }
.cal-capa h1 { font-size: 28px; letter-spacing: -.03em; text-transform: capitalize }
.cal-ano { font-family: var(--fonte-m); font-size: 14px; color: var(--texto-3) }

.calendario { display: flex; flex-direction: column; gap: 8px; margin-top: 10px }
.cal-semana, .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px }
.cal-letra {
  text-align: center; font-family: var(--fonte-m); font-size: 10px;
  color: var(--texto-3); padding-bottom: 2px;
}
.cal-vazio { aspect-ratio: 1 }
.cal-dia {
  aspect-ratio: 1; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(255,255,255,.045);
  border: 1px solid transparent;
}
.cal-numero { font-family: var(--fonte-m); font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums }
.cal-horas { font-family: var(--fonte-m); font-size: 8px; color: var(--texto-3) }
.cal-dia.futuro { opacity: .35 }
.cal-dia.hoje { border-color: var(--contorno-forte) }
.cal-dia.cumprido {
  background: color-mix(in srgb, var(--acao-a) 24%, transparent);
  border-color: color-mix(in srgb, var(--acao-a) 45%, transparent);
}
.cal-dia.cumprido .cal-numero, .cal-dia.cumprido .cal-horas { color: var(--acao-a) }
.cal-dia.pausa {
  background: color-mix(in srgb, var(--reciclagem) 22%, transparent);
  border-color: color-mix(in srgb, var(--reciclagem) 42%, transparent);
}
.cal-dia.pausa .cal-numero { color: var(--reciclagem) }
.cal-dia.parou {
  background: color-mix(in srgb, var(--limite) 20%, transparent);
  border-color: color-mix(in srgb, var(--limite) 40%, transparent);
}
.cal-dia.parou .cal-numero { color: var(--limite) }

.cal-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px }
.cal-leg-item { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--texto-3) }
.cal-leg-bola { width: 10px; height: 10px; border-radius: 4px }
.cal-leg-bola.cumprido { background: color-mix(in srgb, var(--acao-a) 60%, transparent) }
.cal-leg-bola.pausa { background: color-mix(in srgb, var(--reciclagem) 60%, transparent) }
.cal-leg-bola.parou { background: color-mix(in srgb, var(--limite) 60%, transparent) }

/* ---------- IMC ---------- */
.imc-cartao { display: flex; flex-direction: column; gap: 12px }
.imc-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.imc-valor {
  font-family: var(--fonte-d); font-weight: 600; font-size: 38px;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.imc-faixa-nome {
  font-family: var(--fonte-m); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-full);
}
.imc-faixa-nome.saudavel { color: var(--acao-a); background: color-mix(in srgb, var(--acao-a) 15%, transparent) }
.imc-faixa-nome.sobrepeso { color: var(--f-reservas); background: color-mix(in srgb, var(--f-reservas) 15%, transparent) }
.imc-faixa-nome.obesidade { color: var(--limite); background: color-mix(in srgb, var(--limite) 15%, transparent) }
.imc-faixa-nome.abaixo { color: var(--limite); background: color-mix(in srgb, var(--limite) 15%, transparent) }

/* A régua vai de 15 a 40 de IMC. As larguras (flex) são o comprimento REAL
   de cada trecho nessa escala — 3,5 · 6,5 · 5 · 5 · 5 — porque o marcador é
   posicionado por conta linear e precisa cair dentro da faixa certa. As
   larguras antigas eram soltas e o marcador mentia de faixa. */
.imc-regua { position: relative; height: 12px; display: flex; gap: 3px; margin-top: 10px }
.imc-regua span { height: 100%; border-radius: var(--r-full) }
.imc-regua .abaixo { background: color-mix(in srgb, var(--reciclagem) 55%, transparent); flex: 3.5 }
.imc-regua .saudavel { background: color-mix(in srgb, var(--acao-a) 65%, transparent); flex: 6.5 }
.imc-regua .sobrepeso { background: color-mix(in srgb, var(--f-reservas) 60%, transparent); flex: 5 }
.imc-regua .obesidade { background: color-mix(in srgb, var(--f-digestao) 55%, transparent); flex: 5 }
.imc-regua .grave { background: color-mix(in srgb, var(--limite) 60%, transparent); flex: 5 }
/* Triângulo apontando para baixo, pousado sobre a régua: uma seta lê-se
   como "você está aqui"; a barrinha antiga lia-se como divisória. */
.imc-marcador {
  position: absolute; top: -9px; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid var(--texto);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  transition: left .8s ease;
}
/* Cada limite escrito embaixo do próprio trecho — mesmos flex da régua,
   senão o "18,5–24,9" cai no meio do laranja. */
.imc-escala {
  display: flex; gap: 3px; margin-top: 5px;
  font-family: var(--fonte-m); font-size: 8.5px; color: var(--texto-3);
}
.imc-escala span { text-align: center; white-space: nowrap; min-width: 0 }
.imc-escala span:nth-child(1) { flex: 3.5 }
.imc-escala span:nth-child(2) { flex: 6.5 }
.imc-escala span:nth-child(3) { flex: 5 }
.imc-escala span:nth-child(4) { flex: 5 }
.imc-escala span:nth-child(5) { flex: 5 }
.imc-delta { font-size: 13px; color: var(--texto-2) }
.imc-delta.bom { color: var(--acao-a) }

/* ============================================================
   O cronômetro de duas camadas — versão do mockup.
   ============================================================ */

.anel-cartao {
  position: relative;
  border-radius: 34px;
  padding: 22px 18px 20px;
  overflow: hidden;
  background: linear-gradient(165deg, var(--superficie-2), var(--superficie));
  border: 1px solid var(--contorno);
  backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.anel-cartao::before {
  content: '';
  position: absolute;
  top: -46%; left: 50%;
  transform: translateX(-50%);
  width: 130%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--fase) 22%, transparent), transparent 62%);
  transition: background .8s ease;
}

/* ---------- as duas legendas ---------- */
.pilulas { position: relative; display: flex; justify-content: center; gap: 8px }
.pilula {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--r-full);
  font-family: var(--fonte-m); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: all .5s ease;
}
.pilula svg { flex-shrink: 0 }
.pilula.fase {
  background: color-mix(in srgb, var(--fase) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--fase) 46%, transparent);
  color: var(--fase);
}
.pilula.reciclagem {
  background: color-mix(in srgb, var(--reciclagem) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--reciclagem) 36%, transparent);
  color: var(--reciclagem);
}

/* ---------- o palco ---------- */
.anel {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 4px auto 0;
  aspect-ratio: 1;
}
.anel svg { width: 100%; height: 100%; overflow: visible }

.trilho-externo {
  fill: none; stroke: rgba(255,255,255,.06); stroke-width: 3;
}
.arco-externo {
  fill: none; stroke: var(--reciclagem); stroke-width: 3.4; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--reciclagem) 65%, transparent));
}
.trilho-interno {
  fill: none; stroke: rgba(255,255,255,.05); stroke-width: 13;
}
.arco-interno {
  fill: none; stroke: url(#grad-jejum); stroke-width: 13; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s linear;
}
/* A cabeça luminosa: é ela que dá a sensação de que o tempo está correndo
   agora, e não de que o desenho está parado. */
.ponta {
  fill: var(--f-digestao);
  filter: drop-shadow(0 0 12px var(--f-digestao));
  transition: cx 1s linear, cy 1s linear;
}
.pino { stroke-width: 0 }
/* Vazado, e não sólido: cheio ele vira uma segunda bolinha laranja e briga
   com a cabeça do arco, que é a que marca o agora. */
.pino.inicio {
  fill: var(--fundo);
  stroke: var(--f-digestao); stroke-width: 2.4;
}
.pino.fim { fill: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,.6)) }

/* ---------- as marcas de horário ---------- */
.anel-marca {
  position: absolute; top: 8%; z-index: 2;
  display: flex; flex-direction: column; gap: 1px;
  pointer-events: none;
}
.anel-marca.inicio { left: 0; align-items: flex-start }
.anel-marca.fim { right: 0; align-items: flex-end }
.am-rotulo {
  font-family: var(--fonte-m); font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-3);
}
.am-hora {
  font-family: var(--fonte-d); font-weight: 600; font-size: 14px;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}

/* ---------- o miolo ---------- */
.anel-centro {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; padding: 0 19%;
}
.ac-olho {
  font-family: var(--fonte-m); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--texto-3);
}
.ac-tempo {
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  font-family: var(--fonte-d); font-weight: 600;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1;
  margin-top: 4px;
}
.ac-hm { font-size: clamp(34px, 10.5vw, 42px) }
.ac-s { font-size: clamp(17px, 5.2vw, 21px); color: var(--texto-3) }
.ac-estado {
  font-family: var(--fonte-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fase); margin-top: 5px;
  line-height: 1.3; text-wrap: balance;
  transition: color .6s ease;
}
.ac-meta {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  /* 40px de altura mínima: é um alvo de toque no meio de um anel, e o dedo
     que erra aqui muda a meta do jejum sem querer ou não muda nada. */
  min-height: 40px;
  margin-top: 8px; padding: 5px 14px; border-radius: var(--r-full);
  background: var(--superficie-2); border: 1px solid var(--contorno);
  color: var(--texto-2); font-family: var(--fonte-m); font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
/* O tamanho vai no CSS e não só no atributo: regra de botão em outro
   arquivo estava esticando o ícone para o corpo inteiro do botão. */
.ac-meta svg { width: 12px; height: 12px; flex: none }
.ac-meta[disabled] { cursor: default; opacity: .8 }
.ac-meta:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 2px }
.anel-restante {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: -4px;
}
.ac-faltam {
  font-family: var(--fonte-d); font-weight: 600; font-size: 15px;
  color: var(--f-digestao); font-variant-numeric: tabular-nums;
}
.anel-cartao.cumprida .ac-faltam { color: var(--acao-a) }
.ac-pct { font-size: 11.5px; color: var(--texto-3) }

/* ---------- os dois resumos ---------- */
.anel-resumos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -6px }
.ar-bloco { display: flex; flex-direction: column; align-items: center; gap: 1px }
.ar-rotulo {
  font-family: var(--fonte-m); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase;
}
.ar-bloco.jejum .ar-rotulo { color: var(--f-digestao) }
.ar-bloco.rec .ar-rotulo { color: var(--reciclagem) }
.ar-valor {
  font-family: var(--fonte-d); font-weight: 600; font-size: 19px;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.ar-de { font-size: 11px; color: var(--texto-3) }

/* ---------- as quatro fases, com ícone e barra ---------- */
/* Cinco colunas desde que a cetose sustentada (24–36h) entrou. Cada coluna
   fica com cerca de 68px num celular, e é por isso que a fileira usa o nome
   curto da fase: "Queima de gordura" em 68px vira três linhas. */
.fases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px }
.fase-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 4px 10px; border-radius: var(--r-p);
  background: rgba(255,255,255,.03);
  color: var(--texto-3);
  transition: color .5s ease, background .5s ease;
}
.fase-item.feita { color: var(--texto-2) }
.fase-item.atual {
  color: var(--fase);
  background: color-mix(in srgb, var(--fase) 10%, transparent);
}
/* As fases viraram botões — levam ao Corpo Aceso — e não podem parecer
   botões. O reset fica aqui, junto do componente. */
button.fase-item { border: 0; font: inherit; cursor: pointer; width: 100%; text-align: center }
.fase-icone { display: grid; place-items: center; height: 26px }
.fase-item.atual .fase-icone svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--fase) 70%, transparent)) }
.fase-nome {
  font-size: 10px; font-weight: 600; line-height: 1.25; text-align: center;
  min-height: 2.5em; display: flex; align-items: center;
}
.fase-horas { font-family: var(--fonte-m); font-size: 8.5px; opacity: .8 }
.fase-barra {
  width: 100%; height: 3px; border-radius: var(--r-full);
  background: rgba(255,255,255,.09); overflow: hidden; margin-top: 3px;
}
.fase-barra i {
  display: block; height: 100%; border-radius: var(--r-full);
  background: currentColor; transition: width 1s linear;
}

/* ---------- a barra de reciclagem ---------- */
.medidor {
  padding: 14px 15px; border-radius: var(--r-m);
  background: color-mix(in srgb, var(--reciclagem) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--reciclagem) 22%, transparent);
}
.medidor-topo { display: flex; justify-content: space-between; align-items: baseline }
.medidor-topo .titulo {
  font-family: var(--fonte-m); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--reciclagem);
}
.medidor-topo .valor {
  font-family: var(--fonte-d); font-weight: 600; font-size: 14px;
  color: var(--reciclagem); font-variant-numeric: tabular-nums;
}
.medidor-barra { height: 6px; border-radius: var(--r-full); background: rgba(255,255,255,.08); margin-top: 10px; overflow: hidden }
.medidor-barra i {
  display: block; height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, color-mix(in srgb, var(--reciclagem) 40%, transparent), var(--reciclagem));
  box-shadow: 0 0 12px color-mix(in srgb, var(--reciclagem) 55%, transparent);
  transition: width 1s linear;
}
.medidor p { font-size: 11px; color: var(--texto-3); margin-top: 8px; line-height: 1.45 }

/* ---------- a saudação do topo ---------- */
.saudacao { display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 4px }
.saudacao .oi {
  font-family: var(--fonte-d); font-weight: 600; font-size: 21px;
  letter-spacing: -.025em;
}
.saudacao .sub { font-size: 13px; color: var(--texto-3) }

/* ---------- a faixa de três números ---------- */
.tres-numeros {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.tn-bloco {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 6px; border-radius: var(--r-m);
  background: var(--superficie); border: 1px solid var(--contorno);
}
.tn-icone { display: grid; place-items: center; height: 22px }
.tn-bloco.sequencia { color: var(--f-digestao) }
.tn-bloco.media { color: var(--acao-b) }
.tn-bloco.maior { color: var(--acao-a) }
.tn-rotulo {
  font-family: var(--fonte-m); font-size: 8.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--texto-3);
}
.tn-valor {
  font-family: var(--fonte-d); font-weight: 600; font-size: 17px;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--texto);
}
.tn-valor small { font-size: .62em; font-weight: 500; color: var(--texto-3) }

/* ---------- a frase do dia ---------- */
/* Uma frase por dia. Ela precisa parecer escrita à mão no meio de uma tela
   de números — por isso serifa, corpo grande e nenhum contorno de cartão. */
.frase-dia {
  position: relative;
  padding: 20px 20px 20px 26px;
  border-radius: var(--r-m);
  background: linear-gradient(120deg, color-mix(in srgb, var(--acao-a) 9%, transparent), transparent 70%);
  border-left: 2px solid color-mix(in srgb, var(--acao-a) 55%, transparent);
}
.fd-aspas {
  position: absolute; top: 2px; left: 12px;
  font-family: var(--fonte-d); font-size: 46px; line-height: 1;
  color: color-mix(in srgb, var(--acao-a) 32%, transparent);
  pointer-events: none;
}
.fd-texto {
  position: relative;
  font-family: var(--fonte-d); font-weight: 500;
  font-size: 16px; line-height: 1.45; letter-spacing: -.015em;
  color: var(--texto); text-wrap: balance;
}
.fd-eco { font-size: 12.5px; color: var(--texto-3); margin-top: 8px; line-height: 1.5 }

/* ---------- atalhos com emblema ----------
   Eram cinco linhas de texto cinza, indistinguíveis. O emblema aceso na cor
   de cada um transforma a lista em menu: dá para achar sem ler. */
.atalhos { display: flex; flex-direction: column; gap: 10px }
.atalho {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 13px 15px 13px 12px; border-radius: 22px; cursor: pointer;
  text-align: left;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--cor) 9%, transparent),
    var(--superficie) 62%);
  border: 1px solid color-mix(in srgb, var(--cor) 20%, var(--contorno));
  color: var(--texto-3);
  transition: border-color .25s ease, transform .12s ease;
}
.atalho:hover { border-color: color-mix(in srgb, var(--cor) 42%, transparent) }
.atalho:active { transform: scale(.99) }
.atalho:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px }
.atalho-selo { flex: none; display: grid; place-items: center; width: 54px; height: 54px }
.atalho-selo .emblema {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cor) 45%, transparent));
}
.atalho-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.atalho-titulo {
  font-family: var(--fonte-d); font-weight: 600; font-size: 16.5px;
  letter-spacing: -.02em; color: var(--texto); text-wrap: balance;
}
.atalho-desc { font-size: 13px; line-height: 1.4; color: var(--texto-3) }
.atalho > svg:last-child { flex: none; color: var(--cor); opacity: .85 }

/* ---------- o dia do calendário, agora tocável ----------
   O override mora junto do componente: `.cal-dia` é definido aqui, e
   redefinir em outra folha é como quatro bugs visuais já nasceram. */
button.cal-dia { font: inherit; cursor: pointer; text-align: center }
.cal-dia.editavel:hover { border-color: color-mix(in srgb, var(--acao-a) 45%, transparent) }
.cal-dia.editavel:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 2px }
/* Declarado depois: mesma cor, contorno em vez de preenchimento. Honesto
   sobre a origem do dado, e sem cara de punição. */
.cal-dia.cumprido.retroativo {
  background: color-mix(in srgb, var(--acao-a) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--acao-a) 55%, transparent);
  box-shadow: none;
}
.cal-leg-bola.retroativo {
  background: color-mix(in srgb, var(--acao-a) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--acao-a) 55%, transparent);
}

/* ---------- o selo da faixa de ofensiva ----------
   A medalha desenhada, a mesma da tela de conquistas. Era um emoji, e ele
   sobreviveu à faxina da outra tela — inconsistência fica mais à vista que
   o problema original. */
.medalha-selo { display: grid; place-items: center; width: 38px; height: 38px }
.medalha-selo.vazia { opacity: .32; filter: grayscale(1) }