/* Calculadora de precios Hivelocity para Bylonis.
   Reutiliza los tokens del design-system del tema (con fallbacks por si no cargan). */
.hv-calc {
  --hv-abyss: var(--abyss, #040A12);
  --hv-deep: var(--deep, #081420);
  --hv-surface: var(--surface, #0C1E30);
  --hv-raised: var(--raised, #112A40);
  --hv-elevated: var(--elevated, #183650);
  --hv-green: var(--signal-green, #00D4A0);
  --hv-purple: var(--signal-purple, #7C6AFF);
  --hv-amber: var(--signal-amber, #F5A623);
  --hv-text: var(--text-primary, #E8EDF2);
  --hv-text-2: var(--text-secondary, #8899AA);
  --hv-text-3: var(--text-tertiary, #556677);
  --hv-border: rgba(136, 153, 170, 0.18);
  --hv-radius: 14px;
  --hv-font-display: var(--font-display, 'Lexend Deca', system-ui, sans-serif);
  --hv-font-body: var(--font-body, 'Lexend Deca', system-ui, sans-serif);
  --hv-font-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);

  font-family: var(--hv-font-body);
  color: var(--hv-text);
  background: var(--hv-deep);
  border: 1px solid var(--hv-border);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 34px);
  max-width: 1080px;
  margin: 0 auto;
  box-sizing: border-box;
}
.hv-calc *, .hv-calc *::before, .hv-calc *::after { box-sizing: border-box; }

.hv-calc__loading {
  padding: 48px 0;
  text-align: center;
  color: var(--hv-text-2);
  font-family: var(--hv-font-mono);
  letter-spacing: .04em;
}

.hv-calc__head { margin-bottom: 22px; }
.hv-calc__title {
  font-family: var(--hv-font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.1;
}
.hv-calc__title b { color: var(--hv-green); font-weight: 700; }
.hv-calc__sub { color: var(--hv-text-2); margin: 0; font-size: .95rem; }

.hv-calc__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 860px) { .hv-calc__grid { grid-template-columns: 1fr; } }

.hv-calc__panel {
  background: var(--hv-surface);
  border: 1px solid var(--hv-border);
  border-radius: var(--hv-radius);
  padding: 20px;
}
.hv-calc__step-label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--hv-font-mono);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hv-text-3);
  margin: 0 0 12px;
}
.hv-calc__step-num {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--hv-green); color: var(--hv-abyss);
  font-weight: 700; font-size: .72rem;
}
.hv-calc__field { margin-bottom: 22px; }
.hv-calc__field:last-child { margin-bottom: 0; }

.hv-calc select {
  width: 100%;
  appearance: none;
  background: var(--hv-raised);
  color: var(--hv-text);
  border: 1px solid var(--hv-border);
  border-radius: 10px;
  padding: 12px 40px 12px 14px;
  font-family: var(--hv-font-body);
  font-size: .95rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238899AA' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.hv-calc select:focus { outline: none; border-color: var(--hv-green); }

/* lista de servidores */
.hv-calc__servers { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.hv-calc__server {
  text-align: left;
  background: var(--hv-raised);
  border: 1px solid var(--hv-border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center;
  color: inherit; width: 100%;
}
.hv-calc__server:hover { border-color: var(--hv-elevated); }
.hv-calc__server.is-active { border-color: var(--hv-green); background: rgba(0, 212, 160, 0.06); }
.hv-calc__server-cpu { font-weight: 600; font-size: .95rem; grid-column: 1; }
.hv-calc__server-specs { grid-column: 1; color: var(--hv-text-2); font-size: .82rem; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.hv-calc__server-specs span { display: inline-flex; align-items: center; gap: 5px; }
.hv-calc__server-price { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-family: var(--hv-font-mono); font-weight: 600; color: var(--hv-green); white-space: nowrap; }
.hv-calc__server-price small { display: block; color: var(--hv-text-3); font-weight: 400; font-size: .68rem; }
.hv-calc__gpu-tag { color: var(--hv-purple); }

/* upgrades */
.hv-calc__upg { display: flex; flex-direction: column; gap: 14px; }
.hv-calc__upg-row label { display: block; font-size: .8rem; color: var(--hv-text-2); margin-bottom: 6px; }
.hv-calc__empty { color: var(--hv-text-3); font-size: .88rem; }

/* term switch */
.hv-calc__terms { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-calc__term {
  border: 1px solid var(--hv-border);
  background: var(--hv-raised);
  color: var(--hv-text-2);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: .82rem; cursor: pointer;
  font-family: var(--hv-font-body);
  transition: all .15s;
}
.hv-calc__term.is-active { border-color: var(--hv-green); color: var(--hv-abyss); background: var(--hv-green); font-weight: 600; }

/* summary / sticky */
.hv-calc__summary { position: sticky; top: 20px; }
.hv-calc__sum-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--hv-border); font-size: .88rem; }
.hv-calc__sum-line span:first-child { color: var(--hv-text-2); }
.hv-calc__sum-line span:last-child { font-family: var(--hv-font-mono); }
.hv-calc__total { margin-top: 16px; }
.hv-calc__total-label { color: var(--hv-text-3); font-family: var(--hv-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.hv-calc__total-price { font-family: var(--hv-font-display); font-size: 2.4rem; font-weight: 700; color: var(--hv-green); line-height: 1.05; margin-top: 4px; }
.hv-calc__total-price small { font-size: .9rem; color: var(--hv-text-2); font-weight: 400; }
.hv-calc__total-note { color: var(--hv-text-3); font-size: .78rem; margin-top: 6px; }

.hv-calc__cta {
  display: inline-block; width: 100%; text-align: center;
  margin-top: 18px;
  background: var(--hv-green); color: var(--hv-abyss);
  border: none; border-radius: 10px;
  padding: 14px 18px;
  font-weight: 700; font-size: .95rem; cursor: pointer;
  text-decoration: none;
  font-family: var(--hv-font-body);
  transition: filter .15s;
}
.hv-calc__cta:hover { filter: brightness(1.08); }
.hv-calc__placeholder { color: var(--hv-text-3); text-align: center; padding: 30px 8px; font-size: .9rem; }

.hv-calc__foot { margin-top: 18px; color: var(--hv-text-3); font-size: .72rem; text-align: center; }

/* comparativa "otras nubes" */
.hv-calc__cloud {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed var(--hv-border);
  border-radius: 10px;
  background: var(--hv-raised);
}
.hv-calc__cloud-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .88rem; color: var(--hv-text-2); }
.hv-calc__cloud-price { font-family: var(--hv-font-mono); font-weight: 600; color: var(--hv-amber); white-space: nowrap; }
.hv-calc__cloud-price small { color: var(--hv-text-3); font-weight: 400; font-size: .68rem; }
.hv-calc__cloud-badge {
  display: inline-block; margin-top: 8px;
  background: rgba(245, 166, 35, 0.14); color: var(--hv-amber);
  border-radius: 999px; padding: 4px 12px;
  font-size: .78rem; font-weight: 700;
}
.hv-calc__cloud-detail { margin-top: 8px; color: var(--hv-text-2); font-size: .78rem; }
.hv-calc__cloud-note { margin-top: 6px; color: var(--hv-text-3); font-size: .68rem; line-height: 1.45; }