/* ═══ Rotación de Figuras 3D ═════════════════════════════════════════════════
   Mismo criterio de corrección visual que TOL/WCST/SDMT/BTA/BS-D/Claves/Corsi:
   .screen--center fija min-height:80vh, que dentro de un viewport más alto deja
   contenido corto "pegado" arriba con vacío debajo — se ajusta por pantalla.
   El chip+par de figuras+opciones+feedback viven dentro de .rotacion-panel,
   mismo lenguaje visual que .pasat-panel/.span-panel/.corsi-panel, en vez de
   flotar sobre el fondo de la pantalla. */
.screen--rotacion.screen--center { min-height: calc(100vh - 42px); }
.screen--rotacion { width: 100%; max-width: 680px; gap: 20px; }
.rotacion-panel {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(15, 30, 45, .06);
  padding: 32px 28px;
}
.rotacion-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 100px;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .82rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.rotacion-pair { display: flex; gap: 32px; justify-content: center; align-items: center; flex-wrap: wrap; }
.rotacion-figure { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rotacion-figure svg { display: block; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); max-width: 100%; height: auto; }
.rotacion-figure-label { font-weight: 700; font-size: 1.1rem; color: var(--ink-soft); }
.rotacion-choices { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.rot-choice {
  min-width: 190px;
}
.rotacion-feedback { min-height: 1.5em; font-weight: 600; text-align: center; transition: color 200ms; }