/* ===========================================================================
   Módulo 7 — Detectores y espectrometría (7 de octubre de 2026)
   ---------------------------------------------------------------------------
   Disposición (§4.1): en escritorio (≥ 1100 px), la mesa y las señales en dos
   columnas 55/45; debajo, el estante (fuentes | detectores, como en la mesa)
   y la lupa. Entre 700 y 1099 px, una columna con la mesa arriba. En el
   móvil, una columna, con el espectro de al menos 260 px de alto.

   Los lienzos (mesa, gráficos, lupa) son OSCUROS en los dos temas: es un
   recurso visual, no una imposición del tema (§4.1). Sus colores de datos
   (alfa rojo, beta azul, fotón verde, interacción ámbar, neutrón gris y
   hueco) son los mismos de la cámara de niebla y del Simulador.
   ========================================================================= */

:root {
  /* C6 de la revisión (8 de octubre de 2026): los colores de estado comunes
     (tokens.css), que el Reactor tenía copiados con los mismos valores. */
  --d-rojo: var(--estado-peligro);
  --d-verde: var(--estado-exito);
  --d-ambar-texto: var(--estado-atencion);
  --d-lienzo: #0d1117;
  --d-alfa: #ff4b4b;
  --d-beta: #4a9dff;
  --d-foton: #3ddc7a;
  --d-neutron: #c9ccd1;
  /* TEXTO de las insignias «evaluado» y «ausente», con su color en cada tema
     (7 de octubre de 2026): en claro el verde #1f9d63 daba 3,46:1 sobre blanco
     y el rojo #e0453a, 4,13:1. Ahora 5,36:1 y 5,44:1; en oscuro, 7,18:1 el
     verde de siempre y 5,75:1 el rojo #f06a5f (antes 4,21:1). */
  --d-insignia-evaluado: #157a4c;
  --d-insignia-ausente: #c0392b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --d-insignia-evaluado: #2bbd7a; --d-insignia-ausente: #f06a5f; }
}
:root[data-tema="oscuro"],
:root[data-tema-defecto="oscuro"]:not([data-tema="claro"]) { --d-insignia-evaluado: #2bbd7a; --d-insignia-ausente: #f06a5f; }

.contenedor--detectores { max-width: 1520px; }

/* --- Cabecera y Tomi --- */
.det-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  align-items: end;
  gap: 1rem 2rem;
  margin-bottom: 1rem;
}
.det-subtitulo { font-size: 1.12rem; font-weight: 600; color: var(--texto); margin: -0.3rem 0 0.4rem; }
.det-entrada { max-width: 78ch; color: var(--texto-2); font-size: 1rem; }
.det-modo { margin-top: 0.3rem; }

/* El segmentado y la nube de Tomi (.tutor) están en sistema.css desde la
   ronda 6 (C6): eran iguales aquí y en reactor.css. Aquí, lo propio: la cara
   de 140 px, el texto y el pie de la nube. */
.tutor { --tutor-cara: 140px; }
.tutor__etiqueta { font-size: var(--fs-min); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-3); }
.tutor__texto { margin: 0; font-size: 0.92rem; line-height: 1.45; min-height: 4lh; }
.tutor__pie { display: flex; align-items: center; gap: 0.5rem; min-height: 1.9rem; }
.tutor__porque[hidden] { display: inline-flex !important; visibility: hidden; }
.tutor__porque { font-size: 0.8rem; padding: 0.25rem 0.7rem; }
@media (max-width: 1000px) {
  .det-cabeza { grid-template-columns: minmax(0, 1fr); }
  .tutor { --tutor-cara: 110px; }
}
@media (max-width: 560px) {
  .tutor { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 30px; }
  .tutor__atomo { position: absolute; top: 0; right: 4px; width: 70px; height: 70px; z-index: 1; }
  .tutor__nube { padding-right: 4.6rem; }
  .tutor__nube::before, .tutor__nube::after { display: none; }
  .tutor__texto { min-height: 6lh; }
}

