/* ============================================================
   tryzen — a Nutricao (20/10/2026)
   ------------------------------------------------------------
   So o que as telas da Nutricao tem de proprio. Cartao, bandeja,
   chips, opt, segmented, field e o quadro que sobe sao os da casa
   (components.css): nenhuma superficie nova, nenhum raio novo.

   As tres cores dos macronutrientes saem da faixa verde da marca
   (tokens.css, --faixa-*), e nao de um arco-iris: a Nutricao tem que
   parecer Tryzen. Cada parte tambem tem o nome escrito do lado, porque
   cor sozinha nao e informacao.
   ============================================================ */

.nutri { --nutri-carb: var(--faixa-2); --nutri-prot: var(--faixa-4); --nutri-gord: var(--faixa-1); }
.nutri .w-400 { font-weight: 400; }
.nutri-apresentacao .body { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 24px); }
.nutri-abertura { padding: 16px 0 48px; text-align: center; }
.nutri-abertura__marca { width: 176px; height: 176px; margin: 0 auto 12px; }
.nutri-abertura__assinatura { margin: 0 0 20px; font-size: var(--fs-sm); color: var(--text-2); }
.nutri-abertura__titulo { font-family: Georgia, 'Times New Roman', serif; font-size: 2.75rem; line-height: 1.09; font-weight: 400; letter-spacing: -.025em; text-wrap: balance; margin: 0 auto; max-width: 13ch; }
.nutri-abertura__sub { margin: 20px auto 28px; max-width: 34ch; color: var(--text-2); font-size: var(--fs-body); line-height: 1.6; text-wrap: pretty; }
.nutri-abertura .btn, .nutri-abertura__fim .btn { max-width: 340px; margin-inline: auto; }
.nutri-relato { max-width: 500px; margin-inline: auto; }
.nutri-relato__parte { padding: 36px 0; border-top: 1px solid var(--border-soft); }
.nutri-relato__arte { width: 168px; height: 168px; margin: 0 auto 18px; color: var(--text); }
.nutri-relato__parte { text-align: center; }
.nutri-relato__n { margin: 0 0 10px !important; font: 500 var(--fs-xs)/1 var(--font-mono, ui-monospace, monospace) !important; letter-spacing: .12em; color: var(--accent-texto, var(--accent)) !important; }
.nutri-relato__arte svg { width: 100%; height: 100%; overflow: visible; }
.nutri-relato__parte h2 { margin: 0 0 14px; font: 400 1.9rem/1.2 Georgia, 'Times New Roman', serif; letter-spacing: -.015em; text-wrap: balance; }
.nutri-relato__parte p { margin: 0; color: var(--text-2); font-size: var(--fs-body); line-height: 1.7; text-wrap: pretty; }
.nutri-abertura__fim { margin-top: 24px; }
.nutri-revela { animation: nutri-revela .65s cubic-bezier(.16, 1, .3, 1) both; }
/* o titulo entra palavra por palavra (a medida da Attio: opacidade e desfoque de 6 px, 40 ms entre palavras) */
.nutri-palavra { display: inline-block; animation: nutri-palavra .7s cubic-bezier(.23, 1, .32, 1) both; animation-delay: calc(var(--i, 0) * 40ms + 250ms); }
@keyframes nutri-palavra { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }
.nutri-diario__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.nutri-diario__marca > span { width: 64px; height: 64px; flex: none; }
.nutri-diario__marca p { margin: 0 0 2px; color: var(--text-2); font-size: var(--fs-xs); }
@keyframes nutri-revela { from { opacity: .35; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 360px) { .nutri-abertura__titulo { font-size: 2.35rem; } .nutri-apresentacao .topbar .link-texto { font-size: var(--fs-xs); } }
@media (prefers-reduced-motion: reduce) { .nutri-revela, .nutri-palavra { animation: none; } }
/* o chip da casa e grade de uma celula; aqui ele leva icone + texto na mesma linha */
.nutri .chip { display: inline-flex; align-items: center; gap: 6px; }
/* os tres macronutrientes lado a lado, nao 2 + 1 */
.nutri-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-md) var(--gap-sm); }
.nutri-treino .card__foot > div { flex: 1; }

/* ---------- o dia ---------- */
.nutri-dia { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); }
.nutri-dia__nome { font-weight: 600; text-transform: capitalize; }

