/* ============================================================
   A cozinha.

   Cada cozinha é um LUGAR. A tela recebe --k-cor, --k-cor-2,
   --k-tinta e --k-fundo da cozinha escolhida, e tudo aqui deriva
   dessas quatro variáveis. Sair da low carb e entrar na carnívora
   tem que dar a sensação de ter trocado de ambiente — não de aba.

   Modo claro em toda a cozinha: é onde a pessoa está de pé, com o
   celular apoiado na bancada, com a luz da casa acesa.
   ============================================================ */

.tela[data-cozinha],
.tela.cozinha-neutra,
.tela.cozinha-hub {
  --k-cor: #2E7D4F;
  --k-cor-2: #79C08A;
  --k-tinta: #101820;
  --k-fundo: #F4F7F9;

  background: var(--k-fundo);
  color: var(--k-tinta);
  border-radius: var(--r-g);
  padding: 22px 18px 34px;
  margin: 0 auto;
  max-width: 460px;

  /*
   * O claro precisa ir até o fim da tela.
   *
   * Com o conteúdo curto — a semana em branco é o caso — o cartão claro
   * terminava no meio e o fundo escuro do app aparecia embaixo, com uma
   * costura reta atravessando a tela. Parecia defeito de renderização, e
   * era só altura faltando. `min-height` cobre a área útil descontando a
   * barra de topo e a de navegação.
   */
  /* A barra de navegação é fixa e translúcida: o claro passa POR BAIXO
     dela, então só a barra de topo é descontada. O respiro no fim garante
     que o último botão não fique escondido atrás dela. */
  min-height: calc(100dvh - var(--altura-barra-topo, 56px));
  padding-bottom: calc(34px + var(--altura-navegacao, 72px));
}

.tela[data-cozinha] h1, .tela[data-cozinha] h2, .tela[data-cozinha] h3,
.tela.cozinha-neutra h1, .tela.cozinha-neutra h2, .tela.cozinha-neutra h3,
.tela.cozinha-hub h1 { color: var(--k-tinta) }

/*
 * BRANCO NO BRANCO — o bug que deixou a tela de Bebidas ilegível.
 *
 * O componente `.escolha` nasceu para as telas do app, que têm fundo
 * escuro, e por isso pinta o título com `--texto` (#EEF6FB, quase branco).
 * A cozinha é o contrário: fundo claro e tinta escura em `--k-tinta`. Usar
 * `.escolha` aqui dava texto quase branco sobre fundo quase branco — os
 * nomes "Chás", "Sucos", "Shots" e "Smoothies" simplesmente sumiam, e só
 * sobravam os números e as linhas de trava, que já usavam a tinta certa.
 *
 * Valia também para a tela de escolher cozinha, onde "Como quebrar o
 * jejum" estava invisível havia tempo — ninguém reparou porque quase
 * ninguém passa por lá.
 */
.tela.cozinha-neutra .escolha .titulo,
.tela.cozinha-hub .escolha .titulo,
.tela[data-cozinha] .escolha .titulo { color: var(--k-tinta) }

.tela.cozinha-neutra .escolha .desc,
.tela.cozinha-hub .escolha .desc,
.tela[data-cozinha] .escolha .desc {
  color: color-mix(in srgb, var(--k-tinta) 62%, transparent);
}

.tela.cozinha-neutra .escolha,
.tela.cozinha-hub .escolha,
.tela[data-cozinha] .escolha {
  background: #fff;
  border-color: color-mix(in srgb, var(--k-tinta) 12%, transparent);
}

.tela[data-cozinha] p,
.tela.cozinha-neutra p,
.tela.cozinha-hub p { color: color-mix(in srgb, var(--k-tinta) 82%, transparent) }

.tela[data-cozinha] .olho,
.tela.cozinha-neutra .olho,
.tela.cozinha-hub .olho { color: color-mix(in srgb, var(--k-tinta) 66%, transparent) }

.k-intro { font-size: 14.5px; line-height: 1.6; color: color-mix(in srgb, var(--k-tinta) 82%, transparent) }
.k-titulo { font-size: 22px; line-height: 1.25; letter-spacing: -.02em }
.k-nota { font-size: 12.5px; color: color-mix(in srgb, var(--k-tinta) 66%, transparent); line-height: 1.5 }
.k-rotulo {
  align-self: flex-start;
  font-family: var(--fonte-m); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--k-cor);
  padding: 5px 11px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--k-cor) 12%, transparent);
}

