/* ═══════════════════════════════════════════════════════════
   fisica-base.css — Variables, reset y layout base de Física
   Elemental W · Fisica/css/
   Depende de (en este orden, cargado por fisica.html):
     ../css/design-tokens.css → ../css/themes.css →
     ../css/ui-components.css → ../css/motion.css
   Física ya NO define su propia paleta aislada: todo lo de
   abajo son alias de módulo (mismo patrón que
   Quimica/css/quimica-base.css con --quim-diagram-ink) que
   derivan su valor de las variables --ew-theme-* del tema
   activo (data-ew-theme="orange" en fisica.html). Cambiar de
   tema en el HTML re-tiñe todo Física sin tocar este archivo.
═══════════════════════════════════════════════════════════ */

:root {
  --ewf-max-lectura:  760px;
}

[data-ew-theme] {
  /* Tipografía — mismas familias que el resto del sistema "chispa" */
  --ewf-font-titulo:  var(--ew-font-heading);
  --ewf-font-lectura: var(--ew-font-body);
  --ewf-font-ui:      var(--ew-font-body);

  /* Fondos — derivados del tema activo, no hardcodeados */
  --ewf-fondo-body:   var(--ew-color-background);
  --ewf-fondo-panel:  var(--ew-color-surface-soft);
  --ewf-papel:        var(--ew-color-paper);
  --ewf-fondo-stat:   color-mix(in srgb, var(--ew-theme-ink) 5%, transparent);

  /* Texto — alias de los tokens de texto del tema */
  --ewf-texto-1: var(--ew-color-text);
  --ewf-texto-2: var(--ew-color-text-muted);
  --ewf-texto-3: color-mix(in srgb, var(--ew-theme-ink) 55%, white);

  /* Líneas de "cuaderno" — tinta del tema a distinta opacidad */
  --ewf-linea:       color-mix(in srgb, var(--ew-theme-ink) 35%, transparent);
  --ewf-linea-suave: color-mix(in srgb, var(--ew-theme-ink) 18%, transparent);

  /* Acentos por tipo de bloque (teoria / grafica / simulador) — antes
     eran tres mezclas del mismo acento+tinta (poco contraste entre
     sí). Se mantienen en la familia naranja del tema, pero ahora son
     tres tonos cálidos genuinamente distintos (óxido / ámbar /
     terracota) para que cubo, engranajes, cadena de gráficas, etc.
     se lean con más variedad sin salirse del tema activo. */
  --ewf-acento-teoria:    var(--ew-theme-accent);
  --ewf-acento-grafica:   color-mix(in srgb, #d99a34 82%, var(--ew-theme-accent) 18%);
  --ewf-acento-simulador: color-mix(in srgb, #a8432a 88%, var(--ew-theme-accent) 12%);

  /* Tonos extra para "cajas" de diagramas y tarjetas (index, dialogo
     de Chispa, evaluación al final de la lección) — mismo espíritu
     que las paletas de tarjeta suave que usa Química, pero en gama
     naranja/cálida. */
  --ewf-acento-melocoton: color-mix(in srgb, var(--ew-palette-orange-surface) 78%, var(--ew-theme-accent) 22%);
  --ewf-acento-mostaza:   color-mix(in srgb, #c98a1c 85%, var(--ew-theme-accent) 15%);

  --ewf-sombra-s: var(--ew-shadow-sm);
  --ewf-sombra-m: var(--ew-shadow-md);
}

/* ── Reset y body ────────────────────────────────────────── */
/* Física ya no carga ../css/main.css (igual que Química: el
   sistema compartido no trae un reset global propio, así que
   normalizamos box-sizing aquí, igual que hace quimica-base.css
   por componente, pero a nivel de módulo para no repetirlo). */
*, *::before, *::after {
  box-sizing: border-box;
}

.fis-body {
  margin: 0;
  color: var(--ewf-texto-1);
  font-family: var(--ewf-font-lectura);
  min-height: 100vh;

  /* Fondo "cuaderno cuadriculado" — mismo patrón que .quim-body */
  background-color: var(--ew-color-paper);
  background-image:
    linear-gradient(
      var(--ew-color-paper-grid) var(--ew-paper-grid-line),
      transparent var(--ew-paper-grid-line)
    ),
    linear-gradient(
      90deg,
      var(--ew-color-paper-grid) var(--ew-paper-grid-line),
      transparent var(--ew-paper-grid-line)
    );
  background-size: var(--ew-paper-grid-size) var(--ew-paper-grid-size);
}

/* ── Cabecera ──────────────────────────────────────────────
   Misma estructura y comportamiento visual que .quim-header
   (Quimica/css/quimica-base.css): sticky, blur, marca a la
   izquierda + etiqueta de módulo a la derecha. Aquí en naranja
   en vez de morado — mismo sistema, otro tema. */
.fis-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 2px solid color-mix(in srgb, var(--ew-theme-accent) 32%, transparent);
  background: color-mix(in srgb, var(--ew-color-paper) 88%, var(--ew-theme-background));
  backdrop-filter: blur(16px);
}

.fis-header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
}

.fis-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ew-space-3);
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-display);
  font-size: var(--ew-text-xl);
  text-decoration: none;
}

