/* ============================================================
   Licio Lorenzoni — puente del generador (build)
   NO es parte del sistema de diseño original: aquí va solo lo
   que el generador Markdown→HTML necesita y que no cubre blog.css.
   Carga DESPUÉS de blog.css.
   ============================================================ */

/* ---------------------------------------------------------
   RESALTADO DE CÓDIGO — mapea las clases de Pygments
   (HtmlFormatter, nowrap) a las variables --syn-* del tema.
   Equivale a los .tok-* escritos a mano en el mockup.
   --------------------------------------------------------- */
.prose pre .c,  .prose pre .ch, .prose pre .cm, .prose pre .cp,
.prose pre .cpf,.prose pre .c1, .prose pre .cs { color: var(--syn-comment); font-style: italic; }

.prose pre .k,  .prose pre .kc, .prose pre .kd, .prose pre .kn,
.prose pre .kp, .prose pre .kr, .prose pre .kt { color: var(--syn-keyword); }

.prose pre .s,  .prose pre .sa, .prose pre .sb, .prose pre .sc,
.prose pre .dl, .prose pre .sd, .prose pre .s2, .prose pre .se,
.prose pre .sh, .prose pre .si, .prose pre .sx, .prose pre .sr,
.prose pre .s1, .prose pre .ss { color: var(--syn-string); }

.prose pre .nf, .prose pre .fm, .prose pre .nb, .prose pre .bp,
.prose pre .nc { color: var(--syn-function); }

.prose pre .m,  .prose pre .mb, .prose pre .mf, .prose pre .mh,
.prose pre .mi, .prose pre .il, .prose pre .mo { color: var(--syn-number); }

.prose pre .o,  .prose pre .ow, .prose pre .p { color: var(--syn-punct); }

.prose pre .nd { color: var(--syn-keyword); }            /* decoradores */
.prose pre .err { color: inherit; }                       /* sin caja roja */

/* ---------------------------------------------------------
   IMÁGENES REALES dentro de .prose (Markdown ![alt](src))
   El mockup solo trae el placeholder .ph; esto estiliza <img>.
   --------------------------------------------------------- */
.prose figure img {
  width: 100%;
  height: auto;
  display: block;
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius);
}
/* imagen suelta (sin figure) por si acaso */
.prose > p > img { width: 100%; height: auto; border-radius: var(--radius); }