/* =========================================================
   IDENTIDADE VISUAL
   Para trocar cores, mude só as variáveis abaixo.
   ========================================================= */
:root {
  /* Paleta da marca */
  --branco: #ffffff;
  --areia: #ede9e5;        /* fundo */
  --cacau: #523333;        /* texto principal */
  --nevoa: #d9dddd;        /* bordas e trilhos */
  --azul: #118ab2;         /* botões e destaques */
  --rose: #b87170;         /* cor de apoio */
  --amarelo: #ffdd2d;      /* só pequenos detalhes */
  --grafite: #302c2c;      /* detalhes escuros */

  /* Uso das cores */
  --cor-fundo: var(--areia);
  --cor-card: var(--branco);
  --cor-texto: var(--cacau);
  --cor-texto-suave: #7d6464;
  --cor-borda: var(--nevoa);
  --cor-destaque: var(--azul);
  --cor-apoio: var(--rose);
  /* Bloquinho da sequência na tela Hoje (troque aqui) */
  --cor-sequencia: var(--rose);
  --cor-sequencia-fundo: #f3e4e3;

  /* Uma cor para cada macro (troque aqui) */
  --cor-proteina: var(--rose);
  --cor-carboidrato: var(--azul);
  --cor-gordura: var(--amarelo);
  --cor-fibra: var(--cacau);
  --cor-calorias: var(--grafite);

  /* Alertas */
  --cor-erro: #a1403f;
  --cor-erro-fundo: #f7e6e5;
  --cor-ok-fundo: #e3f1f6;
  --cor-cuidado-fundo: #fff7d1;

  /* Formas e espaçamentos */
  --raio: 20px;
  --raio-pequeno: 12px;
  --sombra: 0 2px 10px rgba(82, 51, 51, 0.06);
  --espaco: 16px;
  --altura-nav: 68px;

  --fonte-texto: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-titulo: 'Lora', Georgia, serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: 15px;
  line-height: 1.55;
}
body.com-nav { padding-bottom: calc(var(--altura-nav) + env(safe-area-inset-bottom)); }

.conteudo {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px var(--espaco) 24px;
}

a { color: var(--cor-destaque); }
h1, h2, h3 { margin: 0 0 8px; line-height: 1.25; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-left: 20px; }

.titulo-destaque { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.6rem; }
.titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.35rem; }
.subtitulo { font-size: 1.02rem; font-weight: 600; margin-bottom: 12px; }
.rotulo { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cor-apoio); font-weight: 500; margin-bottom: 4px; }
.texto-suave { color: var(--cor-texto-suave); }
.pequeno { font-size: 0.85rem; }
.centro { text-align: center; }
.escondido { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cabecalho { margin: 8px 0 16px; }

/* ---------- Cards ---------- */
.card {
  background: var(--cor-card);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: var(--espaco);
  box-shadow: var(--sombra);
}
.card-em-breve { border: 1.5px dashed var(--cor-borda); box-shadow: none; background: transparent; }

/* ---------- Botões ---------- */
.botao {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--cor-destaque);
  color: var(--branco);
  font: 600 1rem var(--fonte-texto);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.2s;
}
.botao:active { transform: scale(0.98); }
.botao:disabled { opacity: 0.45; cursor: not-allowed; }
.botao-secundario { background: transparent; color: var(--cor-destaque); box-shadow: inset 0 0 0 1.5px var(--cor-destaque); }
.botao-texto { background: none; color: var(--cor-apoio); width: auto; margin: 0 auto; }
.pilha-botoes { display: grid; gap: 10px; margin-top: 8px; }
.link { color: var(--cor-destaque); font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ---------- Formulários ---------- */
.formulario label { display: block; font-weight: 500; margin: 14px 0 6px; font-size: 0.92rem; }
.formulario label small { font-weight: 400; color: var(--cor-texto-suave); }
input[type='text'], input[type='email'], input[type='password'], input[type='date'], input[type='time'], input[type='number'], select {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--branco);
  color: var(--cor-texto);
  font: 400 1rem var(--fonte-texto);
  appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--cor-texto) 50%), linear-gradient(135deg, var(--cor-texto) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(17, 138, 178, 0.35);
  outline-offset: 1px;
  border-color: var(--cor-destaque);
}
input[readonly] { background: var(--areia); color: var(--cor-texto-suave); }
.formulario .botao { margin-top: 20px; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.campo-unidade { display: flex; align-items: center; gap: 10px; }
.campo-unidade span { font-weight: 500; color: var(--cor-texto-suave); }
.pequeno-campo { width: 110px; }
.pequeno-campo input { text-align: right; padding: 10px; }

/* Caixa de seleção (checkbox) com texto */
.formulario label.caixa, label.caixa {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 400; margin: 12px 0; cursor: pointer;
}
.caixa input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--cor-destaque); }

.consentimento { border: 0; margin: 20px 0 0; padding: 16px; background: var(--areia); border-radius: var(--raio-pequeno); }
.consentimento legend { font-weight: 600; padding: 0; float: left; width: 100%; margin-bottom: 8px; }

