/**
 * fisica-cinematica.css — Estilos de los elementos visuales nuevos de
 * Cinemática (Fase 2), incluida la gráfica x–t/v–t (.fis-exp-grafica*)
 * que comparten el modo Aprendizaje y el minijuego 'leer-grafica'. Los
 * estados EXCLUSIVOS de ese minijuego (pregunta, chip correcto) viven en
 * Fisica/minijuegos/leer-grafica/leer-grafica.css.
 * Elemental W · Fisica/css/
 *
 * Deliberadamente en un archivo aparte de fisica-base.css: los
 * elementos de Derivadas (cubo, recta-horizontal, rectangulo,
 * engranajes) ya están probados y no se tocan. Este archivo solo
 * AGREGA reglas nuevas, mismo patrón de nombres (.fis-exp-X /
 * .fis-exp-X-svg) que las ya existentes en fisica-base.css.
 *
 * Requiere que fisica-base.css ya esté cargado antes (usa las mismas
 * variables --ewf-*, --ewf-acento-*, --ewf-texto-*, definidas en
 * :root ahí). Debe incluirse en fisica.html DESPUÉS de fisica-base.css.
 */

/* Cada elemento vive en su propia "caja" de color cálido — mismo
   criterio que fisica-base.css (cubo/recta/rectángulo/engranajes):
   variedad de tono dentro de la gama naranja, comentario de texto
   siempre fuera de la caja (lo agrega el motor compartido después). */

/* ── Elemento "recta-numerica" — Experiencia Posición ── */
.fis-exp-recta-numerica {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: clamp(10px, 3vw, 16px);
  border-radius: var(--ew-radius-md);
  background: color-mix(in srgb, var(--ewf-acento-melocoton) 20%, transparent);
}
.fis-exp-recta-numerica-svg {
  width: min(100%, 300px);
  height: auto;
}

/* ── Elemento "trayectoria-plano" — Experiencia Trayectoria / Distancia ── */
.fis-exp-plano {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: clamp(10px, 3vw, 16px);
  border-radius: var(--ew-radius-md);
  background: color-mix(in srgb, var(--ewf-acento-grafica) 14%, transparent);
}
.fis-exp-plano-svg {
  width: min(100%, 280px);
  height: auto;
}

/* ── Elemento "vector" — Experiencias Desplazamiento / Velocidad ── */
.fis-exp-vector {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: clamp(10px, 3vw, 16px);
  border-radius: var(--ew-radius-md);
  background: color-mix(in srgb, var(--ewf-acento-simulador) 12%, transparent);
}
.fis-exp-vector-svg {
  width: min(100%, 280px);
  height: auto;
}

/* ── Elementos "grafica-xt" / "grafica-vt" — Experiencias MRU, MRUA,
   Gráficas, y la mecánica de práctica 'leer-grafica' (fisica-practica.js
   dibuja su propio SVG con esta misma clase contenedora, para heredar
   estos mismos estilos sin duplicar CSS). ── */
.fis-exp-grafica {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: clamp(10px, 3vw, 16px);
  border-radius: var(--ew-radius-md);
  background: color-mix(in srgb, var(--ewf-acento-mostaza) 14%, transparent);
}
.fis-exp-grafica-svg {
  width: min(100%, 320px);
  height: auto;
}

/* La pregunta de lectura y el estado "correcto" del chip del
   minijuego 'leer-grafica' ya no viven aquí — se movieron a
   Fisica/minijuegos/leer-grafica/leer-grafica.css (exclusivos de
   ese minijuego, no del modo Aprendizaje). */

/* ── Números de la cuadrícula en las gráficas x–t / v–t / a–t
   (Fase 3: el motor de gráficas ahora dibuja marcas numeradas en
   ambos ejes, no solo la línea del eje) ── */
.fis-exp-grafica-num {
  font-family: var(--ewf-font-titulo);
  font-size: 8px;
  fill: var(--ewf-texto-3);
}

/* ── Elemento "cadena-graficas" — Experiencia "La cadena x(t) → v(t) → a(t)":
   tres gráficas apiladas (posición, velocidad, aceleración) conectadas
   por flechas de derivar/integrar, igual que el diagrama de la Fase 3. ── */
.fis-exp-cadena-graficas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.fis-exp-cadena-graficas__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 8px clamp(8px, 3vw, 14px) 4px;
  border-radius: var(--ew-radius-md);
  background: color-mix(in srgb, var(--ewf-acento-mostaza) 12%, transparent);
}
.fis-exp-cadena-graficas__titulo {
  font-family: var(--ewf-font-titulo);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ewf-texto-2);
  margin: 0 0 2px;
}
.fis-exp-cadena-graficas__flechas {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 2px 0 6px;
}
.fis-exp-cadena-graficas__flecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--ewf-font-ui, var(--ewf-font-titulo));
  font-size: 0.7rem;
  line-height: 1.15;
  text-align: center;
}
.fis-exp-cadena-graficas__flecha span:first-child {
  font-size: 1.15rem;
  line-height: 1;
}
.fis-exp-cadena-graficas__flecha--baja { color: var(--ewf-acento-teoria); }
.fis-exp-cadena-graficas__flecha--sube { color: var(--ewf-acento-simulador); }

@media (max-width: 640px) {
  .fis-exp-recta-numerica-svg,
  .fis-exp-plano-svg,
  .fis-exp-vector-svg {
    width: min(100%, 230px);
  }
  .fis-exp-grafica-svg {
    width: min(100%, 260px);
  }
  .fis-exp-cadena-graficas__flecha {
    font-size: 0.62rem;
  }
  .fis-exp-cadena-graficas__flechas {
    gap: 20px;
  }
}

/* ── Bloque "par-simulador" (Fase 2/3) — cajita de contexto temático +
   cajita del simulador compacto, una pareja por simulador (Péndulo,
   Caída Libre). Lado a lado en escritorio/tablet, apiladas en móvil. ── */
.fis-par-simulador {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin: 20px 0;
}
.fis-par-simulador__titulo {
  grid-column: 1 / -1;
  font-family: var(--ewf-font-titulo);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ewf-texto-1);
  margin: 0 0 2px;
}
.fis-par-simulador__concepto,
.fis-par-simulador__simulador {
  min-width: 0;
}
/* La cajita del simulador no necesita el padding/fondo de .fis-cuadro
   propio (widget-base.js ya trae su propio chrome) — solo reutilizamos
   .fis-cuadro para el rótulo y el marco exterior consistente. */
.fis-par-simulador__simulador-montaje {
  min-height: 220px;
}

@media (max-width: 720px) {
  .fis-par-simulador {
    grid-template-columns: 1fr;
  }
}