/* Tablas dentro de los articulos del blog.
   Van en fichero aparte para no tocar style.css, ni su version en las
   cien paginas que lo enlazan, por algo que solo usan los articulos nuevos.
   El generador (_build/generar_articulos.py) mete cada tabla en una caja
   .post-table y enlaza este fichero solo en los articulos que llevan tabla.
   La caja es una region desplazable: en movil la tabla se desliza dentro de
   ella y la pagina no gana scroll horizontal. Los bordes salen del color del
   texto, asi que valen igual sobre fondo claro que oscuro. */

.article-body .post-table {
  margin: 1.4rem 0 1.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-sm, 10px);
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}

.article-body .post-table:focus-visible {
  outline: 2px solid var(--accent, #2A47FF);
  outline-offset: 3px;
}

.article-body .post-table table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.45;
}

.article-body .post-table th,
.article-body .post-table td {
  padding: .7rem .9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.article-body .post-table th {
  font-family: var(--font-display, system-ui, sans-serif);
  font-weight: 600;
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.article-body .post-table tr:last-child td {
  border-bottom: 0;
}