.det-dialogo {
  max-width: min(560px, calc(100vw - 32px));
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-l);
  background: var(--superficie);
  color: var(--texto);
  padding: 1.1rem 1.3rem;
}
.det-dialogo::backdrop { background: rgb(0 0 0 / 0.5); }
.det-dialogo h2 { font-size: 1.1rem; margin-top: 0; }
.det-dialogo p { color: var(--texto-2); line-height: 1.6; }

/* --- Rejilla principal --- */
.det-lab {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}
@media (max-width: 1099px) { .det-lab { grid-template-columns: minmax(0, 1fr); } }
.det-lab > .tarjeta { min-width: 0; }
.tarjeta.det-embudo, .tarjeta.det-analisis, .tarjeta.det-archivo, .tarjeta.det-matriz, .tarjeta.det-ficha, .tarjeta.det-retos { margin-bottom: 1rem; }

.det-tarjeta-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; margin-bottom: 0.6rem; }
.det-tarjeta-cabeza .tarjeta__titulo { margin-bottom: 0; }
.det-sello { font-size: var(--fs-nota); color: var(--texto-3); font-style: italic; }

.det-lienzo canvas { display: block; width: 100%; border-radius: var(--r-m); background: var(--d-lienzo); touch-action: pan-y; }
/* B51: algo más baja (antes 250–330 px): el 40 % de arriba estaba vacío. */
.det-lienzo--mesa canvas { height: clamp(235px, 22vw, 305px); }
.det-lienzo--grafico canvas { height: clamp(260px, 22vw, 330px); touch-action: none; }
.det-lienzo--lupa canvas { height: clamp(220px, 18vw, 270px); }
#det-mesa[data-encima="true"] { outline: 2px dashed var(--marcador); outline-offset: 2px; }

/* --- Mandos de la mesa --- */
.det-mandos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.7rem 1rem;
  margin-top: 0.8rem;
}
.det-campo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.det-campo[hidden] { display: none !important; }
.det-campo label, .det-campo__rotulo { font-size: 0.8rem; font-weight: 600; color: var(--texto-2); }
.det-campo__fila { display: flex; align-items: center; gap: 0.5rem; }
.det-campo__fila input[type="range"] { flex: 1; min-width: 0; accent-color: var(--acento); }
.det-campo--boton { justify-content: flex-end; }
/* B51 (DT3): «Retirar la fuente» parecía un desplegable a lo ancho. Ahora es un
   botón tenue a su medida, con su signo: ✕ para retirar, + para volver a ponerla. */
.det-campo--boton .det-retirar { align-self: flex-start; width: auto; }
.det-retirar::before { content: "✕"; margin-inline-end: 0.45em; font-weight: 700; }
.det-retirar[aria-pressed="true"]::before { content: "+"; }
.det-numero {
  width: 5.5em;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  background: var(--superficie-2);
  color: var(--texto);
  font-family: var(--fuente-datos);
  font-size: 0.9rem;
}
.det-unidad, .det-valor { font-family: var(--fuente-datos); font-size: 0.88rem; color: var(--texto); white-space: nowrap; }
.det-valor { min-width: 7.5em; text-align: right; }
.det-select {
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-size: 0.88rem;
  max-width: 100%;
}
.det-nota { font-size: 0.8rem; line-height: 1.5; color: var(--texto-3); margin: 0.35rem 0 0; }
#det-fuente-fuera[aria-pressed="true"] { background: var(--marcador-suave); border-color: var(--marcador); }

/* --- Adquisición --- */
.det-adquisicion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--borde);
}
/* .boton--principal: el de componentes.css (una sola regla desde el 7 de octubre de 2026). */
.det-iniciar { min-width: 7.5em; justify-content: center; }
.det-adq-campo { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--texto-2); }
#det-sonido[aria-pressed="true"] { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-texto); }
.det-tiempos { font-size: 0.84rem; color: var(--texto-2); min-width: 15em; }
.det-barra-progreso { flex-basis: 100%; height: 4px; border-radius: 2px; background: var(--superficie-2); overflow: hidden; }
.det-barra-progreso span { display: block; height: 100%; width: 0; background: var(--acento); transition: width 0.2s linear; }
.det-aviso-vivo { flex-basis: 100%; margin: 0; min-height: 1.35em; font-size: 0.84rem; color: var(--d-ambar-texto); }

