/* Dieta - planos alimentares no padrão Elite AS */
.diet-workspace {
  gap: 0.95rem;
}

/* [29.1] O CSS da aba antiga (herói grande, contadores, filtro próprio, cartão
   de quatro fatos, painel Acompanhamento) saiu com a aba. A nova mora no fim
   deste arquivo. As cópias antigas em base.css/styles.css são achado velho. */

/* ——— Student diet protocol hero ——— */













/* ——— Diet tab no perfil do aluno (plano ativo em destaque) ——— */
.student-diet-card .student-diet-protocol.is-active {
  border-color: rgb(from var(--brand-soft) r g b / 0.42);
  background: rgb(from var(--brand-soft) r g b / 0.05);
}


/* ——— Student diet plan card ——— */

.sdpc-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: start;
}

.sdpc-title strong {
  display: block;
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.14;
}

.sdpc-title span {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.sdpc-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

/* ——— Student meal cards ——— */























/* ═══════════════════════════════════════════════
   ABA DIETA DO ALUNO (perfil do gestor) — padrão premium
   selo na cor do tema + resumo em chips + refeições agrupadas
   ═══════════════════════════════════════════════ */
.dp-create-btn {
  white-space: nowrap;
}

.dp-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.9rem;
  padding: 0.85rem;
  border-radius: 1rem;
  background: rgb(from var(--brand-soft) r g b / 0.05);
  border: 1px solid rgb(from var(--brand-soft) r g b / 0.42);
  box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.18);
}

.dp-hero-seal {
  display: inline-grid;
  width: clamp(2.9rem, 12vw, 3.4rem);
  height: clamp(2.9rem, 12vw, 3.4rem);
  place-items: center;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.dp-hero-seal svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: currentColor;
}

.dp-hero-info {
  min-width: 0;
}

.dp-hero-label {
  display: block;
  color: var(--brand-strong);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dp-hero-title {
  display: block;
  margin-top: 0.1rem;
  color: var(--ink);
  font-size: 1.16rem;
  /* Mesmo peso do título dos heróis das demais abas (.ev-hero-title). */
  font-weight: 750;
  line-height: 1.14;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-hero-objective {
  /* Até 2 linhas como o .ev-hero-objective: um objetivo real mais longo
     aparece por inteiro em vez de cortado numa única linha. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
  overflow: hidden;
}

/* Resumo premium (kcal/dia · Refeições · Proteína) em chips. */
.dp-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.dp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.14rem;
  padding: 0.62rem 0.4rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.dp-stat strong {
  color: var(--ink);
  /* Mesmo tamanho do número dos chips das demais abas (.ev-stat). */
  font-size: clamp(1.05rem, 4.4vw, 1.35rem);
  font-weight: 750;
  line-height: 1;
}

.dp-stat > span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.dp-stat.is-gold {
  border-color: rgb(from var(--brand-soft) r g b / 0.34);
  background: rgb(from var(--brand-soft) r g b / 0.08);
}

.dp-stat.is-gold strong {
  color: var(--brand-strong);
}

.dp-notes {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.7rem;
  border-left: 2px solid rgb(from var(--brand-soft) r g b / 0.4);
  border-radius: 0 0.5rem 0.5rem 0;
  background: rgb(from var(--brand-soft) r g b / 0.05);
  color: var(--muted);
  font-style: italic;
}

.dp-group {
  margin-top: 0.95rem;
}

.dp-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.dp-group-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
}

.dp-group-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

@media (max-width: 28rem) {
  .dp-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dp-hero > .badge {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 68rem) {
}

@media (max-width: 57.99rem) {






  .diet-plan-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .diet-plan-head > .badge,
  .diet-plan-head > .action-menu {
    grid-column: 2;
    justify-self: start;
  }

  .diet-insights-grid {
    grid-template-columns: 1fr;
  }


}

@media (max-width: 28rem) {
}

/* [29.4] O CSS do montador antigo (cabeçalho de formulário, cartão de totais
   no corpo, refeição com número âmbar e rodapé de soma) saiu com ele. O novo
   está no fim deste arquivo, junto do resto da linguagem da Dieta. */

/* food search */
.mp-food-search-wrap { display: flex; flex-direction: column; gap: 0.7rem; }

.mp-food-search-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  color: inherit;
  font-size: 0.88rem;
}

.mp-food-search-input:focus-visible { border-color: var(--dourado); outline: none; box-shadow: 0 0 0 3px rgb(from var(--brand-soft) r g b / 0.3); }

.mp-food-search-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 240px;
  overflow-y: auto;
}

.mp-food-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.42rem 0.55rem;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
}

