/* ADN — Prosa: el cuerpo de texto que escribe el cliente (§59)
   ---------------------------------------------------------------------------
   Se extrajo de blog.css porque lo necesitan DOS sitios: las entradas del blog
   y las páginas editadas con bloques. Vivía sólo en blog.css, que no se encola
   en páginas, así que al aplicar `.adn-prose` a page.php el texto salía sin
   estilar.

   Regla de fondo: se estiliza POR ELEMENTO, no por clase. Esto es HTML que
   escribe el cliente desde el editor, y el editor no pone clases. */

.adn-prose {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--ink-2);
}
.adn-prose > * + * { margin-top: var(--space-5); }

.adn-prose h2,
.adn-prose h3,
.adn-prose h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  scroll-margin-top: 6rem;   /* el header es sticky: sin esto el ancla queda debajo */
}
.adn-prose h2 {
  margin-top: var(--space-12);
  font-size: var(--text-3xl);
  font-weight: 700;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.adn-prose h3 {
  margin-top: var(--space-10);
  font-size: var(--text-2xl);
  font-weight: 600;
}
.adn-prose h4 {
  margin-top: var(--space-8);
  font-size: var(--text-lg);
  font-weight: 600;
}

.adn-prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.adn-prose a:hover { color: var(--accent-2); }

.adn-prose strong { color: var(--ink); font-weight: 600; }

.adn-prose ul,
.adn-prose ol { padding-left: var(--space-6); }
.adn-prose li { margin-top: var(--space-2); }
.adn-prose li::marker { color: var(--adn-gold); }

.adn-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.adn-prose figure { margin-inline: 0; }
.adn-prose figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--mute);
}

.adn-prose blockquote {
  margin-inline: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 3px solid var(--adn-gold);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--ink);
}
.adn-prose blockquote p { margin: 0; }

.adn-prose hr {
  border: 0;
  height: 1px;
  background: var(--adn-hairline);
  margin-block: var(--space-10);
}

/* Tablas: scrollean dentro de su caja, nunca empujan la página.
   El `display: block` va SOLO en el envoltorio. Aplicárselo también a la <table>
   —como estaba— le quita el algoritmo de tabla al navegador: deja de repartir el
   ancho por contenido y parte los nombres largos en tres líneas aunque sobre
   espacio a la derecha.
   Los datos no son prosa: la tabla se sale de la columna de lectura hasta el
   ancho del contenedor, que es donde se comparan cifras a gusto. */
.adn-prose .wp-block-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.adn-prose table {
  display: table;
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--text-base);
}
/* Se probó sacar la tabla fuera de la columna de lectura con márgenes negativos
   (`width: calc(100% + 200px); margin-inline: -100px`) y NO funciona: el
   `overflow-x: auto` del propio envoltorio convierte el ensanche en área
   scrolleable y la última columna queda cortada por la derecha. Con el
   `display: table` ya corregido la tabla reparte bien sus columnas dentro de la
   columna de lectura, que es suficiente. No reintentarlo sin resolver antes esa
   interacción.  */
.adn-prose th,
.adn-prose td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.adn-prose th {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--mute);
  background: var(--surface-2);
  /* Sin `white-space: nowrap`: en la columna de lectura una cabecera larga
     ensancharía la tabla más allá del contenedor y la última columna quedaría
     cortada. Aquí las cabeceras envuelven. */
}
.adn-prose td:first-child { color: var(--ink); font-weight: 500; }

.adn-prose code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--surface-2);
  border-radius: 3px;
  padding: .1em .35em;
}

/* Caja de aviso: <blockquote class="adn-nota"> desde el editor, o cualquier
   div con esa clase. Es el recurso que más va a usar el cliente en las guías. */
.adn-prose .adn-nota {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  background: var(--surface);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink-2);
}
.adn-prose .adn-nota strong { color: var(--ink); }