/* --- Lecturas --- */
.det-lecturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}
.det-lecturas:empty { min-height: 128px; }
.det-dato {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--superficie-2);
  min-width: 0;
}
.det-dato__rotulo { font-size: var(--fs-min); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-3); }
.det-dato__valor { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; font-size: 1.08rem; font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.det-dato__sub { font-size: var(--fs-min); color: var(--texto-3); }
.det-dato__valor--texto { font-family: var(--fuente); font-variant-numeric: normal; }
/* B51 (DT5): cuentas y tasa son la lectura; las otras fichas, el contexto. Van
   a doble ancho y con la cifra grande, como en la pantalla de un contador. */
.det-dato--principal { grid-column: span 2; border-color: var(--borde-fuerte); }
.det-dato--principal .det-dato__valor { font-size: 1.6rem; line-height: 1.15; }
.det-dato--aviso { border-color: var(--marcador); background: var(--marcador-suave); }
.det-dato--alerta { border-color: var(--d-rojo); }

/* --- Pestañas y herramientas del gráfico --- */
/* Las pestañas (.det-pestanas) están en sistema.css desde la ronda 6 (C6). */
.det-grafico__titulo { margin: 0 0 0.35rem; font-size: 0.85rem; color: var(--texto-2); min-height: 1.3em; }
.det-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0.55rem; }
.det-casilla { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.84rem; color: var(--texto-2); cursor: pointer; }
.det-casilla input { accent-color: var(--acento); }
.det-herramientas .segmentado button { padding: 0.22rem 0.6rem; }
.det-roi { margin-top: 0.6rem; font-size: 0.85rem; color: var(--texto-2); }
.det-roi:empty { display: none; }
.det-roi .datos__fila { padding: 0.3rem 0; }
.det-tabla-datos { margin-top: 0.6rem; }
.det-tabla-datos table { max-height: 18rem; }
#det-tabla-grafico { max-height: 18rem; overflow: auto; }

/* --- Estante --- */
.tarjeta.det-estante { margin-bottom: 1rem; }
.det-estante__columnas { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem 2.6rem; }
/* La barra que separa las fuentes de los detectores (petición de los autores,
   8 de octubre de 2026): vertical en medio del hueco entre columnas y, con las
   columnas apiladas, horizontal encima de los detectores. */
.det-estante__columnas::before {
  content: ""; position: absolute; top: 0.15rem; bottom: 0.15rem; left: 50%; width: 4px; margin-left: -2px;
  border-radius: 2px; background: linear-gradient(var(--borde), var(--acento) 50%, var(--borde)); opacity: 0.8;
}
@media (max-width: 760px) {
  .det-estante__columnas { grid-template-columns: minmax(0, 1fr); }
  .det-estante__columnas::before { content: none; }
  .det-estante__columnas > div + div::before {
    content: ""; display: block; height: 4px; margin: 0 0 1rem; border-radius: 2px;
    background: linear-gradient(90deg, var(--borde), var(--acento) 50%, var(--borde)); opacity: 0.8;
  }
}
@media (max-width: 560px) {
  .det-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .det-tarjeta { grid-template-columns: minmax(0, 1fr); padding: 0.35rem 0.45rem; }
  .det-tarjeta__icono { grid-row: auto; }
}
.det-estante__subtitulo { font-size: 0.95rem; margin: 0 0 0.4rem; }
.det-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.35rem; align-items: stretch; }
.det-tarjetas:empty { min-height: 330px; }
.det-grupo { grid-column: 1 / -1; margin: 0.4rem 0 0.05rem; font-size: var(--fs-min); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.det-grupo:first-child { margin-top: 0; }
.det-tarjeta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.1rem 0.55rem;
  text-align: start;
  padding: 0.4rem 0.6rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.det-tarjeta:hover { background: var(--superficie-hover); border-color: var(--borde-fuerte); }
.det-tarjeta[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);
}
.det-tarjeta__icono { grid-row: span 2; display: flex; gap: 2px; }
/* 1.8 beta: el pictograma del detector, con los puntos de lo que ve debajo. */
.det-tarjeta__icono--detector { flex-direction: column; align-items: center; gap: 3px; }
.det-tarjeta__picto { display: block; width: 44px; height: 24px; flex: none; }
.det-tarjeta__puntos { display: flex; gap: 2px; }
.det-tarjeta__nombre { font-weight: 600; font-size: 0.88rem; color: var(--texto); }
.det-tarjeta__nota { font-size: var(--fs-nota); line-height: 1.35; color: var(--texto-2); }
/* B46: cada signo con la forma de su partícula (glifoParticula), coloreado
   con currentColor; ya no depende solo del color. */
