/* ===========================================
   Café 360 — Benchmark (referência Embrapa)
   =========================================== */

.pagina-bench { padding: var(--espacamento-md); padding-bottom: 80px; }

.bench-card {
    background: var(--branco);
    border-radius: var(--raio-md);
    padding: 16px;
    box-shadow: var(--sombra-leve);
    margin-bottom: 12px;
}
.bench-card-titulo { font-size: var(--tamanho-md); font-weight: var(--peso-semi); color: var(--verde-escuro); margin-bottom: 10px; }

.bench-num {
    font-size: var(--fs-display);
    font-weight: var(--peso-bold);
    color: var(--verde-escuro);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.bench-num span { font-size: var(--tamanho-md); color: var(--texto-secundario); font-weight: var(--peso-semi); }
.bench-faixa { font-size: var(--tamanho-sm); color: var(--texto-secundario); margin: 6px 0 10px; }
.bench-faixa b { color: var(--verde-escuro); }

.bench-escala { display: flex; gap: 6px; margin-bottom: 10px; }
.bench-escala-item {
    flex: 1; text-align: center;
    font-size: var(--tamanho-xs);
    padding: 6px 4px;
    border-radius: var(--raio-sm);
    background: var(--bege-papel);
    color: var(--texto-secundario);
}
.bench-escala-item.ativo { background: var(--verde-medio); color: var(--texto-invertido); font-weight: var(--peso-semi); }

.bench-dica {
    font-size: var(--tamanho-xs);
    color: var(--texto-secundario);
    line-height: 1.4;
    background: rgba(201, 169, 97, 0.1);
    border-left: 3px solid var(--dourado);
    border-radius: 4px;
    padding: 8px 10px;
    margin-top: 8px;
}

.bench-comp { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bench-comp-lbl { font-size: var(--tamanho-xs); color: var(--texto-principal); width: 38%; flex-shrink: 0; }
.bench-comp-barra { flex: 1; height: 12px; background: var(--bege-medio); border-radius: var(--raio-full); overflow: hidden; }
.bench-comp-fill { height: 100%; background: var(--verde-medio); border-radius: var(--raio-full); }
.bench-comp-pct { font-size: var(--tamanho-xs); color: var(--texto-secundario); width: 36px; text-align: right; font-variant-numeric: tabular-nums; }

.bench-soon {
    background: var(--bege-papel);
    border: 1px dashed var(--bege-medio);
    border-radius: var(--raio-md);
    padding: 14px;
    font-size: var(--tamanho-sm);
    color: var(--texto-secundario);
    line-height: 1.5;
    margin-bottom: 12px;
}
.bench-rodape { font-size: var(--tamanho-xs); color: var(--texto-claro); font-style: italic; text-align: center; line-height: 1.4; }