/* ============================================================
   Bebidas — chás, shots, sucos e a quebra do jejum.

   Esta seção era clara porque nasceu dentro da cozinha, e ficava ao lado
   de duas telas escuras (smoothies e os sucos do Corpo Aceso) que tratam
   exatamente do mesmo assunto. O app trocava de identidade no meio de uma
   seção só, e os componentes de tela escura usados em fundo claro
   deixavam texto invisível.

   Tudo aqui é escuro e usa os tokens do app. Nenhum literal de cor.
   ============================================================ */

.tela.bebidas { display: flex; flex-direction: column; gap: 14px }
.tela.bebidas .grupo-titulo { margin-top: 6px }

/* ---------- as quatro portas ----------
   Duas colunas: quatro cartões em coluna única viram uma lista que a
   pessoa lê de cima a baixo, e a escolha entre chá e suco não é uma
   leitura, é um relance. */
.portas-bebida {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.porta-bebida {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  padding: 15px 14px 13px;
  border-radius: var(--r-m);
  border: 1px solid var(--contorno);
  background: linear-gradient(155deg, color-mix(in srgb, var(--acao-a) 10%, transparent), var(--superficie));
  color: var(--texto);
  cursor: pointer;
  transition: transform .12s ease, border-color .2s ease;
}
.porta-bebida:active { transform: scale(.985) }
.porta-bebida:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 3px }

.pb-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.pb-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-full);
  color: var(--acao-a);
  background: color-mix(in srgb, var(--acao-a) 14%, transparent);
}
.pb-conta {
  font-family: var(--fonte-d); font-weight: 600; font-size: 21px;
  line-height: 1; color: var(--texto);
}
.pb-nome { font-family: var(--fonte-d); font-weight: 600; font-size: 17px; line-height: 1.2 }
.pb-desc { font-size: 12px; line-height: 1.45; color: var(--texto-2) }

/* O selo responde a única pergunta que a pessoa traz: isso quebra ou não? */
.pb-selo {
  /* `margin-top: auto` empurra o selo para a base: as quatro descrições
     têm alturas diferentes e os selos ficavam em quatro linhas distintas. */
  align-self: flex-start; margin-top: auto; padding-top: 4px;
  font-family: var(--fonte-m); font-size: 8.5px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-full); border: 1px solid;
}
.pb-selo.passa {
  color: var(--acao-b);
  border-color: color-mix(in srgb, var(--acao-b) 40%, transparent);
  background: color-mix(in srgb, var(--acao-b) 10%, transparent);
}
.pb-selo.quebra {
  color: var(--limite);
  border-color: color-mix(in srgb, var(--limite) 40%, transparent);
  background: color-mix(in srgb, var(--limite) 10%, transparent);
}
.pb-selo.depende {
  color: var(--texto-2);
  border-color: var(--contorno);
  background: var(--superficie);
}

.cartao.regra-caloria {
  background: linear-gradient(150deg, color-mix(in srgb, var(--limite) 10%, transparent), var(--superficie));
  border-color: color-mix(in srgb, var(--limite) 26%, transparent);
}
.cartao.regra-caloria .marca-rotulo {
  color: var(--limite);
  background: color-mix(in srgb, var(--limite) 16%, transparent);
  padding: 5px 12px;
}
.cartao.alerta-longo {
  background: color-mix(in srgb, var(--limite) 11%, transparent);
  border-color: color-mix(in srgb, var(--limite) 32%, transparent);
}
.cartao.alerta-longo .marca-rotulo {
  color: var(--limite);
  background: color-mix(in srgb, var(--limite) 16%, transparent);
  padding: 5px 12px;
}

/* ---------- a ficha de uma bebida ---------- */
.bebidas-lista { display: flex; flex-direction: column; gap: 7px }
.bebida {
  border-radius: var(--r-p); overflow: hidden;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--contorno);
}
.bebida > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px; cursor: pointer; list-style: none;
}
.bebida > summary::-webkit-details-marker { display: none }
.bebida[open] > summary { border-bottom: 1px solid var(--contorno) }
.bebida-nome { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--texto); line-height: 1.35 }
.bebida-tom { flex: none; font-family: var(--fonte-m); font-size: 11px; color: var(--texto-3); text-align: right; max-width: 42% }
.bebida-selo {
  flex: none; font-family: var(--fonte-m); font-size: 8.5px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-full); border: 1px solid;
}
.bebida-selo.passa {
  color: var(--acao-b);
  border-color: color-mix(in srgb, var(--acao-b) 40%, transparent);
  background: color-mix(in srgb, var(--acao-b) 10%, transparent);
}
.bebida-selo.quebra {
  color: var(--limite);
  border-color: color-mix(in srgb, var(--limite) 40%, transparent);
  background: color-mix(in srgb, var(--limite) 10%, transparent);
}
.bebida-corpo { padding: 13px; display: flex; flex-direction: column; gap: 9px }
.bebida-chamada { font-size: 13.5px; color: var(--texto-2); line-height: 1.55 }
.bebida-leitura {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 12px; border-radius: var(--r-p);
}
.bebida-leitura svg { flex: none; margin-top: 2px }
.bebida-leitura span { font-size: 12.5px; line-height: 1.5; color: var(--texto-2) }
.bebida-leitura.quebra { background: color-mix(in srgb, var(--limite) 9%, transparent); color: var(--limite) }
.bebida-leitura.passa { background: color-mix(in srgb, var(--acao-b) 9%, transparent); color: var(--acao-b) }

.bebida-busca {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r-m);
  border: 1px solid var(--contorno);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fonte-c);
  font-size: 15px;
}
.bebida-busca::placeholder { color: var(--texto-3) }
.bebida-busca:focus { outline: 2px solid var(--acao-a); outline-offset: 2px }

