/*
  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-1);
  background: var(--superficie-2);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-1, 4px);
}

/* --- 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);
}

/* --- 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-1);
  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);
}

.boton--principal {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  font-weight: 600;
}

/* --- 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-1);
}

/* 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-1); }

.geiger__lectura {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.3rem;
}
.geiger__cps { font-size: 2rem; font-weight: 700; margin: 0; }
.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.
*/
.geiger__estado {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--texto-2);
}
.geiger__estado[data-estado='saturado'],
.geiger__estado[data-estado='fueraDeRango'] {
  color: var(--texto-1);
  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-1);
  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-1);
  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-1);
}

/* 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-1);
}

/* 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-1);
}

.escenarios-plegable__pie {
  font-size: 0.8rem;
  color: var(--texto-2);
}

.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;
}

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

/* --- 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; }
#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; }
#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);
  }
}