/*
  Estilos del Simulador de exposición.

  Los carga SOLO su página, igual que hizo el Módulo 5, para que nada de aquí
  pueda cambiar el aspecto de los módulos publicados por un descuido.

  La escena va SIEMPRE en oscuro, con tema claro o con tema oscuro, y eso es del
  §2 del documento. No es una preferencia estética: sobre fondo negro un trazo
  de radiación se lee como luz, que es lo que es, y sobre fondo blanco se leería
  como tinta. El resto de la página sigue el tema del sitio, así que la escena
  es una pieza con su propio lienzo dentro de una página que no lo es.
*/

/* --- La línea de estado del §3 -------------------------------------------- */
/* Los dos estados que no son de ninguna pieza: «Cargando» mientras los datos
   evaluados vienen por el cable, y «Datos insuficientes» cuando un enlace pide
   algo que este catálogo no tiene. Va arriba del todo porque las dos cosas
   afectan a la página entera, no a un panel. */
.sim-estado {
  margin: 0 0 var(--espacio-3, 1rem);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--texto);
  background: var(--superficie-2);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-1, 4px);
}
.sim-estado--flotante {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  margin: 0;
  max-width: calc(100vw - 2rem);
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.25);
}

/* --- El tablero: escena dominante, controles al lado (§2) ---------------- */
.sim-tablero {
  display: grid;
  /* La lateral lleva DOS piezas lado a lado, así que necesita más que un
     tercio: con 1fr frente a 2fr cada mitad se quedaba en 150 px y sus textos
     se estiraban hacia abajo hasta doblar la altura de la escena. */
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: var(--espacio-3, 1rem);
  align-items: start;
}

.sim-tablero__controles {
  /* La franja de control va DEBAJO y a todo lo ancho, como en §2: es lo que se
     toca, y tenerlo repartido en una columna estrecha lo escondería. */
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  /* En móvil se apilan escena, indicadores y controles, y ningún control
     esencial queda escondido detrás de la escena (§2 y §21). */
  .sim-tablero {
    grid-template-columns: minmax(0, 1fr);
  }
}

.entrada-modulo {
  max-width: 70ch;
  color: var(--texto-2);
}

/* --- La escena ------------------------------------------------------------ */

.escena-sim {
  position: relative;
}

.escena-sim__lienzo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio-1, 6px);
  background: #0d1117;
}

/*
  El asa de la figura. Va superpuesta al lienzo porque un canvas no puede
  recibir el foco por partes, y hace falta que la figura se pueda arrastrar con
  el ratón Y mover con el teclado (§3).
*/
.escena-sim__asa {
  position: absolute;
  width: 84px;
  transform: translateX(-50%);
  cursor: ew-resize;
  touch-action: none;
  border-radius: 8px;
}

.escena-sim__asa:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  background: rgba(76, 201, 240, 0.12);
}

.escena-sim__leyenda {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--texto-2);
}

/* --- Los mandos de la escena: colores y calidad --------------------------- */

/* Los colores del modo «separar por color», los mismos de la cámara de
   niebla. Van sobre el fondo oscuro de la escena y no cambian con el tema. */
.escena-sim {
  --sim-alfa: #ff4b4b;
  --sim-beta: #4a9dff;
  --sim-foton: #3ddc7a;
  --sim-interaccion: #ffb347;
}

.escena-sim__mandos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 0.6rem;
}
.escena-sim__mandos[hidden] { display: none; }

.escena-sim__separar { display: inline-flex; align-items: center; gap: 0.5rem; }
.escena-sim__separar[aria-pressed="true"] {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--texto);
}
.escena-sim__puntos { display: inline-flex; gap: 3px; }

.escena-sim__punto {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.escena-sim__punto--alfa { background: var(--sim-alfa); }
.escena-sim__punto--beta { background: var(--sim-beta); }
.escena-sim__punto--foton { background: var(--sim-foton); }
.escena-sim__punto--interaccion { background: var(--sim-interaccion); }

.escena-sim__calidad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}
.escena-sim__rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-3);
}

.escena-sim__colores {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
  font-size: 0.85rem;
  color: var(--texto-2);
}
.escena-sim__colores[hidden] { display: none; }

/* --- El acceso al catálogo, sin tarjeta: una franja encima de la escena --- */
.sim-catalogo { margin: 0 0 1rem; display: grid; gap: 0.6rem; }