/* ---------- escolher a cozinha ---------- */
.cartao-cozinha {
  display: flex; align-items: center; gap: 15px; width: 100%;
  padding: 18px; margin-bottom: 10px;
  border-radius: var(--r-m); cursor: pointer;
  font-family: var(--fonte-c); text-align: left;
  background: var(--k-fundo);
  border: 1px solid color-mix(in srgb, var(--k-cor) 26%, transparent);
  color: var(--k-tinta);
  transition: transform .12s ease;
}
.cartao-cozinha:active { transform: scale(.99) }
.cartao-cozinha:focus-visible { outline: 2px solid var(--k-cor); outline-offset: 3px }
.cartao-cozinha.destaque {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--k-cor) 55%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--k-cor) 14%, transparent);
}
.k-simbolo {
  width: 50px; height: 50px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 25px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--k-cor) 14%, transparent);
}
.k-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 }
.k-nome { font-family: var(--fonte-d); font-weight: 600; font-size: 17px; letter-spacing: -.015em }
.k-lema { font-size: 13px; color: color-mix(in srgb, var(--k-tinta) 70%, transparent); line-height: 1.4 }
.k-selo {
  font-family: var(--fonte-m); font-size: 11px; font-weight: 500;
  padding: 5px 10px; border-radius: var(--r-full); flex-shrink: 0;
  background: var(--k-cor); color: #fff;
}

/* ---------- a capa da cozinha ---------- */
.k-capa { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 8px 0 6px }
.k-capa-simbolo {
  width: 68px; height: 68px; display: grid; place-items: center;
  font-size: 33px; border-radius: 50%;
  background: color-mix(in srgb, var(--k-cor) 13%, transparent);
}
.k-capa h1 { font-size: 27px; letter-spacing: -.028em }
.k-capa-lema { font-size: 14.5px; max-width: 30ch; line-height: 1.5 }

/* ---------- o estado da semana ---------- */
.k-semana {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px; border-radius: var(--r-m); margin-top: 14px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--k-cor) 13%, transparent),
    color-mix(in srgb, var(--k-cor) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--k-cor) 24%, transparent);
}
.k-semana h2 { font-size: 20px; letter-spacing: -.02em }
.k-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px }
.k-numero { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.k-numero .v {
  font-family: var(--fonte-d); font-weight: 600; font-size: 17px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--k-cor);
}
.k-numero .r { font-size: 10.5px; line-height: 1.3; color: color-mix(in srgb, var(--k-tinta) 66%, transparent) }
@media (max-width: 380px) { .k-numeros { grid-template-columns: repeat(2, 1fr); gap: 12px } }

/* ---------- botões da cozinha ---------- */
.k-botao {
  display: block; width: 100%; text-align: center;
  border: 0; border-radius: var(--r-full);
  font-family: var(--fonte-c); font-size: 15.5px; font-weight: 700;
  padding: 16px; cursor: pointer; margin-top: 10px;
  background: var(--k-cor); color: #fff;
  transition: transform .12s ease;
}
.k-botao:active { transform: scale(.985) }
.k-botao:focus-visible { outline: 2px solid var(--k-cor); outline-offset: 3px }
.k-botao.vazado {
  background: transparent; color: var(--k-cor);
  border: 1px solid color-mix(in srgb, var(--k-cor) 38%, transparent);
}
.k-botao.perigo {
  color: color-mix(in srgb, var(--k-tinta) 66%, transparent);
  border-color: color-mix(in srgb, var(--k-tinta) 18%, transparent);
}
.k-acoes { display: flex; gap: 9px; margin-top: 10px }
.k-acoes .k-botao { margin-top: 0 }

