/* ============================================================
   Nuevas Ciencias — Minilab: Difracción de doble rendija
   ------------------------------------------------------------
   EXCEPCIÓN IDENTITARIA JUSTIFICADA (ver assets/tokens.css):
   este minilab usa el modo nocturno del Lab. La óptica ondulatoria
   se lee mejor sobre fondo oscuro (las franjas brillan como en un
   banco óptico real), 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 (--mono/--serif) cuando aplica.
   ============================================================ */

:root{
  --bg:#0a0f0c;
  --bg-panel:#101812;
  --bg-panel-2:#0d130f;
  --ink:#e8efe9;
  --ink-dim:#8aa093;
  --ink-faint:#4f635a;
  --line:#1d2b22;
  --line-soft:#16221b;
  --accent:#7ee0a8;
  --accent-dim:#3f7a5a;
  --red:#ff5a4d;
  --grn:#5ce08a;
  --blu:#4aa8ff;
  --warn:#e0b35c;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background:
    radial-gradient(1200px 700px at 75% -10%, #12201700 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}
#field{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}
/* governing equations */
.eq{
  position:absolute;left:20px;top:18px;z-index:5;
  background:linear-gradient(180deg,#101812e8,#0c130fe8);
  border:1px solid var(--line);border-radius:10px;
  backdrop-filter:blur(6px);min-width:230px;
  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:340px;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 .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}
/* readout */
.readout{position:absolute;left:20px;bottom:16px;z-index:5;
  font-size:12px;line-height:1.7;color:var(--ink-faint);letter-spacing:.05em}
.readout b{color:var(--ink-dim);font-weight:400}
/* intensity strip label */
.istrip-label{position:absolute;right:14px;top:14px;z-index:5;
  writing-mode:horizontal-tb;font-size:10px;letter-spacing:.3em;
  color:var(--ink-faint);text-transform:uppercase}
/* ---- 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}
.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 .name .swatch{width:9px;height:9px;border-radius:50%;flex:none}
.ctl .val{font-size:13px;color:var(--ink-dim)}
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)}
input[type=range].r::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--red),0 0 10px #ff5a4d66}
input[type=range].g::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--grn),0 0 10px #5ce08a66}
input[type=range].b::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--blu),0 0 10px #4aa8ff66}
.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:#16241b;border-color:var(--accent-dim);color:var(--accent);
  box-shadow:inset 0 0 12px #7ee0a818}
.chiprow{display:flex;gap:7px}
.chip{width:38px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:13px;
  font-family:ui-monospace,monospace;color:var(--ink-dim);transition:.15s}
.chip.r.on{border-color:var(--red);color:var(--red);box-shadow:inset 0 0 12px #ff5a4d22}
.chip.g.on{border-color:var(--grn);color:var(--grn);box-shadow:inset 0 0 12px #5ce08a22}
.chip.b.on{border-color:var(--blu);color:var(--blu);box-shadow:inset 0 0 12px #4aa8ff22}
.chip.all{width:auto;flex:1;letter-spacing:.14em;font-size:11px}
.chip.all.on{border-color:var(--accent-dim);color:var(--accent)}
.footer-actions{display:flex;gap:7px;padding:6px 22px 0}
.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:62vh;min-height:360px}
  .panel{border-left:none;border-top:1px solid var(--line)}
  .eq{min-width:200px;left:12px;top:54px}
}

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