/* ===========================================================================
   Módulo 10 — «Conviértete en un alquimista nuclear» (10 de octubre de 2026).

   Los componentes (botones, segmentado, fichas, avisos, números de paso, la
   lista de datos, los contadores) son los de sistema.css y componentes.css
   (TRASPASO §8.12). Aquí solo va la colocación y los tamaños propios, y los
   colores de las gráficas y de las partículas, que salen de los tokens.

   1.8 BETA (revisión de tres agentes y súper agente, 10 de octubre de 2026):
   el laboratorio sin huecos (el proyectil arriba, la irradiación dentro), la
   cabecera más baja, la barra de la misión en curso, la paleta de partículas
   del resto del sitio y los contrastes AA. Ver TRASPASO §6.21.
   ========================================================================= */

/* --- Los colores propios del módulo, por tema --------------------------------
   LAS PARTÍCULAS, las del resto del sitio (Detectores, Cámara y Simulador):
   alfa roja, fotón verde, beta y electrón azules, neutrón gris; el protón, el
   naranja de Átomos. Hasta la 1.7 beta aquí el verde era la alfa (con el color
   de la familia α de la carta, que TRASPASO §9 no deja mezclar con las
   partículas) y el fotón amarillo. En el tema claro, más oscuros para pasar de
   3:1 (texto grande y gráficos). Como en el Simulador y la Cámara, son tokens
   del módulo; unificarlos en tokens.css es una propuesta para los autores.
   EL HAZ: la línea del haz y del «ahora» de las gráficas. El amarillo de
   «lo cargado» daba 1,4:1 sobre blanco.
   LAS SERIES de las gráficas: una paleta categórica propia (azul, naranja,
   púrpura rojizo, verde azulado, de la familia Okabe–Ito); antes se usaban
   --acento y --electron, que son el mismo azul. */
.contenedor--transmutacion {
  --trans-alfa: #c62828; --trans-foton: #1b7f45; --trans-beta: #1f6cc4; --trans-neutron: #6e6c66; --trans-proton: #c2410c;
  --trans-haz: #8a6d00;
  --trans-serie-1: var(--acento); --trans-serie-2: #b45309; --trans-serie-3: #9d3f7a; --trans-serie-4: #0f7a5c;
  --trans-lienzo: #04070e;
}
:root[data-tema="oscuro"] .contenedor--transmutacion,
:root[data-tema-defecto="oscuro"]:not([data-tema="claro"]) .contenedor--transmutacion {
  --trans-alfa: #ff4b4b; --trans-foton: #3ddc7a; --trans-beta: #4a9dff; --trans-neutron: #c9ccd1; --trans-proton: #ff8f4f;
  --trans-haz: #ffd400;
  --trans-serie-1: #6aa5f0; --trans-serie-2: #e69f00; --trans-serie-3: #cc79a7; --trans-serie-4: #2fbf95;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .contenedor--transmutacion {
    --trans-alfa: #ff4b4b; --trans-foton: #3ddc7a; --trans-beta: #4a9dff; --trans-neutron: #c9ccd1; --trans-proton: #ff8f4f;
    --trans-haz: #ffd400;
    --trans-serie-1: #6aa5f0; --trans-serie-2: #e69f00; --trans-serie-3: #cc79a7; --trans-serie-4: #2fbf95;
  }
}

.contenedor--transmutacion { max-width: 1520px; }
.contenedor--transmutacion dd { margin: 0; } /* los <dd> heredaban 40 px de sangría del navegador (diseño A7) */

/* --- Cabecera (1.8 beta: más baja, para ver juntos la escena y el botón 3) --- */
.trans-lema {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0 0 0.2rem; font-size: var(--fs-pequeno); font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--texto-2);
}
.trans-entrada { max-width: 66ch; color: var(--texto-2); margin: 0.3rem 0 0.2rem; }
/* El aviso Beta, en la misma línea que el antetítulo y su píldora (antes un recuadro de 66 px). */
.trans-beta { font-size: var(--fs-nota); color: var(--texto-3); font-weight: 400; letter-spacing: normal; text-transform: none; }
/* La píldora Beta, en la línea del antetítulo y sin estirarse (en un .aviso flexible se volvía una mancha). */
.trans-beta__etiqueta {
  display: inline-block; flex: none; align-self: center; padding: 0 0.5rem; border-radius: 999px; line-height: 1.6;
  background: var(--marcador); color: var(--marcador-halo); font-size: var(--fs-min); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}