/* --- Tasa × tiempo = dosis -------------------------------------------------- */
.cifras-dosis--ecuaciones { display: block; }
.ecuacion-dosis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.6rem;
}
.ecuacion-dosis[hidden] { display: none; }
.ecuacion-dosis .cifra {
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  padding: 0.7rem 0.8rem;
  background: var(--superficie-2);
}
/* Dos líneas reservadas: el tiempo («47 segundos / 0,0129 horas») pasa a dos
   líneas en cuanto arranca el reloj y empujaba 25 px el bloque en sievert. */
.ecuacion-dosis .cifra__valor { font-size: clamp(1rem, 1.9vw, 1.35rem); min-height: 2.3em; }
.ecuacion-dosis__signo {
  align-self: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--texto-3);
}
.ecuacion-dosis__magnitud {
  margin: 1rem 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-3);
}
.ecuacion-dosis__magnitud:first-child { margin-top: 0; }
.ecuacion-dosis__nota,
.ecuacion-dosis__sin {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--texto-2);
  max-width: 85ch;
}
@media (max-width: 640px) {
  .ecuacion-dosis { grid-template-columns: minmax(0, 1fr); }
  .ecuacion-dosis__signo { justify-self: center; line-height: 1; }
}

/* --- Tu exposición en contexto ---------------------------------------------- */
.contexto__subtitulo { font-size: 1rem; margin: 0.4rem 0 0.5rem; }
.contexto__subtitulo ~ .contexto__subtitulo { margin-top: 1.4rem; }
.contexto__intro { margin: 0 0 0.5rem; }
.contexto__lista { margin: 0 0 0.6rem; padding-inline-start: 1.1rem; display: grid; gap: 0.45rem; }
.contexto__lista[hidden], .contexto__intro[hidden] { display: none; }
.contexto__cifra { display: block; font-weight: 600; }
.contexto__condicion { display: block; font-size: 0.8rem; color: var(--texto-3); }
.contexto__no-evaluable {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.8rem;
  border-inline-start: 3px solid var(--borde-fuerte);
  color: var(--texto-2);
  font-size: 0.9rem;
}
.contexto__no-evaluable[hidden] { display: none; }
.contexto__riesgo { font-size: 0.9rem; color: var(--texto-2); max-width: 85ch; }

.indicador-agudo { margin: 0.4rem 0 0.6rem; max-width: 380px; }
.indicador-agudo svg { width: 100%; height: auto; display: block; }
.indicador-agudo__arco { stroke-width: 18; stroke-linecap: butt; }
.indicador-agudo[data-evaluable="false"] .indicador-agudo__arco { opacity: 0.25; }
.indicador-agudo__marcas line { stroke: var(--texto); stroke-width: 1.5; }
.indicador-agudo__marcas text { font-size: 10px; fill: var(--texto-2); font-family: var(--fuente-mono, ui-monospace, monospace); }
.indicador-agudo__extremo { font-size: 10px; fill: var(--texto-3); }
.indicador-agudo__peligro { font-size: 18px; fill: #d93a2f; }
.indicador-agudo__aguja { stroke: var(--texto); stroke-width: 3; stroke-linecap: round; }
.indicador-agudo__eje { fill: var(--texto); }
.indicador-agudo__pie { font-size: 0.78rem; color: var(--texto-3); text-align: center; }

/* Ñumi: la dosis aguda contada con un dibujo (solo exploración libre). */
.numi { margin-top: 0.4rem; }
.numi[hidden], .numi [hidden] { display: none !important; }
.numi__titulo { font-size: 0.95rem; }
/* Ñumi y el reloj de efectos, lado a lado (5 de octubre de 2026). */
.numi__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 1rem;
  align-items: center;
}
.numi__fila > .numi__figura { margin: 0.4rem 0 0.6rem; }
.numi__fila > .indicador-agudo { margin: 0; max-width: none; }
@media (max-width: 760px) {
  .numi__fila { grid-template-columns: minmax(0, 1fr); }
  .numi__fila > .indicador-agudo { max-width: 380px; }
}
.numi__figura {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 1rem;
  align-items: center;
  margin: 0.4rem 0 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-s, 8px);
  background: var(--superficie-2);
}
@media (max-width: 560px) {
  .numi__figura { grid-template-columns: 1fr; justify-items: center; }
}
.numi__img { display: block; width: 100%; max-width: 200px; max-height: 230px; object-fit: contain; }
.numi__pie { display: flex; flex-direction: column; gap: 0.35rem; }
.numi__nombre { font-size: 1.02rem; }
.numi__texto { margin: 0; line-height: 1.5; }
.numi__cita, .numi__nota { margin: 0; font-size: 0.78rem; color: var(--texto-3); line-height: 1.4; }
.numi__nota { margin-top: 0.4rem; }
/* La escala de las seis franjas, con la actual resaltada. */
.numi__escala {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.35rem;
}
.numi__paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem 0.2rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-s, 8px);
  opacity: 0.45;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--texto-2);
}
.numi__paso img { width: 100%; max-width: 56px; height: 52px; object-fit: contain; }
.numi__paso--actual {
  opacity: 1;
  border-color: var(--marcador);
  background: var(--marcador-suave);
  color: var(--texto);
  font-weight: 600;
}

