:root {
  /* Escena de laboratorio: el cerebro ocupa el centro y los instrumentos bordean la pantalla,
     como en un monitor de neurofisiología. Un solo tema oscuro, a propósito: el tejido brilla sobre negro. */
  color-scheme: dark;
  --tinta: #07080c;      /* fondo */
  --hueso: #e8eaf0;      /* texto principal */
  --niebla: #a9afbf;     /* texto secundario */
  --apagado: #7d8597;    /* rótulos y ejes */
  --hilo: #1b2030;       /* líneas finas */
  --eje: #2a3142;        /* bordes y líneas base */

  /* Sentidos que tiñen neuronas: paleta categórica validada sobre el fondo, en orden fijo */
  --s1: #3987e5; /* Humanidad */
  --s2: #d95926; /* Tierra */
  --s3: #199e70; /* Magnetosfera */
  --s4: #c98500; /* Sol */
  --s5: #d55181; /* Intercambio */
  --s6: #008300; /* Órbita */
  --s7: #9085e9; /* Relámpagos */
  --s8: #e66767; /* Entorno */

  /* Estado de las conexiones */
  --bueno: #0ca30c;
  --aviso: #fab219;
  --critico: #d03b3b;

  --display: "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, "Times New Roman", serif;
  --texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dato: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --margen: clamp(16px, 2.2vw, 30px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--tinta);
  color: var(--hueso);
  font: 400 13px/1.5 var(--texto);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- escena */
.escena {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr) minmax(270px, 330px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px 32px;
  padding: var(--margen);
}

#lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  outline: none;
}
#lienzo.arrastrando { cursor: grabbing; }
#lienzo:focus-visible { box-shadow: inset 0 0 0 2px var(--niebla); }

.panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  pointer-events: none;
  text-shadow: 0 0 10px var(--tinta), 0 0 3px var(--tinta);
}
.panel button,
.panel input,
.panel select,
.panel canvas { pointer-events: auto; }

h2 {
  margin: 0 0 8px;
  font: 500 10.5px/1 var(--dato);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apagado);
}

/* ---------------------------------------------------------------- título */
.titulo { grid-column: 1; grid-row: 1; }

h1 {
  margin: 0 0 12px;
  font: 500 clamp(36px, 3.7vw, 54px)/0.92 var(--display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 em { font-style: italic; color: var(--niebla); }

.tesis {
  margin: 0;
  max-width: 38ch;
  color: var(--niebla);
  line-height: 1.55;
}

/* ---------------------------------------------------------------- el instante */
.ahora { grid-column: 3; grid-row: 1; text-align: right; }

.hora {
  margin: 0;
  font: 300 40px/1 var(--texto);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.fecha {
  margin: 8px 0 0;
  font: 400 11px/1.4 var(--dato);
  color: var(--apagado);
}
.cielo {
  margin: 10px 0 0;
  display: grid;
  gap: 3px;
}
.cielo div { display: flex; justify-content: flex-end; gap: 10px; }
.cielo dt {
  font: 500 10.5px/1.5 var(--dato);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--apagado);
}
.cielo dd { margin: 0; color: var(--niebla); font-size: 12px; max-width: 30ch; }
.vida {
  margin: 10px 0 0 auto;
  max-width: 34ch;
  font-size: 12px;
  line-height: 1.45;
  color: var(--hueso);
}

/* ---------------------------------------------------------------- lo que percibe */
.percepciones {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 72px);
  mask-image: linear-gradient(to bottom, transparent, #000 72px);
}
.registro {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.evento {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  animation: aparecer 0.6s ease-out;
}
.evento:nth-last-child(n + 4) { opacity: 0.62; }
.evento:nth-last-child(n + 6) { opacity: 0.38; }
.ev-hora {
  font: 400 10.5px/1.75 var(--dato);
  color: var(--apagado);
  font-variant-numeric: tabular-nums;
}
.ev-sentido {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 10.5px/1.6 var(--dato);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--niebla);
}
.ev-sentido::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tinte, transparent);
  box-shadow: inset 0 0 0 1.5px var(--tinte, var(--niebla));
}
.ev-texto { display: block; font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.ev-efecto { display: block; margin-top: 2px; font: 400 11px/1.4 var(--dato); color: var(--apagado); }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to { transform: none; }
}

