@import url("tokens.css");

/* A hierarquia desta versão vem de espaço e tamanho, não de bordas e caixas.
   Só o bloco "Agora" tem cartão — ele é o único que precisa destacar do resto. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  transition: background-color var(--d-tema) var(--ease);
}

body {
  font-family: var(--fonte);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  min-height: 100dvh;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--d-tema) var(--ease), color var(--d-tema) var(--ease);
}

body { -webkit-user-select: none; user-select: none; }
input, textarea, [data-selectable] { -webkit-user-select: text; user-select: text; }

button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }

/* ─── página ─────────────────────────────────────────────────────────── */

#app {
  max-width: var(--largura);
  margin: 0 auto;
  padding: calc(var(--safe-t) + var(--s-5)) var(--gutter)
           calc(var(--abas-h) + var(--safe-b) + var(--s-7));
}

.pilha   { display: flex; flex-direction: column; gap: var(--s-6); }
.pilha-p { display: flex; flex-direction: column; gap: var(--s-3); }
.linha-h { display: flex; align-items: center; gap: var(--s-3); }
.entre   { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.cresce  { flex: 1; min-width: 0; }
.centro  { text-align: center; }

/* Grade de duas colunas, ligada por view.
   Em telefone é uma pilha; a partir do tablet, o que cabe lado a lado vai
   lado a lado. `.col-larga` ocupa a linha inteira — serve para o que não faz
   sentido espremer, como um gráfico ou o bloco em foco. */
.colunas { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: start; }
.colunas > .col-larga { grid-column: 1 / -1; }
/* Título e linha de contexto nunca dividem a linha com um bloco de conteúdo:
   o cabeçalho é da tela inteira, não da primeira coluna. */
.colunas > header, .colunas > .topo { grid-column: 1 / -1; }

/* ─── cabeçalho da página ────────────────────────────────────────────── */

.topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink-dim);
}

.titulo {
  font-size: var(--t-xl);
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.12;
}

.sub { color: var(--ink-dim); font-size: var(--t-sm); margin-top: var(--s-1); }

/* Rótulo de grupo. Discreto de propósito: ele organiza, não decora. */
.rotulo {
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* ─── grupo ──────────────────────────────────────────────────────────── */

/* Um grupo é só um espaço maior. Sem borda, sem fundo, sem linha. */
.grupo { display: flex; flex-direction: column; gap: var(--s-3); }

/* ─── o bloco em foco ────────────────────────────────────────────────── */

.foco {
  background: var(--cartao);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: var(--sombra);
  transition: background-color var(--d-tema) var(--ease);
}
.foco .chamada {
  font-size: var(--t-xl);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: var(--s-2) 0 var(--s-1);
}
.foco .apoio { font-size: var(--t-sm); color: var(--ink-dim); line-height: 1.5; }
.foco .acoes { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.foco.alerta .rotulo { color: var(--alerta); }

/* ─── botões ─────────────────────────────────────────────────────────── */

.b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: 0 var(--s-5);
  border-radius: var(--r-sm);
  background: transparent;
  border: 1.5px solid var(--linha);
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 620;
  transition: transform var(--d-rapido) var(--ease),
              background-color var(--d-rapido) var(--ease);
}
.b:active { transform: scale(0.975); }
.b:disabled { opacity: 0.4; pointer-events: none; }

.b-cheio  { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.b-limpo  { border-color: transparent; color: var(--ink-dim); }
.b-alerta { border-color: var(--alerta); color: var(--alerta); }
.b-largo  { display: flex; width: 100%; }
.b-alto   { min-height: 52px; font-size: 1rem; }
.b-baixo  { min-height: 38px; padding: 0 var(--s-3); font-size: var(--t-sm); }

/* ─── lista de itens ─────────────────────────────────────────────────── */

.item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 46px;
  padding: var(--s-3) 0;
  text-align: left;
  font-size: var(--t-md);
}
.item + .item { border-top: 1px solid var(--linha); }

.caixa {
  width: 22px; height: 22px;
  flex: none;
  border-radius: 7px;
  border: 1.8px solid var(--linha);
  position: relative;
  transition: background-color var(--d-rapido) var(--ease),
              border-color var(--d-rapido) var(--ease);
}
.caixa::after {
  content: "";
  position: absolute;
  left: 6.5px; top: 3px;
  width: 5px; height: 10px;
  border: solid var(--cartao);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg) scale(0.5);
  opacity: 0;
  transition: opacity var(--d-rapido) var(--ease), transform var(--d-rapido) var(--ease);
}
.item[aria-pressed="true"] .caixa { background: var(--acento); border-color: var(--acento); }
.item[aria-pressed="true"] .caixa::after { opacity: 1; transform: rotate(43deg) scale(1); }
.item[aria-pressed="true"] .nome { color: var(--ink-dim); }