.det-punto { display: inline-block; width: 14px; height: 10px; line-height: 0; }
.det-punto svg { display: block; width: 14px; height: 10px; }
.det-punto--alfa { color: var(--d-alfa); }
.det-punto--beta { color: var(--d-beta); }
.det-punto--foton { color: var(--d-foton); }
.det-punto--neutron { color: var(--d-neutron); }
.det-punto--luz { color: #8a5cff; }
/* La leyenda: qué radiación es cada color, en una fila que se parte entre signos. */
.det-estante__leyenda { margin: -0.3rem 0 0.9rem; padding: 0.5rem 0.75rem; border: 1px solid var(--borde); border-radius: var(--r-m); background: var(--superficie-2); font-size: var(--fs-nota); color: var(--texto-2); }
.det-estante__leyenda-intro { margin: 0 0 0.35rem; }
.det-estante__leyenda-lista { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.det-estante__leyenda-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.det-estante__leyenda-item strong { color: var(--texto); font-weight: 600; }

/* --- Lupa --- */
.det-lupa__mandos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-top: 0.6rem; }
.det-lupa__cadena { margin: 0.6rem 0 0.2rem; font-family: var(--fuente-datos); font-size: 0.82rem; color: var(--texto); line-height: 1.5; min-height: 3em; }
.det-lupa__pasos { margin: 0.2rem 0 0; padding-left: 1.2rem; font-size: 0.84rem; color: var(--texto-2); line-height: 1.5; min-height: 7.5em; }
.det-lupa__pasos li[data-activo="true"] { color: var(--texto); font-weight: 600; }
.det-lupa__pasos li[data-hecho="true"] { color: var(--texto-2); }

/* --- Embudo --- */
#det-embudo:empty { min-height: 260px; }
.det-embudo__fila {
  display: grid;
  grid-template-columns: minmax(10em, 15em) minmax(0, 1fr) minmax(7em, 9em);
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--borde);
  font-size: 0.86rem;
}
.det-embudo__fila:last-child { border-bottom: 0; }
.det-embudo__rotulo { color: var(--texto-2); }
.det-embudo__rotulo small { display: block; color: var(--texto-3); font-size: var(--fs-min); }
.det-embudo__barra { height: 12px; border-radius: 6px; background: var(--superficie-2); overflow: hidden; }
.det-embudo__barra span { display: block; height: 100%; background: var(--acento); border-radius: 6px; min-width: 2px; }
.det-embudo__valor { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; text-align: right; color: var(--texto); }
.det-embudo__tipos { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.78rem; color: var(--texto-3); margin-top: 0.5rem; }
@media (max-width: 560px) {
  .det-embudo__fila { grid-template-columns: minmax(0, 1fr) auto; }
  .det-embudo__barra { grid-column: 1 / -1; grid-row: 2; }
}

