/* =====================================================================
 * Simulador Z-pinch — estilo "artículo académico (LaTeX)"
 * Blanco, serif tipo Computer Modern, tinta negra, secciones numeradas,
 * tablas con reglas finas (booktabs), figuras con pie. Sin efectos, sin
 * gradientes, sin color decorativo. La física y los números NO cambian.
 * ===================================================================*/

:root {
  --paper:    #ffffff;
  --ink:      #111111;
  --ink-2:    #444444;
  --ink-3:    #777777;
  --rule:     #111111;   /* reglas fuertes (booktabs, títulos) */
  --rule-soft:#d0d0d0;   /* separadores tenues */
  --figure-bg:#151515;   /* fondo de render 3D embebido */
  --link:     #16307a;   /* enlace estilo hyperref */

  --serif: "Latin Modern Roman", "CMU Serif", "Nimbus Roman", "Times New Roman", Times, Georgia, serif;
  --mono:  "Latin Modern Mono", "CMU Typewriter Text", "Consolas", "Courier New", monospace;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px;

  /* alias de compatibilidad (usados inline por el JS) */
  --sem-ok: #1f5f1f; --sem-err: #7a1f1f; --sem-warn: #5a4510; --sem-info: #333;
  --ph-amber: #d8d8d8; --data-amber: var(--ink); --data-cyan: var(--ink);
  --muted: var(--ink-2); --accent: var(--ink); --accent2: var(--link); --border: var(--rule-soft);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 15px/1.5 var(--serif);
  counter-reset: sec fig;
  text-rendering: optimizeLegibility;
}
sub, sup { font-size: .78em; line-height: 0; }
.eq { font-family: var(--serif); font-style: italic; }

.app {
  display: grid; height: 100vh;
  grid-template-columns: 300px minmax(0, 1fr) 380px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "hd hd hd" "ctrl viz res";
  gap: var(--sp-5); padding: var(--sp-5);
}

/* ---------------- cabecera (bloque de título de paper) ---------------- */
header {
  grid-area: hd; text-align: center; padding: 0 0 var(--sp-3); background: transparent;
  border-bottom: 1px solid var(--ink);
}
header h1 { font-family: var(--serif); font-size: 1.55rem; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
header .sub { display: block; color: var(--ink-2); font-size: .85rem; font-style: italic; line-height: 1.5; }
header .sub b { color: var(--ink); font-weight: 700; font-style: normal; }

/* ---------------- columnas (multi-columna con filete) ---------------- */
.col { overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-5); min-height: 0; }
#controls { grid-area: ctrl; border-right: 1px solid var(--rule-soft); padding-right: var(--sp-5); }
#results { grid-area: res; border-left: 1px solid var(--rule-soft); padding-left: var(--sp-5); }
#viz-col { grid-area: viz; display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; min-height: 0; }

