/* A ROTA — telemóvel primeiro.
   ⚠️ Regras da casa: 16px mínimo, SEM modo escuro, ecrã inteiro. */
:root {
  --roxo: #9727B3;      /* cores da marca */
  --laranja: #EF892E;
  --verde: #1B7F3B;
  --vermelho: #C0261C;
  --tinta: #1a1a1a;
  --cinza: #6b6b6b;
  --risca: #e3e3e3;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--tinta);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 0 0 3rem;
}
header {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .9rem 1rem; background: var(--roxo); color: #fff;
  position: sticky; top: 0; z-index: 5;
}
h1 { margin: 0; font-size: 1.25rem; letter-spacing: .02em; }
.estado { font-size: .85rem; opacity: .85; margin-left: auto; }

form#picar { display: flex; gap: .5rem; padding: 1rem; border-bottom: 1px solid var(--risca); }
#codigo {
  flex: 1; font-size: 1.15rem; padding: .8rem .9rem;
  border: 2px solid var(--risca); border-radius: 10px; min-width: 0;
}
#codigo:focus { outline: none; border-color: var(--roxo); }
form#picar button {
  font-size: 1rem; padding: .8rem 1.2rem; border: 0; border-radius: 10px;
  background: var(--roxo); color: #fff; font-weight: 600;
}

main { padding: 1rem; }
section { margin-bottom: 1.25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .4rem; line-height: 1.3; }
h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
     color: var(--cinza); margin: 0 0 .5rem; }

.linha-custo { display: flex; flex-wrap: wrap; gap: .9rem; margin: 0; color: var(--cinza); font-size: .95rem; }
.linha-custo b { color: var(--tinta); }

