/* ============================================================
   App v3 — as peças da organização nova (docs/plano-v3.md)
   A casca (abas + câmera), a Hoje refeita, a Galeria e a câmera.
   O protótipo de referência está em tools/prototipo/v3.html.
   ============================================================ */

/* ── o botão da câmera: a ação principal, cheio de cor ────── */

.btn-camera {
  background: var(--destaque);
  color: var(--sobre-destaque);
  border: 0;
  box-shadow: var(--sombra-flutuante);
}
.btn-camera:active { transform: scale(.94); }
.chat-open .abas { visibility: hidden; }

/* ── Ontem · Hoje · Amanhã ────────────────────────────────── */

/* O segmentado do app inteiro (ui/controles.js). A marca é um
   elemento só, que desliza de uma opção para a outra. */
.seg3 {
  --n: 3;
  --i: 0;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border-radius: var(--raio-controle);
  background: var(--preench-3);
  margin: 0 0 var(--e-4);
}
.seg3__marca {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--n));
  border-radius: 9px;
  background: light-dark(#FFFFFF, var(--superficie-3));
  box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 0 0 0.5px rgb(0 0 0 / .04);
  transform: translateX(calc(100% * var(--i)));
  transition: transform var(--medio) var(--mola);
}
@media (prefers-reduced-motion: reduce) { .seg3__marca { transition: none; } }
.seg3__b {
  position: relative;
  border: 0;
  background: none;
  color: var(--texto-2);
  font: 500 0.8125rem/1.875rem var(--fonte);
  border-radius: 9px;
  cursor: pointer;
  transition: color var(--rapido) var(--suave);
}
/* A pílula tem 32 px de altura, que é o desenho; o dedo precisa de 44
   (docs/plano-design.md §9). A área cresce por baixo, sem mexer no que
   se vê — é o mesmo remédio nos três controlos pequenos do app. */
.seg3__b::before { content: ""; position: absolute; inset: -6px 0; }
.seg3__b.is-on { color: var(--texto); font-weight: 600; }
.seg3__b:active { opacity: .7; }

/* ── o cartão de energia ──────────────────────────────────── */

.energia { padding: var(--e-4); }
.energia__topo { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: var(--e-4); align-items: center; }
.energia__anel { position: relative; width: 124px; height: 124px; }
.energia__anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.energia__trilho { fill: none; stroke: var(--preench-2); stroke-width: 12; }
.energia__arco { fill: none; stroke: var(--destaque); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset var(--lento) var(--suave); }
.energia__anel.is-acima .energia__arco { stroke: var(--atencao); }
.energia__meio { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.energia__meio b { font: 700 1.6875rem/1 var(--fonte); letter-spacing: -.03em; }
.energia__meio small { font: var(--t-legenda1); color: var(--texto-2); margin-top: 3px; }
.energia__conta { font: var(--t-rodape); color: var(--texto-2); display: grid; gap: 3px; }
.energia__conta > div { display: flex; justify-content: space-between; gap: var(--e-2); }
.energia__conta b { color: var(--texto); font-weight: 600; }
.energia__objetivo { color: var(--texto-3); }
.energia__conta > .energia__ritmo { justify-content: flex-start; }
/* De onde vem a meta do dia, numa linha só: quatro linhas de conta
   (comido, base, treino, total) era uma tabela dentro do cartão. */
.energia__origem {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto-2);
  font: var(--t-legenda1);
  text-align: left;
  cursor: pointer;
}
.energia__origem b { color: var(--sucesso); font-weight: 600; }
.energia__ritmo { display: flex; align-items: center; gap: 5px; margin-top: 4px; padding-top: 6px; border-top: 0.5px solid var(--separador); }
.energia__ritmo [data-icon] { width: 14px; height: 14px; flex: none; }

.en-macros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-3);
  width: 100%;
  margin-top: var(--e-4);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.en-macro { display: grid; gap: 2px; min-width: 0; }
.en-macro__r { font: var(--t-legenda1); color: var(--texto-2); }
.en-macro__v { font: 600 0.875rem var(--fonte); white-space: nowrap; }
.en-macro__v i { font-style: normal; font-weight: 400; color: var(--texto-2); }
.en-macro .barra { height: 5px; margin-top: 3px; }

.en-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.en-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 0;
  border-radius: var(--raio-capsula);
  background: var(--preench-3);
  color: var(--texto);
  font: 500 0.8125rem var(--fonte);
  cursor: default;
}
button.en-chip { position: relative; cursor: pointer; }
button.en-chip::before { content: ""; position: absolute; inset: -7px 0; }

.en-chip [data-icon] { width: 15px; height: 15px; }
.en-chip--verde { color: var(--sucesso); background: color-mix(in srgb, var(--sucesso) 16%, transparent); }

/* ── água e nutrientes, lado a lado ───────────────────────── */

.par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.mini {
  position: relative;
  display: block;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 20px;
  background: var(--superficie);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.mini__corpo { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.mini__t { display: flex; align-items: center; gap: 6px; font: 600 0.8125rem var(--fonte); color: var(--texto-2); }
.mini__t [data-icon] { width: 15px; height: 15px; }
.mini--agua .mini__t [data-icon] { color: var(--agua); }
.mini--micros .mini__t [data-icon] { color: var(--sucesso); }
.mini__v { display: block; margin-top: 4px; font: 700 1.1875rem var(--fonte); letter-spacing: -.02em; }
.mini__v i { font: 400 0.8125rem var(--fonte); font-style: normal; color: var(--texto-2); letter-spacing: 0; }
.mini__copos { display: flex; gap: 3px; margin-top: 8px; padding-right: 34px; }
.mini__copos i { flex: 1; height: 6px; border-radius: 2px; background: var(--preench-2); transition: background var(--rapido) var(--suave); }
.mini__copos i.on { background: var(--agua); }
.mini__mais {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--agua) 18%, transparent);
  color: var(--agua);
  cursor: pointer;
}
.mini__mais::before { content: ""; position: absolute; inset: -7px; }
.mini__mais [data-icon] { width: 16px; height: 16px; }
.mini__espectro { display: flex; gap: 2px; align-items: flex-end; height: 22px; margin-top: 6px; }
.mini__espectro i { flex: 1; border-radius: 1px; min-height: 2px; }

/* ── as refeições do dia ──────────────────────────────────── */

.refeicoes { margin-top: var(--e-2); }
.refsec { margin-top: var(--e-5); }
.refsec__cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); margin: 0 4px var(--e-2); }
.refsec__cab b { font: var(--t-destaque); letter-spacing: -.01em; }
.refsec__cab span { font: var(--t-rodape); color: var(--texto-2); }
.refsec.is-agora .refsec__cab b { color: var(--destaque); }
.refsec .ref + .ref { margin-top: var(--e-2); }

.ref {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 10px;
  border-radius: 20px;
  background: var(--superficie);
}
.ref__corpo {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: var(--e-3);
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ref__foto { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; display: block; background: var(--preench-3); }
.ref__foto--icone { display: grid; place-items: center; color: var(--texto-2); }
.ref__foto--icone [data-icon] { width: 24px; height: 24px; }
.ref__texto { display: grid; gap: 4px; min-width: 0; }
.ref__nome {
  font: 600 0.9375rem/1.25 var(--fonte);
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ref__sub { font: var(--t-rodape); color: var(--texto-2); }
.ref__kcal { text-align: right; }
.ref__kcal b { display: block; font: 600 0.9375rem var(--fonte); }
.ref__kcal small { font: var(--t-legenda1); color: var(--texto-2); }
.ref__alerta, .ref__nota { display: flex; align-items: flex-start; gap: 4px; font: var(--t-legenda1); }
.ref__alerta { color: var(--atencao); }
.ref__nota { color: var(--texto-2); }
.ref__alerta [data-icon], .ref__nota [data-icon] { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.ref__marca {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--sucesso);
  cursor: pointer;
}
.ref__marca [data-icon] { width: 24px; height: 24px; }

/* A planejada: tracejada, sem fundo, com "Comi". */
.ref--plano { background: none; border: 1.5px dashed var(--separador-forte); }
/* O "Comi" repete-se em cada refeição planejada: cheio de cor, a tela
   inteira gritava. Tingido, continua a ser o gesto principal da linha. */
.ref__comi {
  position: relative;
  flex: none;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--raio-capsula);
  background: var(--destaque-suave);
  color: var(--destaque);
  font: 600 0.8125rem var(--fonte);
  cursor: pointer;
}
.ref__comi::before { content: ""; position: absolute; inset: -6px 0; }
.ref__comi:active { transform: scale(.95); }

/* Os macros com um ponto de cor. */
.pontos { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 600 0.75rem var(--fonte); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.ponto { display: inline-flex; align-items: center; gap: 4px; }
.ponto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cor); }

.amanha__resumo { margin: 0 4px; }
.amanha__contra { display: block; margin-top: 2px; color: var(--atencao); font-weight: 500; }
.amanha__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.amanha__acoes .botao [data-icon] { width: 17px; height: 17px; }

/* O vazio convida: um ícone, uma frase, um verbo. */
.convite { display: grid; justify-items: center; gap: var(--e-2); text-align: center; padding: var(--e-7) var(--e-4); margin-top: var(--e-3); border-radius: var(--raio-cartao); background: var(--superficie); }
.convite__icone { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--destaque-suave); color: var(--destaque); }
.convite__icone [data-icon] { width: 26px; height: 26px; }
.convite__titulo { margin: var(--e-2) 0 0; font: var(--t-destaque); }
.convite__texto { margin: 0 0 var(--e-2); max-width: 34ch; font: var(--t-subtitulo); color: var(--texto-2); }
.convite .botao [data-icon] { width: 18px; height: 18px; }

/* ── Galeria ──────────────────────────────────────────────── */

.galeria__carregando { height: 60vh; }
.galeria__barra { display: flex; align-items: flex-start; gap: var(--e-3); margin-bottom: var(--e-3); }
.historias { flex: 1; min-width: 0; display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 10px 4px 2px; }
.historias__dia { scroll-snap-align: start; }
.historias::-webkit-scrollbar { display: none; }
/* A fileira rola: o último círculo esbate-se no fim em vez de ser
   cortado a seco pelo botão da vista, que parecia defeito. */
.historias {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.historias__dia { flex: none; display: grid; justify-items: center; gap: 5px; border: 0; background: none; color: var(--texto-2); font: 500 0.75rem var(--fonte); cursor: pointer; padding: 0; }
.historias__foto { width: 64px; height: 64px; padding: 3px; border-radius: 50%; border: 2.5px solid var(--destaque); }
.historias__foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.historias__dia:first-child { color: var(--texto); font-weight: 600; }
/* O anel aceso é o dia que ela ainda não viu em história. */
.historias__dia.is-visto .historias__foto { border-color: var(--preench-1); }
/* Na altura do centro dos círculos, e não do topo deles: no topo parecia
   pousado em cima do quarto dia. */
.galeria__vistas { flex: none; display: flex; gap: 4px; padding: 3px; margin-top: 17px; border-radius: 10px; background: var(--preench-3); }
.galeria__vistas button { width: 34px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--texto-2); cursor: pointer; }
.galeria__vistas button[aria-pressed="true"] { background: light-dark(#FFFFFF, var(--superficie-3)); color: var(--texto); }
.galeria__vistas [data-icon] { width: 17px; height: 17px; }

.data-pilula { display: flex; justify-content: center; margin: var(--e-2) 0 var(--e-3); }
.data-pilula span { padding: 5px 12px; border-radius: var(--raio-capsula); background: var(--superficie-2); color: var(--texto-2); font: 600 0.75rem var(--fonte); }

.post { border-radius: var(--raio-cartao); overflow: hidden; background: var(--superficie); margin-bottom: 14px; }
.post__foto { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--preench-3); cursor: pointer; }
.post__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.post__sobre {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid;
  gap: 2px;
  padding: 36px 16px 14px;
  text-align: left;
  color: #FFFFFF;
  background: linear-gradient(transparent, rgb(0 0 0 / .72));
}
.post__sobre b { font: 700 1.1875rem var(--fonte); letter-spacing: -.02em; }
.post__sobre small { font: 500 0.8125rem var(--fonte); opacity: .88; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post__pe { display: flex; align-items: center; gap: var(--e-2); padding: 10px 12px 12px; }
.post__chip { padding: 6px 10px; border-radius: var(--raio-capsula); background: var(--preench-3); font: 500 0.75rem var(--fonte); }
.post__chip--p { color: var(--proteina); }
.post__de-novo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--destaque); font: 600 0.8125rem var(--fonte); cursor: pointer; }
.post__de-novo [data-icon] { width: 16px; height: 16px; }