/* ---------------------------------------------------------------- sentidos */
.sentidos {
  grid-column: 3;
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  pointer-events: auto;
}
.ayuda { margin: -2px 0 6px; font-size: 11.5px; color: var(--apagado); }
.lista-sentidos { list-style: none; margin: 0; padding: 0; display: grid; }

.sentido {
  width: 100%;
  display: grid;
  grid-template-columns: 9px 92px minmax(0, 1fr) 12px;
  column-gap: 8px;
  align-items: center;
  padding: 3px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-shadow: inherit;
  cursor: pointer;
}
.sentido:hover { background: rgba(232, 234, 240, 0.05); }
.sentido:focus-visible { outline: 1.5px solid var(--niebla); outline-offset: 1px; }
.sentido[aria-disabled="true"] { cursor: default; }
.sentido[aria-pressed="false"] .s-nombre,
.sentido[aria-pressed="false"] .s-valor { opacity: 0.45; }
.sentido[aria-pressed="false"] .s-marca { opacity: 0.35; }

.s-marca { width: 8px; height: 8px; border-radius: 50%; background: var(--tinte); }
.s-marca.s-forma { background: transparent; box-shadow: inset 0 0 0 1.5px var(--niebla); }
.s-nombre { font-weight: 500; font-size: 12px; white-space: nowrap; }
.s-valor {
  font: 400 10.5px/1.5 var(--dato);
  color: var(--niebla);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* El estado se ve como un signo; la palabra queda para lectores de pantalla y la leyenda. */
.s-estado {
  width: 12px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
  text-align: center;
}
.s-estado::before,
.leyenda-estados span::before { font: 400 11px/1 var(--dato); }
[data-estado="en-vivo"]::before { content: "●"; color: var(--bueno); }
[data-estado="conectando"]::before { content: "◌"; color: var(--aviso); }
[data-estado="sin-senal"]::before { content: "○"; color: var(--critico); }
[data-estado="calculado"]::before { content: "◆"; color: var(--niebla); }
[data-estado="en-pausa"]::before { content: "‖"; color: var(--niebla); }
[data-estado="desconectado"]::before { content: "–"; color: var(--apagado); }
.leyenda-estados {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 8px 0 0;
  padding-left: 6px;
  font: 400 10px/1.4 var(--dato);
  color: var(--apagado);
}
.leyenda-estados span::before { margin-right: 4px; }

/* ---------------------------------------------------------------- centro: voz, historia y pista */
.centro {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: center;
  width: min(100%, 640px);
  display: grid;
  justify-items: center;
  gap: 12px;
}
.pensamiento { margin: 0; text-align: center; }
.pensamiento blockquote {
  margin: 0 auto;
  max-width: 44ch;
  font: italic 500 clamp(19px, 1.55vw, 24px)/1.3 var(--display);
  color: var(--hueso);
  text-wrap: balance;
}
.pensamiento blockquote.nuevo { animation: aparecer 1.2s ease-out; }
.pensamiento figcaption {
  margin-top: 6px;
  font: 400 10.5px/1.4 var(--dato);
  letter-spacing: 0.08em;
  color: var(--apagado);
}
.pista {
  margin: 0;
  font: 400 11px/1.4 var(--dato);
  color: var(--apagado);
  text-align: center;
}

.historia {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--eje);
  border-radius: 8px;
  background: rgba(7, 8, 12, 0.82);
  pointer-events: auto;
}
.historia output {
  grid-column: 1 / -1;
  order: -1;
  font: 400 12px/1.4 var(--dato);
  color: var(--hueso);
  font-variant-numeric: tabular-nums;
}
.historia-ritmo { display: flex; align-items: center; gap: 6px; font: 400 10.5px/1 var(--dato); color: var(--apagado); }
.historia select {
  font: 400 11px/1 var(--dato);
  color: var(--hueso);
  background: var(--tinta);
  border: 1px solid var(--eje);
  border-radius: 5px;
  padding: 4px 6px;
}
.historia #historia-cerrar { grid-column: 1 / -1; justify-self: start; }
.historia button,
.boton {
  padding: 6px 11px;
  border: 1px solid var(--eje);
  border-radius: 6px;
  background: transparent;
  color: var(--hueso);
  font: 500 12px/1.2 var(--texto);
  cursor: pointer;
  text-shadow: none;
}
.historia button:hover,
.boton:hover { border-color: var(--apagado); }
.historia button:focus-visible,
.boton:focus-visible,
.historia select:focus-visible { outline: 1.5px solid var(--niebla); outline-offset: 2px; }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }
/* Los interruptores muestran su estado con forma, no solo con color. */
.boton[aria-pressed]::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--niebla);
  vertical-align: 1px;
}
.boton[aria-pressed="true"] { border-color: var(--niebla); background: rgba(232, 234, 240, 0.07); }
.boton[aria-pressed="true"]::before { background: var(--hueso); box-shadow: none; }

