/*
 * Kit común de las simulaciones (maquetación, controles, resultados y temas).
 *
 * Maquetación: una escena grande (.sk-stage) y una columna lateral (.sk-side)
 * con los controles y los resultados. Los controles nunca flotan sobre la
 * escena; lo único que va encima son rótulos informativos (.sk-hud) que no
 * reciben clics. En pantallas estrechas la escena se queda arriba, fija, y la
 * columna pasa debajo.
 *
 * Tema: claro u oscuro según `?tema=claro|oscuro` o, si no viene, según el
 * sistema (el iframe hereda la preferencia). Lo aplica sim-kit.js en
 * <html data-tema>. La escena es oscura en los dos temas: la luz, los campos y
 * las trayectorias brillan sobre fondo oscuro.
 *
 * Paleta tomada de src/app/globals.css (tema «Cuaderno» de la app).
 */

:root {
  --bg: #f6f3ea;
  --surface: #fffdf8;
  --surface-2: #f1ecdf;
  --text: #2a2620;
  --text-muted: #574f40;
  --text-faint: #736b59;
  --border: #e7e0cf;
  --border-strong: #d8ceb8;
  --brand: #1f6a5c;
  --brand-strong: #18534a;
  --brand-fg: #fffdf8;
  --brand-soft: #e7f0eb;
  --ok: #3f7d4e;   --ok-soft: #e8f1e4;   --ok-fg: #2f6a3d;
  --warn: #a8731f; --warn-soft: #f7ecd6; --warn-fg: #855a14;
  --err: #b04a3a;  --err-soft: #f6e6e0;  --err-fg: #8e372a;
  --shadow: 0 1px 2px rgba(60,50,30,.06), 0 8px 24px rgba(60,50,30,.06);

  /* Escena: siempre oscura */
  --stage: #12100c;
  --stage-2: #1c1914;
  --stage-text: #efe8d8;
  --stage-faint: rgba(239,232,216,.55);
  --stage-line: rgba(239,232,216,.14);

  /* Magnitudes físicas: el mismo color en todas las simulaciones */
  --q-pos: #e0654f;       /* carga positiva, protón */
  --q-neg: #4f8fe0;       /* carga negativa, electrón */
  --campo-b: #a57be0;     /* campo magnético */
  --campo-g: #e0a84f;     /* campo gravitatorio */
  --energia-c: #e0a84f;   /* energía cinética */
  --energia-p: #e0654f;   /* energía potencial */
  --energia-m: #5fc2a8;   /* energía mecánica */

  --side-w: 312px;
  --radius: 12px;
  --radius-sm: 8px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  color-scheme: light;
}

:root[data-tema="oscuro"] {
  --bg: #110f0a;
  --surface: #1a1712;
  --surface-2: #25211a;
  --text: #f2ede0;
  --text-muted: #c9c1ad;
  --text-faint: #a39a85;
  --border: #332d22;
  --border-strong: #4a4331;
  --brand: #6fbfa6;
  --brand-strong: #8ed3bc;
  --brand-fg: #10241f;
  --brand-soft: #1d3831;
  --ok: #6aba7c;   --ok-soft: #1d2f22;   --ok-fg: #8fd39e;
  --warn: #d9a44a; --warn-soft: #332715; --warn-fg: #e7bd72;
  --err: #e0796a;  --err-soft: #35211c;  --err-fg: #f0a294;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --stage: #0b0a07;
  --stage-2: #15130e;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ── Maquetación ─────────────────────────────────────────────── */
.sk-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-w);
  height: 100vh;
  height: 100dvh;
}
.sk-stage {
  position: relative;
  min-width: 0; min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 40%, var(--stage-2), var(--stage) 70%);
  color: var(--stage-text);
}
.sk-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.sk-side {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 16px 16px 20px;
  display: flex; flex-direction: column; gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

@media (max-width: 860px) { :root { --side-w: 276px; } .sk-side { padding: 14px 13px 18px; gap: 16px; } }

/* Estrecho: escena arriba (fija al hacer scroll) y controles debajo */
@media (max-width: 620px) {
  body { overflow: auto; }
  .sk-app { display: block; height: auto; }
  .sk-stage { position: sticky; top: 0; z-index: 2; height: 56vh; min-height: 250px; max-height: 520px; }
  .sk-side { border-left: 0; border-top: 1px solid var(--border); overflow: visible; }
}

/* ── Cabecera de la columna ──────────────────────────────────── */
.sk-head h1 { margin: 0; font-size: 16.5px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.sk-head p { margin: 3px 0 0; font-size: 12px; color: var(--text-faint); }

.sk-sec { display: flex; flex-direction: column; gap: 12px; }
.sk-sec + .sk-sec { padding-top: 16px; border-top: 1px solid var(--border); }
.sk-eyebrow {
  margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint);
}
.sk-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-faint); }
.sk-note strong { color: var(--text-muted); font-weight: 600; }