/* --- Modos y atajos de un clic, en una fila --- */
.trans-barra { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; margin: 0.1rem 0 0.7rem; }
.trans-cabeza { margin-bottom: 0.4rem; }
.trans-atajos { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
.trans-atajos__rotulo { font-size: var(--fs-pequeno); color: var(--texto-3); margin-right: 0.1rem; }
.trans-atajo { display: inline-flex; flex-direction: column; align-items: flex-start; border-radius: var(--r-m); padding: 0.3rem 0.7rem; text-align: left; line-height: 1.25; }
.trans-atajo__titulo { font-weight: 600; color: var(--texto); }
.trans-atajo__sub { font-size: var(--fs-min); color: var(--texto-3); }
.trans-atajo[aria-pressed="true"] .trans-atajo__titulo { color: var(--acento-texto); }
/* En Misiones, los atajos competían con la misión (diseño A4). */
body[data-modo="misiones"] .contenedor--transmutacion .trans-atajos { display: none; }

/* --- El laboratorio: blanco → acelerador → resultado; debajo, la irradiación --- */
.trans-lab { display: grid; gap: 1rem; align-items: start; margin-bottom: 1rem; }
@media (min-width: 1200px) {
  .trans-lab { grid-template-columns: minmax(260px, 290px) minmax(0, 1fr) minmax(300px, 350px); }
  .trans-irradiacion { grid-column: 1 / -1; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .trans-lab { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); grid-template-areas: "blanco maquina" "resultado irradiacion"; }
  .trans-blanco { grid-area: blanco; } .trans-maquina { grid-area: maquina; } .trans-resultado { grid-area: resultado; } .trans-irradiacion { grid-area: irradiacion; }
}
.trans-lab .tarjeta__titulo { display: flex; align-items: center; gap: 0.5rem; }
.trans-sub { font-size: 0.95rem; margin: 1rem 0 0.5rem; }
.trans-sub2 { font-size: var(--fs-nota); color: var(--texto-3); margin: 0.8rem 0 0.35rem; }

/* El blanco */
.trans-blanco { container-type: inline-size; }
.trans-nuclido { margin-bottom: 0.8rem; padding-bottom: 0.8rem; }
/* Uno debajo del otro en la columna de 300 px (dos en fila no dejan sitio a
   «− 118 +»); dos columnas cuando la tarjeta es ancha (tableta, móvil grande). */
.trans-contadores { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
@container (min-width: 380px) { .trans-contadores { grid-template-columns: 1fr 1fr; } }
.trans-contadores .contador + .contador { margin-top: 0; }
.trans-contadores .contador__valor { font-size: 1.2rem; padding: 0.25rem; }
.trans-buscador { margin-top: 0.9rem; }
.trans-recomendados { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.trans-recomendados .trans-chip-nuc { min-width: 2.6rem; min-height: 2.2rem; padding: 0.15rem 0.45rem; font-size: 0.85rem; }
/* Los 12 primeros a la vista y «Ver los 27» (el que está puesto, siempre). */
.trans-recomendados:not(.trans-recomendados--todos) .trans-chip-nuc--extra:not([aria-pressed="true"]) { display: none; }
.trans-rec-todos { min-height: 2.2rem; padding: 0.15rem 0.6rem; font-size: var(--fs-nota); color: var(--acento-texto); }
.trans-chip-nuc { min-width: 3rem; min-height: 2.4rem; font-family: var(--fuente-datos); }
.trans-blanco-datos { margin-top: 0.6rem; }
.trans-blanco-nota .datos__valor { font-weight: 400; color: var(--texto-2); font-size: var(--fs-nota); }
.trans-blanco-opciones { display: grid; gap: 0.5rem; margin-top: 0.7rem; }
.trans-nota { text-align: left; max-width: none; margin-top: 0.7rem; }
.contenedor--transmutacion .nota-visor { text-align: left; max-width: none; }

/* Los núclidos escritos: el número másico arriba, nunca por debajo de 12 px (diseño M13). */
.nuc { white-space: nowrap; font-weight: 600; }
.nuc sup { font-size: max(0.75em, var(--fs-min)); margin-right: 0.05em; }
.part { font-weight: 700; }
.part--p { color: var(--trans-proton); }
.part--n { color: var(--trans-neutron); }
.part--a { color: var(--trans-alfa); }
.part--d { color: var(--trans-proton); }
.part--g { color: var(--trans-foton); }
.part--e { color: var(--trans-beta); }

/* El proyectil */
.trans-proyectiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.trans-proyectil {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-height: 3.2rem; padding: 0.35rem;
  border: 1px solid var(--borde); border-radius: var(--r-m); background: var(--superficie-2); color: var(--texto-2);
  font: inherit; cursor: pointer;
}
.trans-proyectil:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.trans-proyectil:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.trans-proyectil[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-texto); }
.trans-proyectil__simbolo { font-size: 1.25rem; line-height: 1; }
.trans-proyectil__nombre { font-size: var(--fs-min); }
.trans-proyectil__desc { font-size: var(--fs-nota); color: var(--texto-2); margin: 0.6rem 0 0; line-height: 1.45; }

/* El acelerador */
.trans-maquina__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.trans-maquina__cabeza .tarjeta__titulo { margin-bottom: 0.5rem; }
.trans-elige select, .trans-campo select {
  font: inherit; font-size: var(--fs-pequeno); padding: 0.3rem 0.5rem; border-radius: var(--r-m); min-height: 2.25rem;
  border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto); max-width: 100%;
}
/* La cámara del ciclotrón es oscura en los dos temas (como el visor de un
   instrumento): los brillos del haz y del plasma solo se leen sobre oscuro. */
.trans-escena { position: relative; border-radius: var(--r-m); background: var(--trans-lienzo); border: 1px solid #1f2a3a; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); }
.trans-escena canvas { display: block; width: 100%; height: 360px; }
.trans-mandos { margin-top: 0.6rem; display: grid; gap: 0.55rem; }
.trans-deslizador { display: grid; gap: 0.2rem; }
.trans-deslizador__fila { display: flex; justify-content: space-between; gap: 0.5rem; font-size: var(--fs-pequeno); }
.trans-deslizador__fila output { font-weight: 700; color: var(--texto); }
.trans-deslizador input[type="range"] { width: 100%; accent-color: var(--acento); min-height: 1.6rem; }
.trans-deslizador__nota { font-size: var(--fs-min); color: var(--texto-3); line-height: 1.45; }
.trans-etapas { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* Los tres en una fila en la tarjeta de la máquina de un portátil (antes el 3 bajaba a una segunda fila). */
.trans-etapa { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding-inline: 0.6rem; font-size: var(--fs-pequeno); }
.trans-etapa--hecha .paso__num { background: var(--estado-exito); color: var(--marcador-halo); }
/* Irradiado (1.6 beta): el 3 (o «Meter la muestra») queda en verde, sin pulsar, porque todo se recalcula solo. */
.trans-etapa--hecha.trans-etapa--fin:disabled { opacity: 1; cursor: default; color: var(--texto); border-color: var(--estado-exito); background: color-mix(in srgb, var(--estado-exito) 12%, var(--superficie)); }
/* «↺ Reiniciar», en la fila de los pasos, al lado del 3 (2.3 beta), con su mismo alto. */
.trans-reiniciar { min-height: 2.75rem; padding-inline: 0.6rem; font-size: var(--fs-pequeno); }
.trans-etapas-pie { display: flex; flex-wrap: wrap; gap: 0.3rem; }
/* «Saltar» y «Detener», solo cuando sirven; sin mover nada (diseño M10). */
.trans-oculto { visibility: hidden; }
.trans-estado { margin: 0; font-size: var(--fs-pequeno); color: var(--texto-2); min-height: 1.6em; }
.trans-lecturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); column-gap: 1rem; }
.trans-lecturas .datos__fila { padding: 0.3rem 0; }
.trans-lecturas .datos__clave, .trans-lecturas .datos__valor { font-size: var(--fs-nota); }
.trans-manual { border-top: 1px dashed var(--borde); padding-top: 0.6rem; display: grid; gap: 0.5rem; }
/* Los mandos a mano, en una rejilla de dos (diseño A3). */
.trans-manual__mandos { display: grid; gap: 0.5rem 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.trans-manual__mandos > .trans-zona, .trans-manual__mandos > .nota-visor, .trans-manual__mandos > .trans-casilla { grid-column: 1 / -1; }
.trans-manual__mandos > .boton { justify-self: start; }
.trans-casilla { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-pequeno); min-height: 2rem; }
.trans-campo { display: grid; gap: 0.2rem; font-size: var(--fs-pequeno); color: var(--texto-2); }
.trans-escala { font-style: italic; }
/* Corriente y tiempo junto a la energía (y masa, tiempo y pureza en el reactor). */
.trans-irr-mandos { display: grid; gap: 0.5rem 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: start; }
.trans-irr-mandos .trans-deslizador__fila, .trans-irr-mandos .trans-campo > span { min-height: 1.4em; }
.trans-campo--ancho { grid-column: 1 / -1; }

/* El indicador del desajuste de la radiofrecuencia, con su zona ideal (preferencia de los autores). */
.trans-zona { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; gap: 0.3rem 0.6rem; align-items: center; font-size: var(--fs-nota); }
.trans-zona__rotulo { color: var(--texto-2); }
.trans-zona__barra {
  position: relative; height: 0.75rem; border-radius: 999px; border: 1px solid var(--borde-fuerte);
  /* ±0,5 %: rojo · ámbar desde ±0,1 % · verde en ±0,03 % (las zonas de ZONA_RF). */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--estado-peligro) 45%, transparent) 0 40%,
    color-mix(in srgb, var(--estado-atencion) 55%, transparent) 40% 47%,
    color-mix(in srgb, var(--estado-exito) 70%, transparent) 47% 53%,
    color-mix(in srgb, var(--estado-atencion) 55%, transparent) 53% 60%,
    color-mix(in srgb, var(--estado-peligro) 45%, transparent) 60% 100%);
}
.trans-zona__marca { position: absolute; top: -0.25rem; bottom: -0.25rem; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--texto); left: 50%; }
.trans-zona__estado { font-family: var(--fuente-datos); font-weight: 700; color: var(--texto); }
.trans-zona[data-zona="ideal"] .trans-zona__estado { color: var(--texto); }
@media (max-width: 480px) { .trans-zona { grid-template-columns: 1fr; } }

