/* Vitrine da representante — mobile primeiro. Ela monta maleta no celular. */
/* 🎨 PALETA OFICIAL DA ANELA — não inventar cor aqui.
   Fonte única: `Projeto Anela/_CEREBRO/OFICINA-LP-REPRESENTANTE.md` §"a paleta oficial é esta",
   a mesma da landing page representanteanela.com.br. Antes desta troca (21/09) a vitrine usava
   `--marca: #8a6d3b` — um dourado amarronzado que NÃO é da marca; o dono viu no celular e
   cortou: *"priorizar a nossa cor terracota, você está com uma cor meio cinza, nossa cor não
   é essa"*. A rep abre esta tela logo depois da LP: cor diferente lê como "outro sistema".
     🧱 #873510 terracota — destaque, CTA, título      🤍 #EEEBE2 creme — fundo
     🫒 #484325 oliva     — tinta/texto                🪵 #9B8B72 taupe · 🏜️ #DBBEA0 nude — apoio */
:root {
  --fundo: #eeebe2;           /* creme — o fundo da marca */
  --papel: #fbfaf7;           /* creme clareado: card e rodapé destacam do fundo sem virar branco */
  --tinta: #484325;           /* oliva */
  --suave: #9b8b72;           /* taupe — texto de apoio */
  --linha: #ddd6c7;           /* creme escurecido: borda que casa com o fundo */
  --marca: #873510;           /* TERRACOTA — a cor da casa */
  --marca-escura: #6b290c;    /* terracota fechada, pra hover/ativo */
  --nude: #dbbea0;            /* apoio quente (placeholder de foto, realces suaves) */
  --erro: #8c1725; --erro-fundo: #f7ebe9; --ok: #484325;
  --raio: 12px; --sombra: 0 1px 3px rgba(72,67,37,.10);
}
* { box-sizing: border-box; }

/* 🩸 A GUARDA DO `hidden` — bug de produção de 21/09, achado pelo DONO no celular:
   *"tá tudo escuro"*.
   O atributo `hidden` do HTML não é mágica: ele funciona porque a folha de estilo do
   NAVEGADOR aplica `display: none`. Qualquer `display:` escrito por nós vence essa regra,
   porque estilo de autor tem mais peso que estilo de agente. Os overlays novos (o carrinho
   e o visualizador de foto) nasceram com `display: flex` na sua própria regra — então
   `hidden` no HTML e `.hidden = true` no JS não escondiam NADA, e o fundo quase opaco do
   zoom (`rgba(20,16,14,.92)`, z-index 40) cobria a tela inteira desde o primeiro carregamento.
   Elemento no DOM ≠ elemento na tela, e aqui foi o contrário: escondido no DOM, visível na tela.
   `!important` aqui é proposital e é o uso legítimo dele: `[hidden]` é uma AFIRMAÇÃO de
   estado, não uma sugestão de estilo — nenhuma regra de layout pode ganhar dela.
   ⚠️ Isto é o furo que as DUAS auditorias nomearam no mesmo dia: não existe teste de tela
   neste repo (o Codex provou apagando a renderização do carrinho — 406/406 continuaram
   verdes). Nenhum teste de servidor pegaria isto. A rede que falta é de front. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }

/* ── login ─────────────────────────────────────────── */
.tela-login { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px; }
.cartao {
  width: 100%; max-width: 380px; background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 28px 24px 24px; box-shadow: var(--sombra);
}
.marca { text-align: center; margin-bottom: 24px; }
.marca h1 { font-size: 32px; color: var(--marca); letter-spacing: .06em; }
.marca p { margin: 4px 0 0; color: var(--suave); font-size: 14px; }
label { display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 500; }
label small { font-weight: 400; color: var(--suave); }
input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--linha);
  border-radius: 8px; background: var(--papel); color: var(--tinta);
}
input:focus { outline: 2px solid var(--marca); outline-offset: 1px; border-color: var(--marca); }
.principal {
  width: 100%; margin-top: 22px; padding: 13px; border: 0; border-radius: 8px;
  background: var(--marca); color: var(--papel); font-weight: 600;
}
.principal:hover { background: var(--marca-escura); }
.principal:disabled { opacity: .55; cursor: progress; }
.link { background: none; border: 0; color: var(--marca); text-decoration: underline; padding: 0; }
.troca { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--suave); }
.explica { margin: 0 0 4px; font-size: 14px; color: var(--suave); }
.aviso { margin: 12px 0 0; font-size: 14px; min-height: 1.2em; }
.aviso.ruim { color: var(--erro); background: var(--erro-fundo); padding: 10px 12px; border-radius: 8px; }
.aviso.bom { color: var(--ok); }

