@use "../tokens" as *;

// Contenido enriquecido renderizado (v-html de los campos richtext): aire
// entre elementos y escala tipográfica del wysiwyg. Los juegos pueden
// ampliarlo desde su propio SCSS.
.rich-content {
  font-size: $fs-16;
  line-height: $k-lh-body;

  // Las NEGRITAS del wysiwyg, en el color de acento.
  strong,
  b {
    color: $accent-500;
  }

  // Aire entre TODOS los elementos del wysiwyg (párrafos, listas, títulos…).
  p,
  ul,
  ol,
  blockquote {
    margin-block: $space-3;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-block: $space-5 $space-3;
    line-height: $k-lh-tight;
  }

  // Sin huecos extra en los bordes del campo.
  > :first-child { margin-block-start: 0; }
  > :last-child { margin-block-end: 0; }

  // Escala del wysiwyg, POR DEBAJO del título de bloque ($fs-28 desde que
  // los bloques calcan la cabecera clásica): h2 24 · h3 20 · h4 18 · h5 16
  // (como el cuerpo, se distingue por el peso) · h6 14.
  h2 { font-size: $fs-24; }
  h3 { font-size: $fs-20; }
  h4 { font-size: $fs-18; }
  h5 { font-size: $fs-16; }
  h6 { font-size: $fs-14; }

  // Listas del wysiwyg: sangradas hacia ADENTRO con el marcador A RAS del
  // texto de los párrafos (con el marcador nativo `outside`, el número
  // quedaba colgando fuera del borde del texto). Marcador propio por
  // ::before en absoluta: el li se sangra con el padding de la lista y el
  // número/viñeta se pinta exactamente en el borde del párrafo
  // (left = -sangría). Aguanta los <li><p>…</p></li> del wysiwyg (un
  // marcador nativo `inside` se quedaría solo en su línea) y las listas
  // anidadas: cada nivel sangra desde el texto del padre y cada <ol> lleva
  // su propio contador (scoped por counter-reset).
  ul,
  ol {
    // Junto a una imagen FLOTADA (posición clear-*/izquierda/derecha del
    // bloque), la caja de la lista se coloca ENTERA al lado del float:
    // sin esto solo se desplazaban los line boxes del texto y el marcador
    // (pintado contra la caja del li, que sigue bajo el float) quedaba
    // pegado a la imagen, descolgado del texto.
    display: flow-root;
    list-style: none;
    padding-left: 1.8em;

    > li {
      position: relative;

      &::before {
        position: absolute;
        left: -1.8em;
        top: 0;
      }
    }

    li + li { margin-block-start: $space-1; }
  }

  ol {
    counter-reset: rc-item;

    > li {
      counter-increment: rc-item;

      &::before { content: counter(rc-item) '.'; }
    }
  }

  ul > li::before { content: '•'; }

  // Viñetas anidadas: el relevo clásico disco → círculo → cuadrado.
  ul ul > li::before { content: '◦'; }
  ul ul ul > li::before { content: '▪'; }

  // Cita: borde a la izquierda + texto atenuado en cursiva (mismo criterio
  // que la vista de edición de RichTextInput).
  blockquote {
    padding-left: $space-4;
    border-left: 3px solid $border-strong;
    color: $text-2;
    font-style: italic;
  }

  // Iconos del juego insertados en línea por el editor (<img class="rt-icon">).
  img.rt-icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.24em;
    margin: 0 1px;
  }

  // Tabla del wysiwyg: ancho completo, bordes finos y cabecera destacada.
  // `display: block` + `overflow-x: auto` en la propia tabla (no en un
  // envoltorio aparte: menos marcado extra) evita que desborde en estrecho
  // sin perder el ancho completo cuando sí cabe. Las clases de fila que
  // use cada juego (p. ej. `green-bg`) las estila el JUEGO, no el motor.
  table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin-block: $space-3;
    border-collapse: collapse;

    td,
    th {
      padding: $space-2 $space-3;
      border: 1px solid $border;
      text-align: left;
    }

    th {
      font-weight: $k-fw-semibold;
      background: $surface-2;
    }
  }
}