.fis-brand:focus-visible {
  border-radius: var(--ew-radius-sm);
  outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 28%, transparent);
  outline-offset: 4px;
}

.fis-brand__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.fis-header__label {
  color: var(--ew-theme-accent);
  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-lg);
  font-weight: 700;
  font-synthesis: weight;
}

/* ── Cuadro "cuaderno": línea punteada, precedente de .boceto ── */
.fis-cuadro {
  border: 2px dashed var(--ewf-linea);
  border-radius: var(--ew-radius-md);
  background: var(--ewf-papel);
  padding: clamp(14px, 4.5vw, 20px) clamp(14px, 5vw, 24px);
  margin: 18px 0;
  max-width: 100%;
  box-sizing: border-box;
}

.fis-cuadro__etiqueta {
  display: inline-block;
  font-family: var(--ewf-font-titulo);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.fis-cuadro--teoria    .fis-cuadro__etiqueta { color: var(--ewf-acento-teoria); }
.fis-cuadro--grafica   .fis-cuadro__etiqueta { color: var(--ewf-acento-grafica); }
.fis-cuadro--simulador .fis-cuadro__etiqueta { color: var(--ewf-acento-simulador); }

/* ── Contenedor general (equivalente a .quim-main) ──────── */
.fis-main {
  width: min(calc(100% - var(--ew-space-5) * 2), var(--ew-container-md));
  margin-inline: auto;
  padding-block: var(--ew-space-5);
}

/* ── Índice de clases (equivalente a .quim-selector / .quim-clases /
   .quim-clase-card) — misma estructura, con el toque de Chispa que
   Química no lleva: la mascota asomando en cada tarjeta. ── */
.fis-selector {
  display: grid;
  gap: var(--ew-space-5);
  padding-block: var(--ew-space-6);
}

.fis-selector__titulo {
  margin: 0;
  font-family: var(--ew-font-display);
  font-size: var(--ew-text-3xl);
  color: var(--ew-theme-ink);
  line-height: 1.2;
}

.fis-selector__subtitulo {
  margin: 0;
  color: var(--ew-color-text-muted);
  line-height: 1.5;
}

.fis-clases {
  display: grid;
  gap: var(--ew-space-5);
}

@media (min-width: 768px) {
  .fis-clases {
    grid-template-columns: 1fr 1fr;
  }
}

.fis-clase-card {
  position: relative;
  display: grid;
  gap: var(--ew-space-2);
  padding: var(--ew-space-5);
  padding-right: calc(var(--ew-space-5) + 46px);
  border: 1px dashed var(--ewf-linea);
  border-radius: var(--ew-radius-lg);
  background: var(--ewf-papel);
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base),
    border-color var(--ew-transition-base);
}

.fis-clase-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(
    var(--ewf-acento-teoria),
    var(--ewf-acento-mostaza)
  );
}

.fis-clase-card:hover {
  transform: translateY(-2px);
  border-style: solid;
  border-color: var(--ewf-acento-teoria);
  box-shadow: var(--ewf-sombra-m);
}

.fis-clase-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 28%, transparent);
  outline-offset: 3px;
}

.fis-clase-card__chispa {
  position: absolute;
  top: var(--ew-space-3);
  right: var(--ew-space-3);
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 0.9;
}

.fis-clase-card__eyebrow {
  margin: 0;
  color: var(--ewf-acento-teoria);
  font-size: var(--ew-text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fis-clase-card__titulo {
  margin: 0;
  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-xl);
  color: var(--ew-theme-ink);
  line-height: 1.25;
  font-weight: 700;
}

/* ── Cabecera interna de una clase (equivalente a .quim-tema-header) ── */
.fis-tema-header {
  display: flex;
  align-items: center;
  gap: var(--ew-space-3);
  margin-bottom: var(--ew-space-4);
}

.fis-tema-header__titulo {
  margin: 0;
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-xl);
  font-weight: 700;
  line-height: 1.3;
}

.fis-nav-volver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px dashed var(--ewf-linea);
  border-radius: var(--ew-radius-pill);
  background: var(--ewf-papel);
  color: var(--ewf-texto-1);
  font-size: 1.1rem;
  cursor: pointer;
  transition:
    transform var(--ew-transition-base),
    background-color var(--ew-transition-base),
    border-color var(--ew-transition-base);
}
.fis-nav-volver:hover {
  border-style: solid;
  border-color: var(--ewf-acento-teoria);
  background: var(--ewf-fondo-stat);
  transform: translateX(-2px);
}

/* ── Cuerpo de la lección (equivalente a .quim-cuaderno) ── */
.fis-cuaderno {
  max-width: var(--ewf-max-lectura);
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 0 clamp(24px, 6vw, 40px);
}

/* ── Bloque de evaluación al final de la lección — reemplaza el
   antiguo modo "Evaluación" aparte: la evaluación de una clase se
   activa DENTRO de esa misma clase, nunca en otra pantalla. ── */
