/* ===========================================================================
   Módulo 6 — Reactor PWR (3 de octubre de 2026)
   ---------------------------------------------------------------------------
   Disposición: mandos | escena (vasija + lupa) | estado, en una sola fila en
   escritorio, para que todo lo que se toca y todo lo que responde quepa en
   una pantalla. En tableta la escena va arriba a todo lo ancho; en el móvil,
   la escena primero y los mandos debajo.

   Los colores del AGUA (azul frío → naranja caliente → rojo cerca de hervir)
   y de los NEUTRONES (naranja rápido, amarillo epitérmico, azul térmico) son
   color de datos: iguales en los dos temas, se calculan en el JavaScript.
   Los de la máquina (acero, vapor, rótulos) siguen el tema.

   Coherencia con el resto del laboratorio: rojo = absorción en la barra, que
   en el B-10 suelta una alfa (roja en la cámara de niebla); verde = captura,
   que suelta un gamma (verde en la cámara de niebla).
   ========================================================================= */

:root {
  --r-acero: #a7afb9;
  --r-acero-borde: #6b7480;
  --r-acero-oscuro: #7c8590;
  --r-vapor: rgba(196, 208, 222, 0.9);
  --r-rotulo: var(--texto-2);
  --r-placa: #8a939e;
  --r-barra: #2b3038;
  --r-varilla: #7c8590;
  --r-tubo-guia: #6b7480;
  --r-comb-borde: #b77d0e;
  --r-comb-centro: #f2b433;
  --r-pastilla: rgba(80, 50, 0, 0.35);
  --r-corriente: rgba(255, 255, 255, 0.55);
  --r-rojo: #e0453a;
  --r-rojo-hover: #c9372d;
  --r-verde: #1f9d63;
  --r-ambar: #c98a12;
  --r-vapor-vasija: rgba(205, 214, 224, 0.92);
  --r-vapor-tubo: #b9c3cf;
  /* TEXTO de colores que en el oscuro son claros: sobre blanco el amarillo
     #e0b400 daba 1,96:1, el azul #46a4ff 2,62:1 y las letras de los bancos
     1,8–3:1. En el claro van versiones oscuras (≥ 4,5:1). */
  --r-amarillo-texto: #8a6d00;
  --r-azul-texto: #1f6cc4;
  --r-letra-r: #0e7a6d;
  --r-letra-a: #2366b8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --r-acero: #4b535e;
    --r-acero-borde: #7d8692;
    --r-acero-oscuro: #353b44;
    --r-vapor: rgba(170, 186, 204, 0.32);
    --r-placa: #6b7480;
    --r-barra: #1c2027;
    --r-varilla: #9aa3ad;
    --r-tubo-guia: #9aa3ad;
    --r-pastilla: rgba(60, 35, 0, 0.45);
    --r-corriente: rgba(255, 255, 255, 0.4);
    --r-verde: #2bbd7a;
    --r-ambar: #e0a12a;
    --r-vapor-vasija: rgba(120, 132, 148, 0.92);
    --r-vapor-tubo: #6f7b8a;
    --r-amarillo-texto: #e0b400;
    --r-azul-texto: #46a4ff;
    --r-letra-r: #22b8a5;
    --r-letra-a: #4a90e2;
  }
}
:root[data-tema="oscuro"],
:root[data-tema-defecto="oscuro"]:not([data-tema="claro"]) {
  --r-acero: #4b535e;
  --r-acero-borde: #7d8692;
  --r-acero-oscuro: #353b44;
  --r-vapor: rgba(170, 186, 204, 0.32);
  --r-placa: #6b7480;
  --r-barra: #1c2027;
  --r-varilla: #9aa3ad;
  --r-tubo-guia: #9aa3ad;
  --r-pastilla: rgba(60, 35, 0, 0.45);
  --r-corriente: rgba(255, 255, 255, 0.4);
  --r-verde: #2bbd7a;
  --r-ambar: #e0a12a;
  --r-vapor-vasija: rgba(120, 132, 148, 0.92);
  --r-vapor-tubo: #6f7b8a;
  --r-amarillo-texto: #e0b400;
  --r-azul-texto: #46a4ff;
  --r-letra-r: #22b8a5;
  --r-letra-a: #4a90e2;
}

.contenedor--reactor { max-width: 1520px; }

/* --- Cabecera: título, entrada y modos a la izquierda; Tomi, el tutor, a la derecha --- */
.reactor-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  align-items: end;
  gap: 1rem 2rem;
  margin-bottom: 1rem;
}
.reactor-entrada { max-width: 78ch; color: var(--texto-2); font-size: 1.02rem; }
.reactor-cabeza__texto .reactor-modo { margin-top: 0.4rem; }

.segmentado {
  display: inline-flex;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  padding: 2px;
  gap: 2px;
}
.segmentado button {
  border: 0;
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-size: 0.86rem;
  padding: 0.3rem 0.7rem;
  border-radius: calc(var(--r-m) - 2px);
  cursor: pointer;
}
.segmentado button:hover { color: var(--texto); }
.segmentado button[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento-texto, var(--acento)); font-weight: 600; }

/* --- Tomi, el tutor (la guía) ---
   Una nube de texto que sale del átomo. El texto cambia de largo con el estado
   y, si la nube creciera, empujaría todo el laboratorio (medido): por eso
   montarGuia() le reserva el alto del mensaje más largo al ancho de cada
   momento. Antes era un alto fijo de 10,5 rem que cortaba justo los mensajes
   críticos (SCRAM, pérdida de agua). */
.tutor { display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: center; gap: 0.6rem; }
.tutor__nube {
  position: relative;
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.7rem 0.95rem;
  border: 2px solid var(--acento); border-radius: 20px;
  background: var(--superficie);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
  transition: border-color 0.3s;
}
/* El pico de la nube, hacia el átomo (dos triángulos: borde y relleno). */
.tutor__nube::before, .tutor__nube::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-top: 11px solid transparent; border-bottom: 11px solid transparent; transform: translateY(-50%);
}
.tutor__nube::before { right: -14px; border-left: 14px solid var(--acento); transition: border-left-color 0.3s; }
.tutor__nube::after { right: -10px; border-left: 11px solid var(--superficie); border-top-width: 9px; border-bottom-width: 9px; }
.tutor[data-tono="alerta"] .tutor__nube { border-color: var(--r-rojo); }
.tutor[data-tono="alerta"] .tutor__nube::before { border-left-color: var(--r-rojo); }
.tutor[data-tono="logro"] .tutor__nube { border-color: var(--r-verde); }
.tutor[data-tono="logro"] .tutor__nube::before { border-left-color: var(--r-verde); }
.reactor-guia__etiqueta {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-3);
}
.reactor-guia__texto { flex: 1; margin: 0; font-size: 0.9rem; line-height: 1.4; min-height: 6lh; }
/* El alto provisional, en líneas, hasta que montarGuia() mide el mensaje más
   largo: medido a cada ancho el 5 de octubre de 2026, para que al afinarlo no
   salte la cabecera (a 900 px daba un salto de 0,15 al cargar). */