/* ---------- de onde veio a energia ---------- */
.nutri-barra { display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2); gap: 2px; }
.nutri-barra__parte { flex-basis: 0; min-width: 4px; transform-origin: left; animation: nutri-cresce var(--mola-dur, .5s) var(--mola, ease-out) both; }
.nutri-barra__parte--carboidratos { background: var(--nutri-carb); }
.nutri-barra__parte--proteinas    { background: var(--nutri-prot); }
.nutri-barra__parte--gorduras     { background: var(--nutri-gord); }
@keyframes nutri-cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.nutri-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nutri-legenda li { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.nutri-legenda__ponto { width: 10px; height: 10px; border-radius: 50%; }
.nutri-legenda__ponto--carboidratos { background: var(--nutri-carb); }
.nutri-legenda__ponto--proteinas    { background: var(--nutri-prot); }
.nutri-legenda__ponto--gorduras     { background: var(--nutri-gord); box-shadow: inset 0 0 0 1px var(--border); }
.nutri-legenda__pct { font-variant-numeric: tabular-nums; }

.nutri-fontes { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }

/* ---------- as refeicoes ---------- */
.nutri-refeicoes { display: grid; gap: var(--gap-sm); }
.nutri-ref__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-sm); }
.nutri-ref__nome { font-size: var(--fs-body); font-weight: 600; margin: 0; }
.nutri-ref__pe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--gap-sm); }
.nutri-ref__pe .chip svg { width: 1em; height: 1em; }
.nutri-itens { list-style: none; margin: var(--gap-sm) 0 0; padding: 0; display: grid; }
.nutri-item {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nome kcal" "qtd kcal";
  align-items: center; column-gap: 12px; width: 100%; padding: 10px 0; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--border-soft); color: inherit; font: inherit; cursor: pointer;
}
.nutri-itens li:first-child .nutri-item { border-top: 0; }
.nutri-item__nome { grid-area: nome; font-weight: 500; }
.nutri-item__qtd  { grid-area: qtd; font-size: var(--fs-sm); }
.nutri-item__kcal { grid-area: kcal; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.nutri-item--fixo { cursor: default; }
button.nutri-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---------- registrar ---------- */
.nutri-hora { max-width: 160px; }
.nutri-busca { display: flex; align-items: flex-end; gap: var(--gap-sm); }
.nutri-busca .field { flex: 1; }
.nutri-busca__codigo { flex: none; }
.nutri-linha { width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.nutri-linha .row__chev { color: var(--accent-texto); font-size: var(--fs-sm); font-weight: 600; }
.nutri-nada { padding: var(--gap-md) 0; }
.nutri-sel__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); }
.nutri-qtd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--gap-sm); }
.nutri-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-sm); }
.nutri-camera { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); background: var(--surface); }
.nutri-quadro .folha-x { z-index: 1; }

/* ---------- preferencias ---------- */
.nutri-horarios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-sm); }
.nutri-add { display: flex; align-items: flex-end; gap: var(--gap-sm); }
.nutri-add .btn { width: auto; flex: none; }
.nutri .chip svg { width: 1em; height: 1em; vertical-align: -0.15em; }
.nutri .progress { margin-bottom: var(--gap-md); }
.nutri-aviso { padding: var(--gap-md); }

/* ---------- quem acompanha ---------- */
.nutri-leituras { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-sm); }
.nutri-leituras li { display: flex; justify-content: space-between; gap: var(--gap-sm); }

/* ---------- insights e comparativos ---------- */
.nutri-insights, .nutri-cmp { display: grid; gap: var(--gap-sm); }
.nutri-insight .chip--solid { text-decoration: none; }
.nutri-porque summary { cursor: pointer; }
.nutri-comparar { display: grid; gap: 6px; }
.nutri-comparar__linha { display: grid; grid-template-columns: minmax(84px, auto) 1fr auto; align-items: center; gap: 10px; }
.nutri-comparar__barra { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); position: relative; overflow: hidden; }
.nutri-comparar__barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--feito); border-radius: inherit;
  animation: nutri-cresce var(--mola-dur, .5s) var(--mola, ease-out) both; transform-origin: left; }
.nutri-comparar__barra.is-agora::after { background: var(--certo); }

.nutri-28 svg { width: 100%; height: auto; display: block; }
.nutri-28__barra { fill: var(--certo-fraco); }
.nutri-28__barra.is-parcial { fill: var(--feito); }
.nutri-28__barra.is-hoje { fill: var(--certo); }
.nutri-28__vazio { fill: var(--border); }
.nutri-28__eixo { fill: var(--text-3); font-size: 10px; font-family: inherit; }

.nutri-texto { white-space: pre-line; }

@media (prefers-reduced-motion: reduce) {
  .nutri-barra__parte, .nutri-comparar__barra::after { animation: none; }
}

