/* ===== Tokens ===== */
:root {
  color-scheme: light;
  --fundo: #f2f5f4;
  --superficie: #ffffff;
  --superficie-2: #f6f8f7;
  --texto: #11201b;
  --suave: #5d6e68;
  --borda: #e1e8e5;
  --marca: #0f766e;
  --marca-forte: #115e59;
  --marca-suave: #e0f5f1;
  --bom: #15803d;
  --bom-fundo: #dcfce7;
  --mau: #c2410c;
  --mau-fundo: #ffedd5;
  --perigo: #b91c1c;
  --perigo-fundo: #fee2e2;
  --sombra: 0 1px 2px rgba(17, 32, 27, .04), 0 6px 20px rgba(17, 32, 27, .06);
  --sombra-forte: 0 10px 40px rgba(17, 32, 27, .18);
  --raio: 18px;
  --raio-pequeno: 12px;
  --nav: 70px;
  --topo: 60px;
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fundo: #0c1412;
    --superficie: #15201d;
    --superficie-2: #1b2824;
    --texto: #e7efec;
    --suave: #93a59f;
    --borda: #26352f;
    --marca: #2dd4bf;
    --marca-forte: #5eead4;
    --marca-suave: #123632;
    --bom: #4ade80;
    --bom-fundo: #12321f;
    --mau: #fb923c;
    --mau-fundo: #3a2312;
    --perigo: #f87171;
    --perigo-fundo: #3b1717;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-forte: 0 10px 40px rgba(0, 0, 0, .5);
  }
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  background: var(--fundo);
  color: var(--texto);
  padding-bottom: calc(var(--nav) + var(--seguro-baixo) + 24px);
  -webkit-tap-highlight-color: transparent;
}
body.em-compra { padding-bottom: calc(96px + var(--seguro-baixo)); }

h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--marca); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }

.ic { width: 22px; height: 22px; flex: none; }
.ic-mini { width: 14px; height: 14px; vertical-align: -2px; }
.ic-grande { width: 44px; height: 44px; }

.suave { color: var(--suave); }
.centro { text-align: center; }
.bom { color: var(--bom); }
.mau { color: var(--mau); }

/* ===== Topo ===== */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  height: calc(var(--topo) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 8px 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--borda) 70%, transparent);
}
.topo h1 { flex: 1; font-size: 1.15rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo #btnVoltar { margin-left: -8px; }

.logo {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #14b8a6, #0f766e);
  color: #fff;
}
.logo .ic { width: 20px; height: 20px; }
.logo.grande { width: 72px; height: 72px; border-radius: 22px; }
.logo.grande .ic { width: 40px; height: 40px; }

.btn-icone {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--texto);
}
.btn-icone:hover { background: var(--superficie-2); }
.btn-icone.claro { color: #fff; }
.btn-icone.claro:hover, .btn-icone.claro.ativo { background: rgba(255, 255, 255, .18); }
.btn-icone.claro.ativo { color: #fde047; }
.invisivel { visibility: hidden; }

.contador {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--marca);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 18px;
}

/* ===== Conteúdo ===== */
main { max-width: 720px; margin: 0 auto; padding: 16px; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--sombra);
}
.cartao.lista-linhas { padding: 6px; }

.secao { font-size: 1.02rem; font-weight: 700; margin: 22px 2px 10px; display: flex; align-items: center; gap: 8px; }
.secao .ic { width: 18px; height: 18px; color: var(--marca); }
.secao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.secao-topo .secao { margin-right: auto; }
.subsecao { font-size: .92rem; font-weight: 700; margin: 18px 0 8px; display: flex; align-items: center; gap: 6px; }
.subsecao .ic { width: 16px; height: 16px; }

