@charset "UTF-8";
/* =============================================================================
   FORJA: CSS da tela 08 (substituir refeição, extra, dia livre) e da busca de
   alimento (static/js/telas/refeicao.js e busca-alimento.js)
   -----------------------------------------------------------------------------
   Só o que o forja.css não tem: o bloco O PLANO DIZIA, os três ladrilhos de
   entrada, o cartão da foto com scrim e chip, o painel de 4 macros, a linha
   de item com stepper compacto e chips, o cartão compacto da refeição salva,
   as faixas do dia livre e o layout da busca dentro da camada. Botões, chips,
   selos, campos, checkbox, switch, barra e esqueleto vêm do design system.
   Nenhum hex solto: tudo em token, salvo preto/branco com alpha.
   ============================================================================= */

/* --- Ritmo vertical da tela -------------------------------------------------- */

.fj-ref {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-8);
  padding-block-start: var(--fj-e-4);
}

.fj-ref .fj-secao { margin-block: var(--fj-e-4) 0; }

/* --- O PLANO DIZIA ------------------------------------------------------------ */

.fj-ref-plano__topo { gap: var(--fj-e-6); }

.fj-ref-plano__totais {
  font-size: var(--fj-fs-sm);
  color: var(--fj-txt-2);
  white-space: nowrap;
}

.fj-ref-plano__ja { font-size: var(--fj-fs-xs); align-self: center; }

.fj-ref-plano__lista {
  list-style: none;
  margin: var(--fj-e-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.fj-ref-plano__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--fj-e-6);
  min-block-size: var(--fj-toque);
  padding-block: var(--fj-e-3);
  border-top: 1px solid var(--fj-borda-sutil);
}

.fj-ref-plano__item:first-child { border-top: 0; }

.fj-ref-plano__nome {
  font-size: var(--fj-fs-md);
  font-weight: var(--fj-w-semi);
  color: var(--fj-txt-1);
  min-inline-size: 0;
  overflow-wrap: anywhere;
  transition: color var(--fj-dur-rapida) var(--fj-ease-saida);
}

.fj-ref-plano__kcal {
  font-size: var(--fj-fs-xs);
  font-weight: var(--fj-w-semi);
  color: var(--fj-txt-3);
  white-space: nowrap;
}

/* "não comi" marcado: o nome rebaixa, sem tachado e sem vermelho. */
.fj-ref-plano__item.is-nao-comi .fj-ref-plano__nome { color: var(--fj-txt-3); }

/* A label inteira é o alvo (checkbox de 22 com 44 de toque + o texto). */
.fj-ref-plano__check {
  display: inline-flex;
  align-items: center;
  gap: var(--fj-e-5);
  min-block-size: var(--fj-toque);
  padding-inline-start: var(--fj-e-4);
  cursor: pointer;
  white-space: nowrap;
}

.fj-ref-plano__check-txt {
  font-size: var(--fj-fs-xs);
  font-weight: var(--fj-w-semi);
  color: var(--fj-txt-3);
}

.fj-ref-plano__dica {
  margin-block-start: var(--fj-e-6);
  font-size: var(--fj-fs-xs);
  line-height: var(--fj-lh-corpo);
}

/* Empilhados: "Comi como estava" a 17px não cabe em meia coluna de 350 px
   sem cortar, e a saída barata não pode ser a que aperta. */
.fj-ref-plano__saidas {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-5);
  margin-block-start: var(--fj-e-8);
}

.fj-ref-plano__saidas .fj-btn { inline-size: 100%; }

/* --- COMI DIFERENTE: os três ladrilhos ---------------------------------------- */

.fj-ref-entradas__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fj-e-5);
}

.fj-ref-entrada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fj-e-4);
  min-block-size: 104px;
  padding: var(--fj-e-7) var(--fj-e-4);
  border-radius: var(--fj-r-xl);
  background: var(--fj-superficie);
  border: 1px solid var(--fj-borda);
  color: var(--fj-txt-1);
  text-align: center;
  transition: background var(--fj-dur-rapida) var(--fj-ease-saida),
              transform var(--fj-dur-instante) var(--fj-ease-saida);
}

