/* ============================================================
   App — telas
   O conteúdo de Hoje, Rotina, Progresso e Conta, montado com as peças
   de sistema.css. Aqui só entra o que é próprio de uma tela.
   Ver docs/plano-design.md, secção 7.
   ============================================================ */

.secao { margin: 0 0 var(--e-7); }

.cartao {
  margin: 0 0 var(--e-7);
  padding: var(--e-5) var(--e-4);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
}
.cartao__selo {
  display: inline-block;
  margin-bottom: var(--e-2);
  font: var(--t-rodape);
  font-weight: 600;
  color: var(--texto-2);
}

/* ── Hoje: o cartão do dia ────────────────────────────────── */

.cartao--dia { display: grid; justify-items: center; gap: var(--e-2); }
.cartao--dia .anel { --tam: min(208px, 56vw); }
.cartao--dia .anel__meio .t-numero { font-size: clamp(2.4rem, 13vw, 3.25rem); }
.cartao--dia__comido { margin: 0; }
.cartao--dia__ritmo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--e-1) 0 0;
  padding: 6px 12px;
  border-radius: var(--raio-capsula);
  background: var(--preench-3);
  font: var(--t-rodape);
  letter-spacing: var(--k-rodape);
  color: var(--texto-2);
}
.cartao--dia__ritmo b { color: var(--texto); font-weight: 600; }
.cartao--dia__ritmo [data-icon] { display: grid; width: 15px; height: 15px; line-height: 0; }
.cartao--dia__ritmo svg { width: 100%; height: 100%; }

.macros { width: 100%; display: grid; gap: var(--e-3); margin-top: var(--e-4); }
.macro__topo {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: 5px;
  font: var(--t-subtitulo);
  letter-spacing: var(--k-subtitulo);
}
.macro__topo b { color: var(--texto); font-weight: 600; }

/* ── Hoje: a rotina de marcar ─────────────────────────────── */

.grupo__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 0 var(--e-4) var(--e-2);
}
.grupo__topo .grupo__cabecalho { padding: 0; }
.botao--sm { min-height: 32px; padding: 0 var(--e-3); font: var(--t-subtitulo); font-weight: 600; }

.linha--marcar { text-align: left; }
.marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--separador-forte);
  color: var(--sobre-destaque);
  transition: background-color var(--rapido) linear, border-color var(--rapido) linear;
}
.marca svg { width: 15px; height: 15px; }
.linha--marcar.is-feita .marca { background: var(--sucesso); border-color: var(--sucesso); }
.linha--marcar.is-feita .linha__texto > span:first-child { color: var(--texto-2); }
.linha--marcar.is-agora .marca { border-color: var(--destaque); }
.linha--marcar.is-agora .linha__texto > span:first-child { font-weight: 600; }
.linha__texto--botao { border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer; }

/* fichas que rolam de lado, como as do assistente */
.fichas--rolar {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--margem));
  padding: 2px var(--margem);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.fichas--rolar::-webkit-scrollbar { display: none; }

/* ── Hoje: a sequência ────────────────────────────────────── */

.cartao--sequencia__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); }
.cartao--sequencia p { margin: 0; }
.selo {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--raio-capsula);
  background: var(--destaque-suave);
  color: var(--destaque);
  font: var(--t-legenda2);
  font-weight: 600;
}
.semana {
  display: flex;
  gap: var(--e-2);
  margin: var(--e-4) 0 0;
  padding: 0;
  list-style: none;
}
/* A forma diz o estado, e não só a cor: cheio, anel (folga) e vazio. */
.semana__dia {
  flex: 1;
  height: 12px;
  border-radius: var(--raio-capsula);
  background: var(--preench-2);
}
.semana__dia--cheio { background: var(--destaque); }
.semana__dia--folga { background: none; box-shadow: inset 0 0 0 2px var(--destaque-suave); }
.semana__dia--hoje { background: none; box-shadow: inset 0 0 0 2px var(--destaque); }

/* ── Hoje: a leitura do dia ───────────────────────────────── */

.cartao--leitura p { margin: 0 0 var(--e-2); }
.cartao--leitura p:last-child { margin-bottom: 0; }

/* ── Rotina ───────────────────────────────────────────────── */