.item .nome { flex: 1; }
.item .hora { font-family: var(--fonte-num); font-size: var(--t-xs); color: var(--ink-dim); }
.item .seta { color: var(--ink-dim); font-size: var(--t-sm); }
.item.passou .nome { color: var(--ink-dim); }

/* ─── números ────────────────────────────────────────────────────────── */

.numero {
  font-size: var(--t-xl);
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.numero small { font-size: var(--t-sm); color: var(--ink-dim); font-weight: 500; letter-spacing: 0; }
.numero-g { font-size: var(--t-2xl); letter-spacing: -0.04em; }
.numero-p { font-size: var(--t-lg); }

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--fonte-num); font-size: var(--t-xs); }
.fraco { color: var(--ink-dim); }
.t-sm { font-size: var(--t-sm); }
.t-xs { font-size: var(--t-xs); }

/* ─── barra de progresso ─────────────────────────────────────────────── */

.barra {
  height: 4px;
  background: var(--linha);
  border-radius: var(--r-full);
  overflow: hidden;
}
.barra > i {
  display: block;
  height: 100%;
  background: var(--acento);
  border-radius: var(--r-full);
  transform-origin: left;
  transition: transform 600ms var(--ease);
}
.barra.agua > i { background: var(--agua); }

/* ─── seletor de volume de água ──────────────────────────────────────── */

.volumes { display: flex; gap: var(--s-2); }
.volumes button {
  flex: 1;
  min-height: 46px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--linha);
  font-size: var(--t-sm);
  font-weight: 620;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: transform var(--d-rapido) var(--ease), background-color var(--d-rapido) var(--ease);
}
.volumes button:active { transform: scale(0.96); }
.volumes button.principal { background: var(--agua); border-color: var(--agua); color: var(--bg); }

/* ─── seletor segmentado ─────────────────────────────────────────────── */

.seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--linha);
}
.seg button {
  flex: 1;
  min-height: 34px;
  border-radius: 8px;
  font-size: var(--t-sm);
  font-weight: 620;
  color: var(--ink-dim);
  transition: background-color var(--d-rapido) var(--ease), color var(--d-rapido) var(--ease);
}
.seg button[aria-pressed="true"] { background: var(--cartao); color: var(--ink); }

/* ─── formulário ─────────────────────────────────────────────────────── */

.campo { display: flex; flex-direction: column; gap: var(--s-2); }
.campo > label { font-size: var(--t-xs); font-weight: 620; color: var(--ink-dim); }
.campo .dica { font-size: var(--t-xs); color: var(--ink-dim); line-height: 1.45; }

.entrada {
  min-height: 46px;
  padding: 0 var(--s-3);
  border: 1.5px solid var(--linha);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  width: 100%;
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
}
.entrada:focus { outline: none; border-color: var(--acento); }
textarea.entrada { padding: var(--s-3); min-height: 84px; resize: vertical; }
select.entrada { appearance: none; }

/* ─── pares chave/valor ──────────────────────────────────────────────── */

.par {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  font-size: var(--t-md);
}
.par + .par { border-top: 1px solid var(--linha); }
.par .k { color: var(--ink-dim); font-size: var(--t-sm); }
.par .v { font-weight: 620; font-variant-numeric: tabular-nums; }

/* ─── abas ───────────────────────────────────────────────────────────── */

.abas {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  padding: 0 4px var(--safe-b);
  background: var(--bg);
  border-top: 1px solid var(--linha);
  transition: background-color var(--d-tema) var(--ease);
}
.abas a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 0 7px;
  color: var(--ink-dim);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color var(--d-rapido) var(--ease);
}
.abas a[aria-current="page"] { color: var(--ink); }
.abas svg { width: 20px; height: 20px; }

/* ─── avisos e vazios ────────────────────────────────────────────────── */

.aviso { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-dim); }
.aviso.atencao { color: var(--alerta); }

.vazio {
  padding: var(--s-6) 0;
  text-align: center;
  color: var(--ink-dim);
  font-size: var(--t-sm);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-xs);
  font-weight: 620;
  color: var(--ink-dim);
}
.marca.ok { color: var(--acento); }
.marca.atencao { color: var(--alerta); }

/* ─── recolhível ─────────────────────────────────────────────────────── */

/* O rótulo de seção e o botão que abre uma seção são visualmente iguais em
   maiúsculas — sem a seta, ninguém descobre que dá para tocar. */