/* La tabla de alcances es ancha: en el móvil se desplaza ella, no la página. */
.emisiones-sim__desplazable { overflow-x: auto; }
.emisiones-sim__alcances { min-width: 560px; }
.emisiones-sim__alcances th[scope="row"] { text-align: start; font-weight: 600; }
.emisiones-sim__alcances td { vertical-align: top; }
.escena-sim__colores li { display: inline-flex; align-items: center; gap: 0.4rem; }

/* --- Controles ------------------------------------------------------------ */

.control-log__ayuda {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--texto-2);
  max-width: 46ch;
}

.selector-unidad {
  font: inherit;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-1, 6px);
  padding: 0.2em 0.4em;
  min-width: 4.5em;
}

.selector-unidad:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.barra-ejecucion {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
}

/* Azul fijo en los dos temas: con el --acento del oscuro (#3987e5) el blanco
   daba 3,6:1; con este, 5,25:1 (revisión del 4 de octubre de 2026). */
.boton--principal {
  background: #1f6cc4;
  border-color: #1f6cc4;
  color: #fff;
  font-weight: 600;
}
.boton--principal:hover:not(:disabled) { background: #195aa6; border-color: #195aa6; }

/* --- Gráficas (§8) -------------------------------------------------------- */

/* Las gráficas no se estiran hasta el ancho de la tarjeta: a 1.000 px de ancho
   una curva de dos puntos se convierte en trescientos píxeles de blanco. */
.grafica-sim {
  margin: 1.25rem 0 0;
  max-width: 760px;
}

.grafica-sim__titulo {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 0.35rem;
}

.grafica-sim__lienzo {
  display: block;
  width: 100%;
  height: auto;
}

.grafica-sim__pie {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--texto-2);
  max-width: 70ch;
}

/*
  El pie que el documento exige en todas las vistas: no se pliega y no se
  esconde. Es la frase que separa una página divulgativa de una herramienta de
  protección radiológica.
*/
.pie-modulo {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--borde);
  font-style: italic;
}

/* --- El bloque del blindaje (§6) ------------------------------------------ */

/*
  Va separado de los deslizadores con su propia caja porque la barrera no es un
  ajuste más: es un objeto que se interpone, con material, grosor y sitio.
*/
.bloque-blindaje {
  margin: 1.1rem 0;
  padding: 0.85rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-1, 6px);
  background: var(--superficie-2);
}

.bloque-blindaje__interruptor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  cursor: pointer;
}

.bloque-blindaje .control-log {
  margin-top: 0.6rem;
}

.bloque-blindaje__boton-comparar {
  margin-top: 0.7rem;
}

.bloque-blindaje__comparar {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--superficie-2);
  font-size: 0.82rem;
  color: var(--texto);
}

/* Sin y con, en ese orden: se lee de izquierda a derecha lo que el panel quita. */
.bloque-blindaje__cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.bloque-blindaje__cifra {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.bloque-blindaje__cifra-rotulo {
  font-size: 0.75rem;
  color: var(--texto-2);
}

.bloque-blindaje__cifra-valor {
  font-size: 1.05rem;
  font-weight: 600;
}

.bloque-blindaje__factor {
  margin: 0.5rem 0 0;
}

.selector-unidad--ancho {
  min-width: 100%;
}

/* Un control apagado tiene que PARECER apagado, o se pulsa y no pasa nada. */
.control-log__deslizador:disabled,
.selector-unidad:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* La procedencia del material: cuando lo que se pone delante no sale de una
   tabla evaluada, la pantalla lo dice donde se elige. */
.bloque-blindaje__procedencia {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--texto-2);
  border-left: 2px solid var(--borde-fuerte, var(--borde));
  padding-left: 0.5rem;
}