.link {
  border: none;
  background: none;
  color: var(--marca);
  font-weight: 600;
  font-size: .92rem;
  padding: 4px 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.link .ic { width: 16px; height: 16px; }

/* ===== Botões ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 650;
  text-decoration: none;
  transition: transform .08s, background .15s;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn .ic { width: 20px; height: 20px; }
.btn.primario { background: var(--marca); color: #fff; }
.btn.primario:hover { background: var(--marca-forte); }
@media (prefers-color-scheme: dark) { .btn.primario { color: #062a26; } }
.btn.secundario { background: var(--superficie); border-color: var(--borda); color: var(--texto); }
.btn.secundario:hover { background: var(--superficie-2); }
.btn.fantasma { background: none; color: var(--suave); }
.btn.perigo-suave { background: var(--perigo-fundo); color: var(--perigo); }
.btn.grande { min-height: 56px; font-size: 1.02rem; }
.btn.largo { width: 100%; }
.btn.pequeno { min-height: 36px; padding: 6px 12px; font-size: .88rem; border-radius: 10px; }

/* ===== Formulários ===== */
.formulario { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--suave); }
.campo small { font-weight: 400; }
input, select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie-2);
  color: var(--texto);
  font-size: 1rem;
  font-weight: 400;
}
input:focus, select:focus { outline: 2px solid var(--marca); outline-offset: -1px; background: var(--superficie); }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.linha-form { display: flex; gap: 8px; }
.linha-form input { flex: 1; }
.linha-local { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--texto); font-weight: 500; }
.linha-local span { display: inline-flex; align-items: center; gap: 4px; }
.linha-local .ic { width: 16px; height: 16px; color: var(--bom); }

.pesquisa {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  margin-bottom: 12px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie);
  color: var(--suave);
}
.pesquisa input { border: none; background: none; padding-left: 0; }
.pesquisa input:focus { outline: none; }
.pesquisa:focus-within { outline: 2px solid var(--marca); outline-offset: -1px; }

.segmentado {
  display: flex;
  padding: 4px;
  gap: 4px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
}
.segmentado button {
  flex: 1;
  min-height: 38px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--suave);
  font-weight: 600;
  font-size: .9rem;
}
.segmentado button.ativo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.campo .segmentado { margin-bottom: 0; }

.stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie-2);
  overflow: hidden;
}
.stepper button {
  width: 46px;
  min-height: 44px;
  border: none;
  background: none;
  font-size: 1.3rem;
  color: var(--marca);
}
.stepper input { border: none; text-align: center; background: none; min-height: 44px; padding: 0; }
.stepper.pequeno { flex: none; }
.stepper.pequeno button { width: 36px; min-height: 36px; }
.stepper.pequeno span { min-width: 30px; text-align: center; font-weight: 700; font-size: .92rem; }

.barra-filtros { margin-bottom: 4px; }

/* ===== Linhas de lista ===== */
.lista-linhas { display: grid; }
.linha {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px;
  border: none;
  border-radius: 14px;
  background: none;
  color: inherit;
  text-align: left;
  text-decoration: none;
  font-weight: inherit;
}
button.linha:hover, a.linha:hover, label.linha:hover { background: var(--superficie-2); }
label.linha { cursor: pointer; }
.linha + .linha { box-shadow: 0 -1px 0 var(--borda); }
.linha:hover + .linha, .linha + .linha:hover { box-shadow: none; }
.linha > .ic { color: var(--suave); width: 18px; height: 18px; }
.linha.grande { min-height: 74px; }
.linha.perigo { color: var(--perigo); }
.linha-texto { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: start; }
.linha-texto strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.linha-texto small { color: var(--suave); font-size: .84rem; }
.linha-texto .chip { margin-top: 3px; }
.linha-valor { font-weight: 700; white-space: nowrap; text-align: right; display: grid; justify-items: end; }
.linha-valor small { font-size: .78rem; font-weight: 600; }
.compacta .linha { min-height: 48px; padding: 8px 6px; }

.avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--borda);
}
.avatar.letra {
  display: grid;
  place-items: center;
  border: none;
  font-weight: 700;
  background: hsl(var(--h) 65% 92%);
  color: hsl(var(--h) 55% 32%);
}
@media (prefers-color-scheme: dark) {
  .avatar.letra { background: hsl(var(--h) 35% 22%); color: hsl(var(--h) 70% 80%); }
}
.avatar.loja { border-radius: 50%; }
.avatar.icone { display: grid; place-items: center; border: none; background: var(--marca-suave); color: var(--marca); }
.avatar.grande { width: 76px; height: 76px; border-radius: 18px; font-size: 1.8rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 650;
  white-space: nowrap;
  background: var(--superficie-2);
  color: var(--suave);
  border: 1px solid var(--borda);
}
.chip .ic { width: 13px; height: 13px; }
.chip.bom { background: var(--bom-fundo); color: var(--bom); border-color: transparent; }
.chip.mau { background: var(--mau-fundo); color: var(--mau); border-color: transparent; }
.chip.claro { background: rgba(255, 255, 255, .18); color: #fff; border-color: transparent; }

/* ===== Início ===== */
.destaque {
  padding: 20px;
  border-radius: 22px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 55%, #134e4a 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(15, 118, 110, .28);
}
.destaque .rotulo { opacity: .85; font-size: .9rem; }
.valor-grande { display: block; font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 8px; }
.destaque-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .9rem; opacity: .95; }