.galeria__mes { font: var(--t-titulo3); letter-spacing: var(--k-titulo3); margin: var(--e-4) 4px var(--e-2); }
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 16px; overflow: hidden; }
.grade__foto { padding: 0; border: 0; background: var(--preench-3); cursor: pointer; }
.grade__foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ── a folha da câmera ────────────────────────────────────── */

.camera { display: grid; gap: var(--e-4); }
/* Sem câmera ao vivo, o quadro mostra o mesmo guia do visor
   (ui/visor.js): um círculo para o prato, uma prateleira larga para a
   cozinha, uma folha alta para o rótulo. Quem olha vê o que enquadrar
   antes de ler a nota. */
.camera__visor {
  height: 168px; display: grid; place-items: center;
  border-radius: var(--raio-cartao);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--destaque) 10%, var(--preench-3)), var(--preench-3));
  color: var(--texto-2);
  overflow: hidden;
}
.camera__guia {
  display: grid; place-items: center;
  border: 2px dashed color-mix(in srgb, var(--texto) 38%, transparent);
  transition: width var(--medio) var(--suave), height var(--medio) var(--suave), border-radius var(--medio) var(--suave);
}
.camera__visor[data-forma="circulo"] .camera__guia { width: 124px; height: 124px; border-radius: 50%; }
.camera__visor[data-forma="larga"] .camera__guia { width: 210px; height: 118px; border-radius: 18px; }
.camera__visor[data-forma="alta"] .camera__guia { width: 104px; height: 138px; border-radius: 14px; }
.camera__visor [data-icon] { width: 44px; height: 44px; }
.camera__nota { margin: 0; text-align: center; font: var(--t-subtitulo); color: var(--texto-2); }
.camera__acoes { display: grid; gap: var(--e-2); }
.camera__acoes .botao { display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.camera__acoes [data-icon] { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .energia__arco, .mini__copos i, .seg3__b { transition: none; }
}

/* ── a foto no detalhe da refeição ────────────────────────── */

.ref-foto { position: relative; margin: 0 0 var(--e-4); border-radius: var(--raio-cartao); overflow: hidden; }
.ref-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ref-foto__trocar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--raio-capsula);
  background: rgb(0 0 0 / .5);
  color: #FFFFFF;
  font: 600 0.8125rem var(--fonte);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
  cursor: pointer;
}
.ref-foto__trocar [data-icon] { width: 16px; height: 16px; }
.ref-foto-add {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 var(--e-4);
  padding: 14px;
  border: 1.5px dashed var(--separador-forte);
  border-radius: 20px;
  background: none;
  color: var(--destaque);
  font: 600 0.9375rem var(--fonte);
  cursor: pointer;
}
.ref-foto-add [data-icon] { width: 20px; height: 20px; }

.ref-trocada {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 var(--e-2);
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--texto-2);
  font: var(--t-rodape);
  text-align: left;
  cursor: pointer;
}
.ref-trocada [data-icon] { width: 14px; height: 14px; flex: none; }
/* Uma linha de 22 px que se toca: a área cresce sem mexer no desenho. */
.ref-trocada { position: relative; }
.ref-trocada::before { content: ""; position: absolute; inset: -8px 0; }
.ref-trocada span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* O "De sempre" e a sequência, depois das refeições. */
#view-hoje .secao { margin-top: var(--e-6); }
#view-hoje .secao .grupo__cabecalho { margin: 0 4px var(--e-2); padding: 0; font: var(--t-destaque); letter-spacing: -.01em; color: var(--texto); text-transform: none; }
#view-hoje .fichas--rolar .ficha { flex: none; white-space: nowrap; }
#view-hoje .cartao--sequencia, #view-hoje .cartao--leitura { margin-top: var(--e-4); }

.par > :only-child { grid-column: 1 / -1; }

/* ── o dia em história ────────────────────────────────────── */

.historia {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: #000;
  color: #FFFFFF;
  color-scheme: dark;
  opacity: 0;
  transform: scale(.97);
  transition: opacity 200ms var(--suave), transform 200ms var(--suave);
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
}
.historia.is-aberta { opacity: 1; transform: none; }
body.historia-aberta { overflow: hidden; }
.historia__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.historia__veu { position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / .45), transparent 22%, transparent 46%, rgb(0 0 0 / .86)); pointer-events: none; }
.historia__segs { position: absolute; z-index: 3; top: calc(var(--area-topo) + 10px); left: 12px; right: 12px; display: flex; gap: 4px; }
.historia__segs i { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .35); overflow: hidden; }
.historia__segs b { display: block; height: 100%; width: 0; background: #FFFFFF; }
.historia__segs i.is-visto b { width: 100%; }
.historia__cab { position: absolute; z-index: 3; top: calc(var(--area-topo) + 22px); left: 16px; right: 8px; display: flex; align-items: center; justify-content: space-between; font: 600 0.9375rem var(--fonte); }
.historia__cab small { font-weight: 400; opacity: .75; }
.historia__fechar { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: #FFFFFF; cursor: pointer; }
.historia__fechar svg { width: 24px; height: 24px; }
.historia__zona { position: absolute; z-index: 1; top: 90px; bottom: 170px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.historia__zona--volta { left: 0; width: 34%; }
.historia__zona--vai { right: 0; width: 66%; }
.historia__pe { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: calc(var(--area-baixo) + 28px); }
.historia__quando { margin: 0; font: 500 0.9375rem var(--fonte); opacity: .88; }
.historia__grande { margin: 6px 0 2px; font: 700 3.5rem/1 var(--fonte); letter-spacing: -.04em; }
.historia__grande i { font: 500 1.25rem var(--fonte); font-style: normal; opacity: .8; letter-spacing: 0; }
.historia__macros { display: flex; gap: 14px; margin: 10px 0 8px; font: 600 0.9375rem var(--fonte); }
.historia__itens { margin: 0; font: var(--t-rodape); opacity: .85; }
.historia__botoes { position: relative; z-index: 4; display: flex; gap: 10px; margin-top: 18px; }
.historia__botoes button { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 13px; border: 0; border-radius: var(--raio-capsula); background: rgb(255 255 255 / .18); color: #FFFFFF; font: 600 0.9375rem var(--fonte); backdrop-filter: blur(14px); white-space: nowrap; cursor: pointer; }
.historia__botoes button.is-forte { background: #FFFFFF; color: #000000; }
.historia__botoes [data-icon] { width: 18px; height: 18px; }

.historia__resumo { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 90px 24px calc(var(--area-baixo) + 28px); background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--destaque) 35%, #000), #000 70%); }
.resumo__fotos { display: flex; justify-content: center; margin-bottom: 8px; }
.resumo__fotos img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #000; margin-left: -14px; }
.resumo__fotos img:first-child { margin-left: 0; }
.resumo__titulo { margin: 0 0 6px; text-align: center; font: 700 1.75rem var(--fonte); letter-spacing: -.02em; }
.resumo__linha { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.resumo__r { font: 600 0.9375rem var(--fonte); }
.resumo__v { justify-self: end; font: var(--t-subtitulo); opacity: .85; }
.resumo__v b { font-weight: 700; opacity: 1; }
.resumo__barra { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: rgb(255 255 255 / .16); overflow: hidden; }
.resumo__barra i { display: block; height: 100%; border-radius: 4px; }
.resumo__nota { margin: 4px 0 0; text-align: center; font: var(--t-subtitulo); opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .historia { transition: none; }
}

/* ── na sua cozinha: a linha no assistente ────────────────── */

.chat__cozinha[hidden] { display: none; }
.chat__cozinha-b {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--raio-capsula);
  background: var(--preench-3);
  color: var(--texto-2);
  font: var(--t-rodape);
  text-align: left;
  cursor: pointer;
}
.chat__cozinha-b [data-icon] { width: 16px; height: 16px; flex: none; color: var(--sucesso); }
.chat__cozinha-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__cozinha-t b { color: var(--texto); font-weight: 600; }
.chat__cozinha-e { flex: none; color: var(--destaque); font-weight: 600; }

/* ── na sua cozinha: a folha ──────────────────────────────── */

.coz { display: grid; gap: var(--e-3); }
.coz__nota, .coz__vazio, .coz__dica { margin: 0; font: var(--t-subtitulo); color: var(--texto-2); }
.coz__dica { font: var(--t-rodape); color: var(--texto-3); text-align: center; }
.coz__novo { display: flex; gap: var(--e-2); align-items: center; }
.coz__novo input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: var(--raio-controle); background: var(--preench-3); color: var(--texto); font: var(--t-corpo); }
.coz__novo .botao-redondo { flex: none; width: 44px; height: 44px; background: var(--preench-3); color: var(--destaque); }
.coz__grupo { margin: var(--e-2) 0 0; font: 600 0.8125rem var(--fonte); color: var(--texto-2); }
.coz__grupo span { color: var(--texto-3); font-weight: 500; }
.coz__chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.coz-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border: 0;
  border-radius: var(--raio-capsula);
  background: var(--preench-2);
  color: var(--texto);
  font: 500 0.875rem var(--fonte);
  cursor: pointer;
  user-select: none;
  -webkit-touch-callout: none;
  transition: background var(--rapido) var(--suave), color var(--rapido) var(--suave);
}
.coz-chip.is-tem { background: color-mix(in srgb, var(--sucesso) 18%, transparent); color: var(--texto); }
.coz-chip [data-icon] { width: 14px; height: 14px; color: var(--sucesso); }
.coz-chip small { color: var(--destaque); font-weight: 600; }
.coz__lendo[hidden] { display: none; }
.coz__lendo { display: grid; gap: var(--e-2); padding: var(--e-3); border-radius: 18px; background: var(--superficie-2); font: var(--t-subtitulo); color: var(--texto-2); }
.coz__acoes { display: flex; gap: var(--e-2); }

/* ── o cartão da refeição sugerida ────────────────────────── */

.cr { margin-top: var(--e-3); padding: var(--e-4); border-radius: 22px; background: var(--superficie); max-width: 420px; }
.cr__topo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); align-items: center; }
.cr__titulo { display: grid; gap: 5px; min-width: 0; }
.cr__titulo h3 { margin: 0; font: 700 1.0625rem/1.25 var(--fonte); letter-spacing: -.015em; }
.cr__meta { margin: 0; display: flex; align-items: center; gap: 4px; font: var(--t-rodape); color: var(--texto-2); }
.cr__meta b { color: var(--texto); font-weight: 700; }
.cr__meta [data-icon] { width: 14px; height: 14px; }
.cr__destaque { display: inline-flex; align-items: center; gap: 5px; font: 600 0.75rem var(--fonte); color: var(--sucesso); }
.cr__destaque [data-icon] { width: 13px; height: 13px; }
.cr__itens { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: 7px; }
.cr__itens li { font: var(--t-subtitulo); }
/* Cada ingrediente é um botão: tocar troca por outro (ui/trocar-ingrediente.js). */
.cr__item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 3px 4px;
  margin: 0 -4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--rapido) var(--suave);
}
.cr__item:active { background: var(--preench-3); }
.cr__itens i { width: 10px; height: 10px; border-radius: 50%; }
.cr__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr__cozinha { color: var(--sucesso); font-weight: 600; font-size: 0.6875rem; margin-left: 4px; }
.cr__g { color: var(--texto); font-weight: 600; }
.cr__k { color: var(--texto-3); font: var(--t-rodape); min-width: 44px; text-align: right; }
.cr__preparo { margin-top: var(--e-3); border-top: 0.5px solid var(--separador); padding-top: var(--e-2); }
.cr__preparo summary { cursor: pointer; font: 600 0.875rem var(--fonte); color: var(--destaque); list-style: none; }
.cr__preparo summary::-webkit-details-marker { display: none; }
.cr__preparo summary::after { content: " ›"; }
.cr__preparo[open] summary::after { content: " ⌄"; }
.cr__preparo ol { margin: var(--e-2) 0 0; padding-left: 1.2em; display: grid; gap: 6px; font: var(--t-subtitulo); color: var(--texto-2); }
.cr__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.cr__acoes .btn { display: inline-flex; align-items: center; gap: 6px; }
.cr__acoes [data-icon] { width: 16px; height: 16px; }
.cr__feito { display: inline-flex; align-items: center; gap: 6px; font: 600 0.875rem var(--fonte); color: var(--sucesso); }
.cr__feito [data-icon] { width: 18px; height: 18px; }

