/* Generador de servidor: estilo moderno (sustituye al neo-brutal) */
html[data-ui="2"] .sp { gap: 36px; }
html[data-ui="2"] .sp-form { gap: 18px; }
html[data-ui="2"] .sp-step { border: 1px solid var(--line); border-radius: 20px; padding: 26px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, #fff 4%), var(--card)); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -30px rgba(0,0,0,.6); scroll-margin-top: 150px; transition: border-color .2s; }
html[data-ui="2"] .sp-step:focus-within { border-color: color-mix(in srgb, var(--forge) 55%, var(--line)); }
html[data-ui="2"] .sp-step h2 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 18px; }
html[data-ui="2"] .sp-step h2::before { width: 34px; height: 34px; background: linear-gradient(135deg, #ff6b78, #ff3b4e); box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--forge) 70%, transparent); border-radius: 11px; }
html[data-ui="2"] .sp-types { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
html[data-ui="2"] .sp-type, html[data-ui="2"] .sp-ver { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: color-mix(in srgb, var(--ink) 4%, transparent); transition: transform .15s, border-color .15s, background .15s, box-shadow .15s; }
html[data-ui="2"] .sp-type em { font-size: 34px; margin-bottom: 8px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
html[data-ui="2"] .sp-type:hover, html[data-ui="2"] .sp-ver:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--forge) 60%, var(--line)); }
html[data-ui="2"] .sp-type.is-on, html[data-ui="2"] .sp-ver.is-on { background: linear-gradient(145deg, color-mix(in srgb, var(--forge) 26%, transparent), color-mix(in srgb, #8352e6 18%, transparent)); color: var(--ink); border-color: var(--forge); box-shadow: 0 0 0 1px var(--forge), 0 14px 34px -14px color-mix(in srgb, var(--forge) 70%, transparent); }
html[data-ui="2"] .sp-type.is-on small, html[data-ui="2"] .sp-ver.is-on small { opacity: .85; }
html[data-ui="2"] .sp-in { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
html[data-ui="2"] .sp-seg { border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); padding: 4px; gap: 4px; }
html[data-ui="2"] .sp-seg button { border-radius: 999px; transition: background .15s; }
html[data-ui="2"] .sp-seg button.is-on { background: linear-gradient(135deg, #ff6b78, #ff3b4e); color: #fff; }
html[data-ui="2"] .sp-plugin { border: 1px solid var(--line); border-radius: 14px; padding: 14px; transition: border-color .15s, background .15s, transform .15s; }
html[data-ui="2"] .sp-plugin:hover { transform: translateY(-2px); }
html[data-ui="2"] .sp-icon-b { border: 1px solid var(--line); border-radius: 12px; }
html[data-ui="2"] .sp-range input { height: 8px; }
html[data-ui="2"] .sp-card { border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 50px -30px rgba(0,0,0,.7); background: linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, #fff 6%), var(--card)); }
html[data-ui="2"] .sp-mock { border-radius: 12px; border: 1px solid rgba(255,255,255,.08); }
html[data-ui="2"] .sp-props pre { border-radius: 12px; }
html[data-ui="2"] .sp-dl { position: relative; overflow: hidden; border-radius: 16px; padding: 18px 22px; font-size: 18px; box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--forge) 80%, transparent); }
html[data-ui="2"] .sp-dl::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); animation: sp-shine 3.6s ease-in-out infinite; }
@keyframes sp-shine { 55%, 100% { transform: translateX(120%); } }
html.lite .sp-dl::after { display: none; }
.sp-rail { position: sticky; top: 74px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 8px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); scrollbar-width: none; }
.sp-rail::-webkit-scrollbar { display: none; }
.sp-rail a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: background .15s, color .15s; }
.sp-rail a i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 12%, transparent); font-style: normal; font-size: 11px; }
.sp-rail a.is-on { background: color-mix(in srgb, var(--forge) 20%, transparent); color: var(--ink); }
.sp-rail a.is-on i { background: var(--forge); color: #fff; }
.sp-sum { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-sum span { padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--forge) 14%, transparent); border: 1px solid color-mix(in srgb, var(--forge) 35%, transparent); font-size: 13px; font-weight: 700; }

/* modo asistente: un paso cada vez */
.sp-rail { position: static; }
.sp-rail button { display: flex; align-items: center; gap: 8px; padding: 9px 15px; border: 0; border-radius: 999px; background: transparent; font: 700 13px/1 inherit; color: var(--ink-2); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.sp-rail button i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 12%, transparent); font-style: normal; font-size: 11px; }
.sp-rail button.is-done i { background: #2fa866; color: #fff; }
.sp-rail button.is-done i::before { content: '✓'; }
.sp-rail button.is-done i { font-size: 0; }
.sp-rail button.is-done i::before { font-size: 12px; }
.sp-rail button.is-on { background: color-mix(in srgb, var(--forge) 20%, transparent); color: var(--ink); }
.sp-rail button.is-on i { background: var(--forge); color: #fff; }
.sp-prog { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.sp-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ff6b78, #8352e6); transition: width .35s ease; }
.is-wizard .sp-step { display: none; }
.is-wizard .sp-step.is-cur { display: block; animation: sp-in .3s ease; min-height: 340px; }
@keyframes sp-in { from { opacity: 0; transform: translateY(10px); } }
.sp-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sp-nav .sp-count { color: var(--ink-2); font-size: 14px; font-weight: 700; }
.sp-nav .btn { padding: 14px 24px; font-size: 16px; }
.sp-nav [hidden] { display: none; }
.sp-nav .sp-back { margin-right: auto; }
.sp-nav .sp-next { margin-left: auto; }
.sp-dl.is-pulse { animation: sp-pulse .6s ease 3; }
@keyframes sp-pulse { 50% { transform: scale(1.05); } }
html.lite .is-wizard .sp-step.is-cur { animation: none; }

.is-wizard .sp-step h2[data-n]::before { content: attr(data-n); }

html[data-ui="2"] .sp-dl::after { animation: none; }
html[data-ui="2"] .sp-dl:hover::after { animation: sp-shine 1.1s ease-out 1; }

/* sobrio */
html[data-ui="2"] .sp-dl::after, html[data-ui="2"] .sp-dl:hover::after { display: none; animation: none; }
html[data-ui="2"] .sp-dl { box-shadow: none; }
html[data-ui="2"] .sp-step { background: var(--card); box-shadow: none; }
html[data-ui="2"] .sp-step h2::before { background: var(--forge); box-shadow: none; border-radius: 8px; }
html[data-ui="2"] .sp-type.is-on, html[data-ui="2"] .sp-ver.is-on { background: color-mix(in srgb, var(--forge) 14%, transparent); box-shadow: none; }
html[data-ui="2"] .sp-type em { filter: none; }
html[data-ui="2"] .sp-seg button.is-on { background: var(--forge); }
html[data-ui="2"] .sp-card { background: var(--card); box-shadow: none; }
.sp-prog i { background: var(--forge); }