/* ===========================================================================
   SISTEMA DE DISEÑO — los componentes que se repiten en varios módulos
   (C6 de la revisión, 8 de octubre de 2026; propuesta 4.4 del diseñador).

   POR QUÉ. Casi todos los fallos de contraste de la revisión eran regresiones
   de componentes COPIADOS con otro color (el de Tomi, del 7 de octubre, volvió
   a usar --acento). El segmentado y el Tomi de la página estaban dos veces,
   iguales, en reactor.css y en detectores.css; había tres «números de paso» y
   cuatro maneras de marcar lo seleccionado. Aquí cada uno está UNA vez: un
   arreglo se hace en un solo sitio.

   Carga después de base.css y antes de componentes.css y de la hoja de cada
   módulo, que pueden ajustar el tamaño o la colocación, pero no los colores.

   LAS REGLAS:
   1. Escalas. Letra: --fs-* (tokens.css, B3; nada por debajo de 12 px).
      Espacios: --esp-1 … --esp-6 = 4, 8, 12, 16, 24 y 32 px.
   2. Lo seleccionado se marca de CUATRO maneras, y ninguna más (G6):
      - AMARILLO (--marcador, borde de 2 px): lo que está CARGADO en el
        instrumento. Los núclidos de Átomos y Defecto, las muestras de la
        Cámara y el estante de Detectores. Va en la hoja de cada módulo, como
        el marcador de la carta de núclidos.
      - SEGMENTADO: elevado y neutro (.selector-vista, .segmentado). Para
        elegir UNA opción entre pocas: el modo, la calidad, la vista, el medio.
      - FICHAS de opción múltiple o de un catálogo: tinte azul con
        --acento-texto (.chip).
      - PESTAÑAS: subrayado (.pestanas).
   3. Botones: el secundario (.boton), el principal (UNO por pantalla), el
      tenue y el pequeño de flecha (.boton-paso). Lo desactivado, con una sola
      opacidad: 0,5. Al pulsar, baja 1 px.
   4. Avisos: .aviso, con borde izquierdo de 3 px y cinco variantes.
   5. Número de paso: un círculo de 28 px, azul suave.
   =========================================================================== */

/* --- 3. 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); }
/* B8 de la revisión: había cinco opacidades distintas para lo desactivado. Una
   sola para todos los botones, y una respuesta común al pulsar. */
.boton:disabled { opacity: 0.5; cursor: not-allowed; }
.boton:disabled:hover:not(.boton--tenue, .boton--principal) { background: var(--superficie-2); border-color: var(--borde); }
.boton--tenue:disabled:hover { background: transparent; }
.boton:active:not(:disabled) { transform: translateY(1px); }
/* EL BOTÓN PRINCIPAL, una sola regla para todo el sitio (7 de octubre de 2026).
   Había cuatro: la del Simulador, la de Detectores, la de la página 404 y la de
   Tomi, que usaba --acento y en oscuro daba 3,64:1 con el blanco. Ahora todas
   salen de --boton-principal (tokens.css), igual en los dos temas: 5,25:1. La
   segunda línea del selector evita que .boton:hover lo pinte de gris, con el
   texto blanco, al pasar por encima de uno desactivado. */
.boton--principal,
.boton--principal:disabled:hover { background: var(--boton-principal); border-color: var(--boton-principal); color: #fff; font-weight: 600; }
.boton--principal:hover:not(:disabled) { background: var(--boton-principal-hover); border-color: var(--boton-principal-hover); }

/* El botón pequeño de una flecha o un signo (− y + de los contadores, las
   notas del tutorial del Reactor, el zoom de la carta). */
.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); }
/* Antes 0,35 aquí y en el tutorial del Reactor: la misma opacidad que .boton. */
.boton-paso:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- 2. Segmentado ---------------------------------------------------------
   Antes había dos: el elevado y neutro (.selector-vista: la calidad, «Capas /
   Nube», la masa en la aguja) y uno con tinte azul (.segmentado: los modos del
   Reactor y de Detectores, «Aire / Vacío», el reloj de medida), copiado en
   reactor.css y en detectores.css. El mismo control se veía distinto en cada
   módulo. Ahora los dos nombres dan el mismo: elevado y neutro.
   B5 de la revisión: con radio de 100 px, al partirse en dos líneas la píldora
   se volvía un óvalo. Es un rectángulo redondeado que, si no cabe, pasa
   opciones a la línea siguiente; una opción más ancha que la pantalla parte su
   texto dentro de su propio botón. */
.selector-vista,
.segmentado {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
}
.selector-vista { align-self: flex-end; }
.selector-vista__boton,
.segmentado button {
  border: none;
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-size: 0.86rem;
  padding: 0.28rem 0.8rem;
  border-radius: var(--r-m);
  cursor: pointer;
}
.selector-vista__boton:hover,
.segmentado button:hover { color: var(--texto); }
.selector-vista__boton[aria-pressed="true"],
.segmentado button[aria-pressed="true"] {
  background: var(--superficie);
  color: var(--texto);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(28 27 25 / 10%), inset 0 0 0 1px var(--borde);
}
.selector-vista__boton:disabled,
.segmentado button:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- 2. Fichas -------------------------------------------------------------
   Para elegir entre varias de una lista que no es «lo cargado»: los retos de
   Detectores y los de «Predice y comprueba». Tinte azul (G6); antes los de
   Detectores iban en amarillo, el color de lo cargado en el instrumento. */