/* A foto da receita, no lugar do prato desenhado: a imagem do vídeo de
   onde ela veio, ou a foto da refeição que virou receita. Quadrada e
   cortada pelo centro — o vídeo é em pé, o prato é largo, e o cartão
   não muda de forma por causa disso. */
.cr__foto {
  flex: none;
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 18px;
  object-fit: cover;
  background: var(--superficie-2);
}
.rc .cr__foto { width: 60px; height: 60px; border-radius: 14px; }

/* O prato desenhado: louça clara no claro, grafite no escuro. */
.prato { flex: none; display: block; }
.prato__borda { fill: light-dark(#F4F1EC, #3A3A3C); stroke: light-dark(rgb(0 0 0 / .06), rgb(255 255 255 / .08)); stroke-width: 1; }
.prato__fundo { fill: light-dark(#FFFFFF, #2C2C2E); }
.prato__comida path, .prato__comida circle { stroke: light-dark(#FFFFFF, #2C2C2E); stroke-width: 1.6; stroke-linejoin: round; }
.prato__brilho { stroke: rgb(255 255 255 / .18); stroke-width: 1; }
.cr__acoes { display: grid; grid-template-columns: 1fr 1fr auto; }
.cr__acoes .btn { justify-content: center; padding-inline: 10px; font-size: 0.8125rem; white-space: nowrap; }
.cr__outra { width: 40px; padding-inline: 0 !important; }
.cr__acoes .cr__feito { grid-column: 1 / -1; }
.cr__nome { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }

/* ── a meta que acompanha o treino ────────────────────────── */

.energia__treino b { color: var(--sucesso) !important; }
.energia__total { border-top: 0.5px solid var(--separador); padding-top: 4px; margin-top: 2px; }
.ref__selo { display: inline-flex; align-items: center; gap: 4px; font: 600 0.6875rem var(--fonte); color: var(--sucesso); }
.ref__selo [data-icon] { width: 13px; height: 13px; }

/* ── a tela Movimento ─────────────────────────────────────── */

.mov-meta__cab { display: flex; justify-content: space-between; align-items: baseline; }
.mov-meta__cab b { font: var(--t-destaque); }
.mov-meta__cab span { font: 700 1.375rem var(--fonte); letter-spacing: -.02em; }
.mov-meta__barra { display: flex; gap: 3px; height: 16px; margin: var(--e-3) 0 var(--e-2); border-radius: 8px; overflow: hidden; }
.mov-meta__barra i { background: var(--destaque); }
.mov-meta__barra i.is-treino { background: var(--sucesso); }
.mov-meta__legenda { display: flex; justify-content: space-between; font: var(--t-rodape); color: var(--texto-2); }
.mov-meta__legenda b { color: var(--texto); font-weight: 600; }
.mov-meta__legenda .is-treino, .mov-meta__legenda .is-treino b { color: var(--sucesso); }
.mov-meta__explica { margin: var(--e-3) 0 0; font: var(--t-rodape); color: var(--texto-2); }
.mov__titulo { margin: 0 0 var(--e-3); font: var(--t-destaque); }
.mov__vazio { margin: 0 0 var(--e-2); font: var(--t-subtitulo); color: var(--texto-2); }
.mov-treinos, .mov-passos { margin-top: 10px; }
.mov-treino { display: grid; grid-template-columns: 46px 1fr; gap: var(--e-3); align-items: center; margin-bottom: var(--e-3); }
.mov-treino__ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--sucesso); background: color-mix(in srgb, var(--sucesso) 16%, transparent); }
.mov-treino__ico [data-icon] { width: 24px; height: 24px; }
.mov-treino__txt b { display: block; font: 600 1rem var(--fonte); }
.mov-treino__txt small { font: var(--t-rodape); color: var(--texto-2); }
.mov-treinos .botao { display: inline-flex; align-items: center; gap: 6px; padding-inline: 0; }
.mov-treinos .botao [data-icon] { width: 17px; height: 17px; }
.mov-passos { display: grid; grid-template-columns: 76px 1fr 1fr; gap: var(--e-3); align-items: center; }
.mov-passos small { display: block; font: 600 0.8125rem var(--fonte); color: var(--texto-2); }
.mov-passos b { font: 700 1.1875rem var(--fonte); letter-spacing: -.02em; }
.mov-passos b i { font: 400 0.8125rem var(--fonte); font-style: normal; color: var(--texto-2); }
.mov-anel { position: relative; width: 76px; height: 76px; }
.mov-anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mov-anel__trilho { fill: none; stroke: var(--preench-2); stroke-width: 9; }
.mov-anel__arco { fill: none; stroke: var(--sucesso); stroke-width: 9; stroke-linecap: round; }
.mov-anel b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 0.9375rem var(--fonte); }

/* A semana de passos, o topo do cartão e as ações (27/09/2026).
   O treino anotado à mão abre para editar, e por isso tem seta. */
.mv-topo { display: grid; grid-template-columns: 76px 1fr auto; gap: var(--e-3); align-items: center; }
.mv-topo__n b { display: block; font: 700 1.75rem var(--fonte); letter-spacing: -.02em; }
.mv-topo__n small { font: var(--t-rodape); color: var(--texto-2); }
.mv-barras { display: flex; align-items: flex-end; gap: 6px; height: 76px; margin: var(--e-4) 0 0; padding: 0; list-style: none; }
.mv-barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100%; }
.mv-barra i { width: 100%; min-height: 3px; height: var(--h); border-radius: 5px; background: var(--preench-1); }
.mv-barra.is-meta i { background: var(--sucesso); }
.mv-barra.is-hoje i { box-shadow: inset 0 0 0 2px var(--texto-2); }
.mv-barra span { font: var(--t-legenda2); color: var(--texto-2); }
.mv-rodape { margin: var(--e-3) 0 0; font: var(--t-rodape); color: var(--texto-2); }
.mv-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.mv-acoes .botao { display: inline-flex; align-items: center; gap: 6px; }
.mv-acoes .botao [data-icon] { width: 17px; height: 17px; }
.mov-treino--toca {
  grid-template-columns: 46px 1fr auto;
  width: 100%; padding: 0; border: 0;
  background: none; color: inherit; text-align: left; cursor: pointer;
}
.mov-treino--toca .linha__seta { color: var(--texto-2); }
.mov-treino--toca:active { transform: scale(.99); }

/* A folha de registrar treino e passos (ui/treino.js). Os chips são de
   dedo: 44px de altura, como manda a régua de pronto (§9). */
.tr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-chips--curto { margin-top: var(--e-2); }
.tr-chip { position: relative; display: inline-flex; }
.tr-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tr-chip span {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px;
  font: 600 0.9375rem var(--fonte); color: var(--texto);
  background: var(--preench-2);
  border: 0; border-radius: var(--raio-capsula);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tr-chip input:checked + span { background: var(--destaque); color: var(--sobre-destaque); }
.tr-chip input:focus-visible + span { outline: 2px solid var(--texto-2); outline-offset: 2px; }
.tr-chips--curto .btn { min-height: 44px; }
.tr-gasto { margin: var(--e-4) 0 0; font: var(--t-rodape); color: var(--texto-2); }
/* A barra da folha de passos é verde, como o anel: azul, neste app, é água. */
.pas .agua-meta__barra span { background: var(--sucesso); }

/* A faixa do movimento na Hoje: o anel dos passos no lugar dos sete dias. */
.faixa-mov__anel { flex: none; position: relative; width: 34px; height: 34px; }
.faixa-mov__anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.faixa-mov__anel circle { fill: none; stroke-width: 6; }
.faixa-mov__trilho { stroke: var(--preench-2); }
.faixa-mov__arco { stroke: var(--sucesso); stroke-linecap: round; }
#view-movimento .grupo { margin-top: var(--e-5); }

/* ── Progresso (docs/plano-v3.md, §4) ─────────────────────── */

#view-historico > .cartao, #view-historico > .par { margin-top: 10px; }
#view-historico > .seg3 + .cartao { margin-top: 0; }
.pg-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); }
/* O Progresso por vir: os cartões em fantasma, a tracejado, apagados. */
.pg-porvir { display: grid; gap: var(--e-3); opacity: .55; }
.pg-porvir__cartao { pointer-events: none; }
.pg-porvir__barras { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-top: var(--e-3); }
.pg-porvir__barras i { flex: 1; height: var(--h); border-radius: 6px; border: 1.5px dashed var(--separador-forte); }
.pg-porvir__linha { display: block; width: 100%; height: 70px; margin-top: var(--e-2); }
.pg-porvir__linha path { fill: none; stroke: var(--separador-forte); stroke-width: 2.5; stroke-dasharray: 6 6; stroke-linecap: round; }
.vazio--curto { padding-top: var(--e-5); }
.vazio--curto .botao { margin-top: var(--e-4); }
.pg-cab > b { font: var(--t-destaque); }
.pg-cab > span { font: var(--t-rodape); color: var(--texto-2); }
.pg-cab > span b { color: var(--texto); font-weight: 600; }
.pg-cab > span.is-alinhado { color: var(--sucesso); font-weight: 600; }

.pg-graf { display: flex; align-items: flex-end; gap: 6px; height: 124px; margin-top: var(--e-4); }
.pg-graf--30 { gap: 3px; }
.pg-graf--90 { gap: 5px; }
.pg-col { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
/* a faixa encosta na da coluna ao lado: lê-se como uma faixa só, que sobe nos dias de treino */
.pg-col__faixa { position: absolute; left: -3px; right: -3px; background: color-mix(in srgb, var(--sucesso) 20%, transparent); }
.pg-graf--30 .pg-col__faixa { left: -1.5px; right: -1.5px; }
.pg-graf--90 .pg-col__faixa { left: -2.5px; right: -2.5px; }
.pg-col:first-child .pg-col__faixa { left: 0; }
.pg-col:last-child .pg-col__faixa { right: 0; }
/* A barra não ocupa a coluna inteira: 62 % de largura, centrada. Uma
   semana de barras coladas lê-se como um bloco de cor; com ar à volta
   lê-se como sete dias, que é o que ela é. */
.pg-col__barra { position: relative; width: 62%; margin: 0 auto; border-radius: 6px; background: var(--preench-2); transform-origin: bottom; }
.pg-graf--30 .pg-col__barra, .pg-graf--90 .pg-col__barra { width: 82%; }
.pg-graf--30 .pg-col__barra { border-radius: 3px; }
/* Dentro e fora da faixa têm cores diferentes porque são dois factos
   com nome, e não uma nota: o dono foi claro — "não é exatamente uma
   punição". O que mudou foi a largura da barra, não a cor. */
.pg-col__barra.is-ok { background: var(--sucesso); }
.pg-col__barra.is-fora { background: var(--atencao); }
.pg-col__barra.is-hoje { background: var(--preench-1); }
#view-historico.is-chegando .pg-col__barra { animation: pg-cresce 520ms var(--suave) both; }
@keyframes pg-cresce { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { #view-historico.is-chegando .pg-col__barra { animation: none; } }

.pg-rot { display: flex; margin-top: 6px; font: 500 0.6875rem var(--fonte); color: var(--texto-2); }
.pg-rot--dias { gap: 6px; }
.pg-rot--dias span { flex: 1; text-align: center; }
.pg-rot--pontas { justify-content: space-between; }
.pg-rot .is-hoje { color: var(--texto); font-weight: 600; }

.pg-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); margin-top: var(--e-3); padding-top: 10px; border-top: 0.5px solid var(--separador); }
.pg-resumo small { display: block; font: var(--t-legenda1); color: var(--texto-2); }
.pg-resumo b { font: 700 1.0625rem var(--fonte); letter-spacing: -.02em; }
.pg-resumo .pg-prot { color: var(--proteina); }
.pg-nota-rodape { margin: var(--e-2) 0 0; font: var(--t-legenda1); color: var(--texto-2); }

.pg-peso__graf { display: block; width: 100%; height: 100px; margin-top: var(--e-3); overflow: visible; }
.pg-peso__legenda { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px var(--e-3); margin-top: var(--e-2); font: var(--t-rodape); color: var(--texto-2); }
.pg-peso__legenda b { color: var(--texto); font-weight: 600; }
.pg-peso__leitura { margin: var(--e-3) 0 0; font: var(--t-subtitulo); color: var(--texto-2); }
.pg-peso__vazio { margin: var(--e-2) 0 var(--e-3); font: var(--t-subtitulo); color: var(--texto-2); }
.pg-peso .botao--sm { display: inline-flex; align-items: center; gap: 6px; }
.pg-peso .botao--sm [data-icon] { width: 16px; height: 16px; }

.pg-par .mini { cursor: default; }
.pg-nota { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pg-nota .mini__t { align-self: stretch; justify-content: center; }
.pg-anel { position: relative; width: 84px; height: 84px; margin-top: var(--e-2); }
.pg-anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pg-anel__trilho { fill: none; stroke: var(--preench-2); stroke-width: 9; }
.pg-anel__arco { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 700ms var(--suave); }
.pg-anel b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.625rem var(--fonte); letter-spacing: -.03em; }
.pg-nota__de { display: block; margin-top: 6px; font: var(--t-legenda1); color: var(--texto-2); }
.pg-meta { margin-top: 8px; }
.pg-meta__r { display: flex; justify-content: space-between; font: 500 0.75rem var(--fonte); }
.pg-meta__r span { color: var(--texto-2); }
.pg-meta .barra { height: 5px; margin-top: 3px; }

#view-historico .nutri-progresso { margin-top: 10px; }
#view-historico .nutri-progresso .t-subtitulo { display: block; margin-top: 2px; color: var(--texto-2); }
.pg-analise { display: flex; align-items: center; justify-content: center; gap: 6px; margin: var(--e-5) 0 var(--e-7); }
.pg-analise [data-icon] { width: 17px; height: 17px; }
.nutri-progresso__topo .pg-cab { flex: 1; }

/* ── as receitas guardadas (docs/plano-v3.md, §8) ─────────── */


.seg3__b [data-icon] { display: inline-grid; place-items: center; width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; line-height: 0; }
.seg3__b [data-icon] svg { width: 100%; height: 100%; }
.galeria__abas { margin-bottom: var(--e-3); }

.rc-titulo { margin: var(--e-5) 4px var(--e-2); font: 600 0.8125rem var(--fonte); color: var(--texto-2); }
.rc-titulo small { font-weight: 400; color: var(--texto-3); text-transform: none; letter-spacing: 0; }
.rc-lista { display: grid; gap: 10px; }
.rc {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 16px;
  gap: var(--e-3);
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 20px;
  background: var(--superficie);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--rapido) var(--suave);
}
.rc:active { transform: scale(.985); }
.rc__txt { min-width: 0; }
.rc__txt b { display: block; font: 600 1rem var(--fonte); letter-spacing: -.01em; }
.rc__txt small { display: block; margin-top: 1px; font: var(--t-rodape); color: var(--texto-2); }
.rc__estado { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font: 600 0.75rem var(--fonte); }
.rc__estado [data-icon] { width: 14px; height: 14px; }
.rc__estado.is-pronta { color: var(--sucesso); }
.rc__estado.is-falta { color: var(--texto-2); }
.rc__usos { display: block; margin-top: 2px; font: var(--t-legenda1); color: var(--texto-3); }
.rc .linha__seta { color: var(--texto-3); }
.rc-rodape { margin: var(--e-4) 4px var(--e-7); font: var(--t-legenda1); color: var(--texto-2); }

.cr--receita { padding: 0; background: none; }
.rc-falta, .rc-ajuste { display: flex; align-items: center; gap: 6px; margin: var(--e-3) 0 0; font: var(--t-rodape); color: var(--texto-2); }
.rc-falta [data-icon] { width: 15px; height: 15px; flex: none; }
.rc-ajuste { color: var(--destaque); }
/* Quatro ações numa folha de 343 px: em grade de três a quarta caía
   sozinha numa linha. Em fila que quebra, cada linha se enche, e a
   lixeira fica do tamanho de um ícone no fim da segunda. */
.rc-acoes { display: flex; flex-wrap: wrap; }
.rc-acoes .btn { flex: 1 1 auto; justify-content: center; }
.rc-acoes .cr__outra { flex: 0 0 44px; }
.rc-escalar { width: 100%; justify-content: center; }
.sheet__foot:has(.rc-escalar) { display: grid; gap: var(--e-2); }
.cr__rotina { grid-column: 1 / -1; }
/* Na folha, o nome já está no cabeçalho: dentro do cartão seria eco. */
.cr--receita .cr__titulo h3 { display: none; }
.cr--receita .cr__meta { margin-top: 0; }

/* ── Agora: o próximo passo (core/agora.js) ───────────────── */

.agora { padding: var(--e-4); }
.agora__titulo { margin: 0; font: var(--t-destaque); letter-spacing: -.01em; }
.agora__frase { margin: 4px 0 0; font: var(--t-subtitulo); color: var(--texto-2); }
/* Uma tira que rola, e não uma grelha que quebra: com três ações, a
   terceira caía para uma segunda linha e ficava debaixo das abas. Aqui
   ela fica ao lado, meio à vista, que é o convite para arrastar. */
.agora__acoes {
  display: flex;
  gap: var(--e-2);
  margin: var(--e-4) calc(-1 * var(--e-4)) 0;
  padding: 2px var(--e-4);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.agora__acoes::-webkit-scrollbar { display: none; }
.agora__acoes .btn { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; }
.agora__acoes .btn span:not([data-icon]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agora__acoes [data-icon] { width: 16px; height: 16px; flex: none; }
/* O tom e o assunto num cabeçalho de categoria, como os destaques do app
   Saúde: ícone e palavra na cor, em cima do título. Era uma tira de 3 px
   na borda esquerda — a digital mais batida de interface gerada, e que
   só dizia a cor. Um brilho da mesma cor no canto de cima fecha o tom
   sem pintar o cartão. */
.agora { --tom: var(--destaque); position: relative; overflow: hidden; }
.agora--atencao { --tom: var(--atencao); }
.agora--bom { --tom: var(--sucesso); }
.agora::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 70%;
  aspect-ratio: 1;
  /* No claro o mesmo brilho pesa o dobro sobre o branco: metade dele. */
  background: radial-gradient(closest-side, light-dark(color-mix(in srgb, var(--tom) 7%, transparent), color-mix(in srgb, var(--tom) 14%, transparent)), transparent);
  pointer-events: none;
}
.agora__olho {
  display: flex; align-items: center; gap: 5px;
  margin: 0 0 6px;
  font: 600 0.8125rem/1.2 var(--fonte);
  letter-spacing: -.005em;
  color: var(--tom);
}
.agora__olho [data-icon], .agora__olho svg { width: 15px; height: 15px; flex: none; }
.agora > * { position: relative; }

/* ── a sequência, numa faixa de uma linha ─────────────────── */

.faixa-seq {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  margin: var(--e-5) 0 var(--e-7);
  padding: 10px 14px;
  border: 0;
  border-radius: 18px;
  background: var(--superficie);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.faixa-seq:active { transform: scale(.99); }
.faixa-seq .semana { flex: none; width: 74px; gap: 3px; margin: 0; }
.faixa-seq .semana__dia { height: 18px; border-radius: 3px; }
.faixa-seq__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.faixa-seq__txt b { font: 600 0.875rem var(--fonte); }
.faixa-seq__txt small { font: var(--t-legenda1); color: var(--texto-2); }
.faixa-seq .linha__seta { color: var(--texto-3); }

/* A mesma faixa, para a cozinha (ui/views/hoje.js). No lugar dos sete
   dias, o cesto. */
.faixa-cozinha__marca {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--destaque) 14%, transparent);
  color: var(--destaque);
}
.faixa-cozinha__marca svg { width: 19px; height: 19px; }
.faixa-cozinha .faixa-seq__txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* O segmentado da câmera é o mesmo do resto (ui/controles.js). */
.camera .seg3 { margin-bottom: 0; }
/* O prato desenhado no lugar do ícone, quando não há foto. */
.ref__foto--prato { display: grid; place-items: center; background: var(--preench-3); }
.ref__foto--prato .prato { width: 100%; height: 100%; }

/* ── o toque responde ─────────────────────────────────────── */

/* Um cartão que se toca afunda um pouco. Era só em alguns; agora é a
   mesma resposta em todos, que é o que faz a tela parecer firme. */
.ref__corpo, .post__foto, .mini__corpo, .mini--micros, .rc, .faixa-seq,
.historias__dia, .cartao--botao, .en-chip, .grade__foto {
  transition: transform var(--rapido) var(--suave), opacity var(--rapido) linear;
}
.ref__corpo:active, .post__foto:active, .mini__corpo:active, .mini--micros:active,
.rc:active, .faixa-seq:active, .cartao--botao:active, .grade__foto:active { transform: scale(.985); }
.historias__dia:active, .en-chip:active { transform: scale(.94); }
.ref__comi:active, .ref__marca:active { transform: scale(.92); }

/* O anel dos passos desenha-se como o das calorias (ui/animar.js). */
.mov-anel__arco { transition: stroke-dashoffset var(--lento) var(--suave); }

@media (prefers-reduced-motion: reduce) {
  .mov-anel__arco, .barra > span { transition: none; }
}

/* ── trocar um ingrediente ────────────────────────────────── */

.troca__rotulo { margin: var(--e-4) 0 var(--e-2); padding-left: 4px; font: var(--t-rodape); font-weight: 600; color: var(--texto-2); }
.troca__rotulo:first-child { margin-top: 0; }
.troca__busca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2); align-items: end; margin-top: var(--e-3); }
.troca__busca .botao { display: inline-flex; align-items: center; gap: 6px; }
.troca__busca [data-icon] { width: 16px; height: 16px; }
.troca__gramas { margin-top: var(--e-2); }
.troca__resultado { min-height: 40px; margin-top: var(--e-4); }
.troca__espera { margin: 0; font: var(--t-subtitulo); color: var(--texto-2); }
.troca__resultado { transition: opacity var(--rapido, 150ms) linear; }
.troca__resultado.is-velho { opacity: .4; }
.troca__achado { display: grid; gap: 4px; padding: var(--e-3); border-radius: 16px; background: var(--superficie-2); }
.troca__achado b { font: 600 1rem var(--fonte); }
.troca__fonte { color: var(--texto-3); font: var(--t-legenda1); }
.cr__aviso { margin: var(--e-2) 0 0; font: var(--t-legenda1); color: var(--texto-2); }