/* ── vitrine ───────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 10; background: var(--papel);
  border-bottom: 1px solid var(--linha); padding: 10px 14px;
}
.topo-linha { display: flex; gap: 10px; align-items: center; }
.topo h1 { font-size: 19px; color: var(--marca); }
.topo .sair { margin-left: auto; font-size: 14px; }
.filtros { display: flex; gap: 8px; margin-top: 10px; }
.filtros input { flex: 1; }
.filtros select { padding: 10px; border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); max-width: 42%; }

.faixa { padding: 10px 14px; font-size: 14px; text-align: center; }
.faixa.atencao { background: #fdf6e3; color: #7a5c14; }
.faixa.critico { background: var(--erro-fundo); color: var(--erro); font-weight: 500; }

.grade {
  display: grid; gap: 12px; padding: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.peca {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column;
}
/* aspect-ratio reserva o espaço ANTES da foto chegar — sem pulo de layout */
.peca img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--nude); display: block; }
.peca .corpo { padding: 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.peca .nome { font-size: 14px; line-height: 1.35; }
.peca .preco { font-weight: 600; color: var(--marca); }
.peca button {
  margin-top: auto; padding: 9px; border: 1px solid var(--marca); border-radius: 8px;
  background: var(--papel); color: var(--marca); font-weight: 600; font-size: 14px;
}
.peca button:hover { background: var(--marca); color: var(--papel); }
.peca button[disabled] { border-color: var(--linha); color: var(--suave); background: #f7f4f1; cursor: default; }
.peca.escolhida { border-color: var(--marca); }

.paginacao { display: flex; gap: 12px; justify-content: center; align-items: center; padding: 4px 14px 100px; }
.paginacao button { padding: 9px 16px; border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); }
.paginacao button[disabled] { opacity: .4; cursor: default; }
.vazio { padding: 48px 20px; text-align: center; color: var(--suave); }

/* barra da maleta — fixa no rodapé, é o estado dela o tempo todo */
.maleta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--papel); border-top: 1px solid var(--linha);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 12px; align-items: center;
  box-shadow: 0 -2px 10px rgba(42,35,32,.06);
}
/* 🩸 AFFORDANCE — 21/09: era `background: none; border: 0`, ou seja texto puro. O carrinho
   funcionava e ninguém achava (o dono testou no celular e disse "não tem carrinho nenhum").
   Botão que não parece botão é função escondida. Agora tem moldura, fundo e seta. */