/* barra de scroll clara y visible */
.col { scrollbar-width: thin; scrollbar-color: #999 transparent; }
.col::-webkit-scrollbar { width: 10px; }
.col::-webkit-scrollbar-track { background: transparent; }
.col::-webkit-scrollbar-thumb { background: #b8b8b8; border: 2px solid var(--paper); border-radius: 5px; }
.col::-webkit-scrollbar-thumb:hover { background: #909090; }

/* ---------------- tarjetas = bloques de documento (sin caja) ---------------- */
.card, .readout { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0; }
.sec.divider { margin-top: var(--sp-4); }

/* títulos de sección numerados */
.card h2 {
  counter-increment: sec; margin: 0 0 var(--sp-3); font-family: var(--serif);
  font-size: 1.02rem; font-weight: 700; color: var(--ink);
  padding-bottom: var(--sp-1); border-bottom: 1px solid var(--ink);
}
.card h2::before { content: counter(sec) ".\00a0\00a0"; }
.card h2 .ref-h, .card h2 .eq { font-weight: 400; font-size: .8rem; color: var(--ink-3); font-style: italic; }

/* ---------------- controles ---------------- */
.ctl { margin-bottom: var(--sp-3); }
.ctl .lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: .86rem; margin-bottom: var(--sp-1); }
.ctl .lbl .u { color: var(--ink-3); font-size: .74rem; font-style: italic; }
.ctl .row { display: flex; gap: var(--sp-2); align-items: center; }
.ctl input[type="range"] { flex: 1; accent-color: var(--ink); min-width: 0; height: 3px; }
.ctl input[type="number"], select, .btn {
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink-3);
  border-radius: 0; padding: 3px 6px; font-size: .82rem; font-family: var(--mono);
}
.ctl input[type="number"] { width: 88px; }
select { width: 100%; font-family: var(--serif); padding: 4px 6px; }
input:focus, select:focus, .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
input.clamped { outline: 2px solid var(--sem-err); }

.btn { cursor: pointer; font-family: var(--serif); }
.btn:hover { background: #eee; }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.btn.primary:hover { background: #333; }

.check { display: flex; gap: var(--sp-2); align-items: center; font-size: .84rem; margin: var(--sp-2) 0; }
.check input { accent-color: var(--ink); }
.auto-row { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-2); flex-wrap: wrap; }

details.adv > summary, details.model > summary { cursor: pointer; color: var(--link); font-size: .84rem; margin: var(--sp-2) 0; }
details.model { margin-top: var(--sp-4); border-top: 1px solid var(--rule-soft); padding-top: var(--sp-3); }
.model-eqs { font-size: .82rem; color: var(--ink-2); line-height: 1.7; overflow-x: auto; padding-bottom: 2px; }
.model-eqs math { color: var(--ink); font-family: var(--serif); }
/* NO forzar display:block por CSS: rompe el layout de MathML (los hijos se
   apilan). El atributo display="block" del <math> ya lo hace bloque. */
.eqn-main math, .eqn-defs math { margin: .55em 0; math-style: normal; }
.eqn-main math { font-size: 1.12rem; }
.eqn-defs math { font-size: 1rem; }
.eqn-note { font-size: .8rem; color: var(--ink-2); font-style: italic; margin: 10px 0 2px; line-height: 1.55; }
.eqn-note math { font-size: .98rem; vertical-align: -0.35em; margin: 0 1px; }
.preset-note { font-size: .8rem; color: var(--ink-2); margin-top: var(--sp-2); line-height: 1.5; font-style: italic; }

/* ---------------- figuras (escena 3D, gráfico, Π) ---------------- */
#scene-wrap {
  position: relative; flex: 1; min-height: 250px; overflow: hidden;
  background: var(--figure-bg); border: 1px solid var(--ink);
}
#scene-wrap canvas, #pi-wrap canvas { display: block; width: 100% !important; height: 100% !important; }
.figcaption {
  counter-increment: fig; font-size: .8rem; color: var(--ink-2); line-height: 1.45;
  margin-top: var(--sp-2); text-align: left;
}
.figcaption::before { content: "Figura " counter(fig) ". "; font-weight: 700; color: var(--ink); }

#hud {
  position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 3; font-size: .72rem; color: #e8e8e8;
  background: rgba(0,0,0,0.55); padding: var(--sp-1) var(--sp-2); border: 1px solid #555; line-height: 1.5; font-family: var(--mono); pointer-events: none;
}
#hud b { color: #fff; font-weight: 700; }
#pinch-label {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: #fff; letter-spacing: 4px;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
#anim-bar { display: flex; gap: var(--sp-2); align-items: center; padding: 0; flex-wrap: wrap; }
#anim-bar input[type="range"] { flex: 1 1 120px; min-width: 0; accent-color: var(--ink); height: 3px; }
#anim-bar .btn { min-width: 32px; text-align: center; }
#anim-bar select { width: auto; }

#plot { width: 100%; height: 150px; background: #fff; border: 1px solid var(--ink); }

/* ---------------- lectura de temperatura (resultado destacado) ---------------- */
.readout { text-align: center; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--rule-soft); }
.readout-label { font-family: var(--serif); font-size: .92rem; color: var(--ink-2); font-style: italic; margin-bottom: var(--sp-1); }
#temp-value { font-family: var(--serif); font-size: 2.6rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
#temp-context { color: var(--ink-2); font-size: .78rem; margin-top: var(--sp-1); line-height: 1.5; font-style: italic; }