/* Lo que sale */
.trans-nivel { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; font-size: var(--fs-pequeno); font-weight: 600; }
/* La letra A/B/C con tinte y borde, como las insignias de Átomos: el texto en
   --texto (más de 7:1 en los dos temas). Blanco sobre el verde o el ámbar daba
   2,4:1 y 2:1 en oscuro (diseño A5). */
.trans-nivel__letra {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 6px;
  font-weight: 800; color: var(--texto); border: 2px solid var(--texto-3); background: var(--superficie-2);
}
.trans-nivel--A .trans-nivel__letra { border-color: var(--estado-exito); background: color-mix(in srgb, var(--estado-exito) 20%, var(--superficie)); }
.trans-nivel--B .trans-nivel__letra { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 20%, var(--superficie)); }
.trans-nivel--C .trans-nivel__letra { border-color: var(--estado-atencion); border-style: dashed; background: color-mix(in srgb, var(--estado-atencion) 14%, var(--superficie)); }
.trans-ecuacion { font-size: 1.45rem; margin: 0.2rem 0 0.3rem; line-height: 1.3; }
.trans-flecha { color: var(--texto-3); margin: 0 0.15rem; }
.trans-balance { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin: 0 0 0.6rem; font-size: var(--fs-nota); font-family: var(--fuente-datos); color: var(--texto-2); }
.trans-balance__ok { color: var(--estado-exito); font-weight: 800; }
.trans-balance__mal { color: var(--estado-peligro); font-weight: 800; }
.trans-cifras { margin-bottom: 0.5rem; }
.trans-pista { color: var(--texto-3); font-size: var(--fs-nota); font-weight: 400; font-family: var(--fuente); }
.trans-producto { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--borde); }
.trans-producto__titulo { font-size: 0.95rem; margin: 0 0 0.4rem; }
.trans-producto__titulo .nuc { font-size: 1.25rem; }
.trans-producto__nombre { font-weight: 400; color: var(--texto-2); font-size: var(--fs-pequeno); }
.trans-uso { font-size: var(--fs-pequeno); color: var(--texto-2); line-height: 1.5; margin: 0.6rem 0 0; }
.trans-comercial { margin: 0.5rem 0 0; }
.trans-competidores { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; }
.trans-competidores .boton { padding: 0.2rem 0.4rem; font-size: var(--fs-pequeno); }
.trans-cita { font-size: var(--fs-min); color: var(--texto-3); margin: 0.6rem 0 0; }
.trans-cadena { font-size: 1.15rem; margin: 0 0 0.4rem; }
/* La cantidad aproximada, debajo del producto (2.8 beta). */
.trans-cantidad { font-size: var(--fs-pequeno); line-height: 1.45; margin: 0 0 0.5rem; }
.trans-cantidad strong { font-variant-numeric: tabular-nums; }
.trans-resultado .aviso { margin: 0.5rem 0 0; font-size: var(--fs-pequeno); }
/* «¿Qué quiere decir cada cosa?» (el estudiante de la revisión). */
.trans-glosario { margin-top: 0.8rem; border-top: 1px solid var(--borde); padding-top: 0.5rem; }
.trans-glosario summary { cursor: pointer; font-weight: 600; font-size: var(--fs-pequeno); padding: 0.4rem 0; }
.trans-glosario ul { margin: 0.3rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: var(--fs-nota); color: var(--texto-2); line-height: 1.5; }
.trans-glosario strong { color: var(--texto); }

