/* Etiqueta "Actualizado" en los listados de artículos recientes.
   La inyectan los hooks recent_articles.py y section_recent.py cuando un
   artículo se ha modificado bastante después de publicarse. Usa las variables
   de color de Material, así que sigue el tema claro/oscuro sin tocar nada. */
.etiqueta-actualizado {
  display: inline-block;
  padding: 0.05em 0.5em;
  margin-left: 0.25em;
  border-radius: 1em;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 0.12em;
  white-space: nowrap;
  color: var(--md-primary-bg-color);
  background-color: var(--md-accent-fg-color);
}

/* Tablas de muchas columnas (el panorama de hardware tiene siete).

   Material aplica `html .md-typeset__table table { width: 100% }` dentro de un
   contenedor `inline-block`, así que una tabla ancha nunca desborda: comprime
   las columnas hasta dejarlas en una palabra por línea, y una celda con dos
   frases se vuelve una columna altísima e ilegible.

   Con un ancho mínimo la tabla sí desborda y el contenedor la desplaza en
   horizontal, que es lo legible. `min-width` gana siempre a `width`, así que no
   hace falta pelear con la especificidad de Material.

   Se activa envolviendo la tabla en el markdown (necesita la extensión
   md_in_html, ya activa en mkdocs.yml):

       <div class="tabla-ancha" markdown>
       | Col | Col |
       ...
       </div>

   Es opt-in a propósito: las tablas de tres o cuatro columnas se leen mejor
   ajustadas al ancho del texto, sin scroll. */
.tabla-ancha {
  overflow-x: auto;
  /* Sin esto, el scroll táctil de la tabla arrastra la página entera. */
  overscroll-behavior-x: contain;
}

/* Nota para quien retome esto: en macOS las barras de scroll son *overlay* y no
   se ven hasta que se desplaza, así que no hay pista visual de que la tabla
   siga a la derecha. Se probó forzar una barra permanente con
   `::-webkit-scrollbar { -webkit-appearance: none }` y no funcionó: aparecían
   dos barras al arrastrar, porque hay dos contenedores scrolleando anidados
   (este `div` y la propia tabla, que conserva el `overflow: auto` de Material
   cuando su JS no la envuelve). Se dejó estar: el scroll funciona con el
   trackpad y las columnas de la derecha son la fuente, la menos crítica. Si se
   retoma, el arreglo pasa por dejar un único contenedor scrolleable, no por
   estilizar la barra. */

/* El ancho del texto está topado en ~45rem, así que cualquier valor por encima
   implica scroll también en pantalla grande: es el precio de que quepan siete
   columnas. Este es el número a subir o bajar si el scroll molesta. */
.md-typeset .tabla-ancha table:not([class]) {
  min-width: 56rem;
}

/* En filas altas (una celda con dos frases junto a otras de tres palabras), el
   centrado vertical por defecto descuelga los datos cortos del nombre de su
   fila. Arriba se leen alineados. */
.md-typeset .tabla-ancha table:not([class]) td {
  vertical-align: top;
}