/*! © 2026 UltrAgentes-IA — Todos los derechos reservados.
 *  OMEGA LAYER v12 — Configurador "Arma tu Agente" (wizard + blueprint)
 *  Prohibida su copia, reproducción o distribución sin autorización escrita. */

/* ═══════════════ SECCIÓN CONFIGURADOR ═══════════════ */
.forge-section { position: relative; overflow: hidden; }
.forge-section::before {
  content: "";
  position: absolute; inset: 10% -10% auto;
  height: 70%;
  background: conic-gradient(from 210deg, rgba(99, 230, 255, .07), rgba(139, 92, 246, .1), transparent 50%);
  filter: blur(100px);
  pointer-events: none;
}
.forge-shell {
  position: relative;
  max-width: 880px;
  margin: 48px auto 0;
  border: 1px solid rgba(99, 230, 255, .16);
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(11, 18, 34, .94), rgba(5, 9, 18, .97));
  box-shadow: 0 40px 110px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  overflow: hidden;
}

/* Barra de progreso */
.forge-progress {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .015);
}
.forge-step-tab {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 8px;
  font: 600 11px/1.2 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(147, 167, 196, .55);
  border-bottom: 2px solid transparent;
  transition: color .3s, border-color .3s;
  user-select: none;
}
.forge-step-tab .n {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(147, 167, 196, .35);
  font-size: 10px;
  flex-shrink: 0;
}
.forge-step-tab.active { color: #63e6ff; border-bottom-color: #63e6ff; }
.forge-step-tab.active .n { border-color: #63e6ff; background: rgba(99, 230, 255, .12); }
.forge-step-tab.done { color: #52e5a1; }
.forge-step-tab.done .n { border-color: #52e5a1; background: rgba(82, 229, 161, .12); }
@media (max-width: 640px) { .forge-step-tab span.lbl { display: none; } }

/* Cuerpo del paso */
.forge-body { padding: clamp(26px, 4.5vw, 44px); }
.forge-pane { display: none; animation: forgeIn .45s cubic-bezier(.16, 1, .3, 1) both; }
.forge-pane.active { display: block; }
@keyframes forgeIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.forge-q {
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 6px;
}
.forge-hint { color: #93a7c4; font-size: .92rem; margin-bottom: 26px; }

/* Opciones tipo tarjeta */
.forge-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.forge-opt {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 18px;
  border: 1px solid rgba(125, 211, 252, .14);
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  text-align: left;
  color: inherit; font: inherit;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .25s, background .25s, box-shadow .35s;
}
.forge-opt:hover { transform: translateY(-4px); border-color: rgba(99, 230, 255, .4); }
.forge-opt i { font-size: 22px; color: #63e6ff; }
.forge-opt strong { font-size: .98rem; font-weight: 700; }
.forge-opt small { color: #93a7c4; font-size: .8rem; line-height: 1.5; }
.forge-opt .check {
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(147, 167, 196, .4);
  display: grid; place-items: center;
  font-size: 10px; color: transparent;
  transition: .25s;
}
.forge-opt[aria-pressed="true"] {
  border-color: #63e6ff;
  background: linear-gradient(160deg, rgba(99, 230, 255, .1), rgba(59, 130, 246, .06));
  box-shadow: 0 14px 44px rgba(59, 130, 246, .18);
}
.forge-opt[aria-pressed="true"] .check { border-color: #63e6ff; background: #63e6ff; color: #031018; }

/* Slider de volumen */
.forge-vol { margin: 8px 0 26px; }
.forge-vol label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: .95rem; margin-bottom: 14px; }
.forge-vol output { font: 800 1.3rem/1 'JetBrains Mono', monospace; color: #63e6ff; font-variant-numeric: tabular-nums; }
.forge-vol input[type="range"] { width: 100%; accent-color: #63e6ff; height: 6px; cursor: pointer; }

/* Navegación */
.forge-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 32px; }
.forge-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px;
  border-radius: 13px; border: 1px solid rgba(125, 211, 252, .2);
  background: rgba(255, 255, 255, .04);
  color: #eaf2fd; font: 700 .92rem/1 Inter, sans-serif;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .25s, box-shadow .3s;
}
.forge-btn:hover { transform: translateY(-2px); border-color: rgba(99, 230, 255, .45); }
.forge-btn.primary {
  border: none;
  background: linear-gradient(135deg, #0ea5c9, #3b82f6 55%, #8b5cf6);
  box-shadow: 0 16px 44px rgba(59, 130, 246, .3);
}
.forge-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ═══════════════ BLUEPRINT (resultado) ═══════════════ */
.forge-blueprint {
  border: 1px solid rgba(82, 229, 161, .25);
  border-radius: 22px;
  background:
    linear-gradient(rgba(82, 229, 161, .04), rgba(99, 230, 255, .03)),
    repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(99, 230, 255, .05) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, rgba(99, 230, 255, .05) 24px),
    #050b12;
  padding: clamp(22px, 4vw, 34px);
  animation: forgeIn .5s cubic-bezier(.16, 1, .3, 1) both;
}
.bp-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.bp-avatar {
  width: 62px; height: 62px;
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 26px; color: #031018;
  background: linear-gradient(135deg, #63e6ff, #8b5cf6);
  box-shadow: 0 0 34px rgba(99, 230, 255, .35);
}
.bp-head h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.bp-head .bp-code { font: 600 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: #52e5a1; margin-top: 5px; display: block; }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.bp-cell {
  border: 1px solid rgba(125, 211, 252, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
  padding: 14px 16px;
}
.bp-cell .k { font: 600 9.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #93a7c4; }
.bp-cell .v { display: block; font-weight: 700; font-size: .98rem; margin-top: 7px; color: #eaf2fd; }
.bp-cell .v.hl { color: #52e5a1; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.bp-feats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.bp-feat {
  font-size: .74rem; font-weight: 600;
  color: #a9e8ff;
  padding: 6px 13px;
  border: 1px solid rgba(99, 230, 255, .22);
  border-radius: 99px;
  background: rgba(99, 230, 255, .06);
}
.bp-feat i { margin-right: 5px; color: #52e5a1; }

/* Mini-form del blueprint */
.bp-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: start; }
.bp-form input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(125, 211, 252, .18);
  background: rgba(3, 8, 15, .7);
  color: #eaf2fd; font: 500 .92rem/1.3 Inter, sans-serif;
  transition: border-color .25s;
}
.bp-form input:focus { outline: none; border-color: #63e6ff; }
.bp-form input::placeholder { color: rgba(147, 167, 196, .55); }
@media (max-width: 680px) { .bp-form { grid-template-columns: 1fr; } }
.bp-sent {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border: 1px solid rgba(82, 229, 161, .3);
  border-radius: 14px;
  background: rgba(82, 229, 161, .08);
  color: #b7f5d8; font-weight: 600; font-size: .93rem;
}
.bp-sent i { color: #52e5a1; font-size: 20px; }
.bp-note { color: #63758f; font-size: .78rem; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .forge-pane, .forge-blueprint { animation: none; }
  .forge-opt, .forge-btn { transition: none; }
}