/* ===== Radar de preços — cores em variáveis; tema escuro por data-theme ou preferência do sistema ===== */
:root {
  --bg: #f5f6f4;
  --superficie: #ffffff;
  --borda: #e3e6e1;
  --texto: #14201a;
  --texto-suave: #5f6b64;
  --acento: #0f766e;
  --acento-suave: #ccfbf1;
  --bom: #15803d;
  --bom-suave: #dcfce7;
  --ruim: #b91c1c;
  --ruim-suave: #fee2e2;
  --aviso: #b45309;
  --aviso-suave: #fef3c7;
  --sombra: 0 1px 2px rgba(20, 32, 26, .06), 0 6px 20px rgba(20, 32, 26, .05);
  --raio: 12px;
  --esp: 16px;
  /* Séries (Okabe-Ito): nacional, internacional, alvo */
  --serie-nacional: #0072b2;
  --serie-internacional: #d55e00;
  --serie-alvo: #009e73;
  --serie-anuncio: #9aa5a0;
}
:root[data-theme="dark"] {
  --bg: #0d1411;
  --superficie: #151f1a;
  --borda: #26332c;
  --texto: #e6efe9;
  --texto-suave: #98a8a0;
  --acento: #2dd4bf;
  --acento-suave: #12332f;
  --bom: #4ade80;
  --bom-suave: #14301e;
  --ruim: #f87171;
  --ruim-suave: #3a1616;
  --aviso: #fbbf24;
  --aviso-suave: #3a2c0a;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  --serie-nacional: #56b4e9;
  --serie-internacional: #f08040;
  --serie-alvo: #2fc99a;
  --serie-anuncio: #5d6b64;
}
/* Mesmos valores do bloco acima, para o escuro do sistema sem escolha salva — mudou um, mudar o outro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1411;
    --superficie: #151f1a;
    --borda: #26332c;
    --texto: #e6efe9;
    --texto-suave: #98a8a0;
    --acento: #2dd4bf;
    --acento-suave: #12332f;
    --bom: #4ade80;
    --bom-suave: #14301e;
    --ruim: #f87171;
    --ruim-suave: #3a1616;
    --aviso: #fbbf24;
    --aviso-suave: #3a2c0a;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    --serie-nacional: #56b4e9;
    --serie-internacional: #f08040;
    --serie-alvo: #2fc99a;
    --serie-anuncio: #5d6b64;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--acento); }
.tnum { font-variant-numeric: tabular-nums; }
.suave { color: var(--texto-suave); }
.pequeno { font-size: 13px; }
[hidden] { display: none !important; }

/* Cabeçalho */
.topo { border-bottom: 1px solid var(--borda); background: var(--superficie); }
.topo-dentro { max-width: 1100px; margin: 0 auto; padding: 12px var(--esp); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.marca { font-weight: 700; font-size: 17px; color: var(--texto); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.marca svg { color: var(--acento); }
.topo .acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }

main { max-width: 1100px; margin: 0 auto; padding: var(--esp); }
h1 { font-size: 24px; margin: 8px 0 4px; letter-spacing: -.01em; }
h2 { font-size: 17px; margin: 0 0 12px; }
.sub { color: var(--texto-suave); margin: 0 0 20px; }

/* Botões e formulários */
button, .botao {
  font: inherit; font-size: 14px; padding: 7px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
button:hover, .botao:hover { border-color: var(--acento); }
button.primario { background: var(--acento); border-color: var(--acento); color: var(--superficie); }
button.perigo { color: var(--ruim); }
button:disabled { opacity: .5; cursor: wait; }
input, select, textarea {
  font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--bg); color: var(--texto); min-width: 0;
}
textarea { width: 100%; min-height: 60px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto-suave); }
label.linha { flex-direction: row; align-items: center; gap: 6px; }
.form-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.form-grade .largo { grid-column: 1 / -1; }