.chip,
.det-retos__chip,
.retos-modulo__chip {
  min-width: 2.75rem; min-height: 2.75rem; padding: 0.25rem 0.6rem;
  border: 1px solid var(--borde); border-radius: 100px;
  background: var(--superficie-2); color: var(--texto-2);
  font: inherit; font-size: var(--fs-pequeno); cursor: pointer;
}
:is(.chip, .det-retos__chip, .retos-modulo__chip):hover { border-color: var(--borde-fuerte); color: var(--texto); }
:is(.chip, .det-retos__chip, .retos-modulo__chip):focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
:is(.chip, .det-retos__chip, .retos-modulo__chip)[aria-pressed="true"] {
  border-color: var(--acento); background: var(--acento-suave); color: var(--acento-texto); font-weight: 600;
}
/* Hecho: una marca verde detrás del número. */
:is(.chip, .det-retos__chip, .retos-modulo__chip)[data-hecho="true"]::after { content: " ✓"; color: var(--estado-exito); font-weight: 700; }

/* --- 2. Pestañas -----------------------------------------------------------
   «Espectro · Pulsos · Conteo · Corriente» de Detectores. Subrayado. */
.pestanas,
.det-pestanas { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--borde); }
:is(.pestanas, .det-pestanas) button {
  border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--texto-2);
  font: inherit; font-size: 0.9rem; padding: 0.35rem 0.7rem; cursor: pointer;
}
:is(.pestanas, .det-pestanas) button:hover { color: var(--texto); }
:is(.pestanas, .det-pestanas) button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }
:is(.pestanas, .det-pestanas) button[hidden] { display: none; }

/* --- 4. Avisos ------------------------------------------------------------- */
.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); }
/* Las variantes (G16). Sin variante, es --info. */
.aviso--info { border-inline-start-color: var(--acento); }
.aviso--atencion { border-inline-start-color: var(--marcador); }
.aviso--exito { border-inline-start-color: var(--estado-exito); }
.aviso--peligro { border-inline-start-color: var(--proton); }
.aviso--nota { border-inline-start-color: var(--borde-fuerte); }

/* --- 5. Número de paso -----------------------------------------------------
   Las cuentas de Defecto, la cadena del Conversor y «Qué les pasa a los
   neutrones» del Reactor tenían cada una el suyo (oscuro, amarillo, gris). */
.paso__num,
.paso-defecto__numero,
.conv-paso__numero,
.destino__numero {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento-texto);
  font-size: var(--fs-pequeno);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- El Tomi de la página --------------------------------------------------
   La nube que sale del átomo en el Reactor y Detectores (y los Tipos de
   reactor), que estaba copiada en reactor.css y detectores.css. El tamaño de
   la cara lo fija cada página con --tutor-cara; el texto y el pie de la nube
   también van en la hoja de cada una. */
.tutor { --tutor-cara: 160px; display: grid; grid-template-columns: minmax(0, 1fr) var(--tutor-cara); align-items: center; gap: 0.6rem; }
.tutor__nube {
  position: relative;
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.7rem 0.95rem;
  border: 2px solid var(--acento); border-radius: 20px;
  background: var(--superficie);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
  transition: border-color 0.3s;
}
/* El pico de la nube, hacia el átomo (dos triángulos: borde y relleno). */
.tutor__nube::before, .tutor__nube::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-top: 11px solid transparent; border-bottom: 11px solid transparent; transform: translateY(-50%);
}
.tutor__nube::before { right: -14px; border-left: 14px solid var(--acento); transition: border-left-color 0.3s; }
.tutor__nube::after { right: -10px; border-left: 11px solid var(--superficie); border-top-width: 9px; border-bottom-width: 9px; }
.tutor[data-tono="alerta"] .tutor__nube { border-color: var(--estado-peligro); }
.tutor[data-tono="alerta"] .tutor__nube::before { border-left-color: var(--estado-peligro); }
.tutor[data-tono="logro"] .tutor__nube { border-color: var(--estado-exito); }
.tutor[data-tono="logro"] .tutor__nube::before { border-left-color: var(--estado-exito); }
/* El átomo: las caras apiladas; solo se ve la activa, con un fundido. */
.tutor__atomo { position: relative; width: var(--tutor-cara); height: var(--tutor-cara); }
.tutor__atomo img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.tutor__atomo img.activa { opacity: 1; }
/* Al cambiar de cara, un saltito; con la fisión o el peligro, una sacudida. */
.tutor--cambio .tutor__atomo { animation: tutor-salto 0.45s ease-out; }
.tutor--cambio[data-expresion="fision"] .tutor__atomo, .tutor--cambio[data-expresion="peligro"] .tutor__atomo { animation: tutor-sacudida 0.5s ease-in-out; }
@keyframes tutor-salto { 0% { transform: translateY(0); } 35% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
@keyframes tutor-sacudida { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-3deg); } 40% { transform: translateX(6px) rotate(3deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .tutor--cambio .tutor__atomo { animation: none !important; } }