/* ============================================================
   Nuevas Ciencias — Minilab: El problema de los tres cuerpos
   ------------------------------------------------------------
   EXCEPCIÓN IDENTITARIA JUSTIFICADA (ver assets/tokens.css):
   este minilab usa el modo nocturno del Lab. Las órbitas se leen
   como estelas luminosas sobre fondo negro (igual que una larga
   exposición astronómica), por lo que la paleta base se declara
   localmente en vez de heredar --bg/--text claros de tokens.css.
   Se conservan las familias tipográficas canónicas cuando aplica.
   ============================================================ */

:root{
  --bg:#05070a;
  --bg-panel:#0b1016;
  --bg-panel-2:#080c11;
  --ink:#e8edf4;
  --ink-dim:#94a3b5;
  --ink-faint:#566173;
  --line:#1b2533;
  --line-soft:#141b26;
  --accent:#8fd0ff;
  --accent-dim:#3f6486;
  --bodyA:#ff8a3c;   /* naranja */
  --bodyB:#6aa6ff;   /* azul */
  --bodyC:#ffd98a;   /* oro pálido */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background:
    radial-gradient(1200px 700px at 70% -10%, #0d1a2800 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace}
/* El escenario ocupa la ventana; el pie común queda debajo al hacer scroll. */
.app{display:grid;grid-template-columns:1fr 300px;height:100vh}
/* ---- stage ---- */
.stage{position:relative;display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;border-bottom:1px solid var(--line-soft);
  letter-spacing:.42em;font-size:13px;color:var(--ink-dim);
  text-transform:uppercase;
}
.topbar .brand{display:flex;align-items:baseline;gap:14px}
.topbar .brand b{color:var(--ink);font-weight:600;letter-spacing:.42em}
.topbar .brand span{font-size:10px;letter-spacing:.3em;color:var(--ink-faint)}
.topbar .title{font-size:11px;letter-spacing:.34em;color:var(--ink-faint)}
.canvas-wrap{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--bg)}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:default}
.app[data-view="gallery"] #stage{cursor:pointer}
/* governing equations */
.eq{
  position:absolute;left:20px;top:18px;z-index:5;
  background:linear-gradient(180deg,#0b1016e8,#080c11e8);
  border:1px solid var(--line);border-radius:10px;
  backdrop-filter:blur(6px);min-width:236px;max-width:300px;
  box-shadow:0 12px 40px #0008;
}
.eq-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 14px;cursor:pointer;user-select:none;
  letter-spacing:.26em;font-size:11px;text-transform:uppercase;color:var(--ink-dim);
}
.eq-head .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent);margin-right:9px;flex:none}
.eq-head .chev{color:var(--ink-faint);border:1px solid var(--line);border-radius:5px;
  padding:1px 7px;font-size:11px;transition:transform .25s}
.eq.collapsed .chev{transform:rotate(180deg)}
.eq-body{padding:0 16px 15px;font-size:15px;line-height:1.85;color:var(--ink);
  max-height:360px;overflow:hidden;transition:max-height .3s,opacity .25s,padding .3s}
.eq.collapsed .eq-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
.eq-body .row{display:flex;align-items:baseline;gap:10px;color:var(--ink)}
.eq-body .row span:not(.lbl){font-size:14.5px}
.eq-body .lbl{color:var(--ink-faint);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-family:ui-monospace,monospace}
.eq-body em{color:var(--accent);font-style:italic}
.eq-note{color:var(--ink-dim);font-size:12.5px;line-height:1.6;margin-top:9px;
  border-top:1px solid var(--line-soft);padding-top:10px;font-family:inherit}
/* orbit name overlay (focus mode) */
.orbit-tag{position:absolute;right:18px;top:16px;z-index:5;text-align:right;
  pointer-events:none}
.orbit-tag .ot-name{font-family:"Playfair Display",Georgia,serif;font-size:22px;
  color:var(--ink);letter-spacing:.02em;line-height:1.1}
.orbit-tag .ot-sub{font-family:ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin-top:5px}
/* readout */
.readout{position:absolute;left:20px;bottom:16px;z-index:5;
  font-size:12px;line-height:1.7;color:var(--ink-faint);letter-spacing:.04em}
.readout b{color:var(--ink-dim);font-weight:400}
/* ---- control panel ---- */
.panel{background:linear-gradient(180deg,var(--bg-panel),var(--bg-panel-2));
  border-left:1px solid var(--line);overflow-y:auto;padding:6px 0 30px}
.panel::-webkit-scrollbar{width:8px}
.panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.pgroup{padding:18px 22px 6px}
.pgroup + .pgroup{border-top:1px solid var(--line-soft)}
.pgroup h3{font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:16px;font-weight:400;font-family:inherit}
/* focus-only groups/controls: hidden in gallery view */
.app[data-view="gallery"] .only-focus{display:none}
.ctl{margin-bottom:17px}
.ctl .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.ctl .name{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink)}
.ctl .val{font-size:13px;color:var(--ink-dim);font-family:ui-monospace,monospace}
.ctl-note{margin-top:8px;color:var(--ink-faint);font-size:11.5px;line-height:1.5;font-family:inherit}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;
  background:var(--line);border-radius:3px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;background:var(--ink);
  border:3px solid var(--bg-panel);box-shadow:0 0 0 1px var(--accent-dim);transition:transform .1s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:var(--ink);border:3px solid var(--bg-panel);box-shadow:0 0 0 1px var(--accent-dim)}
/* select */
select{width:100%;background:var(--bg-panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:6px;padding:9px 10px;font-size:13.5px;
  font-family:inherit;cursor:pointer;outline:none}
select:focus{border-color:var(--accent-dim)}
.orbit-meta{margin-top:12px;font-size:11.5px;line-height:1.75;color:var(--ink-faint);
  letter-spacing:.03em}
.orbit-meta b{color:var(--ink-dim);font-weight:400}
.orbit-meta .om-cls{color:var(--accent);letter-spacing:.16em;text-transform:uppercase;font-size:10.5px}
.btnrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.btn{flex:1;min-width:54px;text-align:center;padding:8px 6px;border:1px solid var(--line);
  background:transparent;color:var(--ink-dim);border-radius:6px;cursor:pointer;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-family:ui-monospace,monospace;transition:.15s}
.btn:hover{border-color:var(--accent-dim);color:var(--ink)}
.btn.on{background:#102031;border-color:var(--accent-dim);color:var(--accent);
  box-shadow:inset 0 0 12px #8fd0ff18}
.status{display:flex;align-items:center;gap:9px;padding:14px 22px 4px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  font-family:ui-monospace,monospace}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hint{padding:2px 22px 0;color:var(--ink-faint);font-size:11.5px;line-height:1.5;font-family:inherit}

/* ---- minilab nav: el botón dorado de tokens.css resalta mejor en oscuro ---- */
.nc-minilab-nav{z-index:10001}

/* ---- pie común: vive debajo del escenario de 100vh (estilos en minilab-nav.css) ---- */
.nc-minilab-footer{margin-top:0}

/* ---- responsive: en móvil, panel debajo del escenario ---- */
@media (max-width:760px){
  body{overflow:auto}
  .app{grid-template-columns:1fr;height:auto;min-height:100vh}
  .stage{height:64vh;min-height:380px}
  .panel{border-left:none;border-top:1px solid var(--line)}
  .eq{min-width:200px;max-width:none;left:12px;top:54px;right:12px}
  .orbit-tag .ot-name{font-size:18px}
}

/* ---- accesibilidad: respeta la preferencia de movimiento reducido ---- */
@media (prefers-reduced-motion:reduce){
  .status .dot{animation:none}
}