/* Prepara Controlador · reglas internas de las figuras de psicotécnicos (lo que generan demo/psico/*.js).
   El tema viste las clases del contrato (.pc-q, .pc-opt, …); esto solo asegura que los SVG y el HTML de los
   generadores se vean como en la app: en papel claro también en modo oscuro (las explicaciones hablan de
   figuras «negras» y «blancas»), con las variables CSS que usan los dibujos y las cuatro matrices en fila. */

.pc-q__fig, .pc-opt--fig .pc-opt__texto, .pc-resultado__fig {
  --bg: #f4f6fa; --surface: #ffffff; --surface-2: #eef2f8; --text: #13213a; --muted: #5d6b82; --line: #dde3ee;
  --primary: #1f6feb; --accent: #f2a900; --ok: #14713f; --ok-bg: #e3f6ea; --bad: #b52a21; --bad-bg: #fde8e6; --warn-bg: #fff4d6;
  color: var(--text); color-scheme: light; background: var(--surface-2);
}
.pc-q__fig { margin: 12px 0; padding: 10px; border-radius: 12px; overflow-x: auto; }
.pc-q__fig svg { display: block; max-width: 100%; height: auto; max-height: 40vh; margin: 0 auto; }
.pc-opt--fig .pc-opt__texto { display: block; width: 100%; border-radius: 8px; padding: 4px; }
.pc-opt--fig svg { display: block; max-width: 100%; height: auto; max-height: 22vh; margin: 0 auto; }
.pc-resultado__fig { display: inline-block; width: 64px; vertical-align: middle; border-radius: 6px; padding: 3px; margin: 0 4px; }
.pc-resultado__fig svg { display: block; width: 100%; height: auto; }
@media (min-width: 860px) {
  .pc-q__fig svg { max-width: 520px; max-height: 36vh; }
  .pc-opt--fig svg { max-height: 17vh; }
}

/* Cuatro matrices de aviones / señaleros (simbolos.js): la figura es HTML, cuatro bloques con rótulo y su SVG.
   Las cuatro en fila; en pantalla estrecha, dos arriba y dos abajo. Estas reglas ganan a los topes de altura. */
.cuatro-matrices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; align-items: start; max-width: 100%; margin: 0 auto; box-sizing: border-box; }
.cuatro-matrices .cm-bloque { min-width: 0; }
.cuatro-matrices .cm-rotulo { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 3px 2px; line-height: 1.2; white-space: nowrap; }
.pc-q__fig .cuatro-matrices svg, .cuatro-matrices svg { display: block; width: 100%; max-width: none; height: auto; max-height: none; margin: 0; }
.pc-q__fig:has(> .cuatro-matrices) { overflow-x: hidden; }
@media (max-width: 599px), (max-width: 859px) and (orientation: portrait) {
  .cuatro-matrices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 10px; }
}
.cuatro-matrices.senaleros { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 6px; }
@media (max-width: 599px) {
  .cuatro-matrices.senaleros { gap: 4px 5px; }
  .cuatro-matrices.senaleros .cm-rotulo { font-size: 11px; margin-left: 1px; }
}

/* Mientras el tema no vista el motor, lo mínimo para que nada quede oculto o pegado. */
.pc-acceso-bloque [hidden], .pc-prueba [hidden], .pc-dia1 [hidden], .pc-acceso[hidden] { display: none !important; }
.pc-cargando { opacity: .75; }
.pc-progreso { position: relative; height: 6px; border-radius: 3px; background: var(--line, #dde3ee); overflow: hidden; margin: 8px 0 12px; }
.pc-progreso::before { content: ""; position: absolute; inset: 0; width: calc(var(--p, 0) * 1%); background: var(--primary, #1f6feb); transition: width .25s; }
.pc-anillo { --p: 0; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px;
  background: conic-gradient(var(--primary, #1f6feb) calc(var(--p, 0) * 1%), var(--line, #dde3ee) 0); }
.pc-anillo__num { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--surface, #fff); font-size: 28px; font-weight: 800; }
.pc-anillo__num small { font-size: 14px; font-weight: 600; opacity: .7; }
.pc-resultado__lista { list-style: none; padding-left: 0; }