// Styles specific to the "crear libro" page (templates/index.html).

// Width of the index column. Named because the layout needs it twice: once for
// the index itself, once for the empty column mirroring it on the right.
@toc-width: 220px;

#book-writer {
  display: grid;
  // index | book | nothing. The third column is empty on purpose: it mirrors
  // the index's width so the middle column is centred on the page by
  // construction. The old flex row couldn't do this — the index ate 220px off
  // the left and shoved the book off-centre by exactly that much.
  //
  // The middle track is 1fr rather than a content-sized 800px: an fr is sized
  // from the space left over, not from what's inside it, so the book keeps its
  // width while it's still empty and waiting for the first chapter. A
  // content-sized track would start out collapsed and jump wider once prose
  // arrived. #book-content caps itself at 800px inside it.
  grid-template-columns: @toc-width minmax(0, 1fr) @toc-width;
  align-items: start;
  gap: 1em;
}

#book-toc {
  grid-column: 1;
  text-align: left;

  ul {
    padding-left: 10px;

    li {
      margin-bottom: 5px;
    }
  }
}


.live-line {
  opacity: 0.6;
}

#book-modal {
  #book-modal-content {}
}

.nav_pasos {
  background-color: blueviolet;
  padding: 1px;
  background-image: url(../img/bg_menu.jpg);
}

ol {
  display: flex;
  padding: 0px;
  gap: 10px;
  justify-content: space-evenly;

  li {
    list-style: none;
    padding: 0px;
    border: line;
    padding: 5px 50px;

    &.active {
      border: double;
    }
  }
}

section {
  display: none;
  padding: 40px;

  &.active {
    display: block;
  }
}


#book-content {
  grid-column: 2;
  justify-self: center;
  background-color: beige;
  max-height: 70vh;
  overflow-y: scroll;
  color: black;
  width: 100%;
  text-align: left;
  min-height: 680px;
  max-width: 800px;
  padding: 90px;
  background-image:url("../img/paper.png");
      border-radius: 10px;
  h3 {
    text-align: center;
  }
}

// Too narrow for three columns: stack the index above the book rather than
// squeeze both. Source order already puts the index first.
//
// This block has to sit *after* the #book-toc / #book-content rules above, not
// beside the #book-writer one where it reads better. A media query adds no
// specificity of its own, so `grid-column: 2` further down the file would
// simply win over the reset below — and the grid would grow an implicit second
// column to hold the book, quietly turning the single-column layout back into
// two with the index squeezed to nothing.
@media (max-width: 800px) {
  #book-writer {
    grid-template-columns: minmax(0, 1fr);
  }

  #book-toc,
  #book-content {
    grid-column: 1;
  }
}