/* ── de onde saiu o número (ui/recibo.js, ui/conferir-itens.js) ── */

.selo--medido { background: color-mix(in srgb, var(--sucesso) 16%, transparent); color: var(--sucesso); }
.selo--estimado { background: color-mix(in srgb, var(--atencao) 18%, transparent); color: var(--atencao); }
.feito__fonte {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 2px 0 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--texto-2);
  font: var(--t-legenda1);
  text-align: left;
}
.feito__fonte--acao { cursor: pointer; color: var(--texto); }
.feito__fonte--acao:active { opacity: .7; }

.conf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.conf__botao {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--superficie-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--rapido) var(--suave);
}
.conf__botao:active { transform: scale(.985); }
.conf__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conf__txt b { font: 600 0.9375rem var(--fonte); }
.conf__txt small { font: var(--t-rodape); color: var(--texto-2); }
.conf__item.is-estimado .conf__botao { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--atencao) 35%, transparent); }
.conf__nota { margin: var(--e-4) 0 0; font: var(--t-legenda1); color: var(--texto-2); }

/* ── marcar uma condição de saúde (ui/saude.js) ───────────── */

.cond { margin-top: var(--e-4); }
.cond__abrir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--superficie-2);
  font: 600 0.9375rem var(--fonte);
  cursor: pointer;
  list-style: none;
}
.cond__abrir::-webkit-details-marker { display: none; }
.cond__abrir [data-icon] { width: 16px; height: 16px; color: var(--texto-2); transition: transform var(--rapido) var(--suave); }
.cond[open] .cond__abrir [data-icon] { transform: rotate(180deg); }
.cond__busca { margin-top: var(--e-3); }
/* Uma lista agrupada, e não catorze caixas soltas: o grupo tem os cantos,
   as linhas têm o fio de meio pixel. Rola por dentro sem barra à vista. */