.fis-leccion-evaluacion {
  max-width: var(--ewf-max-lectura);
  width: 100%;
  box-sizing: border-box;
  margin: clamp(28px, 6vw, 44px) auto 0;
  padding: clamp(20px, 5vw, 28px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ew-space-4);
  border: 2px dashed var(--ewf-acento-teoria);
  border-radius: var(--ew-radius-lg);
  background: color-mix(in srgb, var(--ewf-acento-melocoton) 20%, var(--ewf-papel));
}

.fis-leccion-evaluacion--activa {
  display: block;
  background: var(--ewf-papel);
  border-style: solid;
}

.fis-leccion-evaluacion__chispa {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

.fis-leccion-evaluacion__texto {
  flex: 1;
  min-width: 200px;
}

.fis-leccion-evaluacion__titulo {
  margin: 0 0 4px;
  font-family: var(--ewf-font-titulo);
  font-weight: 700;
  color: var(--ewf-texto-1);
  font-size: 1rem;
}

.fis-leccion-evaluacion__subtitulo {
  margin: 0;
  color: var(--ewf-texto-2);
  font-size: 0.88rem;
}

.fis-leccion-evaluacion__btn {
  flex-shrink: 0;
  border: none;
  border-radius: var(--ew-radius-pill);
  padding: 11px 22px;
  background: var(--ewf-acento-teoria);
  color: var(--ew-color-text-inverse);
  font-family: var(--ewf-font-ui, var(--ewf-font-titulo));
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--ewf-sombra-s);
  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base);
}
.fis-leccion-evaluacion__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--ewf-sombra-m);
}

.fis-leccion-evaluacion__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Bloque de placeholder pendiente (fisica-renderer.js) ── */
.fis-bloque-stub {
  border: 1px dashed var(--ewf-linea-suave);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--ewf-texto-3);
  font-family: var(--ewf-font-ui, var(--ewf-font-titulo));
  font-size: 0.8rem;
}

/* ── Experiencia interactiva (experiencias[], "una pantalla, una idea") ── */
/* Antes era una caja enorme (min-height 640px, sombra fuerte, 2px
   sólido) que envolvía título + diagrama + comentario + navegación
   como si todo viviera "dentro" de una sola caja. Ahora es un marco
   liviano — como .quim-experiencia — para que el diagrama (con su
   propia caja de color, ver .fis-exp-*) y el comentario de texto se
   lean como dos cosas distintas, el comentario claramente FUERA de
   la caja del diagrama. */
.fis-experiencia {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 4vw, 20px);
  width: 100%;
  box-sizing: border-box;
  margin: 20px 0 32px;
  padding: clamp(18px, 5vw, 28px) clamp(14px, 5vw, 24px);
  border: 1.5px dashed var(--ewf-linea);
  border-radius: var(--ew-radius-lg);
  background: var(--ewf-papel);
  text-align: center;
  outline: none;
  /* OJO: overflow NO va aquí. Iba aquí antes (overflow:hidden en el
     padre directo de .fis-experiencia__nav) y eso rompía en silencio
     el position:sticky del nav (más abajo): cualquier ancestro con
     overflow≠visible es, por spec, un contenedor de recorte/scroll, y
     el navegador calcula el "pegado" de un sticky contra ESE
     contenedor, no contra el viewport. Como .fis-experiencia no
     scrollea de forma independiente (crece con su contenido, no tiene
     alto fijo), el sticky no tenía dónde "pegarse" y el nav quedaba
     efectivamente estático — en un paso muy alto ("cadena-graficas",
     tres gráficas apiladas) eso es justo lo que hacía que las flechas
     terminaran muy abajo, fuera de la vista, sin importar cuánto se
     scrolleara. El recorte real (que las gráficas/SVG de un paso no se
     salgan de las esquinas redondeadas de la tarjeta) sigue haciendo
     falta, así que se conserva en .fis-experiencia__escenario — el
     único hijo que en verdad necesita recortarse; .fis-experiencia__nav
     es HERMANO de ese escenario, no su hijo, así que ya no queda
     atrapado por su overflow y puede pegarse al centro del viewport
     sin problema (ver comentario completo en .fis-experiencia__nav). */
}
.fis-experiencia:focus-visible {
  border-style: solid;
  border-color: var(--ewf-acento-teoria);
}

.fis-experiencia__titulo {
  font-family: var(--ewf-font-titulo);
  font-size: 1.1rem;
  color: var(--ewf-texto-2);
  margin: 0;
}

.fis-experiencia__escenario {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* experiencias.js fija min-height (al tamaño del paso más alto de la
     lección) tras el primer clic de flecha, para que el escenario deje
     de cambiar de alto entre pasos. Esta transición suaviza ese único
     ajuste en vez de que se sienta como un salto brusco. */
  transition: min-height 0.25s ease;
  /* Recorte real de las gráficas/SVG de un paso contra las esquinas
     redondeadas de la tarjeta — antes vivía en .fis-experiencia (ver
     el comentario ahí sobre por qué eso rompía el sticky del nav).
     Aquí no hay ese problema: .fis-experiencia__nav es hermano de
     este escenario, no su hijo, así que este overflow no lo afecta. */
  overflow: hidden;
}

