/* Open Lambda Core — generador de pistas (pistas.html).
   Se carga después de sitio.css y docs.css: usa el marco de la simulación (.sim) y la cabecera de Docs. */

main.gen {
  display: block; width: min(100% - 2 * var(--pad), var(--ancho)); margin-inline: auto;
  padding: clamp(104px, 11vw, 140px) 0 clamp(72px, 9vw, 128px);
}
.gen__cabeza { border-bottom: 0; }
.gen__cabeza .bajada { max-width: 62ch; }

.gen__pista { aspect-ratio: var(--razon, 2/1); max-height: 72svh; width: 100%; }
.gen__grilla { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: calc(1.5px * var(--u, 1)); }
.gen__barra { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 1px; background: #242932; border-top: 1px solid #242932; }
.gen__accion { align-content: center; justify-items: start; }
.gen__check { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); cursor: pointer; }
.gen__check input { accent-color: var(--telemetria); width: 15px; height: 15px; }
.gen__datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #242932; border-top: 1px solid #242932; margin: 0; }
.gen__datos > div { background: #0F1318; padding: 18px 22px 20px; display: grid; gap: 10px; }
.gen__datos dt { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.gen__datos dd { margin: 0; font: 500 clamp(22px, 2.4vw, 30px)/1 var(--mono); letter-spacing: -.02em; color: var(--telemetria); font-variant-numeric: tabular-nums; }

.gen__guardar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: clamp(32px, 4vw, 56px); }
.gen__bloque { display: grid; gap: 12px; align-content: start; min-width: 0; }
.gen__codigo {
  width: 100%; resize: vertical; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 10px; background: var(--tarjeta);
  font: 400 13px/1.5 var(--mono); color: var(--tinta); word-break: break-all;
}
.gen__codigo:focus { outline: 2px solid var(--ed-tinta); outline-offset: 1px; }
.gen__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gen__msg { font-size: 14px; color: var(--acero); }
.gen__msg.mal { color: #B3261E; }
.gen__notas { margin-top: clamp(28px, 3.5vw, 44px); max-width: 76ch; color: var(--grafito); line-height: 1.6; }
.gen__notas a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 940px) {
  .gen__barra { grid-template-columns: 1fr; }
  .gen__guardar { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gen__datos { grid-template-columns: 1fr 1fr; }
  .gen__pista { max-height: none; }
}