.cond__lista {
  display: grid; margin-top: var(--e-2); max-height: 46vh; overflow-y: auto;
  border-radius: 16px; background: var(--superficie-2);
  scrollbar-width: none;
}
.cond__lista::-webkit-scrollbar { display: none; }
.cond__op { width: 100%; padding: 12px 14px; border: 0; border-bottom: 0.5px solid var(--separador); background: none; text-align: left; cursor: pointer; }
.cond__op:last-child { border-bottom: 0; }
.cond__op:active { background: var(--preench-3); }
.cond__op .linha__seta { color: var(--destaque); }
.cond__vazio { margin: var(--e-3) 2px; font: var(--t-subtitulo); color: var(--texto-2); }

/* ── fotografar agora, confirmar depois (ui/fila-fotos.js) ── */

/* A terceira via, mais apagada que as outras duas: com três botões da
   mesma cor, ninguém sabe qual é o disparo. */
.camera__depois {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  width: 100%; padding: 8px; border: 0; background: none;
  color: var(--texto-2); font: 500 0.875rem var(--fonte); cursor: pointer;
}
.camera__depois [data-icon] { width: 17px; height: 17px; }

.fila { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.fila__item {
  display: flex; align-items: center; gap: var(--e-3);
  padding: 8px 10px; border-radius: 14px; background: var(--superficie-2);
}
.fila__foto { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--preench-3); }
.fila__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fila__txt b { font: 600 0.9375rem var(--fonte); }
.fila__txt small { font: var(--t-rodape); color: var(--texto-2); }
.fila__item .btn { flex: none; }
/* sem isto o flex encolhe o alvo do toque até aos 12 px */
.fila__tirar {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: none; color: var(--texto-3); cursor: pointer;
}
.fila__tirar [data-icon] { width: 18px; height: 18px; }

/* O embrulho de cada bloco da Hoje (ui/views/hoje.js): existe para o
   toque longo saber onde o dedo está, e não para desenhar nada. */
.bloco { display: contents; }

/* ── o check-in semanal (ui/checkin.js) ───────────────────── */

/* O cartão da Hoje aparece uma vez por semana e some quando ela fecha:
   por isso pode ser mais alto que os outros sem cansar ninguém. */
.semana-cartao { padding: var(--e-4); position: relative; overflow: hidden; }
/* O mesmo cabeçalho de categoria do cartão Agora, no verde de quem
   fechou alguma coisa; e o brilho no canto no lugar da tira lateral. */
.semana-cartao::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, light-dark(color-mix(in srgb, var(--sucesso) 7%, transparent), color-mix(in srgb, var(--sucesso) 13%, transparent)), transparent);
  pointer-events: none;
}
.semana-cartao > * { position: relative; }
.semana-cartao__olho { display: flex; align-items: center; gap: 5px; margin: 0; font: 600 0.8125rem/1.2 var(--fonte); color: var(--sucesso); }
.semana-cartao__olho [data-icon], .semana-cartao__olho svg { width: 15px; height: 15px; }
.semana-cartao__titulo { margin: 2px 0 0; font: var(--t-destaque); letter-spacing: -.01em; }
.semana-cartao__frase { margin: 4px 0 var(--e-4); font: var(--t-subtitulo); color: var(--texto-2); }
.semana-cartao .btn { display: inline-flex; align-items: center; gap: 6px; }
.semana-cartao [data-icon] { width: 16px; height: 16px; }

.sem__olho { margin: 0 0 var(--e-3); font: var(--t-legenda1); color: var(--texto-2); }

/* Os sete dias em sete pontos: cheio contou, meio teve registro. */
.sem__dias { display: flex; gap: 6px; }
.sem__dias i { flex: 1; height: 8px; border-radius: 4px; background: var(--preench-3); }
.sem__dias i.is-meio { background: color-mix(in srgb, var(--destaque) 45%, var(--preench-3)); }
.sem__dias i.is-cheio { background: var(--destaque); }
.sem__linha { margin: var(--e-2) 0 var(--e-4); font: var(--t-subtitulo); color: var(--texto-2); }
.sem__linha b { color: var(--texto); }

.sem__medias { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); }
.sem__medias div {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px; border-radius: 14px; background: var(--superficie-2);
}
.sem__medias b { font: 700 1.0625rem var(--fonte); }
.sem__medias small { font: var(--t-rodape); color: var(--texto-2); }

.sem__metas { display: grid; gap: 8px; margin-top: var(--e-4); }
.sem__meta { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: var(--e-3); }
.sem__meta-rot { font: var(--t-subtitulo); color: var(--texto-2); }
.sem__meta-barra { height: 6px; border-radius: 3px; background: var(--preench-3); overflow: hidden; }
.sem__meta-barra i { display: block; height: 100%; border-radius: 3px; background: var(--destaque); }
.sem__meta-num { font: 600 0.875rem var(--fonte); }
.sem__meta-num small { color: var(--texto-3); font-weight: 500; }

.sem__bloco { margin-top: var(--e-4); padding: 12px; border-radius: 16px; background: var(--superficie-2); }
.sem__bloco--vazio { background: none; padding: 12px 0 0; }
.sem__bloco-t { margin: 0; font: var(--t-rodape); font-weight: 600; color: var(--texto-2); }
.sem__bloco-n { margin: 4px 0 0; font: 700 1.5rem var(--fonte); letter-spacing: -.02em; }
.sem__bloco-n small { font: 500 0.8125rem var(--fonte); color: var(--texto-2); letter-spacing: 0; }
.sem__bloco-f { margin: 6px 0 0; font: var(--t-subtitulo); color: var(--texto-2); }
.sem__ajustar { width: 100%; margin-top: var(--e-3); }
.sem__campo { margin-top: var(--e-4); }

/* ── as descobertas, no Progresso (core/descobertas.js) ───── */

.pg-desc { padding: var(--e-4); display: grid; gap: 4px; }
.pg-desc > p { margin: 0; }
.pg-desc__lista { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; }
.pg-desc__lista li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 12px 0; }
.pg-desc__lista li + li { box-shadow: inset 0 .5px 0 var(--separador); }
.pg-desc__lista li:last-child { padding-bottom: 0; }
.pg-desc__icone {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: color-mix(in srgb, var(--destaque) 15%, transparent); color: var(--destaque);
}
.pg-desc__icone svg { width: 17px; height: 17px; }
.pg-desc__txt { display: grid; gap: 2px; min-width: 0; }
.pg-desc__lista b { font: 600 0.9375rem var(--fonte); }
.pg-desc__txt > span { font: var(--t-subtitulo); color: var(--texto-2); text-wrap: pretty; }
.pg-desc .btn { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.pg-desc .btn [data-icon] { width: 15px; height: 15px; }
/* A espera com prazo: a barra enche à medida que os dias entram. */
.pg-desc__barra { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--preench-3); overflow: hidden; }
.pg-desc__barra i { display: block; height: 100%; border-radius: 3px; background: var(--destaque); }

/* ── a retrospectiva do mês (ui/retrospectiva.js) ─────────── */

.mes-cartao { padding: var(--e-4); position: relative; overflow: hidden; }
.mes-cartao::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--destaque); opacity: .9;
}
.mes-cartao__olho { margin: 0; font: var(--t-rodape); font-weight: 600; color: var(--destaque); }
.mes-cartao__titulo { margin: 2px 0 0; font: var(--t-destaque); }
.mes-cartao__frase { margin: 4px 0 var(--e-4); font: var(--t-subtitulo); color: var(--texto-2); }
.mes-cartao__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); margin: var(--e-3) 0 var(--e-4); }
.mes-cartao__nums span { display: grid; gap: 2px; min-width: 0; }
.mes-cartao__nums b { font: 700 1.375rem/1.1 var(--fonte); letter-spacing: -.02em; }
.mes-cartao__nums small { font: var(--t-legenda1); color: var(--texto-2); }
.mes-cartao .btn { display: inline-flex; align-items: center; gap: 6px; }
.mes-cartao [data-icon] { width: 16px; height: 16px; }

/* O cartão na folha tem a mesma cara da imagem que sai dele. */
.mes { padding: var(--e-4); border-radius: var(--raio-cartao); background: var(--superficie-2); }
.mes__olho { margin: 0; font: var(--t-rodape); font-weight: 600; color: var(--texto-2); }
.mes__titulo { margin: 2px 0 var(--e-4); font: 800 1.75rem var(--fonte); letter-spacing: -.02em; }
/* Duas colunas, o número em cima e o que ele é por baixo, como o resumo
   do mês do Fitness: numa coluna só, seis números laranja seguidos
   liam-se como uma lista, e não como um mês. */
.mes__linhas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-3); }
.mes__linhas li { display: grid; gap: 2px; align-content: start; }
.mes__linhas b { font: 800 1.75rem/1.05 var(--fonte); letter-spacing: -.03em; color: var(--destaque); font-variant-numeric: tabular-nums; }
.mes__linhas span { font: var(--t-rodape); color: var(--texto-2); }
.mes__destaque { margin: var(--e-4) 0 0; font: 600 1rem var(--fonte); }
.mes__pe { margin: var(--e-3) 0 0; font: var(--t-rodape); color: var(--texto-3); }

/* ── o relatório para o profissional (ui/relatorio.js) ────── */