/* --- El detector (§7) ----------------------------------------------------- */

.geiger__dial { display: block; width: 100%; height: auto; }
.geiger__arco { stroke: var(--borde-fuerte, var(--borde)); stroke-width: 3; }
.geiger__arco--alto { stroke: var(--dec-beta-mas, #d97706); stroke-width: 5; }
.geiger__marca { stroke: var(--texto-2); stroke-width: 1.5; }
.geiger__numero { fill: var(--texto-2); font-size: 11px; font-family: ui-monospace, monospace; }
.geiger__aguja { stroke: var(--marcador, #ffd400); stroke-width: 3; stroke-linecap: round; }
.geiger__eje { fill: var(--texto); }

.geiger__lectura {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.3rem;
}
.geiger__cps { font-size: 2rem; font-weight: 700; margin: 0; }
/* Fuera de rango la cifra no significa nada: apagada y tachada, para que el
   ojo no se quede con ella. */
.geiger__cps[data-invalida="true"] {
  color: var(--texto-3);
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.geiger__unidad { margin: 0; font-size: 0.78rem; color: var(--texto-2); }

/*
  El estado de la lectura. Saturado y fuera de rango se marcan, porque una cifra
  baja por saturación NO es seguridad y el §7 lo dice con esas palabras.
*/
/* Alto reservado para el aviso más largo (saturado / fuera de rango, unas cuatro
   líneas): antes pasaba de 20 a 82 px al pulsar «Iniciar» y empujaba lo de debajo. */
.geiger__estado {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--texto-2);
  min-height: calc(4 * 1.45em);
  line-height: 1.45;
}
.geiger__estado[data-estado='saturado'],
.geiger__estado[data-estado='fueraDeRango'] {
  color: var(--texto);
  font-weight: 600;
  border-left: 3px solid var(--dec-beta-mas, #d97706);
  padding-left: 0.5rem;
}

.geiger__audio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.8rem 0 0.4rem;
  flex-wrap: wrap;
}
.geiger__audio label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.geiger__volumen { flex: 1 1 100px; min-width: 80px; }

/* --- La memoria del cuerpo (§5) ------------------------------------------- */

.tarjeta__titulo--segundo {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}

.cuerpo-memoria__vistas {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.cuerpo-memoria__lienzo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radio-1, 6px);
  background: #0a0e14;
}

.cuerpo-memoria__escala {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--texto-2);
  text-align: center;
}

/* Saturar el color no detiene el acumulador, y eso se avisa. */
.cuerpo-memoria__aviso {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto);
  border-left: 3px solid var(--dec-beta-mas, #d97706);
  padding-left: 0.5rem;
}

/* Los avisos que trajo la ficha real: la sensibilidad solo vale para cesio, y
   la beta que llega no se cuenta. */
.geiger__nota {
  margin: 0.45rem 0 0;
  font-size: 0.76rem;
  color: var(--texto-2);
  border-left: 2px solid var(--borde-fuerte, var(--borde));
  padding-left: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * EL CATÁLOGO DE ESCENARIOS
 *
 * Su trabajo visual es uno: que se vea de un golpe cuáles la página SIMULA y
 * cuáles solo puede CITAR. Es la distinción que el Módulo 4 aprendió por las
 * malas —sus quince fichas llevaban su insignia, pero la fila de atajos las
 * ofrecía todas iguales— y aquí está desde el primer vistazo.
 *
 * La marca va con TEXTO y con un borde a la izquierda, no con un color de
 * relleno: el color del sitio ya está repartido entre los tipos de radiación y
 * el §3 pide además no depender de él.
 * ------------------------------------------------------------------------- */
.escenarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem 1.4rem;
  align-items: start;
}

.escenarios__grupo {
  min-width: 0;
}

.escenarios__titulo {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.escenarios__lista {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.escenario-boton {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  text-align: left;
  font: inherit;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  cursor: pointer;
}

.escenario-boton:hover {
  border-color: var(--borde-fuerte, var(--acento));
}

.escenario-boton:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* Lo elegido va en el amarillo que significa «esto es lo seleccionado» en todo
   el sitio, con su contorno oscuro debajo. Es la misma decisión de la carta de
   núclidos y de la tabla periódica: el amarillo es el único matiz que se
   despega de las seis familias en las tres visiones y los dos temas. */
.escenario-boton--activo {
  border-color: var(--marcador);
  box-shadow: inset 0 0 0 1px var(--marcador);
  background: var(--acento-suave, var(--superficie-2));
}

.escenario-boton__nombre {
  font-size: 0.88rem;
  line-height: 1.25;
}

.escenario-boton__pie {
  font-size: 0.76rem;
  color: var(--texto-2);
}

/* LA MARCA DE LA FICHA. Pequeña, en mayúsculas y con su propio borde: tiene que
   leerse como una etiqueta del sistema, no como parte del nombre. */
.escenario-boton__marca {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-2);
  border-left: 3px solid var(--borde-fuerte, var(--borde));
  padding-left: 0.4rem;
}

/* Lo que se simula lleva el color de la interacción, el mismo ámbar de la
   escena. */
.escenario-boton__marca--simula {
  border-left-color: var(--dec-beta-mas, #d97706);
}

/* Y lo pendiente se apaga: sigue en el catálogo, se puede abrir y dice qué le
   falta, pero no compite con lo que sí funciona. */
.escenario-boton__marca--pendiente {
  border-left-style: dashed;
  opacity: 0.75;
}

.escenario-boton[data-estado-ficha='pendiente'] .escenario-boton__nombre {
  color: var(--texto-2);
}

.escenario-boton--libre {
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
}

@media (max-width: 560px) {
  .escenarios {
    grid-template-columns: 1fr;
  }
}

/* El Geiger apagado: el instrumento sigue ahí, atenuado, con el motivo al lado.
   Desaparecerlo daría un salto en la página y costaría entender que ese hueco
   es el mismo sitio donde antes había una lectura. */
.geiger[data-apagado='true'] .geiger__dial,
.geiger[data-apagado='true'] .geiger__lectura,
.geiger[data-apagado='true'] .geiger__audio {
  opacity: 0.25;
  filter: grayscale(1);
}

.geiger__nota--apagado {
  border-left-color: var(--marcador);
  color: var(--texto);
}

/* La cifra de un escenario citado y su comparador de radiografías. */
.cifras-dosis--citada {
  grid-template-columns: 1fr;
}

.cifras-dosis__comparador {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texto);
}

/* El catálogo plegado. Ver la nota larga en sim-escenarios.js: desplegado medía
   1.031 px y empujaba el primer control a 2.948, que es el fallo del Módulo 4
   repetido y peor. */
.escenarios-plegable {
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie-2);
}

.escenarios-plegable__resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  list-style: none;
}

.escenarios-plegable__resumen::-webkit-details-marker {
  display: none;
}

.escenarios-plegable__resumen::before {
  content: '▸';
  color: var(--texto-2);
}

.escenarios-plegable[open] > .escenarios-plegable__resumen::before {
  content: '▾';
}

.escenarios-plegable__resumen:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.escenarios-plegable__actual {
  font-weight: 600;
  color: var(--texto);
}

/* EL RESUMEN SE LEE COMO UN BOTÓN, y dice cuántas hay dentro. En la revisión
   como usuaria del 24 de septiembre el catálogo parecía una línea de texto:
   nada decía que detrás hubiera veintidós situaciones. Sigue plegado (ver
   `sim-escenarios.js`: desplegado empujaba los controles a 2.948 px). */
.escenarios-plegable__pie {
  margin-left: auto;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--acento);
  border-radius: var(--r-m);
  background: var(--acento-suave);
  color: var(--texto);
  font-size: 0.85rem;
  font-weight: 600;
}