/* ---------- as ferramentas ---------- */
.k-ferramentas { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px }
.k-ferramenta {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  padding: 16px 14px; border-radius: var(--r-m); cursor: pointer;
  background: #fff; border: 1px solid color-mix(in srgb, var(--k-tinta) 10%, transparent);
  font-family: var(--fonte-c); text-align: left; color: var(--k-tinta);
}
.k-ferramenta:focus-visible { outline: 2px solid var(--k-cor); outline-offset: 2px }
.k-f-icone {
  width: 38px; height: 38px; display: grid; place-items: center; font-size: 18px;
  border-radius: var(--r-p); background: color-mix(in srgb, var(--k-cor) 11%, transparent);
}
.k-f-nome { display: block; font-family: var(--fonte-d); font-weight: 600; font-size: 14.5px }
.k-f-detalhe { display: block; font-size: 12px; color: color-mix(in srgb, var(--k-tinta) 66%, transparent); margin-top: 2px }

/* ---------- cartões ---------- */
.k-cartao {
  display: flex; flex-direction: column; gap: 10px;
  padding: 19px; border-radius: var(--r-m); margin-top: 12px;
  background: #fff; border: 1px solid color-mix(in srgb, var(--k-tinta) 10%, transparent);
}
.k-cartao.alerta {
  background: color-mix(in srgb, var(--limite) 9%, #fff);
  border-color: color-mix(in srgb, var(--limite) 34%, transparent);
}
/* O rótulo do cartão de alerta era laranja claro sobre fundo pêssego
   claro — 1,95:1, no limite do ilegível. Escurecer o texto mantém a cor
   de alerta e devolve a leitura. */
.k-cartao.alerta .k-rotulo {
  color: color-mix(in srgb, var(--limite) 48%, #3a1608);
  background: color-mix(in srgb, var(--limite) 18%, transparent);
}

/* ---------- planner ---------- */
.planner-semana { display: flex; flex-direction: column; gap: 14px; margin-top: 14px }
.planner-dia { display: flex; flex-direction: column; gap: 6px }
.planner-dia-nome {
  font-family: var(--fonte-m); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: color-mix(in srgb, var(--k-tinta) 66%, transparent);
  padding-left: 2px;
}
.planner-slot {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; border-radius: var(--r-p); cursor: pointer;
  background: #fff; border: 1px dashed color-mix(in srgb, var(--k-tinta) 20%, transparent);
  font-family: var(--fonte-c); text-align: left; color: var(--k-tinta);
}
.planner-slot.cheio {
  border-style: solid;
  border-color: color-mix(in srgb, var(--k-cor) 28%, transparent);
  background: color-mix(in srgb, var(--k-cor) 5%, #fff);
}
.planner-slot:focus-visible { outline: 2px solid var(--k-cor); outline-offset: 2px }
.slot-icone { font-size: 17px; flex-shrink: 0 }
.slot-texto { display: flex; flex-direction: column; min-width: 0; flex: 1 }
.slot-refeicao {
  font-family: var(--fonte-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: color-mix(in srgb, var(--k-tinta) 66%, transparent);
}
.slot-receita {
  font-size: 14px; font-weight: 500; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.planner-slot:not(.cheio) .slot-receita { color: color-mix(in srgb, var(--k-tinta) 66%, transparent); font-weight: 400 }
.slot-tempo {
  font-family: var(--fonte-m); font-size: 10px; flex-shrink: 0;
  color: color-mix(in srgb, var(--k-tinta) 66%, transparent);
}

/* ---------- monte para mim ---------- */
.k-estrategias { display: flex; flex-direction: column; gap: 8px; margin-top: 12px }
.k-estrategia {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 15px 16px; border-radius: var(--r-m);
  background: #fff; border: 1px solid color-mix(in srgb, var(--k-tinta) 10%, transparent);
  font-family: var(--fonte-c); color: var(--k-tinta);
}
.k-estrategia:focus-visible { outline: 2px solid var(--k-cor); outline-offset: 2px }
.k-e-nome { display: block; font-family: var(--fonte-d); font-weight: 600; font-size: 15px }
.k-e-desc { display: block; font-size: 13px; color: color-mix(in srgb, var(--k-tinta) 66%, transparent); margin-top: 2px }

.k-previa {
  display: flex; flex-direction: column; gap: 12px; margin-top: 16px;
  padding: 20px; border-radius: var(--r-m);
  background: linear-gradient(160deg, color-mix(in srgb, var(--k-cor) 12%, #fff), #fff);
  border: 1px solid color-mix(in srgb, var(--k-cor) 30%, transparent);
}
.k-amostra { display: flex; flex-direction: column; gap: 7px }
.k-amostra-dia { display: grid; grid-template-columns: 38px 1fr; gap: 10px; font-size: 13px }
.k-amostra-dia .d {
  font-family: var(--fonte-m); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--k-tinta) 66%, transparent); padding-top: 2px;
}
.k-amostra-dia .n { color: color-mix(in srgb, var(--k-tinta) 72%, transparent); line-height: 1.45 }
.k-aviso {
  font-size: 12.5px; line-height: 1.5; padding: 11px 13px; border-radius: var(--r-p);
  background: color-mix(in srgb, var(--limite) 12%, transparent); color: var(--limite);
}

/* ---------- escolher receita ---------- */
.k-busca {
  width: 100%; font-family: var(--fonte-c); font-size: 16px;
  padding: 14px 16px; border-radius: var(--r-full); margin-top: 12px;
  background: #fff; color: var(--k-tinta);
  border: 1px solid color-mix(in srgb, var(--k-tinta) 14%, transparent);
}
.k-busca:focus { outline: 2px solid var(--k-cor); outline-offset: 1px }
.k-opcoes { display: flex; flex-direction: column; gap: 7px; margin-top: 12px }
.k-opcao {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: var(--r-p);
  background: #fff; border: 1px solid color-mix(in srgb, var(--k-tinta) 10%, transparent);
  font-family: var(--fonte-c); color: var(--k-tinta);
}
.k-opcao.escolhida { border-color: var(--k-cor); background: color-mix(in srgb, var(--k-cor) 8%, #fff) }
.k-opcao:focus-visible { outline: 2px solid var(--k-cor); outline-offset: 2px }
.k-opcao-nome { display: block; font-weight: 600; font-size: 14.5px }
.k-opcao-macro {
  display: block; font-family: var(--fonte-m); font-size: 10.5px;
  color: color-mix(in srgb, var(--k-tinta) 66%, transparent); margin-top: 3px;
}

/* ---------- lista de compras ---------- */
.k-lista-topo { display: flex; align-items: baseline; gap: 9px; margin-top: 8px }
.k-lista-conta {
  font-family: var(--fonte-d); font-weight: 600; font-size: 30px;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--k-cor);
}
.k-lista-rot { font-size: 13px; color: color-mix(in srgb, var(--k-tinta) 66%, transparent) }

.k-grupo {
  margin-top: 16px; padding: 4px 0 8px;
  border-top: 1px solid color-mix(in srgb, var(--k-tinta) 10%, transparent);
}
.k-grupo-cab { display: flex; align-items: center; gap: 9px; padding: 12px 2px 6px }
.k-grupo-icone { font-size: 15px }
.k-grupo-nome {
  font-family: var(--fonte-m); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: color-mix(in srgb, var(--k-tinta) 66%, transparent);
}
.k-item {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  padding: 12px 2px; font-size: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--k-tinta) 7%, transparent);
}
.k-item input { width: 21px; height: 21px; flex-shrink: 0; accent-color: var(--k-cor) }
.k-item.pego { opacity: .42 }
.k-item.pego .k-item-nome { text-decoration: line-through }
.k-item-texto { display: flex; flex-direction: column; min-width: 0 }
.k-item-nome { line-height: 1.35 }
.k-item-de {
  font-family: var(--fonte-m); font-size: 10.5px;
  color: color-mix(in srgb, var(--k-tinta) 66%, transparent); margin-top: 2px;
}
.k-grupo.tenho { opacity: .8 }
.k-item-tenho { font-size: 14px; padding: 9px 2px; color: color-mix(in srgb, var(--k-tinta) 62%, transparent) }

/* ---------- geladeira ---------- */
.k-linha-dupla { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px }
.k-estoque {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--k-tinta) 7%, transparent);
}
.k-estoque-nome { flex: 1; font-size: 15px; min-width: 0 }
.k-estoque-qtd { display: flex; align-items: center; gap: 4px; flex-shrink: 0 }
.k-passo {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--k-cor) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--k-cor) 24%, transparent);
  color: var(--k-cor); font-size: 18px; line-height: 1;
}
.k-passo:focus-visible { outline: 2px solid var(--k-cor); outline-offset: 2px }
.k-estoque-valor {
  min-width: 58px; text-align: center;
  font-family: var(--fonte-m); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.k-tirar {
  width: 40px; height: 40px; flex-shrink: 0; cursor: pointer;
  background: transparent; border: 0; font-size: 20px; line-height: 1;
  color: color-mix(in srgb, var(--k-tinta) 66%, transparent);
}

/* ---------- condução ---------- */
.k-timeline { display: flex; flex-direction: column; gap: 0; margin-top: 6px }
.k-fase {
  position: relative; padding: 0 0 20px 22px;
  border-left: 2px solid color-mix(in srgb, var(--k-cor) 24%, transparent);
}
.k-fase:last-child { border-left-color: transparent; padding-bottom: 4px }
.k-fase::before {
  content: ""; position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--k-cor); box-shadow: 0 0 0 4px var(--k-fundo);
}
.k-fase-quando {
  font-family: var(--fonte-m); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--k-cor);
}
.k-fase-sentir { font-size: 15px; font-weight: 500; margin-top: 5px; color: var(--k-tinta) }
.k-fase-fazer { font-size: 13.5px; margin-top: 4px; color: color-mix(in srgb, var(--k-tinta) 62%, transparent) }