/* --- Análisis (avanzado) --- */
body.modo-basico .solo-avanzado { display: none !important; }
.det-analisis__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.det-bloque { border: 1px solid var(--borde); border-radius: var(--r-m); padding: 0.75rem 0.85rem; background: var(--superficie-2); min-width: 0; }
.det-bloque h3 { font-size: 0.95rem; margin: 0 0 0.5rem; }
.det-bloque .tabla-datos { font-size: 0.8rem; }
.det-bloque .tabla-datos td, .det-bloque .tabla-datos th { padding: 0.25rem 0.4rem; }
.det-bloque__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0.35rem 0; font-size: 0.84rem; }
.det-bloque__fila label { color: var(--texto-2); }
.det-error { color: var(--d-rojo); font-size: 0.82rem; }
.det-ok { color: var(--d-verde); font-size: 0.82rem; }
.det-insignia {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 100px;
  border: 1px solid var(--borde-fuerte);
  font-size: var(--fs-min);
  color: var(--texto-2);
  white-space: nowrap;
}
.det-insignia--evaluado { border-color: var(--d-insignia-evaluado); color: var(--d-insignia-evaluado); }
.det-insignia--derivado { border-color: var(--acento); color: var(--acento-texto); }
.det-insignia--ilustrativo { border-color: var(--d-ambar-texto); color: var(--d-ambar-texto); }
.det-insignia--ausente { border-color: var(--d-insignia-ausente); color: var(--d-insignia-ausente); }