.mp-food-row:hover { background: rgba(255,255,255,0.05); border-color: var(--borda); }

.mp-food-row strong { font-size: 0.83rem; }
.mp-food-row span { font-size: 0.72rem; color: var(--muted); }

/* [29.3] A folha de visualização morreu: o plano por dentro é uma TELA.
   O CSS dela está no fim deste arquivo. */

/* [28.3] a busca do montador: de onde vem cada alimento, e as ações por linha */
.mp-food-origem {
  margin-left: 0.3rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mp-food-acao {
  margin-left: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-strong);
  font: inherit;
  font-size: 0.74rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.mp-food-acao.is-apagar { color: var(--erro); }

.mp-food-novo {
  width: 100%;
  margin: 0.4rem 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   [29.0] A LINGUAGEM VISUAL DA DIETA.
   A) O cartão é o do Financeiro: canto 16, fundo e borda do cartão. Nada de
      cartão dentro de cartão.
   B) O número tem presença: kcal grande com a unidade pequena e apagada.
   C) A BARRA DE MACRO: 5px empilhada (proteína · carboidrato · gordura) com
      as gramas embaixo. As TRÊS CORES são três das seis de tipo do [14B.1]
      (base.css): proteína = --aval, carboidrato = --outro, gordura =
      --retorno. NENHUMA COR NOVA — bloco29-guardas confere.
   F) Uma cor de marca por tela.
   ═══════════════════════════════════════════════════════════════════════ */
.macro-barra {
  display: flex;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.macro-barra > span {
  display: block;
  height: 100%;
}

.macro-barra.is-vazia > span {
  width: 0 !important;
}

.macro-p { background: var(--aval); }
.macro-c { background: var(--outro); }
.macro-g { background: var(--retorno); }

.macro-gramas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin-top: 0.45rem;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.2;
}

.macro-grama {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.macro-ponto {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════════════════
   [29.1] A ABA PRINCIPAL DA DIETA.
   A) Título 22px como as outras abas; o fato à direita; "Novo plano
      alimentar" âmbar de largura inteira, canto 12.
   C) A busca da linha toda, 42px; D) as pílulas na linha do Filtrar
      (rolador com esmaecido — a mesma pílula das Atualizações).
   E) Grupos com rótulo puxado por fio e contagem à direita.
   F) O plano é um cartão; o do grupo vencido tem borda âmbar fraca.
   H) A linha de fato com seta no fim.
   ═══════════════════════════════════════════════════════════════════════ */
.library-hero.dieta-hero.dieta-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 0.6rem !important;
}