.fis-experiencia__paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  /* Relativo, no fijo (§4 del diseño): un cómic o imagen futura no debe
     compartir la misma caja pensada para fórmulas y texto corto. */
  max-width: min(90%, 620px);
  max-height: 100%;
}

.fis-experiencia__texto {
  font-family: var(--ewf-font-lectura);
  font-size: 1.05rem;
  color: var(--ewf-texto-1);
  margin: 0;
}

.fis-experiencia__referencia {
  font-family: var(--ewf-font-ui, var(--ewf-font-titulo));
  font-size: 0.75rem;
  color: var(--ewf-texto-3);
  margin: 0;
}

/* Elementos dentro de un paso */
.fis-exp-formula {
  font-size: clamp(1.35rem, 6.5vw, 2.4rem);
  color: var(--ewf-texto-1);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
}
.fis-exp-formula .katex { font-size: 1em; }
.fis-exp-formula .katex-display {
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

.fis-exp-lista-igualdad {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fis-exp-lista-igualdad .fis-exp-formula { font-size: 1.4rem; }

.fis-exp-delta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3vw, 14px);
  font-family: var(--ewf-font-titulo);
  font-size: clamp(1.1rem, 5.5vw, 1.6rem);
  color: var(--ewf-texto-1);
  max-width: 100%;
}
.fis-exp-delta__flecha { color: var(--ewf-texto-3); }
.fis-exp-delta__valor {
  font-size: 1rem;
  padding: 4px 10px;
  border-radius: var(--ew-radius-pill);
  background: color-mix(in srgb, var(--ewf-acento-melocoton) 24%, transparent);
  color: var(--ewf-acento-simulador);
  font-weight: 700;
}

.fis-exp-lista-vertical {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--ewf-font-titulo);
  font-size: clamp(1rem, 4.5vw, 1.3rem);
  max-width: 100%;
}
.fis-exp-lista-vertical__item,
.fis-exp-lista-vertical li {
  padding: 6px 14px;
  border-left: 3px solid var(--ewf-acento-teoria);
  background: color-mix(in srgb, var(--ewf-acento-melocoton) 16%, transparent);
  border-radius: 0 var(--ew-radius-sm) var(--ew-radius-sm) 0;
  color: var(--ewf-acento-teoria);
  text-align: left;
}

/* ── lista-formulas: ecuación real en KaTeX + nota corta ──
   Cada fila es una tarjeta propia (no una línea de texto): en
   pantallas anchas la fórmula y la nota conviven en la misma fila
   (grid de 2 columnas, la fórmula toma solo el ancho que necesita);
   en pantallas angostas la nota simplemente cae debajo, sin recortar
   ni forzar scroll horizontal en el bloque completo — solo la propia
   fórmula KaTeX puede desplazarse en horizontal si es más ancha que
   la pantalla (mismo mecanismo que .fis-exp-formula), nunca la tarjeta. */
.fis-exp-lista-formulas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
}
.fis-exp-lista-formulas__item {
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr;
  align-items: center;
  column-gap: clamp(10px, 4vw, 22px);
  row-gap: 4px;
  padding: 10px clamp(12px, 4vw, 18px);
  border-left: 3px solid var(--ewf-acento-teoria);
  background: color-mix(in srgb, var(--ewf-acento-melocoton) 16%, transparent);
  border-radius: 0 var(--ew-radius-sm) var(--ew-radius-sm) 0;
  max-width: 100%;
  box-sizing: border-box;
}
.fis-exp-lista-formulas__item .fis-exp-formula {
  font-size: clamp(1.05rem, 4.2vw, 1.5rem);
  padding: 2px 2px;
  min-width: 0;
}
.fis-exp-lista-formulas__nota {
  margin: 0;
  font-family: var(--ewf-font-lectura);
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--ewf-texto-2);
  text-align: left;
}
/* Pantallas angostas: una sola columna, nota siempre debajo de la
   fórmula — evita apretar la nota contra una fórmula ancha en un
   grid de 2 columnas cuando ya no cabe cómodo ninguna de las dos. */
@media (max-width: 560px) {
  .fis-exp-lista-formulas__item {
    grid-template-columns: 1fr;
  }
}

/* Caja de la tabla: fondo cálido suave + borde punteado, en vez de
   flotar suelta sobre el papel del cuaderno — así el comentario que
   viene después queda claramente fuera de la caja. */
.fis-exp-tabla-xy {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-family: var(--ewf-font-lectura);
  font-size: clamp(0.9rem, 3.5vw, 1.1rem);
  padding: 6px clamp(8px, 3vw, 16px);
  border: 1.5px dashed var(--ewf-linea);
  border-radius: var(--ew-radius-md);
  background: color-mix(in srgb, var(--ewf-acento-melocoton) 14%, var(--ewf-papel));
}
.fis-exp-tabla-xy th,
.fis-exp-tabla-xy td {
  padding: clamp(6px, 2vw, 8px) clamp(10px, 4vw, 20px);
  border-bottom: 1px dashed var(--ewf-linea-suave);
  white-space: nowrap;
}
.fis-exp-tabla-xy th {
  font-family: var(--ewf-font-titulo);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ewf-acento-teoria);
}