.acoes-rapidas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acao {
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  text-align: left;
}
.acao .ic { width: 26px; height: 26px; color: var(--marca); margin-bottom: 6px; }
.acao strong { font-size: .95rem; }
.acao span { color: var(--suave); font-size: .8rem; }
.acao:active { transform: scale(.98); }

.barras { display: grid; gap: 12px; }
.barra-rotulo { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; margin-bottom: 5px; }
.barra-trilho { height: 8px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; }
.barra-trilho span { display: block; height: 100%; border-radius: 4px; background: var(--marca); }

.carrossel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
  gap: 10px;
  overflow-x: auto;
  margin: 0 -16px;
  padding: 2px 16px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel > * { scroll-snap-align: start; }

.boas-vindas { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 28px 8px; }
.boas-vindas h2 { font-size: 1.5rem; }
.boas-vindas > p { color: var(--suave); max-width: 420px; }
.boas-vindas .btn { width: 100%; max-width: 360px; }
.passos { display: grid; gap: 10px; width: 100%; max-width: 420px; margin: 6px 0; text-align: left; }
.passos div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
}
.passos b {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--marca-suave);
  color: var(--marca);
}

/* ===== Promoções ===== */
.grelha-promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cartao.promo {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  margin: 0;
  padding: 14px 10px 12px;
  text-align: center;
  color: inherit;
  font-weight: inherit;
}
.promo .avatar.grande { width: 64px; height: 64px; margin-bottom: 6px; }
.promo-nome { font-size: .9rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.promo small { font-size: .78rem; color: var(--suave); }
.promo small.mau { color: var(--mau); font-weight: 600; }
.promo-precos { display: flex; align-items: baseline; gap: 6px; }
.promo-precos strong { color: var(--perigo); font-size: 1.1rem; }
.promo-precos s { color: var(--suave); font-size: .82rem; }
.promo-precos.grande strong { font-size: 1.6rem; }
.promo-desconto {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 7px;
  border-radius: 8px;
  background: var(--perigo);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
}

/* ===== Comparar ===== */
.produto-comp { display: block; width: 100%; text-align: left; color: inherit; font-weight: inherit; }
.pc-topo { display: flex; align-items: center; gap: 12px; }
.pc-precos { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; scrollbar-width: none; }
.pc-precos::-webkit-scrollbar { display: none; }
.preco-loja {
  flex: none;
  display: grid;
  min-width: 96px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
}
.preco-loja small { color: var(--suave); font-size: .74rem; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preco-loja.melhor { background: var(--bom-fundo); border-color: transparent; }
.preco-loja.melhor strong { color: var(--bom); }
.preco-loja.pior strong { color: var(--mau); }
.loja-topo { display: flex; align-items: center; gap: 12px; }
.cartao > .subsecao.bom, .cartao > .subsecao.mau { margin-top: 16px; }

/* ===== Lista / análise ===== */
.recomendacao {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: var(--raio);
  background: var(--marca-suave);
  color: var(--texto);
}
.recomendacao .ic { color: var(--marca); margin-top: 1px; }
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.numero { padding: 12px 14px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); }
.folha .numero { background: var(--superficie-2); }
.numero span { display: block; color: var(--suave); font-size: .78rem; }
.numero strong { font-size: 1.2rem; }
.numero.bom strong { color: var(--bom); }
.numero.mau strong { color: var(--mau); }
.linha-botoes { display: flex; gap: 8px; padding: 8px; }
.linha-botoes .btn { flex: 1; }

.nota {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  border-radius: 12px;
  background: var(--superficie-2);
  font-size: .88rem;
}
.nota .ic { width: 18px; height: 18px; margin-top: 1px; }
.nota.bom { background: var(--bom-fundo); }
.nota.mau { background: var(--mau-fundo); }

.vazio { display: grid; justify-items: center; gap: 8px; padding: 36px 16px; text-align: center; color: var(--suave); }
.vazio .ic { color: var(--borda); }
.vazio strong { color: var(--texto); font-size: 1.05rem; }
.vazio p { max-width: 340px; }
.vazio .btn { margin-top: 8px; }

/* ===== Compra em curso ===== */
.acoes-scan { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; margin-bottom: 4px; }
#vista-compra .cartao .btn.largo { margin-top: 12px; }
.fatura {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-top: 12px;
  border-radius: 14px;
  background: var(--marca-suave);
}
.fatura > .ic { color: var(--marca); }
.fatura-texto { flex: 1; display: grid; min-width: 0; }
.fatura-texto small { color: var(--suave); font-size: .8rem; }
.fatura-total { display: grid; justify-items: end; text-align: right; }
.fatura-total small { display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; font-weight: 600; }
.fatura-total .ic { width: 14px; height: 14px; }
#compraLocal { margin-bottom: 0; color: var(--marca); font-weight: 600; }

.rodape-compra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px calc(12px + var(--seguro-baixo));
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .06);
}
.rodape-total { flex: 1; display: grid; }
.rodape-total span { color: var(--suave); font-size: .8rem; }
.rodape-total strong { font-size: 1.35rem; }
@media (min-width: 752px) {
  .rodape-compra { left: 50%; right: auto; width: 720px; transform: translateX(-50%); border-radius: 20px 20px 0 0; border: 1px solid var(--borda); }
}

