/* ===========================================================================
   Módulo 11 — Núcleo 3D de un SMR (15 de octubre de 2026)
   ---------------------------------------------------------------------------
   Escena three.js a todo lo ancho con los mandos al lado; debajo, el mapa del
   núcleo (vista superior), la forma axial, la ficha del ensamble y el estado.
   Todo contra los tokens; los colores de los bancos (R verde azulado, A azul,
   S gris) son los del Reactor PWR.
   ========================================================================= */

.contenedor--n3d { max-width: 1380px; }
.n3d-cabecera { margin-bottom: var(--esp-4); }
.n3d-cabecera h1 { margin: 0 0 var(--esp-2); }
.n3d-cabecera__sub { margin: 0; color: var(--texto-2); max-width: 70ch; }
.n3d-cifras { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); margin: var(--esp-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-pequeno); color: var(--texto-2); }
.n3d-cifras b { font-family: var(--fuente-datos); color: var(--texto); font-weight: 600; }

/* La cabina (20 de octubre, petición de Santiago: como el Reactor PWR, todo en
   una pantalla sin desplazarse): mandos a la izquierda, la escena en el centro,
   k efectivo y potencias a la derecha, los instrumentos abajo. Su alto es el de
   la ventana menos lo que hay encima (--n3d-arriba lo mide el módulo). */
/* Segunda disposición (20 de octubre, noche): la escena grande con los
   manómetros dentro; a la derecha el k efectivo y, debajo, las barras; las
   variables de texto van fuera, bajo la cabina. */
.n3d-cabina { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "escena lado"; gap: var(--esp-3); height: calc(100vh - var(--n3d-arriba, 200px)); min-height: 560px; }
.n3d-cabina > .n3d-escena-caja { grid-area: escena; aspect-ratio: auto; height: 100%; min-height: 0; }
.n3d-lado { grid-area: lado; display: flex; flex-direction: column; gap: var(--esp-3); min-height: 0; }
.n3d-lado > #n3d-estado { flex: 0 0 auto; }
.n3d-lado > .n3d-mandos { flex: 1 1 auto; overflow: auto; min-height: 0; scrollbar-width: thin; }
.n3d-instrumentos--escena { position: absolute; left: var(--esp-2); right: var(--esp-2); bottom: var(--esp-2); padding: 0; background: none; border: 0; pointer-events: none; }
.n3d-cabina .n3d-instrumentos--escena .n3d-instrumentos__fila, .n3d-instrumentos--escena .n3d-instrumentos__fila { justify-content: space-between; overflow: visible; }
.n3d-instrumentos__grupo { display: flex; gap: 0.2rem; padding: 0.25rem 0.35rem; border-radius: var(--r-m); background: color-mix(in srgb, var(--superficie) 72%, transparent); border: 1px solid var(--borde); backdrop-filter: blur(4px); }
.n3d-pantalla { pointer-events: auto; font-size: var(--fs-min); line-height: 1; padding: 0.3rem 0.6rem; align-self: flex-end; display: inline-flex; gap: 0.35rem; align-items: center; background: color-mix(in srgb, var(--acento) 22%, var(--superficie)); border-color: var(--acento); font-weight: 600; }
.n3d-pantalla span[aria-hidden] { font-size: 1.05rem; }
.n3d-plegar { margin-left: auto; border: 0; background: none; color: var(--texto-3); font-size: 1rem; cursor: pointer; line-height: 1; padding: 0 0.3rem; }
#n3d-estado .tarjeta__titulo, .n3d-mandos__cabeza { display: flex; align-items: center; gap: 0.5rem; }
.n3d-plegado > :not(.tarjeta__titulo):not(.n3d-mandos__cabeza) { display: none !important; }
.n3d-plegar-barra { display: none; gap: 0.3rem; pointer-events: auto; }
body.n3d-en-pantalla .n3d-plegar-barra { display: flex; }
.n3d-plegar-bloque { font-size: var(--fs-min); padding: 0.2rem 0.5rem; }
.n3d-plegar-bloque[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento-texto); border-color: var(--acento); }
.n3d-oculto { display: none !important; }
.n3d-escena-caja:fullscreen { background: var(--fondo); border: 0; border-radius: 0; }
.n3d-pantalla-lado { position: absolute; top: var(--esp-2); right: var(--esp-2); width: 300px; max-height: calc(100% - 2 * var(--esp-2)); overflow: auto; display: flex; flex-direction: column; gap: var(--esp-2); scrollbar-width: thin; }
.n3d-pantalla-lado .tarjeta { background: color-mix(in srgb, var(--superficie) 82%, transparent); backdrop-filter: blur(4px); padding: var(--esp-2) var(--esp-3); }
.n3d-pantalla-lado #n3d-boro-caja, .n3d-pantalla-lado #n3d-turbina-caja, .n3d-pantalla-lado .n3d-avanzado, .n3d-pantalla-lado #n3d-individuales-caja, .n3d-pantalla-lado .n3d-mandos > .n3d-nota { display: none; }
.n3d-escena-caja:fullscreen .n3d-superpuesto__der { margin-right: 310px; }
.n3d-escena-caja:fullscreen .n3d-instrumentos__grupo--der { margin-right: 310px; }
.n3d-escena-caja:fullscreen .n3d-lienzo { height: 100% !important; }
.n3d-instrumentos--escena .tarjeta__titulo { display: none; }
.n3d-instrumentos--escena .instrumento { background: transparent; border: 0; }
.n3d-cabina .n3d-pista { bottom: 9.4rem; }
.n3d-cabina .n3d-flotante { bottom: 9.4rem; }
.n3d-cabina .n3d-superpuesto__der .n3d-leyenda-termica { position: static; width: 220px; }
.n3d-variables { margin-bottom: var(--esp-3); }
.n3d-cabina .tarjeta { padding: var(--esp-3); }
.n3d-cabina .n3d-mandos { gap: var(--esp-2); font-size: 0.95em; }
.n3d-cabina .banco__deslizador { height: 100px; }
.n3d-cabina .n3d-instrumentos__fila { justify-content: center; padding-bottom: 0; }
.n3d-cabina .instrumento { padding: 0.2rem 0.15rem; }
.n3d-cabina .n3d-datos { font-size: var(--fs-nota); gap: 0.1rem 0.6rem; grid-template-columns: minmax(0, 1fr) auto; }
.n3d-cabina #n3d-estado .tarjeta__titulo { font-size: 1rem; margin-bottom: var(--esp-1); }
.n3d-cabina .n3d-mandos .tarjeta__titulo { font-size: 1rem; margin-bottom: var(--esp-1); }
.n3d-desglose-plegable { margin-top: var(--esp-2); }
.n3d-desglose-plegable summary { cursor: pointer; font-weight: 600; }
.n3d-bajo-cabina { margin-top: var(--esp-3); }
.n3d-bajo-cabina .n3d-piezas-caja-ext { margin-top: 0; }
@media (min-width: 1101px) { .n3d-cabecera__sub { display: none; } .n3d-cabecera { display: flex; align-items: baseline; gap: var(--esp-4); margin: 0 0 var(--esp-1); } .n3d-cabecera h1 { font-size: 1.1rem; margin: 0; line-height: 1.3; } .n3d-cifras { margin: 0; font-size: var(--fs-min); gap: 0.2rem 0.9rem; flex: 1 1 auto; } .n3d-bajo-cabina > .tomi-dock { margin-bottom: var(--esp-3); } }
/* Revisión de diseño del 20 de octubre: la columna de mandos medía 1484 px de contenido en 554 visibles.
   Causas: filas que se partían sin querer (la etiqueta de 5,5 rem más el control no cabían en 258 px),
   el bloque de lectura «Refrigeración» entre los mandos (ahora en el Estado) y los espacios dobles. */