/* ── Fórmula de bloque dentro de .fis-cuadro (teoria/formula) ──
   Usada por fisica-renderer.js (TEORIA_BUILDERS.formula); no tenía
   CSS propio — causaba desbordes silenciosos en móvil. ── */
.fis-formula {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 14px 0;
}
.fis-formula__latex {
  font-size: clamp(1.05rem, 5vw, 1.5rem);
  color: var(--ewf-texto-1);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
}
.fis-formula__latex .katex-display {
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}
.fis-formula__desc {
  font-family: var(--ewf-font-lectura);
  font-size: 0.88rem;
  color: var(--ewf-texto-2);
  margin-top: 6px;
}

/* ── Cajas de diagrama: cada familia de elemento vive dentro de una
   tarjeta de color cálido propio (melocotón / ámbar / terracota /
   mostaza) — así el diagrama se distingue claramente como "caja" y
   el comentario de texto que el motor compartido agrega después
   (paso.texto) queda fuera de ella, igual que en Química. ── */

/* ── Elemento "cubo" — metáfora espacial (Experiencia 2, x³→3x²) ── */
.fis-exp-cubo {
  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-cubo-svg {
  width: min(100%, 280px);
  height: auto;
}

.fis-exp-cubo-etiqueta {
  font-family: var(--ewf-font-titulo);
  font-size: 16px;
  fill: var(--ewf-texto-1);
}
.fis-exp-cubo-etiqueta--crecido {
  fill: var(--ewf-acento-teoria);
  font-weight: 700;
}
.fis-exp-cubo-etiqueta--capas {
  font-size: 12px;
  fill: var(--ewf-texto-2);
}
.fis-exp-cubo-etiqueta--pieza {
  font-size: 18px;
  font-weight: 700;
  fill: var(--ew-color-text-inverse);
}

/* ── Elemento "recta-horizontal" — Experiencia 4, derivada de una constante ── */
.fis-exp-recta {
  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-recta-svg {
  width: min(100%, 280px);
  height: auto;
}

/* ── Elemento "rectangulo" — Experiencia 6, regla del producto ── */
.fis-exp-rectangulo {
  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-rectangulo-svg {
  width: min(100%, 300px);
  height: auto;
}

/* ── Elemento "engranajes" — Experiencia 8, regla de la cadena ── */
.fis-exp-engranajes {
  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) 16%, transparent);
}
.fis-exp-engranajes-svg {
  width: min(100%, 300px);
  height: auto;
}

/* ── Elemento "dialogo-chispa" — mismo componente que Química
   (Quimica/js/quimica-elementos.js), en naranja: Chispa comentando
   la lección, a veces con un chiste. ── */
.fis-dialogo-chispa {
  display: flex;
  align-items: flex-start;
  gap: var(--ew-space-3);
  width: 100%;
  box-sizing: border-box;
  padding: var(--ew-space-3);
  border-radius: var(--ew-radius-md);
  background: color-mix(in srgb, var(--ewf-acento-melocoton) 22%, transparent);
  text-align: left;
}
.fis-dialogo-chispa__avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
}
.fis-dialogo-chispa__burbuja {
  padding: var(--ew-space-2) var(--ew-space-3);
  border-radius: var(--ew-radius-sm);
  background: var(--ewf-papel);
  border: 1px dashed var(--ewf-linea);
  color: var(--ewf-texto-1);
  font-family: var(--ewf-font-lectura);
  font-size: 1rem;
  line-height: 1.5;
}

.fis-experiencia__btn-reflexion {
  border: 1.5px solid var(--ewf-acento-teoria);
  background: var(--ewf-papel);
  color: var(--ewf-acento-teoria);
  border-radius: var(--ew-radius-pill);
  padding: 9px 20px;
  font-family: var(--ewf-font-ui, var(--ewf-font-titulo));
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: var(--ewf-sombra-s);
  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base),
    background-color var(--ew-transition-base);
}
.fis-experiencia__btn-reflexion:hover {
  transform: translateY(-2px);
  background: var(--ewf-fondo-stat);
  box-shadow: var(--ewf-sombra-m);
}

.fis-experiencia__progreso { width: 100%; }