.barra-rascunho { position: sticky; top: calc(var(--topo) + env(safe-area-inset-top, 0px)); z-index: 19; max-width: 720px; margin: 0 auto; padding: 8px 16px 0; }
.barra-rascunho button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 14px;
  background: var(--texto);
  color: var(--fundo);
  text-align: left;
  font-size: .88rem;
  box-shadow: var(--sombra-forte);
}
.barra-rascunho span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-rascunho em { font-style: normal; font-weight: 700; color: #5eead4; }
@media (prefers-color-scheme: dark) { .barra-rascunho em { color: var(--marca-forte); filter: brightness(.6); } }

/* ===== Navegação inferior ===== */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: calc(var(--nav) + var(--seguro-baixo));
  padding-bottom: var(--seguro-baixo);
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--borda);
}
body.em-compra .nav { display: none; }
@media (min-width: 752px) {
  .nav { left: 50%; right: auto; width: 720px; transform: translateX(-50%); border: 1px solid var(--borda); border-radius: 22px 22px 0 0; }
}
.nav-item {
  display: grid;
  justify-items: center;
  gap: 3px;
  height: 100%;
  padding-top: 10px;
  border: none;
  background: none;
  color: var(--suave);
  font-size: .7rem;
  font-weight: 600;
}
.nav-item.ativo { color: var(--marca); }
.nav-fab {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-top: -26px;
  border: 4px solid var(--fundo);
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #0f766e);
  color: #fff;
  box-shadow: 0 8px 22px rgba(15, 118, 110, .45);
}
.nav-fab .ic { width: 26px; height: 26px; }
.nav-fab:active { transform: scale(.95); }

/* ===== Folhas (dialog) ===== */
dialog { border: none; padding: 0; color: var(--texto); }
.folha {
  width: 100%;
  max-width: min(560px, 100%);
  max-height: 92vh;
  margin: auto auto 0;
  border-radius: 24px 24px 0 0;
  background: var(--superficie);
  box-shadow: var(--sombra-forte);
  overflow: hidden;
}
.folha[open] { animation: subir .22s cubic-bezier(.2, .8, .3, 1); }
.folha::backdrop { background: rgba(5, 15, 12, .5); }
#folhaConteudo { max-height: 92vh; overflow-y: auto; padding: 0 20px calc(20px + var(--seguro-baixo)); overscroll-behavior: contain; }
@media (min-width: 640px) {
  .folha { margin: auto; border-radius: 24px; }
  .folha-pega { display: none; }
}
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }

.folha-pega { width: 40px; height: 5px; border-radius: 3px; background: var(--borda); margin: 10px auto 0; }
.folha-topo {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0 12px;
  background: var(--superficie);
}
.folha-topo h2 { font-size: 1.2rem; }
.folha-topo p { color: var(--suave); font-size: .88rem; margin-top: 2px; }
.folha-topo .btn-icone { margin: -6px -10px 0 0; }
.botoes-folha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.botoes-folha .btn { flex: 1 1 auto; }
.botoes-folha .btn.primario { flex-grow: 2; }

.produto-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.produto-topo-texto { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.produto-topo-texto small { color: var(--suave); font-size: .84rem; }
.ean { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; }
.rotulo { color: var(--suave); font-size: .82rem; }
.valor-medio { font-size: 1.7rem; font-weight: 800; color: var(--bom); line-height: 1.1; }

.comparativo { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--superficie-2); font-size: .9rem; }
.comparativo div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.comparativo .ic { width: 16px; height: 16px; }
.comparativo .subtotal { justify-content: space-between; padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--borda); }

.escolha-produto { display: flex; gap: 8px; align-items: center; }
.escolha-produto .linha { flex: 1; border: 1px solid var(--borda); background: var(--superficie-2); min-height: 56px; }
.escolha-produto .btn-icone { width: 56px; height: 56px; border-radius: 14px; background: var(--marca-suave); color: var(--marca); }

.grafico { padding: 12px; border-radius: 14px; background: var(--superficie-2); color: var(--marca); }
.sparkline { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-legenda { display: flex; justify-content: space-between; color: var(--suave); font-size: .75rem; margin-top: 6px; }

.carregando { display: grid; place-items: center; padding: 40px; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--borda); border-top-color: var(--marca); border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.rodape-info { color: var(--suave); font-size: .8rem; text-align: center; margin: 20px 0; line-height: 1.6; }

/* ===== Leitor (câmara) ===== */
.scanner {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  background: #000;
  color: #fff;
}
.scanner[open] { display: flex; flex-direction: column; }
.scanner::backdrop { background: #000; }
.scanner-topo {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px;
  text-align: center;
}
.scanner-area { flex: 1; display: grid; place-items: center; overflow: hidden; position: relative; }
.scanner-video { width: 100%; max-width: 640px; }
.scanner-video video { border-radius: 0; }
.scanner-erro {
  position: absolute;
  inset: auto 20px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .1);
  text-align: center;
  line-height: 1.5;
}
.scanner-base { padding: 16px 16px calc(16px + var(--seguro-baixo)); display: grid; gap: 12px; text-align: center; }
.scanner-base p { color: rgba(255, 255, 255, .8); font-size: .92rem; }
.scanner-manual { display: flex; gap: 8px; width: 100%; max-width: 480px; margin: 0 auto; }
.scanner-manual input { background: rgba(255, 255, 255, .12); border-color: transparent; color: #fff; }
.scanner-manual input::placeholder { color: rgba(255, 255, 255, .55); }

/* ===== Aviso (toast) ===== */
.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav) + var(--seguro-baixo) + 14px);
  z-index: 100;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--texto);
  color: var(--fundo);
  font-size: .9rem;
  font-weight: 500;
  box-shadow: var(--sombra-forte);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s, opacity .25s;
}
.aviso.visivel { transform: translate(-50%, 0); opacity: 1; }
body.em-compra .aviso { bottom: calc(96px + var(--seguro-baixo)); }

@media (max-width: 380px) {
  .campos-2 { grid-template-columns: 1fr; }
  .valor-grande { font-size: 2rem; }
}

/* ===== Talão por foto e sugestões ===== */
.botoes-talao { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin-top: 12px; }
#compraDica .nota { margin-bottom: 0; }
#compraDica .link { margin-top: 8px; }

.acao.destaque-acao { grid-column: 1 / -1; background: var(--marca-suave); border-color: transparent; }
.acao.destaque-acao strong { font-size: 1.02rem; }

