/**
 * Las dos páginas legales, con el aspecto del producto.
 *
 * Tenían su propia hoja con los grises de antes del cambio de marca, sin tema
 * oscuro y sin cabecera: al lado de la página pública parecían de otra empresa.
 * Y son las dos que mira quien está decidiendo si se fía, así que parecer otra
 * empresa ahí es lo peor que podían hacer.
 *
 * Ahora heredan `pagina.css` y esto solo añade lo propio de un documento largo:
 * la jerarquía de un texto que se lee de arriba abajo y las tablas.
 *
 * Lo que NO cambia, y por eso sigue escrito aquí: ni fuentes externas ni
 * scripts de terceros. Son las páginas que revisa Shopify y que lee alguien
 * preocupado por sus datos; cargar un rastreador justo ahí sería decir una cosa
 * y hacer otra.
 */
@import url("/pagina/pagina.css");

body {
  padding: 0;
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--e-6) var(--e-2) var(--e-7);
}

@media (min-width: 768px) {
  main {
    padding-left: var(--e-4);
    padding-right: var(--e-4);
  }
}

/* En un documento, los títulos van con la fuente del cuerpo: la de titulares
   tiene carácter y en veinte encabezados seguidos cansa. */
main h1 {
  font-family: var(--sans);
  font-size: var(--t-lg);
  font-weight: 700;
  margin-bottom: var(--e-1);
}

main h2 {
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 600;
  margin: var(--e-5) 0 var(--e-2);
}

main h3 {
  font-size: var(--t-base);
  font-weight: 600;
  margin: var(--e-3) 0 var(--e-1);
}

main p,
main li {
  max-width: none;
  margin: 0 0 var(--e-2);
}

main ul,
main ol {
  padding-left: var(--e-3);
  margin: 0 0 var(--e-2);
}

main li {
  margin-bottom: var(--e-1);
}

main a {
  color: var(--texto);
  text-decoration: underline;
  text-underline-offset: 2px;
}

main a:hover {
  color: var(--rojo-texto);
}

/* La tabla se desplaza ella, no la página. Igual que en los informes de la
   consola, y por el mismo motivo. */
.tabla-caja {
  overflow-x: auto;
  max-width: 100%;
  margin: var(--e-3) 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--t-sm);
}

th,
td {
  border: 1px solid var(--borde);
  padding: var(--e-1) var(--e-2);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--fondo-alt);
  font-weight: 600;
}

code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  font-size: 0.9em;
}

.fecha {
  color: var(--texto-suave);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

/*
  El selector de idioma de las páginas legales.

  Los tres enlaces iban pegados y se leían como una sola palabra:
  «FrançaisEnglishEspañol». El HTML los tenía sin espacio entre etiquetas, que
  es lo que hace el formateador al juntarlos, y en el navegador eso no deja
  hueco. Se arregla con `gap` y no con un espacio en el HTML, que se vuelve a
  perder al formatear.
*/
.idiomas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
  font-size: var(--t-sm);
}

.idiomas a {
  color: var(--texto-suave);
  text-decoration: none;
  border-bottom: 1px solid var(--borde);
}

.idiomas a:hover {
  color: var(--texto);
  border-color: var(--rojo-texto);
}