.k-regras { display: flex; flex-direction: column; gap: 0; padding: 0; list-style: none }
.k-regras li {
  position: relative; padding: 12px 0 12px 24px; font-size: 14.5px;
  color: color-mix(in srgb, var(--k-tinta) 76%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--k-tinta) 8%, transparent);
  line-height: 1.5;
}
.k-regras li:last-child { border-bottom: 0 }
.k-regras li::before {
  content: ""; position: absolute; left: 4px; top: 20px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--k-cor);
}

/* ---------- receitas dentro da cozinha ---------- */
.tela[data-cozinha] .receita,
.tela.cozinha-neutra .receita {
  background: #fff;
  border-color: color-mix(in srgb, var(--k-tinta) 10%, transparent);
}
.tela[data-cozinha] .receita-corpo,
.tela.cozinha-neutra .receita-corpo { border-top-color: color-mix(in srgb, var(--k-tinta) 9%, transparent) }
.tela[data-cozinha] .receita-nome,
.tela.cozinha-neutra .receita-nome { color: var(--k-tinta) }
.tela[data-cozinha] .receita-macro,
.tela[data-cozinha] .receita-tempo,
.tela.cozinha-neutra .receita-macro,
.tela.cozinha-neutra .receita-tempo { color: color-mix(in srgb, var(--k-tinta) 66%, transparent) }
.tela[data-cozinha] .ingredientes li,
.tela[data-cozinha] .modo li,
.tela[data-cozinha] .preparo,
.tela.cozinha-neutra .ingredientes li,
.tela.cozinha-neutra .modo li,
.tela.cozinha-neutra .preparo { color: color-mix(in srgb, var(--k-tinta) 74%, transparent) }
.tela[data-cozinha] .grupo-titulo,
.tela.cozinha-neutra .grupo-titulo { color: var(--k-tinta) }
.tela[data-cozinha] .chip,
.tela.cozinha-neutra .chip {
  background: #fff; color: color-mix(in srgb, var(--k-tinta) 66%, transparent);
  border-color: color-mix(in srgb, var(--k-tinta) 14%, transparent);
}
.tela[data-cozinha] .chip[aria-pressed="true"],
.tela.cozinha-neutra .chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--k-cor) 14%, transparent);
  color: var(--k-cor); border-color: color-mix(in srgb, var(--k-cor) 42%, transparent);
}
.tela[data-cozinha] .vazio h3, .tela.cozinha-neutra .vazio h3 { color: var(--k-tinta) }
.tela[data-cozinha] .vazio p, .tela.cozinha-neutra .vazio p { color: color-mix(in srgb, var(--k-tinta) 66%, transparent) }
.tela[data-cozinha] .campo label { color: color-mix(in srgb, var(--k-tinta) 66%, transparent); font-size: 12.5px }
.tela[data-cozinha] .campo input,
.tela[data-cozinha] .campo select {
  background: #fff; color: var(--k-tinta);
  border-color: color-mix(in srgb, var(--k-tinta) 14%, transparent);
}
.tela[data-cozinha] .linha-restricao { border-bottom-color: color-mix(in srgb, var(--k-tinta) 9%, transparent) }
.tela[data-cozinha] .linha-restricao .rotulo,
.tela.cozinha-neutra .linha-restricao .rotulo { color: var(--k-cor) }

