/**
 * fisica-multiples-dimensiones.css — Estilos de los elementos y de la
 * interacción nuevos del tema "Múltiples dimensiones" (vectores + tiro
 * parabólico, continuación 2D de Cinemática).
 * Elemental W · Fisica/css/
 *
 * Dos cosas nuevas viven aquí:
 *   1) Los extras del elemento "vector" cuando dibuja en 4 cuadrantes
 *      (componentes proyectadas, arco de ángulo) — el SVG en sí lo
 *      sigue dibujando fisica-renderer.js, esto solo da color/tipografía
 *      a las clases que ya trae.
 *   2) La interacción "chispa" (pregunta de opción múltiple con gancho,
 *      motor compartido: js/core/educativo/experiencias.js) — nueva,
 *      usada SOLO por este tema; ningún otro tema la declara todavía.
 *
 * Mismo criterio que fisica-cinematica.css: archivo aparte, solo AGREGA
 * reglas nuevas, se carga en fisica.html DESPUÉS de fisica-base.css y
 * fisica-cinematica.css.
 */

/* ── Extras del elemento "vector" en 4 cuadrantes ── */
.fis-exp-vector-svg .fis-vector-componente {
  stroke: var(--ewf-texto-3);
  stroke-width: 1.5;
  stroke-dasharray: 4, 3;
}

.fis-exp-vector-svg .fis-vector-angulo-arco {
  fill: none;
  stroke: var(--ewf-acento-simulador);
  stroke-width: 1.5;
}

.fis-exp-vector-svg .fis-vector-etiqueta-componente {
  font-family: var(--ewf-font-ui, var(--ewf-font-titulo));
  font-size: 11px;
  fill: var(--ewf-texto-2);
}

.fis-exp-vector-svg .fis-vector-etiqueta-angulo {
  font-family: var(--ewf-font-ui, var(--ewf-font-titulo));
  font-size: 11px;
  fill: var(--ewf-acento-simulador);
}

/* ── Interacción "chispa": pregunta de opción múltiple con gancho ──
   Aparece justo debajo de la burbuja de Chispa (elemento
   "dialogo-chispa"), como paso 1 de cada experiencia de este tema. No
   es calificada: cualquier opción desbloquea el avance, pero se marca
   cuál era la correcta y aparece una explicación breve. */
.fis-experiencia__chispa {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ew-space-2);
}

.fis-experiencia__chispa-opciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.fis-experiencia__chispa-opcion {
  text-align: left;
  border: 1.5px solid var(--ewf-linea);
  background: var(--ewf-papel);
  color: var(--ewf-texto-1);
  border-radius: var(--ew-radius-md);
  padding: 12px 16px;
  font-family: var(--ewf-font-lectura);
  font-size: 0.95rem;
  line-height: 1.35;
  cursor: pointer;
  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base),
    border-color var(--ew-transition-base),
    background-color var(--ew-transition-base);
}

.fis-experiencia__chispa-opcion:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--ewf-sombra-s);
  border-color: var(--ewf-acento-teoria);
}

.fis-experiencia__chispa-opcion:disabled {
  cursor: default;
  opacity: 0.75;
}

.fis-experiencia__chispa-opcion--correcta {
  border-color: var(--ew-color-exito, #2f9e5c);
  background: color-mix(in srgb, var(--ew-color-exito, #2f9e5c) 14%, var(--ewf-papel));
  color: var(--ewf-texto-1);
  opacity: 1;
}

.fis-experiencia__chispa-opcion--incorrecta {
  border-color: var(--ew-color-error, #d1453b);
  background: color-mix(in srgb, var(--ew-color-error, #d1453b) 12%, var(--ewf-papel));
  opacity: 1;
}

.fis-experiencia__chispa-feedback {
  margin: 0;
  padding: var(--ew-space-2) var(--ew-space-3);
  border-radius: var(--ew-radius-sm);
  background: color-mix(in srgb, var(--ewf-acento-melocoton) 22%, transparent);
  color: var(--ewf-texto-1);
  font-family: var(--ewf-font-lectura);
  font-size: 0.9rem;
  line-height: 1.5;
}

.fis-experiencia__chispa-feedback::first-line {
  font-weight: 700;
}

.fis-experiencia__chispa-feedback[hidden] {
  display: none;
}

.fis-parabolico-reto__contenido {
  display: grid;
  gap: var(--ew-space-3);
}

.fis-parabolico-reto__instruccion {
  margin: 0;
  color: var(--ewf-texto-2);
  font-family: var(--ewf-font-lectura);
  line-height: 1.5;
}

.fis-parabolico-reto__simulador,
.fis-parabolico-reto__pregunta {
  min-width: 0;
}

.fis-parabolico-reto__nuevo {
  align-self: flex-start;
  margin-top: var(--ew-space-3);
}