.rel {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto;
  padding: calc(var(--area-topo) + 56px) var(--margem) calc(var(--area-baixo) + 48px);
  background: var(--fundo);
}
.rel__barra {
  position: fixed; inset: 0 0 auto 0; z-index: 2;
  display: flex; justify-content: space-between; gap: var(--e-2);
  padding: calc(var(--area-topo) + 8px) var(--margem) 8px;
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
}
.rel__barra .btn { display: inline-flex; align-items: center; gap: 6px; }
.rel__barra [data-icon] { width: 15px; height: 15px; }
.rel__folha { max-width: 720px; margin: 0 auto; }
.rel__topo h1 { margin: 0 0 2px; font: 800 1.5rem var(--fonte); letter-spacing: -.02em; }
.rel__topo p { margin: 0; font: var(--t-rodape); color: var(--texto-2); }
.rel h2 { margin: var(--e-5) 0 var(--e-2); font: var(--t-rodape); font-weight: 600; color: var(--texto-2); }
.rel__linha {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--e-3);
  padding: 8px 0; border-bottom: 1px solid var(--separador);
  font: var(--t-subtitulo);
}
.rel__linha b { font-weight: 600; text-align: right; }
.rel__linha small { grid-column: 1 / -1; font: var(--t-rodape); color: var(--texto-2); }
.rel__nota { margin: var(--e-2) 0 0; font: var(--t-rodape); color: var(--texto-2); }
.rel__tabela { width: 100%; border-collapse: collapse; font: var(--t-rodape); }
.rel__tabela th { text-align: left; padding: 6px 4px; color: var(--texto-2); border-bottom: 1px solid var(--separador); }
.rel__tabela td { padding: 5px 4px; border-bottom: 1px solid var(--separador); }
.rel__tabela tr.is-baixo td:first-child { font-weight: 700; }
.rel__pe { margin-top: var(--e-5); padding-top: var(--e-3); border-top: 2px solid var(--texto); font: var(--t-rodape); color: var(--texto-2); }

/* Ao imprimir só existe o relatório, em preto no branco — é papel, ou
   um PDF que alguém vai abrir num computador. */
@media print {
  body.com-relatorio > *:not(.rel) { display: none !important; }
  .rel { position: static; padding: 0; background: #fff; color: #111; overflow: visible; }
  .rel__barra { display: none; }
  .rel h2 { color: #666; }
  .rel__linha { border-color: #eee; }
  .rel__nota, .rel__pe, .rel__topo p, .rel__tabela th { color: #444; }
  .rel__tabela td, .rel__tabela th { border-color: #eee; }
  .rel__pe { border-top-color: #111; }
  .rel section { break-inside: avoid; }
}

/* ── o primeiro dia: as três formas de registrar ──────────── */

.agora--ensina::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--destaque) 16%, transparent), transparent); }
.ensina { display: grid; gap: 8px; margin-top: var(--e-4); }
.ensina__via {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: var(--e-3);
  width: 100%; padding: 10px 12px; border: 0; border-radius: 14px;
  background: var(--superficie-2); color: inherit; text-align: left; cursor: pointer;
  transition: transform var(--rapido) var(--suave);
}
.ensina__via:active { transform: scale(.985); }
.ensina__icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--preench-3); color: var(--destaque); }
.ensina__icone [data-icon] { width: 18px; height: 18px; }
.ensina__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ensina__txt b { font: 600 0.9375rem var(--fonte); }
.ensina__txt small { font: var(--t-rodape); color: var(--texto-2); }

/* ── a linha do diferencial, no cartão do dia ─────────────── */

/* Um facto por vez; o toque troca. É a única linha da Hoje que fala do
   que o app é, e por isso fica discreta e nunca se move sozinha. */
.en-destaque {
  display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px;
  width: 100%; margin-top: var(--e-3); padding: 8px 10px;
  border: 0; border-radius: 12px; background: var(--preench-3); color: var(--texto-2);
  font: var(--t-rodape); text-align: left; cursor: pointer;
  transition: transform var(--rapido) var(--suave);
}
/* 34 px no desenho, 44 para o dedo: a área cresce por baixo, como nos
   outros controlos pequenos do app (docs/plano-design.md §9). */
.en-destaque { position: relative; }
.en-destaque::before { content: ""; position: absolute; inset: -5px 0; }
.en-destaque:active { transform: scale(.99); }
.en-destaque [data-icon] { width: 15px; height: 15px; color: var(--sucesso); }
.en-destaque__conta { font: var(--t-legenda1); font-style: normal; color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* ── procurar alimento e ler código de barras ─────────────── */

/* O campo de busca do iOS: largo, com a lupa dentro e o código de
   barras na ponta direita — o botão "Procurar" ao lado, curto. Antes o
   botão grande espremia o campo e o exemplo lia-se "arroz, frango gre". */
.busca__form { display: flex; gap: var(--e-2); align-items: center; }
.busca__campo {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 4px 0 11px;
  border-radius: 12px;
  background: var(--preench-3, rgb(118 118 128 / .24));
}
.busca__campo:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--destaque) 55%, transparent); }
.busca__lupa { flex: none; color: var(--texto-2); }
.busca__lupa svg { width: 18px; height: 18px; }
.busca__campo input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: none;
  color: var(--texto); font: var(--t-corpo);
}
.busca__campo input::-webkit-search-cancel-button { filter: grayscale(1); }
.busca__codigo {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border: 0; border-radius: 10px;
  background: none; color: var(--destaque); cursor: pointer;
}
.busca__codigo [data-icon], .busca__codigo svg { width: 21px; height: 21px; }
/* 38 px à vista, 44 ao dedo: a área de toque passa um pouco do desenho. */
.busca__codigo { position: relative; }
.busca__codigo::before { content: ""; position: absolute; inset: -3px; }
.busca__ir { flex: none; min-height: 44px; }
.busca__dia { margin: var(--e-2) 2px 0; font: var(--t-rodape); color: var(--texto-2); font-variant-numeric: tabular-nums; }
/* a quantidade numa linha: o campo e as porções prontas ao lado */
.busca__quanto { display: flex; align-items: center; gap: var(--e-2); }
.busca__quanto .fichas--rolar { flex: 1; min-width: 0; margin: 0; }
.busca__g {
  flex: none; display: flex; align-items: center; gap: 2px;
  height: 40px; padding: 0 12px 0 10px; border-radius: 12px;
  background: var(--preench-3, rgb(118 118 128 / .24));
  font: 600 1rem var(--fonte); color: var(--texto-2);
}
.busca__g input {
  width: 3.4em; border: 0; outline: 0; background: none;
  color: var(--texto); font: 600 1.0625rem var(--fonte); text-align: right;
  font-variant-numeric: tabular-nums;
}
.busca__g:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--destaque) 55%, transparent); }
/* as fichas rolam de lado em vez de partirem o nome em três linhas */
.busca .fichas--rolar .ficha, .troca .fichas--rolar .ficha { flex: none; white-space: nowrap; }

.codigo { display: grid; gap: var(--e-3); }
.codigo__visor {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--raio-cartao);
  overflow: hidden; background: #000; display: grid; place-items: center;
}
.codigo__visor video { width: 100%; height: 100%; object-fit: cover; }
.codigo__visor.is-sem-camera video { display: none; }
/* A mira não lê nada: diz onde pôr o código, que é metade do trabalho. */
.codigo__mira {
  position: absolute; inset: 34% 12%;
  border: 2px solid rgb(255 255 255 / .9); border-radius: 10px;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / .35);
}
.codigo__dica { margin: 0; text-align: center; font: var(--t-subtitulo); color: var(--texto-2); }

/* ── adicionar refeição, ingrediente a ingrediente ─────────── */

.refsec__add {
  display: grid; grid-template-columns: 20px 1fr; gap: 2px var(--e-3);
  width: 100%; margin-top: var(--e-3); padding: 12px 14px;
  border: 1px dashed var(--separador); border-radius: var(--raio-cartao);
  background: none; color: var(--texto-2); text-align: left; cursor: pointer;
  font: 600 0.9375rem var(--fonte);
  transition: border-color var(--rapido) var(--suave), color var(--rapido) var(--suave);
}
.refsec__add [data-icon] { width: 18px; height: 18px; grid-row: span 2; align-self: center; color: var(--destaque); }
.refsec__add small { grid-column: 2; font: var(--t-rodape); font-weight: 500; color: var(--texto-2); }
.refsec__add:active { border-color: var(--destaque); color: var(--texto); }

