/* ===========================================================================
   Componentes reutilizables.
   ========================================================================= */

/* --- Tarjeta --- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: 1.25rem;
}

.tarjeta__titulo {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-3);
  margin-bottom: 0.9rem;
}

/* --- Portada --- */
/* La portada: el texto a la izquierda y Tomi, pequeño y discreto, saludando
   a su lado a la altura del título. También en el móvil se queda al lado,
   más pequeño, para no empujar el texto hacia abajo. */
.portada {
  display: grid;
  grid-template-columns: minmax(0, 62ch) auto;
  grid-template-areas: "titulo mascota" "entrada mascota";
  column-gap: 1rem;
  align-items: start;
}
/* El envoltorio no cuenta en la rejilla: así el título y la entrada se
   colocan por separado, y en el móvil Tomi solo acompaña al título. */
.portada__texto { display: contents; }
.portada h1 { grid-area: titulo; }
.portada__entrada { grid-area: entrada; }
/* Del alto del título más la entrada, y centrado con ellos: así acompaña al
   bloque entero en vez de colgar de la primera línea. */
.portada__mascota {
  grid-area: mascota;
  align-self: center;
  margin: 0;
  width: clamp(150px, 19vw, 220px);
}
@media (max-width: 720px) {
  .portada {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titulo mascota" "entrada entrada";
  }
  .portada__mascota { align-self: start; width: 96px; }
}
.portada__mascota img { display: block; width: 100%; height: auto; }
.portada__entrada { font-size: 1.15rem; color: var(--texto-2); }

/* --- Acerca de (2 de octubre de 2026) --- */
/* El ancho de lectura va en cada bloque y no en el contenedor: así el texto
   arranca alineado con la cabecera, como en el resto de páginas. */
.acerca > * { max-width: 78ch; }
.acerca p { line-height: 1.65; }
.acerca__entrada { font-size: 1.15rem; color: var(--texto-2); }
/* Los dos párrafos sobre el uso del laboratorio, en un recuadro: es lo que
   más importa no pasar por alto. */
.acerca__seccion--aviso {
  margin-block: 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--borde);
  border-inline-start: 4px solid var(--marcador);
  border-radius: var(--r-l);
  background: var(--superficie);
  font-size: 0.95rem;
  color: var(--texto-2);
}
.acerca__seccion--aviso p:last-child { margin-bottom: 0; }
/* La frase con la que cierran los autores. */
.acerca__cierre { font-size: 1.1rem; font-weight: 600; }
/* Los autores, al final y centrados con el texto. */
.acerca__autores { margin: 2rem 0 0; text-align: center; }
/* Más pequeña desde el 5 de octubre de 2026, a petición de los autores: más modesta. */
.acerca__autores img { display: block; width: 100%; max-width: 280px; height: auto; margin-inline: auto; }
.acerca__autores figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--texto-2); }
/* Las versiones de los módulos (5 de octubre de 2026). */
.acerca__versiones { margin-top: 2.5rem; }
.acerca__versiones h2 { font-size: 1.25rem; }
.tabla-versiones { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabla-versiones th, .tabla-versiones td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--borde); text-align: left; }
.tabla-versiones thead th { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-3); }
.tabla-versiones tbody th { font-weight: 500; }
.tabla-versiones td.numero { white-space: nowrap; }