/* ---------------------------------------------------------------- signos vitales y mandos */
.signos {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(300px, 1.05fr);
  gap: 20px 36px;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid var(--hilo);
}

.trazos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.traza { margin: 0; }
.traza figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font: 500 10.5px/1.4 var(--dato);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--apagado);
}
.traza output {
  letter-spacing: 0;
  text-transform: none;
  color: var(--hueso);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.traza canvas { display: block; width: 100%; height: 52px; outline: none; border-radius: 2px; }
.traza canvas:focus-visible { box-shadow: 0 0 0 1.5px var(--niebla); }
.eje {
  display: flex;
  justify-content: space-between;
  margin: 4px 0 0;
  font: 400 10px/1 var(--dato);
  color: var(--apagado);
}

.cifras {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
}
.cifras div { min-width: 0; }
.cifras .cifra-ancha { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.cifras dt {
  font: 500 10.5px/1.4 var(--dato);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--apagado);
}
.cifra-ancha dt { flex-basis: 100%; }
.cifras dd {
  margin: 2px 0 0;
  font: 400 21px/1.15 var(--texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cifras dd.sub { font: 400 11px/1.4 var(--dato); color: var(--niebla); white-space: normal; }

.mandos { display: grid; gap: 8px; align-content: end; }
.botones { display: flex; flex-wrap: wrap; gap: 6px; }
.nota { margin: 0; min-height: 1.4em; font-size: 11.5px; line-height: 1.4; color: var(--niebla); }
.laboratorio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; }
.laboratorio label {
  grid-column: 1;
  display: flex;
  justify-content: space-between;
  font: 500 10.5px/1.4 var(--dato);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--apagado);
}
.laboratorio label output { color: var(--hueso); letter-spacing: 0; text-transform: none; font-weight: 400; }
.laboratorio input { grid-column: 1; }
.laboratorio .boton { grid-column: 2; grid-row: 1 / span 2; }

input[type="range"] {
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--eje); border-radius: 2px; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--eje); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--hueso);
  box-shadow: 0 0 0 3px var(--tinta);
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--hueso);
  box-shadow: 0 0 0 3px var(--tinta);
}
input[type="range"]:focus-visible { outline: 1.5px solid var(--niebla); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- pantallas medianas y móviles */
@media (max-width: 1240px) and (min-width: 981px) {
  .escena { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) minmax(250px, 290px); }
  .signos { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .mandos { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  body { overflow: auto; }
  .escena {
    height: auto;
    min-height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 22px;
  }
  .titulo { grid-column: 1; grid-row: 1; }
  #lienzo {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    height: min(110vw, 66vh);
    min-height: 320px;
  }
  .centro { grid-column: 1; grid-row: 3; width: 100%; }
  .ahora { grid-column: 1; grid-row: 4; text-align: left; }
  .cielo div { justify-content: flex-start; }
  .vida { margin-left: 0; }
  .percepciones { grid-column: 1; grid-row: 5; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .sentidos { grid-column: 1; grid-row: 6; overflow: visible; }
  .signos { grid-column: 1; grid-row: 7; grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .trazos { grid-template-columns: minmax(0, 1fr); }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sentido { grid-template-columns: 9px 96px minmax(0, 1fr) 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .evento,
  .pensamiento blockquote.nuevo { animation: none; }
}