/* A barra de topo acompanha a cozinha em que a pessoa está: sem isso ela
   fica escura por cima de uma tela clara, e a troca de ambiente se perde. */
.barra-topo:has(+ .tela[data-cozinha]),
.barra-topo:has(+ .tela.cozinha-neutra),
.barra-topo:has(+ .tela.cozinha-hub) {
  background: rgba(244,247,249,.94);
  border-bottom-color: rgba(16,24,32,.1);
}
.barra-topo:has(+ .tela[data-cozinha]) .voltar,
.barra-topo:has(+ .tela[data-cozinha]) .barra-titulo,
.barra-topo:has(+ .tela.cozinha-neutra) .voltar,
.barra-topo:has(+ .tela.cozinha-neutra) .barra-titulo,
.barra-topo:has(+ .tela.cozinha-hub) .voltar,
.barra-topo:has(+ .tela.cozinha-hub) .barra-titulo { color: #101820 }
.barra-topo:has(+ .tela[data-cozinha]) .barra-sobre,
.barra-topo:has(+ .tela.cozinha-neutra) .barra-sobre { color: rgba(16,24,32,.60) }

/* ---------- a receita do dia ----------
   Quem já escolheu não quer escolher de novo: quer saber o que fazer
   agora. Tipografia grande e passos numerados, para ler de longe com a
   mão suja. */
.r-capa { display: flex; flex-direction: column; gap: 9px; padding: 6px 0 4px }
.r-icone { font-size: 34px; line-height: 1 }
.r-nome { font-family: var(--fonte-d); font-weight: 600; font-size: 25px; letter-spacing: -.028em; line-height: 1.18 }
.r-meta { display: flex; gap: 7px; flex-wrap: wrap }
.r-chip {
  font-family: var(--fonte-m); font-size: 11px; padding: 5px 11px;
  border-radius: var(--r-full); background: color-mix(in srgb, var(--k-cor) 12%, transparent);
  color: var(--k-cor);
}
.r-macro { font-family: var(--fonte-m); font-size: 11.5px; color: color-mix(in srgb, var(--k-tinta) 66%, transparent) }

.r-ingredientes { list-style: none; display: flex; flex-direction: column; gap: 0; padding: 0 }
.r-ingredientes li {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
  padding: 11px 0; font-size: 15px; line-height: 1.45;
  color: color-mix(in srgb, var(--k-tinta) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--k-tinta) 7%, transparent);
}
.r-ingredientes li:last-child { border-bottom: 0 }
.r-marca { color: color-mix(in srgb, var(--k-tinta) 66%, transparent); font-size: 13px; padding-top: 2px }
.r-ingredientes li.tem .r-marca { color: var(--k-cor); font-weight: 700 }
.r-ingredientes li.tem { color: color-mix(in srgb, var(--k-tinta) 66%, transparent) }

