/*
 * Tabla en formato APA 7: número en negrita, título en cursiva, tres filetes
 * horizontales, ninguna línea vertical y nota al pie.
 * Va dentro de una hoja (.paper) y usa la letra del documento.
 */
@layer components {
  .apa-table {
    container-type: inline-size;
    padding: var(--space-l);
    color: var(--color-print);
    font-family: var(--font-document);
    line-height: var(--leading-document);
  }

  .apa-table__table {
    inline-size: 100%;
    /* Filete superior e inferior de la tabla. */
    border-block: 0.09375rem solid currentColor;
  }

  .apa-table__caption {
    padding-block-end: var(--space-s);
    text-align: start;
  }

  .apa-table__number {
    display: block;
    font-weight: 700;
  }

  .apa-table__title {
    display: block;
    font-style: italic;
  }

  .apa-table__table th,
  .apa-table__table td {
    padding: var(--space-xs) var(--space-m) var(--space-xs) 0;
    font-weight: 400;
    text-align: start;
    vertical-align: top;
  }

  .apa-table__table th:last-child,
  .apa-table__table td:last-child {
    padding-inline-end: 0;
  }

  /* Filete bajo los encabezados de columna. */
  .apa-table__head th {
    border-block-end: 1px solid currentColor;
  }

  /* Anchos de columna: paso, lo que preparo yo y lo que tiene que ser real. */
  .apa-table__head th:nth-child(1) {
    inline-size: 25%;
  }

  .apa-table__head th:nth-child(2) {
    inline-size: 39%;
  }

  .apa-table__head th:nth-child(3) {
    inline-size: 36%;
  }

  /* Etiqueta de columna dentro de la celda: solo se ve cuando las filas se apilan. */
  .apa-table__label {
    display: none;
  }

  .apa-table__note {
    margin-block-start: var(--space-s);
    font-size: 0.92em;
  }

  /*
   * Hoja angosta: cada fila se apila como una ficha. El encabezado de columnas
   * se oculta a la vista (sigue disponible para lectores de pantalla) y cada celda
   * muestra su propia etiqueta.
   */
  @container (inline-size < 34rem) {
    .apa-table__table,
    .apa-table__table tbody,
    .apa-table__table tr,
    .apa-table__table th,
    .apa-table__table td {
      display: block;
    }

    /* Apilada, el título queda dentro de la tabla: el filete superior pasa a ir debajo de él. */
    .apa-table__table {
      border-block-start: 0;
    }

    .apa-table__caption {
      display: block;
      border-block-end: 0.09375rem solid currentColor;
    }

    .apa-table__head {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }

    .apa-table__table tbody tr {
      padding-block: var(--space-s);
    }

    .apa-table__table tbody tr + tr {
      border-block-start: 1px solid var(--color-line);
    }

    .apa-table__table tbody th {
      inline-size: auto;
      padding: 0 0 var(--space-2xs);
      font-weight: 700;
    }

    .apa-table__table td {
      padding: var(--space-2xs) 0;
    }

    .apa-table__label {
      display: block;
      font-size: 0.92em;
      font-style: italic;
    }
  }
}