/* La página de «no encontrada» (404.html). */
.pagina-404 { min-height: 50vh; }
.pagina-404 p:last-child { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.pagina-404 .boton { text-decoration: none; }
.pagina-404 .boton--principal { background: #1f6cc4; border-color: #1f6cc4; color: #fff; }

/* Preguntas frecuentes de la portada (5 de octubre de 2026): plegadas, con la
   pregunta como rótulo. Los buscadores leen igual el texto plegado. */
.portada-faq { margin-top: 3rem; max-width: 78ch; }
.portada-faq > h2 { font-size: 1.35rem; margin-bottom: 0.8rem; }
.faq { border-top: 1px solid var(--borde); padding: 0.2rem 0; }
.faq:last-child { border-bottom: 1px solid var(--borde); }
.faq > summary { display: flex; align-items: baseline; gap: 0.55rem; cursor: pointer; padding: 0.65rem 0; list-style: none; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before { content: "▸"; color: var(--texto-3); transition: transform 0.15s; }
.faq[open] > summary::before { transform: rotate(90deg); }
.faq > summary h3 { margin: 0; font-size: 1.02rem; font-weight: 600; }
.faq > summary:hover h3 { color: var(--acento-texto, var(--acento)); }
.faq > p { margin: 0 0 0.7rem 1.3rem; color: var(--texto-2); line-height: 1.6; }
.faq .enlace-modulo { margin-top: 0; }
.faq .enlace-modulo::after { content: " →"; }

.rejilla-modulos {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  margin-top: 2.5rem;
}

.tarjeta-modulo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.tarjeta-modulo:hover { border-color: var(--borde-fuerte); transform: translateY(-2px); }
.tarjeta-modulo[aria-disabled="true"] {
  opacity: 0.62;
  pointer-events: none;
}
.tarjeta-modulo__numero {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--acento);
}
.tarjeta-modulo h3 { margin: 0; font-size: 1.15rem; }
.tarjeta-modulo p { color: var(--texto-2); font-size: 0.94rem; margin: 0; }
/* --- Miniaturas de la portada ---
   Dibujos esquemáticos de lo que hay dentro de cada módulo, con los mismos
   colores que usa el propio módulo: protón, neutrón y electrón de sus tokens;
   la escena del simulador y la cámara de niebla, oscuras en los dos temas,
   como son en su página. */
.tarjeta-modulo__miniatura {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-bottom: 0.4rem;
  border-radius: var(--r-m);
  background: var(--superficie-2);
}
.miniatura--oscura { background: #0d1117; }
.mini-fondo { fill: #0d1117; }
.mini-orbita { stroke: var(--borde-fuerte); }
.mini-proton { fill: var(--proton); }
.mini-neutron { fill: var(--neutron); }
.mini-electron { fill: var(--electron); }
.mini-rayos line { stroke: #4cc9f0; opacity: 0.55; }
.mini-formula { fill: var(--texto); font-size: 22px; font-weight: 700; font-style: italic; font-family: Georgia, serif; }
.mini-halo { fill: rgba(255, 212, 0, 0.25); }
.mini-fuente { fill: #ffd400; }
.mini-figura { stroke: #4cc9f0; }
.mini-chispa { fill: #ffb347; }
.mini-balanza { stroke: var(--texto-3); }
.mini-balanza__pie { fill: var(--borde-fuerte); stroke: none; }
.mini-balanza__eje { fill: var(--texto-3); }
.mini-trazas { stroke: rgba(238, 242, 245, 0.85); }
.mini-aguja { stroke: #9aa1a9; }

.tarjeta-modulo__estado {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--texto-3);
}

/* --- Disposición del Módulo 1 --- */
.laboratorio {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(280px, 360px);
  align-items: start;
}

@media (max-width: 1080px) {
  .laboratorio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .laboratorio__centro { grid-column: 1 / -1; order: -1; }
}

/* Orden dentro del visor. Se declara entero, y no solo para el bloque nuevo,
   porque el reparto es la decisión: la ACCIÓN va pegada al átomo y las notas
   explicativas debajo. Con las notas en medio, el botón caía medio metro por
   debajo del dibujo y había que pulsar sin ver lo que pasaba. */
.visor .selector-vista { order: 0; }
.visor .atomo { order: 1; }
.visor .leyenda-atomo { order: 2; }
.visor .bloque-desintegrar { order: 3; }
.visor .nota-visor { order: 4; }

.bloque-desintegrar {
  align-self: stretch;
  border-top: 1px solid var(--borde);
  padding-top: 0.9rem;
  margin-top: 0.25rem;
}
@media (max-width: 700px) {
  .laboratorio { grid-template-columns: minmax(0, 1fr); }
}

/* La ficha NO lleva alto reservado (5 de octubre de 2026): el 4 se le dio el
   de su núclido más largo para que la tabla periódica no saltara al cambiar
   de elemento, pero dejaba hasta 500 px vacíos bajo «Carga iónica» y los
   autores lo pidieron quitar. Lo que evita el salto bajo el dedo es el
   anclaje de desplazamiento del navegador (overflow-anchor, activo por
   defecto): si la ficha de arriba encoge, la vista se queda donde estaba. */
#panel-nuclido:empty { min-height: 1090px; }

/* --- Contadores de partículas --- */
.contador + .contador { margin-top: 1rem; }

.contador__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.contador__etiqueta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.contador__punto {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
}
.contador__punto--proton { background: var(--proton); }
.contador__punto--neutron { background: var(--neutron); }
.contador__punto--electron { background: var(--electron); }

.contador__simbolo {
  font-family: var(--fuente-datos);
  font-size: 0.8rem;
  color: var(--texto-3);
}

.contador__controles {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.contador__valor {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--fuente-datos);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 600;
  padding: 0.35rem 0.25rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  color: var(--texto);
  -moz-appearance: textfield;
}
.contador__valor::-webkit-outer-spin-button,
.contador__valor::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.boton-paso {
  width: 42px;
  flex: none;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto);
  border-radius: var(--r-m);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.boton-paso:hover:not(:disabled) { background: var(--superficie-hover); border-color: var(--borde-fuerte); }
.boton-paso:active:not(:disabled) { transform: translateY(1px); }
.boton-paso:disabled { opacity: 0.35; cursor: not-allowed; }

/* --- Botones --- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto);
  border-radius: var(--r-m);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}
.boton:hover { background: var(--superficie-hover); border-color: var(--borde-fuerte); }
.boton--tenue { background: transparent; border-color: transparent; color: var(--texto-2); }
.boton--tenue:hover { background: var(--superficie-hover); }

/* --- Panel de información del núclido --- */
.nuclido-cabecera {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--borde);
}

/* Notación AZX: el número másico arriba, el atómico abajo, ambos a la
   izquierda del símbolo. Es la forma correcta de escribir un núclido. */
.nuclido-simbolo {
  display: flex;
  align-items: center;
  font-family: var(--fuente-datos);
  line-height: 1;
}
.nuclido-simbolo__indices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto-2);
  gap: 0.15rem;
  margin-right: 0.15rem;
}
.nuclido-simbolo__elemento {
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--texto);
}

/* Nombre y elemento siguen en la misma línea, y la insignia de estabilidad cae
   debajo. En columna y no a la derecha del todo porque «Núclido no observado»
   es larga: en la columna de la ficha se saldría, y una insignia partida en dos
   líneas al lado del símbolo queda peor que una debajo. */
.nuclido-cabecera__texto {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.nuclido-cabecera__titulos {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.nuclido-cabecera__nombre { font-size: 1.05rem; font-weight: 600; }
.nuclido-cabecera__sub { font-size: 0.87rem; color: var(--texto-2); }

/* --- Insignias de estado / decaimiento --- */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.insignia__punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}

/* El texto lleva tokens de texto; el color de la familia va en el punto y el
   borde. Así el color nunca es lo único que distingue una insignia. */
.insignia { color: var(--texto); }
.insignia--estable { background: var(--dec-estable-suave); border-color: var(--dec-estable); }
.insignia--estable .insignia__punto { background: var(--dec-estable); }
.insignia--beta-menos { background: var(--dec-beta-menos-suave); border-color: var(--dec-beta-menos); }
.insignia--beta-menos .insignia__punto { background: var(--dec-beta-menos); }
.insignia--beta-mas { background: var(--dec-beta-mas-suave); border-color: var(--dec-beta-mas); }
.insignia--beta-mas .insignia__punto { background: var(--dec-beta-mas); }
.insignia--alfa { background: var(--dec-alfa-suave); border-color: var(--dec-alfa); }
.insignia--alfa .insignia__punto { background: var(--dec-alfa); }
.insignia--otros { background: var(--dec-otros-suave); border-color: var(--dec-otros); }
.insignia--otros .insignia__punto { background: var(--dec-otros); }
.insignia--desconocido { background: var(--superficie-2); border-color: var(--borde-fuerte); color: var(--texto-2); }
.insignia--desconocido .insignia__punto { background: var(--texto-3); }

/* --- Lista de datos --- */
.datos { margin: 0; }

.datos__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--borde);
}

/* Cuando el valor es una lista (las ramas de decaimiento) o un texto largo, la
   columna estrecha de la derecha lo parte en trozos ilegibles. Estas filas se
   apilan: la etiqueta arriba y el valor a lo ancho completo. */
.datos__fila--bloque {
  display: block;
}
.datos__fila--bloque .datos__clave { max-width: none; display: block; }
.datos__fila--bloque .datos__valor { text-align: left; display: block; margin-top: 0.15rem; }
.datos__fila:last-child { border-bottom: none; }

.datos__clave {
  font-size: 0.88rem;
  color: var(--texto-2);
  flex: none;
  max-width: 55%;
}

.datos__valor {
  font-family: var(--fuente-datos);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  text-align: right;
  /* Nunca partir un número por la mitad: si no cabe, que salte entero. */
  overflow-wrap: break-word;
}

/* "sin dato evaluado" tiene su propio aspecto: nunca se rellena con un número
   aproximado, y debe notarse que falta. */
.sin-dato {
  font-family: var(--fuente);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--texto-3);
}

.datos__nota {
  font-size: 0.8rem;
  color: var(--texto-3);
  font-family: var(--fuente);
  display: block;
  margin-top: 0.15rem;
}
/* Las aclaraciones de definición (Z = número de protones, A = Z + N): más
   pequeñas y en cursiva, para que se lean como glosa y no como otro dato. */
.datos__nota--aclaracion { font-size: 0.74rem; font-style: italic; }

/* Las notas del pie: las explicaciones completas que no caben junto al dibujo. */
.pie-notas ul { display: grid; gap: 0.5rem; }

/* --- Ramas de decaimiento --- */
.ramas { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.rama {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.2rem 0;
}
.rama__notacion {
  font-family: var(--fuente-datos);
  font-weight: 600;
  min-width: 3.2em;
  flex: none;
}
.rama__nombre { color: var(--texto-2); flex: 1; }
.rama__pct { font-family: var(--fuente-datos); color: var(--texto-2); }

/* --- Aviso pedagógico --- */
.aviso {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  margin-top: 1rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-inline-start: 3px solid var(--acento);
  border-radius: var(--r-m);
  font-size: 0.85rem;
  color: var(--texto-2);
}
.aviso strong { color: var(--texto); }

/* --- Zona del visor (átomo) --- */
.visor {
  display: grid;
  place-items: center;
  min-height: 420px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: 1rem;
}

.marcador-pendiente {
  text-align: center;
  max-width: 34ch;
  color: var(--texto-3);
  font-size: 0.9rem;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-l);
  padding: 2rem 1.5rem;
}
.marcador-pendiente strong { display: block; color: var(--texto-2); margin-bottom: 0.35rem; }

/* ===========================================================================
   Visor del átomo
   ========================================================================= */

.visor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.atomo {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
}

/* --- Núcleo --- */
.nucleon--proton { fill: var(--proton); }
.nucleon--neutron { fill: var(--neutron); }

/* El núcleo de un núclido inestable se agita, y tanto más cuanto más corto es
   su periodo de semidesintegración. Cada nucleón recorre un círculo diminuto
   alrededor de su sitio; el radio de ese círculo llega en --agitacion, y la
   fase y el ritmo de cada uno, en su atributo style. El conjunto no se
   desplaza: hierve.

   NO ES UN FENÓMENO FÍSICO, es un indicador. La nota bajo el visor lo dice.

   transform-box: fill-box es imprescindible y no es un adorno: en SVG el origen
   de las transformaciones CSS es el (0,0) del lienzo, no el centro del
   elemento. Sin él, rotate() lanzaría cada nucleón en una órbita alrededor de
   la esquina superior izquierda del dibujo. */
.atomo__nucleo[data-agitado="true"] .nucleon {
  transform-box: fill-box;
  transform-origin: center;
  animation: vibrar-nucleon 1s linear infinite;
}

@keyframes vibrar-nucleon {
  from { transform: rotate(0deg) translateX(var(--agitacion, 0px)); }
  to { transform: rotate(360deg) translateX(var(--agitacion, 0px)); }
}

/* La vibración del núcleo como conjunto: un temblor pequeño e irregular (no un
   vaivén regular, que se leería como una oscilación con sentido físico). La
   amplitud llega en --temblor y crece cuanto más corto es el periodo. */
.atomo__nucleo[data-agitado="true"] .atomo__temblor {
  animation: temblor-nucleo var(--temblor-periodo, 0.4s) steps(1, end) infinite;
}
@keyframes temblor-nucleo {
  0% { transform: translate(0, 0); }
  17% { transform: translate(calc(var(--temblor) * 0.7), calc(var(--temblor) * -0.4)); }
  33% { transform: translate(calc(var(--temblor) * -0.5), calc(var(--temblor) * 0.6)); }
  50% { transform: translate(calc(var(--temblor) * 0.3), calc(var(--temblor) * 0.8)); }
  67% { transform: translate(calc(var(--temblor) * -0.8), calc(var(--temblor) * -0.2)); }
  83% { transform: translate(calc(var(--temblor) * 0.5), calc(var(--temblor) * -0.7)); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .atomo__nucleo[data-agitado="true"] .atomo__temblor { animation: none; }
}

/* --- Capas de Bohr --- */
.orbita {
  fill: none;
  stroke: var(--borde-fuerte);
  stroke-width: 1;
  opacity: 0.55;
}

.electron { fill: var(--electron); }

/* Un giro lento da idea de movimiento sin sugerir que la órbita sea una
   trayectoria real. Cada capa gira a su ritmo y en sentido alterno. */
.capa {
  transform-origin: 220px 220px;
  animation: girar-capa var(--giro, 60s) linear infinite;
  animation-direction: var(--sentido, normal);
}

@keyframes girar-capa {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .capa { animation: none; }

  /* Aquí no basta con la regla general de base.css, que acorta la animación a
     0,01 ms: eso deja el ÚLTIMO fotograma, y el último fotograma del temblor es
     el nucleón desplazado. El núcleo quedaría dibujado mal, quieto pero
     descolocado. Hay que apagar la animación entera.

     No se pierde información: el periodo de semidesintegración y la insignia de
     radiactividad están en la ficha del núclido, en texto. */
  .atomo__nucleo .nucleon { animation: none; }
}

/* --- La desintegración, vista ---------------------------------------------
   Las partículas que salen del núcleo. El vuelo lo mueve JavaScript con la API
   de animaciones del navegador —hace falta calcular hasta dónde llega cada una
   según el encuadre, que cambia con el átomo—, así que aquí solo va el aspecto.
   Con prefers-reduced-motion no se dibuja nada de esto: no llega a crearse. */
.emision__cuerpo--proton { fill: var(--proton); }
.emision__cuerpo--neutron { fill: var(--neutron); }
.emision__cuerpo--electron { fill: var(--electron); }

/* La antimateria, hueca. El positrón y el electrón comparten color porque son
   la misma partícula del revés, así que lo que los separa es la FORMA —y el
   símbolo—, nunca el color a secas. */
.emision__cuerpo--hueco {
  fill: var(--superficie);
  stroke: var(--electron);
  stroke-width: 1.6;
}

.emision__simbolo {
  font-family: var(--fuente-datos);
  font-size: 9px;
  font-weight: 600;
  fill: var(--texto);
  /* Contorno del color del fondo por debajo de la letra: el símbolo cruza por
     encima de órbitas, nucleones y bandas, y sin esto se pierde sobre la mitad
     de ellos. Es el mismo recurso que el halo del marcador de la carta. */
  paint-order: stroke;
  stroke: var(--fondo);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

/* Neutrinos: sin masa y sin carga, se llevan energía y no se recupera. Se
   dibujan tenues porque eso es exactamente lo que son de detectar. */
.emision--tenue { opacity: 0.5; }

.emision__anillo {
  fill: none;
  stroke: var(--texto-3);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

/* --- Botones de desintegración --- */
.desintegrar { margin-top: 1rem; }

/* La clase del contenedor entra en el selector a propósito: .nota-visor se
   define MÁS ABAJO en este archivo y, con la misma especificidad, ganaría ella
   y las notas saldrían centradas. Aquí son párrafos de lectura, no pies de
   figura. */
.desintegrar .desintegrar__aviso,
.desintegrar .desintegrar__notas,
.desintegrar .desintegrar__imposible {
  text-align: start;
  max-width: none;
  margin-bottom: 0.7rem;
}

.desintegrar__vias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.desintegrar__via {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.desintegrar__via-modo { font-family: var(--fuente-datos); font-weight: 600; }
.desintegrar__via-energia { color: var(--texto-3); font-size: 0.85em; }

.desintegrar__cadena { margin-top: 0.5rem; }

/* Mientras corre la animación no se puede pulsar nada más: un segundo salto a
   medio camino del primero dejaría el estado y el dibujo contando cosas
   distintas. */
.desintegrar[data-corriendo='true'] .desintegrar__via,
.desintegrar[data-encadenando='true'] .desintegrar__via {
  opacity: 0.4;
  pointer-events: none;
}

/* La traza se queda dentro de su propia caja con desplazamiento. La serie del
   uranio son quince líneas, y sin tope empujaría el botón —y el átomo— fuera
   de la pantalla justo mientras se está mirando la animación. */
.desintegrar__traza {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  max-height: 11rem;
  overflow-y: auto;
  font-family: var(--fuente-datos);
  font-size: 0.82rem;
  color: var(--texto-2);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.desintegrar__paso--fin { color: var(--texto); font-weight: 600; }

/* --- Nube electrónica --- */
.banda-nube {
  fill: none;
  stroke: var(--electron);
  filter: blur(7px);
}

/* El selector decide qué capa del dibujo se ve. El núcleo está en las dos. */
.visor[data-vista="bohr"] .atomo__nube { display: none; }
.visor[data-vista="nube"] .atomo__orbitas,
.visor[data-vista="nube"] .atomo__electrones { display: none; }

/* --- Selector de vista --- */
.selector-vista {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 100px;
  align-self: flex-end;
}

.selector-vista__boton {
  border: none;
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.85rem;
  border-radius: 100px;
  cursor: pointer;
}
.selector-vista__boton:hover { color: var(--texto); }
.selector-vista__boton[aria-pressed="true"] {
  background: var(--superficie);
  color: var(--texto);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(28 27 25 / 10%);
}

/* --- Leyenda --- */
.leyenda-atomo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--texto-2);
}
.leyenda-atomo li { display: flex; align-items: center; gap: 0.4rem; }

.leyenda-atomo__punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.leyenda-atomo__punto--proton { background: var(--proton); }
.leyenda-atomo__punto--neutron { background: var(--neutron); }
.leyenda-atomo__punto--electron { background: var(--electron); }

/* --- Notas del visor --- */
.nota-visor {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--texto-3);
  text-align: center;
  max-width: 46ch;
  margin: 0;
}
.nota-visor--escala { font-style: italic; }

.nota-visor--vacio { display: none; }

/* Sin partículas no hay nada que dibujar. El SVG vacío seguiría ocupando su
   cuadrado y empujaría el mensaje fuera de la vista, así que se oculta todo
   menos el aviso, centrado en la tarjeta. */
.visor[data-vacio="true"] { justify-content: center; }
.visor[data-vacio="true"] .nota-visor--vacio { display: block; }
.visor[data-vacio="true"] .atomo,
.visor[data-vacio="true"] .leyenda-atomo,
.visor[data-vacio="true"] .selector-vista,
.visor[data-vacio="true"] .nota-visor--escala { display: none; }
.visor[data-vacio="true"] .nota-visor:not(.nota-visor--vacio) { display: none; }

/* ===========================================================================
   Tabla periódica
   ========================================================================= */

.tabla-periodica-envoltorio { overflow-x: auto; padding-bottom: 0.5rem; }

.tabla-periodica {
  display: grid;
  grid-template-columns: repeat(18, minmax(38px, 1fr));
  grid-auto-rows: minmax(38px, auto);
  gap: 3px;
  min-width: 760px;
}

/* La octava fila del grid queda vacía a propósito: es el hueco que separa la
   tabla principal de las dos series que se dibujan aparte. */
.tabla-periodica > * { grid-row-end: span 1; }
.tabla-periodica::before {
  content: "";
  grid-row: 8;
  grid-column: 1 / -1;
  height: 0.6rem;
}

.elemento {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit;
  cursor: pointer;
  aspect-ratio: 1;
  min-width: 0;
  transition: border-color 0.12s, transform 0.12s;
}

/* 0,68 rem y --texto-2: a 0,55 rem con --texto-3 medían 8,8 px y daban 3,9:1. */
.elemento__z {
  font-family: var(--fuente-datos);
  font-size: 0.68rem;
  line-height: 1;
  color: var(--texto-2);
}

.elemento__simbolo {
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
}

.elemento:hover {
  border-color: var(--texto-2);
  transform: translateY(-1px);
  z-index: 1;
}

/* El elemento actual, en el amarillo del marcador: lo elegido se señala igual
   en todo el sitio, aquí y en la carta de núclidos. Sigue sin depender del
   color a secas — también cambian el grosor del borde y el peso del símbolo.

   El anillo oscuro de fuera es el mismo recurso que en la carta: el amarillo
   es claro y sobre una tarjeta blanca un borde amarillo solo se queda flojo.

   OJO con el número atómico: iba en --acento y NO puede pasar a amarillo. Es
   texto pequeño sobre fondo claro, y el amarillo ahí no llega ni de lejos al
   contraste mínimo. Se resalta subiéndolo al texto de fuerza plena. */
.elemento[aria-current="true"] {
  border: 2px solid var(--marcador);
  background: var(--marcador-suave);
  box-shadow: 0 0 0 1px var(--marcador-halo), 0 0 0 3px var(--marcador-suave);
  z-index: 2;
}
.elemento[aria-current="true"] .elemento__simbolo { font-weight: 700; }
.elemento[aria-current="true"] .elemento__z { color: var(--texto); font-weight: 700; }

/* Tintes por bloque: muy poco saturados y separados sobre todo por claridad.
   Las cuatro regiones son grandes y contiguas, y la identidad del elemento la
   dan el símbolo y el tooltip, no el fondo. */
.elemento--bloque-s { background: color-mix(in srgb, var(--acento) 11%, var(--superficie)); }
.elemento--bloque-p { background: color-mix(in srgb, var(--proton) 9%, var(--superficie)); }
.elemento--bloque-d { background: var(--superficie-2); }
.elemento--bloque-f { background: color-mix(in srgb, var(--dec-alfa) 11%, var(--superficie)); }

.elemento--marca {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-datos);
  font-size: 0.6rem;
  color: var(--texto-3);
  background: transparent;
  border-style: dashed;
  cursor: default;
}

/* Nombre de cada serie del bloque f, en el hueco que dejan las dos filas. */
.serie-f {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--texto-3);
  white-space: nowrap;
}

/* --- Leyenda de bloques --- */
.leyenda-bloques {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--texto-2);
}
.leyenda-bloques li { display: flex; align-items: center; gap: 0.4rem; }

.leyenda-bloques__muestra {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid var(--borde);
  flex: none;
}
.leyenda-bloques__muestra--s { background: color-mix(in srgb, var(--acento) 11%, var(--superficie)); }
.leyenda-bloques__muestra--p { background: color-mix(in srgb, var(--proton) 9%, var(--superficie)); }
.leyenda-bloques__muestra--d { background: var(--superficie-2); }
.leyenda-bloques__muestra--f { background: color-mix(in srgb, var(--dec-alfa) 11%, var(--superficie)); }

.seccion-tabla { margin-top: 1.25rem; }
.seccion-tabla .nota-visor { margin-top: 0.75rem; }

/* ===========================================================================
   Carta de núclidos
   ========================================================================= */

.carta-barra {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.carta-zoom {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline-start: auto;
}
.carta-zoom .boton-paso { width: 32px; height: 32px; }
.carta-zoom__nivel {
  min-width: 2.5em;
  text-align: center;
  font-size: 0.85rem;
  color: var(--texto-2);
}

/* El marco recorta y desplaza; el lienzo crece con el zoom por dentro. */
.carta-marco {
  position: relative;
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--superficie);
}

/* max-width: none anula la regla global `img, svg, canvas { max-width: 100% }`
   de base.css. Esa regla existe para que nada desborde en pantallas estrechas,
   pero aquí hacía que el zoom NO funcionara en horizontal: el código pide un
   lienzo de 1824 px al zoom 2 y el CSS lo recortaba al ancho del marco, así que
   la carta solo crecía a lo alto. Este lienzo vive dentro de .carta-marco, que
   tiene overflow:auto y es quien debe desbordar y ofrecer barras. */
/* touch-action: con UN dedo desplaza el navegador (y así se puede seguir
   bajando por la página); el gesto de DOS dedos queda libre para nuestro
   pellizco, que el navegador no usa. */
.carta-lienzo {
  display: block;
  cursor: crosshair;
  max-width: none;
  touch-action: pan-x pan-y;
}

/* --- Globo de información por celda --- */
.carta-globo {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: 260px;
  padding: 0.45rem 0.6rem;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-m);
  box-shadow: var(--sombra);
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--texto-2);
}
.carta-globo strong {
  font-family: var(--fuente-datos);
  font-size: 0.9rem;
  color: var(--texto);
}

