/*
 * Página de guía: una lección escrita por el asesor, con ejemplos sobre papel.
 *
 * Composición: cabecera (ruta, título, entrada y datos de lectura) y, debajo, el
 * texto en una columna de lectura. En escritorio, el índice «En esta guía» queda
 * a la derecha y acompaña el desplazamiento; en el celular va antes del texto.
 * Al final: lista para revisar, invitación a escribir y referencias.
 */
@layer components {
  /* ── Cabecera de la guía ─────────────────────────────────────────────── */
  .guide__head {
    padding-block: var(--space-xl) var(--space-l);
  }

  .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2xs);
    color: var(--color-ink-soft);
    font-size: var(--step--1);
  }

  /* Separador entre pasos de la ruta. Su texto alternativo vacío lo calla en los lectores de pantalla. */
  .breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    content: "/" / "";
    margin-inline-end: var(--space-2xs);
  }

  .breadcrumb__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    color: var(--color-ink-soft);
  }

  .guide__title {
    max-inline-size: 22ch;
    margin-block-start: var(--space-s);
    font-size: var(--step-4);
    line-height: 1.06;
  }

  .guide__lead {
    max-inline-size: 40rem;
    margin-block-start: var(--space-m);
    color: var(--color-ink-soft);
    font-size: var(--step-1);
    line-height: var(--leading-snug);
  }

  .guide__meta {
    margin-block-start: var(--space-s);
    color: var(--color-ink-soft);
    font-size: var(--step--1);
  }

  /* ── Cuerpo: índice y columna de lectura ─────────────────────────────── */
  /*
   * Sin margen inferior: la sección «Otras guías» que sigue ya trae el suyo.
   * Las columnas son minmax(0, 1fr) en toda la rejilla: así una tabla ancha se
   * desplaza dentro de su hoja en lugar de ensanchar la página.
   */
  .guide__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
  }

  .guide__toc {
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
  }

  .guide__toc-title {
    color: var(--color-ink-soft);
    font-family: var(--font-brand);
    font-size: var(--step--1);
    font-stretch: 100%;
    font-weight: var(--weight-strong);
    letter-spacing: 0;
    line-height: var(--leading-snug);
  }

  .guide__toc-list {
    display: grid;
    margin-block-start: var(--space-3xs);
  }

  .guide__toc-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.5rem;
    color: var(--color-ink);
    font-size: var(--step--1);
    line-height: var(--leading-snug);
    text-decoration-line: none;
  }

  .guide__toc-link:hover {
    text-decoration-line: underline;
  }

  .guide__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    max-inline-size: 44rem;
  }

  /* Escritorio: el índice pasa a la derecha y acompaña el desplazamiento. */
  @media (min-width: 62rem) {
    .guide__layout {
      grid-template-columns: minmax(0, 1fr) 15rem;
      column-gap: var(--space-2xl);
      align-items: start;
    }

    .guide__toc {
      grid-column: 2;
      grid-row: 1;
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-l));
      padding: 0 0 0 var(--space-m);
      border: 0;
      border-inline-start: 1px solid var(--color-line);
      border-radius: 0;
    }

    .guide__body {
      grid-column: 1;
      grid-row: 1;
    }
  }

  /* ── Secciones del texto ─────────────────────────────────────────────── */
  .guide__section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-s);
  }

  .guide__section h2 {
    font-size: var(--step-3);
    line-height: var(--leading-heading);
    /* Al saltar desde el índice, el título no queda bajo la cabecera fija. */
    scroll-margin-block-start: calc(var(--header-height) + var(--space-s));
  }

  .guide__section h3 {
    margin-block-start: var(--space-s);
    font-size: var(--step-1);
    line-height: var(--leading-heading);
  }

  .guide__section p,
  .guide__section li {
    max-inline-size: 65ch;
  }

  /* Listas del texto: viñeta del color del acento. */
  .guide__list {
    display: grid;
    gap: var(--space-2xs);
    padding-inline-start: 1.25em;
  }

  .guide__list li::marker {
    color: var(--color-accent-text);
  }

  /* Pasos: son una secuencia real, por eso van numerados como las etapas. */
  .guide__steps {
    display: grid;
    gap: var(--space-s);
    counter-reset: guide-step;
  }

  .guide__step {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    column-gap: var(--space-xs);
    counter-increment: guide-step;
  }

  .guide__step::before {
    content: counter(guide-step);
    color: var(--color-accent-text);
    font-size: var(--step-2);
    font-stretch: var(--width-condensed);
    font-weight: 500;
    font-variant-numeric: lining-nums;
    line-height: 1;
  }

  /* Nombres de la interfaz de un programa (campos, menús): tal cual aparecen en pantalla. */
  .guide__ui {
    font-weight: var(--weight-strong);
  }

  /* Aviso: una idea que conviene no pasar por alto. */
  .guide__callout {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-s) var(--space-m);
    border-inline-start: 0.1875rem solid var(--color-accent-text);
    background-color: color-mix(in oklab, var(--color-accent-text) 7%, transparent);
  }

  .guide__callout-title {
    font-family: var(--font-brand);
    font-size: var(--step-0);
    font-stretch: 100%;
    font-weight: var(--weight-strong);
    letter-spacing: 0;
  }

  /* ── Invitación a escribir ───────────────────────────────────────────── */
  .guide__cta {
    display: grid;
    justify-items: start;
    gap: var(--space-s);
    padding: var(--space-l);
    border-radius: var(--radius-control);
    background-color: var(--color-tinta);
    color: var(--color-on-tinta);
    /* Sobre fondo oscuro el anillo de foco pasa a ser el resaltador, como en la banda de consulta. */
    --color-focus: var(--color-highlight);
  }

  .guide__cta-title {
    font-size: var(--step-2);
    line-height: var(--leading-heading);
  }

  .guide__cta-text {
    max-inline-size: 52ch;
    color: var(--color-on-tinta-soft);
  }

  /* ── Referencias de la guía ──────────────────────────────────────────── */
  .guide__references-list {
    display: grid;
    gap: var(--space-xs);
    color: var(--color-ink);
    font-family: var(--font-document);
    font-size: var(--step-0);
    line-height: var(--leading-document);
  }

  /* Sangría francesa, como en la lista de referencias de una tesis. */
  .guide__reference {
    padding-inline-start: 2em;
    text-indent: -2em;
    overflow-wrap: anywhere;
  }

  .guide__reference a {
    color: inherit;
  }
}