/* ==========================================================================
   COMMO — Aplicativo
   Uma coluna de leitura (32rem) centralizada, cartões arredondados e
   navegação embaixo. Mesmo no desktop a experiência é de celular: é lá que
   a decisão acontece.
   ========================================================================== */

.app-body {
  background: var(--creme);
  min-height: 100dvh;
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* --------------------------------------------------------------------------
   Loader da marca — as reticências pulsam em sequência
   -------------------------------------------------------------------------- */
.commo-loader { display: grid; justify-items: center; gap: .75rem; color: var(--verde); }
.commo-loader > span { display: block; width: var(--loader-tam, 48px); }
.commo-loader svg { width: 100%; height: auto; display: block; }
.commo-loader p { font-size: var(--t-sm); color: var(--texto-2); }

@keyframes commo-ponto { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

.marca-animada circle { animation: commo-ponto 1.4s ease-in-out infinite; }
.marca-animada circle:nth-of-type(2) { animation-delay: .2s; }
.marca-animada circle:nth-of-type(3) { animation-delay: .4s; }

.carregando-tela { display: grid; place-items: center; min-height: 60dvh; }

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */
.app-topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 62px;
  padding: calc(env(safe-area-inset-top) + .6rem) var(--s-4) .6rem;
  background: hsl(var(--h-fundo) / .9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.app-topo.rolou { border-bottom-color: var(--linha); }

/* Na tela inicial a marca fica centralizada, como no aplicativo original. */
.app-topo .topo-marca { margin-inline: auto; }
.app-topo.tem-voltar .topo-marca { display: none; }
.topo-marca .logo { font-size: .95rem; }

.topo-voltar {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--texto-2);
  padding: .4rem .2rem;
  transition: color .2s var(--ease);
}
.topo-voltar:hover { color: var(--texto); }
.topo-voltar .ic { width: 17px; height: 17px; }

.topo-acoes { margin-left: auto; display: flex; gap: .45rem; }
.topo-acoes button, .topo-acoes a {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center;
  border: 1px solid var(--linha); background: var(--creme-2);
  color: var(--texto-2);
  transition: all .2s var(--ease);
}
.topo-acoes button:hover { color: var(--verde); border-color: hsl(var(--h-primaria) / .4); }
.topo-acoes button[aria-pressed="true"] {
  background: var(--amarelo); border-color: var(--amarelo); color: var(--verde-escuro);
}
.topo-acoes button[aria-pressed="true"] .ic { fill: currentColor; }
.topo-acoes .ativo-verde[aria-pressed="true"] {
  background: var(--verde); border-color: var(--verde); color: var(--verde-ct);
}
.topo-acoes .ativo-verde[aria-pressed="true"] .ic { fill: none; }

/* --------------------------------------------------------------------------
   Conteúdo
   -------------------------------------------------------------------------- */
.app-main { padding: var(--s-5) var(--s-4) var(--s-8); }
.app-main > section {
  max-width: var(--largura-app);
  margin-inline: auto;
  animation: entra .18s ease-out;
}
@keyframes entra { from { opacity: 0; } }

.titulo-tela { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.02em; }
.sub-tela { color: var(--texto-2); font-size: var(--t-sm); margin-top: .15rem; }

/* Rótulo de seção: FAÍSCA + TEXTO EM CAIXA ALTA */
.rotulo-secao {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--t-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--texto-2);
  margin-bottom: .75rem;
}
.rotulo-secao .ic { width: 15px; height: 15px; color: var(--amarelo); }

.bloco { margin-bottom: var(--s-6); }

/* --------------------------------------------------------------------------
   Navegação inferior
   -------------------------------------------------------------------------- */
.app-abas {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  background: var(--creme-2);
  border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom);
}
.app-abas {
  display: grid; grid-template-columns: repeat(6, 1fr);
  max-width: var(--largura-app); margin-inline: auto;
  border-inline: 1px solid var(--linha);
}
@media (max-width: 34rem) { .app-abas { border-inline: 0; } }

.app-abas a {
  display: grid; justify-items: center; gap: 1px;
  padding: .5rem 0 .45rem;
  font-size: .68rem; font-weight: 500; line-height: 1.2;
  color: var(--texto-2);
  transition: color .18s var(--ease);
}
.app-abas a .ic { width: 20px; height: 20px; transition: stroke-width .18s var(--ease); }
.app-abas a.ativa { color: var(--verde); }
.app-abas a.ativa .ic { stroke-width: 2.5; }