.fj-ref-entrada:hover:not(:disabled) { background: var(--fj-superficie-2); }
.fj-ref-entrada:active:not(:disabled) { transform: scale(.985); }
.fj-ref-entrada:disabled { opacity: var(--fj-desativado-opacidade); cursor: not-allowed; }

.fj-ref-entrada__txt {
  font-size: var(--fj-fs-sm);
  font-weight: var(--fj-w-forte);
  line-height: var(--fj-lh-apert);
}

.fj-ref-entrada__sub {
  font-size: var(--fj-fs-3xs);
  line-height: var(--fj-lh-apert);
  color: var(--fj-txt-3);
}

.fj-ref-entradas__nota {
  margin-block-start: var(--fj-e-5);
  font-size: var(--fj-fs-xs);
  line-height: var(--fj-lh-corpo);
}

/* --- A FOTO ------------------------------------------------------------------- */

.fj-ref-foto-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-6);
}

.fj-ref-foto {
  position: relative;
  aspect-ratio: 350 / 186;
  background: var(--fj-superficie-baixa);
}

.fj-ref-foto__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.fj-ref-foto__vazia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fj-e-4);
  block-size: 100%;
  color: var(--fj-txt-3);
  font-size: var(--fj-fs-sm);
}

.fj-ref-foto__vazia svg { inline-size: 28px; block-size: 28px; }

.fj-ref-foto__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 45%);
}

.fj-ref-foto .fj-chip {
  position: absolute;
  inset-block-end: var(--fj-e-7);
  inset-inline-start: var(--fj-e-7);
}

.fj-ref-foto__chip-erro {
  background: rgba(11, 7, 20, .72);
  border-color: transparent;
  color: var(--fj-txt-1);
}

.fj-ref-foto__refazer {
  position: absolute;
  inset-block-end: var(--fj-e-7);
  inset-inline-end: var(--fj-e-7);
}

/* "Analisando…": o brilho do chip pulsa enquanto a IA olha o prato. */
.fj-chip.is-analisando svg { animation: fj-ref-pulso 1.1s ease-in-out infinite; }

@keyframes fj-ref-pulso {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

.fj-ref-foto__status { padding-inline: var(--fj-e-2); }

/* --- CONFERE PRA MIM? ---------------------------------------------------------- */

.fj-ref-revisao {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-6);
}

.fj-ref-revisao__titulo { margin-block-start: var(--fj-e-4); }

.fj-ref-revisao__obs { font-size: var(--fj-fs-sm); line-height: var(--fj-lh-corpo); }

.fj-ref-revisao__perguntas {
  margin: 0;
  padding-inline-start: var(--fj-e-9);
  font-size: var(--fj-fs-sm);
  line-height: var(--fj-lh-corpo);
  color: var(--fj-txt-2);
}

.fj-ref-revisao__mantidos,
.fj-ref-revisao__promessa {
  font-size: var(--fj-fs-xs);
  line-height: var(--fj-lh-corpo);
}

.fj-ref-revisao__promessa { text-align: center; }

/* --- A lista de itens ----------------------------------------------------------- */

.fj-ref-itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-5);
}

.fj-ref-item {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-6);
  padding: var(--fj-e-7) var(--fj-e-8);
  border-radius: var(--fj-r-xl);
  background: var(--fj-superficie);
  border: 1px solid var(--fj-borda);
}

.fj-ref-item__topo {
  display: flex;
  align-items: center;
  gap: var(--fj-e-6);
}

/* O checkbox mora numa label com alvo próprio; o nome não vira alvo do
   checkbox para o toque no nome não desmarcar o item sem querer. */
.fj-ref-item__topo > .fj-checkbox { margin-inline: var(--fj-e-4) var(--fj-e-2); }

.fj-ref-item .fj-item__titulo { white-space: normal; overflow-wrap: anywhere; }
.fj-ref-item .fj-item__meta { white-space: normal; }

