/* Molde de entrada — identidad «Taller de precisión».
   Índice, tiempo de lectura, caja de autor, piezas del mismo tema y cierre.
   La medida de lectura vive en el CONTENEDOR de la columna, nunca en cada hijo:
   así ningún bloque queda encogido respecto a sus hermanos. */

.sn-lectura {
  font-family: var(--molde-mono, ui-monospace, "IBM Plex Mono", Consolas, monospace);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 1.35rem;
}

/* Índice: una ficha de taller, no una caja decorativa */
.sn-toc {
  border-top: 3px solid var(--molde-tinta, #0B0D10);
  border-bottom: 1px solid var(--molde-linea, #C9D0D8);
  padding: 1.1rem 0 1.35rem;
  margin: 0 0 2.4rem;
}
.sn-toc__titulo {
  font-family: var(--molde-mono, ui-monospace, "IBM Plex Mono", Consolas, monospace);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 .9rem;
}
.sn-toc__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .45rem 2rem;
  counter-reset: molde-toc;
}
.sn-toc__lista li {
  counter-increment: molde-toc;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: .5rem;
  align-items: baseline;
  margin: 0;
}
.sn-toc__lista li::before {
  content: counter(molde-toc, decimal-leading-zero);
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  color: var(--molde-senal, #E74235);
  font-weight: 500;
}
.sn-toc__lista a {
  color: var(--molde-tinta, #0B0D10);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  line-height: 1.35;
}
.sn-toc__lista a:hover,
.sn-toc__lista a:focus-visible {
  border-bottom-color: var(--molde-senal, #E74235);
}

/* Ancla con holgura: un titular al que se salta no queda pegado al borde */
.entry-content h2[id],
.nv-entry-content h2[id],
.nv-prose h2[id] { scroll-margin-top: 2.5rem; }

/* Caja de autor: identidad, no adorno */
.sn-autor {
  border-top: 1px solid var(--molde-linea, #C9D0D8);
  margin: 3rem 0 0;
  padding: 1.6rem 0 0;
}
.sn-autor__rotulo {
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 .5rem;
}
.sn-autor__nombre {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 .4rem;
}
.sn-autor__bio {
  color: var(--molde-texto2, #2A3341);
  margin: 0 0 .6rem;
}
.sn-autor__enlace a { color: var(--molde-accion, #B32418); }

/* Del mismo tema */
.sn-relacionados {
  border-top: 1px solid var(--molde-linea, #C9D0D8);
  margin: 2.4rem 0 0;
  padding: 1.6rem 0 0;
}
.sn-relacionados__titulo {
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 .8rem;
}
.sn-relacionados ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.sn-relacionados li {
  margin: 0;
  border-bottom: 1px solid var(--molde-linea, #C9D0D8);
}
.sn-relacionados li:last-child { border-bottom: 0; }
.sn-relacionados a {
  display: block;
  padding: .75rem 0;
  color: var(--molde-tinta, #0B0D10);
  text-decoration: none;
  font-weight: 600;
}
.sn-relacionados a:hover,
.sn-relacionados a:focus-visible { color: var(--molde-accion, #B32418); }

/* Cierre: una sola acción */
.sn-cierre {
  background: var(--molde-tinta, #0B0D10);
  color: #FAFBFC;
  padding: 1.9rem 1.9rem 2rem;
  margin: 2.6rem 0 0;
}
.sn-cierre__titulo {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .55rem;
  color: #FAFBFC;
}
.sn-cierre__texto {
  color: #D9DDE3;
  margin: 0 0 1.3rem;
}
.sn-cierre__accion {
  display: inline-block;
  padding: .85rem 1.5rem;
  background: var(--molde-senal, #E74235);
  color: var(--molde-tinta, #0B0D10);
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  box-sizing: border-box;
}
.sn-cierre__accion:hover,
.sn-cierre__accion:focus-visible { background: #F4695E; color: var(--molde-tinta, #0B0D10); }

@media (max-width: 640px) {
  .sn-toc__lista { grid-template-columns: 1fr; }
  .sn-cierre { padding: 1.5rem 1.25rem 1.6rem; }
  .sn-cierre__accion { display: block; text-align: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .sn-toc__lista a { transition: border-color .15s ease; }
}

/* Respuesta directa: el pasaje citable, lo primero que se lee */
.sn-resumen {
  border-left: 3px solid var(--molde-senal, #E74235);
  background: #F1F3F5;
  padding: 1.1rem 1.4rem 1.2rem;
  margin: 0 0 2rem;
}
.sn-resumen__rotulo {
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 .5rem;
}
.sn-resumen__texto {
  margin: 0;
  font-size: 1.06em;
  line-height: 1.55;
  color: var(--molde-tinta, #0B0D10);
}

/* Tablas y código anchos: scrollean dentro de su caja; el cuerpo nunca de lado */
.sn-desbordable {
  overflow-x: auto;
  max-width: 100%;
  margin: 1.4rem 0;
  -webkit-overflow-scrolling: touch;
}
.sn-desbordable > table,
.sn-desbordable > figure { margin: 0; min-width: 30rem; }
.sn-desbordable > pre { margin: 0; }
.sn-desbordable:focus-visible { outline: 2px solid var(--molde-accion, #B32418); outline-offset: 2px; }

/* El extracto de la tarjeta llevaba medida propia y quedaba encogido respecto al
   titular, su hermano: la medida la fija la columna, no cada hijo. */
.nv-entry-card__body p { max-width: none; }
.sn-entry-card__media { display: block; line-height: 0; }
.sn-entry-card__media img { width: 100%; height: auto; display: block; border: 1px solid #C9D0D8; }
.sn-entry-card__cluster a { color: #B32418; text-decoration: none; font-weight: 600; }
.sn-entry-card__cluster a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .sn-entry-card__media { max-width: 220px; }
  .sn-entry-card--con-media { grid-template-columns: auto 220px minmax(0, 1fr) auto !important; }
}
@media (max-width: 899px) {
  .sn-entry-card__media { max-width: 100%; margin-bottom: .9rem; }
}

/* La cabecera de la entrada iba a ancho completo con el subtítulo estrechado a 768 px
   por su cuenta: el titular y su bajada quedaban descuadrados entre sí y respecto al
   cuerpo. La medida se lleva al CONTENEDOR y todos los bloques la comparten. */
@media (min-width: 900px) {
  .nv-entry-header--article {
    max-width: 784px;
    margin-left: auto;
    margin-right: auto;
  }
  .nv-entry-header--article .nv-entry-deck { max-width: none; }
  .nv-entry-media { max-width: 784px; margin-left: auto; margin-right: auto; }
}

/* ── El ancho se LLENA, no se estrecha ──────────────────────────────────────
   Un artículo largo necesita medida de lectura, pero dejar 500 px en blanco al
   lado es desaprovechar media pantalla. La salida es componer: se ensancha el
   CONTENEDOR de la entrada y el hueco lo ocupa el índice, que además se queda a
   la vista mientras se lee. El texto conserva una medida legible. */
@media (min-width: 1240px) {
  /* El contenedor del tema acotaba a 784 px: la composición tiene que ocurrir
     por fuera de esa caja, no dentro, o la rejilla parte el texto en dos. */
  /* Estos contenedores traen un ancho fijo del tema: max-width solo no los ensancha. */
  .nv-entry-content, .nv-container--editorial,
  .entry-content, .content-shell--article {
    max-width: 1240px !important;
    width: 100% !important;
  }
  .nv-entry-header--article, .entry__header {
    max-width: 1240px !important;
  }

  /* El tema aplica su medida de lectura a los hijos del contenedor, así que la
     rejilla la heredaba y volvía a partirse en 784 px. Aquí se anula: la medida
     la fija la columna de texto, no el envoltorio. */
  .sn-entrada-compuesta {
    max-width: none;
    width: 100%;
    display: grid;
    /* 780 + 56 + 404 = 1240: llena el ancho útil y la línea se queda en ~78
       caracteres, por debajo del límite de legibilidad. */
    grid-template-columns: minmax(0, 780px) 404px;
    gap: 56px;
    align-items: start;
  }
  .sn-entrada-compuesta > .sn-toc {
    position: sticky;
    top: 24px;
    grid-column: 2;
    grid-row: 1 / span 99;
    border-top: 3px solid var(--molde-tinta, #0B0D10);
    border-bottom: none;
    margin: 0;
    padding: 1rem 0 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .sn-entrada-compuesta > .sn-toc .sn-toc__lista {
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
  }
  .sn-entrada-compuesta > .sn-toc .sn-toc__lista a { font-size: .92rem; }
  /* El tema estrecha CADA hijo a la medida de lectura; dentro de la rejilla la
     medida la fija la columna, así que los hijos la ocupan entera. */
  .sn-entrada-compuesta > *:not(.sn-toc) { grid-column: 1; max-width: none; width: 100%; }

  /* La bajada del titular, en dos columnas: el ancho se llena sin estirar la línea. */
  .nv-entry-deck, .entry__deck {
    columns: 2;
    column-gap: 56px;
  }
}

/* La caja de autor del tema quedó a 1.102 px al ensanchar el contenedor: 131
   caracteres por línea. Se acota a la columna de texto, que es donde se lee. */
@media (min-width: 1240px) {
  .author-box, .sn-autor, .nv-autor,
  .entry__footer, .nv-entry-footer { max-width: 780px; }
}

/* En móvil, la caja de autor del tema dejaba su texto al 59 % del ancho por el
   hueco del avatar: por debajo de 700 px se apila y el texto ocupa la línea entera. */
@media (max-width: 700px) {
  .author-box, .sn-autor, .nv-autor { display: block; }
  .author-box > *, .sn-autor > *, .nv-autor > * { max-width: none; width: 100%; }
}