/* Funciones del cuaderno inspiradas en los motivos para usar un cuaderno digital:
   pestañas de colores por materia, búsqueda por palabras clave en todas las páginas y
   imprimir o guardar en PDF. */

/* ---------- Pestañas de colores (una por sección) ---------- */
body dialog.notebook-book-dialog .book-tabs {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin: 2px 0 0;
  padding: 8px 14px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
body dialog.notebook-book-dialog .book-tabs::-webkit-scrollbar { display: none; }
body dialog.notebook-book-dialog .book-tab {
  all: unset;
  box-sizing: border-box;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--tab) 55%, transparent);
  border-top: 4px solid var(--tab);
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
  background: color-mix(in srgb, var(--tab) 18%, #141e47);
  color: #e3eee8;
  font: 800 12.5px/1 Manrope, system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body dialog.notebook-book-dialog .book-tab b { overflow: hidden; font-weight: 800; text-overflow: ellipsis; }
body dialog.notebook-book-dialog .book-tab small { opacity: .72; font-size: 11px; font-weight: 700; }
body dialog.notebook-book-dialog .book-tab.is-active { min-height: 44px; background: var(--tab); border-color: var(--tab); color: #131d46; }
body dialog.notebook-book-dialog .book-tab.is-active small { opacity: .8; }
body dialog.notebook-book-dialog .book-tab:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
body dialog.notebook-book-dialog .book-tab-add { --tab: #64748b; border-style: dashed; border-top-style: solid; background: transparent; color: #b9c7c0; }

/* ---------- Resultados de la búsqueda dentro de las páginas ---------- */
body #view-notes .library-hits { margin: 4px 0 16px; padding: 12px; border: 1px solid rgba(0, 255, 102, .28); border-radius: 16px; background: rgba(0, 255, 102, .05); }
body #view-notes .library-hits header { display: grid; gap: 2px; margin-bottom: 8px; }
body #view-notes .library-hits h3 { margin: 0; color: #dbe7e0; font-size: 14px; font-weight: 800; letter-spacing: .02em; }
body #view-notes .library-hits header small { color: #8fa39a; font-size: 12px; }
body #view-notes .library-hits ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
body #view-notes .library-hits li button {
  all: unset;
  box-sizing: border-box;
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body #view-notes .library-hits li button:active { background: rgba(255, 255, 255, .12); }
body #view-notes .library-hits li button:focus-visible { outline: 2px solid #7dffb0; outline-offset: 1px; }
body #view-notes .library-hits .hit-where { color: #8fa39a; font-size: 11.5px; }
body #view-notes .library-hits .hit-where b { color: #b8ffd2; font-weight: 800; }
body #view-notes .library-hits strong { color: #fff; font-size: 14px; font-weight: 800; }
body #view-notes .library-hits .hit-snippet { color: #c9dbd2; font-size: 12.5px; line-height: 1.35; }
body #view-notes .library-hits mark { padding: 0 2px; border-radius: 3px; background: #ffe45e; color: #121b42; }

/* ---------- Ventana de imprimir ---------- */
body dialog.notebook-print-dialog { width: min(92vw, 420px); max-width: 100%; padding: 18px; border: 1px solid rgba(0, 255, 102, .3); border-radius: 20px; background: #131d46; color: #eef6f2; color-scheme: dark; font-family: Manrope, system-ui, sans-serif; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
body dialog.notebook-print-dialog::backdrop { background: rgba(2, 6, 4, .62); }
body dialog.notebook-print-dialog .dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
body dialog.notebook-print-dialog .dialog-head h2 { margin: 2px 0 0; font-size: 19px; font-weight: 800; }
body dialog.notebook-print-dialog .eyebrow { margin: 0; color: #7dffb0; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
body dialog.notebook-print-dialog .dialog-note { margin: 10px 0 14px; color: #9fb2a9; font-size: 13px; line-height: 1.4; }
body dialog.notebook-print-dialog .close-button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
body dialog.notebook-print-dialog .print-choices { display: grid; gap: 8px; }
body dialog.notebook-print-dialog .print-choices button { min-height: 48px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #5cf597, #2fd870); color: #04130a; font: 800 15px/1.2 inherit; cursor: pointer; }

/* ---------- Modo lectura ---------- */
body dialog.notebook-reader-dialog { --rd-bg: #f7f5ef; --rd-ink: #1d2733; --rd-soft: #5f6b77; --rd-bar: #ffffff; --rd-line: #dcd8cc; --rd-accent: #178f54; position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--rd-bg); color: var(--rd-ink); font-family: Georgia, "Times New Roman", serif; overflow: hidden; }
body dialog.notebook-reader-dialog[data-theme="sepia"] { --rd-bg: #f1e4c8; --rd-ink: #3b2c17; --rd-soft: #7a6647; --rd-bar: #e8d8b6; --rd-line: #d3bf93; --rd-accent: #8a5a16; }
body dialog.notebook-reader-dialog[data-theme="noche"] { --rd-bg: #16204c; --rd-ink: #d8dee4; --rd-soft: #8b97a3; --rd-bar: #1a2129; --rd-line: #2b343d; --rd-accent: #5cf597; }
body dialog.notebook-reader-dialog:not([open]) { display: none; }
body dialog.notebook-reader-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
body dialog.notebook-reader-dialog::backdrop { background: var(--rd-bg); }
body dialog.notebook-reader-dialog * { box-sizing: border-box; }
body dialog.notebook-reader-dialog .reader-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--rd-line); background: var(--rd-bar); font-family: Manrope, system-ui, sans-serif; }
body dialog.notebook-reader-dialog .reader-title { display: grid; flex: 1; min-width: 0; }
body dialog.notebook-reader-dialog .reader-title strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
body dialog.notebook-reader-dialog .reader-title small { color: var(--rd-soft); font-size: 12px; }
body dialog.notebook-reader-dialog .reader-tools { display: flex; gap: 6px; }
body dialog.notebook-reader-dialog button { all: unset; box-sizing: border-box; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--rd-line); border-radius: 12px; background: transparent; color: var(--rd-ink); font: 800 15px/1 Manrope, system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body dialog.notebook-reader-dialog button:disabled { opacity: .3; cursor: default; }
body dialog.notebook-reader-dialog button:focus-visible, body dialog.notebook-reader-dialog input:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; }
body dialog.notebook-reader-dialog .reader-page { width: min(100%, 720px); margin: 0 auto; padding: 22px 22px 40px; overflow-y: auto; outline: 0; }
body dialog.notebook-reader-dialog .reader-page h1 { margin: 0 0 14px; font-size: calc(var(--reader-size, 19px) * 1.45); line-height: 1.2; }
body dialog.notebook-reader-dialog .reader-content { font-size: var(--reader-size, 19px); line-height: 1.7; overflow-wrap: anywhere; }
body dialog.notebook-reader-dialog .reader-content img { max-width: 100%; height: auto; border-radius: 8px; }
body dialog.notebook-reader-dialog .reader-empty { color: var(--rd-soft); font-style: italic; }
body dialog.notebook-reader-dialog .reader-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rd-line); background: var(--rd-bar); font-family: Manrope, system-ui, sans-serif; }
body dialog.notebook-reader-dialog .reader-foot button { min-width: 46px; font-size: 24px; }
body dialog.notebook-reader-dialog .reader-progress { display: grid; gap: 2px; text-align: center; color: var(--rd-soft); font-size: 12px; font-weight: 700; }
body dialog.notebook-reader-dialog .reader-progress input { width: 100%; height: 26px; margin: 0; accent-color: var(--rd-accent); }

/* ---------- Impresión: solo las páginas del cuaderno ---------- */
#ian-print-root { display: none; }
@media print {
  @page { margin: 14mm; }
  body > *:not(#ian-print-root) { display: none !important; }
  body #ian-print-root { display: block !important; position: static !important; background: #fff !important; color: #121b42 !important; font: 12pt/1.5 Georgia, "Times New Roman", serif; }
  #ian-print-root .print-page { break-after: page; page-break-after: always; }
  #ian-print-root .print-page:last-child { break-after: auto; page-break-after: auto; }
  #ian-print-root .print-page header { margin-bottom: 10pt; padding-bottom: 6pt; border-bottom: 1px solid #bbb; }
  #ian-print-root .print-page header small { color: #666; font: 9.5pt/1.3 Arial, sans-serif; }
  #ian-print-root .print-page h1 { margin: 3pt 0 0; font-size: 20pt; line-height: 1.2; }
  #ian-print-root .print-content { overflow-wrap: anywhere; }
  #ian-print-root .print-content img { max-width: 100%; height: auto; }
  #ian-print-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}