/* --- Leyenda --- */
.leyenda-carta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--texto-2);
}
.leyenda-carta li { display: flex; align-items: center; gap: 0.45rem; }

.leyenda-carta__muestra {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid var(--borde);
  flex: none;
}
.leyenda-carta__muestra--estable { background: var(--dec-estable); }
.leyenda-carta__muestra--beta-menos { background: var(--dec-beta-menos); }
.leyenda-carta__muestra--beta-mas { background: var(--dec-beta-mas); }
.leyenda-carta__muestra--alfa { background: var(--dec-alfa); }
.leyenda-carta__muestra--desconocido { background: var(--dec-desconocido); }

/* «Otros» lleva trama, igual que en la carta: es lo que lo distingue cuando el
   color por sí solo no basta. */
.leyenda-carta__muestra--otros {
  background: var(--dec-otros);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 2px,
    var(--superficie) 2px 3px
  );
}

.nota-visor--ancha { max-width: none; text-align: start; margin-top: 0.75rem; }

/* --- Vista de tabla --- */
.carta-tabla__titulo {
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}

.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.tabla-datos th,
.tabla-datos td {
  text-align: start;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: baseline;
}
.tabla-datos thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-3);
  font-weight: 600;
}
.tabla-datos tbody tr:hover { background: var(--superficie-2); }
.tabla-datos tbody tr[aria-current="true"] {
  background: var(--marcador-suave);
  outline: 2px solid var(--marcador);
}
/* En la fila marcada el enlace pasa al color del texto. El azul de enlace sobre
   un fondo teñido no llega al 4,5:1 que pide la WCAG para texto normal: da 3,98
   en claro y 3,67 en oscuro. No es nuevo del amarillo —con el tinte azul de
   antes daba 3,89— pero se arregla ahora que se ha medido. Sigue subrayado, así
   que se ve que es un enlace sin depender del color. */
