/* La libreta: arriba anotar, a la izquierda el índice y a la derecha las secciones */
.libreta { padding: 28px 32px 48px; }
.libreta-cab { max-width: 980px; }
.libreta-cab .frase { margin: 0 0 20px; max-width: 46ch; font: 700 25px/1.25 var(--display); letter-spacing: -.022em; color: var(--suave); }
.anotar { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: 10px; align-items: center; }
.libreta-guardado { min-height: 18px; margin: 6px 0 0; font-size: 13px; color: var(--tenue); }
.anotar-cuenta { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.libreta-cuerpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; margin-top: 34px; }
.indice { position: sticky; top: 20px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.indice button { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 0; border-radius: 12px; background: none; color: var(--tinta); font: 600 15px var(--display); letter-spacing: 0; text-align: left; cursor: pointer; transition: background-color .2s ease; }
.indice button:hover { background: var(--elegido); }
.indice .mono { color: var(--suave); font-size: 13px; font-weight: 400; }
.secciones { display: flex; flex-direction: column; gap: 38px; max-width: 820px; }
.seccion h2 { margin: 0 0 14px; font: 800 26px/1.1 var(--display); letter-spacing: -.026em; }
.consigna { margin: 0; color: var(--tenue); font-size: 15px; }
.nota { padding: 13px 15px; border-radius: var(--radio); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra); margin-bottom: 10px; transition: box-shadow .2s ease; }
.nota:focus-within { box-shadow: inset 0 0 0 1px var(--linea-fuerte), var(--sombra); }
.nota-texto { display: block; width: 100%; border: 0; background: none; color: var(--tinta); font: 500 16px/1.45 var(--display); letter-spacing: 0; resize: none; overflow: hidden; padding: 0; }
.nota-texto:focus { outline: none; box-shadow: 0 0 0 2px var(--anillo), 0 0 0 5px var(--halo); border-radius: 6px; }
.nota-abajo { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 13.5px; color: var(--tenue); }
.nota-pie { font-size: 12px; }
.a-ficha, .archivar-nota { border: 0; background: none; font: 600 13.5px var(--display); cursor: pointer; padding: 0; }
.a-ficha { color: var(--tinta); text-underline-offset: 3px; }
.a-ficha:hover { text-decoration: underline; }
.archivar-nota { margin-left: auto; color: var(--tenue); text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.archivar-nota:hover { color: var(--tinta); }
.ya-ficha { color: var(--suave); }
.cuenta { display: grid; grid-template-columns: 170px 1fr; gap: 4px 14px; margin: 10px 0 0; font-size: 14.5px; }
.cuenta dt { color: var(--suave); }
.cuenta dd { margin: 0; overflow-wrap: anywhere; }
.cuenta a { color: var(--tinta); }
.usado { margin-bottom: 14px; }
.usado > a { display: inline-block; margin-bottom: 8px; color: var(--tinta); font-weight: 700; }
@media (max-width: 900px) { .libreta-cuerpo { grid-template-columns: 1fr; } .indice { position: static; } }