/* Etiquetas que no son botones (rango, «producción de rutina», la colección; diseño B1). */
.trans-etiqueta {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem; border-radius: var(--r-s);
  background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto); font-size: var(--fs-pequeno); line-height: 1.5;
}
.trans-etiqueta--rango { font-weight: 700; background: var(--acento-suave); border-color: var(--acento); color: var(--acento-texto); }
.trans-etiqueta__nivel { font-weight: 800; font-size: var(--fs-min); color: var(--texto-2); }

/* --- La irradiación: la cifra protagonista, las demás y la curva --- */
.trans-irradiacion { container-type: inline-size; }
.trans-irr-cuerpo { display: grid; gap: 0.8rem 1.5rem; }
@container (min-width: 760px) { .trans-irr-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; } }
.trans-cifra { display: grid; gap: 0.1rem; margin: 0 0 0.5rem; padding: 0.6rem 0.8rem; border-radius: var(--r-m); border: 1px solid var(--borde); background: var(--superficie-2); }
.trans-cifra[hidden] { display: none; }
.trans-cifra__rotulo { font-size: var(--fs-min); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-2); }
.trans-cifra__rotulo .nuc { text-transform: none; }
.trans-cifra__valor { font-family: var(--fuente-datos); font-size: 1.75rem; font-weight: 700; color: var(--texto); line-height: 1.2; }
.trans-cifra__nota { font-size: var(--fs-nota); color: var(--texto-3); line-height: 1.45; }
.trans-irr-datos { margin: 0 0 0.6rem; }
.datos__nota { display: block; font-size: var(--fs-min); color: var(--texto-3); font-weight: 400; font-family: var(--fuente); margin-top: 0.15rem; }
body:not([data-modo="avanzado"]) .contenedor--transmutacion .trans-irr-datos .solo-avanzado { display: none; }