.tabla-datos tbody tr[aria-current="true"] .enlace-nuclido { color: var(--texto); }
.tabla-datos td { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }

.enlace-nuclido {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-family: var(--fuente-datos);
  font-weight: 600;
  color: var(--acento);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.enlace-nuclido:hover { text-decoration-thickness: 2px; }

.seccion-carta { margin-top: 1.25rem; }

/* ===========================================================================
   Aviso de arranque

   Se enseña cuando el JavaScript no ha podido ejecutarse — casi siempre porque
   la página se ha abierto con doble clic (file://) y el navegador bloquea los
   módulos ES. Sin esto la página aparece en blanco y muda, sin decir por qué.
   ========================================================================= */

.aviso-arranque {
  max-width: 640px;
  margin: 2rem auto;
  padding: 1.1rem 1.3rem;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-inline-start: 4px solid var(--proton);
  border-radius: var(--r-l);
  color: var(--texto-2);
  font-size: 0.92rem;
  line-height: 1.6;
}
.aviso-arranque[hidden] { display: none; }
.aviso-arranque strong { display: block; color: var(--texto); margin-bottom: 0.35rem; font-size: 1rem; }
.aviso-arranque p { margin: 0; }
.aviso-arranque code {
  font-family: var(--fuente-datos);
  font-size: 0.88em;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  padding: 0.05em 0.35em;
}

.aviso-arranque__pie {
  margin-top: 0.6rem !important;
  padding-top: 0.6rem;
  border-top: 1px solid var(--borde);
  font-size: 0.85rem;
  color: var(--texto-3);
}
.aviso-arranque__origen { word-break: break-all; }

/* ===========================================================================
   Buscador de núclidos
   ========================================================================= */

.buscador {
  position: relative;
  max-width: 460px;
  margin-bottom: 1.5rem;
}

.buscador__caja {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.65rem;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-m);
}
.buscador__caja:focus-within {
  border-color: var(--foco);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.buscador__icono { display: flex; color: var(--texto-3); flex: none; }

.buscador__campo {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0.6rem 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--texto);
}
.buscador__campo:focus { outline: none; }
.buscador__campo::placeholder { color: var(--texto-3); }
.buscador__campo::-webkit-search-cancel-button { display: none; }

.buscador__limpiar {
  border: none;
  background: none;
  color: var(--texto-3);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
  flex: none;
}
.buscador__limpiar:hover { color: var(--texto); }

.buscador__ayuda {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--texto-3);
}

/* --- Lista desplegable --- */
.buscador__lista {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  top: calc(100% + 4px);
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-m);
  box-shadow: var(--sombra);
}
.buscador__lista[hidden] { display: none; }

.buscador__opcion {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--r-s);
  cursor: pointer;
}
.buscador__opcion[aria-selected="true"] { background: var(--acento-suave); }

.buscador__nuclido {
  font-family: var(--fuente-datos);
  font-weight: 600;
  font-size: 0.92rem;
  flex: none;
  min-width: 4.5em;
}

.buscador__detalle {
  font-size: 0.82rem;
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buscador__vacio {
  padding: 0.6rem;
  font-size: 0.86rem;
  color: var(--texto-3);
}

/* ===========================================================================
   Módulo 2 — Blindaje

   Los colores de tipo de radiación se heredan del Módulo 1 para que signifiquen
   lo mismo en todo el sitio: aguamarina = alfa, azul = beta. Los fotones toman
   el naranja, que en la carta de núclidos designa ε/β⁺ pero aquí no compite con
   ella. Los tres son el trío validado para daltonismo.
   ========================================================================= */

.laboratorio-blindaje {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
  margin-top: 2rem;
}
@media (max-width: 860px) { .laboratorio-blindaje { grid-template-columns: minmax(0, 1fr); } }

.nota-desde-modulo {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--acento);
  background: var(--acento-suave);
  border-radius: 100px;
  padding: 0.2rem 0.7rem;
  margin-top: 0.5rem;
}

/* --- Selector de fuente --- */
.selector-fuente { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; }
/* Las fuentes del Simulador van por grupos, una fila cada uno con su rótulo. */
.selector-fuente__grupo {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.selector-fuente__rotulo {
  flex-basis: 100%;
  margin-top: 0.35rem;
  color: var(--texto-3, var(--texto-2));
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chip-fuente {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto-2);
  border-radius: 100px;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.chip-fuente:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.chip-fuente[aria-checked="true"] {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
  font-weight: 600;
}

/* --- Ficha de emisiones --- */
.emisiones__titulo {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-3);
  margin-bottom: 0.6rem;
}

.emision { padding: 0.5rem 0; border-top: 1px solid var(--borde); }
.emision__tipo { display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; font-weight: 600; }

.emision__punto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.emision--fotones .emision__punto { background: var(--dec-beta-mas); }
.emision--alfa .emision__punto { background: var(--dec-alfa); }
.emision--beta .emision__punto { background: var(--dec-beta-menos); }

.emision__vacio { display: block; font-size: 0.82rem; color: var(--texto-3); margin-top: 0.2rem; }

.emision__lineas { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.emision__lineas li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--fuente-datos);
  font-size: 0.83rem;
  padding: 0.12rem 0;
}
.emision__energia { color: var(--texto); }
.emision__intensidad { color: var(--texto-2); }

/* --- Pila de láminas --- */
.pila { display: flex; flex-direction: column; gap: 0.5rem; }

.lamina {
  display: grid;
  grid-template-columns: 1.5rem minmax(90px, 1fr) minmax(80px, 1.4fr) 4.5rem 1.5rem 1.6rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
}
@media (max-width: 560px) {
  .lamina { grid-template-columns: 1.5rem 1fr 4.5rem 1.5rem 1.6rem; }
  /* EL `grid-row` NO SOBRA, y quitarlo desbarata la fila entera.

     El deslizador va en el medio del marcado (orden, material, DESLIZADOR,
     valor, unidad, quitar). Con solo `grid-column: 1 / -1` se lleva la fila 2
     pero sigue contando para la colocación automática, así que los tres
     elementos que vienen detrás reinician en la columna 1 y quedan corridos:
     el campo del espesor caía en la columna de 1,5rem —24 px medidos a 500 px
     de ancho— mientras el rótulo «cm» se quedaba con 1fr, 222 px.

     Con la fila fijada, el deslizador queda colocado explícitamente y los otros
     cinco se auto-colocan en la fila 1, cada uno en la columna que le toca.

     No se veía porque hasta el 14 de septiembre de 2026 el módulo abría SIN
     láminas: esta fila no existía al aterrizar y nadie la había mirado en un
     teléfono. */
  .lamina__deslizador { grid-row: 2; grid-column: 1 / -1; }
}

.lamina__orden { font-size: 0.78rem; color: var(--texto-3); text-align: center; }

.lamina__material,
.lamina__valor {
  font: inherit;
  font-size: 0.88rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  background: var(--superficie);
  color: var(--texto);
  min-width: 0;
}
.lamina__valor { font-family: var(--fuente-datos); text-align: end; }
.lamina__unidad { font-size: 0.8rem; color: var(--texto-3); }
.lamina__deslizador { width: 100%; accent-color: var(--acento); }

.lamina__quitar {
  border: none;
  background: none;
  color: var(--texto-3);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--r-s);
}
.lamina__quitar:hover { color: var(--proton); background: var(--superficie-hover); }

.pila__pie { display: flex; align-items: center; gap: 1rem; margin-top: 0.9rem; flex-wrap: wrap; }
.pila__total { font-size: 0.85rem; color: var(--texto-2); }

