/* Lo propio de esta página: lo que no está en final.css. Es la plantilla de página de texto:
     la usan también la búsqueda y el 404, sin el índice. */

  /* La fecha arriba del texto y el índice al costado, fijo al bajar */
  .texto-grilla { display: grid; grid-template-columns: 270px minmax(0, 1fr); grid-template-areas: "indice fecha" "indice texto"; gap: 0 88px; align-items: start; }
  .texto-fecha { grid-area: fecha; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 34px; }
  .texto-fecha .marca-ejemplo { align-self: center; }
  .actualizada { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--suave); }
  .actualizada .ic { width: 18px; height: 18px; color: var(--naranjo); }
  .actualizada time { color: var(--carbon); font-weight: 500; }
  .texto-grilla .prosa { grid-area: texto; }
  .prosa > :first-child { margin-top: 0; }

  .indice { grid-area: indice; position: sticky; top: calc(var(--alto-cabecera) + 32px); background: var(--gris-claro); border-radius: 20px; padding: 22px 16px 16px; }
  .indice-titulo { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); padding-left: 12px; }
  .indice ol { display: grid; gap: 2px; margin-top: 12px; }
  .indice a { display: block; padding: 9px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.35; color: var(--gris-hondo); transition: background .2s, color .2s; }
  .indice a:hover { background: #fff; color: var(--carbon); }
  .indice a[aria-current] { background: #fff; color: var(--naranjo-hondo); font-weight: 500; box-shadow: inset 3px 0 0 var(--naranjo); }

  /* Dentro del texto: los botones no llevan el subrayado de los enlaces */
  .prosa a.btn { text-decoration: none; }

  /* Sin títulos de nivel 2 en el texto no hay índice: la fecha y el texto ocupan todo el ancho */
  .texto-grilla.sin-indice { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fecha" "texto"; }

  /* La caja para cambiar la elección de cookies ([fl_cookies]) está en cookies.css, porque la comparte el aviso */

  @media (max-width: 1100px) {
    .texto-grilla { grid-template-columns: 240px minmax(0, 1fr); gap: 0 56px; }
  }
  @media (max-width: 880px) {
    .texto-grilla { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fecha" "indice" "texto"; }
    .texto-fecha { margin-bottom: 24px; }
    .indice { position: static; margin-bottom: 44px; }
  }