/* ============================================================
   Launcher NebelAI · réplica 3D de la segunda referencia (tema naranja)
   La ventana flota en perspectiva, las tarjetas van en capas (translateZ)
   y de fondo hay un cielo de estrellas WebGL con paralaje.
   Textos: js/textos.js (claves nl.*) · Lógica: js/launcher.js
   ============================================================ */
#launcher { padding-top: 30px; background: radial-gradient(60% 50% at 50% 55%, rgba(255, 122, 0, .10), transparent 70%); }
.nl-stage { position: relative; perspective: 2200px; perspective-origin: 50% 40%; padding: 10px 0 70px; }
.nl-float { position: relative; width: min(100%, 1020px); margin-inline: auto; transform-style: preserve-3d; will-change: transform; }
.nl {
  --or: #ff7a00; --or2: #ffa23a; --peach: #ffb46b; --tx: #efe9e2; --mu: #8f8a84; --slate: #8d97b4;
  position: relative; transform-style: preserve-3d;
  display: flex; flex-direction: column; min-height: 560px;
  font-family: var(--f-b); color: var(--tx);
  border-radius: 14px;
  box-shadow: 0 70px 120px rgba(0, 0, 0, .65), 0 0 100px rgba(255, 122, 0, .16);
  transition: transform .4s var(--ease), opacity .4s, filter .4s;
}
.nl::before { content: ''; position: absolute; inset: -1px; border-radius: 15px; pointer-events: none; padding: 1px; background: linear-gradient(140deg, rgba(255, 162, 58, .75), rgba(255, 255, 255, .05) 35%, rgba(255, 255, 255, .03) 65%, rgba(255, 122, 0, .55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.nl.off { transform: scale(.88) translateZ(0); opacity: 0; filter: brightness(2.2) saturate(0); pointer-events: none; }
.nl.boot { animation: nlboot .7s var(--ease); }
@keyframes nlboot { from { transform: scale(.94); opacity: 0; filter: brightness(1.8); } }
.nl.nl-sweep::after { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; transform: translateZ(70px); background: linear-gradient(100deg, transparent 35%, rgba(255, 162, 58, .26) 50%, transparent 65%); background-size: 250% 100%; animation: nmsweep 1.1s var(--ease) forwards; }

/* Fondo de la ventana: degradado oscuro + canvas de estrellas (WebGL) */
.nl-bg { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: radial-gradient(120% 80% at 50% -10%, #171009 0%, #0b0a0a 50%, #080707 100%); }
.nl-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nl-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 50% at 50% 115%, rgba(255, 122, 0, .12), transparent 60%), linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .35)); }
.nl-shadow { position: absolute; left: 10%; right: 10%; bottom: -60px; height: 90px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 122, 0, .4), transparent); filter: blur(24px); transform: translateZ(-120px) rotateX(80deg); pointer-events: none; }
.nl-z1 { transform: translateZ(16px); }
.nl-z2 { transform: translateZ(34px); }
.nl-z3 { transform: translateZ(52px); }

