/* Vale a pena? — em cima dos componentes do site, da Calculadora (xpc-*) e do /hunt (ph-*). */
.vp-layout { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 14px; align-items: start; }
.vp-entrada, .vp-resultado { min-width: 0; }
.vp-entrada .field + .field { margin-top: 12px; }
.vp-entrada input, .vp-entrada select, .vp-entrada textarea { box-sizing: border-box; max-width: 100%; }
.vp-passo-2 { margin-top: 20px; }
.vp-seg { display: inline-flex; margin-bottom: 10px; }
.vp-grade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.vp-grade-form .field { margin: 0; }
.vp-entrada .xpc-check { margin: 10px 0 14px; }
.vp-preco { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 6px; }
.vp-preco input, .vp-preco select { width: 100%; min-width: 0; }
.vp-entrada #vp-card-atual, .vp-entrada #vp-card-cand { margin-top: 12px; }

/* A tela de carregamento: a frase gira, a barra anda a cada degrau de nível simulado. */
.vp-resultado .vp-calcular { display: block; width: 100%; margin: 0 0 12px; padding: 11px 14px; font-size: 14px; cursor: pointer; }
.vp-resultado .vp-calcular:disabled { opacity: .45; cursor: not-allowed; }
.vp-carregando { display: grid; gap: 10px; justify-items: center; padding: 32px 12px; text-align: center; }
.vp-frase { min-height: 24px; color: #fff; font-size: 18px; font-weight: 800; }
.vp-carregando .ph-barra { width: min(420px, 100%); }

.vp-veredito { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #1b1e26; }
.vp-nota { flex: none; display: flex; align-items: baseline; gap: 2px; color: var(--yellow); font-size: 44px; font-weight: 900; line-height: 1; }
.vp-nota small { color: #858b95; font-size: 14px; font-weight: 700; }
.vp-frase-veredito strong { display: block; margin-bottom: 4px; color: #fff; font-size: 16px; }
.vp-frase-veredito p { margin: 0; color: #c7cad0; font-size: 12px; line-height: 1.45; }
.vp-faixa-ruim .vp-nota { color: #ff6675; }
.vp-faixa-baixa .vp-nota { color: #f0a03c; }
.vp-faixa-neutra .vp-nota { color: #aab0ba; }
.vp-faixa-boa .vp-nota { color: var(--yellow); }
.vp-faixa-otima .vp-nota { color: var(--green); }
.vp-faixa-otima { border-color: rgba(34, 214, 86, .4); }
.vp-escala { margin: 0 0 12px; color: #858b95; font-size: 11px; line-height: 1.45; }
.vp-metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.vp-metrica { border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px; background: #181b22; }
.vp-metrica b { display: block; color: #8d939e; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.vp-metrica span { display: block; margin-top: 2px; color: #fff; font-size: 17px; font-weight: 800; }
.vp-metrica span small { color: #858b95; font-size: 11px; font-weight: 600; }
.vp-metrica > small { display: block; margin-top: 2px; color: #858b95; font-size: 11px; line-height: 1.4; }
.vp-mais { color: var(--green); }
.vp-menos { color: #ff6675; }
.vp-mercado { margin: -4px 0 12px; color: #858b95; font-size: 11px; line-height: 1.45; }
.vp-h4 { margin: 14px 0 6px; color: #c7cad0; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.vp-tabela { min-width: 560px; }
.vp-empate { display: inline-block; margin-left: 6px; border-radius: 4px; padding: 2px 6px; background: rgba(34, 214, 86, .15); color: var(--green); font-size: 10px; font-weight: 800; }
.vp-calibracao { margin-top: 14px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px; background: #181b22; color: #aab0ba; font-size: 12px; line-height: 1.45; }
.vp-calibracao .xpc-check { margin: 0 0 6px; }
.vp-calibracao .xpc-check small { color: #737984; }
.vp-calibracao p { margin: 0; }
.vp-calibracao p + p { margin-top: 4px; }
.vp-fatores { margin-top: 14px; border: 1px dashed #3a414b; border-radius: 8px; padding: 10px 12px; color: #aab0ba; font-size: 12px; line-height: 1.45; }
.vp-fatores summary { cursor: pointer; color: #c7cad0; font-weight: 700; }
.vp-fatores p { margin: 8px 0; }
.vp-tabela-fatores { min-width: 0; width: 100%; margin-top: 6px; table-layout: fixed; }
.vp-tabela-fatores th, .vp-tabela-fatores td { white-space: normal; vertical-align: top; font-size: 12px; }
.vp-tabela-fatores th:first-child { width: 24%; }
@media (max-width: 900px) { .vp-layout { grid-template-columns: 1fr; } .vp-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .vp-grade-form { grid-template-columns: 1fr; } .vp-veredito { flex-direction: column; align-items: flex-start; } }