.escenarios-plegable__resumen:hover .escenarios-plegable__pie {
  background: var(--superficie-hover);
}

.escenarios-plegable[open] > .escenarios {
  padding: 0 0.9rem 0.9rem;
  border-top: 1px solid var(--borde);
  padding-top: 0.9rem;
}

/* ===========================================================================
   EL TABLERO COMPACTO (18 de septiembre de 2026)

   Todo lo de abajo existe para UNA cosa: que la escena y los controles quepan
   en la misma pantalla. Medido antes de tocar nada, en 1366 × 768: el primer
   control estaba a 2.131 px y el botón de iniciar a 3.019. Ver el comentario
   del tablero en simulador.html.
   =========================================================================== */

/* --- El mando, pegado a la escena ---------------------------------------- */
.sim-mando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 0.6rem;
}

.sim-mando .barra-ejecucion {
  margin: 0;
  padding: 0;
  border: 0;
}

/* El estado de la ejecución (§3), junto a Iniciar. Símbolo + nombre + tiempo;
   se distingue por el símbolo y el texto, no por un color nuevo. */
.sim-mando__estado {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-m);
  font-size: 0.88rem;
}

.sim-mando__estado-nombre { font-weight: 600; }

.sim-mando__estado-tiempo { color: var(--texto-2); }

