/* ===========================================================================
   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 --- */
.portada { max-width: 62ch; }
.portada__entrada { font-size: 1.15rem; color: var(--texto-2); }

.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; }
.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__visor { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 700px) {
  .laboratorio { grid-template-columns: minmax(0, 1fr); }
}

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

.nuclido-cabecera__texto { min-width: 0; }
.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;
}

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

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

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

.elemento__z {
  font-family: var(--fuente-datos);
  font-size: 0.55rem;
  line-height: 1;
  color: var(--texto-3);
}

.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: borde grueso y color de acento. No depende del color a
   secas — también cambia el grosor del borde y el peso del símbolo. */
.elemento[aria-current="true"] {
  border: 2px solid var(--acento);
  background: var(--acento-suave);
  box-shadow: 0 0 0 2px var(--acento-suave);
  z-index: 2;
}
.elemento[aria-current="true"] .elemento__simbolo { font-weight: 700; }
.elemento[aria-current="true"] .elemento__z { color: var(--acento); }

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

.carta-lienzo { display: block; cursor: crosshair; }

/* --- 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(--acento-suave);
  outline: 1px solid var(--acento);
}
.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; }

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

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

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