.r-preparo { display: flex; flex-direction: column; gap: 12px; margin-top: 18px }
.r-passos { list-style: none; display: flex; flex-direction: column; gap: 2px; padding: 0; counter-reset: p }
.r-passos li {
  display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--k-tinta) 7%, transparent);
}
.r-passos li:last-child { border-bottom: 0 }
.r-numero {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--fonte-d); font-weight: 600; font-size: 13px;
  background: color-mix(in srgb, var(--k-cor) 13%, transparent); color: var(--k-cor);
}
.r-passos p { font-size: 16px; line-height: 1.55; color: color-mix(in srgb, var(--k-tinta) 84%, transparent) }

/* ---------- a ficha completa da receita ----------
   A chamada antes dos ingredientes, o tempero em lista própria, e os
   blocos de cozinheiro (segredo, trocas, o que combina, quanto dura).
   É o que separa uma ficha de receita de uma lista de compras. */
.r-chamada {
  font-size: 16.5px; line-height: 1.6; margin: 2px 0 6px;
  color: color-mix(in srgb, var(--k-tinta) 78%, transparent);
}
.k-rotulo.tempero { margin-top: 16px; display: block }
.r-ingredientes.temperos li { padding: 9px 0; font-size: 14.5px }
.r-segredo { border-left: 3px solid var(--k-cor) }
.r-segredo p { font-size: 15.5px; line-height: 1.6 }
.r-trocas { list-style: none; display: flex; flex-direction: column; gap: 0; padding: 0 }
.r-trocas li {
  padding: 11px 0; font-size: 15px; line-height: 1.5;
  color: color-mix(in srgb, var(--k-tinta) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--k-tinta) 7%, transparent);
}
.r-trocas li:last-child { border-bottom: 0 }
.receita-chamada {
  font-size: 15px; line-height: 1.6; margin-bottom: 12px;
  color: color-mix(in srgb, var(--k-tinta) 84%, transparent);
}
.receita-segredo, .receita-nota { font-size: 14.5px; line-height: 1.55 }