/* ---------- o plano no papel (A4) ----------
   Imprimir sai do proprio app: some tudo que e tela (barra, botoes,
   acoes) e o plano fica em preto no branco, sem quebrar refeicao. */
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  body { background: #fff !important; color: #000 !important; }
  .tabbar, .topbar, .footer, .abertura, [data-aderencia], [data-ajuste], .group-label + .segmented + .xs { display: none !important; }
  .nutri-plano .card { break-inside: avoid; border: 1px solid #bbb; background: #fff; }
  .nutri-plano * { color: #000 !important; }
}

/* ---------- sua evolucao (0158, 21/10/2026) ---------- */
.nutri-evolucao__titulo { font: 400 2.2rem/1.12 Georgia, 'Times New Roman', serif; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.nutri-evolucao__numero { font: 500 1.6rem/1.2 var(--font, inherit); margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.nutri-agua__total { font-weight: 600; font-variant-numeric: tabular-nums; }
.nutri-agua__lista { list-style: none; margin: 0; padding: 0; }
.nutri-agua__lista li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border-soft); font-size: var(--fs-sm); color: var(--text-2); }
.nutri-agua__lista .icon-btn { width: 32px; height: 32px; }
.nutri-bem__linha { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.segmented--escala { display: inline-flex; gap: 4px; }
.segmented--escala button { min-width: 36px; min-height: 36px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.nutri-tipo { font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; white-space: nowrap; }
.nutri-tipo--medido { color: var(--accent-texto, var(--accent)); }
.nutri-evolucao__dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.nutri-evolucao__dados dt { font-size: var(--fs-xs); color: var(--text-3); margin: 0 0 2px; }
.nutri-evolucao__dados dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.nutri-evolucao__grafico { width: 100%; height: 72px; color: var(--text-2); overflow: visible; }
.nutri-evolucao__grafico circle { fill: var(--bg); stroke: currentColor; stroke-width: 1.6; }
.nutri-evolucao__grafico circle.is-ultimo { fill: var(--accent); stroke: var(--accent); }
@media (max-width: 360px) { .nutri-bem__linha { grid-template-columns: 1fr; } }
.nutri-evolucao .card { padding: 16px; }
.segmented--escala button { border-radius: 10px; background: var(--surface-2, rgb(127 127 127 / .12)); border: 0; color: var(--text-2); }
.segmented--escala button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent, #0B2A16); font-weight: 600; }

/* ---------- o acerto visual do app do atleta (21/10/2026) ----------
   Pedido do dono, olhando o celular: blocos colados, botao cortado pela
   tab bar, botoes que pareciam texto solto e titulos sem desenho.

   · O titulo de secao leva o icone do lado (o padrao do Coach), e o
     `hidden` continua valendo mesmo com o display flex.
   · Chip dentro de cartao: o chip da casa tem a cor do cartao, entao la
     dentro ele sumia e "+ 200 ml" lia como texto. Aqui ganha o fundo da
     tela, que e o degrau certo em cima da superficie (claro e escuro).
   · Cartao escrito a mao (<section class="card">) tem 8 px de borda,
     feito pra quem usa bandeja; sem bandeja o texto encostava. 16 px.
   · Mais ar entre os blocos: o espaco neutro e o que separa um assunto
     do outro sem precisar de linha. */
.nutri-rotulo { display: flex; align-items: center; gap: 8px; }
.nutri-rotulo[hidden] { display: none; }
.nutri-rotulo__ic { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: var(--surface); color: var(--text-2); }
.nutri-rotulo__ic svg { width: 16px; height: 16px; }
.nutri .group-label.mt-xl { margin-top: 40px; }

.nutri .card .chip:not([aria-pressed="true"]):not([aria-checked="true"]) { background: var(--bg); color: var(--text); }
.nutri .card .chip svg { color: var(--accent-texto, var(--accent)); }

.nutri section.card, .nutri .card.nutri-composicao { padding: 16px; }
.nutri .card.mt-sm { margin-top: 14px; }
.nutri-refeicoes, .nutri-insights, .nutri-cmp { gap: 14px; }

.nutri-cab-ic { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nutri-cab-ic > svg { width: 20px; height: 20px; flex: none; color: var(--accent-texto, var(--accent)); }

/* o dia: o link "Conhecer" e a navegacao dos dias nao encostam mais */
.nutri-diario__marca + .link-texto { display: inline-block; margin-top: 4px; }
.nutri-dia { margin-top: 24px; padding: 6px 0; border-block: 1px solid var(--border-soft); }

/* a escala de 1 a 5: o nome em cima, os numeros embaixo, com ar entre as linhas */
.nutri-bem__linha + .nutri-bem__linha { margin-top: 14px; }

/* ============================================================
   21/10: a Nutricao no padrao do Coach (regra do dono)
   SVG em tudo, numero no lugar de "registro", antes e agora, e a
   Tryzen que fala primeiro. Acao repetida vira desenho.
   ============================================================ */

/* o cartao da refeicao: desenho, nome e hora, a energia em destaque */
.nutri-ref__cab { align-items: center; }
.nutri-ref__ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: var(--bg); color: var(--accent-texto, var(--accent)); }
.nutri-ref__ic svg { width: 22px; height: 22px; }
.nutri-ref__cab .grow { min-width: 0; display: grid; gap: 2px; }
.nutri-ref__kcal { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nutri-ref__acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.nutri-acao { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-soft);
  background: var(--bg); color: var(--text); cursor: pointer; padding: 0; }
.nutri-acao svg { width: 20px; height: 20px; }
.nutri-acao:active { scale: .94; }
.nutri-acao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* C, P e G em numero, com o ponto da cor de cada um */
.nutri-macrolinha { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nutri-macrolinha li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "p n" "v v"; align-items: center; column-gap: 6px;
  padding: 8px 10px; border-radius: 12px; background: var(--bg); min-width: 0; }
.nutri-macrolinha i { grid-area: p; width: 8px; height: 8px; border-radius: 50%; }
.nutri-macrolinha span { grid-area: n; font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nutri-macrolinha b { grid-area: v; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); margin-top: 2px; }
.nutri-macrolinha__carboidratos i { background: var(--nutri-carb); }
.nutri-macrolinha__proteinas i    { background: var(--nutri-prot); }
.nutri-macrolinha__gorduras i     { background: var(--nutri-gord); box-shadow: inset 0 0 0 1px var(--border); }

/* o antes e o agora do Coach (dsc__estados) */
.nutri-estados { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.nutri-estado { display: grid; gap: 4px; padding: 14px 10px; border-radius: 16px; text-align: center;
  border: 1px solid var(--border-soft); background: var(--bg); min-width: 0; }
.nutri-estado small { font-size: var(--fs-xs); color: var(--text-3); }
.nutri-estado b { font-size: 1.35rem; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nutri-estado--agora { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-tint); }
.nutri-estado__seta { display: grid; place-items: center; color: var(--text-3); }
.nutri-estado__seta svg { width: 18px; height: 18px; }

/* a Tryzen fala primeiro: a maca, o passo e um botao */
.nutri-fala { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; padding: 16px;
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--accent-line); }
.nutri-fala__marca { width: 56px; height: 56px; }
.nutri-fala__marca svg { width: 100%; height: 100%; }
.nutri-fala__txt { min-width: 0; }
.nutri-fala__txt > small { display: block; font-size: var(--fs-xs); color: var(--accent-texto, var(--accent)); font-weight: 600; }
.nutri-fala__titulo { margin: 2px 0 4px; font-weight: 700; font-size: var(--fs-body); }
.nutri-fala .btn { width: auto; display: inline-flex; gap: 8px; padding-inline: 18px; }
.nutri-fala .btn svg { width: 18px; height: 18px; }
.nutri-fala__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
/* 05/11/2026, visto no navegador a 390 px: os dois botoes ficam lado a lado (Agora nao na esquerda, a acao na
   direita) em vez de a acao cair para baixo */
.nutri-fala__acoes:has(> .btn + .btn) { display: grid; grid-template-columns: 1fr 1fr; }
.nutri-fala__acoes > .btn { min-width: 0; padding-inline: 12px; text-align: center; }
.nutri-fala__acoes:has(> .btn + .btn) > .btn { font-size: 16px; min-height: 52px; }

/* as tres portas do resto (Historico, Evolucao, Quem acompanha) */
.nutri-portas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nutri-porta { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border-radius: var(--r-card);
  background: var(--surface); color: var(--text); text-decoration: none; text-align: center; font-size: var(--fs-sm); font-weight: 600; }
.nutri-porta__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--bg);
  color: var(--accent-texto, var(--accent)); }
.nutri-porta__ic svg { width: 22px; height: 22px; }
.nutri-porta:active { scale: .97; }

/* lista curta com o desenho de cada linha (o resumo da semana e o que mais vier) */
.nutri-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nutri-linhas li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: var(--fs-sm); color: var(--text-2); }
.nutri-linhas li > span:first-child { color: var(--accent-texto, var(--accent)); display: grid; place-items: center; padding-top: 1px; }
.nutri-linhas li svg { width: 18px; height: 18px; }

/* ---------- Como voce come: tres etapas e opcoes com desenho (21/10) ---------- */
.nutri-etapas { display: grid; gap: 10px; }
.nutri-etapa { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 16px;
  border-radius: var(--r-card); background: var(--surface); color: var(--text); text-decoration: none; }
.nutri-etapa:active { scale: .985; }
.nutri-etapa__ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px;
  background: var(--bg); color: var(--accent-texto, var(--accent)); }