.sim-mando__estado[data-estado="ejecutando"] { border-color: var(--acento); }

.sim-mando__cifras {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

/* --- Sitio reservado mientras llega el JavaScript ------------------------
   Las piezas se montan vacías y luego crecen; sin esto la página saltaba al
   cargar (CLS 0,62 medido el 4 de octubre de 2026). Solo mientras están
   vacías: en cuanto el módulo las llena, mandan sus propios tamaños. */
#sim-escenarios:empty { min-height: 57px; }
/* El lienzo (1000 × 460) y, con el margen, los 133 px de botones y leyenda
   que lleva debajo. */
#sim-escena:empty { aspect-ratio: 1000 / 460; margin-bottom: 133px; }
#sim-mando:empty { min-height: 92px; }
#sim-cuerpo:empty,
#sim-geiger:empty { min-height: 420px; }
#sim-controles:empty { min-height: 18rem; }
#sim-resultados:empty { min-height: 34rem; }
#sim-contexto:empty { min-height: 20rem; }
@media (max-width: 600px) {
  #sim-escenarios:empty { min-height: 91px; }
  #sim-escena:empty { aspect-ratio: auto; min-height: 383px; margin-bottom: 0; }
  #sim-mando:empty { min-height: 173px; }
}

/* --- La columna lateral: cuerpo y detector LADO A LADO -------------------- */
.sim-tablero__lateral {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.sim-lateral__mitad {
  min-width: 0;
}

.sim-tablero__lateral .cuerpo-memoria__lienzo {
  max-width: 170px;
  margin-inline: auto;
}

.sim-tablero__lateral .cuerpo-memoria__vistas .chip-fuente {
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
}

.sim-tablero__lateral .geiger__cps {
  font-size: 1.6rem;
}

/* En media columna, la unidad debajo de la cifra y no en una tira de cuatro
   renglones a su lado. */
.sim-tablero__lateral .geiger__lectura {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.sim-tablero__lateral .saber-mas {
  font-size: 0.78rem;
}

.sim-tablero__lateral .geiger__audio {
  font-size: 0.82rem;
}

/* --- Los controles, en FRANJA -------------------------------------------- */
/* El §2 pide una «franja de control» —masa o actividad, distancia, duración—,
   y va de tres en tres: actividad · distancia · duración en la primera fila, y
   la masa DEBAJO de la actividad, porque es la misma cantidad leída en gramos.

   Es flex y no rejilla a propósito. Cada ficha esconde controles distintos
   (§20), y en una rejilla con sitios fijos lo que queda visible acababa en
   escalera —la duración en la tercera columna y sus opciones en la segunda
   fila—. Con flex, lo que queda se recoloca solo de izquierda a derecha, y el
   `order` es lo único que decide quién va antes. */
#sim-controles {
  --franja-hueco: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--franja-hueco);
  align-items: flex-start;
}

#sim-controles > * {
  flex: 0 0 calc((100% - 2 * var(--franja-hueco)) / 3);
  min-width: 0;
}

#sim-controles > .selector-fuente,
#sim-controles > .controles-propios,
#sim-controles > .bloque-blindaje,
#sim-controles > .barra-ejecucion {
  flex-basis: 100%;
}

