/*
 * "Para tu conocimiento" (/test/:id/conocimiento): la columna y el título de Consulta
 * (test-consulta.css) con una píldora por estilo, título a la izquierda y chevron a la derecha.
 * El detalle se abre en la hoja del diálogo del evento (event-dialog.css).
 */
/* Título de la sección "Para tu conocimiento": más pequeño que el de Consulta. */
.conocimiento .consulta__title {
  font-size: clamp(0.9375rem, 4vw, 1.125rem);
}

.conocimiento__list {
  margin-top: var(--space-8);
}

.conocimiento .conocimiento__item {
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: var(--space-6) var(--space-5);
  text-align: left;
}

.conocimiento__item-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.conocimiento__item-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--brand-text-muted);
  stroke-width: 2;
}

/* ------------------------------------------------------------------
 * Hoja de un estilo: definición, características y sugerencias.
 * ------------------------------------------------------------------ */
.conocimiento-dialog__section {
  display: grid;
  gap: var(--space-2);
}

.conocimiento-dialog__heading {
  color: var(--brand-text-muted);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.conocimiento-dialog__text {
  font-size: var(--text-body);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Texto corrido (iem): párrafos seguidos y la pregunta central con un acento de marca. */
.conocimiento-dialog__paragraphs {
  display: grid;
  gap: var(--space-4);
}

.conocimiento-dialog__question {
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--brand-violet);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Características (hfn): etiqueta en negrita y su descripción, con viñetas discretas. */
.conocimiento-dialog__list {
  display: grid;
  gap: var(--space-3);
  padding-inline-start: var(--space-5);
  font-size: var(--text-body);
  line-height: 1.6;
  text-wrap: pretty;
}

.conocimiento-dialog__list li::marker {
  color: var(--brand-text-muted);
}

.conocimiento-dialog__list strong {
  font-weight: var(--weight-semibold);
}

/* Hábitos financieros: el título de la hoja como texto normal, más pequeño. */
.conocimiento-dialog--hfn .event-dialog__title {
  font-size: var(--text-button);
  font-weight: var(--weight-regular);
  letter-spacing: normal;
}

@media (min-width: 600px) {
  .conocimiento-dialog {
    width: min(calc(100% - 2 * var(--gutter)), 560px);
  }
}