/* Cuestionario (wiki/DESIGN.md, Components > Cuestionario): pregunta, opcion*, campo-desarrollo, contador,
   resumen-errores. Sin color de modulo. Solo tokens de tokens.css / base.css. */

.cq { max-width: var(--spacing-reading); }
.cq [hidden] { display: none !important; } /* .btn y .cq-final declaran display: hidden tiene que ganar */
.cq-conteo { font: 600 14px/1.3 var(--font-body); margin: 0 0 var(--spacing-md); }
.cq-lista { display: grid; gap: var(--spacing-xl); }

.cq-pregunta { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-line); border-radius: var(--rounded-md); padding: var(--spacing-lg); scroll-margin-top: var(--spacing-lg); }
.cq-numero { font: 600 14px/1.3 var(--font-body); color: var(--color-ink-soft); margin: 0 0 var(--spacing-xs); }
.cq-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cq-enunciado { font: 700 18px/1.35 var(--font-display); color: var(--color-ink); padding: 0; margin: 0 0 var(--spacing-sm); }
.cq-ayuda { font-size: 14px; margin: 0 0 var(--spacing-sm); }
.cq-error { display: flex; align-items: center; gap: var(--spacing-xs); margin: 0; font: 600 14px/1.4 var(--font-body); color: var(--color-error); }
.cq-error:not(:empty) { margin-bottom: var(--spacing-sm); }

.cq-opciones { display: grid; gap: var(--spacing-sm); }
.cq-opciones--fila { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cq-opcion { display: flex; align-items: center; gap: var(--spacing-sm); min-height: 48px; padding: 10px 12px; border: 1px solid var(--color-ink-soft); border-radius: var(--rounded-sm); background: var(--color-surface); color: var(--color-ink); cursor: pointer; font: 400 16px/1.4 var(--font-body); }
.cq-opcion input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--color-ja-navy); }
.cq-opcion__texto { flex: 1; }
.cq-opcion__marca { display: inline-flex; align-items: center; gap: var(--spacing-xs); font: 600 14px/1.3 var(--font-body); }
.cq-opcion__marca:empty { display: none; }
.cq-opcion.is-elegida { background: var(--color-ja-ice); border: 2px solid var(--color-ja-navy); padding: 9px 11px; }
.cq-opcion.is-correcta, .cq-opcion.is-solucion { background: var(--color-ok-tint); border: 2px solid var(--color-ok); padding: 9px 11px; }
.cq-opcion.is-correcta .cq-opcion__marca, .cq-opcion.is-solucion .cq-opcion__marca { color: var(--color-ok); }
.cq-opcion.is-incorrecta { background: var(--color-error-tint); border: 2px solid var(--color-error); padding: 9px 11px; }
.cq-opcion.is-incorrecta .cq-opcion__marca { color: var(--color-error); }
/* Comprobada o enviada: solo lectura, el texto sigue en ink (nunca atenuado). */
.cq-opcion:has(input:disabled) { cursor: default; }
.cq-opcion:has(input:disabled):hover:not(.is-elegida):not(.is-correcta):not(.is-incorrecta):not(.is-solucion) { background: var(--color-surface); }
.cq-opcion input:disabled + .cq-opcion__texto { color: var(--color-ink); }

.cq-desarrollo { display: block; width: 100%; min-height: 160px; resize: vertical; font: 400 16px/1.5 var(--font-body); color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-ink-soft); border-radius: var(--rounded-sm); padding: 12px; }
.cq-desarrollo:focus-visible { border-color: var(--color-ja-teal); }
.cq-pregunta.is-error .cq-desarrollo { border-color: var(--color-error); }
.cq-contador { font-size: 14px; color: var(--color-ink-soft); margin: var(--spacing-xs) 0 0; font-variant-numeric: tabular-nums; }