/* --------------------------------------------------------------------------
   Abas em pílula (Favoritos, Semana, Dicas, Preferências)
   -------------------------------------------------------------------------- */
.abas-pilula {
  display: flex; gap: .35rem; padding: .25rem;
  background: var(--salvia-clara); border-radius: var(--r-md);
  margin-bottom: var(--s-5);
}
.abas-pilula button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem .75rem; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 500; color: var(--texto-2);
  transition: all .2s var(--ease);
}
.abas-pilula button .ic { width: 16px; height: 16px; }
.abas-pilula button[aria-pressed="true"] {
  background: var(--creme-2); color: var(--texto);
  box-shadow: var(--sombra-sm); font-weight: 600;
}

/* Filtros roláveis (categorias de dica) */
.filtros-linha {
  display: flex; gap: .4rem; overflow-x: auto;
  padding-bottom: .5rem; margin-bottom: var(--s-5);
  scrollbar-width: none;
}
.filtros-linha::-webkit-scrollbar { display: none; }
.filtros-linha button {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .75rem; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 500;
  background: var(--creme-2); border: 1px solid var(--linha); color: var(--texto-2);
  transition: all .2s var(--ease);
}
.filtros-linha button .ic { width: 13px; height: 13px; }
.filtros-linha button[aria-pressed="true"] {
  background: var(--verde); border-color: var(--verde); color: var(--verde-ct);
}

/* --------------------------------------------------------------------------
   Selo "Testado na Vida Real"
   -------------------------------------------------------------------------- */
.selo-testado {
  display: grid; place-content: center; justify-items: center;
  border-radius: 50%;
  background: var(--verde); color: var(--verde-ct);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1.15; text-align: center;
  box-shadow: var(--sombra-lg);
  padding: .4rem;
}
.selo-testado .ic { width: 15px; height: 15px; stroke-width: 3; margin-bottom: 2px; }
.selo-testado--sm { width: 62px; height: 62px; font-size: .52rem; }
.selo-testado--md { width: 78px; height: 78px; font-size: .58rem; }
.selo-testado--lg { width: 94px; height: 94px; font-size: .64rem; }