/* Cartões */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: var(--esp); margin-bottom: var(--esp); }
.grade-produtos { display: grid; gap: var(--esp); }
.produto-card h2 { font-size: 19px; margin: 0; }
.produto-card h2 a { color: var(--texto); text-decoration: none; }
.produto-card h2 a:hover { color: var(--acento); }
.produto-card .cabeca { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; margin-bottom: 12px; }
.origens { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.origem { border: 1px solid var(--borda); border-radius: 10px; padding: 12px; position: relative; }
.origem .rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); display: flex; align-items: center; gap: 6px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ponto.nacional { background: var(--serie-nacional); }
.ponto.internacional { background: var(--serie-internacional); }
.preco-grande { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0; }
.origem .loja { font-size: 13px; }
.vazio { color: var(--texto-suave); font-size: 14px; padding: 8px 0; }

/* Selos */
.selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.selo { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--bom-suave); color: var(--bom); font-weight: 600; }
.selo.maquiada { background: var(--aviso-suave); color: var(--aviso); }
.chip { font-size: 12px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--borda); color: var(--texto-suave); white-space: nowrap; }
.chip.alta { color: var(--bom); border-color: currentColor; }
.chip.media { color: var(--aviso); border-color: currentColor; }
.chip.baixa, .chip.evitar { color: var(--ruim); border-color: currentColor; }
.chip.internacional { color: var(--serie-internacional); border-color: currentColor; }
.chip.nacional { color: var(--serie-nacional); border-color: currentColor; }

/* Indicadores do produto */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.indicador { font-size: 12px; color: var(--texto-suave); }
.indicador b { display: block; font-size: 15px; color: var(--texto); }

/* Gráfico */
.grafico { position: relative; height: 320px; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--texto-suave); margin-bottom: 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* Tabelas */
.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.melhor td { background: var(--bom-suave); }
.titulo-anuncio { max-width: 380px; }
.titulo-anuncio a { color: var(--texto); }

/* Por cor e família */
.tabela-familia th, .tabela-familia td { min-width: 130px; }
.tabela-familia th:first-child, .tabela-familia td:first-child { min-width: 110px; position: sticky; left: 0; background: var(--superficie); }
.tabela-familia th.atual, .tabela-familia td.atual { background: var(--acento-suave); }
.tabela-familia tr.decide td { font-weight: 600; box-shadow: inset 3px 0 0 var(--aviso); }
.tabela-familia tr.decide td:first-child { background: var(--aviso-suave); }
.fonte-link { font-size: 11px; margin-left: 4px; color: var(--texto-suave); }
.aviso-cor { font-size: 12px; color: var(--aviso); display: block; }
.lista-ficha { margin: 0; padding-left: 18px; }
.lista-ficha li.decide { font-weight: 600; }
.notas-variante { font-size: 13px; margin: 10px 0 0; }
.notas-variante ul { margin: 4px 0 0; padding-left: 18px; }

/* Candidatos */
.candidato { border: 1px solid var(--borda); border-radius: 10px; padding: 12px; margin-bottom: 10px; display: grid; gap: 8px; }
.candidato .linha1 { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.nota { font-weight: 700; font-variant-numeric: tabular-nums; }
.nota.alta { color: var(--bom); } .nota.media { color: var(--aviso); } .nota.baixa { color: var(--ruim); }
.motivos { display: flex; flex-wrap: wrap; gap: 6px; }
.parecer { font-size: 13px; background: var(--acento-suave); border-radius: 8px; padding: 8px 10px; }
.acoes-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.aviso { background: var(--aviso-suave); color: var(--aviso); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.erro-msg { background: var(--ruim-suave); color: var(--ruim); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
details > summary { cursor: pointer; font-weight: 600; }
details[open] > summary { margin-bottom: 12px; }
.rodape { color: var(--texto-suave); font-size: 13px; text-align: center; padding: 24px var(--esp) 40px; }
.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--texto); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-size: 14px; z-index: 10; max-width: calc(100vw - 32px); }

@media (max-width: 600px) {
  h1 { font-size: 21px; }
  .preco-grande { font-size: 24px; }
  .grafico { height: 260px; }
  .titulo-anuncio { max-width: 220px; }
  .tabela-familia th, .tabela-familia td { min-width: 110px; }
}