details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: var(--s-3) 0;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: '›';
  font-size: var(--t-md);
  line-height: 1;
  transform: rotate(90deg);
  transition: transform var(--d-rapido) var(--ease);
}
details[open] > summary::after { transform: rotate(-90deg); }

/* ─── toast ──────────────────────────────────────────────────────────── */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--abas-h) + var(--safe-b) + var(--s-4));
  z-index: 60;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  max-width: calc(100vw - 48px);
  padding: 11px var(--s-4);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: opacity var(--d-normal) var(--ease), transform var(--d-normal) var(--ease);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ─── cronômetro ─────────────────────────────────────────────────────── */

.cronometro {
  font-size: var(--t-2xl);
  font-weight: 650;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cronometro.pronto { color: var(--acento); }

/* ─── tela de fissura ────────────────────────────────────────────────── */

/* Sempre escura, independentemente da hora: ele chega aqui ansioso, e reduzir
   estímulo ajuda mais do que aumentar. */
.crise {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: oklch(13% 0.008 265);
  color: oklch(90% 0.005 265);
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-t) + var(--s-6)) var(--s-5) calc(var(--safe-b) + var(--s-5));
}
.crise .cronometro { font-size: min(26vw, 6.5rem); font-weight: 600; text-align: center; }
.crise .b { border-color: oklch(36% 0.01 265); color: oklch(90% 0.005 265); }
.crise .b-cheio { background: oklch(90% 0.005 265); color: oklch(13% 0.008 265); border-color: transparent; }
.crise .rotulo, .crise .fraco { color: oklch(58% 0.008 265); }

:root[data-modo="crise"] .abas,
:root[data-modo="crise"] #toast { display: none; }

.abas[hidden] { display: none; }
:root[data-tela="cheia"] #app { padding-bottom: calc(var(--safe-b) + var(--s-6)); }

/* ─── entrada de tela ────────────────────────────────────────────────── */

.view { animation: entra var(--d-normal) var(--ease) both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }

/* ─── busca ──────────────────────────────────────────────────────────── */

.busca { position: relative; display: flex; align-items: center; }
.busca svg { position: absolute; left: var(--s-3); color: var(--ink-dim); pointer-events: none; }
.busca .entrada { padding-left: calc(var(--s-3) * 2 + 18px); }
/* O X nativo do type=search é cinza-sistema e ignora o tema. */
.busca input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ─── chips ──────────────────────────────────────────────────────────── */

/* Grade e não flex: com flex, a última linha fica com um item esticado ou um
   buraco, e a lista de alimentos passa de trinta itens. */
.chips {
  display: grid;
  /* 9,25rem = 148px. Num iPhone de 375px sobram 327px úteis, então cabem duas
     colunas com folga. Acima disso a grade se vira sozinha. */
  grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr));
  gap: var(--s-2);
}
.chips.filtros { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
/* Texto dentro da grade ocupa a linha: senão a frase fica numa coluna de
   9,5rem, quebrando em seis linhas ao lado de um botão. */
.chips > p { grid-column: 1 / -1; margin: var(--s-1) 0 0; }

.chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 42px;
  padding: 0 var(--s-3);
  border: 1.5px solid var(--linha);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 560;
  text-align: left;
  transition: transform var(--d-rapido) var(--ease),
              border-color var(--d-rapido) var(--ease),
              background-color var(--d-rapido) var(--ease);
}
.chip:active { transform: scale(0.97); }
.chip-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-prot {
  flex: none;
  font-family: var(--fonte-num);
  font-size: var(--t-xs);
  color: var(--ink-dim);
}
/* Duas linhas: quando o detalhe é frase ("1 barra pequena") e não número
   ("31g"), lado a lado ele come o nome e sobra reticência em todo item. */
