/* ═══════════════════════════════════════════════════════════
   cadena-identificar.css — Estilos EXCLUSIVOS del minijuego
   cadena-identificar.
   Elemental W · Fisica/minijuegos/cadena-identificar/

   El chrome (insignia, botón Entrar, overlay) y los estilos que
   comparte con arrastrar-numero/elegir-formula/leer-grafica
   (bandeja base, chip base, pulso, shake, .fis-practica__pregunta)
   están en ../_compartido/minijuegos-widgets.css y en
   leer-grafica/leer-grafica.css — no se duplican aquí.

   El dibujo de la propia gráfica (.fis-exp-grafica*) tampoco vive
   aquí: sigue en Fisica/css/fisica-cinematica.css, compartido con
   el modo Aprendizaje y con leer-grafica (ver nota de autonomía
   del dibujante en cadena-identificar.js).

   Lo exclusivo de ESTE minijuego es la bandeja de opciones de
   TEXTO — a diferencia de arrastrar-numero/leer-grafica (chips
   cuadrados de un solo dígito), aquí el número de opciones varía
   entre rondas (2 en modo "operación", 3 en modo "identificar") y
   el texto de cada una puede ser largo ("Aceleración — a(t)"), así
   que necesita el mismo tipo de bandeja en columna que
   elegir-formula --formula, pero con su propia clase para no
   depender del CSS de otro minijuego.
═══════════════════════════════════════════════════════════ */

.fis-practica__opciones--cadena {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: min(340px, 100%);
  min-width: 0;
}

.fis-practica__chip--cadena {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 52px;
  padding: 12px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-family: var(--ewf-font-lectura);
  font-size: 1rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
}
.fis-practica__chip--cadena:active:not(:disabled) { cursor: pointer; }

/* En modo "operación" solo hay 2 opciones fijas ("Derivar" /
   "Integrar") — se ven mejor una junto a otra que apiladas, así que
   cuando la bandeja tiene exactamente 2 chips se vuelve fila en vez
   de columna. En modo "identificar" (3 opciones de magnitud, texto
   más largo) sigue en columna vía la regla de arriba. */
.fis-practica__opciones--cadena:has(.fis-practica__chip--cadena:nth-child(2):last-child) {
  flex-direction: row;
  flex-wrap: wrap;
}
.fis-practica__opciones--cadena:has(.fis-practica__chip--cadena:nth-child(2):last-child) .fis-practica__chip--cadena {
  flex: 1 1 120px;
}