.n3d-cabina .n3d-fila { gap: 0.3rem 0.4rem; }
.n3d-cabina .n3d-fila > .n3d-etiqueta { flex-basis: 100%; min-width: 0; font-size: var(--fs-min); line-height: 1.2; }
.n3d-mandos__cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); }
.n3d-mandos__cabeza .tarjeta__titulo { margin: 0; }
.n3d-mandos__cabeza .n3d-modo { margin: 0; } .n3d-mandos__cabeza .n3d-modo .n3d-etiqueta { display: none; }
.n3d-mandos__bloque { padding-top: 0.45rem; border-top: 1px solid var(--borde); }
.n3d-cabina .n3d-mandos > .n3d-subtitulo { margin-top: 0; }
.n3d-estado-cabeza { flex-wrap: wrap; }
.n3d-cabina > .n3d-instrumentos { background: none; border: 0; padding: 0; }
.n3d-cabina .instrumento { flex: 0 0 auto; width: 84px; max-width: 84px; }
.n3d-cabina .instrumento__dial { width: 70px; height: 56px; }
.n3d-cabina .instrumento__numero:not(.instrumento__numero--extremo) { display: none; } /* a este tamaño las cifras intermedias eran ruido de 6 px */
@media (max-height: 780px) { .n3d-cabina .banco__deslizador { height: 100px; } .n3d-cabina .instrumento__dial { max-width: 84px; } .n3d-cabina .n3d-grande__valor { font-size: 1.1rem; } }
@media (max-width: 1100px) {
  .n3d-cabina { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .n3d-lado { display: contents; }
  .n3d-lado > #n3d-estado { order: 2; overflow: visible; }
  .n3d-lado > .n3d-mandos { order: 3; overflow: visible; }
  .n3d-instrumentos--escena { position: static; margin-top: var(--esp-2); background: var(--superficie); pointer-events: auto; }
  .n3d-cabina .n3d-pista, .n3d-cabina .n3d-flotante { bottom: var(--esp-2); }
  .n3d-cabina > .n3d-escena-caja { order: 1; aspect-ratio: 16 / 10; height: auto; min-height: 340px; }
  @media (max-width: 720px) {
    .n3d-cabina > .n3d-escena-caja { position: sticky; top: 61px; z-index: 5; aspect-ratio: auto; height: 44vh; min-height: 260px; max-height: 44vh; }
    .n3d-pista { display: none; }
    .n3d-vistas-caja { min-width: 0; flex: 1 1 auto; } /* las vistas encogen y se deslizan; la franja de k se queda a la vista */
    .n3d-vistas { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .n3d-flotante__texto { max-height: 5.5em; }
  }
  .n3d-cabina > .n3d-mandos { order: 2; overflow: visible; }
  .n3d-cabina > #n3d-estado { order: 3; overflow: visible; }
  .n3d-cabina > .n3d-instrumentos { order: 4; }
  .n3d-cabina > .n3d-instrumentos .tarjeta__titulo { display: block; }
}
.n3d-aviso-beta { margin: 0 0 var(--esp-2); padding: 0.35rem 0.7rem; font-size: var(--fs-min); border-radius: var(--r-m); background: color-mix(in srgb, #e0b400 14%, var(--superficie)); border: 1px solid color-mix(in srgb, #e0b400 45%, var(--borde)); }
.n3d-columna { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.n3d-vistas button { font-size: var(--fs-min); padding: 0.25rem 0.55rem; white-space: nowrap; }
.n3d-vistas-mas { font-size: var(--fs-min); padding: 0.2rem 0.35rem; border-radius: var(--r-m); background: color-mix(in srgb, var(--superficie) 78%, transparent); border: 1px solid var(--borde); backdrop-filter: blur(4px); }
.n3d-superpuesto__der { display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-1); }
@media (min-width: 1101px) { .n3d-cabina .n3d-franja { display: none; } } /* k y potencia están al lado, en el Estado; la franja solo hace falta apilado */
.n3d-escena-caja:has(.n3d-flotante:not([hidden])) .n3d-pista { display: none; }
.n3d-vistas-mas__titulo { cursor: pointer; color: var(--texto-2); padding: 0.15rem 0.3rem; list-style: none; }
.n3d-vistas-mas__titulo::before { content: '▸ '; }
.n3d-vistas-mas[open] .n3d-vistas-mas__titulo::before { content: '▾ '; }
.n3d-vistas-mas > .n3d-vistas-extras, .n3d-vistas-mas > .n3d-calidad { margin-top: var(--esp-1); }
.n3d-leyenda-tubos { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: var(--esp-2) 0 0; font-size: var(--fs-min); color: var(--texto-3); }
.n3d-leyenda-tubos > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.n3d-leyenda-tubos i { display: inline-block; width: 1.4rem; height: 0.5rem; border-radius: 0.25rem; background: var(--c); }
@media (max-width: 1000px) { .n3d-rejilla { grid-template-columns: minmax(0, 1fr); } }

/* --- La escena --- */
.n3d-escena-caja { position: relative; aspect-ratio: 16 / 10; min-height: 300px; border-radius: var(--r-m); overflow: hidden; background: var(--superficie); border: 1px solid var(--borde); }
@media (max-width: 720px) { .n3d-escena-caja { aspect-ratio: 4 / 3.4; min-height: 300px; max-height: 68vh; } }
.n3d-lienzo { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.n3d-superpuesto { position: absolute; inset: var(--esp-2) var(--esp-2) auto; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--esp-2); pointer-events: none; }
.n3d-superpuesto > * { pointer-events: auto; }
.n3d-vistas-caja { display: flex; flex-direction: column; gap: var(--esp-1); align-items: flex-start; }
.n3d-vistas-extras { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.n3d-alternar { font-size: var(--fs-min); padding: 0.2rem 0.55rem; background: var(--superficie-2); border-color: var(--borde); color: var(--texto); }
.n3d-alternar[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento-texto); border-color: var(--acento); }
.n3d-calidad { display: flex; align-items: center; gap: var(--esp-1); font-size: var(--fs-min); color: var(--texto-3); }
.n3d-calidad__grupo button { font-size: var(--fs-min); padding: 0.15rem 0.5rem; }
.n3d-flotante { position: absolute; right: var(--esp-2); bottom: var(--esp-2); width: min(340px, 46%); padding: var(--esp-2) 2rem var(--esp-2) var(--esp-3); border-radius: var(--r-m); background: color-mix(in srgb, var(--superficie) 86%, transparent); border: 1px solid var(--borde); border-left: 3px solid var(--acento); backdrop-filter: blur(4px); font-size: var(--fs-nota); }
.n3d-flotante__nombre { margin: 0 0 0.25rem; font-weight: 600; font-size: var(--fs-pequeno); }
.n3d-flotante__texto { margin: 0; color: var(--texto-2); line-height: 1.35; max-height: 9.5em; overflow: auto; }
.n3d-flotante__cerrar { position: absolute; top: 0.3rem; right: 0.4rem; border: 0; background: none; color: var(--texto-3); font-size: 1.1rem; cursor: pointer; line-height: 1; }
@media (max-width: 720px) { .n3d-flotante { width: calc(100% - 2 * var(--esp-2)); bottom: 2.4rem; } }
.n3d-piezas { margin-top: 0; }
.n3d-piezas-caja-ext.tarjeta .n3d-subtitulo { margin-top: 0; font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--texto); }
.n3d-piezas-caja-ext .n3d-leyenda-tubos { margin: var(--esp-2) 0 var(--esp-3); }
#titulo-ensamble { font-size: var(--fs-nota); color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.04em; margin: var(--esp-4) 0 var(--esp-1); }
.n3d-piezas__lista { margin-top: var(--esp-1); }
.n3d-piezas-caja-ext { margin-top: calc(-1 * var(--esp-2)); }
.n3d-piezas__lista { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.n3d-pieza { font-size: var(--fs-min); padding: 0.2rem 0.55rem; }
.n3d-pieza[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento-texto); border-color: var(--acento); }
.n3d-pieza--todo { border-style: dashed; }
.n3d-piezas__tarjeta { margin-top: var(--esp-2); padding: var(--esp-2) var(--esp-3); border-left: 3px solid var(--acento); background: var(--fondo-2, rgba(127,127,127,0.08)); border-radius: 0 0.4rem 0.4rem 0; }
.n3d-piezas__nombre { margin: 0 0 0.25rem; font-weight: 600; }
.n3d-piezas__texto { margin: 0; font-size: var(--fs-nota); color: var(--texto-2); }
.n3d-franja { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; padding: 0.35rem 0.6rem; border-radius: var(--r-m); background: color-mix(in srgb, var(--superficie) 78%, transparent); border: 1px solid var(--borde); font-size: var(--fs-pequeno); backdrop-filter: blur(4px); }
.n3d-franja .n3d-k { font-size: 1.05rem; font-weight: 600; }
.n3d-pista { position: absolute; left: var(--esp-2); bottom: var(--esp-2); margin: 0; font-size: var(--fs-min); color: var(--texto-2); background: color-mix(in srgb, var(--superficie) 70%, transparent); padding: 0.2rem 0.5rem; border-radius: var(--r-s); pointer-events: none; max-width: 60%; }
.n3d-error { position: absolute; inset: auto var(--esp-2) var(--esp-2); z-index: 3; }

/* --- Mandos --- */
.n3d-mandos { display: flex; flex-direction: column; gap: var(--esp-3); }
.n3d-bancos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.n3d-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-size: var(--fs-pequeno); }
.n3d-etiqueta { color: var(--texto-3); font-size: var(--fs-nota); min-width: 5.5rem; }
.n3d-acciones { display: grid; grid-template-columns: 1fr; gap: 0.35rem; }
.n3d-cabina .n3d-acciones { grid-template-columns: 2fr 1fr; } /* SCRAM grande y Rearmar al lado */
.n3d-cabina .n3d-acciones .n3d-partida { grid-column: 1 / -1; }
.n3d-cabina .n3d-emergencias .n3d-acciones { grid-template-columns: 1fr; }
.n3d-turbina-plegable > summary, .n3d-refrigeracion-plegable > summary { cursor: pointer; font-size: var(--fs-nota); color: var(--texto-2); font-weight: 600; }
.n3d-turbina-plegable[open] > summary, .n3d-refrigeracion-plegable[open] > summary { margin-bottom: 0.35rem; }
.n3d-refrigeracion-plegable.n3d-alerta > summary { color: #ff9a3c; }
.n3d-cabina .n3d-grandes { grid-template-columns: 1fr 1fr; }
.n3d-cabina .n3d-grande { grid-template-columns: 1fr; grid-template-areas: "etiqueta" "valor" "detalle"; padding: 0.3rem 0.5rem; }
.n3d-cabina .n3d-grande__valor { justify-self: start; font-size: 1.25rem; line-height: 1.1; }
.n3d-cabina .n3d-datos { line-height: 1.25; }
.n3d-cabina #n3d-estado .plegable > summary { font-size: var(--fs-nota); }
.boton--scram { justify-content: center; padding: 0.5rem; font-size: 1rem; background: #c0392b; color: #fff; border-color: #c0392b; font-weight: 700; letter-spacing: 0.12em; box-shadow: 0 2px 0 rgb(0 0 0 / 25%); } /* el rojo del Reactor PWR (--r-scram, 5,4:1 con blanco) */
.boton--scram:hover:not(:disabled) { background: #a93226; border-color: #a93226; }
#n3d-rearmar { justify-content: center; }
.boton--scram:disabled { opacity: 0.45; }
.n3d-boro__valor { min-width: 6rem; text-align: center; }
.n3d-boro .boton-paso { white-space: nowrap; width: auto; padding: 0.25rem 0.6rem; }
.n3d-turbina { display: flex; flex-direction: column; gap: 0.35rem; }
.n3d-casilla { cursor: pointer; }
.n3d-casilla input { accent-color: var(--acento); }
#n3d-carga { flex: 1 1 8rem; min-width: 6rem; accent-color: #e0b400; }
.n3d-reloj__tiempo { color: var(--texto-2); }
.n3d-vapor { margin: 0; }
.n3d-mal { color: #ff6b5e; font-weight: 600; }
:root[data-tema="claro"] .n3d-mal { color: #b71c1c; }
.n3d-peligro { border-color: #c62828; color: #ff8a80; }
:root[data-tema="claro"] .n3d-peligro { color: #b71c1c; }
.n3d-peligro:hover:not(:disabled) { background: rgb(198 40 40 / 15%); }
.n3d-emergencias { margin-top: 0; }
.n3d-emergencias > summary { font-weight: 600; color: var(--texto-2); font-size: var(--fs-pequeno); }
.n3d-emergencias .n3d-acciones { margin: var(--esp-2) 0; }
.n3d-tendencias-lienzo { display: block; width: 100%; }
#n3d-refrigeracion-caja:empty { min-height: 90px; }
.segmentado__pausa { margin-left: 0.25rem; border-left: 1px solid var(--borde); min-width: 2.2rem; }
.n3d-nota { font-size: var(--fs-nota); color: var(--texto-3); margin: 0; }

/* Los bancos: las reglas del Reactor PWR (reactor.css), para los mismos elementos que monta montarBancos. */
.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); }
.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: #22b8a5; }
.banco--A .banco__letra { color: #4a90e2; }
.banco--S .banco__letra { color: var(--texto); }
.banco__nombre { font-size: var(--fs-min); color: var(--texto-3); text-align: center; }
.banco__pie { font-size: var(--fs-min); color: var(--texto-3); }
.banco__mover { width: 34px; height: 30px; font-size: 0.85rem; touch-action: manipulation; -webkit-touch-callout: none; }
.banco__valor { font-size: 0.78rem; white-space: nowrap; }
.banco__deslizador { writing-mode: vertical-lr; direction: ltr; width: 28px; height: 150px; margin: 0.2rem 0; accent-color: var(--acento); cursor: ns-resize; touch-action: none; }
.banco--R .banco__deslizador { accent-color: #22b8a5; }
.banco--A .banco__deslizador { accent-color: #4a90e2; }
.banco--S .banco__deslizador { accent-color: #b9c0c9; }
.banco__riel { position: relative; display: flex; justify-content: center; margin: 0.2rem 0; }
.banco__riel .banco__deslizador { margin: 0; }
.banco__real { position: absolute; top: calc(8px + (100% - 16px) * var(--pos, 0)); right: calc(50% + 9px); width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--texto); transform: translateY(-50%); transition: top 0.2s linear; pointer-events: none; }
.mandos-nota { font-size: var(--fs-nota); color: var(--texto-3); margin: 0.6rem 0 0; }

/* --- Estado --- */
.n3d-estado-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); margin-bottom: var(--esp-2); }
.n3d-grandes { display: grid; grid-template-columns: 1fr; gap: var(--esp-1); margin: var(--esp-2) 0; }
.n3d-grande { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "etiqueta valor" "detalle valor"; align-items: center; column-gap: 0.6rem; padding: 0.35rem 0.6rem; border-radius: var(--r-m); background: var(--superficie-2); border: 1px solid var(--borde); }
.n3d-grande__etiqueta { grid-area: etiqueta; display: block; font-size: var(--fs-min); color: var(--texto-3); }
.n3d-grande__valor { grid-area: valor; justify-self: end; display: block; font-size: 1.2rem; font-weight: 600; white-space: nowrap; }
.n3d-grande__detalle { grid-area: detalle; display: block; font-size: var(--fs-min); color: var(--texto-2); }
.n3d-k { font-size: 1.15rem; font-weight: 600; }
/* El medidor de k efectivo, como el del Reactor PWR: barra de 0,90 a 1,10 con el 1 en el centro. */
.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 { display: flex; justify-content: space-between; font-size: var(--fs-min); color: var(--texto-3); margin-top: 0.2rem; margin-bottom: var(--esp-2); }
.indicador-k--mini { width: 7.5rem; height: 6px; margin-top: 0.3rem; }
.indicador-k--mini .indicador-k__marca { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.insignia-k { font-size: var(--fs-min); font-weight: 700; letter-spacing: 0.04em; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.insignia-k--apagado { color: var(--texto-3); }
.insignia-k--sub { color: #6aa5f0; }
.insignia-k--critico { color: #2bbd7a; }
.insignia-k--super { color: #ff9a3c; }
.insignia-k--inmediato { color: #ff6b5e; background: rgb(214 40 40 / 18%); }
:root[data-tema="claro"] .insignia-k--sub { color: #1f6cc4; }
:root[data-tema="claro"] .insignia-k--critico { color: #157a4f; }
:root[data-tema="claro"] .insignia-k--super { color: #b35a00; }
:root[data-tema="claro"] .insignia-k--inmediato { color: #b71c1c; }
.n3d-datos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.75rem; margin: 0; font-size: var(--fs-pequeno); }
.n3d-datos dt { color: var(--texto-3); font-size: var(--fs-nota); }
.n3d-datos dd { margin: 0; text-align: right; white-space: nowrap; }
.n3d-subtitulo { font-size: var(--fs-nota); color: var(--texto-3); margin: var(--esp-3) 0 var(--esp-1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.n3d-desglose { width: 100%; border-collapse: collapse; font-size: var(--fs-pequeno); }
.n3d-desglose th { text-align: left; font-weight: 400; color: var(--texto-2); padding: 0.1rem 0; }
.n3d-desglose td { text-align: right; padding: 0.1rem 0; }
.n3d-aviso { margin: var(--esp-2) 0 0; font-size: var(--fs-pequeno); }

/* --- Abajo: mapa, forma, ensamble, estado --- */
.n3d-abajo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--esp-4); margin-top: var(--esp-4); align-items: start; }
.n3d-tendencias-lienzo { aspect-ratio: 4 / 3; }
.n3d-mapa-lienzo { display: block; width: 100%; aspect-ratio: 1 / 1; cursor: pointer; }
.n3d-perfil-lienzo { display: block; width: 100%; }
.n3d-leyenda { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--esp-2); font-size: var(--fs-min); color: var(--texto-3); }
.n3d-leyenda canvas { flex: 1 1 auto; height: 10px; border-radius: 3px; }
.n3d-ensamble__vacio { color: var(--texto-3); font-size: var(--fs-pequeno); margin: 0; }
.n3d-ensamble__nota, .n3d-ensamble__pico { font-size: var(--fs-nota); color: var(--texto-3); margin: var(--esp-2) 0 0; }
.n3d-ensamble__pico { color: var(--texto-2); }

/* --- Explicaciones --- */
.n3d-explicaciones { margin-top: var(--esp-5); }
.n3d-explicaciones h2 { margin-bottom: var(--esp-3); }
.n3d-explicaciones details.tarjeta { padding: 0; margin-bottom: var(--esp-2); }
.n3d-explicaciones details.tarjeta > summary { cursor: pointer; padding: var(--esp-3) var(--esp-4); font-weight: 600; }
.n3d-explicaciones details.tarjeta > :not(summary) { margin: 0 var(--esp-4) var(--esp-3); }
.n3d-explicaciones details.tarjeta > p:last-child, .n3d-explicaciones details.tarjeta > ul:last-child { margin-bottom: var(--esp-4); }
.n3d-explicaciones ul { padding-left: 1.2rem; }
.n3d-explicaciones li { margin-bottom: 0.25rem; }
.n3d-explicaciones h3 { font-size: var(--fs-base); margin: var(--esp-3) var(--esp-4) var(--esp-2); }
.n3d-aviso-final { margin-top: var(--esp-4); }

/* --- Básico / Avanzado --- */
.n3d-avanzado { display: none; }
body.modo-avanzado .n3d-avanzado { display: block; }

.n3d-solo-bombas { display: none; }
body.variante-bombas .n3d-solo-bombas { display: flex; }
.n3d-bancos--apagados { opacity: 0.45; pointer-events: none; }
.n3d-individuales { margin-top: 0; }
.n3d-individuales__rejilla { display: none; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.2rem; margin: var(--esp-2) 0; }
@media (max-width: 420px) { .n3d-individuales__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.n3d-individuales--activas .n3d-individuales__rejilla { display: grid; }
.n3d-individuales--activas + #n3d-individuales-volver, .n3d-individuales--activas #n3d-individuales-volver { display: inline-block; }
.n3d-individuales #n3d-individuales-volver { display: none; }
.barra-sola { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.25rem 0.1rem; border-radius: var(--r-s); background: var(--superficie-2); }
.barra-sola__nombre { font-size: var(--fs-min); font-weight: 700; white-space: nowrap; }
.barra-sola--R .barra-sola__nombre { color: #22b8a5; }
.barra-sola--A .barra-sola__nombre { color: #4a90e2; }
.barra-sola--S .barra-sola__nombre { color: var(--texto); }
.barra-sola__deslizador { writing-mode: vertical-lr; direction: ltr; width: 22px; height: 84px; margin: 0; accent-color: var(--acento); cursor: ns-resize; touch-action: none; }
.barra-sola--R .barra-sola__deslizador { accent-color: #22b8a5; }
.barra-sola--A .barra-sola__deslizador { accent-color: #4a90e2; }
.barra-sola--S .barra-sola__deslizador { accent-color: #b9c0c9; }
.barra-sola__valor { font-size: var(--fs-min); }
.n3d-variante__grupo button { white-space: normal; text-align: center; line-height: 1.15; }
.n3d-avanzados, .n3d-recarga { margin-top: 0; }
#n3d-descarga { flex: 1 1 6rem; min-width: 5rem; accent-color: #e0b400; }

/* --- Instrumentos --- */
.n3d-instrumentos { margin-top: 0; }
.n3d-instrumentos__fila { display: flex; gap: var(--esp-2); overflow-x: auto; padding-bottom: var(--esp-1); scrollbar-width: thin; }
.instrumento { flex: 0 0 auto; width: 118px; display: flex; flex-direction: column; align-items: center; padding: 0.3rem 0.2rem; border-radius: var(--r-m); background: var(--superficie-2); border: 1px solid var(--borde); }
.instrumento__dial { width: 100px; height: 80px; }
.instrumento__fondo { fill: none; stroke: var(--borde); stroke-width: 8; }
.instrumento__zona { fill: none; stroke-width: 8; opacity: 0.85; }
.instrumento__zona--verde { stroke: #2bbd7a; }
.instrumento__zona--amarillo { stroke: #e0b400; }
.instrumento__zona--rojo { stroke: #d62828; }
.instrumento__marca { stroke: var(--texto-3); stroke-width: 1.2; }
.instrumento__numero { fill: var(--texto-3); font-size: 8px; font-family: var(--fuente-datos); }
.instrumento__aguja { stroke: var(--texto); stroke-width: 2.4; stroke-linecap: round; transition: transform 0.25s linear; }
.instrumento__eje { fill: var(--texto); }
.instrumento__valor { font-size: var(--fs-pequeno); font-weight: 600; margin-top: -0.2rem; }
.instrumento__nombre { font-size: var(--fs-min); color: var(--texto-3); text-align: center; line-height: 1.15; }
.instrumento[data-zona="rojo"] .instrumento__valor { color: #ff6b5e; }
.instrumento[data-zona="amarillo"] .instrumento__valor { color: #e0b400; }
:root[data-tema="claro"] .instrumento[data-zona="rojo"] .instrumento__valor { color: #b71c1c; }
:root[data-tema="claro"] .instrumento[data-zona="amarillo"] .instrumento__valor { color: #8a6d00; }
#n3d-instrumentos-fila:empty { min-height: 150px; }

/* --- La leyenda de la cámara térmica --- */
.n3d-leyenda-termica { width: min(240px, 50vw); padding: 0.35rem 0.5rem 1.1rem; border-radius: var(--r-m); background: color-mix(in srgb, var(--superficie) 78%, transparent); border: 1px solid var(--borde); font-size: var(--fs-min); color: var(--texto-2); pointer-events: none; }
.n3d-leyenda-termica canvas { display: block; width: 100%; height: 12px; border-radius: 3px; margin-top: 0.25rem; }
.n3d-leyenda-termica__marcas { position: relative; height: 0.9rem; }
.n3d-leyenda-termica__marcas span { position: absolute; transform: translateX(-50%); top: 0.1rem; font-family: var(--fuente-datos); font-size: 0.65rem; white-space: nowrap; }

/* --- El esquema de la planta --- */
.n3d-esquema-caja { grid-column: 1 / -1; }
.esquema-planta { display: block; width: 100%; height: auto; max-height: 440px; }
.esq-texto { fill: var(--texto-2); font-size: 11px; font-family: var(--fuente); }
.esq-texto--mini { font-size: 9px; fill: var(--texto-3); }
.esq-texto--g { font-size: 16px; font-weight: 700; fill: var(--texto); }
.esq-cifra { fill: var(--texto); font-size: 10px; font-family: var(--fuente-datos); }
.esq-cifra--caliente { fill: #ff9a5c; }
.esq-cifra--fria { fill: #7fb8ff; }
.esq-cifra--vapor { fill: #ff8a80; }
.esq-cifra--piscina { fill: #5fd0e8; }
.esq-vasija__cuerpo { fill: var(--superficie-2); stroke: var(--borde-fuerte); stroke-width: 3; }
.esq-nucleo { fill: color-mix(in srgb, #ffb347 calc(var(--brillo, 0) * 100%), #4a4030); }
.esq-barra { fill: #22232a; stroke: #8c96a0; stroke-width: 0.5; }
.esq-gv__cuerpo { fill: var(--superficie-2); stroke: var(--borde-fuerte); stroke-width: 3; }
.esq-serpentin { fill: none; stroke: #d9623a; stroke-width: 2.5; }
.esq-tubo-pared { fill: none; stroke: var(--borde-fuerte); stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; }
.esq-tubo { fill: none; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; transition: opacity 0.4s; }
.esq-tubo--caliente { stroke: #d9623a; }
.esq-tubo--fria { stroke: #3f86d6; }
.esq-tubo--vapor { stroke: #c94a3a; }
.esq-tubo--piscina { stroke: #2fa7c9; }
.esq-tubo--apagado { opacity: 0.25; }
.esq-puntos { fill: none; stroke: rgb(255 255 255 / 85%); stroke-width: 2; stroke-dasharray: 4 20; stroke-linecap: round; }
.esq-puntos--quieta { opacity: 0; }
.esq-flecha--caliente { fill: #d9623a; } .esq-flecha--fria { fill: #3f86d6; } .esq-flecha--vapor { fill: #c94a3a; } .esq-flecha--piscina { fill: #2fa7c9; }
.esq-bomba__carcasa { fill: var(--superficie); stroke: var(--texto-2); stroke-width: 2; }
.esq-bomba__aspa { fill: var(--texto); }
.esq-bomba--parada .esq-bomba__aspa { fill: var(--texto-3); }
.esq-bomba--oculta { display: none; }
.esq-oculto { display: none; }
.esq-texto--natural { fill: var(--texto-3); font-style: italic; }
.esq-valvula__cuerpo { fill: var(--superficie); stroke: var(--texto-3); stroke-width: 1.5; }
.esq-valvula--abierta .esq-valvula__cuerpo { fill: #2bbd7a; stroke: #2bbd7a; }
.esq-turbina__cuerpo { fill: var(--superficie-2); stroke: var(--borde-fuerte); stroke-width: 2; }
.esq-eje { stroke: var(--texto-3); stroke-width: 3; }
.esq-generador { fill: var(--superficie-2); stroke: var(--borde-fuerte); stroke-width: 2; }
.esq-condensador__cuerpo { fill: var(--superficie-2); stroke: var(--borde-fuerte); stroke-width: 2; }
.esq-ondas { fill: none; stroke: #3f86d6; stroke-width: 1.5; }
.esq-piscina__agua { fill: rgb(47 167 201 / 30%); stroke: #2fa7c9; stroke-width: 1.5; }
.esq-intercambiador { fill: none; stroke: #c94a3a; stroke-width: 2; }
.esq-tanque { fill: rgb(47 167 201 / 30%); stroke: #2fa7c9; stroke-width: 1.5; }
#n3d-esquema:empty { min-height: 300px; }

/* Alto reservado mientras monta el JavaScript (CLS). */
#n3d-bancos:empty { min-height: 290px; }
#n3d-estado-cuerpo:empty { min-height: 540px; }
#n3d-ensamble-cuerpo:empty { min-height: 60px; }

/* ?captura: solo la escena, para la miniatura. */
.modo-captura .n3d-cabina { display: block; height: auto; } .modo-captura #n3d-estado, .modo-captura .n3d-instrumentos, .modo-captura .n3d-bajo-cabina { display: none !important; } .modo-captura .n3d-escena-caja { aspect-ratio: 16 / 9; height: auto; }
.modo-captura header, .modo-captura footer, .modo-captura .n3d-cabecera, .modo-captura .n3d-mandos, .modo-captura .n3d-abajo, .modo-captura .n3d-explicaciones, .modo-captura .tomi-guia, .modo-captura .retos-modulo, .modo-captura .n3d-aviso-final, .modo-captura .n3d-superpuesto, .modo-captura .n3d-pista { display: none !important; }
.modo-captura .n3d-rejilla { grid-template-columns: 1fr; }
.modo-captura main { padding: 0; max-width: none; }
.modo-captura .n3d-escena-caja { aspect-ratio: 16 / 9; border: 0; border-radius: 0; }