/* --- Resultados --- */
.seccion-resultado { margin-top: 1.25rem; }

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

.resultado {
  padding: 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--superficie-2);
}

.resultado__titulo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}
.resultado__punto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.resultado__punto--fotones { background: var(--dec-beta-mas); }
.resultado__punto--alfa { background: var(--dec-alfa); }
.resultado__punto--beta { background: var(--dec-beta-menos); }

.resultado__titular {
  font-size: 1.25rem;
  font-weight: 600;
  font-family: var(--fuente-datos);
  margin: 0 0 0.5rem;
}

.resultado__detalle { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--texto-2); }
.resultado__detalle li { padding: 0.15rem 0; }

.resultado__vacio,
.resultado__nota { font-size: 0.82rem; color: var(--texto-3); margin: 0.4rem 0 0; }

.tabla-datos--compacta { font-size: 0.8rem; margin-top: 0.4rem; }
.tabla-datos--compacta th, .tabla-datos--compacta td { padding: 0.28rem 0.4rem; }

/* --- Avisos --- */
.avisos-blindaje { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
.aviso--peligro { border-inline-start-color: var(--proton); }
.aviso--nota { border-inline-start-color: var(--borde-fuerte); }

/* --- Gráfica --- */
.grafica-transmision { margin-top: 1.5rem; }
.grafica { width: 100%; height: auto; display: block; }

.grafica__rejilla { stroke: var(--borde); stroke-width: 1; }
.grafica__etiqueta { fill: var(--texto-3); font-size: 11px; font-family: var(--fuente-datos); }
.grafica__eje { fill: var(--texto-2); font-size: 12px; font-weight: 600; }

.grafica__curva { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafica__curva--fotones { stroke: var(--dec-beta-mas); }
.grafica__curva--alfa { stroke: var(--dec-alfa); }
.grafica__curva--beta { stroke: var(--dec-beta-menos); }

.grafica__marca { stroke: var(--acento); stroke-width: 1.5; stroke-dasharray: 4 4; }

.leyenda-grafica {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--texto-2);
}
.leyenda-grafica li { display: flex; align-items: center; gap: 0.45rem; }
.leyenda-grafica__linea { width: 18px; height: 3px; border-radius: 2px; flex: none; }
.leyenda-grafica__linea--fotones { background: var(--dec-beta-mas); }
.leyenda-grafica__linea--alfa { background: var(--dec-alfa); }
.leyenda-grafica__linea--beta { background: var(--dec-beta-menos); }

/* Enlace de un módulo al siguiente (el núclido elegido pasa al blindaje). */
.enlace-modulo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1rem;
  padding: 0.4rem 0.8rem;
  background: var(--acento-suave);
  color: var(--acento);
  border-radius: var(--r-m);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}
.enlace-modulo:hover { text-decoration: underline; }

/* --- Atajos a núclidos con historia --- */
.seccion-atajos { margin-bottom: 1.25rem; }
/* Sitio reservado mientras el JavaScript monta los atajos (Átomos y Defecto):
   llegaban vacíos (42 px) y crecían hasta 369–1011 px empujando toda la página
   (CLS 0,53 y 0,56). Altos medidos el 4 de octubre de 2026 a cada ancho. */
#atajos:empty { min-height: 369px; }
@media (max-width: 1180px) { #atajos:empty { min-height: 465px; } }
@media (max-width: 820px)  { #atajos:empty { min-height: 551px; } }
@media (max-width: 640px)  { #atajos:empty { min-height: 591px; } }
@media (max-width: 480px)  { #atajos:empty { min-height: 1011px; } }
#buscador:empty { min-height: 72px; }

.atajos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}
/* Los cuatro récords de la balanza, en una sola fila (dos en tableta, una
   columna en el móvil). */
.atajos--records { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.atajos--records .atajo { padding: 0.5rem 0.65rem; }
.atajos--records .atajo__nota { font-size: 0.75rem; }
@media (max-width: 720px) { .atajos--records { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .atajos--records { grid-template-columns: 1fr; } }
/* El rótulo de un grupo de tarjetas, a todo lo ancho de la rejilla. */
.atajos__grupo {
  grid-column: 1 / -1;
  margin: 0.6rem 0 0;
  color: var(--texto-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.atajos__grupo:first-child { margin-top: 0; }

.atajo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: start;
  padding: 0.6rem 0.75rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.atajo:hover { background: var(--superficie-hover); border-color: var(--borde-fuerte); }

/* El que está construido se marca con el amarillo del marcador y un borde más
   grueso: sin eso, tras pulsar uno no queda rastro de dónde estás. El grosor no
   es decorativo — el color solo no basta para quien no lo distingue. */
.atajo[aria-pressed="true"] {
  background: var(--marcador-suave);
  border-color: var(--marcador);
  box-shadow: inset 0 0 0 1px var(--marcador), 0 0 0 1px var(--marcador-halo);
}

.atajo__nombre {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--texto);
}
.atajo__nota {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--texto-2);
}
/* Tarjetas COMPACTAS (las muestras de la cámara de niebla): más columnas,
   menos relleno y la nota en dos líneas como mucho; la nota entera queda en
   el título emergente. */
.atajos--compactos { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 0.45rem; margin-top: 0.5rem; }
.atajos--compactos .atajos__grupo { margin-top: 0.35rem; }
.atajos--compactos .atajo { padding: 0.4rem 0.6rem; gap: 0.1rem; }
.atajos--compactos .atajo__nombre { font-size: 0.88rem; }
.atajos--compactos .atajo__nota {
  font-size: 0.74rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* El récord que bate cada tarjeta, encima de su nombre. */
.atajo__record {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--marcador, var(--texto-2));
}
/* En el tema claro el amarillo sobre blanco no se lee (1,43:1): ocre oscuro (≈4,9:1). */
:root[data-tema="claro"] .atajo__record { color: #8a6d00; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema]):not([data-tema-defecto="oscuro"]) .atajo__record { color: #8a6d00; }
}

/* ===========================================================================
   MÓDULO 3 — Equivalencias de energía
   ========================================================================= */

.seccion-entrada {
  max-width: 68ch;
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.seccion-curva { margin-top: 1.25rem; }

/* Rótulo de paso sobre el título de cada sección. Las tres partes del módulo
   son un mismo argumento en tres tiempos, y sin numerarlas se leen como tres
   bloques sueltos que hablan de lo mismo por casualidad. */
.paso-modulo {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acento);
}

/* --- El libro de cuentas del defecto de masa ---
   Las masas se alinean a la derecha y con cifras de ancho fijo. Es la única
   forma de que se vea que dos números de doce decimales solo difieren a partir
   del tercero: con tipografía proporcional, las columnas bailan y la resta deja
   de contar nada. */
.balanza { margin-top: 0.5rem; }

.balanza__titulo {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-3);
  font-weight: 600;
  margin: 1.6rem 0 0.5rem;
}

.balanza__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.35rem 0;
}

.balanza__concepto {
  color: var(--texto-2);
  font-size: 0.88rem;
}

.balanza__detalle {
  display: block;
  font-family: var(--fuente-datos);
  font-size: 0.74rem;
  color: var(--texto-3);
  margin-top: 0.1rem;
}

.balanza__valor {
  font-family: var(--fuente-datos);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  white-space: nowrap;
  color: var(--texto);
}

.balanza__fila--suma {
  border-top: 1px solid var(--borde-fuerte);
  margin-top: 0.3rem;
}

.balanza__fila--total {
  border-top: 2px solid var(--texto);
  margin-top: 0.3rem;
  font-weight: 700;
}
.balanza__fila--total .balanza__concepto { color: var(--texto); font-weight: 600; }

/* --- E = mc² --- */
.resultado-energia {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
}

.formula-energia {
  margin: 0;
  font-family: var(--fuente-datos);
  font-size: 1.05rem;
  color: var(--texto-2);
  text-align: center;
}

.formula-energia__pie {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  text-align: center;
}

.cifra-grande {
  margin: 0.35rem 0 1rem;
  text-align: center;
  font-family: var(--fuente-datos);
  color: var(--texto);
}
.cifra-grande strong {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cifra-grande span {
  font-size: 1rem;
  color: var(--texto-2);
  margin-inline-start: 0.2rem;
}

/* --- Las dos masas, a escala ---
   Presentan la resta del defecto de masa antes de que aparezca escrita con
   doce decimales. Van A ESCALA REAL y eso es la decisión: la astilla que falta
   ronda el 1 %, o sea unos pocos píxeles, y agrandarla «para que se vea» sería
   destruir el mensaje —lo asombroso es que sea tan pequeña—. Por eso tampoco
   llevan ancho mínimo, al revés que los rayos de la escena del Módulo 4: allí
   el mínimo evitaba un dibujo vacío, aquí mentiría sobre la magnitud.

   Sin matiz nuevo: la paleta está repartida entre las familias de decaimiento
   y el amarillo del marcador (ver tokens.css), y la decisión cerrada es que
   toda distinción nueva vaya por texto, forma o contraste. La astilla se
   separa por contraste puro, el color del texto contra el del acento. */
.balanza-visual {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 0.4rem;
}
.balanza-visual__fila { display: grid; gap: 0.2rem; }
.balanza-visual__etiqueta {
  font-size: 0.82rem;
  color: var(--texto-2);
}
.balanza-visual__barra {
  display: flex;
  height: 14px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 100px;
  overflow: hidden;
}
/* `flex: none` es imprescindible: sin él los tramos se encogerían por el
   reparto de flex y los anchos dejarían de ser los porcentajes reales, que es
   justo lo único que esta barra tiene que decir. */
.balanza-visual__piezas,
.balanza-visual__nuclido,
.balanza-visual__falta {
  flex: none;
  height: 100%;
}
.balanza-visual__piezas,
.balanza-visual__nuclido { background: var(--acento); }
.balanza-visual__falta { background: var(--texto); }
.balanza-visual__pie { margin: 0 0 0.9rem; }

/* --- La curva --- */
.curva-marco {
  position: relative;
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--superficie);
  overflow: hidden;
}

.curva-lienzo { display: block; width: 100%; }

.curva-globo {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: 220px;
  padding: 0.45rem 0.6rem;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-m);
  box-shadow: var(--sombra);
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--texto-2);
}
.curva-globo strong {
  font-family: var(--fuente-datos);
  font-size: 0.9rem;
  color: var(--texto);
}

.leyenda-curva {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.82rem;
  color: var(--texto-2);
}
.leyenda-curva__item { display: flex; align-items: center; gap: 0.45rem; }

/* Cada muestra imita la FORMA con la que ese dato se dibuja en el lienzo, no
   solo su color: círculo grande para los estables, punto pequeño para los
   radiactivos, línea para la cresta. Así la leyenda sigue distinguiéndose si el
   color no llega. */
.leyenda-curva__muestra { flex: none; }
.leyenda-curva__muestra--estable {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dec-estable);
}
.leyenda-curva__muestra--radiactivo {
  width: 5px;
  height: 5px;
  background: var(--dec-otros);
  opacity: 0.6;
}
.leyenda-curva__muestra--cresta {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--acento);
}

