/* Cuadernos de espiral: cada cuaderno se ve como un cuaderno de anillas sobre el fondo, sin recuadro.
   Color propio (--nb), anillas negras a la izquierda, borde de hojas, y una franja en la mitad con
   nombre, fecha y hora. Los botones Anclar, Color y Eliminar van encima del cuaderno. */

/* ---------- La biblioteca: cuadrícula de cuadernos sin cajas ---------- */
body #view-notes .notebooks-grid:has(> .ian-nb) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 30px 28px !important;
  align-items: start !important;
  justify-items: center !important;
  padding: 12px 8px 6px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
@media (min-width: 600px) { body #view-notes .notebooks-grid:has(> .ian-nb) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 900px) { body #view-notes .notebooks-grid:has(> .ian-nb) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

body #view-notes .ian-nb {
  position: relative;
  width: 100%;
  max-width: 178px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  container-type: inline-size;
}
body #view-notes .ian-nb-open {
  all: unset;
  display: block;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body #view-notes .ian-nb-open.in-trash { cursor: default; opacity: .72; }
body #view-notes .ian-nb-open:focus-visible .ian-nb-body { outline: 3px solid #fff; outline-offset: 3px; }
body #view-notes .ian-nb-meta { display: none; }

/* ---------- La portada ---------- */
body .ian-nb-cover {
  --nb: #FFB420;
  --nb-dark: #8a5a00;
  --nb-light: #ffd98a;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  transition: transform .15s ease;
}
body #view-notes .ian-nb-open:not(.in-trash):hover .ian-nb-cover { transform: translateY(-3px); }
body #view-notes .ian-nb-open:not(.in-trash):active .ian-nb-cover { transform: scale(.985); }

/* Hojas que asoman a la derecha y abajo, y el borde oscuro de atrás a la izquierda. */
body .ian-nb-pages {
  position: absolute;
  inset: 3px -4px -4px 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ece7dc, #fbf8f1 30%, #ece7dc);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
body .ian-nb-pages::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 2px;
  bottom: -2px;
  width: 16px;
  border-radius: 3px 0 0 3px;
  background: var(--nb-dark);
}
body .ian-nb-body {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 3px 5px 5px 3px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, .22) 100%),
    linear-gradient(135deg, var(--nb-light) 0%, var(--nb) 36%, var(--nb) 72%, color-mix(in srgb, var(--nb) 86%, #0b1233) 100%);
  box-shadow: 0 12px 20px rgba(0, 0, 0, .45), 0 3px 5px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .1);
}

/* Anillas negras sobre el borde izquierdo (con su agujero en la portada). */
body .ian-nb-rings {
  position: absolute;
  left: -9px;
  top: 5%;
  bottom: 5%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  pointer-events: none;
}
body .ian-nb-rings i {
  position: relative;
  display: block;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, #6a6a6a 0%, #131d46 42%, #0d1537 62%, #212f66 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
}
body .ian-nb-rings i::before {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
}
body .ian-nb-rings i::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 40%;
  top: 2px;
  height: 1px;
  background: rgba(255, 255, 255, .55);
}

/* Franja de la mitad: nombre, fecha y hora. */
body .ian-nb-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  z-index: 2;
  display: grid;
  gap: 3px;
  box-sizing: border-box;
  padding: 8px 7px 8px 17px;
  background: rgba(255, 255, 255, .95);
  color: #16202c;
  text-align: left;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 -1px 0 rgba(0, 0, 0, .1);
}
body .ian-nb-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
body .ian-nb-mark { font-size: 1.05em; }
body .ian-nb-name.is-long { font-size: 10.5px; }
@container (max-width: 165px) {
  body .ian-nb-name { font-size: 12px; }
  body .ian-nb-stamp { font-size: 10px; }
}
body .ian-nb-stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #4a5b6e;
}
body .ian-nb-stamp time { white-space: nowrap; }

/* Portada pequeña (cabecera del cuaderno abierto y vista de lista): solo se ve la franja. */
body .ian-nb-cover.is-compact .ian-nb-name,
body .ian-nb-cover.is-compact .ian-nb-stamp { display: none; }
body .ian-nb-cover.is-compact .ian-nb-band { top: 42%; height: 18%; padding: 0; }
body .ian-nb-cover.is-compact .ian-nb-rings { left: -6px; width: 16px; }
body .ian-nb-cover.is-compact .ian-nb-rings i { height: 4px; }
body .ian-nb-cover.is-compact .ian-nb-body { box-shadow: 0 4px 8px rgba(0, 0, 0, .4); }