.talao-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}
.talao-foto { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--superficie-2); }
.talao-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.talao-foto .btn-icone {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
}
.talao-foto .btn-icone .ic { width: 16px; height: 16px; }
.talao-foto span {
  position: absolute;
  left: 6px;
  bottom: 6px;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  line-height: 22px;
}
.talao-vazio {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 26px;
  border: 2px dashed var(--borda);
  border-radius: 14px;
  color: var(--suave);
}
.talao-vazio .ic { color: var(--borda); }
.folha .btn.grande.largo { margin-top: 10px; }

.sugestao .loja-topo { margin-bottom: 4px; }
.sugestao .btn.largo { margin-top: 8px; }
.pequeno { font-size: .82rem; padding: 4px 0; }

/* ===== Janela de confirmação ===== */
.btn.perigo { background: #dc2626; color: #fff; }
.btn.perigo:hover { filter: brightness(.92); }
.confirmar {
  width: calc(100% - 32px);
  max-width: 380px;
  border-radius: 24px;
  background: var(--superficie);
  box-shadow: var(--sombra-forte);
}
.confirmar[open] { animation: aparecer .18s cubic-bezier(.2, .8, .3, 1); }
.confirmar::backdrop { background: rgba(5, 15, 12, .55); }
#confirmarConteudo { display: grid; justify-items: center; gap: 10px; padding: 26px 20px 20px; text-align: center; }
#confirmarConteudo h2 { font-size: 1.15rem; }
#confirmarConteudo p { color: var(--suave); font-size: .94rem; }
.confirmar-icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--marca-suave);
  color: var(--marca);
}
.confirmar-icone.perigo { background: var(--perigo-fundo); color: var(--perigo); }
.confirmar-icone .ic { width: 26px; height: 26px; }
.confirmar-botoes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; width: 100%; margin-top: 8px; }
@keyframes aparecer { from { transform: scale(.94); opacity: 0; } }

/* ===== Orçamento e evolução dos preços ===== */
.valor-grande small { font-size: 1rem; font-weight: 600; opacity: .8; letter-spacing: 0; }
.orcamento { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .22); overflow: hidden; margin: 2px 0 8px; }
.orcamento span { display: block; height: 100%; border-radius: 4px; background: #fff; transition: width .3s; }
.orcamento.perto-limite span { background: #fde68a; }
.orcamento.excedido span { background: #fdba74; }
.orcamento-texto { margin: 0 0 6px; font-size: .88rem; opacity: .95; }
.orcamento-texto .ic { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; }
button.chip.claro { cursor: pointer; font: inherit; font-size: .76rem; font-weight: 650; }
.avatar.icone.mau { background: var(--mau-fundo); color: var(--mau); }
.evolucao-topo { display: flex; align-items: center; gap: 14px; padding: 4px 4px 10px; }
.evolucao-topo > strong { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.evolucao-topo > span { display: grid; gap: 2px; font-size: .9rem; }
.evolucao-topo small { color: var(--suave); font-size: .8rem; }
.linha-valor.mau { color: var(--mau); }
.linha-valor.bom { color: var(--bom); }

/* ===== Lista automática e trocas ===== */
.aviso-reposicao { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.aviso-reposicao:active { transform: scale(.99); }
.aviso-reposicao .linha-texto small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Marcas ===== */
.suave-claro { opacity: .75; font-size: .8rem; }
.marca-item { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.marca-item small { display: block; color: var(--suave); font-size: .8rem; }
.opcoes-marca { display: flex; flex-wrap: wrap; gap: 6px; }
.opcoes-marca .chip { cursor: pointer; font: inherit; font-size: .8rem; font-weight: 650; padding: 6px 12px; }

/* ===== Janelas sem barras de rolagem =====
   Com uma janela aberta, a página por trás deixa de rolar e as barras ficam escondidas
   (o conteúdo continua a rolar com o dedo, a roda do rato ou o teclado). */
html:has(dialog[open]) { overflow: hidden; }
dialog, dialog * { scrollbar-width: none; }
dialog::-webkit-scrollbar, dialog *::-webkit-scrollbar { display: none; }

/* ===== Ofertas dos folhetos ===== */
.folheto .loja-topo { margin-bottom: 8px; }
.oferta .linha-texto strong { white-space: normal; }
.oferta .linha-valor s { color: var(--suave); }
.oferta .btn-icone { flex: none; }
.promo .chip, .grelha-promos .chip { justify-self: start; }