.library-hero.dieta-hero.dieta-hero h2 {
  margin: 0.16rem 0 0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

.dieta-hero-fato {
  padding-bottom: 0.15rem;
  color: var(--dim);
  font-size: 13px;
  white-space: nowrap;
}

.dieta-page > .dieta-novo {
  width: 100%;
  min-height: 48px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 15px;
  font-weight: 700;
}

.dieta-page .search-filter-row {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dieta-page .search-filter-row .pattern-search-field {
  flex: 1 0 100%;
  width: 100%;
  max-width: none;
  min-height: 42px;
}

.dieta-page .search-filter-row .filter-btn {
  flex: 0 0 auto;
  min-height: 34px;
  height: 34px;
  padding: 0 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.dieta-resultados {
  display: grid;
  gap: 0.6rem;
}

.dieta-grupo {
  display: grid;
  gap: 0.5rem;
}

.dieta-grupo + .dieta-grupo {
  margin-top: 0.5rem;
}

.dieta-grupo-cabeca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dieta-grupo-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dieta-grupo-fio {
  flex: 1 1 auto;
  height: 1px;
  background: var(--borda);
}

.dieta-grupo-n {
  color: var(--dim);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.dieta-lista {
  display: grid;
  gap: 0.6rem;
}

.dieta-cartao {
  position: relative;
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: var(--card);
}

.dieta-cartao.is-vencida {
  border-color: rgba(var(--brand-rgb), 0.22);
}

.dieta-cartao-corpo {
  display: grid;
  gap: 0.65rem;
  width: 100%;
  padding: 0.85rem 0.9rem;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dieta-cartao-corpo:active {
  background: rgb(from var(--brand-soft) r g b / 0.06);
}

.dieta-cartao-topo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-right: 2.1rem;
}

.atz-avatar.is-38 {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  font-size: 0.78rem;
}

.dieta-cartao-texto {
  display: grid;
  flex: 1 1 auto;
  gap: 0.12rem;
  min-width: 0;
}

.dieta-cartao-nome {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dieta-cartao-objetivo {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.2;
}

.dieta-cartao-direita {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 0.12rem;
  text-align: right;
}

.dieta-cartao-atraso {
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.dieta-cartao-adesao {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.dieta-cartao-sub {
  color: var(--dim);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

/* O fio atravessa o cartão de ponta a ponta (margem negativa). */
.dieta-cartao-fio {
  display: block;
  height: 1px;
  margin: 0 -0.9rem;
  background: var(--borda);
}

.dieta-cartao-base {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.dieta-kcal {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  white-space: nowrap;
}

.dieta-kcal strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.dieta-kcal small {
  color: var(--dim);
  font-size: 11px;
}

.dieta-cartao-menu {
  position: absolute;
  top: 0.75rem;
  right: 0.6rem;
}

.dieta-sem-plano {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0.5rem 0;
  border: 0;
  border-top: 1px solid var(--borda);
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.dieta-sem-plano svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* [29.2 C] A SETA da linha de ação (só as folhas que a pedem). O ícone já vem
   apagado pelo `is-de-objeto` do [14B.4 C]: numa folha com cabeçalho, nenhuma
   linha é "a" ação — a ação é o âmbar de cima. */
.acao-seta {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--dim);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════════════════
   [29.3] O PLANO POR DENTRO — uma tela, não uma folha. Volta em texto e o
   selo no canto (os dois do [24.6]); a linha do aluno; o cartão da META
   como herói; o da ADESÃO; e as refeições em cartões com trilho.
   ═══════════════════════════════════════════════════════════════════════ */
.dieta-tela {
  gap: 0.85rem;
  padding-bottom: 1rem;
}

.dieta-aluno {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.atz-avatar.is-42 {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  font-size: 0.85rem;
}

.dieta-aluno-texto {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}

.dieta-aluno-nome {
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
}

.dieta-aluno-fatos {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.3;
}

/* O cartão da tela é o mesmo cartão da lista: canto 16, fundo e borda do
   cartão, e nada de cartão dentro de cartão. */
.dieta-tela .dieta-cartao {
  padding: 0.9rem;
}

.dieta-rotulo-ambar,
.dieta-rotulo {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dieta-rotulo-ambar { color: var(--brand-strong); }
.dieta-rotulo { color: var(--dim); }

.dieta-meta-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.dieta-numerao {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

.dieta-numerao strong {
  color: var(--ink);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.dieta-numerao small {
  color: var(--dim);
  font-size: 12px;
}

.dieta-meta-soma {
  display: grid;
  justify-items: end;
  gap: 0.1rem;
  text-align: right;
}

.dieta-meta-soma-rotulo {
  color: var(--dim);
  font-size: 13px;
}

.dieta-meta-soma-valor {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

/* [29.3 C/D] Nos dois cartões a barra tem 6px. */
.dieta-meta .macro-barra,
.dieta-adesao-barra {
  height: 6px;
}

.dieta-adesao-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.dieta-adesao-conta {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.dieta-adesao-conta strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.dieta-adesao-conta > span {
  color: var(--dim);
  font-size: 13px;
}

.dieta-adesao-vazio {
  display: block;
  margin-top: 0.3rem;
  color: var(--dim);
  font-size: 13px;
}

.dieta-adesao-pct {
  color: var(--brand-strong);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.dieta-adesao-barra {
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.dieta-adesao-barra > span {
  display: block;
  height: 100%;
  background: var(--brand);
}

.dieta-adesao-nota {
  margin: 0.55rem 0 0;
  color: var(--dim);
  font-size: 11px;
  line-height: 1.35;
  opacity: 0.75;
}

.dieta-refeicoes {
  display: grid;
  gap: 0.6rem;
}

/* O TRILHO: a hora na coluna da esquerda, o fio vertical, o conteúdo à
   direita. É o mesmo desenho do montador ([29.4]). */
.dieta-refeicao {
  display: grid;
  grid-template-columns: 52px 1px minmax(0, 1fr);
  align-items: stretch;
  gap: 0 0.75rem;
}

.dieta-refeicao-hora {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.dieta-trilho {
  width: 1px;
  background: var(--borda);
}

.dieta-refeicao-corpo {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.dieta-refeicao-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.dieta-refeicao-nome {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.dieta-refeicao-kcal {
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.dieta-alimentos {
  display: grid;
  gap: 0.3rem;
}

/* Colunas fixas: o nome à esquerda, a quantidade e o kcal alinhados à
   direita — o olho desce a lista sem reler. */
.dieta-alimento {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px 46px;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
}

.dieta-alimento-nome {
  min-width: 0;
  overflow-wrap: break-word;
}

.dieta-alimento-nome.is-apagado { color: var(--dim); }

.dieta-alimento-qtd,
.dieta-alimento-kcal {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.dieta-refeicao-nota {
  margin: 0;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.4;
}

.dieta-observacao {
  margin: 0;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.45;
}

/* F) O rodapé fixo: "Enviar ao aluno" é 1,35 vez a largura do "Editar". */
.evaluate-footer.dieta-rodape {
  grid-template-columns: 1fr 1.35fr;
}

/* [32.2] A BARRA FLUTUAVA NO MEIO DA TELA, e o cartão das refeições rolava
   POR BAIXO dela. A barra sempre foi `position: fixed` — o que a soltou do
   fundo da tela foi um ancestral com transform: um `position: fixed` dentro
   de um elemento transformado deixa de se prender à TELA e passa a se prender
   ao ELEMENTO. O ancestral é `.content-area.is-entering`, e a correção da
   causa está em base.css, ao lado do mesmo bug que já tinha sido consertado
   uma vez para `.view`. Aqui ficam só as duas coisas que são da Dieta: o
   fundo OPACO ([32.2 C]) e o espaço embaixo ([32.2 B]). */
.dieta-tela .evaluate-footer.dieta-rodape {
  position: fixed;
  left: 0;
  right: 0;
  /* [32.2 C] fundo opaco: nada de conteúdo aparecendo através. */
  background: var(--bg, #0D0D0D);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* [32.2 B] E o conteúdo ganha embaixo o tamanho da barra, para a última
   refeição não ficar escondida atrás dela. */
/* A barra mede ~70 e flutua a uma altura de nav acima do pé da tela: o espaço
   embaixo tem de cobrir as duas coisas, senão a última refeição fica atrás. */
.dieta-tela .evaluate-footer-spacer {
  height: calc(var(--bottom-nav-height, 4.22rem) + var(--safe-bottom, 0px) + 6.4rem);
}

/* ═══════════════════════════════════════════════════════════════════════
   [29.4] O MONTADOR. A folha sobe quase ao topo; o cabeçalho diz o nome do
   plano e de quem ele é; os campos são dois pares; a refeição é um cartão
   com o mesmo trilho do [29.3]; e o rodapé fixo empilha o total do dia, a
   barra de macro, as gramas e o âmbar.
   ═══════════════════════════════════════════════════════════════════════ */
#mealPlanSheet .mp-sheet-panel {
  height: calc(100dvh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
}

.mp-cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* [G1] O fechar fica na PRIMEIRA LINHA do cabeçalho: com o bloco de duas
     linhas ao lado, isso quer dizer alinhar os centros. */
  align-items: center;
  gap: 0.6rem;
}

.mp-cabeca-texto {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.mp-titulo {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  outline: none;
}

.mp-titulo::placeholder { color: var(--dim); }

.mp-titulo:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgb(from var(--brand-soft) r g b / 0.5);
}

/* O aluno é uma linha de texto apagada que, tocada, é o próprio seletor. */
.mp-aluno {
  position: relative;
  display: block;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.3;
}

.mp-aluno select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  cursor: pointer;
}

.mp-fechar.icon-button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 999px;
  padding: 0;
}

.mp-form { display: block; }

/* B) Dois pares, com o rótulo em 11px apagado. */
.mp-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* [30.8 B] 10px de folga entre as duas caixas do par — elas estavam se
     tocando. */
  gap: 0.6rem 10px;
  padding: 0.7rem 1.1rem 0.9rem;
}

.mp-campo {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.mp-campo > span {
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mp-campo select,
.mp-campo input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.mp-campo select:focus-visible,
.mp-campo input:focus-visible {
  border-color: var(--brand);
  outline: none;
}

/* [32.1] O CAMPO DE DATA MOSTRAVA DOIS VALORES AO MESMO TEMPO. O [30.8] pôs o
   texto curto do app ao lado do seletor nativo — mas o nativo continuou sendo
   uma caixa visível, desenhando o valor DELE por extenso, no formato do
   sistema ("16 de set. de 2026"). Dois textos, não um texto errado: o curto em
   cinza fora da caixa, o por extenso quebrado em quatro linhas dentro dela, e
   a caixa crescendo para caber — o par inteiro desalinhava.
   A CAIXA passa a ser a moldura, o TEXTO do app é o único que se vê, e o
   seletor nativo fica invisível por cima dela, captando o toque ([32.1 B]).
   Ele continua sendo o seletor: não existe calendário escrito à mão aqui. */
.mp-campo-data > .ali-caixa {
  min-height: 44px;
  padding: 0 2.2rem 0 0.55rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.mp-campo-data .mp-data-texto {
  display: block;
  width: 100%;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
  /* [32.1 D] se não couber, a caixa CORTA — ela não cresce nem quebra. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-campo-data > .ali-caixa > input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: transparent;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
}

.mp-campo-data > .ali-caixa:focus-within {
  border-color: var(--brand);
}

.mp-secao {
  display: grid;
  gap: 0.6rem;
  padding: 0 0.85rem 1.2rem;
}

.mp-secao-cabeca { align-items: center; }

/* O âmbar de ação em texto: "+ Refeição" e "+ Adicionar alimento". */
.mp-acao-ambar {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-strong);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.mp-meals {
  display: grid;
  gap: 0.6rem;
}

/* D) A refeição é um cartão com trilho, como no [29.3]. */
/* [30.6 D] As folgas do cartão encolhem para o NOME crescer: cada pixel que
   sai daqui é um pixel a mais para "Batata doce cozida" caber inteiro. */
.mp-meal-card {
  display: grid;
  grid-template-columns: 62px 1px minmax(0, 1fr);
  align-items: stretch;
  gap: 0 0.5rem;
  padding: 0.75rem 0.6rem;
}

.mp-meal-hora { display: block; }

.mp-meal-time-input {
  width: 62px;
  height: 34px;
  padding: 0 0.3rem;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.mp-meal-time-input:focus-visible { border-color: var(--brand); outline: none; }

.mp-meal-corpo {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.mp-meal-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.mp-meal-name-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.1rem 0.2rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  outline: none;
}

.mp-meal-name-input:focus-visible { box-shadow: 0 0 0 2px rgb(from var(--brand-soft) r g b / 0.5); }

.mp-meal-kcal-sum {
  flex: 0 0 auto;
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* [30.7 C] "sem alimento" é um fato apagado, não um número. */
.mp-meal-kcal-sum.is-vazia {
  font-size: 12px;
  font-weight: 400;
}

.mp-meal-menu-btn { flex: 0 0 auto; }

.mp-food-list {
  display: grid;
  gap: 0.3rem;
}

/* [30.6] Nome · caixinha da quantidade COM A UNIDADE DENTRO (66) · kcal.
   O "×" saiu da linha: ele espremia o nome, e remover vive no "…".
   [32.5 C] A COLUNA DO KCAL TEM LARGURA FIXA (52) e cabe um número grande com
   ponto de milhar — "98.000" mede ~44px em 13px tabular. A folga entre as
   três é mínima e o NOME é quem cede espaço primeiro (minmax(0,1fr)) — as
   duas da direita nunca se encostam. O que estourava não era o kcal: era a
   UNIDADE, que saía da caixinha por cima dele ("100 col. sop8800"). */
.mp-food-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px 52px;
  align-items: center;
  gap: 0.35rem;
}

.mp-food-name {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A caixinha é UMA caixa com duas coisas dentro: o número que se digita e a
   unidade, apagada, logo ao lado — "2 un", "150 g". */
.mp-food-caixa {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  width: 66px;
  height: 32px;
  padding: 0 0.25rem;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  /* [32.5 B] o que não couber é CORTADO aqui dentro: "100 col. sopa" vira
     "100 col…" e não sai por cima da coluna do kcal, como saía. */
  overflow: hidden;
}

.mp-food-qty-input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  outline: none;
  /* o NÚMERO é o que não pode ser cortado: ele tem o seu mínimo e a unidade
     é que encolhe. O valor inteiro continua no campo ao tocar para editar. */
  flex: 1 1 auto;
  min-width: 2.1rem;
  text-overflow: ellipsis;
}

.mp-food-caixa:focus-within { border-color: var(--brand); }

.mp-food-unit {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--dim);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-food-kcal {
  color: var(--dim);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* E) ENQUANTO SE MEXE NA QUANTIDADE: a caixinha e o kcal daquela linha em
   âmbar. Não é alerta — é a tela apontando onde a conta mudou. */
.mp-food-qty-input.is-editando { color: var(--brand-strong); }

.mp-food-item:has(.mp-food-qty-input.is-editando) .mp-food-caixa { border-color: var(--brand); }

.mp-food-kcal.is-editando { color: var(--brand-strong); }

.mp-add-food-btn {
  justify-self: start;
  margin-top: 0.1rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--borda);
  width: 100%;
  text-align: left;
}

/* F) O rodapé fixo, empilhado. */
.mp-sheet-footer {
  display: grid;
  gap: 0.6rem;
}

.mp-total {
  display: grid;
  gap: 0.4rem;
}

.mp-total-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.mp-total-rotulo {
  color: var(--dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mp-total-numero {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.mp-total-numero strong {
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.mp-total-meta {
  color: var(--dim);
  font-size: 13px;
}

.mp-total-barra {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.mp-total-barra > span {
  display: block;
  height: 100%;
  background: var(--brand);
}

/* Passar da meta NÃO é vermelho: a barra enche e a diferença é escrita. */
.mp-total-acima {
  color: var(--dim);
  font-size: 12px;
}

.mp-total-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  color: var(--dim);
  font-size: 12px;
}

/* [30.9 C] A letra é a etiqueta; a grama é o que se lê. */
.mp-macro-letra { color: var(--dim); }

.mp-total-macros strong {
  color: var(--ink);
  font-weight: 700;
}

.mp-salvar {
  width: 100%;
  min-height: 48px;
}

@media (min-width: 40rem) {
  /* A folga entre as duas caixas do par é 10 em qualquer aparelho ([30.8 B]);
     no tablet só a linha respira mais. */
  .mp-campos { gap: 0.75rem 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   [29.5] A BIBLIOTECA DE ALIMENTOS. Mesma linguagem da Dieta: título de 22,
   âmbar de largura inteira, busca de 42 e pílulas. O cartão é BAIXO (canto
   14): o nome com a etiqueta de origem, o kcal da porção-base embaixo, e os
   três macros à direita como ponto colorido e número.
   ═══════════════════════════════════════════════════════════════════════ */
.ali-lista {
  display: grid;
  gap: 0.5rem;
}

.ali-cartao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 14px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ali-cartao.is-meu { border-color: rgba(var(--brand-rgb), 0.22); }

.ali-cartao:active { background: rgb(from var(--brand-soft) r g b / 0.06); }

.ali-texto {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.ali-nome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.ali-etiqueta {
  flex: 0 0 auto;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--dim);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.ali-etiqueta.is-meu {
  background: rgba(var(--brand-rgb), 0.14);
  color: var(--brand-strong);
}

.ali-kcal {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.ali-kcal strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.ali-kcal small {
  color: var(--dim);
  font-size: 11px;
}

.ali-macros {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.6rem;
}

.ali-macro {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.ali-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
  margin: 0.2rem 0 0;
  color: var(--dim);
  font-size: 11px;
}

.ali-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.ali-legenda .macro-ponto {
  width: 7px;
  height: 7px;
}

.ali-ver {
  display: grid;
  gap: 0.5rem;
}

.ali-ver-nota {
  margin: 0;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.45;
}

.ali-ver-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 40px;
  border-top: 1px solid var(--borda);
  color: var(--dim);
  font-size: 13px;
}

.ali-ver-linha strong {
  color: var(--ink);
  font-weight: 600;
}

.ali-ver .primary-action {
  width: 100%;
  min-height: 48px;
  margin-top: 0.4rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   [30.1–30.5] A FOLHA DO ALIMENTO E A BUSCA. As duas abriam como um cartão
   que subia do pé da tela, deixando à mostra o cabeçalho e o X da folha de
   trás — dois títulos e dois X. Agora cobrem: um cabeçalho, um X.
   ═══════════════════════════════════════════════════════════════════════ */

/* O escurecido do fundo de qualquer modal vai a 0,72: quando ele aparece, é
   para apagar o que está atrás, não para deixá-lo legível. */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.72);
}

/* [30.2] Os dois botões num rodapé de 86 que nunca sai da tela; "Cancelar"
   com 116 e "Salvar alimento" ocupando o resto. O conteúdo rola por baixo. */
.modal-de-alimento .modal-foot {
  min-height: 86px;
  gap: 0.6rem;
  padding: 0.85rem 1rem calc(0.85rem + var(--safe-bottom, 0px));
}

.modal-de-alimento .modal-foot .secondary-action {
  flex: 0 0 116px;
  width: 116px;
  min-width: 116px;
}

.modal-de-alimento .modal-foot .primary-action { flex: 1 1 auto; }

/* [30.3] Seis campos de largura inteira não cabem em 844: o formulário vira
   três linhas. Campo de 44, rótulo de 11/600. */
.ali-form {
  display: grid;
  gap: 0.7rem;
}

.ali-linha {
  display: grid;
  gap: 10px;
}

.ali-linha-porcao { grid-template-columns: minmax(0, 1fr) 116px; }

.ali-linha-macros { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ali-campo {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.ali-campo > span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
}

.ali-campo > span .macro-ponto {
  width: 7px;
  height: 7px;
}

.ali-campo input,
.ali-campo select {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 0.6rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.ali-campo input:focus-visible,
.ali-campo select:focus-visible {
  border-color: var(--brand);
  outline: none;
}

/* A caixa que carrega um campo E a marca dele (a unidade, a setinha, o
   calendário) sem que um encoste no outro. */
.ali-caixa {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.ali-caixa > input,
.ali-caixa > select {
  padding-right: 3.1rem;
  appearance: none;
  -webkit-appearance: none;
}

.ali-sufixo,
.campo-marca {
  position: absolute;
  right: 0.6rem;
  pointer-events: none;
}

.ali-sufixo {
  color: var(--dim);
  font-size: 12px;
  font-style: normal;
}

.campo-marca {
  width: 16px;
  height: 16px;
  color: var(--dim);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ali-gramas,
.ali-nota-porcao {
  margin: -0.25rem 0 0;
  color: var(--dim);
  font-size: 11px;
  line-height: 1.4;
}

.ali-nota-porcao { margin-top: 0.15rem; }

/* [31.1 A] APAGAR ALIMENTO: a linha de 52 no fim do formulário, abaixo dos
   campos e acima do rodapé fixo. E ela é VERMELHA de propósito — o [27.3 B]
   tirou o vermelho do "Sair" porque sair não destrói nada; este destrói, e
   não tem volta. É o único lugar da Dieta onde o vermelho aparece. */
.ali-apagar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 52px;
  margin-top: 0.4rem;
  padding: 0 0.1rem;
  border: 0;
  border-top: 1px solid var(--borda);
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.ali-apagar svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.ali-apagar:active { opacity: 0.6; }

/* [30.4] O "+ Novo alimento" era um botão SEM COR DECLARADA, e botão sem cor
   no iPhone sai no azul do sistema — cor que não existe no Corefy. Agora é
   uma faixa de 46 na cor da marca, e o texto diz o que ela faz. */
.mp-food-criar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  height: 46px;
  border: 1px solid rgba(var(--brand-rgb), 0.28);
  border-radius: 12px;
  background: rgba(var(--brand-rgb), 0.09);
  color: var(--brand-strong);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.mp-food-criar-mais {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* [30.5 D] A linha da busca: 58, o nome com a etiqueta, e o valor em dois
   andares à direita. Nenhuma ação escrita: tocar adiciona. */
.mp-food-search-wrap {
  display: grid;
  gap: 0.6rem;
}

.mp-food-search-input {
  width: 100%;
  min-height: 42px;
  padding: 0 0.75rem;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.mp-food-search-input:focus-visible { border-color: var(--brand); outline: none; }

.mp-food-pilhas { padding-right: 0; }

.mp-food-search-list {
  display: grid;
  gap: 0;
  max-height: none;
}

.mp-food-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 58px;
  padding: 0.5rem 0;
  border: 0;
  border-top: 1px solid var(--borda);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mp-food-search-list .mp-food-row:first-child { border-top: 0; }

.mp-food-row:active { background: rgb(from var(--brand-soft) r g b / 0.06); }

.mp-food-row-nome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.mp-food-row-valor {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 0.1rem;
  text-align: right;
}

.mp-food-row-valor strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mp-food-row-valor small {
  color: var(--dim);
  font-size: 11px;
}

/* [30.5 C] A explicação que aparece UMA vez, no fim da lista. */
.mp-food-explica {
  margin: 0.2rem 0 0;
  color: var(--dim);
  font-size: 11px;
  line-height: 1.4;
}

/* [30.1 A] A FOLHA DE CIMA FICA MESMO EM CIMA. As folhas da Dieta que abrem
   sobre o montador (a busca e o formulário de alimento) precisam de uma camada
   acima da folha de trás: as duas estavam empatadas em 1090, e no empate quem
   pinta por cima é quem vem depois no HTML — o montador. */
.modal.modal-de-busca-alimento,
.modal.modal-de-alimento {
  z-index: 1200;
}