/* --- Lupa, σ(E) y carta, en una fila de tres en las pantallas anchas --- */
.trans-fila { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 900px) { .trans-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .trans-fila--tres .trans-carta-caja { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .trans-fila--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trans-fila--tres .trans-carta-caja { grid-column: auto; } }

/* La lupa: oscura en los dos temas, como la escena (diseño M7: el fotón amarillo no se veía en claro). */
.trans-lupa { border-radius: var(--r-m); background: var(--trans-lienzo); border: 1px solid #1f2a3a; }
.trans-lupa__lienzo { display: block; width: 100%; height: 220px; }
.trans-lupa__fase { margin: 0; padding: 0.4rem 0.7rem 0.6rem; font-size: var(--fs-nota); color: #c3ccda; min-height: 3.2em; line-height: 1.45; }
.trans-lupa__mandos { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.6rem 0; }
.trans-lupa__pasos { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.trans-lupa__pasos[hidden] { display: none; }
.trans-lupa__contador { font-size: var(--fs-pequeno); color: var(--texto-2); font-family: var(--fuente-datos); padding: 0 0.3rem; }
.trans-lupa__texto { font-size: var(--fs-pequeno); color: var(--texto-2); margin: 0 0 0.4rem; line-height: 1.5; }

/* Las gráficas */
.trans-grafica { width: 100%; }
.trans-grafica svg { display: block; overflow: visible; }
.trans-grafica__vacia { min-height: 120px; display: grid; place-items: center; color: var(--texto-3); font-size: var(--fs-pequeno); border: 1px dashed var(--borde); border-radius: var(--r-m); padding: 1rem; text-align: center; }
.g-rejilla { stroke: var(--borde); stroke-width: 1; }
.g-rejilla--menor { stroke: var(--borde); stroke-width: 0.5; opacity: 0.6; }
.g-num { fill: var(--texto-3); font-size: 12px; font-family: var(--fuente-datos); }
.g-eje { fill: var(--texto-2); font-size: 12px; }
.g-rotulo { fill: var(--texto-2); font-size: 12px; }
.g-rotulo--fuerte { fill: var(--texto); font-weight: 700; }
.g-linea { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.g-linea--principal { stroke-width: 2.4; }
.g-linea--tramo { stroke-width: 4; }
.g-banda { opacity: 0.18; stroke: none; }
/* La franja que recorre el haz, tenue y con sus bordes (antes teñía el 77 % de la gráfica). */
.g-franja { fill: var(--trans-haz); opacity: 0.07; }
.g-franja-borde { stroke: var(--trans-haz); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.8; }
.g-haz { stroke: var(--trans-haz); stroke-width: 2; }
.g-umbral { stroke: var(--texto-3); stroke-dasharray: 4 3; }
.g-sin-datos { fill: url(#trans-trama-sin-datos); }
.g-trama { stroke: var(--texto-3); stroke-opacity: 0.45; stroke-width: 1; }
.g-saturacion { stroke: var(--texto-3); stroke-dasharray: 6 4; }
.g-punto { fill: var(--trans-haz); stroke: var(--texto); stroke-width: 1.5; }
.trans-leyenda { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0.4rem 0; font-size: var(--fs-nota); color: var(--texto-2); }
.trans-leyenda__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.trans-leyenda__color { width: 14px; height: 4px; border-radius: 2px; flex: none; }
.trans-leyenda__casilla { width: 14px; height: 14px; border-radius: 3px; flex: none; border: 1.5px solid var(--borde-fuerte); }

/* La carta */
.trans-carta svg { display: block; margin: 0 auto; }
.carta-celda rect { fill: var(--superficie-2); stroke: var(--borde); }
.carta-celda { cursor: pointer; }
.carta-celda:hover rect, .carta-celda:focus-visible rect { stroke: var(--foco); stroke-width: 2; }
/* Las estables con borde fino: que solo el blanco (amarillo) y el producto (verde) tengan contorno fuerte (diseño M6). */
.carta-celda--estable rect { fill: var(--dec-estable-suave); stroke: var(--dec-estable); stroke-width: 0.75; stroke-opacity: 0.7; }
.carta-celda--betamenos rect { fill: var(--dec-beta-menos-suave); }
.carta-celda--betamas rect { fill: var(--dec-beta-mas-suave); }
.carta-celda--alfa rect { fill: var(--dec-alfa-suave); }
/* El blanco con el amarillo de «lo cargado en el instrumento» (sistema.css):
   el único color que se despega de todas las familias en los dos temas. */
.carta-celda--blanco rect { stroke: var(--marcador); stroke-width: 3.5; }
.carta-celda__sim { font-size: 12px; font-weight: 700; fill: var(--texto); pointer-events: none; }
.carta-celda__a { font-size: 12px; fill: var(--texto-2); font-family: var(--fuente-datos); pointer-events: none; }
.carta-flecha { stroke: var(--texto-3); stroke-width: 1.4; stroke-dasharray: 4 3; paint-order: stroke; }
.carta-flecha--evaluada { stroke: var(--estado-exito); stroke-width: 2.2; stroke-dasharray: none; }
.carta-flecha-halo { stroke: var(--superficie); stroke-width: 5; stroke-linecap: round; }
.carta-punta--e { fill: var(--estado-exito); }
.carta-punta--x { fill: var(--texto-3); }
.carta-producto { fill: none; stroke: var(--estado-exito); stroke-width: 3; pointer-events: none; }
.leyenda-estable { background: var(--dec-estable-suave); border-color: var(--dec-estable) !important; }
.leyenda-betamenos { background: var(--dec-beta-menos-suave); border-color: var(--dec-beta-menos) !important; }
.leyenda-betamas { background: var(--dec-beta-mas-suave); border-color: var(--dec-beta-mas) !important; }
.leyenda-alfa { background: var(--dec-alfa-suave); border-color: var(--dec-alfa) !important; }
.leyenda-blanco { background: var(--superficie-2); border: 3px solid var(--marcador) !important; }
.leyenda-producto { background: var(--superficie-2); border: 3px solid var(--estado-exito) !important; }
.trans-canales { margin-top: 0.8rem; }
.trans-canales summary { cursor: pointer; font-weight: 600; font-size: var(--fs-pequeno); padding: 0.6rem 0; }
.trans-tabla-caja { overflow-x: auto; margin-top: 0.5rem; }
.trans-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-nota); }
.trans-tabla th, .trans-tabla td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--borde); text-align: left; }
.trans-tabla th { color: var(--texto-3); font-weight: 600; }
.trans-tabla td.numero { text-align: right; font-family: var(--fuente-datos); }
.trans-nivel-fila--sinNuclido td { color: var(--texto-3); }
.trans-tabla .boton { padding: 0.15rem 0.4rem; font-size: var(--fs-nota); }

/* La colección */
.trans-rango { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.6rem; }
.trans-coleccion__lista { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.6rem; }
.trans-coleccion__lista .trans-chip-nuc { min-height: 0; min-width: 0; font-family: var(--fuente-datos); }
/* La ficha del oro: el premio, con texto legible en los dos temas (antes #1a1400 sobre ámbar oscuro, 1,4:1). */
.trans-chip-oro { border-color: var(--marcador); border-width: 2px; background: var(--marcador-suave); color: var(--texto); }
.trans-chip-hipotetico { border-style: dashed; }

/* La historia (dos columnas en pantallas anchas: el texto dejaba vacío el 43 % de la derecha) */
.trans-hitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem 2rem; }
@media (min-width: 1100px) { .trans-hitos { grid-template-columns: 1fr 1fr; } }
.trans-hito { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.trans-hito__anio { font-size: 1.3rem; font-weight: 800; color: var(--estado-atencion); }
.trans-hito__texto h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.trans-hito__texto p { margin: 0 0 0.4rem; color: var(--texto-2); line-height: 1.5; max-width: 80ch; font-size: var(--fs-pequeno); }
.trans-lista { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; color: var(--texto-2); line-height: 1.5; }

/* --- Las misiones --- */
.trans-misiones { margin-bottom: 1rem; }
.trans-mis-todas > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-pequeno); padding: 0.5rem 0; }
.trans-mis-todas > summary .trans-etiqueta { margin-left: 0.4rem; }
.trans-mis-lista { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0.5rem; }
.trans-mis-chip { font-size: var(--fs-nota); }
.trans-mis-chip__num { font-weight: 700; color: var(--texto-3); }
.trans-mis-chip--hecha { border-color: var(--estado-exito); }
.trans-mis-progreso { font-size: var(--fs-pequeno); color: var(--texto-2); margin: 0 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
/* Un solo Tomi grande, el de la cabecera: el de la misión, con la cara de 56 px junto al título (diseño A4). */
.trans-mision { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0.9rem; align-items: start; border: 1px solid var(--borde); border-radius: var(--r-l); padding: 1rem; background: var(--superficie-2); }
.trans-mision__tomi img { width: 56px; height: 56px; object-fit: contain; }
.trans-mision__nivel { margin: 0; font-size: var(--fs-min); font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.05em; }
.trans-mision h3 { font-size: 1.15rem; margin: 0.1rem 0 0.4rem; }
.trans-mision__historia { color: var(--texto-2); line-height: 1.55; margin: 0 0 0.6rem; max-width: 75ch; }
.trans-mis-pasos { margin: 0 0 0.7rem; padding-left: 1.2rem; display: grid; gap: 0.2rem; font-size: var(--fs-pequeno); color: var(--texto-3); }
.trans-mis-paso--hecho { color: var(--texto-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--estado-exito) 70%, transparent); }
.trans-mis-paso--actual { color: var(--texto); font-weight: 600; }
.trans-mis-paso--actual::marker { color: var(--acento-texto); }
.trans-mis-tarea { margin: 0 0 0.4rem; font-size: var(--fs-min); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-3); }
.trans-mis-lab { margin: 0 0 0.5rem; font-size: var(--fs-pequeno); color: var(--estado-atencion); font-weight: 600; }
.trans-mis-opciones { display: grid; gap: 0.35rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 0.6rem; }
.trans-mis-opcion { text-align: left; justify-content: flex-start; min-height: 2.75rem; }
.trans-mis-opcion--bien { border-color: var(--estado-exito); box-shadow: inset 0 0 0 1px var(--estado-exito); }
.trans-mis-opcion--mal { border-color: var(--estado-peligro); box-shadow: inset 0 0 0 1px var(--estado-peligro); }
.trans-mis-numero { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.3rem; }
.trans-mis-formato { margin: 0 0 0.6rem; font-size: var(--fs-nota); color: var(--texto-3); }
.trans-mis-campo { font: inherit; font-family: var(--fuente-datos); width: 9rem; padding: 0.45rem 0.6rem; border-radius: var(--r-m); border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); min-height: 2.75rem; }
.trans-mis-orden { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; }
.trans-mis-item { border-radius: var(--r-m); }
.trans-mis-botones { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.trans-mis-pista { margin-top: 0.3rem; }
.trans-mision .aviso { margin: 0.5rem 0; }
.trans-mis-final p { margin: 0 0 0.4rem; }
@media (max-width: 640px) {
  .trans-mision { grid-template-columns: 1fr; }
  .trans-mision__tomi { display: none; }
}
/* La barra de la misión en curso, pegada arriba mientras se trabaja abajo (diseño A4). */
.trans-mision-barra {
  position: sticky; top: var(--trans-alto-cabecera, 64px); z-index: 15; margin: 0 0 0.8rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; padding: 0.5rem 0.8rem;
  border: 1px solid var(--acento); border-radius: var(--r-m); background: var(--superficie); box-shadow: var(--sombra);
  font-size: var(--fs-pequeno);
}
.trans-mision-barra[hidden] { display: none; }
.trans-mision-barra__titulo { font-weight: 700; color: var(--texto); }
.trans-mision-barra__paso { color: var(--texto-2); flex: 1 1 18rem; }
.trans-mision-barra__hecho { color: var(--texto); font-weight: 700; border-left: 3px solid var(--estado-exito); padding-left: 0.4rem; }
.trans-mision-barra .boton { min-height: 2.25rem; padding: 0.2rem 0.6rem; }

/* --- Lo que depende del modo y de la fuente --- */
body:not([data-modo="avanzado"]) .contenedor--transmutacion .solo-avanzado { display: none !important; }
body[data-fuente="reactor"] .contenedor--transmutacion .solo-ciclotron { display: none !important; }
body:not([data-fuente="reactor"]) .contenedor--transmutacion .solo-reactor { display: none !important; }

/* --- Estabilidad visual: lo que monta el JavaScript, con su alto reservado (1.8 beta: medidos de nuevo) --- */
#trans-blanco:empty { min-height: 260px; }
#trans-blanco-mas:empty { min-height: 380px; }
#trans-proyectil:empty { min-height: 180px; }
#trans-mandos:empty { min-height: 420px; }
#trans-resultado:empty { min-height: 560px; }
#trans-lupa:empty { min-height: 330px; }
#trans-sigma:empty { min-height: 300px; }
#trans-irradiacion:empty { min-height: 360px; }
#trans-carta:empty { min-height: 300px; }
#trans-atajos:empty { min-height: 3.2rem; }

@media (max-width: 640px) {
  .trans-ecuacion { font-size: 1.2rem; }
  .trans-escena canvas { height: 300px; }
  .trans-hito { grid-template-columns: 1fr; gap: 0.2rem; }
  /* Objetivos táctiles más grandes en el móvil (diseño B6). */
  .contenedor--transmutacion .trans-deslizador input[type="range"] { min-height: 2.75rem; }
  .trans-cifra__valor { font-size: 1.5rem; }
}