/* --- Archivo --- */
.det-archivo__lista { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.det-archivo__fila {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem;
  padding: 0.4rem 0.6rem; border: 1px solid var(--borde); border-radius: var(--r-m);
  font-size: 0.84rem;
}
.det-archivo__fila[data-comparando="true"] { border-color: #ff8a3d; box-shadow: inset 3px 0 0 #ff8a3d; }
.det-archivo__nombre { flex: 1 1 18em; color: var(--texto); }
.det-archivo__acciones { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.det-archivo__acciones .boton { font-size: 0.8rem; padding: 0.22rem 0.6rem; }

/* --- Matriz --- */
.det-matriz__envoltura { overflow-x: auto; margin-top: 0.6rem; }
.det-matriz__tabla { border-collapse: collapse; font-size: 0.8rem; min-width: 760px; }
.det-matriz__tabla th, .det-matriz__tabla td { border: 1px solid var(--borde); padding: 0; text-align: center; }
.det-matriz__tabla thead th { padding: 0.35rem 0.3rem; font-weight: 600; color: var(--texto-2); writing-mode: horizontal-tb; }
.det-matriz__tabla tbody th { padding: 0.3rem 0.5rem; text-align: left; font-weight: 600; white-space: nowrap; position: sticky; left: 0; background: var(--superficie); z-index: 1; }
.det-matriz__celda {
  width: 100%; min-width: 4.4em; height: 2.6em; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 0.78rem; color: var(--texto); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.det-matriz__celda:hover { outline: 2px solid var(--acento); outline-offset: -2px; }
.det-matriz__celda[data-actual="true"] { outline: 2px solid var(--marcador); outline-offset: -2px; }
.det-matriz__celda b { font-size: 1rem; }
.det-matriz__celda small { color: var(--texto-3); font-size: var(--fs-min); }
.det-mc--energia { background: color-mix(in srgb, var(--d-verde) 22%, transparent); }
.det-mc--cuenta { background: color-mix(in srgb, var(--acento) 18%, transparent); }
.det-mc--corriente { background: color-mix(in srgb, #8a5cff 20%, transparent); }
.det-mc--poco { background: color-mix(in srgb, var(--marcador) 12%, transparent); }
.det-mc--no { background: transparent; color: var(--texto-3); }
.det-mc--nm { background: repeating-linear-gradient(45deg, transparent 0 5px, color-mix(in srgb, var(--texto-3) 14%, transparent) 5px 7px); color: var(--texto-3); }
.det-matriz__leyenda { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.6rem; font-size: 0.8rem; color: var(--texto-2); }
.det-matriz__leyenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.det-matriz__muestra { display: inline-block; width: 1.2em; height: 1.2em; border: 1px solid var(--borde); border-radius: 3px; }

/* --- Ficha --- */
.det-ficha__texto p { max-width: 90ch; color: var(--texto-2); line-height: 1.6; }
.det-ficha__sub { font-size: 1rem; margin: 1rem 0 0.4rem; }
.det-ficha__lista { color: var(--texto-2); line-height: 1.55; max-width: 90ch; }
#det-procedencia .tabla-datos { font-size: 0.8rem; }

/* --- Retos --- */
.det-retos__lista { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.8rem; }
/* Las fichas de los retos (.det-retos__chip) son las fichas comunes de
   sistema.css desde la ronda 6 (C6): azules (eran amarillas, el color de lo
   cargado en el instrumento) y de 44 px, el blanco de toque. */
.det-reto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 860px) { .det-reto { grid-template-columns: minmax(0, 1fr); } }
/* B1: dentro de la tarjeta «Retos» (H2 de 1,05 rem), el H3 no puede ser mayor. */
.det-reto h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.det-reto__objetivo { color: var(--texto-2); line-height: 1.55; }
.det-reto__pasos { list-style: none; padding: 0; margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.35rem; }
.det-reto__pasos li { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.9rem; color: var(--texto-2); }
.det-reto__pasos li::before { content: "○"; color: var(--texto-3); }
.det-reto__pasos li[data-hecho="true"] { color: var(--texto); }
.det-reto__pasos li[data-hecho="true"]::before { content: "●"; color: var(--d-verde); }
.det-reto__pregunta fieldset { border: 1px solid var(--borde); border-radius: var(--r-m); padding: 0.6rem 0.8rem; }
.det-reto__pregunta legend { font-weight: 600; padding: 0 0.3rem; }
.det-reto__pregunta label { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.25rem 0; cursor: pointer; font-size: 0.9rem; }
.det-reto__pregunta[data-bloqueada="true"] fieldset { opacity: 0.55; }
.det-reto__respuesta { margin-top: 0.6rem; padding: 0.6rem 0.8rem; border-radius: var(--r-m); border: 1px solid var(--borde); font-size: 0.9rem; line-height: 1.55; }
.det-reto__respuesta[data-bien="true"] { border-color: var(--d-verde); }
.det-reto__respuesta[data-bien="false"] { border-color: var(--d-rojo); }
.det-reto__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }

/* El texto que solo leen los lectores de pantalla ya está en base.css (.solo-lectores). */

/* Leyenda de las particulas de la mesa (pintarLeyendaParticulas): la forma y el
   color de cada una; las que lanza la fuente de ahora, resaltadas. */
.det-particulas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.25rem 1rem;
  margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--texto-2);
}
/* Alto reservado (medido): dos o tres columnas segun el ancho. */
.det-particulas:empty { min-height: 11.4rem; }
@media (min-width: 1000px) { .det-particulas:empty { min-height: 6.6rem; } }
/* B7 de la revisión: lo inactivo baja de tono (--texto-3), no de opacidad; solo
   el icono se apaga. Con opacidad 0,45 el texto quedaba a 2,1–3:1. */
.det-particulas__tipo { display: flex; align-items: center; gap: 0.5rem; color: var(--texto-3); }
.det-particulas__tipo--esta { color: var(--texto); }
.det-particulas__tipo svg { flex: none; opacity: 0.4; transition: opacity 0.6s ease; }
.det-particulas__tipo--esta svg { opacity: 1; }
.det-particulas__texto b { font-weight: 600; }
@media (max-width: 640px) {
  /* En el movil, dos columnas con el nombre; la frase sigue ahi para los lectores de pantalla (y en el title). */
  .det-particulas { grid-template-columns: 1fr 1fr; gap: 0.2rem 0.6rem; }
  .det-particulas:empty { min-height: 5.8rem; }
  .det-particulas__rasgo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .det-particulas__tipo svg { transition: none; } }