.cq-orden { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-sm); counter-reset: orden; }
.cq-orden__item { cursor: default; }
.cq-orden__item::before { counter-increment: orden; content: counter(orden) "."; font-weight: 700; }
.cq-orden__botones { display: inline-flex; gap: var(--spacing-xs); }
.cq-orden__botones [aria-disabled="true"] { color: var(--color-ink-soft); border-color: var(--color-line); cursor: not-allowed; }
.cq-unir { width: 100%; border-collapse: collapse; }
.cq-unir th, .cq-unir td { text-align: left; padding: var(--spacing-xs) 0; font-weight: 400; vertical-align: middle; }
.cq-unir th { padding-right: var(--spacing-md); }
.cq-unir select { min-height: 48px; width: 100%; font: 400 16px/1.4 var(--font-body); color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-ink-soft); border-radius: var(--rounded-sm); padding: 0 12px; }

.cq-acciones { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.cq-acciones:empty { display: none; }
.cq-devolucion:not(:empty) { margin-top: var(--spacing-md); padding: var(--spacing-md); background: var(--color-surface-soft); border-radius: var(--rounded-sm); }
.cq-devolucion p { margin: 0 0 var(--spacing-xs); }
.cq-devolucion p:last-child { margin: 0; }
.cq-devolucion:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.cq-modelo summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

.cq-pie { margin-top: var(--spacing-xl); }
.cq-resumen { background: var(--color-error-tint); color: var(--color-ink); border-radius: var(--rounded-md); padding: var(--spacing-md); margin-bottom: var(--spacing-md); }
.cq-resumen:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.cq-resumen__titulo { display: flex; align-items: center; gap: var(--spacing-xs); font-size: 18px; color: var(--color-error); margin: 0 0 var(--spacing-sm); }
.cq-resumen ul { margin: 0; padding-left: 1.2em; }
.cq-resumen a { display: inline-block; padding: 10px 0; }
.cq-final[hidden] { display: none; }
.cq-final { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); }
.cq-guardado { margin: 0; font-size: 14px; }

/* Pagina de cuestionario (m0 y cierres): columna de lectura */
.cq-pagina { max-width: var(--spacing-reading); }
.cq-pagina__intro { max-width: 70ch; }
.cq-confirmacion { background: var(--color-ok-tint); color: var(--color-ink); border-radius: var(--rounded-sm); padding: var(--spacing-md) var(--spacing-lg); margin-bottom: var(--spacing-xl); }
.cq-confirmacion h2 { font-size: 22px; margin-bottom: var(--spacing-sm); }
.cq-confirmacion:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.cq-respuestas-titulo { font-size: 22px; margin: var(--spacing-xl) 0 var(--spacing-md); }

/* Capa de dinamismo (marca-jac R1, aprobada por JAC 2026-10-01; DESIGN.md Components > Capa de dinamismo).
   Hover solo con puntero fino; reducido = solo color (sin cambio de sombra). */
.cq-pregunta, .cp-abierta { box-shadow: var(--shadow-1); }
.cq-opcion { transition: background-color 120ms ease-out, box-shadow 160ms ease-out; }
.cq-desarrollo { transition: border-color 120ms ease-out; }
.cq-modelo summary, .cp-tabla details summary { padding-inline: var(--spacing-xs); transition: background-color 120ms ease-out, color 120ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  .cq-opcion:hover:not(.is-elegida, .is-correcta, .is-incorrecta, .is-solucion):not(:has(input:disabled)) { background: var(--color-ja-ice); box-shadow: inset 0 0 0 1px var(--color-ja-navy), var(--shadow-1); }
  .cq-pregunta:not(.is-error) .cq-desarrollo:hover:not(:focus-visible):not([readonly]) { border-color: var(--color-ja-navy); }
  .cq-modelo summary:hover, .cp-tabla details summary:hover { background: var(--color-ja-ice); color: var(--color-ja-navy); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .cq-opcion:hover:not(.is-elegida, .is-correcta, .is-incorrecta, .is-solucion):not(:has(input:disabled)) { box-shadow: inset 0 0 0 1px var(--color-ja-navy); }
}

/* E-14 (movimiento ampliado, pendiente de JAC): filete del color del modulo bajo "Modulo N completo".
   Solo existe si cuestionario.js lo crea con el movimiento activo; Campus.celebrar le pone --celebrar-color. */
.cq-filete { display: block; height: 4px; margin: 0 0 var(--spacing-md); transform-origin: left center; background: var(--celebrar-color, var(--color-ja-navy)); }