/* Opções em cartões (onboarding) */
.opcoes { border: 0; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.formulario label.opcao { margin: 0; }
.opcao { position: relative; display: block; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; }
.opcao-conteudo {
  display: block; padding: 14px 16px;
  border: 1.5px solid var(--cor-borda); border-radius: var(--raio-pequeno);
  transition: border-color 0.15s, background 0.15s;
}
.opcao-conteudo strong { display: block; font-weight: 500; }
.opcao-conteudo small { display: block; color: var(--cor-texto-suave); font-weight: 400; font-size: 0.85rem; }
.opcao input:checked + .opcao-conteudo { border-color: var(--cor-destaque); background: var(--cor-ok-fundo); }
.opcao input:focus-visible + .opcao-conteudo { outline: 3px solid rgba(17, 138, 178, 0.35); }

.lista-nomes { padding-left: 22px; margin: 16px 0 0; }
.lista-nomes li { margin-bottom: 10px; }
.lista-nomes li::marker { color: var(--cor-apoio); font-weight: 600; }

/* ---------- Onboarding ---------- */
.progresso-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.voltar { width: 28px; font-size: 1.8rem; line-height: 1; text-decoration: none; color: var(--cor-texto); }
.barra-progresso {
  flex: 1; height: 8px; border: 0; border-radius: 999px; overflow: hidden;
  background: var(--cor-borda); appearance: none;
}
.barra-progresso::-webkit-progress-bar { background: var(--cor-borda); border-radius: 999px; }
.barra-progresso::-webkit-progress-value { background: var(--cor-destaque); border-radius: 999px; transition: width 0.3s; }
.barra-progresso::-moz-progress-bar { background: var(--cor-destaque); border-radius: 999px; }

/* ---------- Meta e macros ---------- */
.calorias-grande { font-family: var(--fonte-titulo); font-size: 2.6rem; font-weight: 600; color: var(--cor-calorias); margin: 0 0 12px; line-height: 1.1; }
.calorias-grande small { font-family: var(--fonte-texto); font-size: 1rem; font-weight: 500; color: var(--cor-texto-suave); }
.lista-macros { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.macro { background: var(--areia); border-radius: var(--raio-pequeno); padding: 10px 12px; font-size: 0.88rem; display: flex; flex-direction: column; position: relative; padding-left: 26px; }
.macro strong { font-size: 1.1rem; font-weight: 600; }
.macro .ponto { position: absolute; left: 11px; top: 16px; width: 9px; height: 9px; border-radius: 50%; }
.macro-proteina .ponto { background: var(--cor-proteina); }
.macro-carboidrato .ponto { background: var(--cor-carboidrato); }
.macro-gordura .ponto { background: var(--cor-gordura); box-shadow: 0 0 0 1px rgba(48, 44, 44, 0.15); }
.macro-fibra .ponto { background: var(--cor-fibra); }

.explicacao { padding-left: 20px; }
.explicacao li { margin-bottom: 8px; }
.explicacao li::marker { color: var(--cor-apoio); font-weight: 600; }

/* Sliders: cada macro com sua cor */
.campo-slider label { display: flex; justify-content: space-between; align-items: baseline; }
.campo-slider output { font-weight: 600; }
/* Slider próprio: trilho neutro e "bolinha" na cor do macro (--cor-slider) */
input[type='range'] {
  --cor-slider: var(--cor-destaque);
  width: 100%; height: 28px; margin: 4px 0 0;
  appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--cor-borda); }
input[type='range']::-moz-range-track { height: 6px; border-radius: 999px; background: var(--cor-borda); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: var(--cor-slider); border: 3px solid var(--branco); box-shadow: 0 1px 5px rgba(48, 44, 44, 0.3);
}
input[type='range']::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cor-slider); border: 3px solid var(--branco); box-shadow: 0 1px 5px rgba(48, 44, 44, 0.3);
}
input[type='range']:focus-visible { outline: none; }
input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(17, 138, 178, 0.35); }
input[type='range'].invertido { direction: rtl; } /* déficit: mais para a direita = maior */
.campo-slider.macro-proteina input { --cor-slider: var(--cor-proteina); }
.campo-slider.macro-gordura input { --cor-slider: var(--cor-gordura); }
.campo-linha { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 12px; }
.formulario .campo-linha label { margin: 14px 0 0; }
.campo-linha input { margin-top: 14px; text-align: right; }
.campo-linha.macro-carboidrato label::before, .campo-linha.macro-fibra label::before {
  content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px;
}
.campo-linha.macro-carboidrato label::before { background: var(--cor-carboidrato); }
.campo-linha.macro-fibra label::before { background: var(--cor-fibra); }

.conferencia { margin: 18px 0 4px; padding: 12px 14px; border-radius: var(--raio-pequeno); background: var(--cor-ok-fundo); font-size: 0.9rem; }
.conferencia.nao-fecha { background: var(--cor-cuidado-fundo); }

/* Refeições */
.lista-refeicoes { list-style: none; padding: 0; margin: 0 0 12px; }
.lista-refeicoes li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 12px 0; border-bottom: 1px solid var(--cor-borda); }
.lista-refeicoes li:last-child { border-bottom: 0; }
.lista-refeicoes .mini-macros { grid-column: 1 / -1; }
.nome-refeicao { font-weight: 500; }
.formulario label.nome-refeicao { margin: 0; font-size: 1rem; }
.kcal-refeicao { font-weight: 600; margin: 0; }
.mini-macros { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.tag { font-size: 0.76rem; padding: 2px 9px; border-radius: 999px; font-weight: 500; }
.tag-proteina { background: rgba(184, 113, 112, 0.16); color: #8a4e4d; }
.tag-carboidrato { background: rgba(17, 138, 178, 0.12); color: #0c6886; }
.tag-gordura { background: rgba(255, 221, 45, 0.35); color: var(--grafite); }
.tag-fibra { background: rgba(82, 51, 51, 0.1); color: var(--cacau); }
.card-refeicao { padding: 16px 18px; }
.linha-refeicao { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }

.card-historico.atual { box-shadow: inset 0 0 0 2px var(--cor-destaque), var(--sombra); }
.selo { font-size: 0.72rem; font-weight: 600; background: var(--amarelo); color: var(--grafite); padding: 2px 10px; border-radius: 999px; }

.comparacao { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.card-mini { background: var(--areia); border-radius: var(--raio-pequeno); padding: 14px; }
.destaque-novo { background: var(--cor-ok-fundo); }

/* ---------- Alertas ---------- */
.alerta { padding: 12px 16px; border-radius: var(--raio-pequeno); margin: 0 0 var(--espaco); font-size: 0.92rem; }
.alerta ul { margin: 0; padding-left: 18px; }
.alerta-erro { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.alerta-ok { background: var(--cor-ok-fundo); color: #0c5e7a; }
.alerta-info { background: var(--branco); border: 1.5px solid var(--cor-borda); }
.alerta-cuidado { background: var(--cor-cuidado-fundo); color: var(--grafite); }

/* ---------- Menu "Mais" ---------- */
.lista-menu { padding: 6px 20px; }
.lista-menu a { display: flex; justify-content: space-between; padding: 14px 0; color: var(--cor-texto); text-decoration: none; border-bottom: 1px solid var(--cor-borda); font-weight: 500; }
.lista-menu a:last-child { border-bottom: 0; }
.lista-menu span { color: var(--cor-apoio); font-size: 1.2rem; }

/* ---------- Página inicial ---------- */
.boas-vindas { padding: 48px 4px 16px; }
.marca { font-family: var(--fonte-titulo); color: var(--cor-apoio); font-size: 1.1rem; font-weight: 600; }
.boas-vindas .titulo-destaque { font-size: 2rem; margin-bottom: 16px; }
.boas-vindas .pilha-botoes { margin-top: 32px; }

/* ---------- Textos legais ---------- */
.texto-legal h2 { font-size: 1rem; margin-top: 20px; }
.selo-provisorio { background: var(--cor-cuidado-fundo); padding: 8px 12px; border-radius: var(--raio-pequeno); font-size: 0.82rem; }

/* ---------- Rodapé com aviso fixo ---------- */
.rodape { margin-top: 32px; text-align: center; }
.aviso-fixo { font-size: 0.8rem; color: var(--cor-texto-suave); margin-bottom: 6px; }
.aviso-fixo.destaque { background: var(--areia); padding: 10px 12px; border-radius: var(--raio-pequeno); margin-top: 16px; color: var(--cor-texto); }
.rodape-links { font-size: 0.8rem; }
.rodape-links a { color: var(--cor-texto-suave); }

/* ---------- Navegação inferior ---------- */
.nav-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: space-around;
  height: calc(var(--altura-nav) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--branco);
  border-top: 1px solid var(--cor-borda);
}
.nav-inferior a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--cor-texto-suave); text-decoration: none; font-size: 0.75rem; font-weight: 500;
}
.nav-inferior svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-inferior a.ativo { color: var(--cor-destaque); }
.nav-inferior a.ativo::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--amarelo); margin-top: 1px; }

/* ---------- Telas maiores ---------- */
@media (min-width: 700px) {
  .conteudo { padding-top: 40px; }
  .nav-inferior { max-width: 520px; margin: 0 auto; border: 1px solid var(--cor-borda); border-bottom: 0; border-radius: var(--raio) var(--raio) 0 0; }
}

/* =========================================================
   ETAPA 2: diário, busca e alimentos
   ========================================================= */
:root {
  /* Cor neutra quando passa da meta (nada de vermelho: sem culpa) */
  --cor-passou: #a89494;
  --altura-fab: 58px;
}

textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--cor-borda); border-radius: var(--raio-pequeno);
  font: 400 1rem var(--fonte-texto); color: var(--cor-texto); resize: vertical;
}

/* ---------- Topo do dia e telas internas ---------- */
.topo-dia { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.titulo-dia { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.5rem; margin: 0; text-transform: capitalize; }
.seta {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; background: var(--branco); color: var(--cor-texto); text-decoration: none; font-size: 1.6rem; line-height: 1;
  box-shadow: var(--sombra);
}
.seta.desativada { opacity: 0.3; box-shadow: none; }
.topo-tela { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; }
.topo-tela .titulo { margin: 4px 0 0; }
.topo-tela p { margin: 0; }

/* ---------- Faixa da semana + sequência ---------- */
.faixa-semana { display: flex; align-items: center; gap: 8px; margin-bottom: var(--espaco); }
.dias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; flex: 1; }
.dia {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 5px;
  border-radius: 14px; text-decoration: none; color: var(--cor-texto); font-size: 0.78rem;
}
.dia .letra { color: var(--cor-texto-suave); font-size: 0.7rem; }
.dia .num { font-weight: 600; }
.dia .marca { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.dia.registrado .marca { background: var(--cor-apoio); }
.dia.atual { background: var(--branco); box-shadow: var(--sombra); }
.dia.futuro { opacity: 0.35; }
.sequencia {
  display: flex; flex-direction: column; align-items: center; min-width: 48px; padding: 6px 8px;
  background: var(--branco); border-radius: 14px; box-shadow: var(--sombra); font-size: 0.7rem; line-height: 1.15;
}
.sequencia svg { width: 18px; height: 18px; fill: var(--amarelo); stroke: var(--grafite); stroke-width: 1.2; stroke-linejoin: round; }
.sequencia strong { font-size: 1rem; }

/* ---------- Barras de progresso (cada macro com sua cor) ---------- */
.barra {
  --cor-barra: var(--cor-destaque);
  width: 100%; height: 9px; border: 0; border-radius: 999px; overflow: hidden;
  background: var(--cor-borda); appearance: none; -webkit-appearance: none; display: block;
}
.barra::-webkit-progress-bar { background: var(--cor-borda); border-radius: 999px; }
.barra::-webkit-progress-value { background: var(--cor-barra); border-radius: 999px; }
.barra::-moz-progress-bar { background: var(--cor-barra); border-radius: 999px; }
.barra-calorias { --cor-barra: var(--cor-calorias); height: 12px; margin: 10px 0 4px; }
.barra-calorias.passou { --cor-barra: var(--cor-passou); }
.barra-carboidrato { --cor-barra: var(--cor-carboidrato); }
.barra-gordura { --cor-barra: var(--cor-gordura); }
.barra-proteina { --cor-barra: var(--cor-proteina); }

/* ---------- Cards de calorias e macros ---------- */
.linha-calorias { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.consumo { margin: 0; font-size: 1rem; color: var(--cor-texto-suave); }
.consumo strong { font-family: var(--fonte-titulo); font-size: 2rem; color: var(--cor-calorias); }
.saldo { text-align: right; font-size: 0.78rem; color: var(--cor-texto-suave); display: flex; flex-direction: column; }
.saldo strong { font-size: 1.15rem; color: var(--cor-texto); }
.mensagem-dia { margin: 10px 0 0; font-size: 0.9rem; color: var(--cor-texto); }
.linha-macro { margin-bottom: 12px; }
.linha-macro-texto { display: flex; justify-content: space-between; font-size: 0.88rem; margin-bottom: 5px; }
.linha-macro .ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.macro-carboidrato .ponto { background: var(--cor-carboidrato); }
.macro-gordura .ponto { background: var(--cor-gordura); box-shadow: 0 0 0 1px rgba(48, 44, 44, 0.15); }
.macro-proteina .ponto { background: var(--cor-proteina); }
.linha-fibra { font-size: 0.82rem; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--cor-borda); }
.nota-incompleto { font-size: 0.82rem; color: var(--cor-texto-suave); background: var(--cor-cuidado-fundo); padding: 10px 14px; border-radius: var(--raio-pequeno); }

/* ---------- Cards de refeição ---------- */
.card-refeicao-dia { padding: 16px 18px; }
.cabeca-refeicao { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cabeca-refeicao .subtitulo { margin: 0; }
.cabeca-refeicao .subtitulo a { color: var(--cor-texto); text-decoration: none; }
.acoes-refeicao { display: flex; align-items: center; gap: 4px; }
.botao-pequeno {
  padding: 7px 14px; border-radius: 999px; background: var(--cor-ok-fundo); color: var(--cor-destaque);
  font-weight: 600; font-size: 0.85rem; text-decoration: none;
}
.corpo-refeicao { display: block; margin-top: 8px; color: var(--cor-texto); text-decoration: none; }
.corpo-refeicao .kcal-refeicao { font-weight: 400; color: var(--cor-texto-suave); }
.corpo-refeicao .kcal-refeicao strong { color: var(--cor-texto); font-size: 1.05rem; }
.resumo-itens { margin: 6px 0 0; font-size: 0.85rem; color: var(--cor-texto-suave); }
.vazio-refeicao { margin: 6px 0 0; }

/* Menu "..." (usa <details>, funciona sem JavaScript) */
.menu-mais { position: relative; }
.menu-mais summary {
  list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 999px; color: var(--cor-texto-suave);
  font-size: 0.8rem; letter-spacing: 1px;
}
.menu-mais summary::-webkit-details-marker { display: none; }
.menu-lista {
  position: absolute; right: 0; top: 100%; z-index: 5; min-width: 190px; padding: 6px 0;
  background: var(--branco); border-radius: var(--raio-pequeno); box-shadow: 0 6px 24px rgba(48, 44, 44, 0.16);
}
.menu-lista a { display: block; padding: 10px 16px; color: var(--cor-texto); text-decoration: none; font-size: 0.9rem; }
.menu-lista a:hover { background: var(--areia); }

/* ---------- Botão flutuante "+" ---------- */
.fab { position: fixed; right: max(16px, calc(50% - 244px)); bottom: calc(var(--altura-nav) + 16px + env(safe-area-inset-bottom)); z-index: 11; }
.fab summary {
  list-style: none; width: var(--altura-fab); height: var(--altura-fab); border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--cor-destaque); color: var(--branco); font-size: 2rem; font-weight: 400;
  box-shadow: 0 6px 18px rgba(17, 138, 178, 0.4); transition: transform 0.15s;
}
.fab summary::-webkit-details-marker { display: none; }
.fab[open] summary { transform: rotate(45deg); }
.fab-menu {
  position: absolute; right: 0; bottom: calc(var(--altura-fab) + 10px); width: 230px; padding: 10px;
  background: var(--branco); border-radius: var(--raio); box-shadow: 0 8px 28px rgba(48, 44, 44, 0.2);
}
.fab-menu a { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--raio-pequeno); color: var(--cor-texto); text-decoration: none; font-weight: 500; }
.fab-menu a:hover { background: var(--areia); }
.fab-menu svg { width: 22px; height: 22px; fill: none; stroke: var(--cor-destaque); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fab-menu p { margin: 6px 12px 4px; }
body.com-nav .conteudo { padding-bottom: 90px; }

/* ---------- Busca ---------- */
.busca input[type='search'] {
  width: 100%; padding: 14px 16px 14px 44px; border: 1.5px solid var(--cor-borda); border-radius: 999px;
  font: 400 1rem var(--fonte-texto); color: var(--cor-texto); appearance: none;
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d6464' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") no-repeat 16px center / 18px;
}
.abas { display: flex; gap: 6px; margin: 14px 0; overflow-x: auto; scrollbar-width: none; }
.abas a, .abas span {
  flex-shrink: 0; padding: 8px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 500; text-decoration: none;
  color: var(--cor-texto); background: var(--branco);
}
.abas a.ativa { background: var(--cor-texto); color: var(--branco); }
.abas .desativada { opacity: 0.45; cursor: not-allowed; }
.titulo-lista { margin: 4px 4px 8px; }
.resultados { list-style: none; padding: 0; margin: 0 0 var(--espaco); background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.resultados li { border-bottom: 1px solid var(--areia); }
.resultados li:last-child { border-bottom: 0; }
.resultados a { display: flex; flex-direction: column; gap: 2px; padding: 13px 18px; color: var(--cor-texto); text-decoration: none; }
.resultados a:hover { background: #faf8f6; }
.resultados:empty { display: none; }
.resultados li.com-acoes { display: flex; align-items: center; justify-content: space-between; }
.resultados li.com-acoes a { flex: 1; }
.nome-item { font-weight: 500; }
.selo-incompleto {
  align-self: flex-start; margin-top: 3px; font-size: 0.7rem; font-weight: 500; padding: 1px 8px; border-radius: 999px;
  background: var(--cor-cuidado-fundo); color: var(--grafite);
}
.vazio { text-align: center; }
.vazio .botao { margin-top: 12px; }
/* Alimento cadastrado pela nutricionista (etapa 5b) */
.etiqueta-nutri {
  display: inline-block; margin-top: 4px; font-size: 0.72rem; font-weight: 500; padding: 2px 10px; border-radius: 999px;
  background: var(--cor-ok-fundo); color: #0c5e7a;
}

/* ---------- Tela do alimento ---------- */
.linha-porcao { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.linha-refeicao-horario { display: grid; grid-template-columns: 1fr 112px; gap: 12px; }
input[type='time'] { min-height: 50px; }
.previa { margin: 20px 0 4px; padding: 16px; border-radius: var(--raio); background: var(--areia); }
.previa-anel { display: flex; align-items: center; gap: 16px; }
.anel { width: 128px; height: 128px; flex-shrink: 0; }
.anel circle { fill: none; stroke-width: 13; }
.anel-trilho { stroke: var(--branco); }
.anel-seg { transition: stroke-dasharray 0.25s, stroke-dashoffset 0.25s; }
.anel-carboidrato { stroke: var(--cor-carboidrato); }
.anel-gordura { stroke: var(--cor-gordura); }
.anel-proteina { stroke: var(--cor-proteina); }
.anel-valor { font: 600 22px var(--fonte-titulo); fill: var(--cor-calorias); text-anchor: middle; }
.anel-unidade { font: 500 10px var(--fonte-texto); fill: var(--cor-texto-suave); text-anchor: middle; }
.legenda-anel { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 0.86rem; flex: 1; }
.legenda-anel li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; column-gap: 2px; }
.legenda-anel strong { grid-column: 2; font-size: 0.95rem; }
.legenda-anel small { grid-row: 1 / span 2; grid-column: 3; color: var(--cor-texto-suave); }
.legenda-anel .ponto { width: 9px; height: 9px; border-radius: 50%; grid-row: 1; }
.pct-meta { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.pct-meta li { background: var(--branco); border-radius: var(--raio-pequeno); padding: 8px 4px; display: flex; flex-direction: column; border-top: 3px solid var(--cor-calorias); }
.pct-meta li.macro-carboidrato { border-top-color: var(--cor-carboidrato); }
.pct-meta li.macro-gordura { border-top-color: var(--cor-gordura); }
.pct-meta li.macro-proteina { border-top-color: var(--cor-proteina); }
.pct-meta span { font-weight: 600; font-size: 1rem; }
.pct-meta small { font-size: 0.7rem; color: var(--cor-texto-suave); }
.tabela-nutrientes { margin: 0; }
.tabela-nutrientes div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--areia); font-size: 0.92rem; }
.tabela-nutrientes dt { color: var(--cor-texto-suave); }
.tabela-nutrientes dd { margin: 0; font-weight: 500; }
.fonte { font-size: 0.75rem; color: var(--cor-texto-suave); margin: 10px 0 0; }
.lista-medidas { list-style: none; padding: 0; margin: 0; }
.lista-medidas li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--areia); font-size: 0.9rem; }
.selo-medida { font-size: 0.68rem; padding: 1px 7px; border-radius: 999px; background: var(--areia); color: var(--cor-texto-suave); margin-left: 4px; }
.selo-medida.minha { background: var(--cor-ok-fundo); color: #0c5e7a; }
.criar-medida { margin-top: 12px; }
.criar-medida summary { cursor: pointer; display: inline-block; }

/* ---------- Itens de uma refeição ---------- */
.lista-itens { list-style: none; padding: 0; margin: 0; }
.item-registro { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 18px; }
.item-principal { display: flex; flex-direction: column; gap: 2px; color: var(--cor-texto); text-decoration: none; }
.item-lado { text-align: right; display: flex; flex-direction: column; }
.item-acoes { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; }
.item-acoes form { margin: 0; }
.resultados .item-acoes { padding-right: 16px; gap: 10px; }
.botao-texto { background: none; border: 0; padding: 0; color: var(--cor-apoio); font: 500 0.85rem var(--fonte-texto); cursor: pointer; }

/* ---------- Formulário do rótulo ---------- */
.escolha-linha { border: 0; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.escolha-linha legend { font-weight: 500; font-size: 0.92rem; margin-bottom: 2px; width: 100%; }
.grade-nutrientes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* =========================================================
   ETAPA 3: hábitos (água e humor), receitas e área da nutricionista
   ========================================================= */
:root {
  --cor-agua: var(--azul); /* azul da marca, #118ab2 */
}

/* ---------- Hábitos saudáveis ---------- */
.titulo-secao { margin: 20px 4px 10px; }
.consumo-agua { margin: 4px 0 0; font-size: 1rem; color: var(--cor-texto-suave); }
.consumo-agua strong { font-family: var(--fonte-titulo); font-size: 1.7rem; color: var(--cor-agua); }
.barra-agua { --cor-barra: var(--cor-agua); height: 12px; margin: 10px 0 4px; }
.botoes-agua { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.botoes-agua form { margin: 0; }
.botao-agua {
  width: 100%; padding: 11px 6px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cor-ok-fundo); color: var(--cor-agua); font: 600 0.9rem var(--fonte-texto);
}
.botao-agua:active { transform: scale(0.97); }
.outro-valor { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin: 10px 0 6px; }
.outro-valor input { padding: 10px 14px; }
.outro-valor .botao-pequeno { border: 0; cursor: pointer; font-family: var(--fonte-texto); }
.card-agua form.centro { margin-top: 6px; }

.item-agua { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.linha-agua { display: grid; grid-template-columns: 100px 1fr auto; gap: 8px; align-items: center; flex: 1; margin: 0; }
.linha-agua input { padding: 9px 10px; min-height: 0; }
.campo-ml { display: flex; align-items: center; gap: 6px; }
.campo-ml span { color: var(--cor-texto-suave); font-size: 0.85rem; }
.linha-agua .botao-pequeno, .item-agua .botao-texto { border: 0; cursor: pointer; }

/* Humor: opções em "chips" (checkbox escondido + texto) */
.chips { border: 0; padding: 0; margin: 6px 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: 0.88rem; font-weight: 500;
  border: 1.5px solid var(--cor-borda); background: var(--branco); color: var(--cor-texto); transition: background 0.15s, border-color 0.15s;
}
.chip input:checked + span { background: var(--cor-apoio); border-color: var(--cor-apoio); color: var(--branco); }
.chip input:focus-visible + span { outline: 3px solid rgba(17, 138, 178, 0.35); }
.formulario-humor label { display: block; margin: 4px 0 6px; }
.formulario-humor .botao { margin-top: 8px; }
.contador { margin: 4px 0 0; min-height: 1em; text-align: right; }
.card-humor form.centro { margin-top: 10px; }
.card-acolhimento { background: var(--cor-ok-fundo); box-shadow: none; }
.card-acolhimento p { font-size: 0.95rem; }

.chips-leitura { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.chip-leitura { font-size: 0.75rem; padding: 2px 10px; border-radius: 999px; background: rgba(184, 113, 112, 0.16); color: #8a4e4d; font-weight: 500; }
.chip-leitura.etiqueta { background: var(--areia); color: var(--cor-texto-suave); }
.contagem-humor { list-style: none; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.contagem-humor li { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--areia); border-radius: var(--raio-pequeno); font-size: 0.88rem; }
.contagem-humor li.zerado { opacity: 0.55; }
.item-humor { padding: 14px 18px; }
.nota-humor { font-style: italic; }

/* ---------- Receitas ---------- */
.lista-ingredientes { list-style: none; padding: 0; margin: 0; }
.ingrediente { padding: 12px 0; border-bottom: 1px solid var(--areia); }
.ingrediente-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.resumo-ingrediente { margin: 6px 0 0; }
.busca-ingrediente { position: relative; margin-top: 6px; }
.busca-ingrediente label { display: block; font-weight: 500; margin: 8px 0 6px; font-size: 0.92rem; }
.busca-ingrediente input[type='search'] {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--cor-borda); border-radius: var(--raio-pequeno);
  font: 400 1rem var(--fonte-texto); color: var(--cor-texto); appearance: none; background: var(--branco);
}
.sugestoes { margin: 6px 0 0; box-shadow: 0 6px 24px rgba(48, 44, 44, 0.12); }
.sugestao { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 11px 16px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--cor-texto); }
.sugestao:hover, .sugestao:focus-visible { background: var(--areia); }
.sem-sugestao { padding: 11px 16px; }
.tabela-totais { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabela-totais th, .tabela-totais td { padding: 7px 4px; border-bottom: 1px solid var(--areia); text-align: right; }
.tabela-totais th:first-child { text-align: left; font-weight: 500; }
.tabela-totais thead th { font-size: 0.75rem; color: var(--cor-texto-suave); font-weight: 500; }
.tabela-totais .ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.totais-receita .nota-incompleto { margin: 12px 0 0; }
.foto-receita { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--raio); margin-bottom: var(--espaco); }
.foto-receita.pequena { max-height: 160px; width: auto; max-width: 100%; margin: 6px 0; }
.texto-preparo { white-space: pre-line; }
.acoes-receita { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.acoes-receita form { margin: 0; }
.pilha-botoes form { margin: 0; }
.grade-receitas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card-receita { padding: 0; overflow: hidden; margin: 0; }
.card-receita a { display: flex; flex-direction: column; gap: 3px; color: var(--cor-texto); text-decoration: none; padding-bottom: 12px; }
.card-receita img, .card-receita .foto-vazia { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--areia); display: block; margin-bottom: 6px; }
.card-receita .nome-item, .card-receita .pequeno, .card-receita .chips-leitura { padding: 0 12px; }

/* ---------- Área da nutricionista (simples, de trabalho) ---------- */
.conteudo:has(.barra-admin) { max-width: 960px; }
.barra-admin { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 14px; margin-bottom: 16px; background: var(--grafite); border-radius: var(--raio-pequeno); }
.barra-admin a { color: var(--branco); text-decoration: none; font-size: 0.9rem; opacity: 0.8; }
.barra-admin a.ativo { opacity: 1; font-weight: 600; text-decoration: underline; }
.admin-resumo { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.admin-resumo li { display: flex; flex-direction: column; margin: 0; padding: 14px; }
.admin-resumo strong { font-size: 1.6rem; }
.tabela-admin { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; background: var(--branco); border-radius: var(--raio-pequeno); margin-top: 14px; font-size: 0.88rem; }
.tabela-admin th, .tabela-admin td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--areia); }
.tabela-admin thead th { font-size: 0.75rem; color: var(--cor-texto-suave); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.acoes-admin { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.acoes-admin form, .tabela-admin form { margin: 0; }
.estado { font-size: 0.72rem; padding: 2px 9px; border-radius: 999px; font-weight: 600; margin-right: 6px; white-space: nowrap; }
.estado-publicada, .estado-resolvido { background: var(--cor-ok-fundo); color: #0c5e7a; }
.estado-rascunho, .estado-novo { background: var(--cor-cuidado-fundo); color: var(--grafite); }

/* =========================================================
   ETAPA 4: Progresso (peso, medidas, fotos, objetivo, constância)
   Cores neutras: nada de vermelho para variações.
   ========================================================= */
:root {
  --cor-linha-grafico: var(--cacau);
  --cor-linha-suave: var(--azul);
}

.card-progresso { display: block; color: var(--cor-texto); text-decoration: none; }
.cabeca-card { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cabeca-card .subtitulo { margin-bottom: 6px; }
.cabeca-card form { margin: 0; }
.linha-resumo { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; font-size: 0.9rem; }
.mini-lista { list-style: none; padding: 0; margin: 0; }
.mini-lista li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--areia); font-size: 0.9rem; }
.convite { margin: 10px 0 0; padding: 10px 12px; background: var(--cor-ok-fundo); border-radius: var(--raio-pequeno); font-size: 0.9rem; }
.contagem-constancia { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.contagem-constancia li { background: var(--areia); border-radius: var(--raio-pequeno); padding: 10px 4px; display: flex; flex-direction: column; }
.contagem-constancia strong { font-family: var(--fonte-titulo); font-size: 1.4rem; }
.contagem-constancia span { font-size: 0.72rem; color: var(--cor-texto-suave); }

/* Modo discreto */
.discreto { display: inline-block; min-width: 2.2em; padding: 0 6px; border-radius: 6px; background: var(--areia); color: var(--cor-texto); font: inherit; font-weight: 600; letter-spacing: 1px; cursor: pointer; }
.discreto.revelado { letter-spacing: normal; }

/* Gráfico */
.grafico { width: 100%; height: auto; display: block; margin: 6px 0; }
.grafico-mini { max-height: 110px; }
.grafico-grade { stroke: var(--cor-borda); stroke-width: 1; stroke-dasharray: 3 4; }
.grafico-eixo { font: 400 10px var(--fonte-texto); fill: var(--cor-texto-suave); }
.grafico-linha { fill: none; stroke: var(--cor-linha-grafico); stroke-width: 1.5; opacity: 0.55; stroke-linejoin: round; }
.grafico-suave { fill: none; stroke: var(--cor-linha-suave); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.grafico-ponto { fill: var(--cor-linha-grafico); opacity: 0.7; }
.legenda-grafico { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--cor-texto-suave); margin: 0 0 8px; flex-wrap: wrap; }
.traco { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--cor-linha-grafico); opacity: 0.6; margin-left: 6px; }
.traco-suave { border-top: 3px solid var(--cor-linha-suave); opacity: 1; }

.resumo-tres { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.resumo-tres li { background: var(--areia); border-radius: var(--raio-pequeno); padding: 10px 4px; display: flex; flex-direction: column; gap: 2px; }
.resumo-tres span { font-size: 0.75rem; color: var(--cor-texto-suave); }
.resumo-tres strong { font-size: 1.05rem; }
.resumo-tres small { font-size: 0.7rem; color: var(--cor-texto-suave); }
.linha-medida { grid-template-columns: 1fr 110px auto; }

/* Fotos */
.miniaturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0; }
.miniaturas img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--raio-pequeno); background: var(--areia); display: block; }
.miniaturas figure { margin: 0; }
.miniaturas figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; margin-top: 4px; }
.miniaturas figcaption form { margin: 0; }
img.borrada { filter: blur(18px); cursor: pointer; clip-path: inset(0 round var(--raio-pequeno)); } /* o recorte impede o desfoque de "vazar" */
.foto-link { display: block; overflow: hidden; border-radius: var(--raio-pequeno); }
.campos-fotos { display: grid; gap: 4px; }
.campo-foto label { margin-top: 10px; }
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--espaco); }
.lado-a-lado figure { margin: 0; background: var(--branco); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.lado-a-lado img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.lado-a-lado figcaption { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; }
.sobrepor { position: relative; border-radius: var(--raio-pequeno); overflow: hidden; aspect-ratio: 3 / 4; background: var(--areia); margin-bottom: 8px; }
.sobrepor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Comparação de metas */
.tabela-comparar { padding: 14px 16px; display: table; }

/* Humor × diário */
.medias-humor { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.medias-humor li { background: var(--areia); border-radius: var(--raio-pequeno); padding: 10px 12px; display: flex; flex-direction: column; font-size: 0.85rem; }
.card-humor-diario .tabela-totais { margin: 6px 0; }

/* Calendário de constância */
.mes-titulo { margin: 0; text-transform: capitalize; }
.calendario { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 8px; }
.calendario th { font-size: 0.72rem; font-weight: 500; color: var(--cor-texto-suave); padding: 4px 0; }
.calendario td { text-align: center; padding: 6px 0; vertical-align: top; }
.calendario td.fora, .calendario td.futuro { opacity: 0.35; }
.calendario .num { display: block; font-size: 0.85rem; font-weight: 500; }
.calendario .pontos { display: flex; justify-content: center; gap: 2px; margin-top: 3px; }
.ponto-cal { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cor-borda); }
.ponto-cal.alimento.sim { background: var(--cor-apoio); }
.ponto-cal.agua.sim { background: var(--azul); }
.ponto-cal.humor.sim { background: var(--amarelo); box-shadow: 0 0 0 1px rgba(48, 44, 44, 0.2); }
.legenda-calendario { display: flex; gap: 14px; justify-content: center; margin: 10px 0 0; color: var(--cor-texto-suave); }
.legenda-calendario > span { display: inline-flex; align-items: center; gap: 4px; }
.mais-registros summary { cursor: pointer; display: block; margin: 0 0 12px; }

/* =========================================================
   ETAPA 5: conta e privacidade
   ========================================================= */
.botao-excluir { background: var(--cor-apoio); } /* rosé da marca: sério, mas sem vermelho de alarme */
.texto-legal h3 { font-size: 0.95rem; margin: 14px 0 6px; }
.item-consentimento { padding: 14px 18px; }
.item-consentimento form { margin: 6px 0 0; }
.item-consentimento .link { display: inline-block; margin-right: 12px; }

/* ---------- Copiar de outro dia (etapa 5b) ---------- */
.linha-copiar { grid-template-columns: 1fr 1fr; }
.lista-atalhos { list-style: none; padding: 0; margin: 8px 0 0; }
.lista-atalhos a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 4px;
  border-bottom: 1px solid var(--areia); text-decoration: none; color: inherit;
}
.lista-atalhos li:last-child a { border-bottom: 0; }
.lista-atalhos a > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.lista-atalhos a.ativo { color: var(--cor-destaque); }
.lista-copiar { list-style: none; padding: 0; margin: 8px 0; }
.lista-copiar li { display: grid; grid-template-columns: 1fr 112px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--areia); }
.lista-copiar li:last-child { border-bottom: 0; }
.lista-copiar label.caixa { margin: 0; }
.lista-copiar label.caixa > span { display: flex; flex-direction: column; min-width: 0; }
.quantidade-copiar { display: flex; flex-direction: column; gap: 2px; }
.quantidade-copiar input { padding: 9px 10px; }
.quantidade-copiar span { overflow-wrap: anywhere; }
.copia-feita ul { margin: 6px 0; padding-left: 18px; }
.copia-feita form { margin-top: 6px; }

/* ---------- Aviso gentil (etapa 5c): sem cor de alarme ---------- */
.aviso-gentil { margin: 12px 0; padding: 16px; border-radius: var(--raio-pequeno); background: var(--areia); }
.aviso-gentil .subtitulo { margin-top: 0; }

/* ---------- Receitas da comunidade (etapa 5d) ---------- */
.selo-comunidade {
  display: inline-block; margin: 4px 0 2px; font-size: 0.72rem; font-weight: 500; padding: 2px 10px; border-radius: 999px;
  background: var(--areia); color: var(--cacau);
  align-self: flex-start; /* não estica dentro do card da lista */
}
.card-comunidade .botao { margin-top: 8px; }
.checklist { list-style: none; padding: 0; margin: 8px 0; }

/* Cópia de receita do app (só para a pessoa): etiqueta discreta */
.etiqueta-copia { display: inline-block; align-self: flex-start; margin-top: 3px; font-size: 0.7rem; color: var(--cor-texto-suave); border: 1px solid var(--cor-borda); padding: 1px 8px; border-radius: 999px; }

/* ---------- Etapa 5e ---------- */
/* Bloquinho da sequência (tela Hoje), logo abaixo do card de calorias */
.bloco-sequencia {
  margin: 0 0 14px; padding: 9px 14px; border-radius: var(--raio-pequeno);
  background: var(--cor-sequencia-fundo); color: var(--cacau); border-left: 4px solid var(--cor-sequencia);
  font-size: 0.88rem; font-weight: 500;
}
/* Maior sequência (Progresso), como conquista */
.conquista-sequencia { margin: 10px 0 0; font-size: 0.85rem; color: var(--cor-sequencia); font-weight: 600; }

/* "Já tem um plano alimentar com macros?": só texto, sem botão */
.link-plano { color: var(--cor-destaque); font-size: 0.85rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* Selo de calorias por porção nas receitas */
.selo-kcal {
  align-self: flex-start; display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px;
  background: var(--grafite); color: var(--branco); font-size: 0.78rem; font-weight: 600;
}
.selo-kcal-incompleto { background: var(--areia); color: var(--cor-texto-suave); font-weight: 500; }
.macros-porcao { display: block; font-size: 0.72rem; color: var(--cor-texto-suave); }
.card-receita .selo-kcal { margin-left: 12px; }
.card-receita .macros-porcao { padding: 0 12px; }
.selo-linha { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.selo-linha .selo-kcal { margin-top: 0; }

/* Filtro por calorias nas listas de receitas */
.filtro-kcal { margin: 6px 0 14px; }
.abas-pequenas { margin: 6px 0; }
.abas-pequenas a { font-size: 0.8rem; }
.linha-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.85rem; }
.linha-filtro label { margin: 0; }
.linha-filtro input#ate-kcal { width: 100px; padding: 6px 10px; }
.caixa-inline { flex-basis: 100%; margin: 2px 0; }

/* ---------- Etapa 5g ---------- */
/* Tipo da receita (doce, salgado ou agridoce) nos cartões e na tela da receita */
.chip-tipo { align-self: flex-start; display: inline-block; margin-top: 3px; font-size: 0.72rem; color: var(--cacau); background: var(--areia); padding: 1px 9px; border-radius: 999px; }
.card-receita .chip-tipo { margin-left: 12px; }
.chip-tipo-leitura { background: var(--areia); }
/* Área da nutricionista › Receitas sem tipo */
.lista-sem-tipo { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-sem-tipo li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.botoes-tipo { display: flex; gap: 6px; flex-wrap: wrap; }
/* Aviso gentil no próprio campo numérico (public/js/numeros.js) */
.erro-campo { margin: 4px 0 8px; font-size: 0.8rem; color: var(--cor-erro); }
input[aria-invalid="true"] { border-color: var(--cor-erro); }
/* Saudação no topo da tela Hoje */
.saudacao { margin: 0 0 6px; font-size: 0.85rem; font-weight: 500; color: var(--cor-apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Conferência de macros no topo do formulário: em cartão branco quando fica fora de um cartão */
.formulario:not(.card) > .aviso-conferencia { background: var(--branco); box-shadow: var(--sombra); }

/* =========================================================
   ETAPA 5h: destaque do cartão de calorias (tela Hoje)
   Só o cartão de calorias usa .card-destaque; macros e refeições não.
   Fundo BRANCO como os outros cartões. O destaque fica em: borda azul clarinha,
   sombra um pouco mais marcada, número maior e barra um pouco mais grossa.
   O resto continua com as cores de antes (rosé da saudação e de "CALORIAS",
   cinza-rosado da barra quando passa da meta). Nada de vermelho ou cor de alerta.
   Contraste conferido (tests/etapa5h.test.js): texto principal, texto suave e rótulos
   ficam acima de 4,5:1 sobre o fundo branco.
   ========================================================= */
:root {
  --cor-destaque-borda: #b9deeb;   /* azul clarinho (família do --azul, o dos botões "Registre") */
  --cor-destaque-rotulo: #94504f;  /* rosé um pouco mais escuro que o --rose: mesmo tom, legível (acima de 4,5:1) */
  --sombra-destaque: 0 4px 16px rgba(17, 138, 178, 0.12);
}
.card-destaque {
  background: var(--cor-card); /* branco, igual aos outros cartões */
  border: 1px solid var(--cor-destaque-borda);
  box-shadow: var(--sombra-destaque);
}
/* Saudação e "CALORIAS" em rosé */
.card-destaque .saudacao,
.card-destaque .rotulo { color: var(--cor-destaque-rotulo); }
/* Número um pouco maior e barra um pouco mais grossa (o trilho continua cinza, como nos macros) */
.card-destaque .consumo strong { font-size: 2.3rem; }
.card-destaque .barra-calorias { height: 14px; }
@media (max-width: 360px) {
  .card-destaque .consumo strong { font-size: 2rem; } /* celulares bem estreitos */
}