.maleta .resumo {
  flex: 1; font: inherit; text-align: left; color: inherit;
  background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px;
  padding: 7px 10px; margin: 0; cursor: pointer; line-height: 1.3; font-size: 13px;
}
.maleta .resumo-ver {
  display: block; color: var(--marca-escura); font-weight: 600; font-size: 13px;
}
.maleta .resumo-numeros { display: block; }
.maleta .resumo:hover { color: var(--marca-escura); border-color: var(--marca); }
.maleta .resumo:active { background: var(--linha); }
.maleta .resumo:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 4px; }
.maleta .resumo b { font-size: 16px; }
.maleta .limite { color: var(--suave); font-size: 13px; }
.maleta .limite.estourou { color: var(--erro); }
.maleta button:not(.resumo) { padding: 11px 18px; border: 0; border-radius: 8px; background: var(--marca); color: var(--papel); font-weight: 600; }
.maleta button[disabled] { background: #cfc5bb; cursor: default; }
.bloqueio { padding: 14px; margin: 14px; border-radius: var(--raio); background: var(--erro-fundo); color: var(--erro); font-size: 14px; }

/* ── carrinho (visão da maleta) ───────────────────────
   Abre por cima da grade quando ela toca o resumo do rodapé (achado do dono 21/09:
   não tinha jeito de ver/tirar peça sem reencontrar o card na grade de ~2.900 itens). */
body.trava-scroll { overflow: hidden; }
.carrinho-fundo { position: fixed; inset: 0; background: rgba(42, 35, 32, .45); z-index: 29; }
.carrinho {
  position: fixed; inset: 0; z-index: 30; background: var(--fundo);
  display: flex; flex-direction: column; max-width: 480px; margin: 0 auto;
}
@media (min-width: 520px) {
  .carrinho { top: 5vh; bottom: 5vh; border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
}
.carrinho-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--linha); background: var(--papel);
}
.carrinho-cabeca h2 { font-size: 18px; }
.carrinho-lista { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.carrinho-lista .vazio { padding: 40px 16px; }
.carrinho-erro { margin: 10px 14px 0; padding: 10px 12px; border-radius: 8px; background: var(--erro-fundo); color: var(--erro); font-size: 14px; }
/* mesmo slot, usado pra sucesso do "Enviar maleta" (21/09 — sem alert() nativo) */
.carrinho-erro.sucesso { background: #eaf3ee; color: var(--ok); }

.item-carrinho {
  display: flex; gap: 10px; background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 10px;
}
.item-carrinho img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--nude); flex-shrink: 0; }
.item-carrinho .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.item-carrinho .nome { font-size: 14px; line-height: 1.3; }
.item-carrinho .qtd { font-size: 12px; color: var(--suave); }
.item-carrinho .preco { font-size: 13px; color: var(--marca); font-weight: 600; }
.item-carrinho .preco.mudou { color: var(--suave); font-weight: 500; }
.item-carrinho .aviso-saiu { font-size: 12px; color: var(--erro); font-weight: 600; }
.item-carrinho .remover {
  align-self: flex-start; margin-top: 2px; padding: 7px 12px; border: 1px solid var(--erro);
  border-radius: 8px; background: var(--papel); color: var(--erro); font-size: 13px; font-weight: 600;
}
.item-carrinho .remover:hover { background: var(--erro); color: var(--papel); }
.item-carrinho .remover[disabled] { opacity: .55; cursor: progress; }

.carrinho-rodape {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha);
  background: var(--papel); font-size: 14px; line-height: 1.35;
}
.carrinho-rodape b { font-size: 16px; }

/* ── visualizador de foto (lightbox) ──────────────────────────
   Semijoia se vende pelo detalhe (acabamento, pedra, fecho) — o quadrado da grade
   e do carrinho CORTA isso pra caber (`object-fit: cover`). Aqui é o oposto:
   `contain`, foto inteira, sem cortar. Fica por CIMA do carrinho (z-index maior),
   e fechar não mexe no que estava aberto por baixo. */
.peca img.tem-foto, .item-carrinho img.tem-foto { cursor: zoom-in; }
.peca img.tem-foto:focus-visible, .item-carrinho img.tem-foto:focus-visible {
  outline: 2px solid var(--marca); outline-offset: 2px;
}

.foto {
  position: fixed; inset: 0; z-index: 40; background: rgba(20, 16, 14, .92);
  display: flex; flex-direction: column;
}
.foto-fechar {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; z-index: 1;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: var(--papel); font-size: 18px; line-height: 1;
}
.foto-fechar:hover { background: rgba(255, 255, 255, .3); }
.foto-fechar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.foto-corpo { flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px; }
.foto-corpo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.foto-corpo img[hidden] { display: none; }
.foto-falhou { color: var(--papel); text-align: center; padding: 0 24px; font-size: 14px; }
.foto-legenda {
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); text-align: center; color: var(--papel);
}
.foto-legenda b { display: block; font-size: 15px; font-weight: 600; }
.foto-legenda span { font-size: 14px; opacity: .85; }

/* painel admin STANDALONE removido 24-25/08/2026 (consolidado no painel-maleta) —
   ver o histórico do git se precisar recuperar o CSS. */