.selo-rodape {
  display: grid; justify-items: center; text-align: center;
  padding: var(--s-6) 0 var(--s-4);
}
.selo-rodape p {
  font-size: var(--t-xs); color: var(--texto-2);
  max-width: 30ch; margin-top: .8rem; line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Cartão de receita
   -------------------------------------------------------------------------- */
.receita-card {
  display: block;
  background: var(--creme-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.receita-card:active { transform: scale(.99); }
@media (hover: hover) {
  .receita-card:hover { box-shadow: var(--sombra-md); border-color: hsl(var(--h-primaria) / .25); }
  .receita-card:hover .receita-titulo { color: var(--verde); }
}

.receita-card .corpo-flex { display: flex; flex-direction: column; }
@media (min-width: 26rem) {
  .receita-card .corpo-flex { flex-direction: row; }
  .receita-card .receita-foto { width: 11rem; height: auto; flex: none; }
}

.receita-foto {
  position: relative; overflow: hidden;
  height: 11rem;
  background: var(--salvia-clara);
  background-size: cover; background-position: center;
  display: grid; place-items: center;
}
.receita-card--destaque .receita-foto { height: 13rem; }
.receita-foto .sem-foto { font-size: 2.2rem; opacity: .35; }
.receita-foto .selo-canto { position: absolute; top: .7rem; right: .7rem; }

.receita-corpo { padding: var(--s-4); flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.receita-rotulo {
  font-size: .58rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--texto-2); margin-bottom: .2rem;
}
.receita-titulo {
  font-weight: 700; line-height: 1.25; color: var(--texto);
  transition: color .2s var(--ease);
  font-size: var(--t-base);
}
.receita-card--destaque .receita-titulo { font-size: var(--t-lg); }
.receita-chamada { font-size: var(--t-sm); color: var(--texto-2); margin-top: .2rem; }

.receita-metas {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: .5rem; font-size: var(--t-xs); color: var(--texto-2);
}
.receita-metas span { display: inline-flex; align-items: center; gap: .25rem; }
.receita-metas .ic { width: 13px; height: 13px; }

.receita-rodape { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid hsl(var(--h-borda) / .6); }

.etiqueta-suave {
  display: inline-block;
  font-size: var(--t-xs); font-weight: 500;
  padding: .1rem .55rem; border-radius: var(--r-full);
  background: var(--salvia-clara); color: var(--texto-2);
}

/* Botão "adicionar à semana" que acompanha o cartão */
.btn-semana {
  width: 100%; margin-top: .5rem;
  padding: .5rem; border-radius: var(--r-md);
  font-size: var(--t-xs); font-weight: 600;
  background: var(--salvia-clara); color: var(--texto-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  transition: all .2s var(--ease);
}
.btn-semana .ic { width: 14px; height: 14px; }
.btn-semana:hover { color: var(--verde); }
.btn-semana[aria-pressed="true"] { background: hsl(var(--h-primaria) / .12); color: var(--verde); }

/* --------------------------------------------------------------------------
   "Por que recomendamos"
   -------------------------------------------------------------------------- */
.motivos {
  background: hsl(var(--h-primaria) / .05);
  border: 1px solid hsl(var(--h-primaria) / .15);
  border-radius: var(--r-md);
  padding: .75rem; margin-top: .5rem;
}
.motivos h4 {
  font-size: .58rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--verde); margin-bottom: .4rem;
}
.motivos li {
  display: flex; align-items: flex-start; gap: .4rem;
  font-size: var(--t-xs); color: var(--texto-2); line-height: 1.5;
  margin-bottom: .25rem;
}
.motivos .ic { width: 12px; height: 12px; color: var(--verde); flex: none; margin-top: 3px; }

/* --------------------------------------------------------------------------
   Assistente de busca (escolhas grandes, uma decisão por tela)
   -------------------------------------------------------------------------- */
.escolha-lista { display: grid; gap: .75rem; }
.escolha {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--creme-2); border: 1px solid var(--linha);
  border-radius: var(--r-lg); text-align: left; width: 100%;
  transition: all .2s var(--ease);
}
.escolha:hover { border-color: hsl(var(--h-primaria) / .4); box-shadow: var(--sombra-md); }
.escolha .avatar {
  width: 3rem; height: 3rem; border-radius: var(--r-md); flex: none;
  background: var(--salvia-clara);
  display: grid; place-items: center; font-size: 1.5rem;
  transition: transform .2s var(--ease);
}
.escolha .avatar .ic { width: 22px; height: 22px; color: var(--verde); }
.escolha:hover .avatar { transform: scale(1.08); }
.escolha b { display: block; font-weight: 700; font-size: var(--t-base); }
.escolha:hover b { color: var(--verde); }
.escolha small { display: block; font-size: var(--t-xs); color: var(--texto-2); margin-top: .1rem; }

.escolha-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 30rem) { .escolha-grade { grid-template-columns: repeat(3, 1fr); } }
.escolha-quadrada {
  padding: var(--s-4) .6rem; text-align: center;
  background: var(--creme-2); border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  transition: all .2s var(--ease);
}
.escolha-quadrada:hover { border-color: hsl(var(--h-primaria) / .4); box-shadow: var(--sombra-md); }
.escolha-quadrada .emo { display: block; font-size: 1.6rem; margin-bottom: .4rem; }
.escolha-quadrada span { font-size: var(--t-sm); font-weight: 600; }
.escolha-quadrada:hover span { color: var(--verde); }

.migalhas { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .35rem; }
.migalha {
  font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--salvia-clara); color: var(--texto-2);
  padding: .15rem .55rem; border-radius: var(--r-full);
}

.separador-ou {
  display: flex; align-items: center; gap: .75rem;
  margin: var(--s-4) 0;
}
.separador-ou::before, .separador-ou::after {
  content: ""; flex: 1; height: 1px; background: var(--linha);
}
.separador-ou span { font-size: var(--t-xs); color: var(--texto-2); font-weight: 500; }

/* --------------------------------------------------------------------------
   Detalhe da receita
   -------------------------------------------------------------------------- */
.rec-capa {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--salvia-clara);
  background-size: cover; background-position: center;
  margin-bottom: var(--s-5);
  display: grid; place-items: center;
}
.rec-capa .sem-foto { font-size: 3rem; opacity: .3; }
.rec-capa .selo-canto { position: absolute; top: 1rem; right: 1rem; }

.rec-titulo-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: .75rem; }
.rec-titulo-linha h1 { font-size: var(--t-2xl); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }

.rec-numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: var(--s-6); }
@media (min-width: 30rem) { .rec-numeros { grid-template-columns: repeat(4, 1fr); } }
.rec-numero {
  display: flex; align-items: center; gap: .6rem;
  background: var(--creme-2); border: 1px solid var(--linha);
  border-radius: var(--r-md); padding: .7rem;
}
.rec-numero .ic { width: 16px; height: 16px; color: var(--verde); }
.rec-numero small {
  display: block; font-size: .6rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--texto-2);
}
.rec-numero b { display: block; font-size: var(--t-sm); font-weight: 700; }