.chips.duplo { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.chips.duplo .chip {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-height: 54px;
  padding: var(--s-2) var(--s-3);
}
.chips.duplo .chip-nome { white-space: normal; line-height: 1.25; }

.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip[aria-pressed="true"] .chip-prot { color: var(--bg); opacity: 0.7; }
/* Já está no prato: continua tocável (soma quantidade), mas não se oferece. */
.chip.dentro { border-color: var(--acento); }
.chip.dentro .chip-prot { color: var(--acento); }

/* ─── itens escolhidos ───────────────────────────────────────────────── */

.escolhido {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
}
.escolhido + .escolhido { border-top: 1px solid var(--linha); }
.escolhido .nome { font-weight: 560; }
.escolhido .meta { font-size: var(--t-xs); color: var(--ink-dim); font-variant-numeric: tabular-nums; }

.passo {
  display: flex;
  align-items: center;
  flex: none;
  border: 1.5px solid var(--linha);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.passo button {
  width: 36px;
  min-height: 38px;
  font-size: 1.05rem;
  font-weight: 620;
  color: var(--ink);
}
.passo button:active { background: var(--linha); }
.passo .q {
  min-width: 30px;
  text-align: center;
  font-family: var(--fonte-num);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.remover {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  color: var(--ink-dim);
}
.remover:active { background: var(--linha); }

.resumo-nutri:empty { display: none; }
.totais { font-size: var(--t-sm); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.totais b { color: var(--ink); font-weight: 650; }

/* ─── registro (linha com detalhe embaixo) ───────────────────────────── */

.registro { padding: var(--s-3) 0; }
.registro + .registro { border-top: 1px solid var(--linha); }
.registro .nome { font-weight: 560; }
.registro .detalhe {
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--ink-dim);
  line-height: 1.45;
}
.registro .detalhe.mono { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.registro.editando { padding: var(--s-4) 0; display: flex; flex-direction: column; gap: var(--s-4); }

/* ─── grades de formulário ───────────────────────────────────────────── */

/* auto-fit com mínimo: em telefone estreito cada campo ocupa a linha; a
   partir de ~360px eles dividem. Nenhum breakpoint necessário. */
.grade-2 { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.grade-3 { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }

/* ═══ responsivo ═════════════════════════════════════════════════════════
 *
 * Até aqui o app tinha uma única media query, a de movimento reduzido: a
 * coluna de 32rem ficava centralizada no meio de um monitor com a barra de
 * abas esticada de ponta a ponta. Funcionava no iPhone, que é onde ele usa —
 * e era só isso que funcionava.
 *
 * Três faixas, e a decisão de cada uma:
 *   ≥ 600px  respiro maior. Ainda uma coluna: a leitura não melhora com linha
 *            mais longa, então a largura extra vira margem, não texto.
 *   ≥ 900px  a barra inferior vira trilho lateral. Num ponteiro, a distância
 *            até o rodapé é grande e a mão não está segurando nada — a lógica
 *            do polegar que justifica a barra embaixo não se aplica aqui.
 *   ≥ 1200px duas colunas de conteúdo de verdade.
 */

@media (min-width: 600px) {
  :root { --largura: 34rem; --gutter: var(--s-6); --abas-h: 60px; }

  /* A barra deixa de encostar nas bordas: numa tela larga, um elemento
     esticado de ponta a ponta para caber seis ícones parece defeito. */
  .abas {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(30rem, calc(100% - var(--s-6) * 2));
    bottom: calc(var(--safe-b) + var(--s-4));
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    box-shadow: var(--sombra);
    padding: 0 var(--s-2);
  }
  #app { padding-bottom: calc(var(--abas-h) + var(--safe-b) + var(--s-7)); }
  #toast { bottom: calc(var(--abas-h) + var(--safe-b) + var(--s-6)); }

  .foco { padding: var(--s-6); }
}

@media (min-width: 900px) {
  :root { --trilho: 13rem; --abas-h: 0px; --largura: 38rem; }

  body { padding-left: var(--trilho); }

  .abas {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    transform: none;
    width: var(--trilho);
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    padding: calc(var(--safe-t) + var(--s-6)) var(--s-3) var(--s-5);
    border: 0;
    border-right: 1px solid var(--linha);
    border-radius: 0;
    box-shadow: none;
  }
  .abas a {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--r-sm);
    font-size: var(--t-md);
    font-weight: 600;
  }
  .abas a[aria-current="page"] { background: var(--cartao); }
  .abas svg { width: 18px; height: 18px; }

  #app { padding-top: calc(var(--safe-t) + var(--s-6)); padding-bottom: var(--s-7); }
  #toast { left: calc(50% + var(--trilho) / 2); bottom: var(--s-6); }

  /* A tela de crise cobre o trilho: ela existe para não haver mais nada. */
  :root[data-modo="crise"] body { padding-left: 0; }

  /* Onboarding e login escondem o trilho — o mesmo motivo de esconder as abas. */
  :root[data-tela="cheia"] body { padding-left: 0; }
}

@media (min-width: 1200px) {
  :root { --largura: 62rem; }
  .colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
}

/* Telefone deitado: sobra largura e falta altura. Encolher o respiro vertical
   é o que devolve a tela — e o cronômetro precisa caber inteiro. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --s-6: 20px; --s-7: 28px; }
  #app { padding-top: calc(var(--safe-t) + var(--s-3)); }
  .titulo { font-size: var(--t-lg); }
}

/* Teclado aberto no iOS encolhe a viewport; sem isto a barra de abas sobe e
   fica boiando no meio da tela, por cima do campo que está sendo digitado. */
@supports (height: 100dvh) {
  .abas { padding-bottom: max(var(--safe-b), 0px); }
}