/* Análisis: el texto de Luis Costa en cinco claves, con un índice que en pantalla ancha va fijo a la izquierda y, más
   angosta, es una barra arriba con la clave en la que se está, que se abre en la lista (lo arma analisis.js). */

/* ---------- índice + lectura ---------- */
.lectura { max-width: calc(var(--ancho) + 270px); margin: 0 auto; display: grid; grid-template-columns: 230px minmax(0, 1fr);
           gap: 0 24px; align-items: start; padding: 0 16px; }
.lectura > main { max-width: var(--ancho); width: 100%; margin: 0; padding-left: 0; padding-right: 0; }

.indice { position: sticky; top: 0; padding: 40px 0 24px; max-height: 100vh; overflow-y: auto; scrollbar-width: thin; }
.indice-titulo { margin: 0 0 12px; font-family: var(--titulos); font-weight: 700; font-size: 13px; color: var(--gris); }
.indice-actual { display: none; }
.indice ol { list-style: none; margin: 0; padding: 0; counter-reset: clave; border-left: 1px solid var(--linea); }
.indice li { counter-increment: clave; }
.indice ol a { display: grid; grid-template-columns: 22px 1fr; gap: 2px; padding: 7px 0 7px 12px; margin-left: -1px;
               border-left: 2px solid transparent; color: var(--gris); text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.indice ol a::before { content: counter(clave); font-family: var(--titulos); font-weight: 700; color: var(--gris-claro); }
.indice li.fin a::before { content: ""; }
.indice ol a:hover { color: var(--tinta); }
.indice ol a.actual { color: var(--tinta); font-weight: 600; border-left-color: var(--tinta); }
.indice ol a.actual::before { color: var(--tinta); }
.indice ol a.visto::before { color: var(--tinta-2); }

/* ---------- el texto ---------- */
/* la columna del texto va contra el margen izquierdo, alineada con el borde de los gráficos, que van a todo el ancho
   (Luis, 21/10: centrada quedaba corrida respecto de ellos). Lo que comparte lugar con un gráfico (el texto de al lado
   en .par, el título de cada gráfico) queda con su gráfico. Los gráficos de pocas filas van en la columna. */
.lectura main > h1, .lectura main > .clave, .paso > .paso-n, .paso > h2, .texto, .remate, .resumen,
.paso > .como, .paso > .pie, .centrado.angosto { max-width: 700px; margin-left: 0; margin-right: auto; }
.lectura main > .clave { margin-top: 12px; }
.clave + .bloque { margin-top: 48px; }

.paso { scroll-margin-top: 16px; }
.paso-n { margin: 0 0 6px; font-family: var(--titulos); font-weight: 700; font-size: 13px; color: var(--gris); }
.texto { margin-top: 14px; max-width: 70ch; }
.texto p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: var(--tinta-2); }
.texto p:last-child { margin-bottom: 0; }
.texto strong, .clave strong { font-weight: 600; color: var(--tinta); }
.texto.despues { margin-top: 40px; }
.texto + .como { margin-top: 18px; }
/* la frase con que cierra una clave */
.remate { margin: 44px 0 0; padding-left: 16px; border-left: 3px solid var(--naranja); max-width: 60ch;
          font-family: var(--titulos); font-weight: 700; font-size: clamp(18px, 2vw, 21px); line-height: 1.35; color: var(--tinta); }
/* la bajada que se lee como parte del texto: negra y un punto más grande que la de un gráfico */
.como.resaltada { color: var(--tinta); font-size: 16px; }
/* el texto de al lado de un gráfico, a media altura de él */
.par.al-medio { align-items: center; }
.par.al-medio > .prosa { position: static; }
/* gráficos de barras de pocas filas: no a todo el ancho, en la columna del texto (arriba) */

/* entre dos bloques de gráfico y texto de una misma clave: una raya corta, a la izquierda como el texto */
.separador { width: 160px; margin: 56px 0 0; border: 0; border-top: 2px solid var(--gris-claro); }
.separador + .par { margin-top: 48px; }
/* gráfico a la izquierda y texto a la derecha, con lugar para un párrafo largo */
.par.invertido.ancho { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
/* el resumen: los cuatro puntos, cada uno con la clave que lo sostiene */
.resumen { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: punto; max-width: 74ch; }
.resumen li { counter-increment: punto; display: grid; grid-template-columns: 30px 1fr; padding: 12px 0; border-top: 1px solid var(--linea);
              font-size: 17px; line-height: 1.45; color: var(--tinta); }
.resumen li::before { content: counter(punto); font-family: var(--titulos); font-weight: 800; color: var(--gris); }
.resumen li a.ref { grid-column: 2; justify-self: start; margin-top: 4px; font-size: 14px; color: var(--gris);
                    text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- más angosto: el índice pasa a una barra fija arriba ---------- */
@media (max-width: 1339px) {
  .lectura { display: block; max-width: none; padding: 0; }
  .lectura > main { margin: 0 auto; padding-left: 16px; padding-right: 16px; }
  .indice { top: 0; z-index: 4; max-height: none; overflow: visible; padding: 0; background: var(--papel); border-bottom: 1px solid var(--linea); }
  .indice-in { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; position: relative; }
  .indice-titulo { display: none; }
  .indice-actual { display: flex; width: 100%; align-items: baseline; gap: 10px; padding: 10px 0; border: 0; background: none; cursor: pointer;
                   font: inherit; font-size: 14px; color: var(--tinta); text-align: left; }
  .indice-actual b { flex: none; font-family: var(--titulos); color: var(--gris); font-size: 13px; }
  .indice-actual span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .indice-actual i { flex: none; font-style: normal; color: var(--gris); font-size: 13px; }
  .indice-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 8px 16px 16px; background: var(--papel);
                  border-bottom: 1px solid var(--tinta); box-shadow: 0 12px 24px rgba(35, 31, 32, .12); max-height: 70vh; overflow-y: auto; }
  .indice.abierto .indice-panel { display: block; }
  .paso { scroll-margin-top: 56px; }
  .lectura .par > .prosa { top: 60px; }   /* el texto fijo de al lado de un gráfico, debajo de la barra */
}
@media (max-width: 760px) {
  .par.invertido.ancho { grid-template-columns: 1fr; }
  .par.invertido.ancho > .prosa { order: -1; }   /* en el teléfono, el texto antes que su gráfico */
  .texto p { font-size: 16px; }
}