/* Páginas de lectura del blog (06-nov-2026). Diseño inspirado en knlb.dev y adaptado a la web:
   texto en Source Serif 4, títulos y navegación en Geist (como el resto de la web desde el 07-nov-2026), fondo papel, enlaces en rojo UCLM,
   índice en el margen (si la entrada tiene tres apartados o más) y modo oscuro del sistema.
   El listado no usa este fichero: es la sección «Blog» de la web (plantilla.html). */
:root {
  --fondo: #f8f6f1; --texto: #1f1f22; --tenue: #6b6b73; --raya: #dcd8cc;
  --acento: #a3122f; --titulos: #1e1e22; --resalte: #efece4; --linea: #b30135;
  --serif: "Source Serif 4", Georgia, serif; --sans: Geist, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --medida: 40rem; --margen: 13rem;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #1c1c1f; --texto: #e4e2dc; --tenue: #a09fa7; --raya: #3a3a40;
          --acento: #ef8293; --titulos: #f2f0ea; --resalte: #29292e; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 19px/1.65 var(--serif);
       font-optical-sizing: auto; border-top: 3px solid var(--linea); }
a { color: var(--acento); text-decoration: underline; text-decoration-color: var(--raya);
    text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--acento); }

.rejilla { display: grid; grid-template-columns: minmax(0, var(--medida)) var(--margen); column-gap: 3.5rem;
           justify-content: center; padding: 0 16px; min-height: calc(100vh - 3px); grid-template-rows: auto 1fr auto; }
.cabecera { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
            padding: 22px 0 0; font-family: var(--sans); font-size: 15px; }
.cabecera .nombre { font-weight: 900; font-size: 17px; letter-spacing: .02em; color: var(--titulos); text-decoration: none; }
.cabecera nav a { margin-left: 18px; color: var(--tenue); font-weight: 700; text-decoration: none; }
.cabecera nav a:hover { color: var(--acento); }

main { grid-column: 1; min-width: 0; padding: 44px 0 0; }
.rejilla.sin-indice { grid-template-columns: minmax(0, var(--medida)); }
h1, h2, h3, h4 { font-family: var(--sans); color: var(--titulos); line-height: 1.2; }
h1 { font-size: 40px; font-weight: 900; letter-spacing: -.01em; margin: 6px 0 26px; }
h2 { font-size: 24px; font-weight: 700; margin: 44px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--raya); }
h3 { font-size: 19px; font-weight: 700; margin: 30px 0 10px; }
.meta { margin: 0; font-family: var(--sans); font-size: 14px; letter-spacing: .02em; color: var(--tenue); }
p, ul, ol, blockquote, figure, table, pre { margin: 0 0 20px; }
article li { margin-bottom: 6px; }
article img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
article figure { margin: 36px 0; }
article figcaption { margin-top: 10px; font-family: var(--sans); font-size: 14px; color: var(--tenue); }
article blockquote { margin-left: 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--acento); font-style: italic; }
article code { font-size: .84em; background: var(--resalte); padding: 1px 5px; border-radius: 3px; }
article pre { overflow-x: auto; background: var(--resalte); padding: 14px 16px; border-radius: 4px; font-size: 15px; line-height: 1.5; }
article pre code { background: none; padding: 0; }
article table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 15px; display: block; overflow-x: auto; }
article th, article td { border-bottom: 1px solid var(--raya); padding: 6px 10px; text-align: left; vertical-align: top; }
article hr { border: 0; border-top: 1px solid var(--raya); margin: 36px 0; }
.footnotes { font-size: 16px; color: var(--tenue); }
.original { margin-top: 36px; font-family: var(--sans); font-size: 15px; color: var(--tenue); }
.volver { margin: 48px 0 0; font-family: var(--sans); font-weight: 700; }
.volver a { text-decoration: none; }
.aviso-borrador { border: 2px dashed var(--acento); color: var(--acento); padding: 8px 14px; margin-bottom: 28px;
                  font-family: var(--sans); font-size: 15px; font-weight: 700; }

/* Índice: en el margen en pantallas anchas; plegado bajo el título en las estrechas */
.indice-lateral { grid-column: 2; padding-top: 150px; font-family: var(--sans); font-size: 14px; }
.indice-lateral .fijo { position: sticky; top: 28px; }
.indice-lateral p, .indice-movil summary { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 700;
                                          letter-spacing: .05em; text-transform: uppercase; color: var(--titulos); }
.indice ul { list-style: none; margin: 10px 0 0; padding: 0 0 0 12px; border-left: 1px solid var(--raya); }
.indice li { margin: 0 0 7px; line-height: 1.35; }
.indice li a { color: var(--tenue); text-decoration: none; }
.indice li a:hover, .indice li a.activo { color: var(--acento); }
.indice-movil { display: none; margin: -8px 0 28px; padding: 10px 0; font-family: var(--sans); font-size: 15px;
                border-top: 1px solid var(--raya); border-bottom: 1px solid var(--raya); }
.indice-movil summary { cursor: pointer; }
.indice-movil ul { margin-bottom: 2px; }

footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
         margin-top: 56px; padding: 20px 0 30px; border-top: 1px solid var(--raya);
         font-family: var(--sans); font-size: 14px; color: var(--tenue); }

@media (max-width: 1080px) {
  .rejilla { grid-template-columns: minmax(0, var(--medida)); }
  .indice-lateral { display: none; }
  .indice-movil { display: block; }
}
@media (max-width: 600px) {
  body { font-size: 18px; }
  main { padding-top: 28px; }
  h1 { font-size: 31px; margin-bottom: 22px; }
  h2 { font-size: 22px; }
  .cabecera .nombre { font-size: 16px; }
  .cabecera nav a { margin-left: 14px; }
}