.montar { display: grid; gap: var(--e-3); }
.montar__itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.montar__item {
  display: grid; grid-template-columns: 1fr auto 32px; align-items: center; gap: var(--e-2);
  padding: 10px 12px; border-radius: 14px; background: var(--superficie-2);
}
.montar__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.montar__txt b { font: 600 0.9375rem var(--fonte); }
.montar__txt small { font: var(--t-rodape); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.montar__kcal { font: 600 0.9375rem var(--fonte); }
.montar__tirar { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--texto-3); cursor: pointer; }
.montar__tirar [data-icon] { width: 16px; height: 16px; }
.montar__total {
  display: grid; grid-template-columns: 1fr auto; gap: 4px var(--e-2); align-items: baseline;
  padding: 12px; border-radius: 14px; background: var(--preench-3);
}
.montar__total b { font: 700 1.125rem var(--fonte); }
.montar__total .pontos { grid-column: 1 / -1; }
.montar__vazio { margin: 0; font: var(--t-subtitulo); color: var(--texto-2); }
.montar__mais { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.montar__mais [data-icon] { width: 18px; height: 18px; }
.reg__mais { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 8px; margin-top: var(--e-3); }
.reg__mais [data-icon] { width: 18px; height: 18px; }

/* ── a receita que veio de um vídeo (ui/importar-receita.js) ── */

.rc-video {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: var(--e-3);
  width: 100%; margin-bottom: var(--e-4); padding: 12px 14px;
  border: 1px dashed var(--separador); border-radius: var(--raio-cartao);
  background: none; color: inherit; text-align: left; cursor: pointer;
}
.rc-video > [data-icon] { width: 22px; height: 22px; color: var(--destaque); }
.rc-video__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rc-video__txt b { font: 600 0.9375rem var(--fonte); }
.rc-video__txt small { font: var(--t-rodape); color: var(--texto-2); }
.rc-video:active { border-color: var(--destaque); }

.imp { display: grid; gap: var(--e-3); }
.imp__de { display: flex; align-items: center; gap: 8px; margin: 0; font: var(--t-rodape); font-weight: 600; color: var(--texto-2); }
.imp__de [data-icon] { width: 16px; height: 16px; color: var(--destaque); }
.imp textarea { min-height: 140px; resize: vertical; }

/* ── o que chega compartilhado (ui/importar-receita.js) ───── */

.partilha__saidas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.partilha__saidas .btn { display: inline-flex; align-items: center; gap: 6px; }
.partilha__saidas [data-icon] { width: 15px; height: 15px; }

/* ── quem pediu menos transparência ───────────────────────── */
/* O `--vidro-desfoque` já vira `none` sozinho (tokens.css), mas um fundo
   meio transparente continua a ser transparência: aqui os dois que
   restavam ficam opacos. */
@media (prefers-reduced-transparency: reduce) {
  .ref-foto__trocar { background: #000000; }
  .rel__barra { background: var(--fundo); }
}

/* ── as três festas (ui/celebracao.js) ────────────────────── */
/* Sóbrio de propósito: um ícone, um número grande e duas frases. Sem
   confete a cair, que é o que um app faz quando não tem nada medido
   para mostrar. */
.festa { display: grid; justify-items: center; gap: 4px; padding: var(--e-4) var(--e-3) var(--e-5); text-align: center; }
.festa__marca {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: var(--e-3);
  border-radius: 50%;
  background: color-mix(in srgb, var(--destaque) 16%, transparent);
  color: var(--destaque);
}
.festa__marca svg { width: 30px; height: 30px; }
/* A entrada: o selo brota com mola e solta um anel que se desfaz, uma
   vez — o "ding" visual das conquistas da Apple Fitness, sem confete.
   O número sobe logo atrás, meio passo depois. */
.festa__marca { position: relative; animation: festa-brota 620ms var(--mola, cubic-bezier(.34, 1.56, .64, 1)) both; }
.festa__marca::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--destaque);
  animation: festa-onda 900ms 180ms ease-out both;
  pointer-events: none;
}
.festa__numero { animation: festa-sobe 520ms 120ms var(--suave) both; }
.festa__titulo, .festa__frase { animation: festa-sobe 520ms 200ms var(--suave) both; }
@keyframes festa-brota { from { transform: scale(.4); opacity: 0; } }
@keyframes festa-onda { from { transform: scale(1); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
@keyframes festa-sobe { from { transform: translateY(10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .festa__marca, .festa__marca::after, .festa__numero, .festa__titulo, .festa__frase { animation: none; }
  .festa__marca::after { display: none; }
}
.festa__numero { margin: 0; font: 800 2.25rem var(--fonte); letter-spacing: -.03em; color: var(--destaque); font-variant-numeric: tabular-nums; }
.festa__titulo { margin: 0; font: var(--t-titulo3); }
.festa__frase { margin: var(--e-3) 0 0; max-width: 34ch; font: var(--t-subtitulo); color: var(--texto-2); text-wrap: pretty; }
.festa__nota { margin: var(--e-2) 0 0; max-width: 34ch; font: var(--t-rodape); color: var(--texto-2); }

/* ── antes e agora (ui/views/progresso.js) ────────────────── */
/* Três ou quatro linhas, cada uma com os dois números e a diferença. A
   direção nunca é dita só pela cor: há seta e sinal ao lado. */
.antes { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: var(--e-3); }
.antes__linha { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--e-3); align-items: baseline; }
.antes__rotulo { font: var(--t-subtitulo); color: var(--texto-2); }
.antes__valores { display: inline-flex; align-items: baseline; gap: 6px; justify-self: end; }
.antes__antes { font: 600 1rem var(--fonte); color: var(--texto-2); }
.antes__agora { font: 700 1.25rem var(--fonte); letter-spacing: -.01em; }
.antes__seta { color: var(--texto-3); }
.antes__seta svg { width: 14px; height: 14px; }
.antes__delta {
  grid-column: 2; justify-self: end;
  display: inline-flex; align-items: center; gap: 3px;
  font: 600 0.8125rem var(--fonte); color: var(--texto-2);
}
.antes__delta svg { width: 13px; height: 13px; }
.antes__delta--bom { color: var(--sucesso); }
.antes__delta--igual { color: var(--texto-2); }
.antes__delta--desce svg { transform: rotate(180deg); }

/* O mesmo contraste, na folha do mês (ui/retrospectiva.js). */
.mes-contra { margin-top: var(--e-4); }
.mes-contra__cab { margin: 0; font: var(--t-rodape); font-weight: 600; color: var(--texto-2); }

/* ── a folha da assinatura (ui/paywall.js) ─────────────────── */
.pw-motivo { margin: 0 0 var(--e-3); font: var(--t-subtitulo); color: var(--texto-2); text-wrap: pretty; }
.pw-estado {
  margin: 0 0 var(--e-4); padding: 10px 12px;
  border-radius: var(--raio-cartao);
  background: color-mix(in srgb, var(--destaque) 12%, transparent);
  font: 600 0.9375rem var(--fonte);
}
.pw-cab { margin: var(--e-4) 0 var(--e-2); font: var(--t-rodape); font-weight: 600; color: var(--texto-2); }
/* Os sete dias, com datas: o que acontece e quando, antes de acontecer. */
.pw-tempo { list-style: none; margin: 0; padding: 0; display: grid; }
.pw-tempo li {
  position: relative;
  display: grid; grid-template-columns: 12px 3.4em minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 8px 0; font: var(--t-subtitulo);
}
/* Os três momentos ligados por um trilho: lê-se como tempo a passar, e
   não como três linhas de uma tabela. */
.pw-tempo li:not(:last-child)::after {
  content: ""; position: absolute; left: 5px; top: calc(50% + 6px); height: 100%;
  width: 2px; border-radius: 1px; background: var(--separador-forte);
}
.pw-tempo li:first-child::after { background: linear-gradient(var(--destaque), var(--separador-forte)); }
.pw-tempo i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--separador-forte); align-self: center; }
.pw-tempo li:first-child i { background: var(--destaque); box-shadow: 0 0 0 4px var(--destaque-suave); }
.pw-tempo b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pw-tempo span { color: var(--texto-2); }
/* O pé da assinatura empilha: "Assinar · R$ 19,90/mês" não cabe ao lado
   de "Continuar" num telefone de 375 px, e "Já assinei" caía para fora
   da tela. A ação principal em cima, as outras por baixo. */
.sheet__foot:has([data-pw-fechar], [data-pw-assinar], [data-pw-teste], [data-pw-mao], [data-pw-restaurar], [data-pw-gerir]) { display: grid; gap: var(--e-2); }
.pw-preco { margin: var(--e-4) 0 0; font: var(--t-rodape); letter-spacing: var(--k-rodape); color: var(--texto-2); }
.pw-tempo { margin-bottom: var(--e-4); }
.sheet__foot [data-pw-restaurar] { min-height: 44px; }
.pw-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pw-lista li { display: flex; align-items: flex-start; gap: 8px; font: var(--t-subtitulo); }
.pw-lista [data-icon] { flex: none; width: 17px; height: 17px; margin-top: 2px; }
.pw-lista--paga [data-icon] { color: var(--destaque); }
.pw-lista--livre [data-icon] { color: var(--sucesso); }

/* A voz do assistente no cartão Agora (ui/recado.js). A frase dele vem
   em corpo normal; a linha de factos — o chão, quando não há modelo —
   vem menor e sem cor, para não se fazer passar por opinião. */
.agora__voz { margin: var(--e-2) 0 0; font: var(--t-subtitulo); color: var(--texto); text-wrap: pretty; }
.agora__voz--factos { font: var(--t-rodape); color: var(--texto-2); }

/* ══════════════════════════════════════════════════════════════
   A aba Treino e a sessão (27/09/2026)
   ══════════════════════════════════════════════════════════════ */

/* ── começar ──────────────────────────────────────────────── */
.tr-comecar { padding: var(--e-4); }
.tr-comecar__b { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; font-size: 1.0625rem; }
.tr-comecar__b [data-icon] { width: 20px; height: 20px; }
.tr-comecar__ficha {
  display: flex; align-items: center; gap: var(--e-3);
  width: 100%; min-height: 48px; margin-top: var(--e-3); padding: 0;
  border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.tr-comecar__ficha span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tr-comecar__ficha b { font: 600 0.9375rem var(--fonte); }
.tr-comecar__ficha small { font: var(--t-legenda1); color: var(--texto-2); }
.fi-comecar { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; margin-bottom: var(--e-5); }
.fi-comecar [data-icon] { width: 19px; height: 19px; }
.tr-comecar__vez { font: 600 0.6875rem/1.3 var(--fonte); font-style: normal; letter-spacing: .02em; text-transform: uppercase; color: var(--destaque); }
.tr-comecar.is-a-correr { display: flex; align-items: center; gap: var(--e-3); }
.tr-comecar__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tr-comecar__txt b { font: 600 1rem var(--fonte); }
.tr-comecar__txt small { font: var(--t-rodape); color: var(--texto-2); }

/* ── o que o corpo pede ───────────────────────────────────── */
.tr-pede { display: grid; grid-template-columns: 1fr auto; gap: var(--e-4); align-items: center; padding: 10px 0; }
.tr-pede + .tr-pede { box-shadow: inset 0 .5px 0 var(--separador); }
.tr-pede__txt { display: flex; flex-direction: column; min-width: 0; }
.tr-pede__txt b { font: 600 0.9375rem var(--fonte); }
.tr-pede__txt small { font: var(--t-legenda1); color: var(--texto-2); }
/* A semana do músculo contra o mínimo: onde está, e quanto falta. */
.tr-pede__barra { display: block; height: 5px; margin-top: 7px; border-radius: 3px; background: var(--preench-2, rgb(120 120 128 / .24)); overflow: hidden; }
.tr-pede__barra i { display: block; height: 100%; border-radius: inherit; background: var(--atencao); }
.tr-pede__falta {
  display: flex; flex-direction: column; align-items: flex-end;
  font: 700 1.25rem/1 var(--fonte); letter-spacing: -.02em; color: var(--destaque);
}
.tr-pede__falta small { margin-top: 3px; font: 500 0.6875rem var(--fonte); letter-spacing: 0; color: var(--texto-2); }

/* ── volume por músculo ───────────────────────────────────── */
.tr-vol { margin: 0; padding: 0; list-style: none; }
.tr-vol__l { display: grid; grid-template-columns: 92px 1fr 30px; gap: var(--e-3); align-items: center; margin-bottom: 9px; }
.tr-vol__r { font: var(--t-rodape); color: var(--texto-2); }
.tr-vol__b { position: relative; height: 12px; border-radius: 6px; background: var(--preench-3); overflow: hidden; }
.tr-vol__faixa { position: absolute; top: 0; bottom: 0; background: var(--preench-1); }
.tr-vol__v { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; background: var(--texto-2); }
.tr-vol__v.is-bom { background: var(--sucesso); }
.tr-vol__v.is-pouco { background: var(--atencao); }
.tr-vol__v.is-muito { background: var(--sis-indigo); }
.tr-vol__n { font: 600 0.8125rem var(--fonte); text-align: right; }

/* ── proteína contra volume ───────────────────────────────── */
.tr-prot { display: grid; grid-template-columns: 1fr auto; gap: var(--e-3); align-items: center; }
.tr-prot__b { height: 14px; border-radius: 7px; background: var(--preench-3); overflow: hidden; }
.tr-prot__b i { display: block; height: 100%; border-radius: 7px; background: var(--proteina); }
.tr-prot__n { font: 700 1.125rem var(--fonte); }
.tr-prot__n i { font: 400 0.8125rem var(--fonte); font-style: normal; color: var(--texto-2); }

/* ── fichas ───────────────────────────────────────────────── */
.linha--ficha { width: 100%; }
.fi-lista { margin: var(--e-4) 0; }
.fi-ex { display: grid; grid-template-columns: 1fr auto 32px; gap: var(--e-2); align-items: center; min-height: 48px; }
.fi-ex + .fi-ex { border-top: 0.5px solid var(--separador); }
.fi-ex__txt { display: flex; flex-direction: column; min-width: 0; }
.fi-ex__txt b { font: 600 0.9375rem var(--fonte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-ex__txt small { font: var(--t-legenda1); color: var(--texto-2); }
.fi-ex__sr { display: flex; align-items: center; gap: 5px; color: var(--texto-2); font: var(--t-rodape); }
.fi-ex__n, .fi-ex__r {
  width: 44px; min-height: 44px; padding: 0 6px;
  border: 0; border-radius: var(--raio-pequeno);
  background: var(--preench-3); color: var(--texto); font: 600 0.9375rem var(--fonte); text-align: center;
}
.fi-ex__r { width: 60px; }

/* ── a sessão: tela cheia ─────────────────────────────────── */
.sessao {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column;
  background: var(--fundo);
  animation: sessao-entra var(--medio) var(--mola);
}
@keyframes sessao-entra { from { transform: translateY(18px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sessao { animation: none; } }

.ses__topo {
  flex: none;
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-3); align-items: center;
  padding: calc(var(--area-cima) + 10px) var(--margem) 10px;
  border-bottom: 1px solid var(--separador);
  position: relative;
}
/* O quanto do treino já foi, no fio de baixo do topo. */
.ses__progresso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.ses__progresso i { display: block; height: 100%; background: var(--sucesso); border-radius: 0 2px 2px 0; transition: width var(--medio) var(--suave); }
.ses__nome { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 44px; border: 0; background: none; color: inherit; cursor: pointer; }
.ses__nome b { font: 600 1rem var(--fonte); }
.ses__nome span { font: 700 1.25rem var(--fonte); color: var(--sucesso); letter-spacing: -.02em; }
.ses__corpo { flex: 1; overflow-y: auto; padding: var(--e-4) var(--margem) 140px; }
.ses__conta { margin: 0 0 var(--e-4); font: var(--t-rodape); color: var(--texto-2); }

.ses-ex { margin-bottom: var(--e-6); }
.ses-ex__cab { display: flex; align-items: center; gap: var(--e-2); }
.ses-ex__nome { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 44px; justify-content: center; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.ses-ex__nome b { font: 600 1.0625rem var(--fonte); }
.ses-ex__nome small { font: var(--t-legenda1); color: var(--texto-2); }
.ses-ex__nota, .ses-ex__antes { margin: 6px 0 0; font: var(--t-legenda1); color: var(--texto-2); }
.ses-ex__nota { color: var(--destaque); }
.ses-ex__acoes { display: flex; gap: var(--e-2); margin-top: 6px; }
.ses-ex__acoes .botao { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; }
.ses-ex__acoes [data-icon] { width: 15px; height: 15px; }

.ses-tabela { width: 100%; margin-top: var(--e-3); border-collapse: collapse; }
.ses-tabela th { font: var(--t-legenda2); color: var(--texto-2); text-align: center; font-weight: 600; padding-bottom: 4px; }
.ses-tabela th:first-child { width: 52px; }
.ses-tabela th:last-child { width: 52px; }
.ses-serie td { padding: 3px; }
.ses-serie__n {
  width: 44px; height: 44px; border-radius: 12px;
  border: 0; background: var(--preench-3); color: var(--texto-2);
  font: 600 0.9375rem var(--fonte); cursor: pointer;
}
.ses-serie__campo {
  width: 100%; min-height: 44px; padding: 0 8px;
  border: 0; border-radius: 12px;
  background: var(--preench-3); color: var(--texto);
  font: 600 1.0625rem var(--fonte); text-align: center;
}
.ses-serie__ok {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  border: 0; background: var(--preench-3); color: var(--texto-2); cursor: pointer;
}
.ses-serie__ok svg { width: 20px; height: 20px; }
.ses-serie.is-feita .ses-serie__ok { background: var(--sucesso); color: #FFFFFF; }
.ses-serie.is-feita .ses-serie__campo { border-color: transparent; background: color-mix(in srgb, var(--sucesso) 12%, transparent); }

/* ── o descanso ───────────────────────────────────────────── */
.ses__descanso { position: absolute; left: var(--margem); right: var(--margem); bottom: calc(var(--area-baixo) + 14px); }
.ses-desc {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--e-2); align-items: center;
  min-height: 56px; padding: 0 10px;
  border-radius: 18px; background: var(--superficie);
  box-shadow: var(--sombra-flutuante);
}
.ses-desc::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: color-mix(in srgb, var(--sucesso) 16%, transparent); }
.ses-desc > * { position: relative; }
.ses-desc b { font: 700 1.375rem var(--fonte); text-align: center; }
.ses-desc__b { min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--texto-2); font: 600 0.875rem var(--fonte); cursor: pointer; }
.ses-desc__b--fim { color: var(--destaque); }

/* ── a busca de exercício, os recordes, as anilhas ────────── */
.ses-busca { max-height: 52vh; overflow-y: auto; margin-top: var(--e-2); }
.ses-busca__item {
  display: flex; align-items: center; gap: var(--e-3);
  width: 100%; min-height: 52px; padding: 8px 2px;
  border: 0; border-bottom: 1px solid var(--separador); background: none; color: inherit; text-align: left; cursor: pointer;
}
.ses-busca__item span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ses-busca__item b { font: 600 0.9375rem var(--fonte); }
.ses-busca__item small { font: var(--t-legenda1); color: var(--texto-2); }
.ses-busca__eq { font: var(--t-legenda1); color: var(--texto-2); }

.ses-rec { display: flex; flex-wrap: wrap; gap: var(--e-5); margin-bottom: var(--e-4); }
.ses-rec small { display: block; font: var(--t-legenda1); color: var(--texto-2); }
.ses-rec b { font: 700 1.375rem var(--fonte); letter-spacing: -.02em; }
.ses-pr { display: flex; align-items: center; gap: 7px; margin: 0 0 var(--e-4); font: var(--t-subtitulo); color: var(--sucesso); }
.ses-pr [data-icon] { width: 18px; height: 18px; }

.anilhas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: var(--e-4) 0 var(--e-2); }
.anilhas__a {
  display: grid; place-items: center;
  min-width: 46px; min-height: 46px; padding: 0 8px;
  border-radius: 50%; background: var(--preench-2);
  font: 700 0.9375rem var(--fonte);
}

/* ── a ponte para o prato ─────────────────────────────────── */
.depois { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--separador); }
.depois__t { margin: 0; font: 600 0.9375rem var(--fonte); }
.depois__f { margin: 4px 0 0; font: var(--t-subtitulo); color: var(--texto-2); }
.depois__alvo { display: flex; align-items: center; gap: var(--e-3); margin-top: var(--e-3); padding: 10px 12px; border-radius: 14px; background: var(--preench-3); }
.depois__alvo [data-icon] { width: 18px; height: 18px; color: var(--destaque); }
.depois__alvo b { display: block; font: 600 0.9375rem var(--fonte); }
.depois__alvo small { font: var(--t-legenda1); color: var(--texto-2); }

/* ══════════════════════════════════════════════════════════════
   O visor: a câmera ao vivo (ui/visor.js, 27/09/2026)

   Tela cheia de ponta a ponta, os modos numa tira de texto no fundo, o
   disparo ao centro e a galeria à esquerda — o padrão do Google Lens,
   que é o certo para uma câmera que também escolhe o que vai fazer com
   a foto.

   O guia é o que faz o trabalho: em vez de uma frase a dizer o que
   enquadrar, uma forma recorta a imagem e escurece o resto. Quem olha
   percebe o que cabe ali sem ler.
   ══════════════════════════════════════════════════════════════ */

.visor {
  position: fixed;
  inset: 0;
  z-index: 95;
  overflow: hidden;
  background: #000000;
  animation: visor-entra var(--medio) var(--suave);
}
@keyframes visor-entra { from { opacity: 0; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .visor { animation: none; } }

.visor__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── o guia ───────────────────────────────────────────────── */

.visor__guias { position: absolute; inset: 0; pointer-events: none; }

/* O escurecido de fora vem de uma sombra enorme à volta da forma: o
   que está dentro não é tocado, e não há duas camadas a somar. */
.visor-guia {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / .46), inset 0 0 0 1px rgb(255 255 255 / .3);
  transition: width var(--medio) var(--suave), height var(--medio) var(--suave), border-radius var(--medio) var(--suave);
}
.visor-guia::before, .visor-guia::after { content: ""; position: absolute; }

/* O prato: um anel por dentro, que é onde a comida deve caber. */
.visor-guia--circulo { width: 72vw; height: 72vw; max-width: 330px; max-height: 330px; border-radius: 50%; }
.visor-guia--circulo::before {
  inset: 13%;
  border-radius: 50%;
  border: 1px dashed rgb(255 255 255 / .18);
}

/* A geladeira: duas prateleiras. */
.visor-guia--larga { width: 86vw; height: 54vw; max-width: 410px; max-height: 290px; border-radius: 22px; }
.visor-guia--larga::before, .visor-guia--larga::after {
  left: 9%; right: 9%; height: 1px; background: rgb(255 255 255 / .18);
}
.visor-guia--larga::before { top: 37%; }
.visor-guia--larga::after { top: 65%; }

/* O rótulo e a ficha: uma folha com linhas escritas. */
.visor-guia--alta { width: 66vw; height: 84vw; max-width: 310px; max-height: 410px; border-radius: 18px; }
.visor-guia--alta::before {
  left: 20%; right: 20%; top: 32%; height: 1px;
  background: rgb(255 255 255 / .18);
  box-shadow: 0 11px 0 rgb(255 255 255 / .18), 0 22px 0 rgb(255 255 255 / .18);
}

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

.visor__topo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: var(--e-3);
  align-items: center;
  padding: calc(var(--area-topo) + 12px) var(--margem) 12px;
}
.visor__dica {
  margin: 0;
  text-align: center;
  font: var(--t-subtitulo);
  letter-spacing: var(--k-subtitulo);
  color: rgb(255 255 255 / .82);
  text-shadow: 0 1px 8px rgb(0 0 0 / .5);
}

/* ── o fundo: a tira de modos e o disparo ─────────────────── */

.visor__baixo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--margem) calc(var(--area-baixo) + 18px);
}
/* O segmentado é o do app (ui/controles.js); aqui só troca de roupa
   para viver sobre a imagem: vidro escuro em vez de preenchimento. */