.rotina__soma {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-2);
  margin-bottom: var(--e-3);
}
/* O mesmo desenho do resumo do Progresso: rótulo pequeno à esquerda,
   número grande por baixo, e a cor do macro no número. */
.rotina__soma dt { font: var(--t-legenda1); color: var(--texto-2); }
.rotina__soma dd { margin: 1px 0 0; font: 700 1.0625rem var(--fonte); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rotina__soma div:nth-child(2) dd { color: var(--proteina); }
.rotina__soma div:nth-child(3) dd { color: var(--carbo); }
.rotina__soma div:nth-child(4) dd { color: var(--gordura); }

/* ── Progresso ────────────────────────────────────────────── */

.grafico { width: 100%; height: auto; display: block; }
.grafico__resumo { margin: 0 0 var(--e-3); }
.barras {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  margin-top: var(--e-4);
}
.barras__dia {
  flex: 1;
  min-width: 0;
  border-radius: 4px 4px 2px 2px;
  background: var(--preench-2);
  position: relative;
}
.barras__dia.is-com-registro { background: var(--destaque); }
.barras__dia.is-hoje { box-shadow: 0 0 0 2px var(--fundo-agrupado), 0 0 0 4px var(--destaque); }
/* a linha da meta atravessa o gráfico, na altura dela */
.barras__meta {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--separador-forte);
}
.barras__rot { display: flex; justify-content: space-between; margin-top: var(--e-2); }

/* ── Conta ────────────────────────────────────────────────── */

.conta__topo { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-5); }
.conta__avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--destaque-suave);
  color: var(--destaque);
}
.conta__avatar svg { width: 30px; height: 30px; }
/* O nome e a linha de metas colados, como no cartão de conta dos
   Ajustes do iOS: a margem de parágrafo abria um vão entre os dois. */
.conta__topo p { margin: 0; }
.conta__topo p + p { margin-top: 2px; }

/* ── cartões do assistente ────────────────────────────────── */

.custom-card {
  margin: 0 0 var(--e-7);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  overflow: hidden;
}
.custom-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-3) var(--e-2) var(--e-4);
  font: var(--t-rodape);
  color: var(--texto-2);
}
.custom-card__body { padding: 0 var(--e-4) var(--e-4); }
.botao-redondo--sm { position: relative; width: 32px; height: 32px; background: none; }
.botao-redondo--sm svg { width: 16px; height: 16px; }
/* 32 px no desenho, 44 para o dedo: a área cresce à volta, sem mexer no
   que se vê (docs/plano-design.md §9). */
.botao-redondo--sm::before { content: ""; position: absolute; inset: -6px; }

/* aviso de saúde e de alergia, dentro de uma tela */
.cartao--aviso { border-left: 3px solid var(--atencao); border-radius: var(--e-2) var(--raio-cartao) var(--raio-cartao) var(--e-2); }
.cartao--aviso p { margin: 0 0 var(--e-2); }
.cartao--aviso p:last-child { margin-bottom: 0; }

/* a bolha de cor dentro da ficha de destaque */
.ficha__bolha { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }

/* o convite de preencher os nutrientes de uma refeição, e as ações de um cartão */
.nutri__semperfil { margin: var(--e-2) 0 0; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Na lista de marcar, a descrição cabe numa linha: a rotina inteira
   tem de caber na tela sem rolar até a água. O texto todo está na
   Rotina e no editor. */
.linha--marcar .linha__sub {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Acima da meta, o anel ganha uma segunda volta, fina e por dentro, do
   tamanho do excesso: 150% não pode ter o mesmo desenho que 100%. Sem
   vermelho — passar da meta é um fato do dia (C2). */
.anel.is-acima::after {
  content: "";
  position: absolute;
  inset: calc(var(--esp) + 5px);
  border-radius: 50%;
  background: conic-gradient(color-mix(in srgb, var(--destaque) 55%, transparent) calc(min(var(--excesso, 0), 100) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
}

/* um aviso sem alarme na linha: o que o app notou, para a pessoa decidir */
.linha__nota {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 2px;
  font: var(--t-rodape);
  letter-spacing: var(--k-rodape);
  color: var(--texto-2);
}
.linha__nota [data-icon] { display: grid; flex: none; width: 14px; height: 14px; margin-top: 2px; line-height: 0; }
.linha__nota svg { width: 100%; height: 100%; }