.cartao-conteudo {
  background: var(--creme-2); border: 1px solid var(--linha);
  border-radius: var(--r-lg); padding: var(--s-5);
}

.titulo-bloco {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--t-base); font-weight: 800; margin-bottom: .75rem;
}
.titulo-bloco .ic { width: 16px; height: 16px; color: var(--verde); }

.ingredientes li {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem 0; border-bottom: 1px solid hsl(var(--h-borda) / .55);
  font-size: var(--t-sm);
}
.ingredientes li:last-child { border-bottom: 0; }
.ingredientes .qtd { font-weight: 700; color: var(--verde); flex: none; min-width: 5em; font-variant-numeric: tabular-nums; }
.ingredientes .obs { color: var(--texto-2); }
.ingredientes .opcional::after {
  content: "opcional"; margin-left: .4rem; font-size: var(--t-xs);
  color: var(--texto-2); background: var(--salvia-clara);
  padding: .05rem .4rem; border-radius: var(--r-full);
}

.porcoes-ctrl {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--salvia-clara); border-radius: var(--r-md); padding: .2rem;
  font-size: var(--t-xs); font-weight: 600;
}
.porcoes-ctrl button {
  width: 1.75rem; height: 1.75rem; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--texto-2);
  transition: all .18s var(--ease);
}
.porcoes-ctrl button:hover { background: var(--creme-2); color: var(--texto); }
.porcoes-ctrl button .ic { width: 14px; height: 14px; }
.porcoes-ctrl .valor { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }

.passos { display: grid; gap: var(--s-4); }
.passo {
  display: flex; gap: var(--s-4); cursor: pointer;
}
.passo-num {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--verde); color: var(--verde-ct);
  display: grid; place-items: center;
  font-weight: 800; font-size: .8rem;
}
.passo-texto p { font-size: var(--t-sm); line-height: 1.65; }
.passo-dica {
  display: flex; gap: .5rem; align-items: flex-start;
  margin-top: .5rem; padding: .55rem .75rem;
  background: var(--amarelo-claro); color: var(--amarelo-ct);
  border-radius: var(--r-sm); font-size: var(--t-xs); line-height: 1.5;
}
.passo-dica .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.passo.feito .passo-num { background: var(--salvia); }
.passo.feito .passo-texto { opacity: .45; text-decoration: line-through; }

.caixa-amarela {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--amarelo-claro);
  border: 1px solid hsl(var(--h-destaque) / .25);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
}
.caixa-amarela .ic { width: 18px; height: 18px; color: var(--amarelo); flex: none; margin-top: 2px; }
.caixa-amarela h3 { font-size: var(--t-sm); font-weight: 700; color: var(--amarelo-ct); margin-bottom: .2rem; }
.caixa-amarela p { font-size: var(--t-sm); line-height: 1.6; }

/* Avaliação por polegar */
.avaliacao-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.avaliacao-btns button {
  display: grid; justify-items: center; gap: .35rem;
  padding: .8rem .4rem; border-radius: var(--r-md);
  border: 1px solid var(--linha); background: var(--creme);
  font-size: var(--t-xs); font-weight: 500; color: var(--texto-2);
  transition: all .2s var(--ease);
}
.avaliacao-btns button .ic { width: 19px; height: 19px; }
.avaliacao-btns button:hover { border-color: hsl(var(--h-primaria) / .4); color: var(--texto); }
.avaliacao-btns button[aria-pressed="true"] {
  background: var(--verde); border-color: var(--verde); color: var(--verde-ct);
}

/* --------------------------------------------------------------------------
   Semana
   -------------------------------------------------------------------------- */
