/* HISTÓRICO DE PREÇO — um só, para as três páginas que mostram card.
 *
 * Traz o próprio modal e o próprio CSS porque a home, a listagem e /alertas
 * não compartilham folha: a home carrega home.css, a listagem traz o estilo
 * dentro do HTML, /alertas tem alertas.css. O histórico resolve os dois
 * vocabulários de token (o da vitrine e o da listagem), pelo mesmo motivo do
 * cabeçalho e do rodapé.
 *
 * Não redefine .card nem .btn-*: o botão no card nasce da folha de cada
 * página, para o histórico não virar uma quarta opinião sobre o mesmo card. */

.sobreposicao{
  position:fixed;inset:0;background:rgba(38,50,41,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:200;display:none;align-items:center;justify-content:center;padding:1.5rem;
  /* Os tokens do modal ficam no PAI, não numa caixa.
     O cabeçalho e o rodapé usam as mesmas classes `modal-*` no histórico e na
     pirâmide, e as duas caixas são diferentes (`.hist-modal`, `.pir-modal`).
     Com os tokens presos a uma delas, a outra recebia texto e borda mas não
     fundo — o cabeçalho e o rodapé da pirâmide ficaram transparentes. No pai,
     os dois herdam. */
  --hist-texto:var(--texto-principal,var(--texto,#263229));
  --hist-texto2:var(--texto-secundario,var(--texto2,#4D574E));
  --hist-texto3:var(--texto-terciario,var(--texto3,#535F55));
  --hist-borda:var(--borda-suave,var(--borda,rgba(100,130,103,.16)));
  --hist-verde:var(--verde-principal,#3F6048);
  --hist-escuro:var(--verde-escuro,#263D2E);
  --hist-escuro2:var(--verde-muito-claro,#DCE5D4);
  --hist-subtle:var(--bg-card-subtle,var(--bg-subtle,#F9FAF7));
  --hist-ease:var(--ease,cubic-bezier(.16,1,.3,1));
  --hist-t:background-color .18s var(--hist-ease),border-color .18s var(--hist-ease),color .18s var(--hist-ease);
  --hist-serif:var(--font-serif,'Playfair Display',Georgia,serif);
  --hist-sans:var(--font-sans,'Plus Jakarta Sans',system-ui,-apple-system,sans-serif);
  --hist-data:var(--font-data,'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace);
  --hist-md:var(--radius-md,12px);
  --hist-lg:var(--radius-lg,18px);
  --hist-pill:var(--radius-pill,9999px);
  --hist-sombra:var(--sombra-modal,0 24px 60px -8px rgba(28,40,31,.22));
  --hist-salvia:var(--verde-salvia-claro,#EBF0E7);
  --hist-leitura:#8A5A16;--hist-leitura-bg:#FBF3E4;--hist-leitura-borda:#E3C89A}
.sobreposicao[aria-hidden="true"]{visibility:hidden}
.sobreposicao.aberto{display:flex;visibility:visible}

.hist-modal{
  background:#fff;color:var(--hist-texto);border:1px solid var(--hist-borda);
  border-radius:20px;width:100%;max-width:560px;max-height:90vh;
  box-shadow:var(--hist-sombra);overflow:hidden;display:flex;flex-direction:column;
  font-family:var(--hist-sans)}
@media (prefers-reduced-motion:no-preference){
  .sobreposicao.aberto .hist-modal,
  .sobreposicao.aberto .pir-modal{animation:histEntra .24s var(--hist-ease)}
}
@keyframes histEntra{from{transform:scale(.97) translateY(6px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}

.modal-cabecalho{padding:1.05rem 1.4rem;background:var(--hist-subtle);border-bottom:1px solid var(--hist-borda);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.modal-marca{display:flex;align-items:center;gap:.55rem}
.modal-marca img{border-radius:5px}
.modal-marca span{font-family:var(--hist-serif);font-size:19px;color:var(--hist-texto);line-height:1}
.modal-marca small{font-family:var(--hist-sans);font-size:.7rem;font-weight:700;color:var(--hist-verde);
  letter-spacing:.12em;text-transform:uppercase;display:block;margin-top:2px}
.modal-fechar{width:36px;height:36px;flex-shrink:0;background:rgba(100,130,103,.08);
  border:1px solid var(--hist-borda);color:var(--hist-texto2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--hist-t)}
.modal-fechar:hover{background:var(--hist-verde);color:#fff;border-color:var(--hist-verde)}
.modal-fechar:active{transform:scale(.94)}
.modal-corpo{padding:1.4rem;background:#fff;overflow-y:auto;flex:1}
.modal-rodape{padding:1rem 1.4rem;background:var(--hist-subtle);border-top:1px solid var(--hist-borda)}
.modal-fonte{font-size:.72rem;color:var(--hist-texto3);line-height:1.5}

.modal-titulo{display:flex;flex-direction:column;gap:.2rem;margin-bottom:1.25rem;
  padding-bottom:1rem;border-bottom:1px solid var(--hist-borda)}
.modal-sobre{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--hist-verde);font-weight:700}
.modal-nome{font-family:var(--hist-serif);font-size:1.4rem;font-weight:600;line-height:1.24;letter-spacing:-.01em}
.modal-secao{margin-top:1.35rem}
.modal-secao-titulo{display:flex;align-items:center;gap:.5rem;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hist-verde);font-weight:700;margin-bottom:.7rem}
/* O ícone do título precisa de medida explícita. SVG sem width/height assume o
   tamanho do contêiner — e como este título é flex, o ícone do calendário
   esticou até ocupar o modal inteiro. Todo SVG inline deste arquivo tem
   dimensão declarada; este ficou sem, e foi o único que quebrou. */
/* 17px, não 15: o ícone da pirâmide tem três traços (o contorno e as duas
   divisórias) e a 15px as divisórias ficavam a menos de um pixel de distância.
   A folha dos acordes também ganha com o traço mais legível. */
.modal-secao-titulo svg{width:17px;height:17px;flex-shrink:0}
.modal-erro{font-size:.84rem;color:var(--hist-texto2);line-height:1.6}

/* ── Cobertura: o que dizer quando a série é curta ───────────────────── */
.hist-cobertura{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem;
  padding:.8rem .95rem;border-radius:var(--hist-md);font-size:.8rem;line-height:1.55;
  background:#FBF3E4;border:1px solid #E3C89A;color:#8A5A16;margin-bottom:1.1rem}
.hist-cobertura.ok{background:#EDF4EE;border-color:#B9D3BE;color:#2E5B3C}
/* Preço que não se moveu não é alerta nem confirmação: é informação. O âmbar
   (--leitura) ficou reservado para o que pede atenção do leitor. */
.hist-cobertura.plana{background:var(--bg-card-subtle,#F9FAF7);
  border-color:var(--borda-suave,rgba(100,130,103,.16));color:var(--hist-texto2,#4D574E)}
.hist-cobertura b{font-weight:700}

/* ── Os três números ─────────────────────────────────────────────────── */

/* ── O gráfico ───────────────────────────────────────────────────────── */

/* `.hist-eixo` saiu em 31/10: era o eixo em texto abaixo do SVG, de quando o
   gráfico era desenhado em HTML. Agora o eixo vive DENTRO do SVG (o
   `svgDoGrafico` desenha rótulo, grade e linha), e a classe não é escrita em
   nenhum ponto (medido: 0 ocorrências em HTML e JS). */

.hist-nota{font-size:.74rem;color:var(--hist-texto3);margin-top:.7rem;text-align:center;font-style:italic}


/* ══ PRINTS 2 — título com foto, resumo com ícone, gráfico com grade ═══════
   Números medidos: modal de 560px de largura; o corpo útil são 512px. O
   gráfico usa 560 de viewBox e escala por `meet`, então os rótulos do eixo
   mantêm a proporção em vez de esticar (o `none` anterior deformava o texto
   junto com a linha). */

.modal-produto{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;
  padding-bottom:1.15rem;border-bottom:1px solid var(--hist-borda)}
.modal-foto{width:84px;height:84px;flex-shrink:0;object-fit:contain;border-radius:var(--hist-md);
  background:#ffffff;padding:.35rem}
.modal-produto > div{min-width:0;display:flex;flex-direction:column;gap:.25rem}
.modal-sobre{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--hist-verde)}
.modal-sobre svg{width:13px;height:13px;flex-shrink:0}
.modal-nome{font-family:var(--hist-serif);font-size:1.25rem;font-weight:600;line-height:1.25;
  letter-spacing:-.01em;color:var(--hist-texto)}
.modal-ficha{font-size:.78rem;color:var(--hist-texto3)}

/* ── Resumo: rótulo com ícone em cima, número embaixo ─────────────────── */
.hist-resumo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-bottom:1.1rem}
.hist-cel{background:var(--hist-subtle);border:1px solid var(--hist-borda);
  border-radius:var(--hist-md);padding:.7rem .8rem;display:flex;flex-direction:column;gap:.3rem}
.hist-cel-rot{display:inline-flex;align-items:center;gap:.35rem;font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--hist-texto3)}
.hist-cel-rot svg{width:14px;height:14px;flex-shrink:0;opacity:.75}
.hist-cel b{font-family:var(--hist-data);font-variant-numeric:tabular-nums;font-size:1.05rem;
  font-weight:700;color:var(--hist-escuro);line-height:1.15}
.hist-cel.bom{border-color:#B9D3BE}
.hist-cel.bom .hist-cel-rot{color:#2E5B3C}
.hist-cel.bom b{color:#2E5B3C}
.hist-cel.ruim{border-color:#E0B4B4}
.hist-cel.ruim .hist-cel-rot{color:#8C2F2F}
.hist-cel.ruim b{color:#8C2F2F}

/* ── O gráfico dentro da caixa ────────────────────────────────────────── */
.hist-caixa{border:1px solid var(--hist-borda);border-radius:var(--hist-md);
  background:#fff;padding:1rem 1.05rem .85rem;margin-bottom:.2rem}
.hist-caixa-topo{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.hist-caixa-titulo{display:inline-flex;align-items:center;gap:.45rem;font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--hist-verde)}
.hist-caixa-titulo svg{width:16px;height:16px;flex-shrink:0}
.hist-caixa-sub{font-size:.72rem;color:var(--hist-texto3);margin-top:.15rem}
.hist-grafico{position:relative;margin-top:.7rem}
/* O SVG é desenhado em pixels reais pelo JS: o `viewBox` é do tamanho medido do
   container, então o texto do eixo sai a 11px em qualquer tela. `overflow:hidden`
   garante que o anel do hover não vaze do quadro. */
.hist-grafico svg{display:block;width:100%;height:auto;overflow:hidden}
/* A bolinha é desenho; quem recebe o ponteiro é o alvo invisível por cima. */
.hist-ponto{pointer-events:none}
.hist-alvo{fill:none;stroke:transparent;stroke-width:1.5;cursor:pointer;pointer-events:all}
.hist-alvo:hover,.hist-alvo:focus{stroke:var(--hist-verde);fill:rgba(63,96,72,.10)}
.hist-alvo:focus{outline:none}
/* O tooltip do ponto. `pointer-events:none` para não roubar o hover do alvo
   que ele cobre — ele informa, não recebe. */
.hist-dica{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-100%);
  background:var(--hist-escuro);color:#fff;padding:.32rem .55rem;border-radius:6px;
  box-shadow:0 6px 16px rgba(19,26,21,.22);white-space:nowrap;text-align:center}
.hist-dica.abaixo{transform:translate(-50%,0)}
.hist-dica b{display:block;font-family:var(--hist-data);font-size:.78rem;font-weight:700;
  font-variant-numeric:tabular-nums}
.hist-dica span{display:block;font-size:.62rem;opacity:.72;margin-top:.05rem}

/* No espaço estreito, o rótulo longo vira o curto: "Máxima observada" pedia
   ~100px e a célula tem 85 a 95. A palavra curta diz a mesma coisa. */
.rot-curto{display:none}
@media (max-width:480px){
  .rot-longo{display:none}
  .rot-curto{display:inline}
  .hist-cel{padding:.6rem .55rem;gap:.22rem}
  .hist-cel b{font-size:.92rem}
  .hist-cel-rot{font-size:.6rem;gap:.25rem}
  .hist-cel-rot svg{width:12px;height:12px}
  .hist-resumo{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
  .modal-foto{width:64px;height:64px}
  .modal-nome{font-size:1.05rem}
  .hist-selo{font-size:.7rem;padding:.24rem .5rem}
  .hist-delta-val{font-size:.72rem}
  .hist-delta-pct{font-size:.64rem}
}

/* O selo da variação do período: o número que a pessoa veio buscar. */
.hist-selo{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--hist-data);
  font-size:.76rem;font-weight:700;font-variant-numeric:tabular-nums;
  padding:.28rem .6rem;border-radius:var(--hist-pill)}
.hist-selo svg{width:13px;height:13px;flex-shrink:0}
.hist-selo.desce{background:#EDF4EE;color:#2E5B3C;border:1px solid #B9D3BE}
.hist-selo.sobe{background:#FBF0F0;color:#8C2F2F;border:1px solid #E0B4B4}

/* ── A tabela ─────────────────────────────────────────────────────────── */
.hist-delta{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.hist-delta-val{font-family:var(--hist-data);font-size:.76rem;font-weight:700;font-variant-numeric:tabular-nums}
.hist-delta-pct{font-size:.68rem;font-weight:600;opacity:.75;font-variant-numeric:tabular-nums}
.hist-delta.sobe{color:#8C2F2F}
.hist-delta.desce{color:#2E5B3C}

/* O rodapé com o ícone de informação. */
.modal-fonte{display:flex;gap:.5rem;font-size:.72rem;color:var(--hist-texto3);line-height:1.5}
.modal-fonte svg{width:15px;height:15px;flex-shrink:0;margin-top:.12rem;opacity:.7}

/* ── A tabela que sustenta o gráfico ─────────────────────────────────── */
.hist-tabela{width:100%;border-collapse:collapse;font-size:.8rem}
.hist-tabela th,.hist-tabela td{text-align:left;padding:.5rem .3rem;
  border-bottom:1px solid var(--hist-borda)}
.hist-tabela th{font-size:.65rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--hist-texto3);font-weight:700}
.hist-tabela .hist-dia{display:block;font-variant-numeric:tabular-nums}
.hist-tabela .hist-hora{display:block;font-family:var(--hist-data);font-size:.68rem;
  color:var(--hist-texto3);margin-top:.1rem}
.hist-tabela td.num{text-align:right;font-family:var(--hist-data);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hist-tabela tr:last-child td{border-bottom:none}
.hist-delta{font-family:var(--hist-data);font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums}
.hist-delta.sobe{color:#8C2F2F}
.hist-delta.desce{color:#2E5B3C}
.hist-neutro{color:var(--hist-texto3)}

.hist-vazio{padding:2rem 1rem;text-align:center;color:var(--hist-texto3);
  font-size:.86rem;line-height:1.6}

@media (max-width:768px){
        .modal-corpo{padding:1.1rem}
  .modal-cabecalho,.modal-rodape{padding:.9rem 1.1rem}
  .modal-nome{font-size:1.2rem}
}

/* Rede de segurança: qualquer SVG dentro do modal que não tenha medida própria
   recebe a do rótulo. Um SVG sem dimensão num contêiner flex estica até o
   limite, e foi assim que o ícone do calendário virou o elemento maior da tela. */
.hist-cel-rot svg, .modal-fonte svg{width:14px;height:14px;flex-shrink:0}