/* El texto de los artículos (article.njk). Se carga después de base.css y usa sus colores y tipografías;
   acá van el ancho de lectura, los subtítulos, las listas, las citas, las imágenes y el código con sus colores. */
:root {
  --code-bg: #EFEDE4; --code-text: #12253A; --code-comment: #66615A; --code-keyword: #8B2E8F; --code-string: #2F6B1F;
  --code-number: #A3460B; --code-function: #1B55A8; --code-punctuation: #4D4B46;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --code-bg: #1F1F1E; --code-text: #EEEDE8; --code-comment: #A3A198; --code-keyword: #D49BE0; --code-string: #9CD67E;
    --code-number: #F2A86B; --code-function: #8DB8FF; --code-punctuation: #CFCDC5;
  }
}
:root[data-theme="dark"] {
  --code-bg: #1F1F1E; --code-text: #EEEDE8; --code-comment: #A3A198; --code-keyword: #D49BE0; --code-string: #9CD67E;
  --code-number: #F2A86B; --code-function: #8DB8FF; --code-punctuation: #CFCDC5;
}

.post { max-width: 42rem; margin: 0 auto; padding-block: clamp(32px, 7vw, 88px) 72px; }
.post-meta { margin: 0 0 10px; color: var(--muted); font-size: .95rem; }
.post-title { font-size: var(--step-3); font-weight: 760; line-height: 1.08; margin: 0 0 clamp(24px, 4vw, 40px); }

/* Una dirección o una palabra larga se corta para no ensanchar la página en el celular */
.prose { overflow-wrap: break-word; }
.prose > * { margin: 0 0 1.1em; }
.prose h2 { font-size: var(--step-2); line-height: 1.2; margin: 1.8em 0 .6em; }
.prose h3 { font-size: var(--step-1); line-height: 1.25; margin: 1.5em 0 .5em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose blockquote { margin-inline: 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--rule); color: var(--muted); }
.prose img { display: block; height: auto; border-radius: 8px; }
/* Una tabla ancha se desplaza de costado dentro de su lugar, como los bloques de código */
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: 8px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose th { font-weight: 700; }
/* El código en línea puede cortarse para no ensanchar la página en el celular; el de los bloques se desplaza dentro del bloque */
.prose :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }
.prose pre { overflow-x: auto; padding: 16px 18px; border-radius: var(--radius); background: var(--code-bg); color: var(--code-text); font-size: .9rem; line-height: 1.55; }
.prose pre code { background: none; padding: 0; white-space: pre; font-size: inherit; color: inherit; }

/* Colores del código (clases de Prism) */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--code-comment); font-style: italic; }
.token.keyword, .token.atrule, .token.important, .token.rule { color: var(--code-keyword); }
.token.string, .token.char, .token.attr-value, .token.regex, .token.inserted, .token.url { color: var(--code-string); }
.token.number, .token.boolean, .token.constant, .token.symbol, .token.deleted { color: var(--code-number); }
.token.function, .token.class-name, .token.tag, .token.selector, .token.property, .token.attr-name, .token.builtin { color: var(--code-function); }
.token.punctuation, .token.operator { color: var(--code-punctuation); }

/* Artículo anterior (más viejo) a la izquierda y siguiente (más nuevo) a la derecha */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); }
.post-nav a { display: grid; gap: 4px; align-content: start; font-weight: 700; text-decoration: none; }
.post-nav span { color: var(--muted); font-size: .9rem; font-weight: 400; }
.post-nav-newer { grid-column: 2; text-align: right; }