#sim-controles > .selector-fuente { order: 0; }
/* Dónde se encuentra la fuente: justo debajo de las fuentes, a todo lo ancho. */
#sim-controles > .objeto-fuente { order: 0; flex-basis: 100%; }
.objeto-fuente {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: -0.4rem 0 1.1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie-2);
}
.objeto-fuente__lista { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-fuente--objeto { font-size: 0.85rem; padding: 0.3rem 0.7rem; }
.objeto-fuente__ficha { display: flex; flex-direction: column; gap: 0.35rem; }
.objeto-fuente__ficha p { margin: 0; }
.objeto-fuente__uso { color: var(--texto-2); line-height: 1.45; }
.objeto-fuente__peso { color: var(--texto); font-weight: 600; line-height: 1.45; }
#sim-controles > .sim-franja__actividad { order: 1; }
#sim-controles > .sim-franja__distancia { order: 2; }
#sim-controles > .sim-franja__duracion { order: 3; }
#sim-controles > .sim-franja__masa { order: 4; }
#sim-controles > .control-opciones { order: 5; }
#sim-controles > .sim-franja__veces { order: 6; }
/* «Aquí no hay nada que mover»: a todo lo ancho y alineada a la izquierda,
   no en la columna de un tercio de los deslizadores. */
#sim-controles > .sim-controles__nada {
  flex: 1 1 100%;
  max-width: 70ch;
  margin: 0;
  text-align: left;
}
#sim-controles > .controles-propios { order: 7; }
#sim-controles > .bloque-blindaje { order: 8; }

/* La velocidad, junto a Iniciar: es de pantalla, no de física. */
.sim-mando__velocidad {
  flex: 1 1 16rem;
  margin-top: 0;
}

.control-log__cabecera {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.control-log__cabecera .control-log__etiqueta {
  margin-bottom: 0;
}

/* El ⓘ: pequeño, pero un blanco de toque decente y con foco visible. */
.control-log__info {
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  min-height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto-2);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.control-log__info:hover,
.control-log__info[aria-expanded='true'] {
  color: var(--texto);
  background: var(--superficie-hover, var(--superficie-2));
}

.control-log__ayuda {
  max-width: none;
}

/* --- El blindaje, en su franja ------------------------------------------- */
/* Dos filas, como el boceto: arriba el interruptor y los materiales en fila;
   debajo espesor, posición y el botón de comparar, de tres en tres. */
.bloque-blindaje {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.75rem;
  align-items: end;
  margin: 1.1rem 0 0;
}

.bloque-blindaje > .bloque-blindaje__interruptor {
  grid-column: 1 / -1;
  margin-bottom: 0.5rem;
}

.bloque-blindaje > .selector-material {
  grid-column: 1 / -1;
  margin-bottom: 0.2rem;
}

.selector-material .chip-fuente:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.bloque-blindaje > .bloque-blindaje__procedencia,
.bloque-blindaje > .bloque-blindaje__comparar {
  grid-column: 1 / -1;
}

.bloque-blindaje > .bloque-blindaje__boton-comparar {
  justify-self: start;
  margin-bottom: 0.15rem;
}

.bloque-blindaje > .control-log {
  align-self: start;
}

.bloque-blindaje .selector-unidad--ancho {
  min-width: 0;
  width: 100%;
}

@media (max-width: 700px) {
  .bloque-blindaje {
    grid-template-columns: minmax(0, 1fr);
  }

  #sim-controles > * {
    flex-basis: 100%;
  }
}

@media (max-width: 420px) {
  .sim-tablero__lateral {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===========================================================================
   COMPARAR (§2, §8) — dos ejecuciones con la misma escala
   =========================================================================== */

/* --- Los tres modos de la cabecera --------------------------------------- */
.sim-modos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}

/* El modo en el que se está, con el mismo aspecto que un material elegido:
   un botón elegido significa lo mismo en toda la página. */
.sim-modos .chip-fuente[aria-pressed="true"] {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
  font-weight: 600;
}

.sim-mando__guardar[disabled] {
  opacity: 0.7;
  cursor: default;
}

/* --- La sección ---------------------------------------------------------- */
.sim-comparar__ayuda {
  margin: 0 0 0.8rem;
  color: var(--texto-2);
  max-width: 70ch;
}

.sim-comparar__columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.9rem;
}

.sim-comparar__columna {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "titulo titulo"
    "cifra silueta"
    "lista silueta"
    "nota nota"
    "abrir abrir";
  align-items: start;
  gap: 0.3rem 0.9rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie-2);
}