/* Botones ◀ N/M ▶ de cada paso — flotantes, ancladas al CENTRO
   vertical del viewport (no al fondo del contenedor).

   Bug real que esto corrige: cada experiencia mide en frío la altura
   de todos sus pasos y fija el escenario a la del paso MÁS alto
   (js/core/educativo/experiencias.js → medirAlturaMaxima()), así que
   un solo paso enorme —p. ej. "cadena-graficas" en la experiencia
   "La cadena x(t) → v(t) → a(t)", que apila tres gráficas— hace que
   TODOS los pasos de esa experiencia, incluso uno con una sola línea
   de texto, hereden esa altura gigante. .fis-experiencia__nav vivía
   en flujo normal justo después del escenario, así que su posición en
   pantalla dependía de cuánto medía el paso MÁS alto de la
   experiencia: con una celda así de grande, las flechas quedaban muy
   por debajo del contenido visible, y había que scrollear mucho para
   encontrarlas.

   Solución: position:sticky con top:50vh + translateY(-50%) en vez de
   bottom. Esto centra el nav en el punto medio del viewport —no del
   contenedor— así que su posición en pantalla ya NO depende de cuán
   alto sea el paso actual: sea el paso corto o el más alto de toda la
   experiencia, las flechas están siempre a la misma altura, centradas.

   Por qué sticky y no fixed: fisica-renderer.js apila varias
   experiencias en una misma página (expInicio.forEach(exp =>
   contenedor.appendChild(buildExperiencia(exp)))), cada una con su
   propio <section class="fis-experiencia"> y su propio nav hijo
   directo de esa section. position:fixed pondría a TODOS esos nav en
   el mismo punto de la pantalla, superpuestos entre sí. sticky, en
   cambio, queda acotado a la caja de SU PROPIO padre directo
   (.fis-experiencia): se "pega" centrado en el viewport solo mientras
   esa lección sigue cruzando la pantalla, y se suelta y desplaza con
   el resto del contenido en cuanto esa experiencia termina — ahí
   empieza a centrarse el nav de la siguiente.

   El propio <div> del nav ahora ocupa el 100% del ancho de la tarjeta
   con pointer-events:none: es un contenedor invisible, no una franja
   ni una píldora de fondo. Solo sus hijos directos —los botones ◀ ▶ y
   el contador, con pointer-events:auto— vuelven a ser clicables, así
   el nav no bloquea clics/scroll sobre el contenido que queda debajo,
   a los lados de los botones. Eso separa visualmente ◀ del ▶ hacia
   los bordes izquierdo/derecho de la tarjeta, con el contador flotando
   centrado entre ambos — de ahí que ambas flechas se lean como
   elementos flotantes independientes, no como una barra sólida. */
.fis-experiencia__nav {
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
  z-index: 60;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  width: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* Caso de un solo paso con práctica disponible: experiencias.js quita
   el botón ◀ y el contador (btnAnterior.remove(); indicador.remove())
   y deja solo "continuar" — sin los otros dos hijos, space-between lo
   pegaría contra el borde izquierdo de la tarjeta; se centra a mano. */
.fis-experiencia__nav--continuar {
  justify-content: center;
}

.fis-experiencia__nav-btn {
  display: inline-grid;
  place-items: center;
  appearance: none;
  pointer-events: auto;
  flex-shrink: 0;

  width: 44px;
  height: 44px;
  padding: 0;

  border-radius: 50%;
  border: 1.5px solid var(--ewf-linea);
  background: color-mix(in srgb, var(--ewf-fondo-panel) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ewf-texto-1);

  box-shadow: var(--ewf-sombra-m);

  font-family: var(--ewf-font-ui, var(--ewf-font-titulo));
  font-size: 1rem;
  line-height: 1;
  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__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.fis-experiencia__nav-btn:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: var(--ewf-acento-teoria);
  box-shadow: var(--ewf-sombra-m);
}
.fis-experiencia__nav-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ewf-acento-teoria) 30%, transparent);
  outline-offset: 2px;
}

/* Flecha final "continuar a práctica" — más ancha y con el acento
   sólido de fondo, para distinguirse de las flechas ◀ ▶ normales. */
.fis-experiencia__nav-btn--continuar {
  width: auto;
  min-width: 52px;
  padding: 0 16px;
  border-radius: var(--ew-radius-pill);
  border-color: var(--ewf-acento-teoria);
  background: var(--ewf-acento-teoria);
  color: var(--ew-color-text-inverse);
  font-size: 1.1rem;
}
.fis-experiencia__nav-btn--continuar:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: var(--ewf-sombra-m);
  border-color: var(--ewf-acento-teoria);
}

/* Contador "N / M" — flota centrado entre las dos flechas (tercer
   hijo del flex space-between). Antes era texto plano sin fondo,
   pensado para vivir dentro de la píldora sólida del nav; ahora que
   flota solo, en el medio de la pantalla, sobre el contenido del
   paso, necesita su propia placa legible para no perderse encima de
   una gráfica o un fondo de color. */
.fis-experiencia__indicador {
  pointer-events: none;
  flex-shrink: 0;

  padding: 6px 14px;
  border-radius: var(--ew-radius-pill);
  border: 1.5px solid var(--ewf-linea);
  background: color-mix(in srgb, var(--ewf-papel) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ewf-sombra-s);

  font-family: var(--ewf-font-ui, var(--ewf-font-titulo));
  font-size: 0.8rem;
  color: var(--ewf-texto-3);
  min-width: 48px;
  text-align: center;
}

/* ── Fase 3/4: transición → práctica → fin ──────────────────
   Mismas variables --ewf-*, mismo tono visual que el resto de
   la experiencia — no un sistema aparte. ── */

.fis-experiencia__transicion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.fis-experiencia__transicion-titulo {
  font-family: var(--ewf-font-titulo);
  font-size: 1.5rem;
  color: var(--ewf-acento-teoria);
  margin: 0;
}