.curva-tabla__envoltorio {
  max-height: 26rem;
  overflow-y: auto;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
}

/* --- La reacción de fisión --- */
.reaccion {
  font-family: var(--fuente-datos);
  font-size: 1.15rem;
  text-align: center;
  margin: 0.5rem 0 0;
  padding: 0.9rem 0.5rem;
  background: var(--superficie-2);
  border-radius: var(--r-m);
  color: var(--texto);
  overflow-x: auto;
}
.reaccion__nuclido sup {
  font-size: 0.65em;
  vertical-align: super;
  color: var(--texto-2);
}
.reaccion__signo { color: var(--texto-2); }
.reaccion__flecha { color: var(--acento); font-weight: 700; }

/* --- Cadenas de desintegración de los fragmentos --- */
.cadenas {
  list-style: none;
  margin: 0.5rem 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cadena {
  font-family: var(--fuente-datos);
  font-size: 0.86rem;
  color: var(--texto-2);
  overflow-x: auto;
  white-space: nowrap;
}
.cadena__flecha { color: var(--texto-3); }
.cadena__paso--estable {
  color: var(--texto);
  font-weight: 700;
}

/* --- Control de gramos --- */
.control-gramos {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1rem;
}
.control-gramos__etiqueta {
  font-size: 0.85rem;
  color: var(--texto-2);
}
.control-gramos__deslizador {
  flex: 1 1 180px;
  min-width: 140px;
  accent-color: var(--acento);
}
.control-gramos__campo {
  width: 6.5rem;
  padding: 0.35rem 0.5rem;
  font-family: var(--fuente-datos);
  font-size: 0.9rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-s);
}
.control-gramos__unidad {
  font-family: var(--fuente-datos);
  color: var(--texto-2);
}

/* --- Barras de equivalencia ---
   Todas las barras van del mismo color a propósito: aquí lo que se compara es
   la LONGITUD, no la categoría. Darle un matiz a cada combustible sugeriría una
   clasificación que no existe y gastaría matices que el sitio reserva para los
   modos de decaimiento. */
.equivalencias {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.equivalencia {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--borde);
}
.equivalencia__nombre {
  font-size: 0.9rem;
  color: var(--texto-2);
}
.equivalencia__valor {
  font-family: var(--fuente-datos);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  white-space: nowrap;
}
.equivalencia__barra {
  grid-column: 1 / -1;
  height: 8px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 100px;
  overflow: hidden;
}
.equivalencia__relleno {
  display: block;
  height: 100%;
  background: var(--acento);
}
.equivalencia__intervalo {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--texto-3);
  font-family: var(--fuente-datos);
}