/* ---------- Botones sobre el cuaderno ---------- */
body #view-notes .ian-nb-actions {
  position: absolute;
  right: 8px;
  bottom: 9px;
  z-index: 6;
  display: flex;
  gap: 5px;
}
body #view-notes .ian-nb-btn {
  all: unset;
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(12, 16, 22, .66);
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease, background .15s ease;
}
body #view-notes .ian-nb-btn::before { content: ""; position: absolute; inset: -5px; }
body #view-notes .ian-nb-btn:hover { background: rgba(12, 16, 22, .85); transform: scale(1.08); }
body #view-notes .ian-nb-btn:active { transform: scale(.92); }
body #view-notes .ian-nb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body #view-notes .ian-nb-btn[data-tone="pin"][aria-pressed="true"] { background: #FFD23F; color: #121b42; border-color: #fff; }
body #view-notes .ian-nb-btn[data-tone="trash"], body #view-notes .ian-nb-btn[data-tone="delete-permanent"] { color: #ffb4b4; }
body #view-notes .ian-nb-btn[data-tone="restore"], body #view-notes .ian-nb-btn[data-tone="archive"] { color: #9dffbd; }
body #view-notes .ian-nb-btn svg { width: 16px; height: 16px; }
@container (max-width: 150px) {
  body #view-notes .ian-nb-actions { right: 6px; bottom: 7px; gap: 4px; }
  body #view-notes .ian-nb-btn { width: 27px; height: 27px; }
  body #view-notes .ian-nb-btn svg { width: 14px; height: 14px; }
}

/* Marca de anclado / estado arriba a la derecha. */
body #view-notes .ian-nb-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFD23F;
  color: #121b42;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  pointer-events: none;
}
body #view-notes .ian-nb-badge svg { width: 14px; height: 14px; }
body #view-notes .ian-nb-badge.is-text {
  width: auto;
  height: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(12, 16, 22, .78);
  color: #fff;
  font: 700 10px/1.2 Manrope, system-ui, sans-serif;
}

/* ---------- Vista de lista: portada pequeña a la izquierda y datos al lado ---------- */
body #view-notes .mockup-list .notebooks-grid:has(> .ian-nb) { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; justify-items: stretch !important; }
body #view-notes .mockup-list .ian-nb { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
body #view-notes .mockup-list .ian-nb-open { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 22px; align-items: center; padding-left: 12px; }
body #view-notes .mockup-list .ian-nb-cover { width: 76px; }
body #view-notes .mockup-list .ian-nb-cover .ian-nb-name, body #view-notes .mockup-list .ian-nb-cover .ian-nb-stamp { display: none; }
body #view-notes .mockup-list .ian-nb-cover .ian-nb-band { top: 42%; height: 18%; padding: 0; }
body #view-notes .mockup-list .ian-nb-cover .ian-nb-rings { left: -6px; width: 16px; }
body #view-notes .mockup-list .ian-nb-cover .ian-nb-rings i { height: 4px; }
body #view-notes .mockup-list .ian-nb-meta { display: grid; gap: 3px; min-width: 0; }
body #view-notes .mockup-list .ian-nb-meta strong { font-size: .98rem; overflow-wrap: anywhere; }
body #view-notes .mockup-list .ian-nb-meta small { color: var(--muted, #9db0a6); font-size: .78rem; }
body #view-notes .mockup-list .ian-nb-actions { position: static; }
body #view-notes .mockup-list .ian-nb-badge { top: 4px; left: 60px; right: auto; }