.fis-experiencia__transicion-texto {
  font-family: var(--ewf-font-lectura);
  font-size: 1.1rem;
  color: var(--ewf-texto-2);
  margin: 0 0 8px;
}

.fis-experiencia__btn-practica {
  border: none;
  background: var(--ewf-acento-teoria);
  color: var(--ew-color-text-inverse);
  border-radius: var(--ew-radius-pill);
  padding: 12px 26px;
  font-family: var(--ewf-font-ui, var(--ewf-font-titulo));
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--ewf-sombra-s);
  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base),
    opacity var(--ew-transition-base);
}
.fis-experiencia__btn-practica:hover {
  transform: translateY(-2px);
  box-shadow: var(--ewf-sombra-m);
  opacity: 0.94;
}

.fis-experiencia__btn-practica--secundario {
  background: var(--ewf-papel);
  border: 1.5px solid var(--ewf-linea);
  color: var(--ewf-texto-2);
  font-size: 0.82rem;
  padding: 9px 18px;
  box-shadow: none;
}
.fis-experiencia__btn-practica--secundario:hover {
  background: var(--ewf-fondo-stat);
  box-shadow: var(--ewf-sombra-s);
}

/* ── Práctica: contenedor genérico (ejecutarPractica en
   js/core/educativo/practicas.js). Los estilos del EJERCICIO en sí
   (hueco, chips, flecha, pulso/shake...) viven ahora en
   Fisica/minijuegos/_compartido/minijuegos-widgets.css y en el .css
   propio de cada minijuego — ver Fisica/minijuegos/. ── */

.fis-practica-raiz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.fis-practica-ejercicio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.fis-practica__introduccion {
  width: 100%;
  padding: 14px 16px;
  border-left: 4px solid var(--ewf-acento-teoria);
  border-radius: var(--ew-radius-sm);
  background: var(--ewf-fondo-panel);
}

.fis-practica__titulo {
  margin: 0;
  color: var(--ewf-texto-1);
  font-family: var(--ewf-font-titulo);
  font-size: 1.05rem;
}

.fis-practica__instruccion {
  margin: 5px 0 0;
  color: var(--ewf-texto-2);
  font-family: var(--ewf-font-lectura);
  font-size: 0.9rem;
  line-height: 1.45;
}

.fis-practica__pie { margin-top: 4px; }

/* Transición suave entre fases de la experiencia (pasos → práctica → fin). */
.fis-experiencia__fade-in {
  animation: fis-experiencia-fade-in 0.35s ease;
}

@keyframes fis-experiencia-fade-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Modo Test ───────────────────────────────────────────── */
.fis-test-opciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.fis-test-opcion {
  text-align: left;
  border: 1.5px dashed var(--ewf-linea);
  background: var(--ewf-fondo-panel);
  color: var(--ewf-texto-1);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--ewf-font-lectura);
  font-size: 0.9rem;
  cursor: pointer;
}
.fis-test-opcion:hover { background: var(--ewf-fondo-stat); }

/* Estado seleccionado — usado por los botones de "Prueba de sonido"
   en la encuesta de satisfacción (Sección B). Sin esta regla el clic
   sí registra la respuesta (ver evaluacion-final.js), pero no se ve
   ningún cambio, así que parece que no se puede elegir. */
.fis-test-opcion[aria-pressed="true"] {
  background: var(--ewf-acento-simulador);
  border-style: solid;
  border-color: var(--ewf-acento-simulador);
  color: var(--ew-color-text-inverse);
}

.fis-test-opcion--omitir {
  border-style: solid;
  border-color: var(--ewf-linea-suave);
  color: var(--ewf-texto-3);
}

.fis-test-nav { margin-top: 14px; }

.fis-test-detalle-item {
  border-top: 1px dashed var(--ewf-linea-suave);
  padding: 10px 0;
}
.fis-test-detalle-item:first-child { border-top: none; }

/* ── Test Final: cabecera de sección (separa A de B visualmente) ── */
.fis-test-final-cabecera {
  margin: 28px 0 4px;
}
.fis-test-final-seccion {
  display: inline-block;
  font-family: var(--ewf-font-ui, var(--ewf-font-titulo));
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ewf-texto-2);
  border-bottom: 1.5px dashed var(--ewf-linea);
  padding-bottom: 6px;
}

.fis-test-final-meta {
  list-style: none;
  margin: 10px 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--ewf-font-ui, var(--ewf-font-titulo));
  font-size: 0.82rem;
  color: var(--ewf-texto-2);
}

.fis-test-final-btn-empezar {
  margin-top: 10px;
  border-style: solid;
  background: var(--ewf-acento-teoria);
  color: var(--ew-color-text-inverse);
  border-color: var(--ewf-acento-teoria);
  font-weight: 600;
  box-shadow: var(--ewf-sombra-s);
  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base),
    opacity var(--ew-transition-base);
}
.fis-test-final-btn-empezar:hover {
  transform: translateY(-2px);
  box-shadow: var(--ewf-sombra-m);
  opacity: 0.92;
}

