/*
 * A TELA VIVA — a tela de resultado do app, refeita em HTML e tocada ao
 * vivo.
 *
 * Ela é o herói da home. Vive fora da folha da página de propósito:
 * quem precisar dela numa segunda página usa ESTE arquivo, nunca uma
 * cópia — duas maneiras de fazer a mesma coisa é o jeito garantido de a
 * segunda envelhecer sem ninguém notar.
 *
 * Ela é SEMPRE escura, inclusive em página de papel. Não é descuido: a
 * tela do app é escura, e um aparelho claro sobre fundo claro deixa de
 * parecer um aparelho. É o mesmo motivo de um monitor desligado ser
 * preto numa foto de escritório branco.
 *
 * Prefixo `tv-` em tudo: ela pousa em cima da folha de outra página e
 * não pode colidir com nada que já esteja lá.
 */

.tv {
  --tv-fundo: #15140f;
  --tv-tinta: #f5f2ec;
  --tv-tinta2: #a29c92;
  --tv-verde: #35d07f;
  --tv-p: #ff6b81;
  --tv-c: #ffc857;
  --tv-g: #6aa6ff;
  --tv-linha: rgba(245, 242, 236, 0.1);

  position: relative;
  width: min(292px, 78vw);
  aspect-ratio: 9 / 17.2;
  border-radius: 34px;
  border: 1px solid rgba(245, 242, 236, 0.14);
  background: linear-gradient(180deg, #17160f, #0f0e0b);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.55),
    0 0 0 8px rgba(20, 19, 14, 0.05);
  padding: 19px 17px;
  overflow: hidden;
  color: var(--tv-tinta);
  font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* O halo verde por trás do número — o mesmo brilho que o app tem. */
.tv__brilho {
  position: absolute;
  inset: -30% -40% auto -40%;
  height: 70%;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(53, 208, 127, 0.22),
    transparent 62%
  );
  pointer-events: none;
}

.tv__tela {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tv__rotulo {
  margin: 0 0 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tv-tinta2);
}
.tv__rotulo--lista { margin-top: 9px; }

.tv__total {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  line-height: 1;
}
.tv__total b {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.045em;
  /* Dígito de largura fixa: sem isso o número TREME enquanto conta. */
  font-variant-numeric: tabular-nums;
}
.tv__total span {
  font-size: 18px;
  font-weight: 700;
  color: var(--tv-verde);
}
.tv__equiv {
  margin: 5px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tv-verde);
}

.tv__macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 12px;
}
.tv__macro {
  background: rgba(245, 242, 236, 0.045);
  border-radius: 11px;
  padding: 9px 8px 8px;
}
.tv__macro b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tv__macro span {
  display: block;
  font-size: 9px;
  color: var(--tv-tinta2);
  margin-bottom: 7px;
}
.tv__trilha {
  height: 3px;
  border-radius: 2px;
  background: rgba(245, 242, 236, 0.1);
  overflow: hidden;
}
.tv__barra { height: 100%; width: 100%; border-radius: 2px; }
.tv__macro--p b { color: var(--tv-p); }
.tv__macro--p .tv__barra { background: var(--tv-p); }
.tv__macro--c b { color: var(--tv-c); }
.tv__macro--c .tv__barra { background: var(--tv-c); }
.tv__macro--g b { color: var(--tv-g); }
.tv__macro--g .tv__barra { background: var(--tv-g); }

.tv__caixa {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.tv__itens {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
  flex: 1;
  min-height: 0;
}
.tv__itens li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--tv-linha);
}
.tv__itens li:last-child { border-bottom: none; }
.tv__itens em { font-style: normal; font-size: 13px; font-weight: 600; }
.tv__itens small {
  display: block;
  font-size: 10px;
  color: var(--tv-tinta2);
  font-weight: 400;
  margin-top: 1px;
}
.tv__itens strong {
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/*
 * O REPOUSO É O VISÍVEL.
 *
 * Nada aqui nasce escondido. Quem esconde é a classe `.tv--anima`, que
 * o próprio telaviva.js põe — e só quando vai de fato animar. Se o
 * script não carregar, ou se a pessoa pediu menos movimento, a tela
 * aparece PRONTA, com o total, os macros e os quatro alimentos.
 *
 * O contrário disso é um jeito de a página sumir quando o script falha:
 * a mesma família do import que existe e nunca é chamado.
 */
.tv--anima .tv__itens li { opacity: 0; }
.tv--anima .tv__barra { width: 0; }
.tv--anima .tv__equiv { opacity: 0; }

/* O bloco que a legenda acende, quando a página usa esse recurso. */
.tv__bloco { transition: opacity 0.42s ease; }

@media (prefers-reduced-motion: reduce) {
  .tv__bloco { transition: none; }
}

/*
 * NO CELULAR A TELA ENCOLHE JUNTO COM O APARELHO.
 *
 * As medidas de dentro são em px fixo, então num aparelho estreito o
 * conteúdo não cabia: o QUARTO alimento ficava cortado pela borda de
 * baixo. E o quarto alimento não é detalhe — a lista completa é o
 * argumento inteiro ("concha e colher, nunca grama").
 *
 * Medido a 412×740: o aparelho fecha em 385px de altura e o conteúdo
 * pedia ~430px. Estes cortes devolvem os ~45px que faltavam, sem tocar
 * na hierarquia: o número continua sendo a maior coisa da tela.
 */
@media (max-width: 859px) {
  .tv__total b { font-size: 44px; }
  .tv__total span { font-size: 15px; }
  .tv__equiv { font-size: 11.5px; margin-top: 4px; }
  .tv__macros { margin-top: 9px; gap: 6px; }
  .tv__macro { padding: 7px 6px 6px; }
  .tv__macro b { font-size: 14.5px; }
  .tv__rotulo--lista { margin-top: 6px; }
  .tv__itens li { padding: 4px 0; }
  .tv__itens em { font-size: 12.5px; }
  .tv__itens strong { font-size: 13px; }
}