@media (max-width: 540px) {
  .cifra-grande strong { font-size: 1.6rem; }
  .reaccion { font-size: 1rem; }
  .balanza__fila { flex-direction: column; gap: 0.1rem; }
  .balanza__valor { align-self: flex-end; }

  /* Estas filas ponen etiqueta y valor en el mismo renglón. El valor va en
     monoespaciada y con espacio duro entre número y unidad, así que no puede
     partirse ni encoger: en pantalla estrecha se salía de la tarjeta. Se pasan
     a dos renglones, que es lo único que respeta el número entero. */
  .datos--apilable .datos__fila {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
}

/* ===========================================================================
   Distancia a la fuente y diagrama de alcance
   ------------------------------------------------------------------------
   El diagrama es una regla en centímetros: las láminas pegadas a la fuente, el
   aire hasta donde estás, y una barra por tipo de radiación que llega hasta
   donde llega. La escala es LINEAL a propósito — ver la nota del módulo.
   ========================================================================= */

.distancia__etiqueta {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.distancia__fila {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.distancia__deslizador { flex: 1; min-width: 0; accent-color: var(--acento); }

.distancia__valor {
  min-width: 6.5ch;
  text-align: end;
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.distancia__geometria {
  margin: 0.8rem 0 0;
  font-size: 0.95rem;
  color: var(--texto);
}

.distancia .distancia__tope,
.distancia .distancia__equivalente,
.distancia .distancia__nota {
  text-align: start;
  max-width: none;
  margin: 0.4rem 0 0;
}

.distancia__subtitulo {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-3);
  margin: 1.4rem 0 0.5rem;
}

.diagrama-blindaje {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* --- Los medios: cada lámina con su material, y el aire casi transparente --- */
.tramo { stroke: var(--superficie); stroke-width: 1; }
.tramo--aire { fill: var(--superficie-2); }
.tramo--agua { fill: color-mix(in srgb, var(--dec-beta-menos) 22%, var(--superficie)); }
.tramo--aluminio { fill: color-mix(in srgb, var(--texto-3) 30%, var(--superficie)); }
.tramo--hormigon { fill: color-mix(in srgb, var(--texto-3) 48%, var(--superficie)); }
.tramo--plomo { fill: color-mix(in srgb, var(--texto) 62%, var(--superficie)); }

.tramo__nombre {
  font-family: var(--fuente-datos);
  font-size: 13px;
  fill: var(--texto);
  paint-order: stroke;
  stroke: var(--superficie);
  stroke-width: 3;
  stroke-linejoin: round;
}

.marca__linea { stroke: var(--texto); stroke-width: 1.5; }
.marca__texto {
  font-size: 13px;
  font-weight: 600;
  fill: var(--texto-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Una barra por tipo. Los colores son los de la carta de núclidos: alfa
       aguamarina, beta azul, fotones naranja. No se eligen aquí. --- */
.barra { rx: 3; }
.barra--fondo { fill: var(--superficie-2); }
.barra--alfa { fill: var(--dec-alfa); }
.barra--beta { fill: var(--dec-beta-menos); }
.barra--fotones { fill: var(--dec-beta-mas); }

/* Lo que se para lleva además un corte al final: el color solo no puede ser lo
   que distinga «llega» de «no llega». */
.barra--detenida { opacity: 0.85; }

/* Los dos rótulos llevan halo del color de la tarjeta. Uno cae encima de la
   barra de color cuando la radiación llega lejos, y encima del fondo claro
   cuando se para enseguida; el otro puede caer sobre cualquiera de los dos
   según lo larga que sea la barra. Sin halo, uno de los dos casos se pierde
   siempre — y el que se perdía era justo el interesante, el de la alfa que se
   muere a los cuatro centímetros. */
.barra__nombre,
.barra__etiqueta {
  font-size: 12px;
  fill: var(--texto);
  paint-order: stroke;
  stroke: var(--superficie);
  stroke-width: 3;
  stroke-linejoin: round;
}
.barra__nombre { font-weight: 600; }
.barra__etiqueta { font-family: var(--fuente-datos); }

.regla__linea { stroke: var(--borde-fuerte); stroke-width: 1; }
.regla__marca { stroke: var(--borde-fuerte); stroke-width: 1; }
.regla__numero,
.regla__unidad {
  font-family: var(--fuente-datos);
  font-size: 12px;
  fill: var(--texto-3);
}

/* ===========================================================================
   Módulo 4 — Simulador de exposición
   =========================================================================== */

.laboratorio-exposicion {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 860px) {
  .laboratorio-exposicion { grid-template-columns: minmax(0, 1fr); }
}

/* --- «Elige una situación»: la fila de entrada ---
   Tres tipos de botón que son tres cosas distintas, y se marcan como tales.
   El porqué de cada uno está en `src/ui/predefinidos.js`; aquí solo se
   distinguen. La marca va con TEXTO además del borde: el color de este sitio ya
   está repartido entre las familias de decaimiento y el amarillo de lo elegido
   (ver la nota de la paleta en tokens.css), así que una distinción nueva no
   puede apoyarse en un matiz más. */
.seccion-predefinidos { margin-bottom: 1.25rem; }

/* --- Las dos partes del Módulo 4 ---
   Hermano a nivel de PÁGINA de `.paso-modulo`, que es como el Módulo 3 rotula
   sus tres pasos. Se reutiliza el mismo idioma —versalita, espaciada, en el
   acento— en vez de inventar un device nuevo: un rótulo de parte significa lo
   mismo en los dos módulos.

   La diferencia es el alcance. El del Módulo 3 va DENTRO de una tarjeta y
   rotula esa tarjeta; este separa dos mitades de la página que abarcan varias
   secciones, así que necesita la raya y el aire de arriba para leerse como una
   frontera y no como el título de lo siguiente. */
.parte-modulo {
  margin: 2rem 0 0.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acento);
}
/* La primera no lleva raya: no separa nada de lo de arriba, que es el título
   de la página. */
.parte-modulo--primera { margin-top: 0.5rem; padding-top: 0; border-top: none; }

.parte-modulo__entrada {
  max-width: 68ch;
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--texto-2);
}

.predefinidos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.predefinido {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  max-width: 22rem;
  padding: 0.6rem 0.8rem;
  font: inherit;
  text-align: start;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
}
.predefinido:hover { border-color: var(--texto-3); background: var(--superficie-hover); }

/* Lo que está puesto, con el mismo amarillo con que se señala lo elegido en
   TODO el sitio: la carta, la tabla periódica, los núclidos con historia y las
   fichas de situaciones. */
.predefinido--puesto {
  border-color: var(--marcador);
  box-shadow: inset 0 0 0 1px var(--marcador);
}

.predefinido__marca {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto-3);
}
.predefinido__marca--calculado {
  border-color: var(--acento);
  color: var(--acento);
  background: var(--acento-suave);
}

.predefinido__nombre { font-size: 0.95rem; font-weight: 600; }
.predefinido__nota { font-size: 0.78rem; font-weight: 400; color: var(--texto-3); }

/* La ficha a la que se ha llevado a alguien se señala un momento: al llegar
   abajo hay quince tarjetas y si ninguna se distingue, el salto no ha servido
   de nada. */
.escenario--senalado {
  border-color: var(--marcador);
  box-shadow: inset 0 0 0 2px var(--marcador);
}

/* --- El panel del modo prueba --- */
.seccion-prueba { margin-bottom: 1.25rem; }
.panel-prueba__nombre { font-size: 1.1rem; margin: 0.5rem 0 0.9rem; }
.seccion-prueba .cifra { margin: 0.9rem 0 0; max-width: 22rem; }

/* --- La escena: los rayos saliendo de la fuente ---
   Los colores son los mismos de la carta de núclidos y del diagrama del
   Módulo 2: alfa aguamarina, beta azul, fotones naranja. Un color significa lo
   mismo en todo el sitio, y aquí eso importa el doble porque la escena y el
   diagrama del blindaje cuentan la misma historia con otro dibujo. */
.seccion-escena { margin-top: 1.25rem; }

.escena {
  width: 100%;
  height: auto;
  display: block;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 10px;
}

.escena__fuente { fill: var(--texto); }
.escena__halo { fill: var(--acento-suave); }
.escena__figura {
  stroke: var(--texto);
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
}
.escena__figura circle { fill: var(--superficie-2); }
.escena__rotulo {
  font-family: var(--fuente-datos);
  font-size: 13px;
  fill: var(--texto-3);
  /* El `stroke: none` NO sobra, aunque un texto no se trace por defecto: desde
     que el muñequito se arrastra, su rótulo vive DENTRO del grupo de la figura
     y hereda de él `stroke: var(--texto)` con 2,5 px de grosor. Sobre una letra
     de 13 px eso no es un contorno: es un borrón negro donde debería poner
     «tú». Se vio en una captura, no leyendo el código. */
  stroke: none;
}

.rayo {
  stroke-width: 2.5;
  stroke-linecap: round;
  /* El rayo se DIBUJA desde la fuente hasta donde llega, se queda un instante y
     se va. El primer intento era un trazo corto viajando por la línea, y en
     una captura quieta parecía confeti repartido por el lienzo: nada indicaba
     que aquello saliera de la fuente. Con el trazo creciendo desde el origen,
     el dibujo cuenta lo que pasa hasta congelado. */
  stroke-dasharray: var(--largo, 100);
  stroke-dashoffset: var(--largo, 100);
  animation: rayo-sale 2s ease-out infinite;
  animation-delay: var(--retardo, 0s);
}
.rayo--fotones { stroke: var(--dec-beta-mas); color: var(--dec-beta-mas); }
.rayo--beta { stroke: var(--dec-beta-menos); }
.rayo--alfa { stroke: var(--dec-alfa); stroke-width: 3.5; }

/* Lo que se para lleva además menos opacidad: el color por sí solo no puede
   ser lo que distinga «llega» de «no llega». */
.rayo--detenido { opacity: 0.75; }

@keyframes rayo-sale {
  0% { stroke-dashoffset: var(--largo, 100); opacity: 0; }
  12% { opacity: 1; }
  45% { stroke-dashoffset: 0; opacity: 1; }
  82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Quien pide menos movimiento ve la escena QUIETA Y ENTERA, no un fotograma
   suelto. Hace falta un `animation: none` propio: la regla general de base.css
   acorta las animaciones a 0,01 ms, y eso congelaría el último fotograma — que
   aquí es el trazo fuera de su línea, o sea un rayo invisible. */
@media (prefers-reduced-motion: reduce) {
  .rayo {
    animation: none;
    /* Las tres líneas hacen falta. Sin `animation: none` propio, la regla
       general de base.css acorta la animación a 0,01 ms y deja congelado el
       último fotograma; y sin devolver el trazo a su sitio —dasharray sin
       huecos y offset a cero— el rayo se queda desplazado fuera de su línea, o
       sea INVISIBLE. Quien pide menos movimiento tiene que ver la escena
       quieta y entera, no una escena en blanco. */
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.escena-aviso { margin-top: 0.8rem; }

.escena-leyenda {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 0.85rem;
  color: var(--texto-2);
}
.escena-leyenda__fila::before {
  content: '';
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-inline-end: 0.4rem;
}
.escena-leyenda__fila--fotones::before { background: var(--dec-beta-mas); }
.escena-leyenda__fila--beta::before { background: var(--dec-beta-menos); }
.escena-leyenda__fila--alfa::before { background: var(--dec-alfa); }

/* --- El muñequito, que es un control y no un adorno ---
   Se arrastra para cambiar la distancia, así que tiene que ANUNCIARSE como
   agarrable: sin el cursor, nadie descubre que se puede mover. La zona de
   agarre es un rectángulo invisible y grande, porque los palotes son líneas de
   dos píxeles y en una pantalla táctil habría que acertarle a un pelo.
   `touch-action: none` va SOLO en la figura y no en el lienzo: puesto en el
   lienzo entero, arrastrar la página hacia abajo por encima del dibujo dejaría
   de desplazar la página en un móvil. */
.escena__figura {
  cursor: grab;
  touch-action: none;
}
.escena__figura--arrastrando { cursor: grabbing; }
.escena__agarre { fill: transparent; stroke: none; }

/* El anillo de foco va en azul, como en todo el sitio: es convención propia del
   teclado y no entra en el reparto de color de los datos (ver tokens.css). */
.escena__figura:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: 6px;
}

.escena-arrastre { margin-top: 0.5rem; }

/* --- Situaciones reales ---
   Las calculadas y las citadas tienen que distinguirse de un vistazo, porque la
   diferencia entre «esto lo deducimos» y «esto lo publicó alguien» es el
   contenido de la sección, no un detalle. La marca va arriba, con texto, y NO
   solo por color: el color aquí ya está repartido y un matiz nuevo no se leería
   (ver la nota de la paleta en tokens.css). */
.seccion-escenarios { margin-top: 1.25rem; }

/* --- La regla de dosis ---
   Dos carriles que NUNCA se funden, porque son dos magnitudes distintas: el de
   arriba en gray (lo que la página calcula y lo que se midió en los accidentes)
   y el de abajo en sievert (lo publicado de pruebas médicas y del fondo). El
   porqué está en `src/ui/regla-dosis.js`. */
.seccion-regla { margin-top: 1.25rem; }

/* LA ESCALERA BAJA, NO CRUZA, y el porqué está en `src/ui/regla-dosis.js`: el
   ancho de una pantalla es fijo y las marcas se amontonan en dos de las once
   décadas del eje, así que en horizontal los rótulos se pisan hagan lo que
   hagan. Hacia abajo el sitio es todo el que haga falta. */
.escalera {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.escalera-carril__titulo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-2);
  margin: 0 0 0.8rem;
}

/* El alto lo pone el JavaScript, porque depende de cuánto haya habido que
   empujar los rótulos para que no se pisen. */
.escalera-pista {
  position: relative;
  /* Hueco a la izquierda del eje: ahí vive el marcador de «tú», y por eso no
     puede chocar nunca con los rótulos de las marcas, que van a la derecha. */
  padding-inline-start: 7.5rem;
}

.escalera-eje {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 7.5rem;
  width: 2px;
  background: var(--borde);
}

/* La marquita en el eje, a la altura DE VERDAD del dato. */
.escalera-tope {
  position: absolute;
  inset-inline-start: calc(7.5rem - 4px);
  width: 10px;
  height: 2px;
  background: var(--texto-3);
}
.escalera-tope--umbral { background: var(--texto); width: 14px; }

/* El palito que une la altura real con el rótulo cuando se ha tenido que
   empujar: se mueve la etiqueta, nunca el dato. */
.escalera-palito {
  position: absolute;
  inset-inline-start: calc(7.5rem + 8px);
  width: 1px;
  background: var(--borde);
}

.escalera-marca {
  position: absolute;
  inset-inline-start: calc(7.5rem + 14px);
  /* Centrado en su altura, que es lo que hace que el palito apunte al sitio. */
  transform: translateY(-50%);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: start;
  color: var(--texto-2);
  background: none;
  border: 0;
  padding: 0.1rem 0.2rem;
  max-width: calc(100% - 8rem);
}
/* Los umbrales no son pulsables —no tienen ficha— y se distinguen por peso. */
.escalera-marca--umbral { color: var(--texto); font-weight: 600; }

button.escalera-marca { cursor: pointer; }
button.escalera-marca:hover { color: var(--texto); text-decoration: underline; }
button.escalera-marca:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Dónde estás tú, en el mismo amarillo con que se señala lo elegido en todo el
   sitio. En su propio carril, a la izquierda del eje. */
.escalera-tu {
  position: absolute;
  inset-inline-start: 0;
  width: 7.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  padding-inline-end: 0.1rem;
  z-index: 2;
}
.escalera-tu__texto {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto);
  text-align: end;
  line-height: 1.2;
}
.escalera-tu__punto {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--marcador);
  border: 1px solid var(--marcador-halo);
}

/* Las quince fichas, recogidas: llevan las citas y las explicaciones de cada
   caso, así que no se borran — pero dejan de abrir con un muro. */
.fichas-situaciones > summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--texto-2);
  margin-top: 0.5rem;
}
.fichas-situaciones > summary:hover { color: var(--texto); }