.visor .seg3 {
  margin: 0 auto var(--e-4);
  max-width: 330px;
  background: rgb(0 0 0 / .38);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.visor .seg3__marca { background: rgb(255 255 255 / .2); }
.visor .seg3__b { color: rgb(255 255 255 / .66); }
.visor .seg3__b.is-on { color: #FFFFFF; }
.visor__acoes {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  justify-items: center;
}
/* Os redondos são os do app, em vidro; sobre vídeo, escuros. */
.visor .botao-redondo.vidro { background: rgb(0 0 0 / .4); color: #FFFFFF; }
.visor__vazio { display: block; width: 44px; height: 44px; }
[data-lado-direito] { display: grid; place-items: center; }

/* O disparo: o anel branco de sempre, que toda a gente já sabe o que é. */
.visor__disparo {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  padding: 0;
  border: 3px solid rgb(255 255 255 / .9);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform var(--rapido) var(--suave);
}
.visor__disparo span {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform var(--rapido) var(--suave), background var(--rapido) var(--suave);
}
.visor__disparo:active span { transform: scale(.88); background: rgb(255 255 255 / .8); }

/* Com o visor aberto, a casca toda sai da frente. */
.is-visor .abas,
.is-visor .btn-camera,
.is-visor .topo,
.is-visor .sessao-barra { visibility: hidden; }

/* ── Receitas: as fichas por objetivo e as prontas do Pro ───── */
.rc-abas { margin-bottom: var(--e-3); }
.rc-abas .ficha { flex: none; white-space: nowrap; }
.rc-abas .ficha small { font: inherit; opacity: .6; }
.rc-nota {
  display: flex; align-items: center; gap: 6px;
  margin: 0 4px var(--e-3);
  font: var(--t-rodape); color: var(--texto-2);
}
.rc-nota [data-icon], .rc-ajuste [data-icon] { width: 15px; height: 15px; flex: none; color: var(--destaque); }
.rc-vazio { margin: var(--e-5) 4px; font: var(--t-subtitulo); color: var(--texto-2); }
.rc .rc__txt small + small { margin-top: 0; }
.rc .linha__seta [data-icon="lock-simple"] { color: var(--texto-3); }
/* Enquanto a tabela carrega: o nome já, o prato e os números depois. */
.rc--medindo { cursor: default; grid-template-columns: 60px minmax(0, 1fr); }
.rc__prato {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--preench-2);
  animation: rc-pulsa 1.2s ease-in-out infinite;
}
@keyframes rc-pulsa { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .rc__prato { animation: none; } }