/* ---------- o roteiro de chá ----------
   Vinte e um dias de nomes não são um roteiro; são um cartaz. O que faz
   virar roteiro é o dia de hoje em destaque e um lugar para dar o visto. */
.cartao.roteiro-hoje {
  background: linear-gradient(150deg, color-mix(in srgb, var(--acao-a) 13%, transparent), var(--superficie));
  border-color: color-mix(in srgb, var(--acao-a) 30%, transparent);
}
.cartao.roteiro-hoje .marca-rotulo {
  color: var(--acao-a);
  background: color-mix(in srgb, var(--acao-a) 16%, transparent);
  padding: 5px 12px;
}
.roteiro-barra { display: flex; gap: 3px; flex-wrap: wrap }
.rb-dia {
  flex: 1 1 8px; min-width: 6px; height: 5px;
  border-radius: var(--r-full);
  background: var(--superficie-2);
}
.rb-dia.feito { background: var(--acao-a) }
.rb-dia.passou { background: color-mix(in srgb, var(--limite) 45%, transparent) }
.rb-dia.hoje { background: var(--acao-b); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acao-b) 26%, transparent) }

.roteiro-linha {
  border-radius: var(--r-p);
  border: 1px solid var(--contorno);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}
.roteiro-linha[open] { border-color: color-mix(in srgb, var(--acao-a) 34%, transparent) }
.roteiro-linha > summary {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; cursor: pointer; list-style: none;
}
.roteiro-linha > summary::-webkit-details-marker { display: none }

/* O visto é grande de propósito: marca-se com o polegar, com fome, e
   acertar um alvo de 14px nessa hora é pedir demais. */
.rl-visto {
  flex: none; width: 26px; height: 26px; border-radius: var(--r-full);
  border: 2px solid color-mix(in srgb, var(--texto) 30%, transparent);
  cursor: pointer;
  position: relative;
  transition: background .18s ease, border-color .18s ease;
}
.rl-visto:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 3px }
.rl-visto.aceso { background: var(--acao-a); border-color: var(--acao-a) }
.rl-visto.aceso::after {
  content: ''; position: absolute; left: 7px; top: 3.5px;
  width: 6px; height: 11px;
  border: solid var(--acao-tinta); border-width: 0 2.4px 2.4px 0;
  transform: rotate(42deg);
}
.rl-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.rl-quando {
  font-family: var(--fonte-m); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3);
}
.rl-nome { font-size: 14.5px; font-weight: 600; color: var(--texto); line-height: 1.3 }
.rl-abrir {
  flex: none; font-family: var(--fonte-m); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acao-a);
}
.roteiro-linha.feita .rl-nome { color: var(--texto-2) }
.roteiro-dica {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 11px 12px; border-radius: var(--r-p);
  background: color-mix(in srgb, var(--acao-b) 9%, transparent);
  color: var(--acao-b);
}
.roteiro-dica svg { flex: none; margin-top: 2px }
.roteiro-dica span { font-size: 12.5px; line-height: 1.5; color: var(--texto-2) }

/* O roteiro ainda fechado. */
.cartao.roteiro { padding: 0; gap: 0 }
.cartao.roteiro > summary { padding: 17px 18px; cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 6px }
.cartao.roteiro > summary::-webkit-details-marker { display: none }
.roteiro-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px }
.roteiro-nome { font-family: var(--fonte-d); font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--texto) }
.roteiro-dias { flex: none; font-family: var(--fonte-m); font-size: 12px; color: var(--acao-a) }
.roteiro-objetivo { font-size: 13px; color: var(--texto-2); line-height: 1.5 }
.roteiro-corpo {
  padding: 0 18px 18px;
  display: flex; flex-direction: column; gap: 11px;
  border-top: 1px solid var(--contorno);
  padding-top: 15px;
}
.roteiro-dias-lista { display: flex; flex-direction: column; gap: 9px }
.rdl-dia {
  padding: 11px 12px; border-radius: var(--r-p);
  background: rgba(255,255,255,.03); border: 1px solid var(--contorno);
  display: flex; flex-direction: column; gap: 7px;
}
.rdl-n {
  font-family: var(--fonte-m); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3);
}
.rdl-chas { display: flex; flex-direction: column; gap: 4px }
.rdl-cha { display: flex; gap: 9px; align-items: baseline; font-size: 13.5px; color: var(--texto-2) }
.rdl-quando {
  flex: none; width: 48px;
  font-family: var(--fonte-m); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3);
}
.rdl-dica { font-size: 12px; color: var(--texto-3); line-height: 1.45 }

/* ---------- a ordem da quebra ----------
   As três linhas usavam um componente de tela escura dentro do fundo
   quase branco da cozinha: os números apareciam, o texto ao lado não. */
.ordem-quebra { display: flex; flex-direction: column; gap: 10px }
.oq-passo { display: flex; gap: 13px; align-items: flex-start }
.oq-n {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-full);
  font-family: var(--fonte-d); font-weight: 600; font-size: 14px;
  color: var(--acao-tinta); background: var(--acao-a);
}
.oq-texto { display: flex; flex-direction: column; gap: 3px }
.oq-titulo { font-size: 14.5px; font-weight: 600; color: var(--texto); line-height: 1.3 }
.oq-desc { font-size: 13px; color: var(--texto-2); line-height: 1.5 }

/* ---------- os três horários na faixa do compromisso ---------- */
.rf-horarios { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px }
.rf-horario {
  font-family: var(--fonte-m); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-full);
  border: 1px solid var(--contorno); color: var(--texto-2);
}
.rf-horario.feito {
  color: var(--acao-a);
  border-color: color-mix(in srgb, var(--acao-a) 40%, transparent);
  background: color-mix(in srgb, var(--acao-a) 12%, transparent);
}