/* ---------------- KPIs (fila de estadísticos) ---------------- */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.kpi { text-align: center; padding: var(--sp-2) var(--sp-1); border-right: 1px solid var(--rule-soft); }
.kpi:last-child { border-right: none; }
.kpi-val { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.kpi-lbl { font-family: var(--serif); font-size: .72rem; color: var(--ink-2); font-style: italic; margin-top: 2px; }
.kpi-sub { font-size: .66rem; color: var(--ink-3); margin-top: 1px; }

/* ---------------- tablas booktabs ---------------- */
.kv { display: grid; grid-template-columns: 1fr auto; font-size: .82rem; border-top: 1.4px solid var(--ink); border-bottom: 1.4px solid var(--ink); }
.kv .k { color: var(--ink-2); padding: 3px 0; border-bottom: 1px solid #ededed; }
.kv .v { font-family: var(--serif); color: var(--ink); text-align: right; padding: 3px 0 3px var(--sp-3); border-bottom: 1px solid #ededed; font-variant-numeric: tabular-nums; }
.kv .k:nth-last-child(2), .kv .v:last-child { border-bottom: none; }
.kv .v b { color: var(--ink); font-weight: 700; }
.kv .ref { color: var(--ink-3); font-size: .7rem; font-style: italic; }

/* ---------------- barra de energía (escala de grises) ---------------- */
.ebar { display: flex; height: 13px; overflow: hidden; margin: var(--sp-2) 0 var(--sp-1); border: 1px solid var(--ink); }
.ebar div { height: 100%; }
.elegend { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: .74rem; color: var(--ink-2); }
.elegend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 1px solid var(--ink); vertical-align: baseline; }

/* ---------------- advertencias (notas al pie) ---------------- */
#warnings .w {
  border: none; border-left: 2px solid var(--ink); background: none; font-style: italic;
  padding: 3px 0 3px var(--sp-3); margin: var(--sp-2) 0; font-size: .8rem; line-height: 1.5; color: var(--ink-2);
}
#warnings .w::before { content: "Nota — "; font-style: normal; font-weight: 700; color: var(--ink); }
#warnings .w.warn::before { content: "Precaución — "; }
#warnings .w.error { border-left-width: 3px; }
#warnings .w.error::before { content: "Advertencia — "; }

/* ---------------- explicación ---------------- */
#explain { font-size: .84rem; }
#explain p { margin: var(--sp-2) 0; line-height: 1.6; color: var(--ink); text-align: justify; }
#explain .eq { color: var(--ink); font-style: italic; }
#explain .ref { color: var(--ink-3); font-size: .74rem; font-style: italic; }
#explain details { margin-top: var(--sp-3); }
#explain summary { cursor: pointer; color: var(--link); font-size: .82rem; }
#explain ul { margin: var(--sp-2) 0 var(--sp-1) 18px; padding: 0; color: var(--ink-2); font-size: .8rem; }
#explain li { margin: 3px 0; line-height: 1.5; }

/* ---------------- superficie Π ---------------- */
#pi-wrap { position: relative; height: 240px; overflow: hidden; background: var(--figure-bg); border: 1px solid var(--ink); }
#pi-progress { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #ccc; font-family: var(--mono); background: rgba(0,0,0,0.7); }
.pi-legend { font-size: .74rem; color: var(--ink-3); margin-top: var(--sp-1); line-height: 1.4; font-style: italic; }

/* ---------------- pie / stale ---------------- */
footer { font-size: .74rem; color: var(--ink-3); line-height: 1.6; font-style: italic; margin-top: var(--sp-3); }
footer a { color: var(--link); text-decoration: none; }
footer a:hover { text-decoration: underline; }

body.stale #results::before {
  content: "Resultados de parámetros anteriores — pulse Simular";
  display: block; border: 1px solid var(--ink); padding: var(--sp-1) var(--sp-2);
  margin-bottom: var(--sp-2); font-size: .78rem; color: var(--ink); font-style: italic;
}
body.stale #results .readout,
body.stale #results .kpis,
body.stale #results .card { opacity: .45; }

/* ---------------- responsivo ---------------- */
@media (max-width: 1250px) {
  .app {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "hd hd" "ctrl viz" "res res";
    height: auto;
  }
  .col { overflow: visible; }
  #results { border-left: none; padding-left: 0; border-top: 1px solid var(--rule-soft); padding-top: var(--sp-5); }
  #scene-wrap { min-height: 380px; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "hd" "viz" "ctrl" "res"; }
  #controls { border-right: none; padding-right: 0; }
}