/* `.bebida-tipo` continua: o Corpo Aceso usa a mesma etiqueta de tipo. */
.bebida-tipo {
  font-family: var(--fonte-m); font-size: 10.5px; letter-spacing: .04em;
  padding: 3px 8px; border-radius: var(--r-full); white-space: nowrap;
  background: color-mix(in srgb, var(--k-cor, currentColor) 12%, transparent);
  color: var(--k-cor, currentColor);
}
.receita.trancada > summary { opacity: .72 }
.receita.trancada .receita-macro { color: var(--k-cor, currentColor) }

/* ---------- hoje na cozinha ----------
   A tela que a pessoa abre todo dia. Grande, tocável, sem pedágio. */
.hoje-capa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 2px 0 4px }
.hoje-dia {
  font-family: var(--fonte-d); font-weight: 600; font-size: 27px;
  letter-spacing: -.028em; color: var(--k-tinta);
}
.hoje-local {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: color-mix(in srgb, var(--k-tinta) 66%, transparent);
  padding: 6px 13px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--k-cor) 11%, transparent);
}
.hoje-simbolo { font-size: 15px }

.hoje-refeicoes { display: flex; flex-direction: column; gap: 10px; margin-top: 14px }
.hoje-refeicao {
  display: flex; align-items: stretch; gap: 0;
  border-radius: var(--r-m); overflow: hidden;
  background: #fff; border: 1px solid color-mix(in srgb, var(--k-cor) 26%, transparent);
}
.hoje-abrir {
  flex: 1; display: flex; align-items: center; gap: 14px;
  padding: 17px 16px; cursor: pointer; min-width: 0;
  background: transparent; border: 0; text-align: left;
  font-family: var(--fonte-c); color: var(--k-tinta);
}
.hoje-abrir:active { background: color-mix(in srgb, var(--k-cor) 6%, transparent) }
.hoje-abrir:focus-visible { outline: 2px solid var(--k-cor); outline-offset: -3px }
.hr-icone {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 19px;
  border-radius: 50%; background: color-mix(in srgb, var(--k-cor) 12%, transparent);
}
.hr-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.hr-refeicao {
  font-family: var(--fonte-m); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: color-mix(in srgb, var(--k-tinta) 66%, transparent);
}
.hr-nome {
  font-family: var(--fonte-d); font-weight: 600; font-size: 16px;
  line-height: 1.28; letter-spacing: -.015em;
}
.hr-meta {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px;
  font-family: var(--fonte-m); font-size: 10px;
  color: color-mix(in srgb, var(--k-tinta) 66%, transparent);
}
.hr-trocar {
  width: 52px; flex-shrink: 0; cursor: pointer;
  background: color-mix(in srgb, var(--k-cor) 7%, transparent);
  border: 0; border-left: 1px solid color-mix(in srgb, var(--k-cor) 18%, transparent);
  color: var(--k-cor); font-size: 17px;
}
.hr-trocar:focus-visible { outline: 2px solid var(--k-cor); outline-offset: -3px }
.hoje-refeicao.vazia {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--k-tinta) 20%, transparent);
  cursor: pointer; padding: 0;
  font-family: var(--fonte-c); color: var(--k-tinta); text-align: left;
}
.hoje-refeicao.vazia { display: flex; align-items: center; gap: 14px; padding: 17px 16px }
.hoje-refeicao.vazia .hr-icone { background: color-mix(in srgb, var(--k-tinta) 7%, transparent) }
.hoje-refeicao.vazia .hr-nome {
  color: color-mix(in srgb, var(--k-tinta) 66%, transparent);
  font-weight: 400; font-size: 15px;
}