/* ── Deslizador con valor editable ───────────────────────────── */
.sk-field { display: flex; flex-direction: column; gap: 7px; }
.sk-field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sk-label { font-size: 13px; font-weight: 500; color: var(--text); }
.sk-label small { color: var(--text-faint); font-weight: 400; }
.sk-value { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.sk-value input {
  width: 80px; text-align: right;
  font: 600 13px var(--font); font-variant-numeric: tabular-nums;
  color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: 6px; padding: 2px 5px;
  -moz-appearance: textfield;
}
.sk-value input::-webkit-outer-spin-button, .sk-value input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sk-value input:hover { border-color: var(--border); }
.sk-value input:focus { outline: none; border-color: var(--brand); background: var(--surface-2); }
.sk-value .sk-unit { font-size: 11.5px; color: var(--text-faint); }
.sk-sub { font-size: 11px; color: var(--text-faint); margin-top: -3px; min-height: 1em; }

.sk-range {
  --pct: 50%;
  --track: linear-gradient(90deg, var(--brand) 0 var(--pct), var(--border-strong) var(--pct) 100%);
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer;
}
.sk-range:focus { outline: none; }
.sk-range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--track); }
.sk-range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--track); }
.sk-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brand);
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .12s ease;
}
.sk-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.sk-range:hover::-webkit-slider-thumb, .sk-range:focus-visible::-webkit-slider-thumb { transform: scale(1.12); }
.sk-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent); }
/* Pista con fondo propio (p. ej. el espectro): la sombra marca la posición */
.sk-range.sk-range-custom::-webkit-slider-runnable-track { height: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.sk-range.sk-range-custom::-moz-range-track { height: 10px; }
.sk-range.sk-range-custom::-webkit-slider-thumb { margin-top: -4px; border-color: var(--text); }

/* ── Interruptor ─────────────────────────────────────────────── */
/* position: relative ancla la casilla oculta a su etiqueta. Sin ella se coloca
   respecto a la página, fuera del panel, y Chrome/Edge desplazan la ventana
   entera para enfocarla al pulsar (la escena queda cortada). */
.sk-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; user-select: none; font-size: 13px; }
.sk-switch input { position: absolute; top: 0; left: 0; margin: 0; opacity: 0; pointer-events: none; }
.sk-switch .sk-track {
  flex: 0 0 auto; position: relative; width: 34px; height: 20px; border-radius: 99px;
  background: var(--border-strong); transition: background .18s ease;
}
.sk-switch .sk-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .18s ease;
}
.sk-switch input:checked + .sk-track { background: var(--brand); }
.sk-switch input:checked + .sk-track::after { transform: translateX(14px); }
.sk-switch input:focus-visible + .sk-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent); }

.sk-off { opacity: .42; pointer-events: none; }

/* ── Selector segmentado y chips ─────────────────────────────── */
.sk-seg { display: flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.sk-seg button {
  flex: 1 1 0; appearance: none; border: 0; background: transparent; color: var(--text-muted);
  font: 600 12.5px var(--font); padding: 6px 8px; border-radius: 7px; cursor: pointer;
}
.sk-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

.sk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-chip {
  appearance: none; cursor: pointer;
  font: 600 11.5px var(--font); color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 4px 10px;
  transition: border-color .15s, color .15s, background .15s;
}
.sk-chip:hover { border-color: var(--text-faint); color: var(--text); }
.sk-chip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
:root[data-tema="oscuro"] .sk-chip[aria-pressed="true"] { color: var(--brand-strong); }

/* ── Botones ─────────────────────────────────────────────────── */
.sk-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 12.5px var(--font); color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px;
  transition: background .15s, border-color .15s, color .15s;
}
.sk-btn:hover { background: var(--surface-2); color: var(--text); }
.sk-btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-fg); }
.sk-btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--brand-fg); }
.sk-btn-mini { padding: 3px 9px; font-size: 11px; border-radius: 6px; }
.sk-btn svg { width: 14px; height: 14px; }

/* ── Resultados ──────────────────────────────────────────────── */
.sk-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sk-metric {
  padding: 9px 10px 8px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.sk-metric-label { font-size: 11px; color: var(--text-faint); line-height: 1.25; }
.sk-metric-value { margin-top: 2px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-metric-value small { font-size: 11.5px; font-weight: 600; color: var(--text-faint); margin-left: 2px; }
.sk-metric[data-tone="accent"] .sk-metric-value { color: var(--brand); }

.sk-kv { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.sk-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; }
.sk-kv dt { color: var(--text-faint); }
.sk-kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.sk-status {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.35;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
  transition: background .25s, color .25s, border-color .25s;
}
.sk-status::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sk-status[data-tone="ok"]   { background: var(--ok-soft);   color: var(--ok-fg);   border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.sk-status[data-tone="warn"] { background: var(--warn-soft); color: var(--warn-fg); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.sk-status[data-tone="err"]  { background: var(--err-soft);  color: var(--err-fg);  border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.sk-status[data-tone="ok"]::before { animation: sk-pulso 1.6s ease-out infinite; }
@keyframes sk-pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }

/* Fórmula o recordatorio */
.sk-formula {
  font: 12px/1.6 var(--mono); color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
}

/* ── Rótulos sobre la escena (no reciben clics) ──────────────── */
.sk-hud {
  position: absolute; z-index: 1; pointer-events: none;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px; font-weight: 600; color: var(--stage-faint); font-variant-numeric: tabular-nums;
}
.sk-hud-tl { top: 10px; left: 12px; }
.sk-hud-tr { top: 10px; right: 12px; align-items: flex-end; }
.sk-hud-bl { bottom: 10px; left: 12px; }
.sk-hud-br { bottom: 10px; right: 12px; align-items: flex-end; }
.sk-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 99px;
  background: rgba(20,18,14,.55); border: 1px solid rgba(239,232,216,.12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--stage-text);
}
@media (prefers-reduced-motion: reduce) {
  .sk-status[data-tone="ok"]::before { animation: none; }
}