/* style.css — Tierra · Luna · Sol. Variables al inicio; el resto solo las consume. */
:root {
  /* Paleta Scalar: 12 tonos del círculo cromático. Solo se conocen los extremos (#25c878, #2474c3);
     el resto está interpolado. Reemplaza c2–c11 por los valores canónicos. */
  --c1:#25c878; --c2:#45d34c; --c3:#7fd345; --c4:#c0d345; --c5:#d3a645; --c6:#d36545;
  --c7:#d34565; --c8:#d345a6; --c9:#c045d3; --c10:#7f45d3; --c11:#454cd3; --c12:#2474c3;

  --fondo:#0c0c10; --superficie:#15151c; --borde:#2a2a36;
  --texto:#ece9f2; --subtexto:#8b8899;

  --sol:var(--c5); --tierra:var(--c12); --luna:var(--texto);
  --traza:var(--c8); --traza-head:var(--c10);   /* modo monocromo */
  --orbita:#ffffff;

  --w-orbita:.8px; --w-traza:1.1px; --w-head:2.2px;

  --pad:clamp(.75rem, 2.5vw, 1.5rem);
  --gap:clamp(.6rem, 1.6vw, 1.1rem);
  --fs:clamp(.72rem, .68rem + .2vw, .85rem);
  --font-ui:'Outfit', system-ui, sans-serif;
  --font-mono:'Martian Mono', ui-monospace, monospace;
}

* { box-sizing:border-box; }
body {
  margin:0; height:100dvh; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden;
  background:var(--fondo); color:var(--texto); font:var(--fs)/1.4 var(--font-ui);
}

/* Escena */
.escena { position:relative; min-height:0; }
#escena { display:block; width:100%; height:100%; }
.orbita { fill:none; stroke:var(--orbita); stroke-opacity:.2; stroke-width:var(--w-orbita); vector-effect:non-scaling-stroke; }
.orbita--luna { stroke-opacity:.14; }
.traza { fill:none; stroke-width:var(--w-traza); stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.traza--head { stroke-width:var(--w-head); }
.etiquetas text { fill:var(--texto); opacity:.7; font-family:var(--font-mono); }

/* HUD */
.hud { position:absolute; top:var(--pad); left:var(--pad); font-family:var(--font-mono); pointer-events:none; }
.hud p { margin:0; }
.hud__fecha { font-size:clamp(1rem, .8rem + 1.2vw, 1.6rem); font-weight:500; }
.hud__dato { margin-top:.2rem; color:var(--subtexto); font-size:calc(var(--fs) * .9); }

/* Inset: Tierra–Luna */
.inset { position:absolute; left:var(--pad); bottom:var(--pad); width:clamp(9rem, 24vmin, 16rem); }
.inset[hidden] { display:none; }
#inset { display:block; width:100%; aspect-ratio:1; }
.orbita--inset { stroke-opacity:.35; vector-effect:none; stroke-width:.8; }
.linea { stroke-width:.8; vector-effect:none; }
.linea--aps { stroke:var(--c5); stroke-dasharray:3 3; }
.linea--nod { stroke:var(--c9); stroke-dasharray:1 3; }
.etiquetas--inset text { font-size:9px; text-anchor:middle; dominant-baseline:middle; }
.inset__nota { margin:.25rem 0 0; color:var(--subtexto); font-family:var(--font-mono); font-size:calc(var(--fs) * .75); }

/* Panel */
.panel { background:var(--superficie); border-top:1px solid var(--borde); padding:var(--pad); max-height:50dvh; overflow:auto; }
.transporte { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap:var(--gap); align-items:end; }
.botones { display:flex; gap:.5rem; }
.rejilla { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap:var(--gap); margin-top:var(--gap); }
.ajustes { margin-top:var(--gap); }
.ajustes summary { cursor:pointer; color:var(--subtexto); }

.grupo { display:grid; gap:.3rem; min-width:0; }
.grupo__top { display:flex; justify-content:space-between; gap:.5rem; color:var(--subtexto); }
output { color:var(--texto); font-family:var(--font-mono); font-size:calc(var(--fs) * .9); }

.btn, .chip {
  font:inherit; color:var(--texto); background:transparent; border:1px solid var(--borde);
  border-radius:999px; padding:.4em .9em; cursor:pointer;
}
.btn { min-width:2.6rem; }
.btn:hover, .chip:hover { border-color:var(--subtexto); }
.chip[aria-pressed="true"] { background:var(--texto); color:var(--fondo); border-color:var(--texto); }
.chip--accion { border-color:var(--c1); color:var(--c1); }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.chips--vista { grid-column:1 / -1; }

input[type=range] { appearance:none; -webkit-appearance:none; width:100%; height:1.25rem; margin:0; background:transparent; }
input[type=range]::-webkit-slider-runnable-track { height:2px; background:var(--borde); }
input[type=range]::-moz-range-track { height:2px; background:var(--borde); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; margin-top:-6px; border-radius:50%; background:var(--texto); border:0; }
input[type=range]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--texto); border:0; }
:focus-visible { outline:2px solid var(--c12); outline-offset:2px; }