/* Skin RockyCloud (se carga después de calculator.css). Navy + ámbar, Inter. */

/* Banda oscura full-bleed: el contenedor del tema es angosto; la calculadora ocupa todo el ancho. */
.rocky-calc-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #0B1322;
  padding: 56px 24px 64px;
  box-sizing: border-box;
}
.rocky-calc-band .hv-calc {
  --hv-abyss: #070D18;
  --hv-deep: #0B1322;
  --hv-surface: #111C2E;
  --hv-raised: #182740;
  --hv-elevated: #213353;
  --hv-green: #F5A800;      /* acento principal: precio, CTA, activos */
  --hv-purple: #FFC63D;     /* secundario: tags */
  --hv-amber: #F5A800;      /* badge de ahorro */
  --hv-text: #F4F6FA;
  --hv-text-2: #A5B0C2;
  --hv-text-3: #7E8899;
  --hv-border: rgba(165, 176, 194, 0.18);
  --hv-font-display: 'Inter', system-ui, sans-serif;
  --hv-font-body: 'Inter', system-ui, sans-serif;
  --hv-font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  max-width: 1240px;
  margin: 0 auto;
  border: none;
  background: transparent;
}
.rocky-calc-band .hv-calc__grid { grid-template-columns: 1fr 380px; }
@media (max-width: 860px) { .rocky-calc-band .hv-calc__grid { grid-template-columns: 1fr; } }

/* el hero de la página ya dice "Calculadora"; no repetir el título dentro del panel */
.rocky-calc-band .hv-calc__title { display: none; }
.rocky-calc-band .hv-calc__sub { font-size: 1.05rem; }

/* texto oscuro sobre ámbar (contraste) */
.rocky-calc-band .hv-calc__cta { color: #111C2E; }
.rocky-calc-band .hv-calc__term.is-active { color: #111C2E; }
.rocky-calc-band .hv-calc__step-num { color: #111C2E; }
.rocky-calc-band .hv-calc__server.is-active { background: rgba(245, 168, 0, 0.10); }

/* specs de servidor como chips */
.rocky-calc-band .hv-calc__server-cpu { font-size: 1.02rem; color: #fff; }
.rocky-calc-band .hv-calc__server-specs { gap: 6px 8px; margin-top: 6px; }
.rocky-calc-band .hv-calc__server-specs span {
  background: rgba(245, 168, 0, 0.10);
  border: 1px solid rgba(245, 168, 0, 0.30);
  border-radius: 7px;
  padding: 3px 9px;
  color: #F4F6FA;
  font-size: 0.85rem;
}

/* formulario de cotización */
.rocky-calc-band .hv-calc__quote { margin-top: 18px; }
.rocky-calc-band .hv-calc__form { display: flex; flex-direction: column; gap: 10px; }
.rocky-calc-band .hv-calc__form-row label { display: block; font-size: .8rem; color: var(--hv-text-2); margin-bottom: 4px; }
.rocky-calc-band .hv-calc__form-row input,
.rocky-calc-band .hv-calc__form-row textarea {
  width: 100%; box-sizing: border-box;
  background: var(--hv-raised); color: var(--hv-text);
  border: 1px solid var(--hv-border); border-radius: 10px;
  padding: 10px 12px; font-size: .92rem; font-family: inherit;
}
.rocky-calc-band .hv-calc__form-row input:focus,
.rocky-calc-band .hv-calc__form-row textarea:focus { outline: none; border-color: var(--hv-green); }
.rocky-calc-band .hv-calc__form .hv-calc__cta { margin-top: 6px; }
.rocky-calc-band .hv-calc__quote-ok {
  background: rgba(245, 168, 0, 0.12); border: 1px solid rgba(245, 168, 0, 0.35);
  color: var(--hv-text); border-radius: 10px; padding: 14px 16px; text-align: center; font-weight: 600;
}
.rocky-calc-band .hv-calc__quote-err { color: #F87171; font-size: .82rem; }

/* Muro de leads (lead-wall.js): calculadora difuminada e inerte detrás del modal. */
.ngi-calc-band--walled .hv-calc { filter: blur(6px); pointer-events: none; user-select: none; }
.ngi-wall {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 13, 24, 0.6); padding: 20px;
}
.ngi-wall__dialog {
  background: #111C2E; color: #F4F6FA;
  border: 1px solid rgba(165, 176, 194, 0.25); border-radius: 16px;
  padding: 28px; width: 100%; max-width: 430px;
  font-family: 'Inter', system-ui, sans-serif;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); box-sizing: border-box;
}
.ngi-wall__dialog *, .ngi-wall__dialog *::before, .ngi-wall__dialog *::after { box-sizing: border-box; }
.ngi-wall__dialog h3 { margin: 0 0 6px; font-size: 1.35rem; color: #fff; }
.ngi-wall__sub { margin: 0 0 18px; color: #A5B0C2; font-size: 0.92rem; }
.ngi-wall__form { display: flex; flex-direction: column; gap: 12px; }
.ngi-wall__row span { display: block; font-size: 0.8rem; color: #A5B0C2; margin-bottom: 4px; }
.ngi-wall__row input {
  width: 100%; background: #182740; color: #F4F6FA;
  border: 1px solid rgba(165, 176, 194, 0.25); border-radius: 10px;
  padding: 10px 12px; font-size: 0.92rem; font-family: inherit;
}
.ngi-wall__row input:focus { outline: none; border-color: #F5A800; }
.ngi-wall__err { color: #F87171; font-size: 0.84rem; }
.ngi-wall__btn {
  width: 100%; background: #F5A800; color: #111C2E; border: none; border-radius: 10px;
  padding: 13px 18px; font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: inherit;
  margin-top: 4px; transition: filter 0.15s;
}
.ngi-wall__btn:hover { filter: brightness(1.08); }
.ngi-wall__btn:disabled { opacity: 0.6; cursor: default; }
/* lead-wall.js inserta .ngi-wall en document.body (fuera de .rocky-calc-band), así que las CSS vars no están en alcance: literal necesario */
.ngi-wall__note { margin: 14px 0 0; font-size: 0.74rem; color: #7E8899; }
.ngi-wall__note a { color: #FFC63D; }