/* ---------- Ventanas: vista previa del cuaderno al crear y al cambiar el color ---------- */
body dialog .notebook-create-cover { display: grid; gap: 10px; margin: 6px 0 12px; }
body dialog .notebook-create-preview,
body dialog .notebook-color-preview {
  display: flex !important;
  justify-content: center;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body dialog .notebook-create-preview .ian-nb-cover,
body dialog .notebook-color-preview .ian-nb-cover { width: 150px; max-width: 46vw; margin-left: 10px; }
body dialog .notebook-create-color-picker h3 { margin: 0 0 4px; font-size: .95rem; }

/* ---------- Cuaderno abierto: una sola fila de botones, texto siempre completo, protegido o en edición ---------- */
body dialog.notebook-book-dialog .book-head {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 0 !important;
  padding: 8px 8px !important;
  border-bottom: 2px solid transparent !important;
  transition: border-color .2s ease;
}
/* Editando: una línea de color de prevención (ámbar suave), sin letreros. */
body dialog.notebook-book-dialog:not(.is-locked) .book-head { border-bottom-color: rgba(255, 176, 32, .6) !important; }

/* Botones sin cajas: círculos suaves con el ícono dentro. */
body dialog.notebook-book-dialog .book-icon-btn,
body dialog.notebook-book-dialog .book-more-menu > summary {
  all: unset;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: rgba(128, 128, 128, .16);
  color: inherit;
  font-size: 20px;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, transform .1s ease;
}
body dialog.notebook-book-dialog .book-more-menu > summary::-webkit-details-marker { display: none; }
body dialog.notebook-book-dialog .book-icon-btn:hover,
body dialog.notebook-book-dialog .book-more-menu > summary:hover { background: rgba(128, 128, 128, .3); }
body dialog.notebook-book-dialog .book-icon-btn:active,
body dialog.notebook-book-dialog .book-more-menu > summary:active { transform: scale(.92); }
body dialog.notebook-book-dialog .book-icon-btn:focus-visible,
body dialog.notebook-book-dialog .book-more-menu > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
body dialog.notebook-book-dialog .book-icon-btn svg { width: 17px; height: 17px; }
body dialog.notebook-book-dialog .book-more-menu { flex: 0 0 auto; }
/* Dentro del menú ⋮ todas las opciones llevan la misma letra (el título de «Añadir contenido» salía más grande). */
body dialog.notebook-book-dialog .book-more-panel summary { font-size: .8rem !important; list-style: none; }

/* Portada pequeña y nombre con su candadito. */
body dialog.notebook-book-dialog .book-head-title {
  display: flex !important;
  align-items: center;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 8px;
  margin: 0 !important;
}
body dialog.notebook-book-dialog .book-head-title > div { flex: 1 1 auto; min-width: 0; }
body dialog.notebook-book-dialog .book-head-title .eyebrow { display: none !important; }
/* La portada pequeña se quita de la fila para que el nombre del cuaderno se lea completo. */
body dialog.notebook-book-dialog .book-head-title .book-cover {
  display: none !important;
  flex: 0 0 auto;
  width: 24px !important;
  min-width: 0 !important;
  max-width: 24px !important;
  height: auto !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body dialog.notebook-book-dialog .book-cover .ian-nb-cover { width: 100%; }
body dialog.notebook-book-dialog .book-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
body dialog.notebook-book-dialog .book-head-title input.book-name {
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis;
}
body dialog.notebook-book-dialog .book-lock-icon { flex: 0 0 auto; display: grid; place-items: center; opacity: .85; }
body dialog.notebook-book-dialog .book-lock-icon svg { width: 15px; height: 15px; }
body dialog.notebook-book-dialog:not(.is-locked) .book-lock-icon { color: #FFB020; opacity: 1; }
body dialog.notebook-book-dialog .book-head-title small { display: block; margin-top: 1px; font-size: 9px; }
body dialog.notebook-book-dialog .book-head-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px !important;
  margin: 0 !important;
}
body dialog.notebook-book-dialog .book-page-counter,
body dialog.notebook-book-dialog .book-save-button { display: none !important; }

/* Editar: color informativo (azul). Al estar editando, «Listo» toma un color de prevención suave (ámbar). */
body dialog.notebook-book-dialog .book-edit-button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  height: 30px;
  padding: 0 11px 0 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 700 .78rem/1 Manrope, system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
body dialog.notebook-book-dialog .book-edit-button:active { transform: scale(.95); }
body dialog.notebook-book-dialog .book-edit-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
body dialog.notebook-book-dialog .book-edit-button svg { width: 15px; height: 15px; }
body dialog.notebook-book-dialog.is-locked .book-edit-button { background: #2F80ED; color: #fff; box-shadow: 0 2px 8px rgba(47, 128, 237, .4); }
body dialog.notebook-book-dialog:not(.is-locked) .book-edit-button { background: rgba(255, 176, 32, .2); color: #FFC766; border-color: rgba(255, 176, 32, .75); }
:root[data-theme="light"] body dialog.notebook-book-dialog:not(.is-locked) .book-edit-button { color: #8a5200; }
:root[data-theme="light"] body dialog.notebook-book-dialog:not(.is-locked) .book-lock-icon { color: #c77d00; }

/* La hoja en edición lleva el mismo color de prevención en su borde. */
body dialog.notebook-book-dialog:not(.is-locked) .book-page-content { border-color: rgba(255, 176, 32, .7) !important; box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .3); }

/* El texto se ve completo todo el tiempo: se ajusta al ancho de la hoja, sin correr hacia un lado ni cuadrito para estirar. */
body dialog.notebook-book-dialog .book-layout,
body dialog.notebook-book-dialog .book-layout > * { min-width: 0; }
body dialog.notebook-book-dialog .book-page { min-width: 0 !important; max-width: 100%; }
body dialog.notebook-book-dialog .book-page-content {
  max-width: 100% !important;
  box-sizing: border-box;
  overflow-x: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  resize: none !important;
}
body dialog.notebook-book-dialog .book-page-content :is(p, div, span, li, td, th, h1, h2, h3, blockquote) { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
body dialog.notebook-book-dialog .book-page-content pre { white-space: pre-wrap; max-width: 100%; }
body dialog.notebook-book-dialog .book-page-content :is(img, video, table) { max-width: 100%; height: auto; }

/* Mientras está protegido no se ve nada que escriba, borre o cambie las páginas (crear una página nueva sí se puede). */
body dialog.notebook-book-dialog.is-locked :is(.book-editor-toolbar, .notebook-tools, .notebook-emoji-picker, [data-remove-notebook-asset], .page-actions, .book-tasks [data-task-form], .book-tasks [data-task-edit], .book-tasks [data-task-delete], .book-tasks .trash-action) { display: none !important; }
body dialog.notebook-book-dialog.is-locked .book-page-content { cursor: default; -webkit-user-select: text; user-select: text; caret-color: transparent; }
body dialog.notebook-book-dialog.is-locked .book-name,
body dialog.notebook-book-dialog.is-locked .book-page-title { cursor: default; }

/* ---------- Secciones: círculo de color que abre la barra ---------- */
body dialog.notebook-sections-dialog .section-color-chip {
  all: unset;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--chip, #4DA3FF);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 2px 5px rgba(0, 0, 0, .35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body dialog.notebook-sections-dialog .section-color-chip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body dialog.notebook-sections-dialog .section-color-chip[aria-expanded="true"] { transform: scale(1.1); }
body dialog.notebook-sections-dialog .section-color-pop { margin: 4px 0 12px; }
body dialog.notebook-sections-dialog .section-color-pop[hidden] { display: none; }
body dialog.notebook-sections-dialog .section-create-form,
body dialog.notebook-sections-dialog .section-manager-row { display: flex; align-items: center; gap: 8px; }
body dialog.notebook-sections-dialog .section-create-form input[name="name"],
body dialog.notebook-sections-dialog .section-manager-row > input { flex: 1 1 auto; min-width: 0; }

/* ---------- Versiones anteriores ---------- */
body dialog.notebook-versions-dialog { width: min(100%, 460px); max-width: 100%; }
body dialog.notebook-versions-dialog .notebook-versions-list { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
body dialog.notebook-versions-dialog .notebook-versions-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, rgba(128, 128, 128, .4)); border-radius: 12px; }
body dialog.notebook-versions-dialog .notebook-versions-list small { display: block; opacity: .75; }
body dialog.notebook-versions-dialog .notebook-versions-empty { margin: 14px 0; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  body .ian-nb-cover, body #view-notes .ian-nb-btn { transition: none; }
}

/* ---------- Cuaderno abierto en pantalla completa: la hoja llena el celular ---------- */
body dialog.notebook-book-dialog.ian-book {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
body dialog.notebook-book-dialog.ian-book[open] { display: flex !important; flex-direction: column; }
body dialog.ian-book .book-head { flex: 0 0 auto; position: relative !important; }

/* Materias: pestañas pequeñas de colores, como las divisiones de un cuaderno de varias materias. */
body dialog.ian-book .book-tabs {
  flex: 0 0 auto;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 4px 8px 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
body dialog.ian-book .book-tabs::-webkit-scrollbar { display: none; }
body dialog.ian-book .book-tab { flex: 0 0 auto; min-height: 30px !important; padding: 4px 11px !important; font-size: .76rem !important; border-radius: 10px 10px 0 0 !important; }

body dialog.ian-book .book-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body dialog.ian-book .book-page {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
}

/* Fila pequeña sobre la hoja: chapita con el nombre de la página y chapita con «1/3». */
body dialog.ian-book .book-sheet-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 4px; }
body dialog.ian-book .sheet-chip {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 70%;
  height: 28px;
  padding: 0 12px 0 9px;
  border-radius: 999px;
  background: rgba(128, 128, 128, .18);
  color: inherit;
  font: 700 .76rem/1 Manrope, system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, transform .1s ease;
}
body dialog.ian-book .sheet-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
body dialog.ian-book .sheet-chip svg { flex: 0 0 auto; width: 14px; height: 14px; }
body dialog.ian-book .sheet-count-chip { flex: 0 0 auto; padding: 0 12px; font-variant-numeric: tabular-nums; }
body dialog.ian-book .sheet-chip:hover { background: rgba(128, 128, 128, .32); }
body dialog.ian-book .sheet-chip:active { transform: scale(.95); }
body dialog.ian-book .sheet-chip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Herramientas de escritura (solo al editar): una sola fila que se desliza. */
body dialog.ian-book .book-editor-toolbar {
  flex: 0 0 auto;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 4px !important;
  margin: 0 8px 6px !important;
  padding: 5px 6px !important;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 12px !important;
}
body dialog.ian-book .book-editor-toolbar::-webkit-scrollbar { display: none; }
body dialog.ian-book .book-editor-toolbar > * { flex: 0 0 auto; }

/* La hoja: un papel completo con las anillas del cuaderno a la izquierda. */
body dialog.ian-book .book-leaf-host { position: relative; flex: 1 1 auto; min-height: 0; margin: 4px 8px 0; perspective: 1500px; touch-action: pan-y; }
body dialog.ian-book .book-leaf {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--page-background, #fffdf5);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .42);
  touch-action: pan-y;
}
body dialog.ian-book .book-page-content {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  padding: 14px !important;
  touch-action: pan-y;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  overflow-y: auto !important;
}
/* «Insertar»: una fila discreta y pequeña al pie de la hoja (con la tinta oscura de la hoja). */
body dialog.ian-book .book-leaf .notebook-tools {
  flex: 0 0 auto;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 5px !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  overflow-x: auto;
  scrollbar-width: none;
  border: 0 !important;
  border-top: 1px solid rgba(33, 48, 71, .14) !important;
  border-radius: 0 !important;
  background: rgba(33, 48, 71, .05) !important;
}
body dialog.ian-book .book-leaf .notebook-tools::-webkit-scrollbar { display: none; }
body dialog.ian-book .book-leaf .notebook-tools > strong { display: none; }
body dialog.ian-book .book-leaf .notebook-tools > button {
  flex: 0 0 auto;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 5px;
  min-height: 0 !important;
  height: 28px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(33, 48, 71, .22) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .7) !important;
  color: #213047 !important;
  font: 700 .72rem/1 Manrope, system-ui, sans-serif !important;
  box-shadow: none !important;
}
body dialog.notebook-book-dialog:not(.is-locked).ian-book .book-page-content { box-shadow: none; }
body dialog.notebook-book-dialog:not(.is-locked).ian-book .book-leaf { box-shadow: 0 0 0 2px rgba(255, 176, 32, .7), 0 8px 20px rgba(0, 0, 0, .42); }

/* Barra de abajo: hoja anterior, color de hoja, tamaño de lectura y hoja siguiente. */
body dialog.ian-book .book-turn-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); }
body dialog.ian-book .turn-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 46px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(128, 128, 128, .2);
  color: inherit;
  font: 700 .78rem/1 Manrope, system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, transform .1s ease, opacity .15s ease;
}
body dialog.ian-book .turn-btn svg { width: 20px; height: 20px; }
body dialog.ian-book .turn-sheet svg { width: 16px; height: 16px; }
body dialog.ian-book .turn-btn:hover:not(:disabled) { background: rgba(128, 128, 128, .34); }
body dialog.ian-book .turn-btn:active:not(:disabled) { transform: scale(.94); }
body dialog.ian-book .turn-btn:disabled { opacity: .28; cursor: default; }
body dialog.ian-book .turn-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
body dialog.ian-book .book-turn-bar .page-zoom-controls { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; }
body dialog.ian-book .book-turn-bar .page-zoom-controls button {
  all: unset;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(128, 128, 128, .2);
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
body dialog.ian-book .book-turn-bar .page-zoom-controls output { min-width: 38px; text-align: center; font: 700 .72rem/1 Manrope, system-ui, sans-serif; opacity: .85; }

/* Paneles que se abren desde abajo (página, lista de páginas, hoja, tareas). */
body dialog.ian-book .sheet-pop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  max-height: 74%;
  overflow: hidden;
  background: var(--panel, #10211f);
  color: var(--text, #e8f5f0);
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .5);
  animation: ian-pop-up .18s ease-out;
}
body dialog.ian-book .sheet-pop[hidden] { display: none; }
body dialog.ian-book .sheet-pop-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px 16px; }
body dialog.ian-book .sheet-pop-head strong { flex: 1 1 auto; font-size: .95rem; }
body dialog.ian-book .sheet-pop-head small { opacity: .7; font-weight: 700; }
body dialog.ian-book .sheet-pop-body { display: grid; gap: 10px; padding: 4px 14px 16px; overflow-y: auto; }
body dialog.ian-book .sheet-pop-scrim { position: absolute; inset: 0; z-index: 29; padding: 0; border: 0; background: rgba(0, 0, 0, .4); cursor: default; }
body dialog.ian-book .sheet-pop-scrim[hidden] { display: none; }
@keyframes ian-pop-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
body dialog.ian-book .sheet-pop .pop-field { display: grid; gap: 4px; margin: 0; font-size: .74rem; font-weight: 700; color: var(--muted, #9db0a6); }
body dialog.ian-book .sheet-pop .pop-inline { grid-auto-flow: column; align-items: center; justify-content: space-between; }
body dialog.ian-book .sheet-pop input:not([type="checkbox"]):not([type="color"]),
body dialog.ian-book .sheet-pop select { box-sizing: border-box; width: 100%; padding: 9px 10px; border: 1px solid rgba(128, 128, 128, .4); border-radius: 10px; background: rgba(128, 128, 128, .14); color: inherit; font: 600 .9rem Manrope, system-ui, sans-serif; }
body dialog.ian-book .sheet-pop .pop-inline input { width: 70px; text-align: center; }
body dialog.ian-book .sheet-pop .book-page-title { font-size: .95rem !important; font-weight: 700 !important; border: 1px solid rgba(128, 128, 128, .4) !important; border-radius: 10px !important; background: rgba(128, 128, 128, .14) !important; color: inherit !important; padding: 9px 10px !important; }
body dialog.ian-book .sheet-pop .page-number { width: 70px !important; border: 1px solid rgba(128, 128, 128, .4) !important; border-radius: 10px !important; background: rgba(128, 128, 128, .14) !important; color: inherit !important; padding: 9px 6px !important; }
body dialog.ian-book .sheet-pop .page-actions-panel { position: static !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body dialog.ian-book .sheet-pop .page-actions-panel button { justify-content: center; }
body dialog.ian-book .sheet-pop .page-trash { border: 1px solid rgba(128, 128, 128, .35); border-radius: 12px; padding: 8px 10px; }
body dialog.ian-book .sheet-pop .page-trash summary { cursor: pointer; font-size: .82rem; font-weight: 800; }
body dialog.ian-book .sheet-pop .page-trash-list { display: grid; gap: 8px; margin-top: 8px; }
body dialog.ian-book .sheet-pop .page-trash-row { display: flex; align-items: center; gap: 8px; }
body dialog.ian-book .sheet-pop .page-trash-row > span { flex: 1 1 auto; min-width: 0; display: grid; }
body dialog.ian-book .sheet-pop .page-trash-row small { opacity: .7; font-size: .7rem; }
body dialog.ian-book .sheet-pop .page-trash-row button { flex: 0 0 auto; padding: 6px 10px; font-size: .74rem; }
body dialog.notebook-book-dialog.is-locked .page-trash { display: none; }
body dialog.ian-book .sheet-pop .page-browser { border: 0; background: none; }
body dialog.ian-book .sheet-pop .page-browser-body { padding: 0; }
body dialog.ian-book .sheet-pop .book-tasks { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
body dialog.ian-book .sheet-pop .notebook-settings { border: 0; background: none; }
body dialog.ian-book .sheet-pop .notebook-settings-panel { padding: 0; }

/* Panel de color de la hoja: bajito, para ver cómo cambia la hoja mientras se pasa por los colores. */
body dialog.ian-book .notebook-hive-panel { gap: 6px; max-height: 44% !important; padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); }
body dialog.ian-book .notebook-hive-panel header small { display: none; }
body dialog.ian-book .notebook-hive-panel h3 { margin: 0; font-size: 1rem; }
body dialog.ian-book .notebook-hive-panel header button { width: 34px; height: 34px; font-size: 20px; }
body dialog.ian-book .notebook-hive-panel .notebook-hive-preview { display: none; }
body dialog.ian-book .notebook-hive-panel footer { position: static; padding: 4px 0 0; }
body dialog.ian-book .notebook-hive-panel .primary-button { min-height: 40px; }

/* Significado de una palabra: subrayado de puntos y un numerito pequeño arriba; al tocarla sale un cuadrito con lo que escribiste. */
.book-page-content, .reader-content { counter-reset: ian-gloss; }
.ian-gloss { counter-increment: ian-gloss; border-bottom: 1.5px dotted currentColor; cursor: help; }
.ian-gloss::after {
  content: counter(ian-gloss);
  display: inline-block;
  margin-left: 2px;
  padding: .2em .45em;
  border-radius: 999px;
  background: rgba(47, 128, 237, .16);
  color: #2f6fd0;
  font: 800 .56em/1 Manrope, system-ui, sans-serif;
  vertical-align: super;
  -webkit-user-select: none;
  user-select: none;
}
body dialog.ian-book .ian-gloss-pop {
  position: absolute;
  z-index: 12;
  box-sizing: border-box;
  width: max-content;
  max-width: min(260px, 88%);
  padding: 9px 11px;
  border: 1px solid #e6c453;
  border-radius: 12px;
  background: #fff7d6;
  color: #3a2b00;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
  font-family: Manrope, system-ui, sans-serif;
  animation: ian-pop-up .14s ease-out;
}
body dialog.ian-book .ian-gloss-pop strong { display: block; margin-bottom: 3px; font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; color: #8a6a00; }
body dialog.ian-book .ian-gloss-pop p { margin: 0; font-size: .86rem; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
body dialog.ian-book .ian-gloss-pop .gloss-actions { display: flex; gap: 6px; margin-top: 8px; }
body dialog.ian-book .ian-gloss-pop .gloss-actions button { all: unset; box-sizing: border-box; padding: 5px 11px; border: 1px solid #d9b73d; border-radius: 999px; background: rgba(255, 255, 255, .7); font: 700 .72rem/1 Manrope, system-ui, sans-serif; cursor: pointer; }
body dialog.gloss-dialog { width: min(92vw, 400px); padding: 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; background: var(--panel, #10211f); color: var(--text, #e8f5f0); }
body dialog.gloss-dialog::backdrop { background: rgba(0, 0, 0, .55); }
body dialog.gloss-dialog h2 { margin: 2px 0 10px; font-size: 1.1rem; overflow-wrap: anywhere; }
body dialog.gloss-dialog textarea { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid rgba(128, 128, 128, .45); border-radius: 12px; background: rgba(128, 128, 128, .14); color: inherit; font: 600 .92rem/1.35 Manrope, system-ui, sans-serif; resize: vertical; }
body dialog.gloss-dialog .gloss-actions-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
body dialog.ian-book .gloss-tool { display: inline-grid; place-items: center; }
body dialog.ian-book .gloss-tool svg { width: 17px; height: 17px; }

/* Selector de emojis (hoja inferior) y botón 😀 junto a los campos de texto. */
dialog.ian-emoji-dialog {
  position: fixed;
  inset: auto 0 0 0;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  max-height: 60dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--panel, #10211f);
  color: var(--text, #e8f5f0);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, .5);
  overflow: hidden;
}
dialog.ian-emoji-dialog[open] { display: flex; flex-direction: column; animation: ian-pop-up .18s ease-out; }
dialog.ian-emoji-dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog.ian-emoji-dialog .emoji-tabs { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; padding: 8px 8px 4px; overflow-x: auto; scrollbar-width: none; }
dialog.ian-emoji-dialog .emoji-tabs::-webkit-scrollbar { display: none; }
dialog.ian-emoji-dialog .emoji-tab, dialog.ian-emoji-dialog .emoji-close { all: unset; flex: 0 0 auto; box-sizing: border-box; display: grid; place-items: center; width: 40px; height: 36px; border-radius: 12px; font-size: 21px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
dialog.ian-emoji-dialog .emoji-tab[aria-selected="true"] { background: rgba(128, 128, 128, .3); box-shadow: inset 0 -2px 0 #4ADE80; }
dialog.ian-emoji-dialog .emoji-close { margin-left: auto; font-size: 24px; opacity: .8; }
dialog.ian-emoji-dialog .emoji-title { flex: 0 0 auto; margin: 2px 14px 2px; font-size: .78rem; font-weight: 800; opacity: .75; }
dialog.ian-emoji-dialog .emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 2px; padding: 4px 10px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; }
dialog.ian-emoji-dialog .emoji-pick { all: unset; box-sizing: border-box; display: grid; place-items: center; height: 44px; border-radius: 12px; font-size: 27px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
dialog.ian-emoji-dialog .emoji-pick:hover, dialog.ian-emoji-dialog .emoji-pick:focus-visible { background: rgba(128, 128, 128, .28); }
dialog.ian-emoji-dialog .emoji-pick:active { transform: scale(.9); }
.emoji-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.emoji-row > input { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
.emoji-inline { all: unset; box-sizing: border-box; flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(128, 128, 128, .2); font-size: 18px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.emoji-inline:hover { background: rgba(128, 128, 128, .36); }
.reminder-detail-field > .emoji-inline { margin-top: 6px; }

/* Barra de abajo con 4 botones (Cuadernos, Recordatorios, Chat, Ajustes). */
body #view-notes .cuadernote-bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* Chat: pantalla de «próximamente». */
dialog.chat-soon-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--panel, #10211f);
  color: var(--text, #e8f5f0);
}
dialog.chat-soon-dialog[open] { display: flex; flex-direction: column; }
dialog.chat-soon-dialog .chat-soon-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 1.05rem; }
dialog.chat-soon-dialog .chat-soon-head strong { flex: 1 1 auto; }
dialog.chat-soon-dialog .chat-soon-head .book-icon-btn { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(128, 128, 128, .18); cursor: pointer; }
dialog.chat-soon-dialog .chat-soon-head .book-icon-btn svg { width: 17px; height: 17px; }
dialog.chat-soon-dialog .chat-soon-badge { padding: 4px 10px; border-radius: 999px; background: rgba(255, 176, 32, .2); border: 1px solid rgba(255, 176, 32, .7); color: #FFC766; font: 800 .7rem/1 Manrope, system-ui, sans-serif; }
dialog.chat-soon-dialog .chat-soon-body { flex: 1 1 auto; overflow-y: auto; display: grid; align-content: start; justify-items: center; gap: 12px; padding: 22px 22px 10px; text-align: center; }
dialog.chat-soon-dialog .chat-soon-art { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: rgba(74, 222, 128, .14); color: #4ADE80; }
dialog.chat-soon-dialog .chat-soon-art svg { width: 42px; height: 42px; }
dialog.chat-soon-dialog h2 { margin: 0; font-size: 1.25rem; }
dialog.chat-soon-dialog p { margin: 0; max-width: 34ch; opacity: .85; line-height: 1.4; }
dialog.chat-soon-dialog .chat-soon-list { display: grid; gap: 8px; width: 100%; max-width: 420px; margin: 6px 0 0; padding: 0; list-style: none; text-align: left; }
dialog.chat-soon-dialog .chat-soon-list li { display: grid; gap: 2px; padding: 11px 13px; border: 1px solid rgba(128, 128, 128, .3); border-radius: 14px; background: rgba(128, 128, 128, .1); }
dialog.chat-soon-dialog .chat-soon-list b { font-size: .92rem; }
dialog.chat-soon-dialog .chat-soon-list span { font-size: .8rem; opacity: .75; }
dialog.chat-soon-dialog .chat-soon-note { font-size: .78rem; opacity: .65; }
dialog.chat-soon-dialog .chat-soon-foot { flex: 0 0 auto; padding: 10px 18px calc(14px + env(safe-area-inset-bottom)); }
dialog.chat-soon-dialog .chat-soon-foot .primary-button { width: 100%; min-height: 46px; }

/* Pasar la hoja como en un cuaderno real. */
body dialog.ian-book .book-leaf-host.is-flipping { overflow: visible; }
body dialog.ian-book .leaf-under { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
body dialog.ian-book .leaf-under > .book-leaf,
body dialog.ian-book .leaf-face > .book-leaf,
body dialog.ian-book .leaf-clone-page > .book-leaf { position: absolute; inset: 0; height: auto; }
body dialog.ian-book .leaf-under > .leaf-clone-page,
body dialog.ian-book .leaf-face > .leaf-clone-page { position: absolute !important; inset: 0; display: block !important; width: auto; height: auto; flex: none; }
body dialog.ian-book .leaf-flipper { position: absolute; inset: 0; z-index: 8; pointer-events: none; transform-style: preserve-3d; transform-origin: left center; will-change: transform; }
body dialog.ian-book .leaf-face { position: absolute; inset: 0; overflow: hidden; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
body dialog.ian-book .leaf-back { transform: rotateY(180deg); background: linear-gradient(90deg, #e3dac6, #f6f0e2 45%, #e6dec9); box-shadow: inset 0 0 40px rgba(0, 0, 0, .18); }
body dialog.ian-book .leaf-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 75%); }
@media (prefers-reduced-motion: reduce) { body dialog.ian-book .sheet-pop { animation: none; } }

/* Materias con el cuaderno protegido: solo se pueden agregar. */
body dialog.notebook-sections-dialog.is-readonly [data-delete-section] { display: none; }
body dialog.notebook-sections-dialog.is-readonly .section-manager-row > input { opacity: .75; }

/* Pistas: flechitas suaves en el borde por donde se puede pasar la hoja. */
body dialog.ian-book .turn-hint { position: absolute; top: 50%; z-index: 7; display: none; place-items: center; width: 26px; height: 56px; margin-top: -28px; border-radius: 14px; background: rgba(20, 30, 40, .4); color: #fff; opacity: 0; pointer-events: none; }
body dialog.ian-book .turn-hint svg { width: 18px; height: 18px; }
body dialog.ian-book .turn-hint-prev { left: 5px; --from: 10px; }
body dialog.ian-book .turn-hint-next { right: 5px; --from: -10px; }
body dialog.ian-book .turn-hint.is-on { display: grid; animation: ian-turn-hint 3.2s ease-out .4s both; }
@keyframes ian-turn-hint { 0% { opacity: 0; transform: translateX(var(--from)); } 14% { opacity: .95; transform: none; } 72% { opacity: .95; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body dialog.ian-book .turn-hint.is-on { animation: none; opacity: .75; } }