/* ── Test Final: pregunta tipo "minijuego" (ver fisica-test-final.js) ──
   Envuelve el minijuego real montado dentro de la evaluación. El
   minijuego trae su propio chrome (.minij-widget, ver
   minijuegos-widgets.css) — este wrapper solo aporta el margen que en
   el resto del flujo de Test Final da .fis-cuadro. */
.fis-test-final-personalizada {
  margin-top: 12px;
}

.fis-test-final-aviso {
  color: var(--ew-color-danger);
  font-size: 0.82rem;
  min-height: 1.2em;
}

/* ── Prueba de sonido (Sección B) ──────────────────────── */
.fis-test-final-sonidos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.fis-test-final-sonidos .fis-test-opcion {
  flex: 1;
  min-width: 140px;
  text-align: center;
}

/* ── Escala Likert (Sección B) ─────────────────────────── */
.fis-likert {
  padding: 14px 0;
  border-top: 1px dashed var(--ewf-linea-suave);
}
.fis-likert:first-of-type { border-top: none; padding-top: 4px; }

.fis-likert__enunciado {
  font-family: var(--ewf-font-lectura);
  font-size: 0.92rem;
  color: var(--ewf-texto-1);
  margin-bottom: 10px;
}

.fis-likert__escala {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fis-likert__opcion {
  min-width: 44px;
}

.fis-likert__opcion {
  flex: 1;
  border: 1.5px dashed var(--ewf-linea);
  background: var(--ewf-fondo-panel);
  color: var(--ewf-texto-2);
  border-radius: 10px;
  padding: 8px 0;
  font-family: var(--ewf-font-titulo);
  font-size: 0.9rem;
  cursor: pointer;
}
.fis-likert__opcion:hover { background: var(--ewf-fondo-stat); }
.fis-likert__opcion[aria-pressed="true"] {
  background: var(--ewf-acento-simulador);
  border-style: solid;
  border-color: var(--ewf-acento-simulador);
  color: var(--ew-color-text-inverse);
}

.fis-likert__extremos {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--ewf-font-ui, var(--ewf-font-titulo));
  font-size: 0.7rem;
  color: var(--ewf-texto-3);
}

/* ── Preguntas abiertas (Sección B) ────────────────────── */
.fis-abierta { margin-bottom: 16px; }
.fis-abierta:last-child { margin-bottom: 0; }

.fis-abierta__enunciado {
  display: block;
  font-family: var(--ewf-font-lectura);
  font-size: 0.92rem;
  color: var(--ewf-texto-1);
  margin-bottom: 8px;
}

.fis-abierta__campo {
  width: 100%;
  resize: vertical;
  border: 1.5px dashed var(--ewf-linea);
  border-radius: 10px;
  background: var(--ewf-fondo-panel);
  color: var(--ewf-texto-1);
  font-family: var(--ewf-font-lectura);
  font-size: 0.9rem;
  padding: 10px 12px;
  box-sizing: border-box;
}
.fis-abierta__campo:focus {
  outline: none;
  border-style: solid;
  border-color: var(--ewf-acento-teoria);
}

/* ══════════════════════════════════════════════════════════
   MEDIA QUERIES — refuerzo explícito para móvil (antes no existían)
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .fis-header {
    justify-content: center;
    text-align: center;
  }
  .fis-experiencia {
    border-radius: 16px;
  }
  .fis-exp-cubo-svg,
  .fis-exp-recta-svg,
  .fis-exp-rectangulo-svg,
  .fis-exp-engranajes-svg {
    width: min(100%, 230px);
  }
  .fis-experiencia__nav {
    gap: 6px;
  }
  .fis-experiencia__nav-btn {
    width: 38px;
    height: 38px;
  }
  .fis-experiencia__indicador {
    padding: 5px 10px;
    font-size: 0.72rem;
    min-width: 40px;
  }
}

@media (max-width: 400px) {
  .fis-header {
    padding: 10px 12px;
  }
  .fis-experiencia {
    padding: 20px 12px;
    gap: 12px;
  }
}

/* ── Minijuego transversal dentro de la lección ───────────── */

.fis-minijuego-transversal {
  width: min(100%, 820px);
  margin: 3rem auto 1.5rem;
}

.fis-minijuego-transversal__intro {
  margin-bottom: 1rem;
}

.fis-minijuego-transversal__etiqueta {
  display: block;
  margin-bottom: 0.35rem;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ew-accent, #cf4173);
}

.fis-minijuego-transversal__titulo {
  margin: 0;
  font-family: "Slabo 27px", serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
}

.fis-minijuego-transversal__descripcion {
  max-width: 620px;
  margin: 0.4rem 0 0;
  font-family: "Inter", sans-serif;
  line-height: 1.6;
}

.fis-minijuego-transversal__host {
  width: 100%;
  min-width: 0;
}

@media (max-width: 600px) {
  .fis-minijuego-transversal {
    margin-top: 2rem;
  }
}

/* Bloques Imagen del CMS */
.fis-cuadro--imagen .cms-imagen {
  margin: 0 auto;
  max-width: 100%;
  text-align: center;
}

.fis-cuadro--imagen .cms-imagen__img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
}