/* Fora do total: rebaixado, sem tachado. */
.fj-ref-item.is-fora .fj-item__titulo { color: var(--fj-txt-3); }
.fj-ref-item.is-fora .fj-ref-stepper,
.fj-ref-item.is-fora .fj-ref-item__chips { opacity: .55; }

.fj-ref-item__remover { color: var(--fj-txt-3); }
.fj-ref-item__remover svg { inline-size: 20px; block-size: 20px; }

.fj-ref-item__pergunta {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-5);
  padding: var(--fj-e-6) var(--fj-e-7);
  border-radius: var(--fj-r-lg);
  background: rgba(255, 255, 255, .04);
  font-size: var(--fj-fs-sm);
  line-height: var(--fj-lh-corpo);
}

.fj-ref-item__aviso { margin: 0; }

.fj-ref-item__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fj-e-4) var(--fj-e-3);
}

/* Stepper compacto: − | valor editável | +. O do design system tem 30px de
   número e 16 de padding; numa lista de 4 itens isso vira meia tela. */
.fj-ref-stepper {
  display: grid;
  grid-template-columns: var(--fj-toque) 1fr var(--fj-toque);
  align-items: center;
  gap: var(--fj-e-5);
}

.fj-ref-stepper__btn {
  display: grid;
  place-items: center;
  inline-size: var(--fj-toque);
  block-size: var(--fj-toque);
  border-radius: var(--fj-r-lg);
  border: 1px solid var(--fj-borda);
  background: transparent;
  color: var(--fj-txt-1);
  transition: background var(--fj-dur-rapida) var(--fj-ease-saida),
              transform var(--fj-dur-instante) var(--fj-ease-saida);
}

.fj-ref-stepper__btn svg { inline-size: 20px; block-size: 20px; }
.fj-ref-stepper__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
.fj-ref-stepper__btn:active:not(:disabled) { transform: scale(.92); }
.fj-ref-stepper__btn:disabled { opacity: var(--fj-desativado-opacidade); cursor: not-allowed; }

.fj-ref-stepper__caixa {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--fj-e-2);
  min-block-size: var(--fj-toque);
  padding-inline: var(--fj-e-4);
  border-radius: var(--fj-r-lg);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--fj-borda);
}

.fj-ref-stepper__valor {
  inline-size: 5ch;
  min-block-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: right;
  font-family: var(--fj-fonte-num);
  font-size: var(--fj-fs-2xl);
  font-weight: var(--fj-w-forte);
  font-variant-numeric: tabular-nums;
  color: var(--fj-txt-1);
}

/* --- Painel de 4 macros ---------------------------------------------------------- */

.fj-ref-macros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fj-e-7);
}

.fj-ref-macros__col {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-4);
  min-inline-size: 0;
}

.fj-ref-macros__valor {
  font-size: var(--fj-fs-xl);
  line-height: var(--fj-lh-1);
  white-space: nowrap;
}

.fj-ref-macros__rodape,
.fj-ref-macros__faixa {
  margin-block-start: var(--fj-e-6);
  font-size: var(--fj-fs-xs);
  line-height: var(--fj-lh-corpo);
}

/* --- Pesei / hora / gatilho ----------------------------------------------------- */

.fj-ref-opcoes .fj-linha { cursor: pointer; }

.fj-ref-opcoes__hora .fj-input {
  inline-size: auto;
  min-inline-size: 7ch;
  min-block-size: var(--fj-toque);
  padding-inline: var(--fj-e-5);
  border-radius: var(--fj-r-md);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--fj-borda);
  font-family: var(--fj-fonte-num);
  font-variant-numeric: tabular-nums;
  color: var(--fj-txt-1);
  color-scheme: dark;
}

.fj-ref-gatilho__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fj-e-4) var(--fj-e-3);
}

/* --- Reanalisar com uma dica ------------------------------------------------------ */

.fj-ref-reanalisar {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-4);
}