.item-semana {
  display: flex; align-items: center; gap: .75rem;
  background: var(--creme-2); border: 1px solid var(--linha);
  border-radius: var(--r-md); padding: .6rem;
}
.item-semana .mini {
  width: 3rem; height: 3rem; border-radius: var(--r-sm); flex: none;
  background: var(--salvia-clara); background-size: cover; background-position: center;
  display: grid; place-items: center; font-size: 1.1rem;
}
.item-semana .info { flex: 1; min-width: 0; }
.item-semana .info b { display: block; font-size: var(--t-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-semana .info small { color: var(--texto-2); font-size: var(--t-xs); }
.item-semana .remover { padding: .45rem; border-radius: var(--r-sm); color: var(--texto-2); }
.item-semana .remover:hover { color: var(--terracota); background: var(--terracota-clara); }
.item-semana .remover .ic { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Lista de compras
   -------------------------------------------------------------------------- */
.lista-cabeca { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.lista-cabeca .titulo-bloco { margin-bottom: 0; }
.lista-cabeca .contagem { font-size: var(--t-xs); color: var(--texto-2); font-weight: 500; }
.lista-barra { height: 6px; border-radius: 3px; background: var(--salvia-clara); overflow: hidden; margin-bottom: var(--s-5); }
.lista-barra i { display: block; height: 100%; background: var(--verde); border-radius: 3px; transition: width .35s var(--ease); }

.grupo-mercado + .grupo-mercado { margin-top: var(--s-5); }
.grupo-mercado h4 {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--texto-2); margin-bottom: .5rem;
}
.item-compra {
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem 0; cursor: pointer;
}
.item-compra .caixa {
  width: 1.25rem; height: 1.25rem; border-radius: var(--r-sm); flex: none;
  border: 1px solid var(--linha-forte); color: transparent;
  display: grid; place-items: center; transition: all .2s var(--ease);
}
.item-compra .caixa .ic { width: 12px; height: 12px; stroke-width: 3; }
.item-compra:hover .caixa { border-color: var(--verde); }
.item-compra .nome { flex: 1; min-width: 0; font-size: var(--t-sm); }
.item-compra .nome small { display: block; color: var(--texto-2); font-size: var(--t-xs); }
.item-compra .qtd { color: var(--texto-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.item-compra.ok .caixa { background: var(--verde); border-color: var(--verde); color: var(--verde-ct); }
.item-compra.ok .nome { text-decoration: line-through; color: var(--texto-2); }

/* --------------------------------------------------------------------------
   Perfil e listas de opção
   -------------------------------------------------------------------------- */
.perfil-topo { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.perfil-avatar {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; flex: none;
  background: var(--verde); color: var(--verde-ct);
  display: grid; place-items: center; font-weight: 800; font-size: 1.25rem;
}
.perfil-topo h1 { font-size: var(--t-xl); font-weight: 800; }
.perfil-topo p { font-size: var(--t-sm); color: var(--texto-2); }

.grupo-rotulo {
  font-size: var(--t-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--texto-2); margin-bottom: .65rem;
}

.lista-cartao {
  background: var(--creme-2); border: 1px solid var(--linha);
  border-radius: var(--r-lg); overflow: hidden;
}
.lista-cartao > * + * { border-top: 1px solid var(--linha); }
.lista-cartao a, .lista-cartao button {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; padding: var(--s-4);
  font-size: var(--t-sm); font-weight: 500; text-align: left;
  transition: background-color .18s var(--ease);
}
.lista-cartao a:hover, .lista-cartao button:hover { background: hsl(var(--h-secundaria) / .1); }
.lista-cartao .ic { width: 19px; height: 19px; color: var(--texto-2); }
.lista-cartao .valor { margin-left: auto; font-size: var(--t-xs); color: var(--texto-2); font-weight: 400; }
.lista-cartao .destaque .ic { color: var(--verde); }

.opcao-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; padding: var(--s-4);
  background: var(--creme-2); border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  font-size: var(--t-sm); font-weight: 500; text-align: left;
  transition: all .2s var(--ease);
}
.opcao-toggle:hover { border-color: hsl(var(--h-primaria) / .25); }
.opcao-toggle small { display: block; font-weight: 400; color: var(--texto-2); font-size: var(--t-xs); margin-top: .1rem; }
.opcao-toggle .marca {
  width: 1.25rem; height: 1.25rem; border-radius: var(--r-sm); flex: none;
  border: 2px solid hsl(var(--h-suave-ct) / .35);
  display: grid; place-items: center; color: transparent;
  transition: all .2s var(--ease);
}
.opcao-toggle .marca .ic { width: 12px; height: 12px; stroke-width: 3; }
.opcao-toggle[aria-pressed="true"] {
  background: hsl(var(--h-primaria) / .1);
  border-color: hsl(var(--h-primaria) / .3);
  color: var(--verde);
}
.opcao-toggle[aria-pressed="true"] .marca { background: var(--verde); border-color: var(--verde); color: var(--verde-ct); }
.opcao-lista { display: grid; gap: .5rem; }

/* --------------------------------------------------------------------------
   Dicas e produtos
   -------------------------------------------------------------------------- */
.cartao-dica {
  background: var(--creme-2); border: 1px solid var(--linha);
  border-radius: var(--r-lg); padding: var(--s-5);
  transition: box-shadow .2s var(--ease);
}
.cartao-dica:hover { box-shadow: var(--sombra-sm); }
.cartao-dica h3 { font-weight: 700; margin-bottom: .4rem; }
.cartao-dica p { font-size: var(--t-sm); color: var(--texto-2); line-height: 1.65; white-space: pre-wrap; }

.cartao-produto {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--creme-2); border: 1px solid var(--linha);
  border-radius: var(--r-lg); padding: var(--s-4);
  transition: all .2s var(--ease);
}
.cartao-produto:hover { border-color: hsl(var(--h-primaria) / .3); box-shadow: var(--sombra-sm); }
.cartao-produto .capa {
  width: 3.25rem; height: 3.25rem; border-radius: var(--r-md); flex: none;
  background: var(--salvia-clara); background-size: cover; background-position: center;
  display: grid; place-items: center; color: var(--verde);
}
.cartao-produto .info { flex: 1; min-width: 0; }
.cartao-produto b { display: block; font-weight: 700; font-size: var(--t-sm); }
.cartao-produto small { display: block; font-size: var(--t-xs); color: var(--texto-2); margin-top: .1rem; }
.cartao-produto > .ic { color: var(--texto-2); }

.cabeca-icone { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--s-5); }
.cabeca-icone .quadro {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); flex: none;
  background: var(--amarelo-claro); color: var(--amarelo);
  display: grid; place-items: center;
}
.cabeca-icone .quadro .ic { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Estados vazios
   -------------------------------------------------------------------------- */
.vazio { text-align: center; padding: var(--s-10) var(--s-4); color: var(--texto-2); }
.vazio > .ic { width: 46px; height: 46px; margin: 0 auto .8rem; opacity: .18; stroke-width: 1.4; }
.vazio .emo { font-size: 2.4rem; display: block; margin-bottom: .6rem; }
.vazio h3 { font-size: var(--t-lg); font-weight: 700; margin-bottom: .3rem; color: var(--texto); }
.vazio p { font-size: var(--t-sm); max-width: 32ch; margin-inline: auto; line-height: 1.6; }
.vazio a.link, .vazio button.link {
  display: inline-block; margin-top: var(--s-4);
  font-size: var(--t-sm); font-weight: 600; color: var(--verde);
}
.vazio a.link:hover, .vazio button.link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Autenticação
   -------------------------------------------------------------------------- */
body.tela-auth { padding: 0 !important; }
body.tela-auth .app-main { padding: 0; }

.auth {
  min-height: 100dvh; display: grid; place-items: center;
  padding: var(--s-5); background: var(--creme);
}
.auth-caixa { width: min(100%, 26rem); }
.auth-cabeca { text-align: center; margin-bottom: var(--s-6); }
.auth-cabeca .marca {
  display: inline-grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: var(--r-lg);
  background: var(--verde); color: var(--verde-ct);
  margin-bottom: var(--s-4);
}
.auth-cabeca .marca svg { width: 2.1rem; height: 2.1rem; }
.auth-cabeca h1 { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.02em; }
.auth-cabeca p { color: var(--texto-2); margin-top: .35rem; font-size: var(--t-sm); }

.auth-cartao {
  background: var(--creme-2); border: 1px solid var(--linha);
  border-radius: var(--r-lg); padding: var(--s-6);
  box-shadow: var(--sombra-sm);
}
.auth-form { display: grid; gap: var(--s-4); }
.auth-rodape { text-align: center; margin-top: var(--s-5); font-size: var(--t-sm); color: var(--texto-2); }
.auth-rodape a { color: var(--verde); font-weight: 600; }

.campo-icone { position: relative; }
.campo-icone > .ic {
  position: absolute; left: .85rem; top: 50%; translate: 0 -50%;
  width: 17px; height: 17px; color: var(--texto-2); pointer-events: none;
}
.campo-icone input { padding-left: 2.6rem; height: 3rem; }

/* --------------------------------------------------------------------------
   Onboarding
   -------------------------------------------------------------------------- */
.ob-progresso { display: flex; gap: .25rem; margin-bottom: var(--s-5); }
.ob-progresso span { flex: 1; height: 4px; border-radius: 2px; background: var(--linha); transition: background-color .3s var(--ease); }
.ob-progresso span.ok { background: var(--verde); }

.contador-ctrl {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--creme-2); border: 1px solid var(--linha);
  border-radius: var(--r-lg); padding: .7rem var(--s-4);
  font-size: var(--t-sm); font-weight: 500;
}
.contador-ctrl .botoes { display: flex; align-items: center; gap: .6rem; }
.contador-ctrl button {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--salvia-clara); color: var(--verde);
  display: grid; place-items: center;
}
.contador-ctrl button .ic { width: 15px; height: 15px; }
.contador-ctrl b { min-width: 2em; text-align: center; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Assinatura e Pix
   -------------------------------------------------------------------------- */
.cartao-plano {
  background: var(--creme-2); border: 2px solid var(--verde);
  border-radius: var(--r-lg); padding: var(--s-5);
  margin-bottom: var(--s-5);
}
.preco-linha { display: flex; align-items: flex-start; justify-content: center; gap: .2rem; color: var(--verde); }
.preco-linha .moeda   { font-size: var(--t-base); font-weight: 700; margin-top: .5rem; }
.preco-linha .num     { font-size: clamp(2.4rem, 11vw, 3.2rem); font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.preco-linha .periodo { font-size: var(--t-sm); color: var(--texto-2); font-weight: 600; align-self: flex-end; margin-bottom: .5rem; }
.preco-antes { text-align: center; font-size: var(--t-sm); color: var(--texto-2); margin-top: .3rem; }

.preco-itens { display: grid; gap: .55rem; margin: var(--s-4) 0; }
.preco-itens li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--t-sm); }
.preco-itens .ic { width: 17px; height: 17px; color: var(--verde); flex: none; margin-top: 2px; }

.cupom-caixa { border-top: 1px solid var(--linha); padding-top: var(--s-4); }
.cupom-ok {
  display: flex; align-items: center; gap: .55rem;
  background: var(--salvia-clara); color: var(--verde);
  border-radius: var(--r-md); padding: .65rem .85rem; font-size: var(--t-sm);
}
.cupom-ok .ic { flex: none; width: 17px; height: 17px; }
.cupom-ok span { flex: 1; min-width: 0; }
.cupom-ok button { color: var(--verde); opacity: .6; padding: .2rem; }
.cupom-ok button:hover { opacity: 1; }

.pix-caixa {
  background: var(--creme-2); border: 1px solid var(--linha);
  border-radius: var(--r-lg); padding: var(--s-5);
  display: grid; justify-items: center; gap: var(--s-3);
}
.pix-valor { font-weight: 800; font-size: var(--t-2xl); color: var(--verde); line-height: 1; }
.pix-desconto {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--t-sm); color: var(--verde);
  background: var(--salvia-clara); padding: .2rem .7rem; border-radius: var(--r-full);
}
.pix-desconto .ic { width: 14px; height: 14px; }
.pix-qr {
  width: min(15rem, 70vw); height: auto; aspect-ratio: 1;
  border-radius: var(--r-md); background: #fff; box-shadow: var(--sombra-md);
}
.pix-prazo { font-size: var(--t-sm); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.pix-codigo {
  width: 100%; resize: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .66rem; line-height: 1.45; color: var(--texto-2);
  background: var(--creme); border: 1px solid var(--linha);
  border-radius: var(--r-sm); padding: .55rem; word-break: break-all;
}
.pix-status {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  margin-top: var(--s-4); padding: .8rem;
  font-size: var(--t-sm); color: var(--texto-2);
  background: var(--salvia-clara); border-radius: var(--r-md);
}
.pix-status.ok { background: var(--verde); color: var(--verde-ct); font-weight: 600; }
.pix-status .ic { width: 17px; height: 17px; }
.pix-status .commo-loader > span { width: 26px; }

.faixa-plano {
  display: flex; align-items: center; gap: .75rem;
  background: var(--amarelo-claro); border: 1px solid hsl(var(--h-destaque) / .3);
  border-radius: var(--r-md); padding: .7rem .9rem; margin-bottom: var(--s-5);
  font-size: var(--t-sm); color: var(--amarelo-ct);
}
.faixa-plano .ic { color: var(--amarelo); flex: none; }
.faixa-plano .btn { margin-left: auto; padding: .4rem .9rem; font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   Modal, avisos e "puxar para atualizar"
   -------------------------------------------------------------------------- */
.modal-fundo {
  position: fixed; inset: 0; z-index: 200;
  background: hsl(156 40% 8% / .55); backdrop-filter: blur(3px);
  display: grid; align-items: end; justify-items: center;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.modal-fundo.aberto { opacity: 1; pointer-events: auto; }
.modal {
  width: min(100%, 30rem);
  background: var(--creme); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--s-5) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  max-height: 86dvh; overflow-y: auto;
  transform: translateY(100%); transition: transform .3s var(--ease);
}
.modal-fundo.aberto .modal { transform: none; }
.modal-cabeca { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.modal-cabeca h2 { font-size: var(--t-lg); font-weight: 800; }
.modal-cabeca button {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--salvia-clara); color: var(--verde);
  display: grid; place-items: center;
}
@media (min-width: 34rem) {
  .modal-fundo { align-items: center; padding: var(--s-4); }
  .modal { border-radius: var(--r-xl); transform: scale(.95); }
  .modal-fundo.aberto .modal { transform: none; }
}

.toaster {
  position: fixed; z-index: 300; left: 50%; translate: -50% 0;
  bottom: calc(84px + env(safe-area-inset-bottom));
  display: grid; gap: .5rem; width: min(92%, 26rem); pointer-events: none;
}
.toast {
  background: var(--verde-escuro); color: var(--verde-ct);
  padding: .75rem 1rem; border-radius: var(--r-md);
  font-size: var(--t-sm); box-shadow: var(--sombra-lg);
  animation: sobeToast .28s var(--ease-out-back);
}
.toast.erro { background: var(--terracota); }
.toast.ok   { background: var(--verde); }
@keyframes sobeToast { from { opacity: 0; transform: translateY(12px); } }

.pull-indicador {
  position: fixed; inset: 0 0 auto 0; z-index: 45;
  display: grid; place-items: center;
  height: 0; overflow: hidden; color: var(--texto-2);
  pointer-events: none;
}
.pull-indicador .ic { transition: transform .2s var(--ease); }
.pull-indicador.pronto .ic { transform: rotate(180deg); color: var(--verde); }
.pull-indicador.girando .ic { display: none; }

.aviso-sistema {
  position: sticky; top: 0; z-index: 60;
  background: var(--amarelo); color: var(--verde-escuro);
  padding: .55rem 1rem; font-size: var(--t-sm); font-weight: 600; text-align: center;
}

/* --------------------------------------------------------------------------
   Pendências — o que falta configurar
   O cadastro não barra mais nada; o que ficou para trás aparece aqui.
   -------------------------------------------------------------------------- */
.pendencias {
  background: var(--creme-2);
  border: 1px solid hsl(var(--h-destaque) / .4);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s-5);
  box-shadow: var(--sombra-sm);
}

.pendencias-topo {
  display: flex; align-items: center; gap: .7rem;
  padding: var(--s-4);
  background: var(--amarelo-claro);
  color: var(--amarelo-ct);
}
.pendencias-topo .ic { color: var(--amarelo); flex: none; }
.pendencias-topo b { display: block; font-size: var(--t-sm); font-weight: 700; line-height: 1.3; }
.pendencias-topo small { font-size: var(--t-xs); opacity: .85; }

.pendencias-lista > li + li { border-top: 1px solid var(--linha); }
.pendencias-lista a {
  display: flex; align-items: center; gap: .75rem;
  padding: var(--s-4);
  transition: background-color .18s var(--ease);
}
.pendencias-lista a:hover { background: hsl(var(--h-secundaria) / .1); }

.pendencias-lista .marcador {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--salvia-clara); color: var(--verde);
}
.pendencias-lista .marcador .ic { width: 14px; height: 14px; }
.pendencias-lista .urgente .marcador { background: var(--amarelo); color: var(--verde-escuro); }

.pendencias-lista .txt { flex: 1; min-width: 0; }
.pendencias-lista .txt b { display: block; font-size: var(--t-sm); font-weight: 600; }
.pendencias-lista .txt small {
  display: block; font-size: var(--t-xs); color: var(--texto-2);
  line-height: 1.45; margin-top: .1rem;
}
.pendencias-lista .acao {
  flex: none; font-size: var(--t-xs); font-weight: 700; color: var(--verde);
  white-space: nowrap;
}
@media (max-width: 26rem) {
  .pendencias-lista .acao { display: none; }   /* o cartão inteiro já é o link */
}

/* Aviso de que o filtro alimentar ainda não está valendo */
.aviso-filtro {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--salvia-clara);
  border-radius: var(--r-md);
  padding: .7rem .9rem; margin-bottom: var(--s-5);
  font-size: var(--t-xs); color: var(--texto-2); line-height: 1.55;
}
.aviso-filtro .ic { width: 15px; height: 15px; color: var(--verde); flex: none; margin-top: 2px; }
.aviso-filtro b { color: var(--texto); }
.aviso-filtro a { color: var(--verde); font-weight: 600; text-decoration: underline; }