/* Barra superior: logo, pestañas, fecha, minimizar y cerrar */
.nl-bar { position: relative; display: flex; align-items: center; gap: 18px; height: 92px; padding: 16px 24px 0 26px; }
.nl-logo { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 9px; border: 2px solid var(--or); background: #0e0b0a; box-shadow: 0 0 18px rgba(255, 122, 0, .35), inset 0 0 10px rgba(255, 122, 0, .15); }
.nl-logo svg { width: 20px; height: 24px; }
.nl-sep { width: 1px; height: 30px; flex: none; background: rgba(255, 255, 255, .14); }
.nl-tabs { position: relative; display: flex; gap: 6px; }
.nl-tab { position: relative; padding: 12px 10px 14px; font: 700 15px/1 var(--f-b); letter-spacing: .02em; color: #b9b2aa; transition: color .2s; }
.nl-tab:hover, .nl-tab.on { color: #fff; }
.nl-ink { position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; border-radius: 2px; background: var(--or); box-shadow: 0 0 10px var(--or); transition: transform .35s var(--ease), width .35s var(--ease); }
.nl-date { margin-left: auto; font: 500 15px/1 var(--f-b); letter-spacing: .03em; color: #e6e0d8; font-variant-numeric: tabular-nums; }
.nl-win { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; color: #9a948d; transition: background .2s, color .2s; }
.nl-win .ico { width: 16px; height: 16px; }
.nl-win:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nl-win.nl-x:hover { background: rgba(255, 80, 40, .2); color: #ff6b4a; }

/* Cuerpo: consola + dos tarjetas */
.nl-body { position: relative; margin: 0 12px; padding: 34px 18px 18px; display: grid; gap: 14px; border-radius: 12px; background: rgba(16, 13, 12, .55); border: 1px solid rgba(255, 122, 0, .16); transform-style: preserve-3d; transform-origin: 50% 0; transition: opacity .45s, transform .45s var(--ease), height .45s var(--ease), padding .45s var(--ease); }
.nl-body.min { opacity: 0; transform: scaleY(0) translateZ(0); padding-top: 0; padding-bottom: 0; pointer-events: none; }
.nl-panel { position: relative; padding: 22px 24px; border-radius: 14px; background: rgba(13, 11, 11, .92); border: 1.5px solid var(--or); box-shadow: 0 0 22px rgba(255, 122, 0, .25), inset 0 0 0 1px rgba(255, 122, 0, .12), 0 24px 40px rgba(0, 0, 0, .4); }
.nl-log { padding: 14px 18px; }
.nl-notch { position: absolute; left: 14px; top: -27px; padding: 7px 24px 8px; border: 1.5px solid var(--or); border-bottom: 0; border-radius: 9px 9px 0 0; background: #0d0b0b; font: 700 12px/1 var(--f-c); letter-spacing: .14em; text-transform: uppercase; color: var(--peach); box-shadow: 0 -8px 18px rgba(255, 122, 0, .12); }
.nl-notch::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: #0d0b0b; }
.nl-lines { height: 78px; overflow-y: auto; font: 500 13px/1.62 var(--f-m); scrollbar-width: none; }
.nl-lines::-webkit-scrollbar { display: none; }
.nl-line { display: flex; gap: 8px; white-space: pre-wrap; animation: nlin .25s var(--ease); }
@keyframes nlin { from { opacity: 0; transform: translateX(-6px); } }
.nl-ts { flex: none; color: var(--or2); }
.nl-msg { color: var(--peach); }
.nl-msg.ok { color: #4ade80; }
.nl-msg.err { color: #ff6b6b; }
.nl-msg.dim { color: #b7b0a8; }
.nl-caret { display: inline-block; width: 7px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--or2); animation: nlblink 1s steps(2) infinite; }
@keyframes nlblink { to { opacity: 0; } }
.nl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; transform-style: preserve-3d; }
.nl-card { display: flex; flex-direction: column; min-height: 258px; }
.nl-info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font: 500 14.5px/1.4 var(--f-b); color: var(--mu); }
.nl-info + .nl-info { margin-top: 10px; }
.nl-info b { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; }
.nl-info > span { font-weight: 700; color: var(--lab, var(--or)); }   /* etiquetas: color de nl.labelColor (admin), naranja por defecto */
.nl-selopt b.busy { color: var(--peach); animation: nlblink .6s steps(2) infinite; }
.nl-big { position: relative; overflow: hidden; margin-top: auto; height: 46px; border-radius: 8px; font: 800 15px/1 var(--f-b); letter-spacing: .05em; text-transform: uppercase; color: #2b0f00; background: linear-gradient(90deg, #ff9a1a, #ff6a00); box-shadow: 0 0 26px rgba(255, 122, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .2s, filter .2s; }
.nl-big::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-20deg); transition: left .6s var(--ease); }
.nl-big:hover { transform: translateY(-1px); filter: brightness(1.08); }
.nl-big:hover::after { left: 120%; }
.nl-big:active { transform: translateY(0) scale(.985); }
.nl-big.done { background: linear-gradient(90deg, #4ade80, #22c55e); box-shadow: 0 0 26px rgba(34, 197, 94, .45); color: #04220f; }
.nl-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 2px; font: 600 14.5px/1.3 var(--f-b); color: #e8e2da; border-bottom: 1px solid rgba(255, 255, 255, .07); cursor: pointer; }
.nl-row:first-child { padding-top: 2px; }
.nl-row-in { display: block; cursor: default; border-bottom: 0; }
.nl-text { cursor: default; margin: 0; }
.nl-text > span { line-height: 1.35; }
.nl-row > span, .nl-row-in > label { font-weight: 700; color: var(--lab, var(--or)); }
.nl-tog { position: relative; flex: none; width: 40px; height: 22px; border-radius: 11px; background: #3a2e26; transition: background .25s, box-shadow .25s; }
.nl-tog::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); transition: transform .25s var(--ease), background .25s; }
.nl-tog[aria-checked="true"] { background: var(--or); box-shadow: 0 0 12px rgba(255, 122, 0, .5); }
.nl-tog[aria-checked="true"]::after { transform: translateX(18px); background: #1a0c02; }
.nl-in { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.nl-in input { flex: 1; min-width: 0; padding: 6px 2px 8px; font: 700 14px/1 var(--f-m); letter-spacing: .06em; color: var(--peach); background: none; border: 0; border-bottom: 2px solid var(--or); border-radius: 0; outline: none; transition: border-color .2s, color .2s; }
.nl-in input:focus { border-color: var(--or2); }
.nl-in.ok input { color: #4ade80; border-color: #22c55e; }
.nl-in.err input { color: #ff6b6b; border-color: #ef4444; animation: nlshake .35s; }
@keyframes nlshake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.nl-sq { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 6px; color: var(--or2); border: 1.5px solid var(--or); background: rgba(255, 122, 0, .08); transition: background .2s, color .2s, transform .2s; }
.nl-sq .ico { width: 15px; height: 15px; }
.nl-sq:hover { background: var(--or); color: #1a0c02; }
.nl-sq:active { transform: scale(.92); }
.nl-sq.spin .ico { animation: spin .5s var(--ease); }

/* Pie: versión y accesos */
.nl-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding: 14px 26px 16px; border-top: 1px solid rgba(255, 255, 255, .06); }
.nl-ver { font: 800 15px/1 var(--f-b); letter-spacing: .06em; color: var(--slate); }
.nl-ver i { font-style: normal; margin: 0 7px; }
.nl-fico { display: flex; gap: 6px; }
.nl-ib { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: #a7adbd; transition: color .2s, background .2s; }
.nl-ib .ico { width: 18px; height: 18px; }
.nl-ib:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nl-ib[aria-pressed="false"] { color: #5f6472; }

@media (max-width: 900px) {
  .nl-grid { grid-template-columns: 1fr; }
  .nl-card { min-height: 0; }
  .nl-big { margin-top: 18px; }
}
@media (max-width: 760px) {
  .nl-stage { padding-bottom: 40px; }
  .nl { min-height: 0; }
  .nl-bar { flex-wrap: wrap; height: auto; gap: 10px 12px; padding: 14px 14px 0; }
  .nl-sep { display: none; }
  .nl-tabs { order: 10; flex-basis: 100%; }
  .nl-date { font-size: 13px; }
  .nl-body { margin: 10px 8px 0; padding: 30px 12px 12px; }
  .nl-panel { padding: 16px; }
  .nl-foot { padding: 12px 14px 14px; }
  .nl-z1, .nl-z2, .nl-z3 { transform: none; }
}