.avisos:empty { display: none; }
.aviso {
  display: block; padding: .6rem .8rem; border-radius: 8px; margin-top: .5rem;
  font-size: .95rem; border-left: 4px solid;
}
.aviso.mau { background: #fdeceb; border-color: var(--vermelho); color: #7a1712; }
.aviso.atencao { background: #fff5e8; border-color: var(--laranja); color: #7a4610; }

.asin { font-family: ui-monospace, monospace; font-weight: 600; }
.etiqueta {
  font-size: .75rem; padding: .15rem .5rem; border-radius: 99px;
  background: #efe6f3; color: var(--roxo); margin-left: .4rem;
}
.mercado, .ficha, .buybox { margin: .35rem 0; color: var(--cinza); font-size: .95rem; }
.mercado span + span::before { content: " · "; }
.buybox b { color: var(--tinta); }

.controlo { display: flex; gap: .75rem; margin-bottom: 1rem; }
.controlo label { flex: 1; font-size: .85rem; color: var(--cinza); }
.controlo input {
  display: block; width: 100%; font-size: 1.15rem; padding: .7rem;
  border: 2px solid var(--risca); border-radius: 10px; margin-top: .25rem;
}
.controlo input:focus { outline: none; border-color: var(--roxo); }

/* ⭐ O NÚMERO GRANDE É O EURO. A percentagem vai em letra pequena. */
.formato {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .25rem .8rem; padding: .8rem 0; border-top: 1px solid var(--risca);
}
.formato .qt { font-weight: 600; }
.formato .preco { color: var(--cinza); font-size: .95rem; }
.formato .ganho { font-size: 1.5rem; font-weight: 700; text-align: right; }
.formato .ganho.bom { color: var(--verde); }
.formato .ganho.mau { color: var(--vermelho); }
.formato .detalhe { grid-column: 1 / -1; font-size: .85rem; color: var(--cinza); }
.formato.melhor { background: #f4fbf6; margin: 0 -1rem; padding: .8rem 1rem; }

.publicar {
  width: 100%; font-size: 1.1rem; padding: 1rem; border: 0; border-radius: 12px;
  background: var(--roxo); color: #fff; font-weight: 700; margin-top: .5rem;
}
.publicar[disabled] { background: #d5d5d5; color: #7a7a7a; }

/* o preço-alvo para a margem pedida, ao lado do que se ganha ao preço de lá */
.alvo { display: inline-block; margin-left: .4rem; padding: .1rem .45rem;
        border-radius: 6px; background: #f3eef6; color: var(--roxo); font-size: .8rem; }

/* ── A CÂMARA ─────────────────────────────────────────────────────────────── */
.picagem { padding: 1rem 1rem 0; }
button.camara {
  width: 100%; font-size: 1.25rem; padding: 1.1rem; border: 0; border-radius: 12px;
  background: var(--roxo); color: #fff; font-weight: 600; cursor: pointer;
  /* ⚠️ Alvo grande de propósito: isto carrega-se com a mão ocupada, no armazém. */
  min-height: 60px;
}
button.camara:active { background: #7d1f95; }
.picagem form#picar { padding: .75rem 0 1rem; border-bottom: 1px solid var(--risca); }

.visor {
  position: fixed; inset: 0; z-index: 50; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.visor[hidden] { display: none; }
.visor video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
/* A mira: mostra onde apontar. Um retângulo largo e baixo, que é a forma de um código. */
.visor .mira {
  position: relative; width: min(84vw, 380px); height: 130px;
  border: 3px solid rgba(255,255,255,.9); border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.45);
}
.visor p {
  position: absolute; bottom: 7rem; left: 1rem; right: 1rem; text-align: center;
  color: #fff; font-size: 1.05rem; line-height: 1.5; margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.visor button {
  position: absolute; bottom: 2rem; font-size: 1.1rem; padding: .9rem 2.2rem;
  border: 0; border-radius: 10px; background: #fff; color: var(--tinta); font-weight: 600;
}

/* ── CUSTO E PESO À MÃO ───────────────────────────────────────────────────── */
.entrada {
  padding: 1rem; border-bottom: 1px solid var(--risca);
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem;
}
.entrada label { display: flex; flex-direction: column; font-size: .9rem; color: var(--cinza); position: relative; }
.entrada input {
  font-size: 1.35rem; padding: .7rem 2rem .7rem .7rem; margin-top: .25rem;
  border: 2px solid var(--risca); border-radius: 10px; width: 100%;
  font-variant-numeric: tabular-nums;
}
.entrada input:focus { border-color: var(--roxo); outline: none; }
.entrada .unidade { position: absolute; right: .7rem; bottom: .85rem; color: var(--cinza); font-size: 1rem; }
.entrada .donde { grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--cinza); }

.aviso.novo { background: #fff6e8; border-color: var(--laranja); }
button.escolha {
  display: block; width: 100%; text-align: left; font-size: 1.05rem; padding: .9rem;
  margin-bottom: .5rem; border: 2px solid var(--risca); border-radius: 10px; background: #fff;
}
.espera { padding: 1rem; color: var(--cinza); }
.nome-amazon { font-size: .95rem; color: var(--cinza); margin: .25rem 0 .5rem; line-height: 1.4; }

/* A escada de vendedores, em vez de só o mais barato. */
.escada { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.escada .degrau {
  font-size: .95rem; padding: .3rem .6rem; border-radius: 999px;
  background: #f2f2f2; font-variant-numeric: tabular-nums;
}
.escada .degrau i { font-style: normal; color: var(--cinza); font-size: .85rem; }
.escada .degrau.buybox { background: #e8f4ec; border: 1px solid var(--verde); }

/* ── FOTOS, LINKS E CANDIDATOS ────────────────────────────────────────────── */
/* ⚠️ O cabeçalho tapava o conteúdo no iPhone: a barra de estado do sistema fica por cima
   quando o `viewport-fit=cover` está ligado. O `env(safe-area-inset-top)` é o que a afasta. */
header {
  padding-top: calc(.9rem + env(safe-area-inset-top, 0px));
  padding-left: calc(1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
}
/* ⚠️ E o header é `sticky`: sem isto, o conteúdo passava-lhe por baixo ao rolar. */
.produto, .entrada, .amazon, .conta { scroll-margin-top: 5rem; }

.cabeca { display: flex; gap: .9rem; align-items: flex-start; }
.cabeca > div { flex: 1; min-width: 0; }
.foto {
  width: 84px; height: 84px; object-fit: contain; flex: none;
  background: #f6f6f6; border-radius: 10px; border: 1px solid var(--risca);
}
.foto[hidden] { display: none; }
.ligacao {
  display: inline-block; margin-top: .35rem; font-size: .95rem;
  color: var(--roxo); text-decoration: underline;
}
.ligacao.forte { font-weight: 600; }
.ligacao[hidden] { display: none; }

/* Os candidatos, quando a Amazon devolve várias e nenhuma casa sozinha. */
.candidatos { margin-top: .75rem; }
.candidatos .titulo { font-size: .95rem; color: var(--cinza); margin: 0 0 .5rem; }
.candidato {
  display: flex; gap: .75rem; align-items: center; width: 100%; text-align: left;
  padding: .6rem; margin-bottom: .5rem; border: 2px solid var(--risca);
  border-radius: 10px; background: #fff; font: inherit;
}
.candidato img { width: 54px; height: 54px; object-fit: contain; flex: none; background: #f6f6f6; border-radius: 8px; }
.candidato .nome { font-size: .95rem; line-height: 1.35; }
.candidato .asin { font-size: .8rem; color: var(--cinza); }

/* ⚠️ Um `span` vazio com fundo e padding desenha-se como uma bolinha solta no ecrã.
   Apareceu no iPhone do Silva e não queria dizer nada. Vazio não se mostra. */
.asin:empty, .etiqueta:empty, .nome-amazon:empty, .buybox:empty, .mercado:empty { display: none; }
/* O aviso base tinha a barra da esquerda transparente e fundo nenhum, portanto lia-se como
   texto solto. Um aviso tem de parecer um aviso. */
.aviso { background: #fff8ec; border-color: var(--laranja); color: #6b4310; }

/* ⚠️ A versão, para se poder confirmar que o telemóvel tem a última. Discreta, mas visível:
   sem ela, "corrigi" e "continua igual" são uma discussão sem forma de a resolver. */
.versao { text-align: center; color: #b0b0b0; font-size: .8rem; padding: 1.5rem 0 .5rem; margin: 0; }

/* A alternativa por fotografia, para quando o vídeo não consegue focar. */
.foto-alternativa {
  display: block; text-align: center; margin-top: .6rem; padding: .7rem;
  font-size: 1.05rem; color: var(--roxo); border: 2px dashed var(--risca);
  border-radius: 10px; cursor: pointer;
}

/* O código lido, para conferir contra a embalagem. */
.lido { font-size: .9rem; color: var(--cinza); margin: .35rem 0 0; font-variant-numeric: tabular-nums; }
.lido b { color: var(--tinta); letter-spacing: .03em; }
.lido button {
  margin-left: .5rem; font-size: .85rem; padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid var(--risca); background: #fff; color: var(--roxo);
}

/* A lanterna, no canto do visor. Só aparece quando o aparelho sabe acender. */
.visor .lanterna {
  position: absolute; bottom: 2rem; right: 1.25rem; left: auto;
  font-size: 1rem; padding: .8rem 1.2rem; background: rgba(255,255,255,.9);
}
.visor .lanterna[hidden] { display: none; }
.visor #fechar-camara { left: 1.25rem; right: auto; }