.fj-ref-reanalisar__enviar,
.fj-busca__usar {
  inline-size: auto;
  padding-inline: var(--fj-e-6);
  font-size: var(--fj-fs-sm);
  font-weight: var(--fj-w-forte);
  color: var(--fj-acento-txt);
}

.fj-ref-acoes { padding-block-end: var(--fj-e-6); }

/* --- Refeição salva: card compacto, sem imagem ------------------------------------- */

.fj-ref-salvo__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.fj-ref-salvo__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fj-e-6);
  padding-block: var(--fj-e-3);
  border-top: 1px solid var(--fj-borda-sutil);
  font-size: var(--fj-fs-md);
}

.fj-ref-salvo__item:first-child { border-top: 0; }
.fj-ref-salvo__nome { color: var(--fj-txt-1); min-inline-size: 0; overflow-wrap: anywhere; }
.fj-ref-salvo__meta { font-size: var(--fj-fs-xs); color: var(--fj-txt-3); white-space: nowrap; }

.fj-ref-salvo__totais {
  margin-block-start: var(--fj-e-6);
  padding-block-start: var(--fj-e-6);
  border-top: 1px solid var(--fj-borda-sutil);
  font-size: var(--fj-fs-sm);
  color: var(--fj-txt-2);
}

.fj-ref-salvo .fj-selo svg { inline-size: 14px; block-size: 14px; }

/* --- Estados vazios e confirmação -------------------------------------------------- */

.fj-ref-vazio { text-align: left; }

.fj-ref-confirma { justify-content: center; gap: var(--fj-e-6); }
.fj-ref-confirma .fj-lead { margin-block-end: var(--fj-e-6); }

/* --- Dia livre ---------------------------------------------------------------------- */

.fj-ref-livre__faixas {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-5);
}

.fj-ref-livre__faixa {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "titulo kcal" "exemplo exemplo";
  gap: var(--fj-e-2) var(--fj-e-6);
  text-align: left;
  transition: border-color var(--fj-dur-rapida) var(--fj-ease-saida),
              background var(--fj-dur-rapida) var(--fj-ease-saida);
}

/* Escolhida: borda do módulo + véu, e o aria-checked é o que o CSS lê. */
.fj-ref-livre__faixa[aria-checked="true"],
.fj-ref-livre__faixa.is-ativo {
  border-color: color-mix(in srgb, var(--fj-acento) 55%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--fj-acento) 10%, transparent),
    color-mix(in srgb, var(--fj-acento) 2%, transparent)), var(--fj-superficie);
}

.fj-ref-livre__titulo {
  grid-area: titulo;
  font-size: var(--fj-fs-lg);
  font-weight: var(--fj-w-forte);
  color: var(--fj-txt-1);
}

.fj-ref-livre__kcal {
  grid-area: kcal;
  font-size: var(--fj-fs-xs);
  color: var(--fj-txt-2);
  white-space: nowrap;
}

.fj-ref-livre__exemplo {
  grid-area: exemplo;
  font-size: var(--fj-fs-sm);
  color: var(--fj-txt-3);
}

.fj-ref-livre__nota {
  font-size: var(--fj-fs-xs);
  line-height: var(--fj-lh-corpo);
}

.fj-ref-livre__frases {
  margin: 0;
  padding-inline-start: var(--fj-e-9);
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-4);
}

/* =============================================================================
   BUSCA DE ALIMENTO (dentro da camada)
   ============================================================================= */

.fj-busca {
  flex: 1;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-6);
  inline-size: 100%;
  padding-block-start: var(--fj-e-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  color: var(--fj-txt-1);
  text-align: left;
}

.fj-busca__campo { flex: none; }

.fj-busca__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fj-e-4) var(--fj-e-3);
  flex: none;
}

.fj-busca__contexto {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-2);
  min-block-size: 20px;
  font-size: var(--fj-fs-xs);
  line-height: var(--fj-lh-corpo);
  color: var(--fj-txt-3);
  flex: none;
}