@media (max-width: 900px) { .reactor-guia__texto { min-height: 4lh; } }
@media (max-width: 760px) { .reactor-guia__texto { min-height: 5lh; } }
@media (max-width: 680px) { .reactor-guia__texto { min-height: 6lh; } }
@media (max-width: 560px) { .reactor-guia__texto { min-height: 5lh; } }
@media (max-width: 500px) { .reactor-guia__texto { min-height: 6lh; } }
@media (max-width: 420px) { .reactor-guia__texto { min-height: 7lh; } }
@media (max-width: 370px) { .reactor-guia__texto { min-height: 8lh; } }
/* El botón ocupa siempre su sitio, aunque un mensaje no lo traiga. */
.reactor-guia__accion[hidden] { display: inline-flex !important; visibility: hidden; }
.reactor-guia__accion { align-self: flex-start; font-size: 0.8rem; padding: 0.25rem 0.7rem; }
/* La fila del pie de la nube: el botón «¿Por qué…?» y, en el tutorial del
   juego, las flechas para pasar de nota. Alto fijo: la nube no cambia. */
.reactor-guia__pie { display: flex; align-items: center; gap: 0.5rem; min-height: 1.9rem; }
.tutor__pasos { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; }
.tutor__pasos .boton-paso { width: 2rem; height: 1.8rem; }
.tutor__pasos .boton-paso:disabled { opacity: 0.35; cursor: default; }
.tutor__contador { font-size: 0.78rem; color: var(--texto-3); min-width: 2.6em; text-align: center; }
/* El átomo: las cinco caras apiladas; solo se ve la activa, con un fundido. */
.tutor__atomo { position: relative; width: 160px; height: 160px; }
.tutor__atomo img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.tutor__atomo img.activa { opacity: 1; }
/* Al cambiar de cara, un saltito; con la fisión, una sacudida. */
.tutor--cambio .tutor__atomo { animation: tutor-salto 0.45s ease-out; }
.tutor--cambio[data-expresion="fision"] .tutor__atomo, .tutor--cambio[data-expresion="peligro"] .tutor__atomo { animation: tutor-sacudida 0.5s ease-in-out; }
@keyframes tutor-salto { 0% { transform: translateY(0); } 35% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
@keyframes tutor-sacudida { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-3deg); } 40% { transform: translateX(6px) rotate(3deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .tutor--cambio .tutor__atomo { animation: none !important; } }
@media (max-width: 900px) {
  .reactor-cabeza { grid-template-columns: minmax(0, 1fr); }
  .tutor { grid-template-columns: minmax(0, 1fr) 120px; }
  .tutor__atomo { width: 120px; height: 120px; }
}
/* En el móvil la nube va a todo lo ancho y el átomo se sienta en su esquina de
   arriba, junto al «Ahora»: a la derecha de un átomo de 92 px le quedaban
   250 px y hasta el primer mensaje se desbordaba. */
@media (max-width: 560px) {
  .tutor { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 34px; }
  .tutor__atomo { position: absolute; top: 0; right: 0.6rem; width: 64px; height: 64px; z-index: 1; }
  .tutor__nube { padding: 0.6rem 0.75rem; }
  .tutor__nube::before, .tutor__nube::after { display: none; }
  .reactor-guia__texto { font-size: 0.84rem; }
}

/* --- Rejilla principal --- */
.reactor-lab {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 320px;
  gap: 1rem;
  align-items: start;
}
/* De 1001 a 1500 px, mandos a la izquierda y el dibujo con el estado DEBAJO
   (4 de octubre de 2026): con tres columnas, a 1280 px el dibujo se quedaba en
   579 px —más pequeño que a 1024— y sus rótulos en 8 px. Ahora mide unos 930. */
@media (min-width: 1001px) and (max-width: 1500px) {
  .reactor-lab { grid-template-columns: 270px minmax(0, 1fr); }
  .reactor-mandos { grid-column: 1; grid-row: 1 / span 2; }
  .reactor-escena-caja, .reactor-estado { grid-column: 2; }
  .reactor-escena { max-width: 1000px; margin-inline: auto; }
  /* El estado, a 900 px de ancho, en dos columnas: con una sola, cada etiqueta
     quedaba lejísimos de su cifra. */
  .reactor-estado { column-count: 2; column-gap: 1.6rem; column-rule: 1px solid var(--borde); }
  .reactor-estado > .tarjeta__titulo { column-span: all; }
  .reactor-estado > .medida { break-inside: avoid; }
}
@media (max-width: 1000px) {
  .reactor-lab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .reactor-escena-caja { grid-column: 1 / -1; order: -1; }
  /* A todo lo ancho, el dibujo (más estrecho desde que la lupa es menor) no debe crecer de alto. */
  .reactor-escena { max-width: 1000px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .reactor-lab { grid-template-columns: minmax(0, 1fr); }
}

/* --- Sitio reservado mientras llega el JavaScript ---
   Los bancos, la turbina, la leyenda y las cifras del estado llegan vacíos y
   crecen al montarse; con el estado debajo del dibujo (de 1001 a 1500 px) eso
   daba un salto de 0,08 al cargar (medido el 5 de octubre de 2026). Las cifras
   vacías llevan un espacio duro: así ocupan su línea antes de tener número. */
#bancos:empty { min-height: 380px; }
#panel-turbina:empty { min-height: 360px; }
#leyenda:empty { min-height: 47px; }
#zonas-potencia:empty { min-height: 96px; }
#vapor-estado:empty { min-height: 104px; }
.reactor-lab :is([id^="valor-"], .insignia-k, #ritmo, #reloj, #fisiones-segundo):empty::before,
#boton-pausa:empty::before { content: "\00a0"; }
@media (min-width: 1001px) and (max-width: 1500px) { #panel-turbina:empty { min-height: 380px; } }
@media (max-width: 1000px) { #panel-turbina:empty { min-height: 266px; } }

/* --- Mandos --- */
.reactor-mandos { padding: 1rem; }
/* minmax(0, 1fr): con 1fr a secas una cifra larga bajo la turbina ensanchaba su
   columna y estrechaba las otras tres. */
#bancos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}
.banco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.2rem;
  border-radius: var(--r-m);
  background: var(--superficie-2);
}
/* Alto fijo para dos líneas de nombre («Ajuste fino»): así los cuatro deslizadores quedan alineados. */
.banco__cabeza { display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-height: 2.8rem; }
.banco__letra { font-weight: 700; font-size: 1.05rem; }
.banco--R .banco__letra { color: var(--r-letra-r); }
.banco--A .banco__letra { color: var(--r-letra-a); }
.banco--S .banco__letra { color: var(--texto); }
.banco__nombre { font-size: 0.68rem; color: var(--texto-3); text-align: center; }
.banco__pie { font-size: 0.64rem; color: var(--texto-3); }
.banco__mover { width: 34px; height: 30px; font-size: 0.85rem; }
.banco__valor { font-size: 0.78rem; white-space: nowrap; }
/* Lo pedido a la turbina mientras sube o baja: línea propia, siempre reservada. */
.banco__objetivo { font-size: 0.68rem; color: var(--texto-3); white-space: nowrap; min-height: 1.3em; line-height: 1.3; }
/* El deslizador vertical: arriba fuera, abajo dentro, como la barra. */
.banco__deslizador {
  writing-mode: vertical-lr;
  direction: ltr;
  width: 28px;
  height: 150px;
  margin: 0.2rem 0;
  accent-color: var(--acento);
  cursor: ns-resize;
}
.banco--R .banco__deslizador { accent-color: #22b8a5; }
.banco--A .banco__deslizador { accent-color: #4a90e2; }
.banco--S .banco__deslizador { accent-color: #b9c0c9; }
/* La turbina, como un banco más: arriba 100 %, abajo 0 % (el deslizador va al revés que las barras). */
.banco--T .banco__letra { color: var(--r-amarillo-texto); }
.banco--T .banco__deslizador { accent-color: #e0b400; direction: rtl; }
/* El riel: el pulgar es a dónde se va; las flechitas, dónde se está (pulgar de unos 16 px). */
.banco__riel { position: relative; display: flex; justify-content: center; margin: 0.2rem 0; }
.banco__riel .banco__deslizador { margin: 0; }
.banco__real, .banco__reactor {
  position: absolute; top: calc(8px + (100% - 16px) * var(--pos, 0)); width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transform: translateY(-50%); transition: top 0.2s linear; pointer-events: none;
}
.banco__real { right: calc(50% + 9px); border-left: 8px solid var(--texto); }
.banco__reactor { left: calc(50% + 9px); border-right: 8px solid #ff8a1f; }
.mandos-nota { font-size: 0.74rem; color: var(--texto-3); margin: 0.6rem 0 0; }
.mandos-nota--abstraccion { grid-column: 1 / -1; margin-top: 0.3rem; }

.boton-scram {
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.6rem;
  border: 2px solid var(--r-rojo);
  border-radius: var(--r-m);
  background: var(--r-rojo);
  color: #fff;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  box-shadow: 0 2px 0 rgb(0 0 0 / 25%);
}
.boton-scram:hover:not(:disabled) { background: var(--r-rojo-hover); }
.boton-scram:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.boton-scram:disabled { opacity: 0.45; cursor: default; }
.boton-scram__grande { font-weight: 800; font-size: 1.1rem; letter-spacing: 0.12em; }
.boton-scram__chico { font-size: 0.72rem; opacity: 0.9; }
.boton-rearmar { width: 100%; justify-content: center; margin-top: 0.4rem; }

.mandos-bloque {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--borde);
}
.mandos-fila { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mandos-reloj { font-size: 0.78rem; color: var(--texto-3); }
.mandos-etiqueta { font-size: 0.72rem; color: var(--texto-3); margin-top: 0.2rem; }
.mandos-casos { display: flex; flex-direction: column; gap: 0.35rem; }
.mandos-casos .boton { justify-content: center; }
.mandos-casilla { display: flex; gap: 0.4rem; align-items: center; font-size: 0.82rem; margin-top: 0.3rem; }
.mandos-deslizador { flex: 1; min-width: 0; accent-color: #e0b400; }
#boro.mandos-deslizador { accent-color: #ff4d4d; }
.mandos-valor { font-size: 0.78rem; min-width: 4.2em; text-align: right; }
/* Los extremos del boro, bajo su deslizador (sin la columna del valor). */
.mandos-extremos { display: flex; justify-content: space-between; margin: -0.15rem calc(4.2 * 0.78rem + 0.5rem) 0 0; font-size: 0.66rem; color: var(--texto-3); }
.mandos-rangos { margin: 0.3rem 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; }
.boton-perdida { justify-content: center; border-color: #46c2ff; }
.boton-perdida:disabled { opacity: 0.5; cursor: default; }

/* A escalas de horas (×1000, 1 h/s) una nota explica que las barras van en tiempo real. */
.solo-escala-horas { display: none; }
body.escala-horas .solo-escala-horas { display: block; color: var(--r-amarillo-texto); }
.mandos-nota--bloqueo { color: var(--r-amarillo-texto); font-weight: 600; }

/* --- Turbina: balance de vapor, presión y consejo --- */
.balance { display: grid; gap: 0.25rem; margin-top: 0.5rem; }
.balance__fila { display: grid; grid-template-columns: 6.6rem 1fr 3.4rem; align-items: center; gap: 0.4rem; font-size: 0.74rem; }
.balance__clave { color: var(--texto-2); }
.balance__pista { position: relative; height: 10px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; }
.balance__barra { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; transition: width 0.3s linear; }
.balance__barra--reactor { background: #ff8a1f; }
.balance__barra--turbina { background: #e0b400; }
.balance__valor { text-align: right; }
.balance__nota { font-size: 0.7rem; color: var(--texto-3); margin: 0.3rem 0 0; }
.balance__cadena { font-size: 0.72rem; color: var(--texto-2); margin: 0.4rem 0 0; padding-left: 0.5rem; border-left: 2px solid #ff8a1f; }
.vapor { margin-top: 0.55rem; }
.vapor__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; }
.vapor__valor { font-size: 0.9rem; }
.vapor__valor[data-tono="aviso"] { color: var(--r-amarillo-texto); }
.vapor__valor[data-tono="grave"] { color: var(--r-rojo); }
.vapor__alivio { background: #46a4ff; }
.zonas__zona--sobra { background: color-mix(in srgb, #46a4ff 55%, transparent); }
.zonas__clave--sobra::before { background: color-mix(in srgb, #46a4ff 55%, transparent); }
/* Cuatro líneas reservadas: el consejo cambia de largo y movía hasta 97 px lo de debajo (medido). */
.turbina-consejo { min-height: 5.6em; font-size: 0.78rem; margin: 0.5rem 0 0; padding: 0.4rem 0.55rem; border-radius: var(--r-m); background: var(--superficie-2); color: var(--texto-2); border-left: 3px solid var(--r-verde); }
.turbina-consejo[data-tono="aviso"] { border-left-color: #e0b400; color: var(--texto); }
.turbina-consejo[data-tono="grave"] { border-left-color: var(--r-rojo); color: var(--texto); font-weight: 600; }
.boton-rearmar-turbina { margin-top: 0.45rem; width: 100%; justify-content: center; border-color: #e0b400; }
.boton-rearmar-turbina:disabled { opacity: 0.45; cursor: default; }

/* --- Modo juego --- */
.reactor-juego { display: none; margin: 1rem 0; border: 2px solid #e0b400; }
body.modo-juego .reactor-juego { display: block; }
/* El tutor se queda también en el juego (4 de octubre de 2026): al esconderlo la
   cabecera encogía 26 px y el selector de modo recién pulsado se escapaba de
   debajo del dedo (CLS 0,26). Sus mensajes ya saben que es una partida. */
body.modo-juego .no-juego { display: none !important; }
/* En el juego el reloj va siempre a ×10 y sin pausa; la velocidad de la lupa sí se puede cambiar. */
body.modo-juego :is(#velocidad-tiempo, #boton-pausa) { opacity: 0.55; pointer-events: none; }
body.modo-juego #velocidad-tiempo .solo-avanzado { display: none !important; }
/* Mientras se juega, el marcador se queda fijo arriba (la cabecera del sitio
   se va con el scroll) y lo demás del desafío se esconde: así se ven a la vez
   el tiempo, los puntos, los avisos y los mandos. */
body.jugando .cabecera-sitio { position: static; }
.reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"]) {
  position: sticky; top: 0; z-index: 25; padding-block: 0.5rem 0.4rem; margin-block: 0.5rem;
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.35);
}
/* Al terminar la tarjeta sigue compacta (el resultado va en un diálogo): antes
   pasaba de 109 a 920 px y empujaba el reactor 819 px. Con «>»: la tabla de
   récords, cuando viaja al diálogo, no es hija directa y sigue viéndose. */
.reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"], [data-estado="fin"]) > :is(.juego-cabeza, .juego-reglas, .juego-records) { display: none; }
.reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"]) .boton-juego { display: none; }
.reactor-juego[data-estado="fin"] { padding-block: 0.5rem 0.4rem; margin-block: 0.5rem; }
.reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"], [data-estado="fin"]) .juego-marcador { gap: 0.3rem 1rem; }
/* Alto fijo de cada cifra: la cuenta atrás (3, 2, 1, ¡Ya!) hacía saltar la celda 47 → 57 → 37 px. */
.reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"], [data-estado="fin"]) .juego-dato strong { font-size: 1.05rem; line-height: 1.4rem; height: 1.4rem; white-space: nowrap; }
/* En el juego el botón final ocupa lo mismo que el hueco que deja durante la partida. */
.reactor-juego[data-estado="fin"] .boton-juego { padding-block: 0.3rem; font-size: 0.9rem; }
/* Pantallas bajas (portátil pequeño, móvil apaisado): el marcador fijo tapaba los ▲.
   En una sola línea: rótulo y cifra lado a lado. */
@media (max-height: 760px) {
  .reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"], [data-estado="fin"]) { padding-block: 0.3rem 0.25rem; }
  .reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"], [data-estado="fin"]) .juego-dato { flex-direction: row; align-items: baseline; gap: 0.3rem; min-width: 0; }
  .reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"], [data-estado="fin"]) .juego-dato span { font-size: 0.6rem; }
  .reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"], [data-estado="fin"]) .juego-dato strong { font-size: 0.95rem; }
  .reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"], [data-estado="fin"]) .juego-barra { margin-top: 0.3rem; }
  .reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"], [data-estado="fin"]) .juego-aviso-vivo { height: 1.6rem; margin-top: 0.3rem; font-size: 0.74rem; }
  .reactor-juego[data-estado="fin"] .boton-juego { padding-block: 0.15rem; font-size: 0.82rem; }
}
.juego-dato strong[data-tono="aviso"] { color: var(--r-amarillo-texto); }
.juego-dato strong[data-tono="grave"] { color: var(--r-rojo); }
/* Premio perdido: el motivo, en una línea propia y en texto normal. */
.datos__fila--perdido { flex-wrap: wrap; }
.datos__fila--perdido .datos__valor { flex: 1 1 100%; text-align: left; font-family: var(--fuente); font-variant-numeric: normal; color: var(--texto-3); font-size: 0.82rem; margin-top: 0.1rem; }
.glosario { margin: 0.4rem 0 0; display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 0.45rem 1rem; }
.glosario dt { font-weight: 700; }
.glosario dd { margin: 0; color: var(--texto-2); font-size: 0.92rem; }
@media (max-width: 720px) { .glosario { grid-template-columns: 1fr; gap: 0.1rem; } .glosario dd { margin-bottom: 0.5rem; } }
.juego-siguiente { font-size: 0.88rem; color: var(--texto-2); margin: -0.3rem 0 0.7rem; }
/* En el móvil, para jugar hace falta tener a mano los mandos y el estado: van delante del dibujo. */
@media (max-width: 720px) {
  body.modo-juego .reactor-mandos { order: -3; }
  body.modo-juego .reactor-estado { order: -2; }
  body.modo-juego .reactor-escena-caja { order: -1; }
  .reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"]) .juego-dato span { font-size: 0.62rem; }
  .reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"]) .juego-dato strong { font-size: 1rem; }
  .reactor-juego:is([data-estado="cuenta"], [data-estado="jugando"]) .juego-dato--tavg { display: none; }
}
.juego-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.juego-titulo { margin: 0; font-size: 1.2rem; }
.juego-subtitulo { font-size: 0.85rem; font-weight: 600; color: var(--r-amarillo-texto); text-transform: uppercase; letter-spacing: 0.05em; }
.juego-reglas { font-size: 0.88rem; color: var(--texto-2); max-width: 110ch; margin: 0.6rem 0; }
.juego-reglas p { margin: 0.3rem 0; }
.juego-pasos { margin: 0.3rem 0; padding-left: 1.4rem; display: grid; gap: 0.2rem; }
.juego-pasos li::marker { color: #e0b400; font-weight: 700; }
.juego-marcador { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; }
.juego-dato { display: flex; flex-direction: column; }
.juego-dato span { font-size: 0.72rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.05em; }
.juego-dato strong { font-size: 1.6rem; line-height: 1.1; }
.boton-juego { margin-left: auto; font-size: 1rem; font-weight: 700; padding: 0.55rem 1.4rem; background: #e0b400; border-color: #e0b400; color: #1c1b19; }
.boton-juego:hover { background: #f2c94c; }
.boton-juego:disabled { opacity: 0.5; }
.reactor-juego[data-estado="cuenta"] #juego-tiempo { color: var(--r-amarillo-texto); font-weight: 800; }
.reactor-juego[data-estado="jugando"][data-seguro="false"] .juego-barra span { background: #e0b400; }
.juego-barra { height: 6px; margin-top: 0.6rem; border-radius: 3px; background: var(--superficie-2); overflow: hidden; }
.juego-barra span { display: block; height: 100%; width: 0; background: var(--r-verde); transition: width 0.2s linear; }
/* El aviso en vivo: una sola línea de alto fijo (dos en el móvil), siempre presente. */
.juego-aviso-vivo {
  display: flex; align-items: center; height: 2rem; margin: 0.45rem 0 0; padding: 0 0.7rem;
  border-radius: var(--r-m); font-size: 0.8rem; font-weight: 600; line-height: 1.2; overflow: hidden;
  background: var(--superficie-2); color: var(--texto-3);
}
.juego-aviso-vivo:empty { visibility: hidden; }
.juego-aviso-vivo[data-tono="calma"] { font-weight: 400; }
.juego-aviso-vivo[data-tono="aviso"] { background: color-mix(in srgb, #e0b400 25%, transparent); color: var(--texto); }
.juego-aviso-vivo[data-tono="grave"] { background: var(--r-rojo); color: #fff; animation: latido 0.8s ease-in-out infinite alternate; }
@media (max-width: 720px) { .juego-aviso-vivo { height: 2.6rem; font-size: 0.74rem; } }
/* Cifras del marcador con ancho fijo: que no empujen a las demás al cambiar. */
.juego-dato { min-width: 5.2rem; }
.juego-dato--tavg { min-width: 8.5rem; }
@keyframes latido { from { opacity: 1; } to { opacity: 0.6; } }
/* El final, en un diálogo modal sobre el reactor. */
.juego-final {
  width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto;
  padding: 1.1rem 1.25rem; border: 2px solid #e0b400; border-radius: var(--r-l, 14px);
  background: var(--superficie); color: var(--texto);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.45);
}
.juego-final::backdrop { background: rgb(0 0 0 / 0.55); }
.juego-final h3 { margin-top: 0; }
.juego-final__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.juego-final__acciones .boton-juego { margin-left: 0; }
.juego-puntos-reglas { margin-top: 0.4rem; }
.juego-final dl { max-width: 460px; }
.juego-rango { font-size: 1.15rem; font-weight: 700; margin: 0.6rem 0; }
.juego-rango[data-rango="5"] { color: var(--r-amarillo-texto); }
.juego-rango[data-rango="4"] { color: var(--r-verde); }
.juego-guardar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.juego-guardar input { font: inherit; padding: 0.4rem 0.6rem; border-radius: var(--r-m); border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto); width: 12rem; }
.juego-aviso { font-size: 0.82rem; color: var(--texto-2); }
.juego-records { margin-top: 1rem; }
.juego-records h3 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.juego-records__origen { font-weight: 400; font-size: 0.78rem; color: var(--texto-3); }
.records { list-style: none; margin: 0; padding: 0; max-width: 620px; }
.records__fila { display: grid; grid-template-columns: 2rem 1fr auto; grid-template-areas: "puesto apodo puntos" "puesto detalle detalle"; column-gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid var(--borde); }
.records__fila--tuya { background: color-mix(in srgb, #e0b400 15%, transparent); }
.records__puesto { grid-area: puesto; align-self: center; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; font-weight: 700; font-size: 0.85rem; background: var(--superficie-2); }
.records__puesto--1 { background: #e0b400; color: #1c1b19; }
.records__puesto--2 { background: #c0c6cf; color: #1c1b19; }
.records__puesto--3 { background: #c4834a; color: #1c1b19; }
.records__apodo { grid-area: apodo; font-weight: 600; }
.records__puntos { grid-area: puntos; font-weight: 700; }
.records__detalle { grid-area: detalle; font-size: 0.74rem; color: var(--texto-3); }
.records__vacio { color: var(--texto-3); font-size: 0.86rem; }

/* --- Escena --- */
.reactor-escena-caja { min-width: 0; }
.reactor-escena {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 780;
}
.escena-reactor { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lienzo-nucleo, .lienzo-lupa { position: absolute; pointer-events: none; }
/* Hasta que modulo-reactor.js los coloca (con style en línea), los lienzos
   salían un instante arriba a la izquierda con su tamaño por defecto de
   300 × 150 y luego saltaban a su sitio. */
.lienzo-nucleo:not([style]), .lienzo-lupa:not([style]) { visibility: hidden; }
.lienzo-nucleo { mix-blend-mode: screen; }
.lienzo-lupa { pointer-events: auto; border-radius: 50%; cursor: crosshair; background: #0d2b52; }
.lienzo-lupa:focus-visible { outline: 3px solid var(--marcador); outline-offset: 4px; }

/* El SVG se dibuja a unos 0,55–0,8 de su tamaño: los rótulos van en
   unidades del dibujo grandes para que en pantalla queden en 10–13 px. */
.lupa-movil { max-width: 310px; margin: 0.75rem auto 0; text-align: center; }
.lupa-movil__titulo { font-weight: 600; margin: 0; }
.lupa-movil__sub { font-size: 0.8rem; color: var(--texto-3); margin: 0 0 0.5rem; }
.lupa-movil .lienzo-lupa { display: block; border: 3px solid var(--marcador); }

/* Rótulos del dibujo, un 10 % mayores desde la 0.3 beta: en la rejilla de tres
   columnas el dibujo mide unos 580 px y los rótulos pequeños bajaban de 9 px. */
.esc-texto { fill: var(--r-rotulo); font-size: 22px; font-family: var(--fuente); }
.esc-texto--chico { font-size: 18.5px; fill: var(--texto-3); }
.esc-texto--mini { font-size: 16.5px; fill: var(--texto-3); }
/* En el móvil el dibujo queda a menos de la mitad: los rótulos menores serían ilegibles (7 px). */
@media (max-width: 720px) { .esc-texto--mini:not(.esc-texto--fuerte) { display: none; } }
.esc-texto--fuerte { fill: var(--texto); }
.esc-texto--dato { font-size: 15px; font-family: var(--fuente-datos); fill: #fff; font-weight: 600; }
.esc-texto--titulo { font-size: 24px; font-weight: 600; fill: var(--texto); }
.esc-letra-banco { font-size: 20px; font-weight: 700; fill: var(--texto-2); text-anchor: middle; }
.esc-pastilla-dato rect { fill: rgba(10, 14, 22, 0.82); stroke: rgba(255, 255, 255, 0.35); }
.esc-barra--R .esc-letra-banco { fill: #22b8a5; }
.esc-barra--A .esc-letra-banco { fill: #4a90e2; }

.esc-acero, .esc-carcasa { fill: var(--r-acero); stroke: var(--r-acero-borde); stroke-width: 1.5; }
.esc-brida { fill: var(--r-acero-oscuro); stroke: var(--r-acero-borde); }
.esc-placa { fill: var(--r-placa); }
.esc-barril { stroke: var(--r-placa); stroke-width: 4; }
.esc-tubo-pared { fill: none; stroke: var(--r-acero-borde); stroke-width: 17; stroke-linejoin: round; }
.esc-tubo-agua { fill: none; stroke-width: 12; stroke-linejoin: round; }
.esc-secundario { fill: #2a5d93; }
.esc-vapor { fill: var(--r-vapor); }
.esc-nivel { stroke: rgba(255, 255, 255, 0.5); stroke-dasharray: 3 3; }
.esc-tubo-u { fill: none; stroke: url(#r-grad-tubos); stroke-width: 4; }
.esc-cabezal { stroke: var(--r-acero-borde); stroke-width: 1.5; }
.esc-tabique { stroke: var(--r-acero-borde); stroke-width: 2; }
.esc-burbuja { fill: rgba(255, 255, 255, 0.75); }
.esc-linea-vapor { fill: none; stroke: var(--r-vapor); stroke-width: 9; }
.esc-linea-alimentacion { fill: none; stroke: #2a5d93; stroke-width: 7; }
.esc-flecha { fill: var(--texto-3); }
.esc-pz-agua { fill: rgb(214, 40, 40); opacity: 0.85; }
.esc-resistencia { fill: none; stroke: #ffb347; stroke-width: 1.6; }
.esc-motor { fill: var(--r-acero-oscuro); stroke: var(--r-acero-borde); }
.esc-alabe { stroke: var(--texto); stroke-width: 3; stroke-linecap: round; }

.esc-corriente {
  fill: none;
  stroke: var(--r-corriente);
  stroke-width: 1.6;
  stroke-dasharray: 5 11;
  stroke-dashoffset: var(--desfase, 0);
  stroke-linecap: round;
}

.esc-combustible { stroke: var(--r-comb-borde); stroke-width: 1; }
.esc-comb-borde { stop-color: var(--r-comb-borde); }
.esc-comb-centro { stop-color: var(--r-comb-centro); }
.esc-pastilla { stroke: var(--r-pastilla); stroke-width: 1; }
.esc-brillo { fill: #ffcf4a; opacity: 0; }
/* La lupa, solo en el modo básico; los relojes de potencia, solo en avanzado y juego
   (el juego también lleva la clase modo-avanzado). */
body.modo-avanzado .esc-solo-lupa, body.modo-avanzado #lienzo-lupa, body.modo-avanzado #lupa-movil { display: none !important; }
/* La leyenda de colores y tipos de neutrón explica la lupa: sin lupa sobra
   (5 de octubre de 2026, petición de los autores). */
body.modo-avanzado #leyenda { display: none !important; }
body:not(.modo-avanzado) .esc-solo-relojes { display: none; }
/* Relojes de aguja: los mismos colores que la barra de zonas (térmica y eficiencia)
   y que la barra de la presión del vapor (el relleno de la eléctrica). */
.man-zona { fill: none; stroke-width: 10; }
.man-zona--fondo { stroke: var(--superficie-2); }
.man-zona--sobra { stroke: color-mix(in srgb, #46a4ff 55%, transparent); }
.man-relleno { fill: none; stroke-width: 10; stroke: var(--r-verde); transition: stroke 0.3s; }
.man-relleno[data-zona="normal"] { stroke: var(--r-verde); }
.man-relleno[data-zona="flojo"] { stroke: #e0b400; }
.man-relleno[data-zona="cerca"], .man-relleno[data-zona="disparo"] { stroke: var(--r-rojo); }
.man-relleno[data-zona="sobra"] { stroke: color-mix(in srgb, #46a4ff 75%, transparent); }
.man-valor[data-zona="normal"] { fill: var(--r-verde); }
.man-valor[data-zona="flojo"] { fill: var(--r-amarillo-texto); }
.man-valor[data-zona="cerca"], .man-valor[data-zona="disparo"] { fill: var(--r-rojo); }
.man-valor[data-zona="sobra"] { fill: var(--r-azul-texto); }
.man-zona--subida { stroke: color-mix(in srgb, #46a4ff 45%, transparent); }
.man-zona--optimo { stroke: var(--r-verde); }
.man-zona--licencia { stroke: #e0b400; }
.man-zona--riesgo { stroke: var(--r-rojo); }
.man-tic { stroke: var(--texto-3); stroke-width: 1.5; }
.man-tic--mayor { stroke: var(--texto-2); stroke-width: 2.5; }
.man-disparo { stroke: var(--texto); stroke-width: 3; }
.man-escala { fill: var(--texto-2); }
.man-exceso { fill: var(--r-rojo); font-weight: 600; }
.man-aguja line { stroke: #ff8a1f; stroke-width: 4; stroke-linecap: round; }
.man-eje { fill: var(--texto); stroke: var(--superficie); stroke-width: 2; }
.man-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.man-valor[data-zona="optimo"] { fill: var(--r-verde); }
.man-valor[data-zona="licencia"] { fill: var(--r-amarillo-texto); }
.man-valor[data-zona="riesgo"] { fill: var(--r-rojo); }
.esc-incandescente { fill: none; pointer-events: none; }
.esc-tubo-guia { fill: none; stroke: var(--r-tubo-guia); stroke-width: 1.5; }
.esc-guia-superior { fill: none; stroke: var(--r-tubo-guia); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.6; }

.esc-mecanismo { fill: var(--r-acero-oscuro); stroke: var(--r-acero-borde); }
.esc-varilla { stroke: var(--r-varilla); stroke-width: 2; }
.esc-absorbente { fill: var(--r-barra); stroke: var(--r-varilla); stroke-width: 1; }
.esc-cabeza { fill: var(--r-varilla); }
.esc-barra--R .esc-cabeza { fill: #22b8a5; }
.esc-barra--A .esc-cabeza { fill: #4a90e2; }
.esc-barra--S .esc-cabeza { fill: #e6e9ee; }
.esc-objetivo { stroke: var(--marcador); stroke-width: 2; stroke-dasharray: 3 2; transition: opacity 0.2s; }
.esc-agarre { fill: transparent; cursor: ns-resize; touch-action: none; }
/* Arrastrar una barra o la lupa no debe seleccionar el texto de la página. */
.reactor-escena, .reactor-mandos .banco { -webkit-user-select: none; user-select: none; }
.esc--scram .esc-absorbente { stroke: var(--r-rojo); }

/* Secundario: turbina, generador, condensador, descarga y alivio. */
.esc-linea-descarga { fill: none; stroke: var(--r-vapor); stroke-width: 4; stroke-dasharray: 4 4; stroke-dashoffset: var(--desfase, 0); opacity: 0; }
.esc-alivio { fill: none; stroke: #ffffff; stroke-width: 3; opacity: 0; }
.esc-alabes-turbina { stroke: var(--texto-2); stroke-width: 3; stroke-dasharray: 4 3; }
.esc-eje { stroke: var(--r-acero-borde); stroke-width: 5; }
.esc-generador { fill: var(--r-acero-oscuro); stroke: var(--r-acero-borde); stroke-width: 1.5; }
.esc-rotor { fill: none; stroke: var(--r-acero-borde); stroke-width: 2; }
.esc-rayo { fill: none; stroke: #ffd400; stroke-width: 3; stroke-linejoin: round; transition: opacity 0.3s; }
.esc-escape { stroke: var(--r-vapor); stroke-width: 10; }
.esc-condensador { fill: #2a5d93; stroke: var(--r-acero-borde); stroke-width: 1.5; }
.esc-refrigeracion { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; }
.esc-texto--electrica { font-size: 19px; font-weight: 700; fill: var(--r-amarillo-texto); font-family: var(--fuente-datos); }
.esc-texto--alerta { font-size: 16px; font-weight: 700; fill: var(--r-rojo); }
.esc-texto--inyeccion { font-size: 14px; font-weight: 600; fill: #46c2ff; }
/* Pérdida de agua: vapor en la vasija, nivel, chorro de la rotura, inyección. */
.esc-vapor-vasija { fill: var(--r-vapor-vasija); }
.esc-nivel-vasija { stroke: #9fd8ff; stroke-width: 2; stroke-dasharray: 8 5; }
.esc-chorro { stroke: #cfe8ff; stroke-width: 3; stroke-dasharray: 3 5; stroke-dashoffset: var(--chorro, 0); }
.esc-linea-inyeccion { fill: none; stroke: #46c2ff; stroke-width: 6; }

.esc-linea-lupa { stroke: var(--marcador); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0.8; }
.esc-marco-lupa { fill: none; stroke: var(--marcador); stroke-width: 3; }
.esc-selector {
  fill: rgba(255, 212, 0, 0.12);
  stroke: var(--marcador);
  stroke-width: 2.5;
  cursor: grab;
}
.esc-selector:focus-visible { outline: none; stroke-width: 4; }
.esc-selector-asa { fill: transparent; stroke: none; cursor: grab; touch-action: none; }

/* Leyenda bajo la escena */
.reactor-leyenda {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--texto-2);
}
.reactor-leyenda__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.icono { width: 16px; height: 16px; flex: none; }

/* --- Estado --- */
.reactor-estado { padding: 1rem; }
.medida + .medida { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--borde); }
.medida__etiqueta { font-size: 0.78rem; color: var(--texto-3); }
.medida__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
/* El % de la nominal, siempre en su propia línea: al pasar de «7×10⁻¹⁰ de la nominal»
   a «100,0 %» saltaba de línea y movía 29 px todo lo de debajo (medido). */
#valor-pct { flex-basis: 100%; }
/* Notas que cambian de largo: dos líneas reservadas. */
#nota-secundario { min-height: 2.5em; }
.medida__valor { font-size: 1.85rem; font-weight: 600; line-height: 1.15; }
.medida__extra { font-size: 0.82rem; color: var(--texto-2); }
.medida__nota { font-size: 0.8rem; color: var(--texto-2); margin: 0.35rem 0 0; }

.insignia-k {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.insignia-k--sub { color: var(--r-azul-texto); }
.insignia-k--critico { color: var(--r-verde); }
.insignia-k--super { color: #ff9a3c; }
.insignia-k--inmediato { color: var(--r-rojo); }

.indicador-k {
  position: relative;
  height: 8px;
  margin-top: 0.5rem;
  border-radius: 4px;
  background: linear-gradient(90deg, #2e6fd6 0%, #46a4ff 45%, #2bbd7a 50%, #ff9a3c 56%, #e0453a 100%);
}
.indicador-k__uno { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--texto); }
.indicador-k__marca {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--texto);
  border: 2px solid var(--superficie);
  transition: left 0.2s;
}
.indicador-k__escala, .barra-log__escala {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  color: var(--texto-3);
  margin-top: 0.2rem;
}
.barra-log {
  position: relative;
  height: 10px;
  margin-top: 0.4rem;
  border-radius: 5px;
  background: var(--superficie-2);
  overflow: hidden;
}
.barra-log__relleno, .barra-log__residual {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 5px;
  transition: width 0.2s;
}
.barra-log__relleno { background: linear-gradient(90deg, #c98a12, #ffb347); }
.barra-log__residual { background: #e0453a; height: 3px; top: auto; }
.barra__titulo { display: block; font-size: 0.66rem; color: var(--texto-3); margin-top: 0.45rem; }
.barra__titulo + .barra-log { margin-top: 0.15rem; }
/* Barra de zonas de potencia con la potencia térmica dentro (escala lineal, 0–150 %):
   las zonas, atenuadas, de fondo; la potencia sube en amarillo por encima; el calor
   residual, en rojo, en la franja de abajo. */
#zonas-potencia .zonas__pista { height: 18px; }
#zonas-potencia .zonas__zona { opacity: 0.38; }
.zonas__relleno, .zonas__relleno-residual { position: absolute; left: 0; width: 0; border-radius: 3px; transition: width 0.2s; pointer-events: none; }
.zonas__relleno { top: 4px; bottom: 4px; background: #ffd23f; box-shadow: 0 0 6px rgb(255 210 63 / 0.55); }
.zonas__relleno-residual { bottom: 1px; height: 3px; background: #e0453a; }
/* Textos plegables (el triangulito): no mueven lo de abajo mientras están cerrados. */
.plegable { margin-top: 0.3rem; }
.plegable > summary { cursor: pointer; font-size: 0.72rem; color: var(--texto-3); list-style-position: inside; }
.plegable > summary:hover { color: var(--texto-2); }
.plegable > p { margin-top: 0.25rem; }
.vapor-estado { margin-top: 0.7rem; }
.pie-version { font-size: 0.72rem; color: var(--texto-3); margin-top: 1rem; margin-bottom: 0; }
.datos--compacto .datos__fila { padding: 0.18rem 0; }
.datos--compacto .datos__clave, .datos--compacto .datos__valor { font-size: 0.8rem; }

.proteccion { font-size: 0.78rem; font-weight: 600; color: var(--r-verde); }
.proteccion--disparada { color: var(--r-rojo); }
.medida__valor--electrica { color: var(--r-amarillo-texto); }
.medida--perdida { border-left: 3px solid var(--r-rojo); padding-left: 0.6rem; }
.dato-alerta { color: var(--r-rojo); font-weight: 700; }

/* Zonas de potencia: lineal, 0–150 % de la nominal. */
.zonas__titulo { display: block; margin-top: 0.7rem; }
.zonas { margin-top: 0.3rem; }
.zonas__pista { position: relative; height: 16px; border-radius: 4px; overflow: visible; background: var(--superficie-2); }
.zonas__zona { position: absolute; top: 0; bottom: 0; }
.zonas__zona:first-child { border-radius: 4px 0 0 4px; }
.zonas__zona--subida { background: color-mix(in srgb, #46a4ff 30%, transparent); }
.zonas__zona--optimo { background: var(--r-verde); }
.zonas__zona--licencia { background: #e0b400; }
.zonas__zona--riesgo { background: var(--r-rojo); }
.zonas__zona--sinMargen {
  background: repeating-linear-gradient(135deg, #7a1010 0 6px, #3b0606 6px 12px);
  border-radius: 0 4px 4px 0;
}
.zonas__disparo { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--texto); }
.zonas__aguja {
  position: absolute;
  top: -6px;
  width: 0; height: 0;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid var(--texto);
  transition: left 0.2s;
}
.zonas__aguja[data-zona="optimo"] { border-top-color: var(--r-verde); }
.zonas__aguja[data-zona="licencia"] { border-top-color: #e0b400; }
.zonas__aguja[data-zona="riesgo"], .zonas__aguja[data-zona="sinMargen"] { border-top-color: var(--r-rojo); }
.zonas__escala { position: relative; height: 1.1rem; font-size: 0.64rem; color: var(--texto-3); margin-top: 0.15rem; }
.zonas__marca { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.zonas__marca:first-child { transform: none; }
.zonas__marca:last-child { transform: translateX(-100%); }
.zonas__escala--arriba { margin: 0 0 0.1rem; height: 0.95rem; }
/* 109 y 118 están muy juntos: el primero acaba en su raya y el segundo empieza en la suya, para que no se pisen. */
.zonas__escala--arriba .zonas__marca { font-weight: 600; color: var(--texto-2); }
.zonas__escala--arriba .zonas__marca:first-child { transform: translateX(calc(-100% - 2px)); }
.zonas__escala--arriba .zonas__marca:last-child { transform: translateX(3px); }
.zonas__leyenda { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; font-size: 0.7rem; color: var(--texto-2); margin-top: 0.15rem; }
.zonas__clave::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 0.25rem; vertical-align: -1px; }
.zonas__clave--optimo::before { background: var(--r-verde); }
.zonas__clave--licencia::before { background: #e0b400; }
.zonas__clave--riesgo::before { background: var(--r-rojo); }
.zonas__clave--sinMargen::before { background: repeating-linear-gradient(135deg, #7a1010 0 3px, #3b0606 3px 6px); }
.zonas__clave--disparo::before { width: 2px; background: var(--texto); }
.zonas__nota { font-size: 0.7rem; color: var(--texto-3); margin: 0.35rem 0 0; }

/* --- Destinos --- */
.reactor-destinos { margin-top: 1.5rem; }
.reactor-destinos__cabeza { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.reactor-destinos__titulo { font-size: 1.1rem; margin: 0; }
.reactor-destinos__nota { margin: 0; font-size: 0.82rem; color: var(--texto-3); }
.reactor-destinos__fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
}
.destino {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: 0.85rem 1rem;
}
.destino__cabeza { display: flex; align-items: center; gap: 0.5rem; }
.destino__numero {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--superficie-2);
  color: var(--texto-2);
}
.destino__icono { width: 20px; height: 20px; }
.destino__titulo { margin: 0; font-size: 0.98rem; }
.destino__valor { font-size: 1.5rem; font-weight: 600; margin: 0.3rem 0 0; }
.destino__detalle { font-size: 0.78rem; color: var(--texto-2); margin: 0 0 0.35rem; min-height: 2.3em; }
.destino__texto { font-size: 0.82rem; color: var(--texto-3); margin: 0; }
.destino--fision { border-top: 3px solid #ffb347; }
.destino--moderacion { border-top: 3px solid #46c2ff; }
.destino--barra { border-top: 3px solid #ff4d4d; }
.destino--captura { border-top: 3px solid #3ddc84; }
.destino--fuga { border-top: 3px solid #b18cff; }

.reparto {
  display: flex;
  height: 18px;
  margin-top: 0.6rem;
  border-radius: 9px;
  overflow: hidden;
  background: var(--superficie-2);
  font-size: 0.7rem;
  font-weight: 600;
  color: #111;
}
.reparto__tramo { display: grid; place-items: center; min-width: 0; overflow: hidden; white-space: nowrap; transition: flex-grow 0.4s; }
.reparto__tramo--fision { background: #ffb347; }
.reparto__tramo--barra { background: #ff4d4d; }
.reparto__tramo--captura { background: #3ddc84; }

/* --- Seguir y gráfica --- */
.reactor-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 900px) { .reactor-fila { grid-template-columns: minmax(0, 1fr); } }
.reactor-seguir__ayuda, .reactor-medido__ayuda { font-size: 0.86rem; color: var(--texto-2); }
.diario {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  max-height: 290px;
  overflow-y: auto;
  font-size: 0.82rem;
}
.diario__linea { padding: 0.2rem 0.5rem; border-left: 3px solid var(--borde); margin-bottom: 0.15rem; }
.diario__linea--nace { border-left-color: #ff8a1f; }
.diario__linea--choque-h { border-left-color: #46c2ff; }
.diario__linea--choque { border-left-color: #9fd8ff; }
.diario__linea--termico { border-left-color: #46c2ff; font-weight: 600; }
.diario__linea--frontera { border-left-color: var(--borde-fuerte); color: var(--texto-3); }
.diario__linea--fision { border-left-color: #ffb347; font-weight: 600; }
.diario__linea--barra { border-left-color: #ff4d4d; font-weight: 600; }
.diario__linea--captura { border-left-color: #3ddc84; font-weight: 600; }
.diario__linea--resumen { border-left-color: var(--acento); background: var(--superficie-2); }

.grafica { display: block; width: 100%; height: 230px; }
.grafica--espectro { height: 240px; margin-top: 0.4rem; }
.grafica-leyenda { list-style: none; display: flex; gap: 1rem; flex-wrap: wrap; padding: 0; margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--texto-2); }
.grafica-leyenda__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.grafica-leyenda__marca { width: 22px; border-top: 2px solid; }

/* --- Medido (avanzado) --- */
.reactor-medido { margin-top: 1.5rem; }
.reactor-medido__tablas .tabla-datos { max-width: 560px; }
body:not(.modo-avanzado) .solo-avanzado { display: none !important; }

/* --- Explicaciones --- */
.reactor-explicaciones { margin-top: 2rem; }
.reactor-explicaciones > h2 { font-size: 1.25rem; }
.explica { padding: 0.9rem 1.1rem; margin-top: 0.6rem; }
.explica summary { cursor: pointer; font-weight: 600; }
.explica[open] summary { margin-bottom: 0.6rem; }
.explica p, .explica li { max-width: 82ch; }
.explica h3 { margin-top: 1rem; font-size: 0.98rem; }
.ecuacion {
  font-family: var(--fuente-datos);
  font-size: 0.88rem;
  background: var(--superficie-2);
  border-radius: var(--r-m);
  padding: 0.6rem 0.8rem;
  white-space: pre-wrap;
  overflow-x: auto;
}
.reactor-aviso { margin-top: 1.5rem; }

/* --- Modo captura (?captura): solo la escena, para la miniatura --- */
body.modo-captura .cabecera-sitio, body.modo-captura .pie-sitio, body.modo-captura .reactor-cabeza,
body.modo-captura .tutor, body.modo-captura .reactor-mandos, body.modo-captura .reactor-estado,
body.modo-captura .reactor-leyenda, body.modo-captura .reactor-destinos, body.modo-captura .reactor-fila,
body.modo-captura .reactor-medido, body.modo-captura .reactor-explicaciones, body.modo-captura .reactor-aviso { display: none !important; }
body.modo-captura main { padding: 0; }
body.modo-captura .contenedor--reactor { max-width: none; padding: 0; }
body.modo-captura .reactor-lab { display: block; }