/* PIRÂMIDE OLFATIVA.
 *
 * Só o que é PRÓPRIO dela: a caixa de 540px, as três camadas com cor por
 * nível, os acordes com a paleta de famílias e a lista de notas.
 *
 * O cabeçalho, o corpo, o rodapé, o título e o botão de fechar são as mesmas
 * classes `modal-*` do historico.css — as duas vivem no mesmo modal e nos
 * mesmos três lugares. Antes este arquivo redefinia essas classes com os nomes
 * do modal que existia dentro do ofertas.html (`.piramide-corpo`,
 * `.piramide-fechar`), que não existe mais: o CSS tinha 14 seletores mortos e
 * a pirâmide era estilizada por acaso pelo historico.css.
 *
 * A paleta de acordes (37 famílias) veio do radar anterior: a cor é o dado, e
 * é o que faz a leitura da pirâmide ser imediata em vez de uma lista de caixas
 * cinzas. */

/* A caixa da pirâmide. Precisa declarar TUDO que a torna uma caixa: ela não
   é `.hist-modal`, e o CSS do histórico não se aplica a ela. Antes só tinha a
   largura, e o fundo vinha do nada — a caixa ficava transparente e o conteúdo
   aparecia direto sobre a página escurecida. */
.pir-modal{
  background:#fff;color:var(--hist-texto);
  border:1px solid var(--hist-borda);border-radius:20px;
  width:100%;max-width:540px;max-height:90vh;
  box-shadow:var(--hist-sombra);
  overflow:hidden;display:flex;flex-direction:column;
  font-family:var(--hist-sans)}

/* O título da ficha usa as classes `modal-produto` / `modal-nome` do
   historico.css: as duas dividem o mesmo modal. ── */

/* ── Acordes: a cor é o dado ───────────────────────────────────────────── */
.acordes{display:flex;flex-wrap:wrap;gap:.4rem}
.acorde{display:inline-flex;align-items:center;gap:.35rem;padding:.34rem .78rem;border-radius:9999px;
  font-size:.75rem;font-weight:700;text-transform:capitalize;letter-spacing:.01em;color:#fff;
  box-shadow:0 1px 3px rgba(38,50,41,.12)}
.acorde svg{width:14px;height:14px;flex-shrink:0;opacity:.9}
/* Texto branco sobre as cores da paleta (`.acorde--*` em `acordes.css`):
   todas foram escolhidas escuras o bastante para manter contraste ≥4.5. O
   acorde sem correspondência cai no verde da casa — o fundo base do
   `.acorde` —, que também passa. */

/* ── As três camadas ───────────────────────────────────────────────────── */
.camadas{display:flex;flex-direction:column}
.camada{display:flex;gap:.9rem;align-items:stretch}
.camada-marca{display:flex;flex-direction:column;align-items:center;width:32px;flex-shrink:0}
.camada-ponto{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;border:1.5px solid;flex-shrink:0}
.camada-ponto svg{width:15px;height:15px}
.camada-linha{width:2px;flex:1;min-height:18px;margin:3px 0}
/* Cada camada tem o SEU fundo, como no print: saída em creme, coração em bege
   rosado, fundo em cinza-esverdeado. Eram as três iguais, e a cor é o que faz
   a leitura dos níveis ser imediata — a mesma razão pela qual os acordes têm
   paleta própria. */
.camada-corpo{flex:1;padding:.8rem 1rem;border-radius:var(--hist-md,12px);
  border:1px solid;margin-bottom:.8rem}
.camada-corpo.c1{background:#FEF9EC;border-color:#F0E2C0}
.camada-corpo.c2{background:#FDF3EE;border-color:#EFD9CC}
.camada-corpo.c3{background:#F1F4EF;border-color:#DCE4D8}
.camada-cabecalho{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  margin-bottom:.55rem;flex-wrap:wrap}
.camada-titulo{font-size:.84rem;font-weight:700}
.camada-rotulo{font-size:.72rem;color:var(--hist-texto3,#535F55)}

/* Cor por camada: saída é a mais leve (verde-instrumento), coração o meio
   (âmbar), fundo o mais pesado (terra). A cor acompanha o que a camada
   significa, não é enfeite. */
.camada-ponto.p1{border-color:#E8C46A;background:#FEF6E4;color:#B8860B}
.camada-ponto.p2{border-color:#E5A98C;background:#FDF1EA;color:#B5553A}
.camada-ponto.p3{border-color:#B9C7B4;background:#EEF3EC;color:#4A6350}
.camada-linha.l1{background:linear-gradient(180deg,#F0E2C0,#EFD9CC)}
.camada-linha.l2{background:linear-gradient(180deg,#EFD9CC,#DCE4D8)}
.camada-corpo.c1{border-left:3px solid var(--hist-verde,#3F6048)}
.camada-corpo.c2{border-left:3px solid #8A5A16}
.camada-corpo.c3{border-left:3px solid #9A8B7A}

/* ── As notas ──────────────────────────────────────────────────────────── */
.notas{display:flex;flex-wrap:wrap;gap:.35rem}
.nota{display:inline-flex;align-items:center;gap:.32rem;padding:.26rem .62rem;border-radius:20px;
  font-size:.73rem;background:#fff;border:1px solid var(--hist-borda,rgba(100,130,103,.32));
  color:var(--hist-texto,#263229)}
/* O ícone herda a cor da camada em que a nota está, via `contexto`: assim a
   mesma nota tem o traço do nível dela sem precisar de 14 regras por nível. */
.nota svg{width:13px;height:13px;flex-shrink:0;opacity:.8}
/* `.nota.com-icone .nota-ico` saiu em 31/10: o `piramide.js` marca `.com-icone`
   quando a nota tem ícone, mas nunca emite um elemento `.nota-ico` — o ícone é
   o próprio SVG. A regra escondia um elemento que não existe. */
.nota-vazia{font-size:.73rem;color:var(--hist-texto3,#535F55);font-style:italic}

@media (max-width:560px){
  .camada-corpo{padding:.7rem .8rem}
  .camada-titulo{font-size:.8rem}
  .camada-rotulo{font-size:.68rem}
  .nota{font-size:.7rem;padding:.22rem .5rem}
  .acorde{font-size:.71rem;padding:.3rem .65rem}
}