.fj-busca__contexto p { margin: 0; }
.fj-busca__contexto .fj-acao-txt { min-block-size: 0; padding-block: var(--fj-e-2); }

.fj-busca__rotulo { flex: none; }

.fj-busca__lista {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--fj-e-10);
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-4);
}

.fj-busca__item .fj-item__titulo { white-space: normal; overflow-wrap: anywhere; }
.fj-busca__item .fj-item__meta { white-space: normal; }
.fj-busca__item[aria-expanded="true"] { border-color: color-mix(in srgb, var(--fj-acento) 50%, transparent); }
.fj-busca__item[aria-expanded="true"] .fj-item__acao { rotate: 45deg; }
.fj-busca__item .fj-item__acao { transition: rotate var(--fj-dur-rapida) var(--fj-ease-saida); }

.fj-busca__esqueleto {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-4);
  min-block-size: 48px;
  padding: var(--fj-e-6) var(--fj-e-8);
  border-radius: var(--fj-r-lg);
  background: var(--fj-superficie);
  border: 1px solid var(--fj-borda);
}

.fj-busca__vazio {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-4);
  padding: var(--fj-e-8) var(--fj-e-4);
  font-size: var(--fj-fs-md);
  line-height: var(--fj-lh-corpo);
  color: var(--fj-txt-2);
}

.fj-busca__vazio p { margin: 0; }

.fj-busca__porcoes {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-5);
  padding: var(--fj-e-5) var(--fj-e-4) var(--fj-e-6);
}

.fj-busca__aviso {
  margin: 0;
  font-size: var(--fj-fs-xs);
  line-height: var(--fj-lh-corpo);
  color: var(--fj-alerta);
}

.fj-busca__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fj-e-4) var(--fj-e-3);
}

.fj-busca__chips .fj-chip { flex-direction: column; gap: 0; block-size: auto; min-block-size: var(--fj-h-chip); padding-block: var(--fj-e-3); }

.fj-busca__chip-sub {
  font-size: var(--fj-fs-3xs);
  font-weight: var(--fj-w-medio);
  color: var(--fj-txt-3);
}

.fj-busca__outra { min-block-size: var(--fj-toque); }

/* --- Rótulo lido: a tabela para conferir --------------------------------------------- */

.fj-etiq { gap: var(--fj-e-6); }
.fj-etiq .fj-lead { margin: 0; }
.fj-etiq .fj-corpo { margin: 0; }
.fj-etiq > .fj-rotulo { margin-block-end: calc(var(--fj-e-4) * -1); }

.fj-etiq__tabela {
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-3);
}

.fj-etiq__linha {
  display: grid;
  grid-template-columns: 1fr 132px;
  align-items: center;
  gap: var(--fj-e-6);
  min-block-size: var(--fj-toque);
}

.fj-etiq__nome {
  font-size: var(--fj-fs-sm);
  color: var(--fj-txt-2);
}

.fj-etiq__campo {
  min-block-size: var(--fj-toque);
  padding-inline: var(--fj-e-5);
  gap: var(--fj-e-3);
}

.fj-etiq__num {
  text-align: right;
  font-family: var(--fj-fonte-num);
  font-variant-numeric: tabular-nums;
}

.fj-etiq__lido { font-size: var(--fj-fs-xs); line-height: var(--fj-lh-corpo); margin: 0; }

.fj-etiq__medida {
  display: flex;
  gap: var(--fj-e-4);
}

.fj-etiq__g { inline-size: 120px; flex: none; }

.fj-etiq__avisos {
  margin: 0;
  padding-inline-start: var(--fj-e-9);
  display: flex;
  flex-direction: column;
  gap: var(--fj-e-3);
  font-size: var(--fj-fs-xs);
  line-height: var(--fj-lh-corpo);
  color: var(--fj-alerta);
}

/* --- Movimento reduzido ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fj-chip.is-analisando svg { animation: none; opacity: 1; }
  .fj-busca__item .fj-item__acao { transition: none; }
}