.nutri-etapa__ic svg { width: 22px; height: 22px; }
.nutri-etapa__txt { display: grid; gap: 2px; min-width: 0; }
.nutri-etapa__txt small { font-size: var(--fs-xs); color: var(--text-3); }
.nutri-etapa__txt b { font-weight: 600; }
.nutri-etapa__txt span { font-size: var(--fs-sm); color: var(--text-2); }
.nutri-etapa__conta { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--bg); color: var(--text-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; font-weight: 600; }
.nutri-etapa__conta.is-feita { background: var(--accent-tint); color: var(--accent-texto, var(--accent)); }
.nutri-etapa__conta svg { width: 16px; height: 16px; }
.nutri-visto { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-texto, var(--accent)); }
.nutri-visto svg { width: 14px; height: 14px; }

.nutri-opcoes { display: grid; gap: 10px; }
.nutri-opcoes .opt + .opt { margin-top: 0; }
.nutri-opt { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; min-height: 64px; cursor: pointer; }
.nutri-opt__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); color: var(--text-2); }
.nutri-opt__ic svg { width: 22px; height: 22px; }
.nutri-opt[aria-selected="true"] .nutri-opt__ic { background: var(--accent); color: var(--on-accent, #0B2A16); }
.nutri-opt__txt { display: grid; gap: 2px; min-width: 0; }
.nutri-opt__nota { font-size: var(--fs-sm); color: var(--text-3); }
.nutri-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* a foto do prato (N1, 05/11/2026): a duvida em linha de texto, os candidatos do catalogo a um toque */
.nutri-foto__duvida { display: grid; gap: 4px; padding: 6px 0 10px; border-bottom: 1px solid var(--border-soft); }
.nutri-foto__duvida > p:first-child { display: flex; gap: 8px; align-items: flex-start; }
.nutri-foto__duvida > p:first-child > span:first-child { flex: none; display: inline-flex; margin-top: 2px; color: var(--accent-texto, var(--accent)); }
.nutri-foto__duvida > p:first-child > span + span { min-width: 0; }
.nutri-foto__duvida > p:first-child svg { width: 16px; height: 16px; }
.nutri-foto__candidatos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.nutri-pergunta__pe { display: flex; justify-content: space-between; align-items: center; }
.nutri .field__label.nutri-cab-ic svg, p.nutri-cab-ic > svg { width: 18px; height: 18px; flex: none; color: var(--accent-texto, var(--accent)); }
.nutri-aviso-ic { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); }
.nutri-aviso-ic > span { color: var(--accent-texto, var(--accent)); }
.nutri-aviso-ic svg { width: 20px; height: 20px; }
.nutri-add { display: flex; align-items: flex-end; gap: 8px; }
/* a pergunta le como pergunta, nao como rotulo de campo */
.nutri [data-passo] p.field__label { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.nutri-cab-ic > .nutri-etapa__ic { background: var(--surface); }

/* ============================================================
   21/10, segunda passada: cartoes separados, desenho em tudo,
   a Tryzen apontando cada bloco e um passo por vez
   ============================================================ */

/* o icone do cartao em tamanho pequeno (rotulo de bloco) */
.nutri-ref__ic--p { width: 30px; height: 30px; border-radius: 9px; }
.nutri-ref__ic--p svg { width: 17px; height: 17px; }
.card .nutri-ref__ic { background: var(--bg); }

/* a fala da Tryzen apontando o bloco (holofote do Coach) */
.nutri-dica { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px;
  background: var(--accent-tint); border: 1px solid var(--accent-line); font-size: var(--fs-sm); color: var(--text); line-height: 1.45; }
.nutri-dica__marca { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--accent); color: var(--on-accent, #0B2A16); }
.nutri-dica__marca svg { width: 14px; height: 14px; }
.nutri-dica b { font-weight: 700; margin-right: 2px; }

/* o numero do passo no lugar do icone do rotulo */
.nutri-passo-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent, #0B2A16); font-size: 13px; }
.nutri-rotulo__ic:has(.nutri-passo-n) { background: none; }

/* o anel de onde veio a energia */
.nutri-comp { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.nutri-anel { width: 120px; height: 120px; }
.nutri-anel circle { fill: none; stroke-width: 14; }
.nutri-anel__fundo { stroke: var(--bg); }
.nutri-anel__parte { stroke-linecap: round; }
.nutri-anel__parte--carboidratos { stroke: var(--nutri-carb); }
.nutri-anel__parte--proteinas { stroke: var(--nutri-prot); }
.nutri-anel__parte--gorduras { stroke: var(--nutri-gord); }
.nutri-anel__num { font-size: 22px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }
.nutri-anel__un { font-size: 11px; fill: var(--text-3); }
.nutri-comp__macros { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.nutri-comp__macro { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--bg); }
.nutri-comp__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #0B2A16; }
.nutri-comp__ic svg { width: 18px; height: 18px; }
.nutri-comp__macro--carboidratos .nutri-comp__ic { background: var(--nutri-carb); }
.nutri-comp__macro--proteinas .nutri-comp__ic { background: var(--nutri-prot); }
.nutri-comp__macro--gorduras .nutri-comp__ic { background: var(--nutri-gord); box-shadow: inset 0 0 0 1px var(--border); }
.nutri-comp__nome { display: grid; font-size: var(--fs-sm); min-width: 0; }
.nutri-comp__nome small { font-size: var(--fs-xs); color: var(--text-3); }
.nutri-comp__macro b { font-variant-numeric: tabular-nums; }
@media (max-width: 340px) { .nutri-comp { grid-template-columns: 1fr; justify-items: center; } .nutri-comp__macros { width: 100%; } }

/* o "como isso e contado", fechado */
.nutri-nota summary { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); cursor: pointer; list-style: none; }
.nutri-nota summary::-webkit-details-marker { display: none; }
.nutri-nota summary svg { width: 15px; height: 15px; }

/* o quadro da Tryzen na primeira visita: o desenho em cima e tres passos */
.nutri-apresenta { text-align: center; }
.nutri-apresenta__arte { display: grid; place-items: center; height: 120px; margin: 4px auto 8px; color: var(--text); }
.nutri-apresenta__arte svg { height: 112px; width: auto; }
.nutri-apresenta__maca { display: block; width: 104px; height: 104px; }
.nutri-apresenta__maca svg { width: 100%; height: 100%; }
.nutri-apresenta__kicker { margin: 0; font-size: var(--fs-xs); color: var(--accent-texto, var(--accent)); font-weight: 600; }
.nutri-apresenta h2 { margin: 4px 0 0; }
.nutri-apresenta__passos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.nutri-apresenta__passos li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 12px; border-radius: 14px; background: var(--surface); }
.nutri-apresenta__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg); color: var(--accent-texto, var(--accent)); }
.nutri-apresenta__ic svg { width: 21px; height: 21px; }
.nutri-apresenta__passos b { font-weight: 600; }
.nutri-apresenta__passos p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-2); }

