/* =========================================================
   bloques-cms.css — Estilos RUNTIME de los bloques del CMS
   Elemental W · Fase 4 issue #52

   Compartido por el portal (vista previa) y por los módulos educativos
   (Física/Química) al renderizar bloques Texto (Markdown+KaTeX) e Imagen.
   Una sola fuente de estilos: no se duplica en cada módulo.
   Usa los design tokens globales (--ew-*).
   ========================================================= */

/* ---------- Markdown ---------- */

.cms-md {
  color: var(--ew-color-text, #222);
  line-height: 1.6;
}

.cms-md-parrafo {
  margin: 0 0 var(--ew-space-3, 0.75rem);
  overflow-wrap: anywhere;
}

.cms-md-h {
  margin: var(--ew-space-4, 1rem) 0 var(--ew-space-2, 0.5rem);
  line-height: 1.25;
}

.cms-md-h1 {
  font-size: var(--ew-text-2xl, 1.5rem);
}

.cms-md-h2 {
  font-size: var(--ew-text-xl, 1.25rem);
}

.cms-md-h3 {
  font-size: var(--ew-text-lg, 1.125rem);
}

.cms-md-code {
  padding: 0.1em 0.35em;
  border-radius: var(--ew-radius-sm, 0.5rem);
  background: color-mix(in srgb, var(--ew-color-text, #222) 8%, transparent);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.cms-md-lista {
  margin: 0 0 var(--ew-space-3, 0.75rem);
  padding-left: 1.5rem;
}

.cms-md-item {
  margin: 0.15rem 0;
  overflow-wrap: anywhere;
}

.cms-md-link {
  color: var(--ew-color-primary, #b5179e);
  text-decoration: underline;
}

.cms-md-link:hover {
  text-decoration: none;
}

/* Fórmula LaTeX: cuando KaTeX no cargó, se muestra el texto crudo legible. */
.cms-latex--bloque {
  display: block;
  margin: var(--ew-space-3, 0.75rem) 0;
  text-align: center;
  overflow-x: auto;
}

.cms-latex--fallback {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.95em;
}

/* ---------- Imagen ---------- */

.cms-imagen {
  margin: var(--ew-space-4, 1rem) 0;
  max-width: 100%;
}

.cms-imagen__img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--ew-radius-md, 0.875rem);
}

/* Tamaños permitidos (enum). Todos se adaptan al CONTENEDOR: el tope en px
   se combina con 100% mediante min(), así en pantallas o contenedores
   estrechos la imagen nunca excede el ancho disponible (sin overflow).
   "completo" ocupa todo el ancho del contenedor. */
.cms-imagen--pequeno .cms-imagen__img {
  max-width: min(100%, 240px);
}

.cms-imagen--medio .cms-imagen__img {
  max-width: min(100%, 480px);
}

.cms-imagen--grande .cms-imagen__img {
  max-width: min(100%, 720px);
}

.cms-imagen--completo .cms-imagen__img {
  max-width: 100%;
}

.cms-imagen__fallback {
  padding: var(--ew-space-4, 1rem);
  border: 1px dashed var(--ew-color-border, #ccc);
  border-radius: var(--ew-radius-md, 0.875rem);
  color: var(--ew-color-text-muted, #666);
  text-align: center;
  font-size: var(--ew-text-sm, 0.875rem);
}

/* =========================================================
   Fase 5 — Slider / Pregunta / Evaluación (runtime, genérico)
   Sin colores de asignatura: los wrappers de módulo aportan identidad.
   ========================================================= */

/* ---------- Slider (reutiliza .simc-control de widget-base) ----------
   El control y sus clases (.simc-control*) vienen de widget-base y ya se
   estilan en simuladores-widgets.css (input a ancho completo, accent-color,
   focus-visible). Aquí solo se ajusta el espaciado/jerarquía del bloque y se
   garantiza que la cabecera (etiqueta + valor) ocupe todo el ancho, con el
   valor separado a la derecha. */

.cms-slider {
  max-width: 100%;
}

.cms-slider .simc-control {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ew-space-2, 0.5rem);
}

/* Cabecera: etiqueta a la izquierda, valor a la derecha (nunca pegados). */
.cms-slider .simc-control__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ew-space-3, 0.75rem);
  width: 100%;
}

.cms-slider .simc-control__valor {
  font-weight: 700;
  white-space: nowrap;
}

/* El accent del range hereda del contexto: los wrappers de módulo pueden
   redefinir --ew-color-primary/--ew-color-focus para dar su acento. */

/* ---------- Pregunta (práctica embebida) ---------- */

.cms-pregunta {
  max-width: 100%;
}

.cms-pregunta__campo {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.cms-pregunta__enunciado {
  padding: 0;
  font-weight: 700;
  margin-bottom: var(--ew-space-3, 0.75rem);
}

/* Opciones como filas/cards de respuesta: radio real + texto, hover suave,
   estado seleccionado y focus-visible. No se reemplazan los radios por divs. */
.cms-pregunta__opcion {
  display: flex;
  align-items: center;
  gap: var(--ew-space-3, 0.75rem);
  padding: var(--ew-space-3, 0.75rem);
  margin-bottom: var(--ew-space-2, 0.5rem);
  border: 1px solid var(--ew-color-border, #ccc);
  border-radius: var(--ew-radius-md, 0.875rem);
  background: var(--ew-color-surface, #fff);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.cms-pregunta__opcion:hover {
  border-color: var(--ew-color-primary, currentColor);
  background: color-mix(
    in srgb,
    var(--ew-color-primary, #999) 6%,
    var(--ew-color-surface, #fff)
  );
}

/* Estado seleccionado: relación visual con el accent del contexto/módulo. */
.cms-pregunta__opcion:has(input:checked) {
  border-color: var(--ew-color-primary, currentColor);
  background: color-mix(
    in srgb,
    var(--ew-color-primary, #999) 10%,
    var(--ew-color-surface, #fff)
  );
}

/* Radio real, con accent del contexto; el foco del teclado se ve en la fila. */
.cms-pregunta__opcion input[type="radio"] {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--ew-color-primary, currentColor);
}

.cms-pregunta__opcion:focus-within {
  outline: 2px solid var(--ew-color-focus, currentColor);
  outline-offset: 2px;
}

.cms-pregunta__opcion-texto {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cms-pregunta__comprobar {
  border: 1px solid var(--ew-color-border-strong, var(--ew-color-border, #ccc));
  border-radius: var(--ew-radius-pill, 999px);
  padding: 0.5rem 1.1rem;
  background: var(--ew-color-surface, #fff);
  color: var(--ew-color-text, #222);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.cms-pregunta__comprobar:hover {
  border-color: var(--ew-color-primary, currentColor);
}

.cms-pregunta__feedback {
  margin: var(--ew-space-2, 0.5rem) 0 0;
  font-size: var(--ew-text-sm, 0.875rem);
  overflow-wrap: anywhere;
}

.cms-pregunta__feedback--exito {
  color: #1b5e20;
}
.cms-pregunta__feedback--error {
  color: #b71c1c;
}
.cms-pregunta__feedback--info {
  color: var(--ew-color-text-muted, #666);
}

.cms-pregunta__aviso,
.cms-pregunta__cargando {
  margin: 0;
  color: var(--ew-color-text-muted, #666);
  font-size: var(--ew-text-sm, 0.875rem);
}

/* ---------- Evaluación (launcher) ----------
   Card compacta: título → metadato opcional → acción. Se percibe como una
   acción de aprendizaje, no una card administrativa. */

.cms-evaluacion {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ew-space-3, 0.75rem);
  align-items: flex-start;
}

.cms-evaluacion__cabecera {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cms-evaluacion__titulo {
  margin: 0;
  font-weight: 700;
  font-size: var(--ew-text-lg, 1.125rem);
}

.cms-evaluacion__meta {
  margin: 0;
  font-size: var(--ew-text-sm, 0.875rem);
  color: var(--ew-color-text-muted, #666);
}

.cms-evaluacion__iniciar {
  border: 1px solid var(--ew-color-primary, #b5179e);
  border-radius: var(--ew-radius-pill, 999px);
  padding: 0.6rem 1.4rem;
  background: var(--ew-color-primary, #b5179e);
  color: var(--ew-color-text-inverse, #fff);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cms-evaluacion__iniciar:not(:disabled):hover {
  background: var(--ew-color-primary-hover, var(--ew-color-primary, #b5179e));
}

.cms-evaluacion__iniciar:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Nota bajo el botón deshabilitado en preview (explica por qué no lanza). */
.cms-evaluacion__nota {
  margin: 0;
  font-size: var(--ew-text-xs, 0.75rem);
  color: var(--ew-color-text-muted, #666);
}

.cms-evaluacion__zona {
  width: 100%;
  margin-top: var(--ew-space-2, 0.5rem);
}

.cms-evaluacion__aviso {
  margin: 0;
  color: var(--ew-color-text-muted, #666);
}

/* ══════════════════════════════════════════════════════════
   BLOQUE DIBUJO (Fase 6) — render estático (runtime + preview).
   Superficie vectorial responsive. El color del trazo deriva de tokens
   (no hex arbitrario): Física/Química pueden acentuar con --cms-dibujo-tinta
   desde su wrapper. bloques-cms.css se mantiene agnóstico de asignatura.
══════════════════════════════════════════════════════════ */
.cms-dibujo {
  margin: var(--ew-space-3, 0.75rem) 0;
  max-width: 100%;
  overflow: hidden;
}
.cms-dibujo__svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--ew-radius-md, 0.875rem);
  background: color-mix(in srgb, var(--ew-color-text, #222) 4%, transparent);
}
/* Tinta del trazo: token dedicado con fallback al color de texto del contexto. */
.cms-dibujo__trazo {
  stroke: var(--cms-dibujo-tinta, var(--ew-color-text, #222));
}