/*
 * Tabla de documento para las guías: número en negrita, título en cursiva y tres
 * filetes horizontales, como pide APA 7. Va dentro de una hoja (.paper).
 *
 * Si la tabla no cabe, se desplaza dentro de su hoja (no la página entera): el
 * contenedor .doc-table__scroll es una región con nombre que recibe el foco, para
 * que también se pueda desplazar con el teclado. El número y el título van fuera de
 * esa región, para que sigan a la vista mientras la tabla se desplaza; la región y
 * la tabla toman de ellos su nombre (aria-labelledby).
 */
@layer components {
  .doc-table {
    padding: var(--space-m) var(--space-l);
    color: var(--color-print);
    font-family: var(--font-document);
    font-size: var(--step-0);
    line-height: var(--leading-document);
  }

  .doc-table__heading {
    margin-block-end: var(--space-s);
  }

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

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

  .doc-table__scroll {
    overflow-x: auto;
  }

  .doc-table__scroll:focus-visible {
    outline-offset: 0.25rem;
  }

  .doc-table table {
    inline-size: 100%;
    border-block: 0.09375rem solid currentColor;
  }

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

  .doc-table th:last-child,
  .doc-table td:last-child {
    padding-inline-end: 0;
  }

  .doc-table thead th {
    border-block-end: 1px solid currentColor;
  }

  /* Encabezados de fila: en negrita, como el primer dato de cada fila de una tabla APA. */
  .doc-table tbody th {
    font-weight: 700;
  }

  /* Columnas de números: alineadas a la derecha y con cifras del mismo ancho. */
  .doc-table .doc-table__numeric {
    text-align: end;
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* Las cifras no se parten; el título de su columna sí puede pasar a dos líneas. */
  .doc-table td.doc-table__numeric {
    white-space: nowrap;
  }

  /* Fila de total: separada por un filete. */
  .doc-table__total th,
  .doc-table__total td {
    border-block-start: 1px solid currentColor;
  }

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

  /* En pantallas angostas: menos margen interior en la hoja y entre columnas. */
  @media (max-width: 35.99rem) {
    .doc-table {
      padding-inline: var(--space-m);
    }

    .doc-table th,
    .doc-table td {
      padding-inline-end: var(--space-s);
    }
  }
}