.hoje-atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 14px }
.hoje-atalho {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 6px; border-radius: var(--r-p); cursor: pointer;
  background: #fff; border: 1px solid color-mix(in srgb, var(--k-tinta) 10%, transparent);
  font-family: var(--fonte-c); color: var(--k-tinta);
}
.hoje-atalho:focus-visible { outline: 2px solid var(--k-cor); outline-offset: 2px }
.ha-icone { font-size: 17px }
.ha-nome { font-size: 11.5px; font-weight: 600 }
.ha-detalhe {
  font-family: var(--fonte-m); font-size: 8.5px; line-height: 1.3; text-align: center;
  color: color-mix(in srgb, var(--k-tinta) 66%, transparent);
}

/* ---------- trocar direto no planner ---------- */
.planner-linha { display: flex; align-items: stretch; gap: 6px }
/* O slot base tem width:100%. Dentro da linha isso o faz cobrir o botão de
   trocar, que fica visível mas inclicável — um bug que só aparece no dedo. */
.planner-linha .planner-slot { flex: 1; width: auto; min-width: 0 }
.planner-trocar {
  width: 44px; flex-shrink: 0; cursor: pointer;
  border-radius: var(--r-p);
  background: color-mix(in srgb, var(--k-cor) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--k-cor) 20%, transparent);
  color: var(--k-cor); font-size: 15px;
}
.planner-trocar:focus-visible { outline: 2px solid var(--k-cor); outline-offset: 2px }

/* ---------- semanas guardadas ---------- */
.k-salvas { display: flex; flex-direction: column; gap: 8px; margin-top: 10px }
.k-salva {
  display: flex; align-items: stretch; border-radius: var(--r-m); overflow: hidden;
  background: #fff; border: 1px solid color-mix(in srgb, var(--k-tinta) 10%, transparent);
}
.k-salva-usar {
  flex: 1; text-align: left; cursor: pointer; padding: 15px 16px;
  background: transparent; border: 0; font-family: var(--fonte-c); color: var(--k-tinta);
}
.k-salva-usar:focus-visible { outline: 2px solid var(--k-cor); outline-offset: -3px }
.k-salva-texto { display: flex; flex-direction: column; gap: 2px }
.k-salva-nome { font-family: var(--fonte-d); font-weight: 600; font-size: 15px }
.k-salva-det {
  font-family: var(--fonte-m); font-size: 10.5px;
  color: color-mix(in srgb, var(--k-tinta) 66%, transparent);
}
.k-salva-tirar {
  width: 46px; flex-shrink: 0; cursor: pointer;
  background: transparent; border: 0; border-left: 1px solid color-mix(in srgb, var(--k-tinta) 9%, transparent);
  color: color-mix(in srgb, var(--k-tinta) 66%, transparent); font-size: 19px;
}

/* ---------- os ícones desenhados da cozinha ----------
   Eram emoji, que muda de desenho em cada aparelho e não aceita a cor da
   identidade — que é justamente o ponto de cada cozinha ter a sua. Como o
   traço herda `currentColor`, o mesmo desenho serve ao tema claro e ao
   escuro sem exportar duas versões. */
.k-simbolo, .k-capa-simbolo, .hoje-simbolo,
.ha-icone, .k-f-icone, .k-grupo-icone {
  display: grid; place-items: center; line-height: 0;
}
.k-simbolo, .k-capa-simbolo { color: var(--k-cor, currentColor) }
.hoje-simbolo { color: var(--k-cor, currentColor) }
.ha-icone, .k-f-icone { color: var(--k-cor, currentColor) }
.k-grupo-icone { color: color-mix(in srgb, var(--k-tinta, currentColor) 55%, transparent) }