/* El rótulo de «tú» sí va en horizontal: es el único de su carril, no tiene con
   quién chocar, y en horizontal se lee de un vistazo, que es justo lo que se le
   pide. Se centra sobre su línea sin empujar nada, porque va posicionado. */
.regla-tu__texto { position: absolute; inset-block-end: 13.7rem; }

.escenarios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.9rem;
  margin: 0.7rem 0 1.2rem;
}

.escenario {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie-2);
}

.escenario__marca {
  align-self: start;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--borde-fuerte);
  color: var(--texto-2);
}
.escenario__marca--calculado {
  border-color: var(--acento);
  color: var(--acento);
  background: var(--acento-suave);
}

.escenario__nombre {
  font-size: 0.98rem;
  margin: 0.3rem 0 0;
}
.escenario__anio {
  font-size: 0.78rem;
  color: var(--texto-3);
}
.escenario__cifra {
  font-family: var(--fuente-datos);
  font-size: 1.25rem;
  color: var(--texto);
  margin: 0.35rem 0 0.1rem;
}
.escenario__segunda {
  font-size: 0.9rem;
  color: var(--texto-2);
}
.escenario__detalle {
  font-size: 0.85rem;
  color: var(--texto-2);
  margin: 0;
}
.escenario__cita {
  font-size: 0.75rem;
  color: var(--texto-3);
  margin-top: auto;
  padding-top: 0.5rem;
}
.escenario__boton { align-self: start; margin-top: 0.6rem; }

/* La que está puesta en los controles se marca con el mismo amarillo con que
   se señala lo elegido en todo el sitio. */
.escenario--puesto {
  border-color: var(--marcador);
  box-shadow: inset 0 0 0 1px var(--marcador);
}

.escenarios__titulo {
  font-size: 1rem;
  margin: 1.2rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
}

/* --- Deslizadores logarítmicos --- */
.control-log { margin-top: 1rem; }
.control-log__etiqueta {
  display: block;
  font-size: 0.85rem;
  color: var(--texto-2);
  margin-bottom: 0.35rem;
}
/* Con la columna estrecha (720–950 px en el Simulador) el deslizador se quedaba
   en 40 px al lado de la casilla: ahora, si no le caben 10 rem, la casilla baja
   a la línea siguiente y el deslizador ocupa todo el ancho. */
.control-log__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 0.75rem;
}
.control-log__deslizador { flex: 1 1 10rem; min-width: 0; }
.control-log__valor {
  font-family: var(--fuente-datos);
  font-size: 0.95rem;
  color: var(--texto);
  /* Ancho fijo para que el número no empuje al deslizador al cambiar de
     prefijo: sin esto, pasar de «999 mg» a «1,00 g» daba un salto lateral. */
  min-width: 6.5ch;
  text-align: end;
}

/* --- Actividad --- */
.actividad {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
}
.actividad__titulo {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-3);
  margin: 0 0 0.2rem;
}
.actividad__valor {
  font-family: var(--fuente-datos);
  font-size: 1.6rem;
  color: var(--texto);
  margin: 0;
}
.actividad__porgramo {
  font-size: 0.85rem;
  color: var(--texto-2);
  margin: 0.1rem 0 0.5rem;
}

.enlace-modulo {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--acento);
}

/* --- Las dos cifras: la tasa y el acumulado ---
   Van una al lado de la otra a propósito. Confundirlas es el error que este
   módulo existe para deshacer, y verlas juntas —con la unidad de cada una
   cantando— hace la diferencia evidente sin tener que explicarla. */
.cifras-dosis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.cifra {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie-2);
}
.cifra__etiqueta {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-3);
}
.cifra__valor {
  font-family: var(--fuente-datos);
  font-size: 2rem;
  line-height: 1.15;
  color: var(--texto);
}
.cifra__nota {
  font-size: 0.8rem;
  color: var(--texto-2);
}
/* El acumulado es la cifra que la gente se lleva a casa: lleva el acento. */
.cifra--acumulado { border-color: var(--acento); }

.cifras-dosis__magnitud {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.85rem;
  color: var(--texto-2);
}

/* --- El veredicto ---
   Contesta «¿esto es mucho?» pegado a las cifras y en tamaño legible, que es
   donde se hace la pregunta. Antes estaba tres párrafos más abajo en gris
   pequeño. No se distingue por COLOR: el de este sitio ya está repartido entre
   las familias de decaimiento y el amarillo de lo elegido (ver tokens.css), así
   que cuando hay umbral superado lo que cambia es el peso y una raya al lado. */
.veredicto {
  margin: 0.9rem 0 0;
  font-size: 1.05rem;
  color: var(--texto);
}
.veredicto--umbral {
  font-weight: 600;
  padding-inline-start: 0.7rem;
  border-inline-start: 3px solid var(--texto);
}
.veredicto__matiz {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--texto-2);
}

/* --- Desglose por línea --- */
.desglose { margin-top: 1.1rem; }
.desglose summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--texto-2);
}
.desglose summary:hover { color: var(--texto); }
/* La tabla tiene cuatro columnas y en un móvil no cabe. Se le da su propio
   desplazamiento horizontal en vez de dejar que empuje la página entera: lo que
   nunca debe pasar es que el texto de al lado se salga de la pantalla. */
.desglose__envoltorio { overflow-x: auto; }

.desglose__tabla {
  width: 100%;
  min-width: 22rem;
  border-collapse: collapse;
  margin-top: 0.6rem;
  font-family: var(--fuente-datos);
  font-size: 0.85rem;
}
.desglose__tabla th {
  text-align: start;
  font-family: var(--fuente);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto-3);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--borde);
}
.desglose__tabla td {
  padding: 0.25rem 0.6rem 0.25rem 0;
  color: var(--texto-2);
  border-bottom: 1px solid var(--borde);
}
.desglose__tabla tr td:first-child { color: var(--texto); }

/* --- Lo que no te alcanza --- */
.no-llega { margin-top: 1.2rem; }
.no-llega__titulo {
  font-size: 0.95rem;
  margin: 0 0 0.4rem;
}
.no-llega__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0.25rem 0;
  font-size: 0.85rem;
  color: var(--texto-2);
}
/* El punto de color es el MISMO que en la carta de núclidos y en el diagrama
   del blindaje: un color significa lo mismo en todo el sitio. */
.no-llega__tipo::before {
  content: '';
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-inline-end: 0.4rem;
}
.no-llega__fila--alfa .no-llega__tipo::before { background: var(--dec-alfa); }
.no-llega__fila--beta .no-llega__tipo::before { background: var(--dec-beta-menos); }
.no-llega__tipo { color: var(--texto); font-weight: 600; }

/* --- Comparaciones citadas --- */
.comparaciones {
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
}
.comparaciones__titulo {
  font-size: 0.95rem;
  margin: 0 0 0.4rem;
}
.comparaciones__fila {
  margin: 0.3rem 0;
  font-size: 0.88rem;
  color: var(--texto-2);
}

.avisos-dosis {
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
  display: grid;
  gap: 0.5rem;
}

/* --- La letra pequeña, recogida ---
   Lo de dentro es lo que hace honesto al módulo y no se borra: se pliega. Ver
   la nota larga en `src/ui/resultado-dosis.js`, que explica qué se pliega y
   qué NO —la magnitud se queda fuera, pegada a las cifras, porque es la
   etiqueta del número y no letra pequeña—.

   El rótulo se deja con aspecto de acción y no de nota: es lo único de esta
   tarjeta en lo que hay que pulsar, y si pareciera un párrafo más nadie lo
   abriría. */
.saber-mas {
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
}
.saber-mas > summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--texto-2);
}
.saber-mas > summary:hover { color: var(--texto); }

/* Una tarjeta entera que se pliega: su título es el rótulo del pliegue, con un
   triángulo delante (5 de octubre de 2026: «Cómo se simula» de la cámara). */
.tarjeta-plegable > summary {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}
.tarjeta-plegable > summary::-webkit-details-marker { display: none; }
.tarjeta-plegable > summary::before {
  content: "▸";
  color: var(--texto-3);
  transition: transform 0.15s;
}
.tarjeta-plegable[open] > summary::before { transform: rotate(90deg); }
.tarjeta-plegable > summary .tarjeta__titulo { margin-bottom: 0; }
.tarjeta-plegable[open] > summary { margin-bottom: 0.6rem; }
.tarjeta-plegable > summary:hover .tarjeta__titulo { color: var(--texto); }

/* Un pliegue cuyo rótulo es el TITULAR, no letra pequeña. Lo pide la nota del
   hierro-níquel del Módulo 3: ahí el rótulo es la corrección misma —«no, el
   máximo no está en el hierro-56»— y lo plegado es su demostración. Con el
   tamaño de letra pequeña por defecto, la corrección se leería como una nota al
   pie, que es justo lo contrario de lo que es. */
.saber-mas--titular > summary {
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
}

/* Dentro del pliegue, el primer bloque no repite la raya: ya la pone el
   propio `.saber-mas` justo encima del rótulo. */
.saber-mas[open] > .avisos-dosis:first-of-type,
.saber-mas[open] > .no-llega:first-of-type { border-top: none; padding-top: 0; }