.sim-comparar__titulo {
  grid-area: titulo;
  margin: 0;
  font-size: 0.95rem;
}

.sim-comparar__cifra {
  grid-area: cifra;
  margin: 0;
  font-size: 1.6rem;
}

.sim-comparar__parametros {
  grid-area: lista;
  margin: 0;
  font-size: 0.85rem;
}

.sim-comparar__parametros > div {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
}

.sim-comparar__parametros dt { color: var(--texto-2); }
.sim-comparar__parametros dd { margin: 0; text-align: right; }

/* LO QUE CAMBIA: con fondo y en negrita, y además con su «≠» en el texto,
   para que no dependa de distinguir el color. */
.sim-comparar__cambia {
  background: var(--acento-suave);
  font-weight: 600;
}
.sim-comparar__cambia dt { color: var(--acento); }

.sim-comparar__columna > .nota-visor { grid-area: nota; margin: 0; }

.sim-comparar__silueta {
  grid-area: silueta;
  margin: 0;
  width: 84px;
  text-align: center;
}
.sim-comparar__silueta svg { width: 60px; height: 120px; display: block; margin-inline: auto; }
.sim-comparar__silueta figcaption {
  font-size: 0.7rem;
  color: var(--texto-3);
  line-height: 1.25;
}

.sim-comparar__abrir {
  grid-area: abrir;
  font-size: 0.85rem;
}

.sim-comparar__veredicto {
  margin: 1rem 0 0.3rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.sim-comparar__aviso {
  margin: 0 0 0.8rem;
  padding-left: 0.7rem;
  border-left: 3px solid var(--borde-fuerte);
  color: var(--texto-2);
  max-width: 75ch;
}

/* --- Las barras: lineales y con el MISMO tope ---------------------------- */
.sim-comparar__barras {
  display: grid;
  gap: 0.4rem;
  margin: 0.4rem 0 1rem;
}

.sim-comparar__barra {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
}

.sim-comparar__barra-letra { font-weight: 600; }

.sim-comparar__pista {
  position: relative;
  height: 14px;
  border-radius: 3px;
  background: var(--superficie-2);
  overflow: hidden;
}

.sim-comparar__lleno {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--acento);
}

/* B se distingue de A por la TRAMA, igual que en las curvas su trazo es
   discontinuo: el color del sitio ya está repartido. */
.sim-comparar__lleno--b {
  background: repeating-linear-gradient(
    135deg, var(--texto) 0 5px, var(--texto-2) 5px 8px);
}

/* El tramo de un intervalo: «puede ser», no «es». */
.sim-comparar__tramo {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 1px dashed var(--borde-fuerte);
  background: transparent;
}

.sim-comparar__barra-cifra { font-size: 0.85rem; white-space: nowrap; }

.sim-comparar__vaciar { margin-top: 0.6rem; }

/* --- Las casillas numéricas (§3, §4) --------------------------------------
   El valor de al lado del deslizador se puede escribir. Ancho fijo, como la
   lectura a la que sustituye, para que el deslizador no salte. */
.control-log__entrada {
  width: 8.5ch;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-s);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fuente-datos);
  font-size: 0.95rem;
  text-align: end;
}

.control-log__entrada:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}

.control-log__entrada:disabled { opacity: 0.6; }

/* No válido: se marca con borde Y con el aviso escrito debajo, no solo con color. */
.control-log__entrada[aria-invalid="true"] {
  border-color: var(--marcador);
  border-width: 2px;
}

.control-log__aviso {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--texto-2);
}

/* --- Qué emite esta fuente (§4, §8) ---------------------------------------- */
.emisiones-sim__cuerpo { display: grid; gap: 0.5rem; max-width: 80ch; }

.emisiones-sim__desintegraciones { margin: 0; }

.emisiones-sim__tipo {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
}

.emisiones-sim__tabla {
  border-collapse: collapse;
  font-size: 0.88rem;
  width: 100%;
}

.emisiones-sim__tabla th,
.emisiones-sim__tabla td {
  padding: 0.25rem 0.6rem 0.25rem 0;
  border-bottom: 1px solid var(--borde);
  text-align: left;
}

.emisiones-sim__tabla th {
  color: var(--texto-2);
  font-weight: 600;
}