/* registrar: a grade das refeicoes e a hora com a roda */
.nutri-refgrade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nutri-refgrade__item { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border-radius: 14px; border: 1px solid var(--border-soft);
  background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--fs-xs); text-align: center; cursor: pointer; line-height: 1.2; }
.nutri-refgrade__item svg { width: 22px; height: 22px; }
.nutri-refgrade__item[aria-checked="true"] { border-color: var(--accent-texto); background: var(--accent-tint); color: var(--text); font-weight: 600; }
.nutri-refgrade__item[aria-checked="true"] svg { color: var(--accent-texto, var(--accent)); }
.nutri-hora2 { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.nutri-hora2 .field__input { max-width: 140px; }
.nutri-aba-ic { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.nutri-aba-ic svg { width: 16px; height: 16px; flex: none; }

/* o treino do dia, uma linha por sessao */
.nutri-treino2__linha, .nutri-treino2__kcal { display: flex; align-items: center; gap: 12px; }
.nutri-treino2__linha + .nutri-treino2__linha, .nutri-treino2__kcal { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.nutri-treino2__num { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.nutri-treino2__num span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--bg); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.nutri-treino2__num svg { width: 13px; height: 13px; }
.nutri-treino2__kcal small { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.nutri-estado-pilula { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; }
.nutri-estado-pilula svg { width: 13px; height: 13px; }
.nutri-estado-pilula.is-feito { background: var(--accent-tint); color: var(--accent-texto, var(--accent)); }

/* sua evolucao: tres partes, uma por vez */
.nutri-partes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); }
.nutri-parte { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.nutri-parte svg { width: 17px; height: 17px; }
.nutri-parte[aria-selected="true"] { background: var(--accent); color: var(--on-accent, #0B2A16); font-weight: 600; }
.nutri-agua__botoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nutri-agua__copo { display: grid; justify-items: center; gap: 2px; padding: 12px 4px; border-radius: 14px; border: 1px solid var(--border-soft); background: var(--bg); color: var(--text); font: inherit; cursor: pointer; }
.nutri-agua__copo svg { width: 20px; height: 20px; color: var(--accent-texto, var(--accent)); }
.nutri-agua__copo b { font-variant-numeric: tabular-nums; }
.nutri-agua__copo span { font-size: var(--fs-xs); color: var(--text-3); text-align: center; line-height: 1.2; }
.nutri-agua__copo:active { scale: .96; }
.nutri-agua__total { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nutri-agua__lista--card { list-style: none; padding: 8px 16px; }
.nutri-acao--leve { width: 36px; height: 36px; border: 0; background: transparent; color: var(--text-3); }
.nutri-acao--leve svg { width: 18px; height: 18px; }
.nutri-bem__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bg); color: var(--accent-texto, var(--accent)); }
.nutri-bem__ic svg { width: 16px; height: 16px; }
.nutri-indicadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nutri-indicador { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: var(--r-card); background: var(--surface); }
.nutri-indicador__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg); color: var(--accent-texto, var(--accent)); margin-bottom: 4px; }
.nutri-indicador__ic svg { width: 18px; height: 18px; }
.nutri-indicador small { font-size: var(--fs-xs); color: var(--text-3); }
.nutri-indicador b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.nutri-indicador b span { font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); }
.nutri-indicador .nutri-tipo { justify-self: start; }

/* quem acompanha: as permissoes em tres grupos fechados */
.nutri-escopos { border-radius: 14px; background: var(--bg); padding: 10px 12px; }
.nutri-escopos summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--fs-sm); }
.nutri-escopos summary::-webkit-details-marker { display: none; }
.nutri-escopos .nutri-ref__ic { width: 32px; height: 32px; background: var(--surface); }
.nutri-escopos__n { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.nutri-escopos .nutri-opt__ic { background: var(--surface); }
.nutri-hora2 { flex-wrap: wrap; }
.nutri-hora2 .tempo { flex: 1 0 100%; }
.nutri-horarios .tempo { width: 100%; }

/* o contorno verde e so da fala da Tryzen; o "agora" fica neutro, diferente so pelo fundo */
.nutri-estado--agora { border-color: var(--border-soft); box-shadow: none; background: var(--surface); }
.card .nutri-estado--agora { background: var(--surface-2, var(--bg)); }
.nutri .card + .card, .nutri .card + section.card, .nutri .recolhe + .card, .nutri .card + .recolhe { margin-top: 12px; }

/* o calendario da semana: sete dias numa tira, o escolhido cheio (no lugar do "< Hoje >") */
.nutri-cal { display: grid; gap: 10px; }
.nutri-cal__topo { display: flex; align-items: center; justify-content: space-between; }
.nutri-cal__mes { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.nutri-cal__mes svg { width: 16px; height: 16px; }
.nutri-cal__mes span::first-letter { text-transform: uppercase; }
.nutri-cal__setas { display: inline-flex; gap: 4px; }
.nutri-cal__seta { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--text-2); }
.nutri-cal__seta svg { width: 16px; height: 16px; }
.nutri-cal__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.nutri-cal__dia { display: grid; justify-items: center; gap: 2px; padding: 8px 0; border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; }
.nutri-cal__dia small { font-size: 11px; color: var(--text-3); text-transform: uppercase; }
.nutri-cal__dia b { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.nutri-cal__dia.is-hoje b { color: var(--accent-texto, var(--accent)); }
.nutri-cal__dia.is-escolhido { background: var(--accent); }
.nutri-cal__dia.is-escolhido small, .nutri-cal__dia.is-escolhido b { color: var(--on-accent, #0B2A16); }
.nutri-cal__dia.is-futuro { opacity: .35; }

/* a tabela do Coach no app: a medida, o agora e o antes, o numero na linha do nome (21/10, dono) */
.nutri-tab { border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden; background: var(--surface); }
.nutri-tab__l { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border-soft); font-size: var(--fs-sm); }
.nutri-tab__l--topo { border-top: 0; background: var(--bg); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.nutri-tab__nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nutri-tab__nome i { display: grid; color: var(--text-2); flex: none; }
.nutri-tab__nome i svg { width: 16px; height: 16px; }
.nutri-tab__nome b { display: block; font-weight: 500; }
.nutri-tab__nome small { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.nutri-tab__v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.nutri-tab__v--antes { font-weight: 400; color: var(--text-3); }
.nutri-tab__l + .nutri-tab__l { border-top: 1px solid var(--border); }

/* registrar perguntando: a Tryzen conduz, uma pergunta por vez (21/10) */
.nutri-guia__topo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.nutri-guia__maca { width: 44px; height: 44px; flex: none; }
.nutri-guia__maca svg { width: 100%; height: 100%; }
.nutri-guia__topo small { font-size: var(--fs-xs); color: var(--accent-texto, var(--accent)); font-weight: 600; }
.nutri-guia__pergunta { margin: 0; }
.nutri-guia__seta { display: grid; color: var(--text-3); }
.nutri-guia__seta svg { width: 18px; height: 18px; }
.nutri-guia .nutri-opt .opt__title { font-weight: 600; }
.nutri-guia__itens { list-style: none; margin: 0; padding: 4px 14px; border-radius: 14px; background: var(--surface); }
.nutri-guia__itens li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; min-height: 44px; }
.nutri-guia__itens li + li { border-top: 1px solid var(--border-soft); }
.nutri-guia__itens .nutri-cab-ic svg { width: 16px; height: 16px; color: var(--accent-texto, var(--accent)); }
.nutri-guia__itens b { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.nutri-guia__total span:first-child { font-weight: 600; }
.nutri-guia__gramas { display: grid; gap: 10px; }
.nutri-guia__completo { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); }
.nutri-guia__completo svg { width: 16px; height: 16px; }
.nutri-guia .nutri-refgrade__item { background: var(--surface); }

/* a composicao em planilha: o anel pequeno em cima, a tabela embaixo (21/10, dono; no celular nada fica torto) */
.nutri-comp { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
.nutri-comp .nutri-anel { width: 104px; height: 104px; }
.nutri-comp .nutri-tab { width: 100%; }
.nutri-tab__ponto { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #0B2A16; }
.nutri-tab__ponto svg { width: 13px; height: 13px; }
.nutri-tab__ponto--carboidratos { background: var(--nutri-carb); }
.nutri-tab__ponto--proteinas { background: var(--nutri-prot); }
.nutri-tab__ponto--gorduras { background: var(--nutri-gord); box-shadow: inset 0 0 0 1px var(--border); }

/* a foto do prato (Tryzen Pro) */
.nutri-guia__pro { padding: 3px 8px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-texto, var(--accent)); font-size: var(--fs-xs); font-weight: 700; }
.nutri-guia__lendo { display: grid; place-items: center; height: 140px; }
.nutri-guia__pulso { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-texto, var(--accent)); animation: nutri-pulso 1.2s ease-in-out infinite; }
.nutri-guia__pulso svg { width: 32px; height: 32px; }
@keyframes nutri-pulso { 50% { transform: scale(1.08); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .nutri-guia__pulso { animation: none; } }

/* sua evolucao (21/10, dono): o titulo na letra das outras telas; cada pergunta com o desenho e o nome
   numa linha e a escala de 1 a 5 embaixo, inteira (antes o nome comprido espremia o desenho ate sumir) */
.nutri-bem__linha { display: grid; gap: 8px; }
.nutri-bem__linha .nutri-cab-ic { gap: 10px; align-items: center; }
.nutri-bem__ic { flex: none; }
.nutri-bem__linha .segmented--escala { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; }
.nutri-bem__linha .segmented--escala button { min-width: 0; min-height: 40px; }
.nutri-bem__linha { grid-template-columns: 1fr; }

/* a conversa da Nutricao (21/10) */
.nutri-perguntar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r-card); border: 1px solid var(--accent-line); background: var(--accent-tint); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nutri-perguntar .grow { display: grid; gap: 2px; }
.nutri-perguntar small { font-size: var(--fs-xs); color: var(--text-2); }
.nutri-ia__lista { display: grid; gap: 10px; max-height: 46dvh; overflow-y: auto; }
.nutri-ia__fala { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 12px; border-radius: 14px; background: var(--surface); font-size: var(--fs-sm); }
.nutri-ia__fala p { margin: 0 0 6px; } .nutri-ia__fala p:last-child { margin: 0; }
.nutri-ia__fala--pensando { color: var(--text-3); }
.nutri-ia__minha { justify-self: end; max-width: 85%; padding: 10px 12px; border-radius: 14px; background: var(--accent); color: var(--on-accent, #0B2A16); font-size: var(--fs-sm); }
.nutri-ia__campo { display: flex; align-items: flex-end; gap: 8px; }

/* a lista de compras do plano (N13, 05/11/2026): linhas de texto com a caixa de "ja tenho" */
.nutri-compras > summary { display: flex; gap: 12px; align-items: center; cursor: pointer; list-style: none; }
.nutri-compras > summary::-webkit-details-marker { display: none; }
.nutri-compras > summary small { display: block; font-size: var(--fs-sm); font-weight: 400; }
.nutri-compras__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.nutri-compras__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 0; background: none; border: 0;
  border-top: 1px solid var(--border-soft); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nutri-compras__caixa { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border); color: var(--on-accent, #0B2A16); }
.nutri-compras__caixa svg { width: 14px; height: 14px; }
.nutri-compras__item.is-tem .nutri-compras__caixa { background: var(--accent); border-color: var(--accent); }
.nutri-compras__item.is-tem .grow { text-decoration: line-through; color: var(--text-3); }
.nutri-compras__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }