/*
 * Fonte: no iPhone/Mac o app usa a fonte do sistema da Apple (SF Pro), que é
 * a original. Nos outros aparelhos entra a Inter, que tem as mesmas
 * proporções da SF Pro. A SF Pro em si não pode ser embutida: a licença da
 * Apple só permite usá-la em plataformas da própria Apple.
 * A Inter fica hospedada aqui (e não no Google Fonts) pra funcionar offline.
 * Licença SIL OFL 1.1: assets/fonts/Inter-LICENSE.txt.
 */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Outfit: fonte da marca olivo (títulos e números grandes). Variável, licença
   SIL OFL; vem de identidadevisual/. Hospedada aqui pra funcionar offline. */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* BlinkMacSystemFont = SF Pro no Chrome do Mac; fora da Apple os dois nomes são ignorados e vale a Inter. */
  --fonte-texto: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  /* Marca olivo: títulos e números em destaque em Outfit (manual de marca, p. 9). */
  --fonte-titulo: 'Outfit', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --fonte-numeros: 'Outfit', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  /* Verde olivo (cor da marca) e floresta (contraste), do manual de marca. */
  --cor-primaria: #55862B;
  --cor-primaria-escura: #2F4D18;
  /* Barras dos macros no card de resumo (cores do sistema do iOS). */
  --cor-proteina: #ff3b30;
  --cor-carboidrato: #ff9500;
  --cor-gordura: #ffcc00;
  /* Tema claro no esquema do iOS: fundo cinza agrupado (o mesmo dos Ajustes e
     do app Saúde), cards brancos e textos em cinza neutro. */
  --cor-fundo: #f2f2f7;
  --cor-fundo-card: #ffffff;
  --cor-texto: #1c1c1e;
  --cor-texto-suave: #6e6e73;
  --cor-borda: #e5e5ea;
  /* No claro os cards se destacam só pela sombra, sem contorno; no escuro o contorno volta. */
  --cor-borda-card: transparent;
  /* Vidro da barra de abas: translúcido, contorno claro e brilho na borda de cima. */
  /* Vidro no estilo Liquid Glass: bem transparente e com desfoque LEVE, pra o
     conteúdo que passa por trás continuar aparecendo. A versão anterior (62%
     de branco + desfoque de 24px) transformava tudo atrás em branco e o
     rodapé parecia sólido. O degradê dá o reflexo de cima pra baixo. */
  --vidro-fundo: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.14) 100%);
  --vidro-desfoque: blur(8px) saturate(180%);
  /* Contorno e brilho sutis, os mesmos do tema escuro (o branco forte ficava marcado demais). */
  --vidro-borda: rgba(255, 255, 255, 0.14);
  --vidro-sombra: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
  --vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --vidro-aba-ativa: rgba(0, 0, 0, 0.07);
  --vidro-aba-pressionada: rgba(0, 0, 0, 0.06);
  --cor-deficit: #55862B;
  --cor-superavit: #d9822b;
  --cor-perigo: #c0392b;
  --cor-azul: #2f6fd0;
  --cor-azul-fundo: rgba(47, 111, 208, 0.12);
  --cor-agua: #1a8cf0;
  --cor-agua-claro: #5cb6ff;
  --cor-agua-vazio: rgba(26, 140, 240, 0.09);
  --cor-agua-borda: rgba(26, 140, 240, 0.30);
  /* Ícones e textos da barra de abas. No claro, tudo preto; no escuro, as abas
     comuns em cinza claro e só a ativa em branco. */
  --cor-nav-icone: #1c1c1e;
  --cor-nav-ativa: #1c1c1e;
  /* Popups no estilo iOS: cor de destaque do app nos botões, vermelho do sistema no destrutivo. */
  --cor-tint: #55862B;
  --cor-destrutivo: #ff3b30;
  --popup-fundo: rgba(242, 242, 247, 0.86);
  --popup-linha: rgba(60, 60, 67, 0.29);
  --popup-pressionado: rgba(0, 0, 0, 0.06);
  --cor-sk: rgba(0, 0, 0, 0.06);
  --cor-sk-brilho: rgba(255, 255, 255, 0.7);
  /*
   * Folga embaixo da barra de abas. Nos iPhones sem botão, a área segura
   * inferior (env(safe-area-inset-bottom)) vale 34pt, mas a barra de gestos
   * só precisa de uns 20pt livres; usar os 34 inteiros deixava a barra alta,
   * com um vão embaixo. Sem área segura (Android, iPhone com botão), 6px.
   * Tudo que fica preso ao rodapé (barra, botões do microfone, dica) se
   * posiciona a partir desta mesma medida.
   */
  --folga-rodape: max(6px, calc(env(safe-area-inset-bottom) - 14px));
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.05);
  --sombra-botao-entrada: 0 4px 16px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.08);
  /* --cor-fundo em RGB, pro degradê do pé da tela (.fade-rodape). */
  --cor-fundo-rgb: 242, 242, 247;
  /* Listas agrupadas (Ajustes): linha fina entre linhas e linha pressionada. */
  --cor-separador-lista: rgba(60, 60, 67, 0.18);
  --cor-linha-pressionada: #e5e5ea;
  --cor-chevron: #c4c4c7;
  /* Borda de campos e opções (inputs, Masculino/Feminino...): um pouco mais
     escura que a das divisórias, pra o campo se destacar do fundo. */
  --cor-borda-campo: #d1d1d6;
}

[data-tema="escuro"] {
  --cor-separador-lista: rgba(255, 255, 255, 0.1);
  --cor-linha-pressionada: rgba(255, 255, 255, 0.08);
  --cor-chevron: #5c6366;
  --cor-borda-campo: #3a4246;
  --cor-fundo: #14181a;
  --cor-fundo-card: #1e2427;
  --cor-texto: #eef1ec;
  --cor-texto-suave: #a3ab9f;
  --cor-borda: #2a3134;
  --cor-borda-card: #2a3134;
  --vidro-fundo: linear-gradient(180deg, rgba(70, 76, 80, 0.4) 0%, rgba(34, 40, 43, 0.28) 100%);
  --vidro-desfoque: blur(8px) saturate(160%);
  --vidro-borda: rgba(255, 255, 255, 0.14);
  --vidro-sombra: 0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --vidro-aba-ativa: rgba(255, 255, 255, 0.14);
  --vidro-aba-pressionada: rgba(255, 255, 255, 0.08);
  --cor-azul: #7db0ff;
  --cor-azul-fundo: rgba(125, 176, 255, 0.16);
  --cor-agua: #3aa2ff;
  --cor-agua-claro: #7cc4ff;
  --cor-agua-vazio: rgba(58, 162, 255, 0.10);
  --cor-agua-borda: rgba(58, 162, 255, 0.34);
  --cor-proteina: #ff453a;
  --cor-carboidrato: #ff9f0a;
  --cor-gordura: #ffd60a;
  --cor-nav-icone: #aeaeb2;
  --cor-nav-ativa: #ffffff;
  --cor-tint: #55862B;
  --cor-destrutivo: #ff453a;
  --popup-fundo: rgba(37, 37, 39, 0.9);
  --popup-linha: rgba(84, 84, 88, 0.65);
  --popup-pressionado: rgba(255, 255, 255, 0.08);
  --cor-sk: rgba(238, 241, 236, 0.07);
  --cor-sk-brilho: rgba(255, 255, 255, 0.06);
  --sombra: 0 2px 10px rgba(0,0,0,0.35);
  --sombra-botao-entrada: 0 4px 14px rgba(0,0,0,0.5);
  --cor-fundo-rgb: 20, 24, 26;
}

* { box-sizing: border-box; }

html {
  touch-action: manipulation;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.5;
  transition: background .2s, color .2s;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

input, textarea {
  -webkit-touch-callout: default;
  user-select: text;
  -webkit-user-select: text;
}

/* Botões e campos não herdam a fonte da página por padrão no navegador. */
button, input, select, textarea { font-family: inherit; }

.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: calc(190px + var(--folga-rodape));
}

header.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--cor-fundo-card);
  border-bottom: 1px solid var(--cor-borda);
  position: sticky;
  top: 0;
  z-index: 10;
}

.aviso-topo {
  position: fixed;
  top: 14px;
  left: 16px;
  right: 16px;
  max-width: 528px;
  margin: 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform .25s ease, opacity .25s ease;
}
.icone-aviso { width: 20px; height: 20px; flex-shrink: 0; }
.icone-aviso.girando { animation: girar .9s linear infinite; }

.aviso-topo.aviso-erro { background: var(--cor-perigo); color: #fff; }
.aviso-topo.aviso-sucesso { background: var(--cor-primaria); color: #fff; }
.aviso-topo.aviso-progresso {
  background: var(--cor-fundo-card);
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
}
.aviso-topo.aviso-progresso .icone-aviso { color: var(--cor-primaria); }

.aviso-topo.escondido {
  transform: translateY(-16px);
  opacity: 0;
  pointer-events: none;
}

/* Logo + nome: só nas telas sem barra de abas (login e cadastro). */
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
}
.marca img { width: 32px; height: 32px; border-radius: 8px; }

/* Lado esquerdo do cabeçalho: quadradinho com ícone + título e subtítulo. */
/* Ocupa todo o espaço que sobra à esquerda dos badges: assim a largura da
   data depende só dos badges, e não do próprio texto (o que faria o ajuste
   de formato da data ficar trocando de tamanho). */
.topo-titulo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.topo-icone {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 13px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}
.topo-icone svg { width: 22px; height: 22px; }
.topo-icone-botao {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.topo-icone-botao:active { transform: scale(0.94); opacity: 0.8; }
.topo-textos {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}
.topo-textos-botao {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topo-titulo-principal {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--cor-texto);
}
.topo-subtitulo {
  font-size: 13px;
  line-height: 18px;
  color: var(--cor-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acoes-topo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Cabeçalho integrado (tela inicial): é o próprio fundo da página, sem borda,
   e não fica fixo — rola junto com o conteúdo, como o título grande do iOS. */
header.topo.topo-integrado {
  position: relative;
  background: var(--cor-fundo);
  border-bottom-color: transparent;
}
/* Sobre o fundo cinza, o que era cinza some: vira branco com sombra leve. */
.topo-integrado .topo-icone,
.topo-integrado .streak-badge {
  background: var(--cor-fundo-card);
  box-shadow: var(--sombra);
}

/*
 * Tela inicial, tudo numa linha:
 *   [marca: quadradinho verde com a azeitona + nome]  [dia: calendário + Hoje/data]  [sequência]
 * A marca é igual ao ícone do app; o dia fica centralizado no espaço do meio
 * e a data escolhe sozinha o formato que cabe (app.js, ajustarSubtituloDia).
 */
/* Logo sozinho no canto esquerdo; à direita, o dia (calendário + data) junto
   da sequência. Mais respiro em cima e menos embaixo (o container já dá 20px
   até o card). */
header.topo.topo-integrado {
  gap: 12px;
  padding: 18px 20px 4px;
}
.topo-integrado .topo-titulo.topo-marca { flex: none; gap: 8px; }
.topo-integrado .topo-dia { margin-left: auto; }
.topo-integrado .topo-icone.topo-icone-marca {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--cor-primaria);
  color: #F5F7EF;
  box-shadow: none;
}
.topo-icone-marca svg { width: 24px; height: 24px; }
.topo-marca-nome {
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  /* Letras levemente aproximadas, como no logo. */
  letter-spacing: -0.035em;
  color: var(--cor-texto);
}
.topo-dia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.topo-dia .topo-icone { width: 36px; height: 36px; border-radius: 10px; }
.topo-dia .topo-icone svg { width: 19px; height: 19px; }
/* O texto do dia só ocupa o que precisa (fica junto do calendário, no meio). */
.topo-dia .topo-textos { flex: 0 1 auto; }
.topo-dia .topo-titulo-principal { font-size: 17px; line-height: 20px; }
.topo-dia .topo-subtitulo { font-size: 12px; line-height: 15px; }

.streak-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 20px;
  background: var(--cor-fundo);
  color: var(--cor-superavit);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  line-height: normal;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.streak-badge.escondido { display: none; }

/* ============================================================
   LOGIN E CADASTRO — estilo das telas de conta da Apple
   ============================================================ */
body.corpo-auth main.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.auth { width: 100%; max-width: 400px; margin: 0 auto; }
.auth-marca { margin-bottom: 28px; text-align: center; }
.auth-icone {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}
.auth-marca h1 { margin: 18px 0 6px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.auth-marca p { max-width: 300px; margin: 0 auto; font-size: 15px; line-height: 1.4; color: var(--cor-texto-suave); }

.auth-form .grupo-lista { margin-bottom: 16px; }
.auth-form .grupo-rodape { margin: -8px 16px 20px; }
.auth-campo { cursor: text; gap: 10px; }
.auth-rotulo { width: 62px; flex-shrink: 0; }
.auth-campo input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 6px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 17px;
}
.auth-campo input:focus { outline: none; }
.auth-campo input::placeholder { color: var(--cor-texto-suave); opacity: 0.6; }
.auth-mostrar {
  flex-shrink: 0;
  padding: 6px 0;
  border: none;
  background: none;
  color: var(--cor-tint);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.auth-mostrar:active { opacity: 0.5; }
.auth-lembrar { cursor: pointer; }
.auth-botao { margin-top: 4px; padding: 15px; border-radius: 14px; font-size: 17px; font-weight: 600; }
.auth-botao:disabled { opacity: 0.6; cursor: default; }
.auth-alternativa { margin: 22px 0 0; text-align: center; font-size: 15px; color: var(--cor-texto-suave); }
.auth-alternativa a { color: var(--cor-tint); font-weight: 600; text-decoration: none; }

/* Interruptor (toggle) do iOS feito com um checkbox. */
.ios-switch {
  position: relative;
  flex-shrink: 0;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: 999px;
  background: var(--cor-linha-pressionada);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.ios-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.ios-switch:checked { background: var(--cor-primaria); }
.ios-switch:checked::before { transform: translateX(20px); }
[data-tema="escuro"] .ios-switch:not(:checked) { background: rgba(120, 120, 128, 0.32); }

/* ---- Painel da sequência (toque na chama) ---- */
.streak-destaque { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.streak-destaque-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  background: linear-gradient(160deg, #ffb340, #ff7a1a);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 122, 26, 0.3);
}
.streak-destaque-icone svg { width: 30px; height: 30px; }
.streak-destaque-textos { display: flex; flex-direction: column; }
.streak-destaque-textos strong {
  font-family: var(--fonte-numeros);
  font-size: 30px;
  font-weight: 800;
  line-height: 34px;
  letter-spacing: -0.02em;
  color: var(--cor-texto);
}
.streak-destaque-textos span { font-size: 14px; color: var(--cor-texto-suave); }
.streak-frase { margin: 12px 0 16px; font-size: 14px; line-height: 1.4; color: var(--cor-texto-suave); }

.streak-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.streak-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--cor-fundo);
}
.streak-stat strong {
  font-family: var(--fonte-numeros);
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}
.streak-stat strong small { font-size: 13px; font-weight: 600; color: var(--cor-texto-suave); }
.streak-stat span { font-size: 11px; line-height: 14px; color: var(--cor-texto-suave); }

.streak-grade-titulo {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}
.streak-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 20px; }
.streak-grade-semana { font-size: 11px; font-weight: 600; text-align: center; color: var(--cor-texto-suave); }
.streak-dia {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--cor-fundo);
  font-size: 12px;
  font-weight: 600;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}
.streak-dia.feito { background: linear-gradient(160deg, #ffb340, #ff7a1a); color: #fff; }
.streak-dia.antes { opacity: 0.4; }
.streak-dia.futuro { background: transparent; }
.streak-dia.hoje { box-shadow: inset 0 0 0 2px var(--cor-texto); }
.streak-dia.hoje.feito { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }
.streak-fechar { width: 100%; }
.icone-streak { width: 17px; height: 17px; }

/* Peso atual no cabeçalho, ao lado do streak: leva pra página de Peso. */
.peso-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 20px;
  background: var(--cor-azul-fundo);
  color: var(--cor-azul);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.peso-badge.escondido { display: none; }
.icone-peso-badge { width: 16px; height: 16px; }
.icone-botao {
  background: none;
  border: none;
  font-size: 20px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--cor-texto);
}
.icone-botao:hover { background: var(--cor-borda); }

.card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda-card);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--sombra);
}

/* Títulos na fonte da marca (Outfit). */
h1, h2, h3 { margin: 0 0 10px; font-family: var(--fonte-titulo); letter-spacing: -0.01em; }
h3.titulo-secao { margin: 32px 0 14px; }

.titulo-secao-linha { display: flex; align-items: center; justify-content: space-between; margin: 32px 0 14px; }
.titulo-secao-linha .titulo-secao { margin: 0; }
.botao-editar-refeicoes {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--cor-texto-suave);
  font-size: 13px;
  text-decoration: none;
  padding: 4px 2px;
  cursor: pointer;
}
.icone-editar-mini { width: 15px; height: 15px; }

.aviso-vazio {
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: 14px;
  padding: 26px 16px;
}
.aviso-vazio .icone-dica {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 10px;
  color: var(--cor-texto-suave);
  opacity: 0.75;
}
/* Dica embaixo do "nenhum lançado" (ex: exercícios podem ser falados). */
.aviso-vazio-dica {
  display: block;
  max-width: 290px;
  margin: 12px auto 0;
  padding-top: 12px;
  border-top: 1px solid var(--cor-borda);
  font-size: 13px;
  line-height: 1.45;
  color: var(--cor-texto-suave);
}
.aviso-vazio-dica strong { font-weight: 400; color: inherit; }
.aviso-vazio-dica .icone-texto { color: var(--cor-primaria); }

/* Ícones no lugar dos antigos emojis: acompanham o tamanho do texto ao lado. */
.icone-texto {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  margin-right: 0.4em;
  vertical-align: -0.2em;
}
.icone-destaque { color: var(--cor-primaria); }
.icone-cor-agua { color: var(--cor-agua); }


/* Aviso de dia passado, no estilo das notificações/células do iOS:
   [ícone laranja]  Editando um dia anterior          ( Hoje )
                    O que você lançar entra nesse dia.            */
.faixa-dia-passado {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -6px 0 16px;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--cor-borda-card);
  border-radius: 16px;
  background: var(--cor-fundo-card);
  box-shadow: var(--sombra);
  animation: faixa-dia-entrar 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.faixa-dia-passado.escondido { display: none; }
@keyframes faixa-dia-entrar { from { opacity: 0; transform: translateY(-6px); } }
.faixa-dia-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: #ff9500;
  color: #fff;
}
.faixa-dia-icone svg { width: 19px; height: 19px; }
.faixa-dia-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.faixa-dia-textos strong { font-size: 14px; font-weight: 600; line-height: 18px; color: var(--cor-texto); }
.faixa-dia-textos span { font-size: 12px; line-height: 16px; color: var(--cor-texto-suave); }
.faixa-dia-passado button {
  flex-shrink: 0;
  padding: 7px 14px;
  border: none;
  border-radius: 999px;
  background: rgba(85, 134, 43, 0.12);
  color: var(--cor-tint);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ---- Calendário (escolha do dia a ver/editar) ---- */
.calendario-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.calendario-topo h3 { margin: 0; font-size: 16px; text-transform: capitalize; }
.calendario-nav {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  background: var(--cor-fundo-card);
  color: var(--cor-texto);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.calendario-nav:disabled { opacity: 0.35; cursor: default; }

.calendario-semana,
.calendario-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendario-semana {
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--cor-texto-suave);
  text-align: center;
}
.dia-calendario {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--cor-texto);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.dia-calendario.vazio { visibility: hidden; }
.dia-calendario:disabled { color: var(--cor-texto-suave); opacity: 0.4; cursor: default; }
/* Bolinha verde em volta do número: dia que já tem algo registrado. */
.dia-calendario.com-registro { box-shadow: inset 0 0 0 2px var(--cor-primaria); font-weight: 700; }
.dia-calendario.hoje { background: var(--cor-borda); }
.dia-calendario.selecionado { background: var(--cor-primaria); color: #fff; font-weight: 700; }
.dia-calendario.selecionado.com-registro { box-shadow: inset 0 0 0 2px var(--cor-primaria-escura); }

.calendario-legenda {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 16px;
  font-size: 12px;
  color: var(--cor-texto-suave);
}
.legenda-bolinha {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--cor-primaria);
}

.linha-resumo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 8px 0;
}
.linha-resumo .valor { font-size: 22px; font-weight: 700; }
.linha-resumo .rotulo { color: var(--cor-texto-suave); font-size: 14px; }

.balanco-deficit { color: var(--cor-deficit); }
.balanco-superavit { color: var(--cor-superavit); }

.titulo-card { margin: 0 0 14px; font-size: 15px; }

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda-card);
  border-radius: 18px;
  padding: 14px 12px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.icone-stat {
  width: 24px;
  height: 24px;
  color: var(--cor-primaria);
}
.rotulo-stat {
  font-size: 12px;
  color: var(--cor-texto-suave);
}
.valor-stat {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}
.stat-card.stat-deficit .icone-stat,
.stat-card.stat-deficit .valor-stat { color: var(--cor-deficit); }
.stat-card.stat-superavit .icone-stat,
.stat-card.stat-superavit .valor-stat { color: var(--cor-superavit); }

/* ---- Card de resumo do dia (topo da tela inicial) ----
 *
 * Tudo aqui é medido a partir do arco, que tem LARGURA FIXA (160px) pra o
 * alinhamento não depender da largura da tela:
 *   - o SVG tem viewBox 200x158, então com 160px de largura ele fica com
 *     ~126px de altura, e o centro do círculo cai em 100/158 = 63% da altura;
 *   - o número central é centralizado exatamente nesse ponto;
 *   - os números dos lados descem o suficiente pra ficar na mesma linha dele.
 */
.resumo-card { padding: 20px 18px 18px; margin-bottom: 20px; }

.resumo-topo {
  display: grid;
  grid-template-columns: 1fr 160px 1fr;
  align-items: start;
  column-gap: 6px;
}
.resumo-lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  /* Centro do número central ≈ 70px do topo do arco; número do lado tem ~24px. */
  padding-top: 57px;
  text-align: center;
}
.resumo-valor {
  font-family: var(--fonte-numeros);
  font-size: 21px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}
.resumo-rotulo { margin-top: 3px; font-size: 12px; line-height: 16px; color: var(--cor-texto-suave); }
.resumo-meta { margin-top: 2px; font-size: 11px; line-height: 15px; color: var(--cor-texto-suave); white-space: nowrap; }
.resumo-meta #valorMeta { font-family: var(--fonte-texto); font-weight: 600; color: var(--cor-texto); }

.resumo-arco { position: relative; width: 160px; }
.resumo-arco svg { display: block; width: 100%; height: auto; overflow: visible; }
.arco-trilha,
.arco-progresso {
  fill: none;
  stroke-width: 15;
  stroke-linecap: round;
}
.arco-trilha { stroke: var(--cor-borda); }
/* O app.js redesenha o traço (atributo d) no tamanho exato do progresso, animado. */
.arco-progresso {
  stroke: var(--cor-primaria);
  opacity: 0;
  transition: stroke 0.3s;
}
.resumo-card.acima-da-meta .arco-progresso { stroke: var(--cor-superavit); }

/* Centralizado no centro do círculo do arco (63% da altura), não no retângulo do SVG. */
.resumo-centro {
  position: absolute;
  left: 0;
  right: 0;
  top: 63%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.resumo-restante {
  font-family: var(--fonte-numeros);
  font-size: 38px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.02em;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}
.resumo-restante-rotulo { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--cor-texto-suave); }
.resumo-card.acima-da-meta .resumo-restante { color: var(--cor-superavit); }

.resumo-balanco {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 14px auto 18px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}
.resumo-balanco strong { font-family: var(--fonte-texto); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Conteúdo do dia na tela inicial: arrastar pro lado troca de dia (app.js).
   pan-y deixa a rolagem vertical com o navegador e o horizontal com o app. */
.conteudo-dia { touch-action: pan-y; }
/* O dia que sai pelo lado não pode criar rolagem horizontal na página. */
main.container:has(.conteudo-dia) { overflow-x: clip; }
/* Calendário: o mês que sai pelo lado não vaza da folha. */
.folha-calendario { overflow-x: clip; }

/* Déficit do dia + peso atual lado a lado, centralizados. */
.resumo-pilulas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 18px;
}
.resumo-pilulas .resumo-balanco { margin: 0; padding: 7px 12px; }
.resumo-peso { padding: 7px 11px; font-size: 15px; line-height: 18px; font-variant-numeric: tabular-nums; }
/* iPhone estreito (SE, mini, 375px): tudo um pouco menor pra caber numa linha. */
@media (max-width: 380px) {
  .resumo-pilulas { gap: 6px; }
  .resumo-pilulas .resumo-balanco { gap: 4px; padding: 7px 10px; font-size: 12px; }
  .resumo-pilulas .resumo-balanco strong,
  .resumo-peso { font-size: 14px; }
  .resumo-peso { padding: 7px 9px; gap: 3px; }
  .resumo-peso .icone-peso-badge { width: 14px; height: 14px; }
}
.resumo-balanco.deficit { background: rgba(85, 134, 43, 0.11); color: var(--cor-deficit); }
.resumo-balanco.superavit { background: rgba(217, 130, 43, 0.13); color: var(--cor-superavit); }

.resumo-card .grid-macros { padding-top: 14px; border-top: 1px solid var(--cor-borda); }
.resumo-card .valor-macro { font-family: var(--fonte-texto); margin-top: 1px; font-size: 15px; line-height: 20px; }

/* ---- Água: uma linha no rodapé do card de resumo ----
 * [gota]  1.250 / 3.500 ml        faltam 2.250 ml   [+]
 */
.linha-agua {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--cor-borda);
}
.icone-gota { width: 18px; height: 18px; flex-shrink: 0; color: var(--cor-agua); }
.linha-agua-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.linha-agua-valor { white-space: nowrap; font-size: 13px; color: var(--cor-texto-suave); }
#aguaTotal {
  font-family: var(--fonte-texto);
  font-size: 15px;
  font-weight: 700;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}
.linha-agua-meta { color: inherit; text-decoration: none; }
.linha-agua-status {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  color: var(--cor-texto-suave);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.linha-agua.meta-atingida .linha-agua-status { color: var(--cor-agua); font-weight: 600; }
.icone-agua-ok { width: 13px; height: 13px; flex-shrink: 0; }

.botao-agua-mais {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--cor-agua-vazio);
  color: var(--cor-agua);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.botao-agua-mais:active { background: var(--cor-agua-borda); }
.botao-agua-mais svg { width: 14px; height: 14px; }
.botao-agua-mais.pulsando { animation: pulsar-agua 0.35s ease-out; }
/* − e + juntinhos, mais perto um do outro que do texto. */
#btnAguaMenos { margin-right: -2px; }
.botao-agua-mais:disabled { opacity: 0.35; cursor: default; }
@keyframes pulsar-agua {
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.agua-desfazer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 6px 6px 6px 12px;
  border-radius: 10px;
  background: var(--cor-agua-vazio);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cor-agua);
  animation: surgir-desfazer 0.2s ease-out;
}
.agua-desfazer.escondido { display: none; }
.agua-desfazer button {
  border: none;
  background: var(--cor-fundo-card);
  color: var(--cor-agua);
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
}
@keyframes surgir-desfazer {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Campo de água na tela de confirmação dos comandos de voz/texto. */
.campo-agua-confirmacao { margin-top: 6px; }
.campo-agua-confirmacao .edicao-label { display: flex; align-items: center; gap: 5px; }
.icone-gota-label { width: 14px; height: 14px; color: var(--cor-agua); }

.grid-macros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.macro-item { min-width: 0; }
.macro-proteina { --cor-macro: var(--cor-proteina); }
.macro-carboidrato { --cor-macro: var(--cor-carboidrato); }
.macro-gordura { --cor-macro: var(--cor-gordura); }
.macro-item .rotulo { font-size: 12px; line-height: 16px; color: var(--cor-texto-suave); }
.valor-macro {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* " / 186g": um pouco menor que o consumido, pra "197g / 224g" caber em iPhone estreito. */
.valor-macro-meta { font-size: 13px; font-weight: 400; color: var(--cor-texto-suave); }
.macro-trilha {
  height: 5px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--cor-borda);
}
.macro-barra {
  height: 100%;
  border-radius: 3px;
  background: var(--cor-macro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.refeicao-card { padding: 14px 16px; margin-bottom: 12px; }
/* Refeição sem nada lançado fica esmaecida enquanto fechada; ao tocar e abrir, volta ao normal. */
/* Ao rolar até uma refeição (depois de um lançamento), ela não para escondida atrás da barra de abas. */
.refeicao-card { scroll-margin: 16px 0 calc(110px + var(--folga-rodape)); }
.refeicao-card.vazia { transition: opacity 0.2s ease, box-shadow 0.2s ease; }
.refeicao-card.vazia.colapsada { opacity: 0.5; box-shadow: none; }
.refeicao-titulo {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}
.refeicao-titulo-clicavel { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
/* Cabeçalho da refeição: textos à esquerda; calorias + seta no meio da altura. */
.refeicao-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.refeicao-cabecalho-textos { flex: 1; min-width: 0; }
.refeicao-card:not(.colapsada) .refeicao-cabecalho { margin-bottom: 8px; }
.refeicao-titulo-direita { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-weight: 700; white-space: nowrap; }
/* Seta: aponta pra baixo com a refeição fechada e gira pra cima ao abrir. */
.seta-expandir {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--cor-chevron);
  transform: rotate(-90deg);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.refeicao-card.colapsada .seta-expandir { transform: rotate(90deg); }
/* Macros da refeição: letra em cinza e valor em negrito (sem cores). */
.refeicao-macros { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--cor-texto-suave); margin-top: 4px; }
.refeicao-macros .macro-chip { gap: 3px; }
/* Tudo leve: o valor no mesmo peso e cor da letra. */
.refeicao-macros .macro-chip strong { font-family: inherit; font-weight: 400; color: inherit; }
.refeicao-card.colapsada .refeicao-itens { display: none; }
.refeicao-vazia-aviso { font-size: 13px; color: var(--cor-texto-suave); padding: 6px 0 2px; }
.item-alimento {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
}
.item-alimento span.nome { color: var(--cor-texto); }
.item-macros { font-size: 11px; color: var(--cor-texto-suave); margin-top: 3px; }

.swipe-item {
  position: relative;
  overflow: hidden;
}
.swipe-conteudo {
  position: relative;
  background: var(--cor-fundo-card);
  touch-action: pan-y;
  will-change: transform;
  /* Segurar o dedo abre a edição: sem seleção de texto nem menu do iOS. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;
}
/* Toque num alimento: realce de célula do iOS (a folha de edição abre). */
.swipe-conteudo.pressionado { background: var(--cor-linha-pressionada); transition: background-color 0.15s ease 0.06s; }

/* "Excluir alimento" na folha de edição: ação destrutiva em texto, como no iOS. */
.botao-excluir-folha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--cor-destrutivo);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.botao-excluir-folha:active { background: rgba(255, 59, 48, 0.1); }
.swipe-acoes {
  position: absolute;
  top: 6px;
  right: 0;
  bottom: 6px;
  display: flex;
}
.swipe-acao-excluir, .swipe-acao-editar {
  width: 50px;
  margin: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.swipe-acao-editar { background: var(--cor-primaria); border-radius: 12px 0 0 12px; }
.swipe-acao-excluir { background: var(--cor-perigo); border-radius: 0 12px 12px 0; }
.swipe-acoes > .swipe-acao-excluir:only-child { border-radius: 12px; }
.icone-swipe-excluir, .icone-swipe-editar { width: 22px; height: 22px; }

.dica-flutuante {
  position: fixed;
  left: 50%;
  bottom: calc(190px + var(--folga-rodape));
  transform: translateX(-50%);
  max-width: 250px;
  background: var(--cor-primaria);
  color: #fff;
  padding: 12px 26px 12px 16px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  z-index: 21;
  animation: dica-flutuar 2s ease-in-out infinite;
}
.dica-flutuante.escondido { display: none; }
.dica-flutuante p { margin: 0; color: #fff; font-size: 13px; max-width: none; }
.dica-flutuante::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border-width: 8px 8px 0 8px;
  border-style: solid;
  border-color: var(--cor-primaria) transparent transparent transparent;
}
.dica-flutuante-fechar {
  position: absolute;
  top: 2px;
  right: 6px;
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  opacity: 0.85;
  cursor: pointer;
  padding: 4px;
}
@keyframes dica-flutuar {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

.botoes-entrada-wrap {
  position: fixed;
  /* Acima do rodapé flutuante (que termina ~70px acima da folga), com espaço
     pros rótulos embaixo dos botões. */
  bottom: calc(100px + var(--folga-rodape));
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  z-index: 20;
  pointer-events: none;
}
.botoes-entrada-wrap > button {
  position: relative;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
/* Rótulo embaixo de cada botão ("Digitar", "Falar", "Foto"), como nos
   botões redondos da tela de ligação do iPhone. Os três ficam na mesma
   linha: o microfone é 24px mais alto, então o rótulo dos menores desce 12px. */
.botoes-entrada-wrap > button::before {
  content: attr(data-rotulo);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: var(--cor-texto-suave);
  white-space: nowrap;
  pointer-events: none;
}
.botoes-entrada-wrap > .botao-entrada-menor::before { top: calc(100% + 18px); }

/*
 * Entrada dos botões ao abrir a tela inicial: o microfone sobe primeiro e,
 * logo depois, teclado e câmera juntos. Os botões esperam escondidos
 * (.aguardando-entrada) até o app.js trocar pra .entrando — isso acontece
 * quando o conteúdo carrega, pra animação não rodar escondida atrás do
 * esqueleto de carregamento. A classe sai no fim, então ligar/desligar a
 * gravação depois não repete a animação.
 */
.botoes-entrada-wrap.aguardando-entrada > button { opacity: 0; }
.botoes-entrada-wrap.entrando .botao-microfone {
  animation: botao-surgir 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.botoes-entrada-wrap.entrando .botao-entrada-menor {
  animation: botao-surgir 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.14s both;
}
@keyframes botao-surgir {
  from { opacity: 0; transform: translateY(56px) scale(0.85); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.botao-microfone {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: none;
  background: var(--cor-primaria);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(85, 134, 43,0.45);
  cursor: pointer;
}
.icone-mic { width: 30px; height: 30px; }
.botao-microfone.gravando {
  background: var(--cor-perigo);
  animation: pulso 1s infinite;
}
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(192,57,43,0.5); }
  70% { box-shadow: 0 0 0 18px rgba(192,57,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); }
}

/* ---- Painel de gravação (centro da tela) ----
 * O fundo escurece a tela toda, inclusive o cabeçalho e as abas; só os botões
 * de entrada (microfone, teclado, câmera) sobem por cima dele. */
.hud-gravacao {
  position: fixed;
  inset: 0;
  z-index: 26;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.32);
  animation: hud-gravacao-fundo 0.25s ease-out;
}
.hud-gravacao.escondido { display: none; }
.hud-gravacao.saindo { animation: hud-gravacao-sair 0.2s ease-in forwards; }
body.gravacao-ativa .botoes-entrada-wrap { z-index: 27; }
@keyframes hud-gravacao-fundo { from { background: rgba(0, 0, 0, 0); } }
@keyframes hud-gravacao-sair { to { opacity: 0; } }

.hud-gravacao-caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 240px;
  padding: 26px 20px 22px;
  border-radius: 26px;
  background: var(--popup-fundo);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
  text-align: center;
  animation: hud-gravacao-entrar 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
@keyframes hud-gravacao-entrar { from { opacity: 0; transform: scale(0.88); } }

/* Ondas: 7 barras que crescem com o volume da voz (app.js). */
.hud-onda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 56px;
  margin-bottom: 14px;
}
.hud-onda i {
  display: block;
  width: 6px;
  height: 56px;
  border-radius: 3px;
  background: var(--cor-destrutivo);
  transform: scaleY(0.18);
}
.hud-gravacao-spinner {
  display: none;
  width: 46px;
  height: 46px;
  margin: 5px 0 19px;
  color: var(--cor-tint);
  animation: girar 0.9s linear infinite;
}
.hud-gravacao.processando .hud-onda,
.hud-gravacao.processando .hud-gravacao-tempo { display: none; }
.hud-gravacao.processando .hud-gravacao-spinner { display: block; }

.hud-gravacao-tempo {
  font-family: var(--fonte-numeros);
  font-size: 34px;
  font-weight: 700;
  line-height: 40px;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}
.hud-gravacao-titulo { margin-top: 2px; font-size: 17px; font-weight: 600; line-height: 22px; color: var(--cor-texto); }
.hud-gravacao-dica { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--cor-texto-suave); }

.botao-entrada-menor {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda-campo);
  background: var(--cor-fundo-card);
  color: var(--cor-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-botao-entrada);
  cursor: pointer;
}
.icone-entrada { width: 22px; height: 22px; }

/* Toque: o botão afunda um pouco, como os controles do iOS. */
.botao-microfone:active { transform: scale(0.92); box-shadow: 0 3px 10px rgba(85, 134, 43, 0.35); }
.botao-entrada-menor:active { transform: scale(0.9); opacity: 0.85; }

.botao-microfone.enviando .icone-mic,
.botao-entrada-menor.enviando .icone-entrada {
  visibility: hidden;
}
.botao-microfone.enviando,
.botao-entrada-menor.enviando {
  position: relative;
  pointer-events: none;
}
.botao-microfone.enviando::after,
.botao-entrada-menor.enviando::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
.botao-entrada-menor.enviando::after {
  width: 20px;
  height: 20px;
  border-color: rgba(85, 134, 43,0.25);
  border-top-color: var(--cor-primaria);
}
@keyframes girar {
  to { transform: rotate(360deg); }
}

/*
 * Barra de abas no estilo "Liquid Glass" da Apple: uma pílula flutuante,
 * descolada das bordas, de vidro translúcido com desfoque do que passa por
 * trás, e um contorno claro fino com brilho na borda de cima, que dá o
 * destaque de vidro. Fica acima da barra de gestos do iPhone (--folga-rodape).
 */
/*
 * Faixa no pé da tela, por trás das abas e dos botões de entrada: a cor do
 * fundo da página vai de quase sólida (embaixo) a transparente, e um
 * desfoque progressivo faz o conteúdo sumir suave, como nas bordas das telas
 * do iOS. Não bloqueia toque. Na tela inicial é mais alta, pra cobrir também
 * o microfone.
 */
.fade-rodape {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  height: calc(118px + var(--folga-rodape));
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(var(--cor-fundo-rgb), 0.94) 0%,
    rgba(var(--cor-fundo-rgb), 0.82) 30%,
    rgba(var(--cor-fundo-rgb), 0.5) 60%,
    rgba(var(--cor-fundo-rgb), 0.18) 82%,
    rgba(var(--cor-fundo-rgb), 0) 100%
  );
}
body:has(.botoes-entrada-wrap) .fade-rodape { height: calc(226px + var(--folga-rodape)); }
.fade-rodape::before {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 90%);
  mask-image: linear-gradient(to top, #000 35%, transparent 90%);
}

.nav-inferior {
  position: fixed;
  left: 50%;
  bottom: calc(var(--folga-rodape) + 6px);
  z-index: 25;
  width: calc(100% - 24px);
  max-width: 480px;
  display: flex;
  justify-content: space-around;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  background: var(--vidro-fundo);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
  box-shadow: var(--vidro-sombra), var(--vidro-brilho);
  transform: translateX(-50%);
}
.nav-inferior a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px 5px;
  border-radius: 999px;
  color: var(--cor-nav-icone);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, background-color 0.2s ease, color 0.2s ease;
}
/* A aba atual ganha uma cápsula por trás e texto mais forte. */
.nav-inferior a.ativo { color: var(--cor-nav-ativa); font-weight: 700; background: var(--vidro-aba-ativa); }
/* Toque: a aba encolhe de leve e a cápsula aparece por baixo do dedo. */
.nav-inferior a:active { transform: scale(0.92); background: var(--vidro-aba-pressionada); }
.icone-nav { width: 24px; height: 24px; margin-bottom: 2px; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}
.overlay.escondido { display: none; }
/* Tocar no fundo fecha a folha (common.js). O cursor de "clicável" também é o
   que faz o Safari do iPhone disparar o toque num elemento que não é botão. */
.overlay { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.overlay > .folha-confirmacao { cursor: auto; }

.folha-confirmacao {
  position: relative;
  background: var(--cor-fundo-card);
  width: 100%;
  max-width: 560px;
  border-radius: 20px 20px 0 0;
  padding: 26px 20px calc(22px + var(--folga-rodape));
  /* O arraste pra baixo (fechar) é tratado no common.js; sem isto o navegador
     tomaria o gesto como rolagem e cancelaria no meio. */
  touch-action: none;
}
/* A "alcinha" no topo das sheets do iOS. */
.folha-confirmacao::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: 3px;
  background: var(--cor-borda);
}
/* Fundo escurece e a folha sobe de baixo, como uma sheet nativa. */
.overlay:not(.escondido) { animation: overlay-escurecer 0.22s ease-out; }
.overlay:not(.escondido) > .folha-confirmacao { animation: folha-subir 0.36s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes overlay-escurecer { from { background: rgba(0, 0, 0, 0); } }
@keyframes folha-subir { from { transform: translateY(100%); } }

.folha-celebracao {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.celebracao-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(85, 134, 43, 0.12);
  color: var(--cor-primaria);
}
.celebracao-icone svg { width: 38px; height: 38px; }
.folha-celebracao h3 { font-size: 19px; margin-bottom: 10px; }
.folha-celebracao p { font-size: 14px; color: var(--cor-texto-suave); margin: 0 0 20px; max-width: none; }
.confete-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.confete-pedaco {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  opacity: 0.9;
  animation-name: cair-confete;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes cair-confete {
  to { top: 320px; transform: rotate(360deg); opacity: 0; }
}
.folha-confirmacao .transcrito {
  font-size: 13px;
  color: var(--cor-texto-suave);
  margin-bottom: 6px;
}
.folha-confirmacao .resumo {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
}

.campos-edicao { margin-bottom: 18px; }
.campos-edicao:empty { margin-bottom: 0; }

.linha-edicao {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.linha-edicao .edicao-alimento {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--cor-borda-campo);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 15px;
  margin-bottom: 0;
}
.botao-remover-linha {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--cor-borda);
  color: var(--cor-texto);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.edicao-label { display: block; font-size: 12px; color: var(--cor-texto-suave); margin-bottom: 4px; }
.campos-edicao input[type="number"],
.campos-edicao input[type="text"],
.campos-edicao select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--cor-borda-campo);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 14px;
  margin-bottom: 12px;
}
.campo-refeicao-outra.escondido { display: none; }
/* Linha "150g de arroz" + ×: o campo não pode herdar a margem de baixo dos
   campos da folha, senão o × fica centralizado num bloco mais alto e desce. */
.campos-edicao .linha-edicao .edicao-alimento { margin-bottom: 0; }
.botao-remover-linha svg { width: 16px; height: 16px; }

/* Atividade na confirmação: nome em cima; duração e calorias lado a lado. */
.linha-exercicio + .linha-exercicio { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cor-borda); }
.exercicio-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.campos-edicao .exercicio-topo .exercicio-descricao { flex: 1; min-width: 0; margin-bottom: 0; }
.exercicio-numeros { display: flex; gap: 8px; }
.exercicio-campo { position: relative; flex: 1; min-width: 0; }
.campos-edicao .exercicio-campo input { margin-bottom: 0; padding-right: 46px; font-size: 16px; font-weight: 600; }
.exercicio-campo span {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--cor-texto-suave);
  pointer-events: none;
}
.exercicio-detalhe { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--cor-texto-suave); }

.campo-texto-livre {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--cor-borda-campo);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 16px;
}

.botoes-confirmacao {
  display: flex;
  gap: 12px;
}
.botao-grande {
  flex: 1;
  padding: 16px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.botao-grande:active { transform: scale(0.97); opacity: 0.85; }
.botao-confirmar { background: var(--cor-primaria); color: #fff; }
.botao-cancelar { background: var(--cor-borda); color: var(--cor-texto); }

.form-card input, .form-card select {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--cor-borda-campo);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  margin-bottom: 12px;
  font-size: 15px;
}
.form-card label { display: block; font-size: 14px; font-weight: 600; color: var(--cor-texto); margin-bottom: 4px; }
/* Os campos já dão respiro embaixo (margin-bottom); os botões de opção não. */
.form-card .opcoes-tema + label { margin-top: 16px; }
.dica-campo {
  font-size: 12px;
  line-height: 1.5;
  color: var(--cor-texto-suave);
  margin: 2px 0 10px;
}

.form-card input[readonly] {
  color: var(--cor-texto-suave);
  background: var(--cor-borda);
}
.opcao-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--cor-texto);
}
.opcao-checkbox input { width: auto; margin: 0; }

.opcoes-tema { display: flex; gap: 8px; }
.opcao-tema {
  flex: 1;
  padding: 12px 8px;
  border-radius: 10px;
  border: 1px solid var(--cor-borda-campo);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.opcao-tema.ativo {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
}
/* Ícone ♂/♀ ao lado de "Masculino"/"Feminino" (onboarding e Ajustes). */
.opcao-tema:has(.icone-sexo) { display: flex; align-items: center; justify-content: center; gap: 6px; }
.icone-sexo { width: 16px; height: 16px; flex-shrink: 0; }
.segmentado-mini button { display: inline-flex; align-items: center; gap: 5px; }
.segmentado-mini .icone-sexo { width: 14px; height: 14px; }

.linha-tipo-refeicao {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  background: var(--cor-fundo-card);
  position: relative;
  transition: transform .15s ease;
}
.linha-tipo-refeicao.arrastando {
  z-index: 5;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  border-radius: 10px;
}
.grip-arrastar {
  width: 32px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-texto-suave);
  cursor: grab;
  touch-action: none;
}
.linha-tipo-refeicao.arrastando .grip-arrastar { cursor: grabbing; color: var(--cor-primaria); }
.icone-grip { width: 20px; height: 20px; }
.linha-tipo-refeicao .tipo-refeicao-nome {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 15px;
  margin-bottom: 0;
}
.form-nova-refeicao {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.form-nova-refeicao input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--cor-borda-campo);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 15px;
}
.form-nova-refeicao .botao-primario {
  padding: 14px;
}

.dica-onboarding {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--cor-borda);
  font-size: 14px;
}
.dica-onboarding:first-of-type { border-top: none; padding-top: 4px; }

body.corpo-onboarding { margin: 0; overflow: hidden; }

.onboarding-tela {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

.onboarding-slides {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.onboarding-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 28px;
  overflow-y: auto;
}

.onboarding-logo { width: 84px; height: 84px; border-radius: 20px; margin-bottom: 20px; }
/* Ícone grande de cada passo do onboarding, num quadrado arredondado como os do iOS. */
.onboarding-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin-bottom: 24px;
  border-radius: 28px;
  background: rgba(85, 134, 43, 0.12);
  color: var(--cor-primaria);
}
.onboarding-icone svg { width: 48px; height: 48px; }
.onboarding-slide h1 { font-size: 24px; margin-bottom: 10px; }
.onboarding-slide h2 { font-size: 20px; margin-bottom: 10px; }
.onboarding-slide p { color: var(--cor-texto-suave); font-size: 15px; max-width: 320px; }

.onboarding-slide-form { justify-content: flex-start; padding-top: 60px; }
.onboarding-dica-metas { margin-bottom: 16px; }
.onboarding-form { width: 100%; max-width: 320px; text-align: left; }

.opcoes-objetivo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.opcao-objetivo {
  text-align: left;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--cor-borda-campo);
  background: var(--cor-fundo);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.opcao-objetivo-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(85, 134, 43, 0.1);
  color: var(--cor-primaria);
}
.opcao-objetivo-icone svg { width: 20px; height: 20px; }
.opcao-objetivo-texto { display: flex; flex-direction: column; gap: 1px; }
.opcao-objetivo strong { font-size: 14px; color: var(--cor-texto); }
.opcao-objetivo span:not(.opcao-objetivo-icone) { font-size: 12px; color: var(--cor-texto-suave); }
.opcao-objetivo.ativo { border-color: var(--cor-primaria); background: var(--cor-fundo-card); }
.opcao-objetivo.ativo strong { color: var(--cor-primaria); }

/* ---- Último passo do onboarding ---- */
.final-resumo,
.final-manual {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.final-resumo[hidden],
.final-manual[hidden] { display: none; }
/* Só o resultado: fica centralizado na tela, sem nada pra rolar. */
.onboarding-slide-final.modo-resumo { justify-content: center; padding-top: 40px; }
.resumo-onboarding {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin-top: 6px;
}
.resumo-onboarding-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px 16px;
  border: 1px solid var(--cor-borda-card);
  border-radius: 20px;
  background: var(--cor-fundo-card);
  box-shadow: var(--sombra);
}
.resumo-onboarding-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cor-texto-suave);
}
.resumo-onboarding-rotulo svg { width: 16px; height: 16px; color: var(--cor-primaria); }
.resumo-onboarding-valor {
  font-family: var(--fonte-numeros);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}
.resumo-onboarding-unidade { font-size: 13px; color: var(--cor-texto-suave); }
.onboarding-slide-final .campos-lado-a-lado { margin: 0 0 4px; }

/* ---- Onboarding sem conta: boas-vindas e conta criada no fim ---- */
.onboarding-ja-tenho {
  margin-top: 22px;
  padding: 10px 16px;
  color: var(--cor-tint);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.onboarding-ja-tenho:active { opacity: 0.5; }
.onboarding-slide .final-conta-titulo {
  max-width: none;
  margin: 22px 0 8px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--cor-texto);
}
.final-conta-bloco[hidden] { display: none; }
.final-conta-login[hidden] { display: none; }
.final-conta-login {
  display: block;
  margin-top: 16px;
  text-align: center;
  color: var(--cor-tint);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.final-conta-login:active { opacity: 0.5; }
.final-conta { width: 100%; margin-bottom: 0; text-align: left; }
.final-conta-bloco + .botao-comecar { margin-top: 16px; }
/* Sem conta a tela final tem mais coisa: resultado lado a lado e sem o ícone,
   pra conta e o botão caberem sem rolar. */
.onboarding-anonimo .onboarding-slide-final.modo-resumo { justify-content: flex-start; padding-top: 44px; }
.onboarding-anonimo .final-resumo .onboarding-icone { display: none; }
.onboarding-anonimo .resumo-onboarding { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.onboarding-anonimo .resumo-onboarding-item { padding: 14px 10px; }
.onboarding-anonimo .resumo-onboarding-valor { font-size: 34px; }
.onboarding-anonimo .resumo-onboarding-rotulo { font-size: 12px; }
.onboarding-anonimo .resumo-onboarding-unidade { font-size: 11px; line-height: 1.3; }
.botao-comecar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 24px;
  padding: 18px;
  border: none;
  border-radius: 16px;
  background: var(--cor-primaria);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(85, 134, 43, 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.botao-comecar svg { width: 22px; height: 22px; }
.botao-comecar:active { transform: scale(0.97); opacity: 0.85; }

.botao-secundario {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--cor-texto-suave);
  font-size: 13px;
  text-decoration: underline;
  padding: 10px;
  margin-top: 4px;
  cursor: pointer;
}

.onboarding-rodape {
  padding: 16px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.onboarding-dots { display: flex; gap: 8px; }
.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-borda);
  transition: width .2s, background .2s;
}
.onboarding-dot.ativo {
  width: 22px;
  border-radius: 4px;
  background: var(--cor-primaria);
}

.onboarding-proximo {
  width: 100%;
  max-width: 320px;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: var(--cor-primaria);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.botao-primario {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: var(--cor-primaria);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.botao-primario:active { transform: scale(0.98); opacity: 0.85; }
.link-secundario { text-align: center; margin-top: 12px; font-size: 14px; }
.link-secundario a { color: var(--cor-primaria); }

.erro-mensagem { color: var(--cor-perigo); font-size: 14px; margin-bottom: 10px; }

.aviso-estimativa {
  font-size: 13px;
  color: var(--cor-texto-suave);
  margin: -6px 0 20px;
}

/* ---- Filtros de período do histórico ---- */
.filtros-periodo {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filtros-periodo::-webkit-scrollbar { display: none; }
.filtro-periodo {
  flex: 1;
  white-space: nowrap;
  padding: 9px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-fundo-card);
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.filtro-periodo.ativo {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
  color: #fff;
}

.resumo-periodo-detalhe {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto);
  margin: 0 0 6px;
}
.resumo-periodo-detalhe:empty { display: none; }

/* ---- Agrupamento por semana (segunda a domingo) ---- */
.grupo-semana {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cor-borda);
}
.grupo-semana:first-child { margin-top: 0; }
.grupo-semana-titulo {
  font-size: 14px;
  font-weight: 700;
  text-transform: capitalize;
}
.grupo-semana-badge { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ---- Página de peso: gráficos, tendências e registros ---- */
.detalhe-stat { font-size: 11px; color: var(--cor-texto-suave); margin-top: 2px; }
.icone-stat-peso { color: var(--cor-azul); }

.botao-registrar-peso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 18px;
}
/* Herda color:#fff do .botao-primario, então o traço do ícone sai branco. */
.icone-botao-peso { width: 20px; height: 20px; }

.grafico-wrap { margin: 4px 0 8px; }
.grafico { width: 100%; height: auto; display: block; }
.grafico.escondido { display: none; }
.grafico-vazio {
  margin: 24px 0;
  font-size: 13px;
  color: var(--cor-texto-suave);
  text-align: center;
}
.grafico-vazio.escondido { display: none; }

.grafico-grade { stroke: var(--cor-borda); stroke-width: 1; }
.grafico-rotulo { fill: var(--cor-texto-suave); font-size: 9px; }
.grafico-rotulo-y { text-anchor: end; }
.grafico-linha-peso {
  fill: none;
  stroke: var(--cor-azul);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.grafico-ponto-peso { fill: var(--cor-azul); }
.grafico-tendencia {
  stroke: var(--cor-texto-suave);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0.7;
}
.grafico-legenda {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto);
}
.grafico-legenda:empty { display: none; }

.linha-peso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 14px 16px;
}
.linha-peso-valor { font-size: 17px; font-weight: 700; }
.linha-peso-delta { font-size: 13px; font-weight: 700; margin-left: 8px; }
.linha-peso-data { font-size: 12px; color: var(--cor-texto-suave); margin-top: 2px; }
.botao-excluir-peso {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  background: none;
  color: var(--cor-perigo);
  cursor: pointer;
}

/*
 * Card de um dia no histórico:
 *   Seg, 28/09                [−837 kcal  ≈ −0,11 kg]
 *   CONSUMIDO    GASTO TOTAL    💧 ÁGUA
 *   1.413 kcal   2.250 kcal     1,2 L
 *   ─────────────────────────────────────
 *   ● P 78 g   ● C 167 g   ● G 44 g
 */
.historico-dia-card {
  display: block;
  padding: 16px 18px;
  margin-bottom: 12px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.historico-dia-card:active { transform: scale(0.98); opacity: 0.85; }
.historico-dia-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.historico-dia-data { font-weight: 700; font-size: 16px; white-space: nowrap; }
.historico-dia-balanco {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.historico-dia-balanco strong { font-family: var(--fonte-texto); font-weight: 700; }
.historico-dia-balanco.balanco-deficit { background: rgba(85, 134, 43, 0.11); color: var(--cor-deficit); }
.historico-dia-balanco.balanco-superavit { background: rgba(217, 130, 43, 0.13); color: var(--cor-superavit); }
.historico-dia-peso { font-size: 12px; font-weight: 600; opacity: 0.85; }

.historico-dia-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.historico-dia-metrica { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.historico-dia-rotulo {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.historico-dia-rotulo svg { width: 11px; height: 11px; color: var(--cor-agua); }
.historico-dia-valor {
  font-family: var(--fonte-numeros);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.historico-dia-valor small { font-size: 12px; font-weight: 600; color: var(--cor-texto-suave); }
.historico-dia-agua .historico-dia-valor { color: var(--cor-agua); }

.historico-dia-macros {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--cor-borda);
  font-size: 13px;
  color: var(--cor-texto-suave);
}
.macro-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.macro-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--cor-macro); }
.macro-chip strong { font-family: var(--fonte-texto); font-weight: 700; color: var(--cor-texto); }


@media (min-width: 600px) {
  .container { padding: 24px; }
}

/* ============================================================
   SKELETON DE NAVEGAÇÃO (assets/js/skeleton.js)
   Cobre só o miolo da tela: cabeçalho e barra de abas continuam à vista.
   ============================================================ */
.skeleton-tela {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 24;
  overflow: hidden;
  background: var(--cor-fundo);
  animation: sk-entrar 0.14s ease-out;
}
/* A tela que acabou de abrir já nasce com o esqueleto opaco, emendando no da anterior. */
.skeleton-tela.imediato { animation: none; }
.skeleton-tela.saindo { animation: sk-sair 0.22s ease-in forwards; }
/* Enquanto o esqueleto de entrada não existe, o conteúdo não aparece. */
html.skeleton-pendente main.container { visibility: hidden; }
.skeleton-conteudo { max-width: 560px; margin: 0 auto; padding: 20px; }

.sk {
  position: relative;
  overflow: hidden;
  background: var(--cor-sk);
  border-radius: 8px;
}
/* O brilho que atravessa os blocos. */
.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--cor-sk-brilho), transparent);
  animation: sk-brilho 1.3s ease-in-out infinite;
  animation-delay: var(--sk-fase, 0s);
}
.sk-card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda-card);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--sombra);
}
.sk-texto { height: 12px; margin-bottom: 10px; border-radius: 6px; }
.sk-numero { height: 22px; border-radius: 7px; }
/* Esqueleto do card de resumo: cada medida espelha a do card real
   (.resumo-card, .resumo-topo, .resumo-lado, .resumo-balanco, .grid-macros). */
.sk-card.sk-card-resumo { padding: 20px 18px 18px; margin-bottom: 20px; }
.sk-resumo { display: grid; grid-template-columns: 1fr 160px 1fr; align-items: start; column-gap: 6px; }
.sk-resumo-lado { display: flex; flex-direction: column; align-items: center; padding-top: 57px; }
.sk-resumo-lado .sk-numero { height: 24px; }
.sk-arco { position: relative; width: 160px; }
.sk-arco svg { display: block; width: 100%; height: auto; overflow: visible; }
.sk-arco path { fill: none; stroke: var(--cor-sk); stroke-width: 15; stroke-linecap: round; }
.sk-arco-centro {
  position: absolute;
  left: 0;
  right: 0;
  top: 63%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sk-numero-grande { width: 72px; height: 36px; border-radius: 9px; }
.sk-pilula { width: 280px; height: 32px; margin: 14px auto 18px; border-radius: 999px; }
.sk-macros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--cor-borda);
}
/* Coluna flex: as margens dos blocos somam em vez de se sobrepor. */
.sk-macros > div { display: flex; flex-direction: column; }
.sk-trilha.sk-trilha-macro { height: 5px; margin-top: 6px; }
.sk-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.sk-grade .sk-card { margin-bottom: 0; }
.sk-grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 12px; margin-top: 10px; }
/* Linha de água no rodapé do card de resumo. */
.sk-linha-agua {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--cor-borda);
}
.sk-linha-agua-info { flex: 1; min-width: 0; }
.sk-bolinha { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; }
.sk-bolinha-botao { width: 32px; height: 32px; }
.sk-trilha { height: 6px; border-radius: 3px; }
.sk-chips { display: flex; gap: 8px; margin: 4px 0 18px; }
.sk-chip { flex: 1; height: 36px; border-radius: 999px; }
.sk-botao { height: 50px; border-radius: 12px; margin-bottom: 18px; }
.sk-grafico { height: 150px; border-radius: 12px; }
.sk-campo { height: 44px; border-radius: 10px; margin-bottom: 14px; }
/* Lista agrupada do Ajustes: mesma medida das .linha-lista reais. */
.sk-grupo-lista { padding: 0 16px; margin-bottom: 26px; border-radius: 14px; }
.sk-linha-lista { display: flex; align-items: center; gap: 14px; min-height: 52px; }
.sk-linha-lista + .sk-linha-lista { border-top: 0.5px solid var(--cor-separador-lista); }
.sk-icone-lista { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; }

@keyframes sk-brilho { to { transform: translateX(100%); } }
@keyframes sk-entrar { from { opacity: 0; } }
@keyframes sk-sair { to { opacity: 0; } }

/* ============================================================
   POPUP (substitui alert/confirm) — visual do alerta nativo do iOS
   ============================================================ */
.popup-fundo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.4);
  animation: popup-fundo-entrar 0.2s ease-out;
}
.popup-fundo.saindo { animation: popup-fundo-sair 0.2s ease-in forwards; }
.popup {
  width: 270px;
  max-width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: var(--popup-fundo);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  text-align: center;
  animation: popup-entrar 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.popup-fundo.saindo .popup { animation: popup-fundo-sair 0.2s ease-in forwards; }
.popup-corpo { padding: 19px 16px 18px; }
.popup-titulo { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--cor-texto); }
.popup-mensagem { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--cor-texto); }
.popup-titulo:only-child, .popup-mensagem:only-child { margin-top: 0; }

.popup-botoes { display: flex; border-top: 0.5px solid var(--popup-linha); }
.popup-botoes.vertical { flex-direction: column; }
.popup-botao {
  flex: 1;
  min-height: 44px;
  padding: 10px 8px;
  border: none;
  background: transparent;
  color: var(--cor-tint);
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.popup-botoes:not(.vertical) .popup-botao + .popup-botao { border-left: 0.5px solid var(--popup-linha); }
.popup-botoes.vertical .popup-botao + .popup-botao { border-top: 0.5px solid var(--popup-linha); }
.popup-botao.principal { font-weight: 600; }
.popup-botao.destrutivo { color: var(--cor-destrutivo); }
.popup-botao:active { background: var(--popup-pressionado); }

@keyframes popup-entrar {
  from { opacity: 0; transform: scale(1.18); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes popup-fundo-entrar { from { opacity: 0; } }
@keyframes popup-fundo-sair { to { opacity: 0; } }

/* HUD de sucesso: o quadrado translúcido com ✓ do iOS, que some sozinho. */
.popup-hud {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 210;
  min-width: 150px;
  max-width: 220px;
  padding: 24px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  background: var(--popup-fundo);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  color: var(--cor-texto);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: hud-entrar 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.popup-hud.saindo { animation: hud-sair 0.25s ease-in forwards; }
.popup-hud-icone { width: 52px; height: 52px; color: var(--cor-tint); }
/* O ✓ se desenha sozinho. */
.popup-hud-icone path { stroke-dasharray: 21; stroke-dashoffset: 21; animation: hud-check 0.35s 0.12s ease-out forwards; }

@keyframes hud-entrar {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes hud-sair { to { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } }
@keyframes hud-check { to { stroke-dashoffset: 0; } }

/* ============================================================
   FAIXA "SEM CONEXÃO" (logo abaixo do cabeçalho)
   ============================================================ */
.faixa-conexao {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 6px 16px;
  background: #48484a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  animation: faixa-descer 0.25s ease-out;
}
.faixa-conexao.online { background: var(--cor-primaria); }
main.container { transition: padding-top 0.25s ease; }
body.sem-conexao main.container { padding-top: 52px; }
.faixa-conexao.saindo { animation: faixa-subir 0.25s ease-in forwards; }
@keyframes faixa-descer { from { transform: translateY(-100%); opacity: 0; } }
@keyframes faixa-subir { to { transform: translateY(-100%); opacity: 0; } }

/* ============================================================
   TOQUE NO ESTILO iOS
   No iPhone o :active só funciona porque o common.js registra um listener de
   toque (sem ele o Safari ignora o :active). Dois comportamentos, como no iOS:
   o que é "objeto" (pílula, opção, badge) afunda de leve; o que é texto
   (links, "Editar", "Desfazer") esmaece.
   ============================================================ */
.filtro-periodo,
.opcao-tema,
.opcao-objetivo,
.botao-secundario,
.calendario-nav,
.dia-calendario,
.streak-badge,
.peso-badge,
.botao-excluir-peso,
.botao-remover-linha,
.onboarding-proximo,
.swipe-acao-editar,
.swipe-acao-excluir,
.botao-editar-refeicoes,
.faixa-dia-passado button,
.agua-desfazer button,
.dica-flutuante-fechar,
.topo-textos-botao,
.linha-agua-meta,
.refeicao-titulo-clicavel {
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.2s ease;
}
.filtro-periodo:active,
.opcao-tema:active,
.opcao-objetivo:active,
.botao-secundario:active,
.calendario-nav:active,
.streak-badge:active,
.peso-badge:active,
.botao-excluir-peso:active,
.botao-remover-linha:active,
.onboarding-proximo:active { transform: scale(0.95); opacity: 0.8; }
.dia-calendario:not(:disabled):active { transform: scale(0.88); }
.swipe-acao-editar:active,
.swipe-acao-excluir:active { opacity: 0.7; }
.botao-editar-refeicoes:active,
.faixa-dia-passado button:active,
.agua-desfazer button:active,
.dica-flutuante-fechar:active,
.topo-textos-botao:active,
.linha-agua-meta:active,
.refeicao-titulo-clicavel:active { opacity: 0.5; }

/* Com mouse (computador), um realce leve ao passar por cima. */
@media (hover: hover) {
  .botao-primario:hover,
  .botao-grande:hover,
  .botao-microfone:hover { filter: brightness(1.06); }
  .botao-entrada-menor:hover,
  .filtro-periodo:hover,
  .opcao-tema:hover,
  .calendario-nav:hover { filter: brightness(0.97); }
  .nav-inferior a:not(.ativo):hover { background: var(--vidro-aba-pressionada); }
}

/* ============================================================
   AJUSTES — lista agrupada no estilo do app Ajustes do iOS
   (pages/configuracoes.php + assets/js/settings.js)
   ============================================================ */
.ajustes-pilha {
  --gutter-ajustes: 20px;
  --curva-ios: cubic-bezier(0.32, 0.72, 0, 1);
  position: relative;
  /* Ocupa a largura toda (sem o respiro do .container), pra tela que entra
     vir da borda do celular e não de 20px pra dentro. */
  margin: 0 calc(-1 * var(--gutter-ajustes));
  overflow-x: clip;
}
@media (min-width: 600px) { .ajustes-pilha { --gutter-ajustes: 24px; } }
.ajustes-tela {
  padding: 0 var(--gutter-ajustes);
  background: var(--cor-fundo);
}
.ajustes-tela[hidden] { display: none; }

/* Troca de tela: a de cima desliza, a de baixo recua um pouco. */
.ajustes-tela-saindo {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.transicao-avancar > .ajustes-tela:not(.ajustes-tela-saindo) {
  position: relative;
  z-index: 2;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
  animation: ajustes-entrar-direita 0.42s var(--curva-ios) both;
}
.transicao-avancar > .ajustes-tela-saindo { z-index: 1; animation: ajustes-recuar 0.42s var(--curva-ios) both; }
.transicao-voltar > .ajustes-tela:not(.ajustes-tela-saindo) {
  position: relative;
  z-index: 1;
  animation: ajustes-sair-do-recuo 0.42s var(--curva-ios) both;
}
.transicao-voltar > .ajustes-tela-saindo {
  z-index: 2;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
  animation: ajustes-sair-direita 0.42s var(--curva-ios) both;
}
@keyframes ajustes-entrar-direita { from { transform: translateX(100%); } }
@keyframes ajustes-sair-direita { to { transform: translateX(100%); } }
@keyframes ajustes-recuar { to { transform: translateX(-30%); opacity: 0.5; } }
@keyframes ajustes-sair-do-recuo { from { transform: translateX(-30%); opacity: 0.5; } }

/* Título do cabeçalho trocando junto com a tela. */
.topo-titulo-trocando { display: inline-block; animation: topo-titulo-trocar 0.3s ease both; }
@keyframes topo-titulo-trocar { from { opacity: 0; transform: translateX(10px); } }

/* ---- Grupo (o "cartão" arredondado com linhas) ---- */
.grupo-lista {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda-card);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 28px;
}
.grupo-titulo {
  margin: 0 16px 7px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}
.grupo-rodape {
  margin: -21px 16px 28px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cor-texto-suave);
}

/* ---- Linha ---- */
.linha-lista {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease;
}
button.linha-lista:active,
a.linha-lista:active { background: var(--cor-linha-pressionada); transition: none; }
a.linha-lista { text-decoration: none; }
.linha-lista-valor-alerta { color: var(--cor-destrutivo); }
/* Linha com título e uma descrição embaixo (nível de atividade). */
.linha-lista-dupla { padding-top: 10px; padding-bottom: 10px; }
.linha-lista-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-lista-textos .linha-lista-titulo { flex: none; }
.linha-lista-sub { font-size: 13px; line-height: 1.35; color: var(--cor-texto-suave); }
/* Controle segmentado pequeno, dentro de uma linha (Sexo). */
.segmentado-mini {
  display: flex;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 9px;
  background: var(--cor-linha-pressionada);
}
.segmentado-mini button {
  padding: 6px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.segmentado-mini button.ativo {
  background: var(--cor-fundo-card);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
[data-tema="escuro"] .segmentado-mini button.ativo { background: #636366; }
/* Linha fina entre linhas, começando no texto (depois do ícone), como no iOS. */
.linha-lista + .linha-lista::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 16px;
  border-top: 0.5px solid var(--cor-separador-lista);
}
.linha-lista + .linha-lista:has(> .linha-lista-icone)::before { left: 60px; }

.linha-lista-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--cor-icone, #8e8e93);
  color: #fff;
}
.linha-lista-icone svg { width: 19px; height: 19px; }
.linha-lista-titulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.linha-lista-valor {
  color: var(--cor-texto-suave);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.linha-lista-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: -6px;
  color: var(--cor-chevron);
}
.linha-lista-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--cor-tint);
  visibility: hidden;
}
.linha-lista.selecionada .linha-lista-check { visibility: visible; }
.linha-lista-destrutiva { justify-content: center; color: var(--cor-destrutivo); }
.linha-lista-destrutiva .linha-lista-titulo { flex: none; }
.linha-lista-acao .linha-lista-titulo { color: var(--cor-tint); }
.linha-lista-vazia { color: var(--cor-texto-suave); font-size: 15px; cursor: default; }

/* ---- Linha com campo (valor editável à direita) ---- */
.linha-campo { cursor: text; }
.linha-campo input {
  flex: 0 1 96px;
  width: 96px;
  min-width: 0;
  margin: 0;
  padding: 6px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 17px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.linha-campo input:focus { outline: none; color: var(--cor-tint); }
.linha-campo input[readonly] { color: var(--cor-texto-suave); }
.linha-campo input::-webkit-outer-spin-button,
.linha-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.linha-campo-unidade {
  min-width: 30px;
  margin-left: -10px;
  color: var(--cor-texto-suave);
}
.linha-nova-refeicao input { flex: 1; width: auto; text-align: left; }
.linha-nova-refeicao input::placeholder { color: var(--cor-texto-suave); opacity: 0.7; }
.botao-adicionar-linha {
  flex-shrink: 0;
  padding: 6px 0;
  border: none;
  background: none;
  color: var(--cor-tint);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.botao-adicionar-linha:active { opacity: 0.5; }
.botao-salvar-ajustes { margin-bottom: 28px; }

/* ---- Refeições: lista reordenável dentro do grupo ---- */
.grupo-refeicoes { overflow: visible; }
.grupo-refeicoes .linha-tipo-refeicao {
  gap: 2px;
  min-height: 52px;
  margin: 0;
  padding: 4px 8px 4px 4px;
}
.grupo-refeicoes .linha-tipo-refeicao:first-child { border-radius: 14px 14px 0 0; }
.grupo-refeicoes .linha-tipo-refeicao:last-child { border-radius: 0 0 14px 14px; }
.grupo-refeicoes .linha-tipo-refeicao:only-child { border-radius: 14px; }
.grupo-refeicoes .linha-tipo-refeicao + .linha-tipo-refeicao::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 40px;
  border-top: 0.5px solid var(--cor-separador-lista);
}
.grupo-refeicoes .linha-tipo-refeicao.arrastando { border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.grupo-refeicoes .linha-tipo-refeicao.arrastando::before,
.grupo-refeicoes .linha-tipo-refeicao.arrastando + .linha-tipo-refeicao::before { display: none; }
.grupo-refeicoes .tipo-refeicao-nome {
  padding: 10px 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 17px;
}
.grupo-refeicoes .tipo-refeicao-nome:focus { outline: none; }
.grupo-refeicoes .botao-remover-linha {
  width: 40px;
  height: 40px;
  background: transparent;
  color: var(--cor-destrutivo);
}
.grupo-refeicoes .botao-remover-linha svg { width: 20px; height: 20px; }

/* ---- "Entenda o cálculo" ---- */
.grupo-explicacao { padding: 0 16px; }
.explicacao-item { padding: 13px 0; }
.explicacao-item + .explicacao-item { border-top: 0.5px solid var(--cor-separador-lista); }
.explicacao-item strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--cor-texto); }
.explicacao-item p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--cor-texto-suave); }

/* ---- Nível de atividade (onboarding e folha de recálculo) ---- */
.nivel-barras {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding-bottom: 9px;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(85, 134, 43, 0.1);
  color: var(--cor-primaria);
}
/* Vence o ".opcao-objetivo span" (texto cinza) que também pegaria este span. */
.opcao-objetivo span.nivel-barras { color: var(--cor-primaria); }
.nivel-barras i { display: block; width: 4px; border-radius: 2px; background: currentColor; opacity: 0.25; }
.nivel-barras i:nth-child(1) { height: 6px; }
.nivel-barras i:nth-child(2) { height: 10px; }
.nivel-barras i:nth-child(3) { height: 14px; }
.nivel-barras i:nth-child(4) { height: 18px; }
.nivel-barras i.cheia { opacity: 1; }

/* ---- Folha "Recalcular gasto diário" ---- */
/* Folha alta: rola por dentro quando não cabe (celular pequeno ou teclado aberto). */
.folha-rolavel {
  max-height: calc(100dvh - env(safe-area-inset-top) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.folha-rolavel.transborda { touch-action: pan-y; }
.folha-rolavel .opcoes-objetivo { gap: 6px; margin-bottom: 12px; }
.folha-rolavel .opcao-objetivo { padding: 8px 12px; }
.campos-lado-a-lado {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.campos-lado-a-lado label { font-size: 13px; }
.resultado-gasto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  margin: 0 0 16px;
  padding: 12px;
  border-radius: 14px;
  background: var(--cor-fundo);
  text-align: center;
}
.resultado-gasto-conta,
.resultado-gasto-comparacao,
.resultado-gasto-vazio { font-size: 13px; color: var(--cor-texto-suave); }
.resultado-gasto-valor {
  font-family: var(--fonte-numeros);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}
.resultado-gasto-valor small { font-size: 15px; font-weight: 600; color: var(--cor-texto-suave); }
.botao-grande:disabled { opacity: 0.4; cursor: default; }

/* Quem pediu menos movimento no sistema não ganha brilho nem folha deslizando. */
@media (prefers-reduced-motion: reduce) {
  .ajustes-tela,
  .topo-titulo-trocando { animation: none !important; }
  .sk::after { animation: none; }
  .botoes-entrada-wrap.entrando > button { animation-duration: 0.01s; animation-delay: 0s; }
  .overlay:not(.escondido) > .folha-confirmacao,
  .popup,
  .popup-hud { animation-duration: 0.01s; }
}