/* SEIMA · Cuaderno 3D (diseño aprobado por Edilberto, 2026-10-12)
   1) La tapa .cn3d: cuero con espiral dorada, elástico, presilla, cinta separadora, hojas al lado y el logo de la
      temática en relieve. Todas las medidas usan cqw (porcentaje del ancho del propio cuaderno), así se ve igual grande
      (biblioteca) o pequeño (cabecera del cuaderno abierto).
   2) El estante limpio de «Mis cuadernos» con el «+».
   3) La ventana de creación (solo el cuaderno).
   4) La cabecera de las hojas: la tapa pequeña vuelve a «Tu cuaderno» y el menú ⋮ se oculta.
   5) El inicio claro «Tu cuaderno» (src/notebook-3d.js). El panel de la tapa pequeña se eliminó el 2026-10-12. */

/* ---------- 1) La tapa ---------- */
.cn3d { --c: #1f5e45; --c2: #154633; position: relative; display: block; width: 100%; aspect-ratio: 132 / 174; container-type: inline-size; }
.cn3d > span, .cn3d-cover > span { position: absolute; display: block; }
.cn3d-back { inset: 1.5cqw -3cqw -3.8cqw 1.5cqw; border-radius: 7cqw 10cqw 10cqw 7cqw; background: var(--c2); }
.cn3d-pages { top: 4.5cqw; bottom: 3cqw; right: -6.8cqw; width: 10.6cqw; border-radius: 0 5cqw 5cqw 0;
  background: repeating-linear-gradient(180deg, #f6eedb 0 1.2px, #dccfb1 1.2px 2.4px); box-shadow: 1.5cqw 4.5cqw 7.5cqw rgba(0, 0, 0, .25); }
.cn3d-cover { inset: 0; overflow: hidden; border-radius: 6.8cqw 9.8cqw 9.8cqw 6.8cqw;
  background: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .16), transparent 55%), var(--c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset -6cqw 0 10cqw rgba(0, 0, 0, .28), inset 4.5cqw 0 6cqw rgba(0, 0, 0, .2), 0 14cqw 24cqw rgba(0, 0, 0, .45); }
.cn3d-cover::before { content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cn3d-spiral { left: -8.3cqw; top: 9cqw; bottom: 9cqw; width: 18cqw; z-index: 3; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .35));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='13'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238a6219'/%3E%3Cstop offset='.45' stop-color='%23f7dc8c'/%3E%3Cstop offset='1' stop-color='%23a77a25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M15 3.2 C6 1.5 1.5 4 2.5 7 C3.5 10 10 10.3 16 8.6' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='17.5' cy='5.8' r='1.6' fill='%230c2a1d' opacity='.7'/%3E%3C/svg%3E") repeat-y 0 0 / 18cqw 9.8cqw; }
.cn3d-elastic { top: -1.5cqw; bottom: -1.5cqw; right: 15cqw; width: 5.3cqw; z-index: 2; border-radius: 1.5cqw;
  background: linear-gradient(90deg, rgba(0, 0, 0, .35), var(--c2) 35%, rgba(255, 255, 255, .08) 60%, rgba(0, 0, 0, .35)); box-shadow: 0 0 2cqw rgba(0, 0, 0, .35); }
.cn3d-loop { right: -10.6cqw; top: 54%; width: 10.6cqw; height: 19.7cqw; z-index: 1; border-radius: 0 5.3cqw 5.3cqw 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .35), var(--c2)); box-shadow: 1.5cqw 1.5cqw 3cqw rgba(0, 0, 0, .3); }
.cn3d-ribbon { left: 25.8cqw; bottom: -16.7cqw; width: 8.3cqw; height: 22.7cqw; z-index: 0;
  background: linear-gradient(90deg, var(--c2), rgba(0, 0, 0, .35)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.cn3d-emblem { left: 50%; top: 42%; width: 34cqw; height: 34cqw; z-index: 1; display: grid; place-items: center; transform: translate(-46%, -50%); }
.cn3d-emblem svg { width: 100%; height: 100%; fill: rgba(255, 255, 255, .2); stroke: rgba(255, 255, 255, .34); stroke-width: .6;
  filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, .18)) drop-shadow(1px 1.5px 0 rgba(0, 0, 0, .35)); }
.cn3d-mark { font-size: 24cqw; line-height: 1; font-weight: 400; filter: saturate(.85) drop-shadow(1px 2px 0 rgba(0, 0, 0, .3)); }
.cn3d-title { left: 14cqw; right: 22cqw; bottom: 15cqw; z-index: 1; overflow: hidden; text-align: center; overflow-wrap: anywhere;
  color: rgba(255, 255, 255, .64); font: 800 8.4cqw/1.15 Manrope, system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .35), -1px -1px 0 rgba(255, 255, 255, .08); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cn3d-title.is-long { font-size: 6.8cqw; }
/* Pequeña: sin cinta, presilla ni nombre. */
.cn3d.is-compact .cn3d-ribbon, .cn3d.is-compact .cn3d-loop { display: none; }
.cn3d.is-compact .cn3d-pages { background: #eadfc4; }

/* ---------- 2) Estante «Mis cuadernos» ---------- */
body #view-notes .cn3d-shelf-title { margin: 6px 4px 0; font-size: 1.15rem; font-weight: 800; color: var(--text, #e6fbf0); }
body #view-notes .ian-nb-open .cn3d { width: 72%; margin: 8px auto 26px 12%; transform: perspective(700px) rotateY(-14deg) rotateX(4deg); transition: transform .2s ease; }
body #view-notes .ian-nb-open:not(.in-trash):hover .cn3d { transform: perspective(700px) rotateY(-8deg) rotateX(3deg) translateY(-3px); }
body #view-notes .ian-nb-open:not(.in-trash):active .cn3d { transform: perspective(700px) rotateY(-10deg) scale(.98); }
body #view-notes .ian-nb-open:focus-visible .cn3d-cover { outline: 3px solid #fff; outline-offset: 3px; }
/* Debajo de cada cuaderno: el nombre y las páginas (la fecha de edición no se muestra para que se vea limpio). */
body #view-notes .ian-nb-meta { display: grid !important; gap: 1px; text-align: center; }
body #view-notes .ian-nb-meta strong { font-size: .9rem; font-weight: 800; overflow-wrap: anywhere; }
body #view-notes .ian-nb-meta small { color: var(--muted, #8fb8a4); font-size: .74rem; }
body #view-notes .ian-nb-meta small:nth-of-type(2) { display: none; }
/* Anclar / color / eliminar: pequeños, arriba a la derecha, sin tapar el nombre. */
body #view-notes .ian-nb .ian-nb-actions { top: 2px; bottom: auto; right: 0; flex-direction: column; opacity: .85; }
body #view-notes .ian-nb .ian-nb-btn { width: 26px; height: 26px; }
body #view-notes .ian-nb .ian-nb-btn svg { width: 13px; height: 13px; }
body #view-notes .ian-nb .ian-nb-badge { top: 4px; left: 0; right: auto; }
/* El «+» como primer lugar del estante. */
body #view-notes .cn3d-new-card { display: grid; justify-items: center; gap: 8px; text-align: center; }
body #view-notes .cn3d-new { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 64%; margin: 8px auto 0; aspect-ratio: 132 / 174; cursor: pointer;
  border: 2px dashed rgba(0, 255, 102, .45); border-radius: 8px 12px 12px 8px; background: rgba(0, 255, 102, .05); -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, transform .15s ease; }
body #view-notes .cn3d-new:hover { background: rgba(0, 255, 102, .1); transform: scale(1.03); }
body #view-notes .cn3d-new:active { transform: scale(.97); }
body #view-notes .cn3d-new:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
body #view-notes .cn3d-new-plus { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #00ff66; color: #04140e;
  font: 800 30px/1 system-ui, sans-serif; box-shadow: 0 0 18px rgba(0, 255, 102, .5); }
body #view-notes .cn3d-new-label { font-size: .86rem; font-weight: 800; color: var(--text, #e6fbf0); }
/* Archivados y Papelera: enlaces discretos debajo del estante. */
body #view-notes .cn3d-shelf-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
body #view-notes .cn3d-shelf-links button { all: unset; cursor: pointer; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); color: var(--muted, #8fb8a4); font: 700 12px Manrope, system-ui, sans-serif; }
body #view-notes .cn3d-shelf-links button:hover { color: #e6fbf0; border-color: rgba(0, 255, 102, .4); }

/* ---------- 3) Crear: solo el cuaderno ---------- */
dialog.cn3d-create { width: min(430px, 100vw); max-width: 100vw; padding: 16px 16px 22px; border: 0; border-radius: 24px; color: #e6fbf0;
  background: radial-gradient(120% 70% at 50% 30%, #12402b, #121b43 75%); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
dialog.cn3d-create::backdrop { background: rgba(2, 8, 5, .7); }
.cn3d-create-head { display: flex; align-items: center; gap: 10px; }
.cn3d-create-head h2 { margin: 0; font-size: 1.3rem; }
.cn3d-create-head .eyebrow { margin: 0; color: #00ff66; font-size: 11px; letter-spacing: .14em; font-weight: 800; }
.cn3d-create-stage { all: unset; position: relative; display: grid; place-items: center; width: 100%; height: 330px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cn3d-create-stage .cn3d { width: 170px; transform: perspective(900px) rotateY(-16deg) rotateX(5deg) rotateZ(-2deg); transition: transform .25s ease; }
.cn3d-create-stage:hover .cn3d { transform: perspective(900px) rotateY(-10deg) rotateX(4deg) rotateZ(-1deg) scale(1.03); }
.cn3d-create-stage:focus-visible .cn3d-cover { outline: 3px solid #fff; outline-offset: 4px; }
.cn3d-create-glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 255, 102, .28), rgba(0, 255, 102, 0) 65%); }
.cn3d-create-hint { margin: 0 0 12px; text-align: center; color: #9fc7b3; font-weight: 700; font-size: .88rem; }
.cn3d-create-go { width: 100%; min-height: 50px; }

/* ---------- 4) Cabecera del cuaderno abierto ---------- */
body dialog.notebook-book-dialog .book-head .book-head-title button.book-cover {
  all: unset; box-sizing: border-box; position: relative; display: block !important; flex: 0 0 auto; width: 34px !important; max-width: 34px !important;
  height: auto !important; margin: 0 6px 0 8px !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body dialog.notebook-book-dialog .book-head button.book-cover .cn3d { transform: rotate(-3deg); }
body dialog.notebook-book-dialog .book-head button.book-cover:active { transform: scale(.94); }
body dialog.notebook-book-dialog .book-head button.book-cover:focus-visible { outline: 2px solid #00ff66; outline-offset: 3px; border-radius: 6px; }
/* El menú ⋮ pasa al panel (sus botones siguen en la página para que el panel los use). */
body dialog.notebook-book-dialog .book-head .book-more-menu { display: none !important; }

@media (prefers-reduced-motion: reduce) { body #view-notes .ian-nb-open .cn3d, .cn3d-create-stage .cn3d, .nh-layer, .nh-win { transition: none; } }

/* ---------- 5) Inicio claro «Tu cuaderno» (pedido de Edilberto, 2026-10-12; modelo-inicio.html) ---------- */
/* Pantalla completa (pedido de Edilberto, 2026-10-12: «que la app rellene el celular»): sin el margen que la app pone
   alrededor de las pantallas, y la hoja crece hasta el final con las funciones grandes. */
body #view-notes:has(> .nh) { padding: 0 !important; margin: 0 !important; background: none !important; }
body .main-content:has(> #view-notes.active-view > .nh) { padding: 0 !important; }
body #view-notes .nh { --nh-ink: #12291f; --nh-soft: #6b8a7b; --nh-green: #1f8f5a; position: relative; display: flex; flex-direction: column; min-height: 100dvh;
  padding: calc(8px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom)); box-sizing: border-box;
  color: var(--nh-ink); font-family: Manrope, Roboto, system-ui, sans-serif; background: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #e9f3ec 45%, #b9d6c4 100%); }
body #view-notes .nh * { box-sizing: border-box; }
/* Arriba: logo + Cuadernos · Chat · Contactos · Ajustes */
.nh-top { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 900px; margin: 0 auto 10px; }
.nh-logo { flex: none; width: 46px; height: 46px; border-radius: 13px; object-fit: cover; box-shadow: 0 6px 14px rgba(20, 60, 40, .22); }
.nh-seg { flex: 1; min-width: 0; display: grid; grid-template-columns: 1.2fr 1fr 1.15fr .95fr; gap: 3px; padding: 4px; border-radius: 18px;
  background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 22px rgba(20, 60, 40, .14), inset 0 0 0 1px #e6efe9; }
.nh-seg button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 14px; cursor: pointer;
  font: 800 10.5px/1.1 Manrope, system-ui, sans-serif; color: #4d6b5d; text-align: center; -webkit-tap-highlight-color: transparent; }
.nh-seg button svg { width: 20px; height: 20px; }
.nh-seg button[aria-current="true"] { background: linear-gradient(135deg, #1f8f5a, #146b42); color: #fff; box-shadow: 0 6px 14px rgba(20, 107, 66, .3); }
.nh-seg button:focus-visible { outline: 2px solid var(--nh-green); outline-offset: 2px; }
.nh-guest { max-width: 460px; margin: 0 auto 10px; padding: 8px 12px; border-radius: 12px; background: #fff7dc; color: #5a3a00; font-size: 12.5px; }
/* La hoja del cuaderno */
.nh-page { --c: #1f5e45; position: relative; flex: 1; display: flex; flex-direction: column; width: calc(100% - 8px); max-width: 900px; margin: 0 auto 0 8px; padding: 16px 14px 16px 24px; border-radius: 8px 22px 22px 8px;
  background: radial-gradient(circle at 1px 1px, rgba(31, 94, 69, .08) 1px, transparent 1.4px) 0 0 / 16px 16px, linear-gradient(180deg, #fffdf7, #f7f2e5);
  box-shadow: 0 20px 44px rgba(20, 60, 40, .2), inset 0 0 0 1px #ece4cf, inset 10px 0 0 -6px var(--c); }
.nh-page::before { content: ""; position: absolute; left: -9px; top: 18px; bottom: 18px; width: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238a6219'/%3E%3Cstop offset='.45' stop-color='%23f7dc8c'/%3E%3Cstop offset='1' stop-color='%23a77a25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 3.5 C4 2 1 4.5 2 7.5 C3 10.5 8 10.6 13 9' fill='none' stroke='url(%23g)' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-y 0 0 / 18px 14px; }
.nh-head { display: flex; align-items: center; gap: 12px; }
.nh-cover { all: unset; flex: none; width: 46px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s ease; }
.nh-cover .cn3d { transform: rotate(-3deg); }
.nh-cover:active { transform: scale(.94); }
.nh-cover:focus-visible { outline: 2px solid var(--nh-green); outline-offset: 4px; border-radius: 8px; }
.nh-name { min-width: 0; }
.nh-name small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: #2f7a55; }
.nh-name strong { display: block; font-size: 19px; overflow-wrap: anywhere; }
.nh-btn { all: unset; margin-left: auto; padding: 9px 13px; border: 1.5px solid #d9e7dd; border-radius: 13px; background: #fff; font: 800 12.5px Manrope, system-ui, sans-serif; color: #2c4a3d; cursor: pointer; }
.nh-btn:focus-visible { outline: 2px solid var(--nh-green); outline-offset: 2px; }
.nh-sec { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #2f7a55; }
.nh-sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #cfe3d6, transparent); }
/* Funciones minimizadas */
/* Las funciones llenan el resto de la hoja: 2 columnas en el celular (3 filas grandes), 3 en tablet o computador. */
.nh-grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(118px, 1fr); gap: 12px; }
@media (min-width: 700px) { .nh-grid { grid-template-columns: repeat(3, 1fr); } }
/* Celulares bajitos: todo cabe sin bajar la pantalla. */
@media (max-height: 700px) {
  .nh-grid { grid-auto-rows: minmax(92px, 1fr); gap: 9px; }
  .nh-tile { padding: 8px 6px; gap: 3px; }
  .nh-tile svg { width: 40px !important; height: 40px !important; }
  .nh-tile small { display: none; }
  .nh-page .nh-sec { margin: 12px 0 8px; }
}
.nh-tile { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; border: 1px solid #eee7d6; border-radius: 22px; cursor: pointer;
  text-align: center; background: linear-gradient(160deg, #ffffff, #f5f1e6); box-shadow: 0 6px 14px rgba(20, 60, 40, .09), inset 0 1px 0 #fff; -webkit-tap-highlight-color: transparent; transition: transform .15s ease, box-shadow .2s ease; }
.nh-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 18px rgba(20, 60, 40, .14); }
.nh-tile:active { transform: scale(.96); }
.nh-tile:focus-visible { outline: 2px solid var(--nh-green); outline-offset: 2px; }
.nh-tile svg { width: 52px; height: 52px; }
.nh-tile b { font-size: 16px; color: #2c4a3d; }
.nh-tile small { font-size: 11.5px; line-height: 1.25; color: var(--nh-soft); }
.nh-tile.is-fav { border-color: #f6c9d2; background: linear-gradient(160deg, #fff, #fff1f4); }
.nh-tile.is-fav b { color: #c2334f; }
.nh-tile.is-soon { opacity: .6; }
.nh-tile i { position: absolute; top: -6px; right: -2px; padding: 1px 6px; border-radius: 8px; background: #ffd480; color: #5a3a00; font: 800 8px/1.4 system-ui; font-style: normal; }
/* Sin cuadernos todavía */
.nh-empty { text-align: center; }
.nh-empty-cover { all: unset; display: block; width: 130px; margin: 18px auto 26px; cursor: pointer; }
.nh-empty-cover .cn3d { transform: perspective(800px) rotateY(-14deg) rotateX(4deg); }
.nh-empty h2 { margin: 0 0 6px; font-size: 20px; }
.nh-empty p { margin: 0 auto 16px; max-width: 300px; color: var(--nh-soft); font-size: 13.5px; }
.nh-primary { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 15px; border-radius: 16px; background: linear-gradient(135deg, #1f8f5a, #146b42); color: #fff;
  font: 800 15px Manrope, system-ui, sans-serif; text-align: center; cursor: pointer; box-shadow: 0 10px 20px rgba(20, 107, 66, .3); }

/* ---------- Ventanitas del inicio (funciones, Cambiar y Configuración) ---------- */
.nh-layer { position: fixed; inset: 0; z-index: 900; pointer-events: none; font-family: Manrope, Roboto, system-ui, sans-serif; }
.nh-layer-bg { position: absolute; inset: 0; background: rgba(8, 30, 20, .4); opacity: 0; transition: opacity .2s ease; }
.nh-win { position: absolute; left: 50%; bottom: 0; width: min(460px, 100%); max-height: 88vh; overflow: auto; padding: 8px 16px calc(22px + env(safe-area-inset-bottom)); box-sizing: border-box;
  border-radius: 24px 24px 0 0; color: #12291f; background: linear-gradient(180deg, #fffdf7, #f5efe0); box-shadow: 0 -16px 40px rgba(0, 0, 0, .25);
  transform: translate(-50%, 105%); transition: transform .26s cubic-bezier(.4, 0, .2, 1); }
.nh-layer.is-open { pointer-events: auto; }
.nh-layer.is-open .nh-layer-bg { opacity: 1; }
.nh-layer.is-open .nh-win { transform: translate(-50%, 0); }
.nh-win * { box-sizing: border-box; }
.nh-grab { width: 42px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: #d8d0bd; }
.nh-win-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.nh-win-head b { font-size: 18px; }
.nh-x { all: unset; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #ece6d6; font-size: 20px; color: #2c4a3d; cursor: pointer; }
.nh-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 9px; margin-top: 10px; }
.nh-acts button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 4px; border: 1px solid #eee7d6; border-radius: 16px;
  background: #fff; font-size: 11.5px; font-weight: 700; color: #2c4a3d; text-align: center; cursor: pointer; box-shadow: 0 4px 10px rgba(20, 60, 40, .06); }
.nh-acts button:active { transform: scale(.96); }
.nh-acts svg { width: 30px; height: 30px; }
.nh-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.nh-chip { all: unset; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1.5px solid #dfe9e2; background: #fff; font-size: 12px; font-weight: 700; color: #2c4a3d; cursor: pointer; }
.nh-chip svg { width: 16px; height: 16px; }
.nh-chip[aria-pressed="true"] { border-color: var(--nh-green, #1f8f5a); background: #e3f6ea; color: #146b42; }
.nh-chip.is-add { border-style: dashed; color: #1f8f5a; }
.nh-folder-add, .nh-task-add { display: flex; gap: 8px; margin: 4px 0 8px; }
.nh-folder-add input, .nh-task-add input, .nh-input { flex: 1; min-width: 0; width: 100%; padding: 11px 13px; border-radius: 13px; border: 1.5px solid #cfe3d6; background: #fff; color: #12291f; font: 600 14px Manrope, system-ui, sans-serif; }
.nh-folder-add button, .nh-task-add button { all: unset; padding: 0 16px; border-radius: 13px; background: #1f8f5a; color: #fff; font-weight: 800; cursor: pointer; display: grid; place-items: center; }
.nh-note { display: block; margin: 4px 0 8px; color: #6b8a7b; font-size: 12px; }
.nh-tasks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.nh-task { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #eee7d6; border-radius: 12px; background: #fff; }
.nh-task label { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.nh-task input { width: 20px; height: 20px; accent-color: #1f8f5a; }
.nh-task.is-done span { text-decoration: line-through; color: #9db3a7; }
.nh-task button { all: unset; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #b08a8a; cursor: pointer; font-size: 18px; }
.nh-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.nh-item { min-width: 0; display: flex; align-items: center; gap: 4px; padding: 6px 4px 6px 8px; border: 1px solid #eee7d6; border-radius: 14px; background: #fff; }
.nh-item-open { all: unset; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.nh-item-open svg { flex: none; width: 28px; height: 28px; }
.nh-item-open span { flex: 1; min-width: 0; overflow: hidden; }
.nh-item-open b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-item-open small { display: block; font-size: 11.5px; color: #6b8a7b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-move { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.nh-move svg { width: 22px; height: 22px; opacity: .8; }
.nh-move select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.nh-heart { all: unset; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: transform .15s ease; }
.nh-heart svg { width: 22px; height: 22px; fill: none; stroke: #c9a3ab; stroke-width: 2; transition: fill .2s ease, stroke .2s ease; }
.nh-heart[aria-pressed="true"] svg { fill: #ef4f6c; stroke: #ef4f6c; }
.nh-heart:active { transform: scale(.86); }
.nh-link { all: unset; display: block; margin: 14px 0 0; color: #1f8f5a; font-weight: 800; font-size: 13px; cursor: pointer; }
.nh-themes { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.nh-theme { all: unset; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px 8px 9px; border-radius: 999px; border: 1.5px solid #cfe3d6; background: #fff; font-size: 12.5px; font-weight: 700; color: #23453a; cursor: pointer; }
.nh-theme svg { width: 18px; height: 18px; fill: #1f6b48; stroke: #1f6b48; stroke-width: .4; }
.nh-theme[aria-pressed="true"] { border-color: #1f8f5a; background: #e3f6ea; box-shadow: 0 0 0 3px rgba(31, 143, 90, .15); }
.nh-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.nh-color { all: unset; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; background: var(--sw); border: 3px solid #fff; box-shadow: 0 0 0 1.5px #cfe3d6; }
.nh-color[aria-pressed="true"] { box-shadow: 0 0 0 2.5px #1f8f5a; }
.nh-clock { display: flex; justify-content: center; padding: 10px; border-radius: 16px; background: #0b1f17; }
.nh-list { display: grid; gap: 8px; }
.nh-list button { all: unset; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #eee7d6; border-radius: 14px; background: #fff; font-weight: 700; font-size: 14px; color: #2c4a3d; cursor: pointer; }
.nh-list button svg { width: 24px; height: 24px; flex: none; }
.nh-list button.is-danger { color: #b3263e; }
.nh-books { display: grid; gap: 9px; margin-top: 10px; }
.nh-book { all: unset; display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid #eee7d6; border-radius: 16px; background: #fff; cursor: pointer; }
.nh-book b { display: block; font-size: 14.5px; } .nh-book small { color: #6b8a7b; font-size: 12px; }
.nh-book[aria-current="true"] { border-color: #1f8f5a; box-shadow: 0 0 0 3px rgba(31, 143, 90, .12); }
.nh-book-cover { flex: none; width: 34px; }
.nh-book.is-new { border-style: dashed; color: #1f8f5a; }
.nh-book-plus { flex: none; display: grid; place-items: center; width: 34px; height: 44px; border-radius: 6px; background: #e3f6ea; font-size: 22px; font-weight: 800; }
.nh-win button:focus-visible, .nh-win label:focus-within { outline: 2px solid #1f8f5a; outline-offset: 2px; }

/* ---------- Mis creaciones, carpetas como tarjetas, 🔔 Recordarme y ♥ Favoritos (2026-10-12) ---------- */
/* Favoritos solo aparece cuando hay algo marcado con ♥: una barra arriba de las funciones. */
.nh-favbar { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 18px; cursor: pointer;
  border: 1px solid #f6c9d2; background: linear-gradient(135deg, #fff, #ffe9ee); box-shadow: 0 6px 14px rgba(194, 51, 79, .12); }
.nh-favbar svg { flex: none; width: 34px; height: 34px; }
.nh-favbar b { display: block; font-size: 15px; color: #c2334f; }
.nh-favbar small { display: block; font-size: 12px; color: #9a6a74; }
.nh-favbar i { margin-left: auto; font-style: normal; font-size: 22px; color: #d58a99; }
.nh-favbar:active { transform: scale(.98); }
.nh-favbar:focus-visible { outline: 2px solid #c2334f; outline-offset: 2px; }
/* Carpetas como tarjetas */
.nh-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; margin-bottom: 8px; }
.nh-folder { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 92px; padding: 12px 12px 10px; border-radius: 6px 16px 16px 16px; cursor: pointer;
  background: linear-gradient(160deg, #eaf7ef, #d9efe2); border: 1px solid #cde5d6; box-shadow: 0 6px 12px rgba(20, 60, 40, .08); }
.nh-folder::before { content: ""; position: absolute; left: 0; top: -7px; width: 46%; height: 10px; border-radius: 6px 10px 0 0; background: #cfe9d9; border: 1px solid #cde5d6; border-bottom: 0; }
.nh-folder svg { width: 30px; height: 30px; }
.nh-folder b { font-size: 13.5px; color: #12291f; overflow-wrap: anywhere; }
.nh-folder small { font-size: 11px; color: #5d7d6e; }
.nh-folder[aria-pressed="true"] { background: linear-gradient(160deg, #1f8f5a, #146b42); border-color: #146b42; }
.nh-folder[aria-pressed="true"]::before { background: #146b42; border-color: #146b42; }
.nh-folder[aria-pressed="true"] b, .nh-folder[aria-pressed="true"] small { color: #fff; }
.nh-folder.is-add { background: #fff; border-style: dashed; border-color: #9fd1b4; }
.nh-folder.is-add::before { display: none; }
.nh-folder-plus { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e3f6ea; color: #1f8f5a; font-size: 20px; font-weight: 800; }
.nh-folder:active { transform: scale(.97); }
.nh-folder:focus-visible { outline: 2px solid #1f8f5a; outline-offset: 2px; }
/* 🔔 Recordarme (encendida si ya tiene un recordatorio pendiente) */
.nh-remind { all: unset; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.nh-remind svg { width: 21px; height: 21px; fill: none; stroke: #c9b27a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nh-remind[aria-pressed="true"] svg { fill: #f2b83a; stroke: #d9952a; }
.nh-remind:active { transform: scale(.88); }
.nh-remind:focus-visible { outline: 2px solid #1f8f5a; outline-offset: 2px; }
/* Mis creaciones */
.nh-crea { display: grid; gap: 9px; margin-top: 10px; }
.nh-crea-card { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #eee7d6; border-radius: 16px; background: #fff; cursor: pointer; }
.nh-crea-card svg { flex: none; width: 32px; height: 32px; }
.nh-crea-card b { display: block; font-size: 14.5px; } .nh-crea-card small { display: block; font-size: 12px; color: #6b8a7b; }
.nh-crea-card i { margin-left: auto; font-style: normal; font-size: 20px; color: #9db3a7; }
/* ♥ Marcar como favorito en los formularios de crear / subir */
.nb-fav-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(239, 79, 108, .45); cursor: pointer; }
.nb-fav-check input { width: 20px; height: 20px; margin: 0; accent-color: #ef4f6c; }
.nb-fav-check span { font-weight: 800; color: #ef4f6c; }

/* ---------- Fase 1 del prompt maestro (2026-10-13): Inicio · Cuadernos · Chat · Más ---------- */
/* Tema claro principal (variables) y «Modo oscuro» con el verde neón original de SEIMA. */
body #view-notes .nh { --nh-bg: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #eef6f0 50%, #dcebe2 100%); --nh-surface: #ffffff; --nh-line: #e6ece8;
  --nh-ink: #12291f; --nh-soft: #5f7a6d; --nh-accent: #0f7a4b; --nh-accent-soft: #e3f3ea; --nh-nav: rgba(255, 255, 255, .96);
  background: var(--nh-bg); padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
:root[data-theme="dark"] body #view-notes .nh { --nh-bg: radial-gradient(120% 70% at 50% 0%, #10301f, #121b43 70%); --nh-surface: #0d2219; --nh-line: rgba(0, 255, 102, .16);
  --nh-ink: #e6fbf0; --nh-soft: #8fb8a4; --nh-accent: #00ff66; --nh-accent-soft: rgba(0, 255, 102, .12); --nh-nav: rgba(6, 22, 15, .96); }
body #view-notes .nh-body { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 900px; margin: 0 auto; }
/* Encabezado: nombre de la app, buscar y perfil */
.nh-appbar { display: flex; align-items: center; gap: 10px; padding: 4px 2px 0; }
.nh-brand { display: flex; align-items: center; gap: 8px; margin-right: auto; min-width: 0; }
.nh-brand img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; box-shadow: 0 4px 10px rgba(20, 60, 40, .2); }
.nh-word { font: 800 26px/1 Manrope, system-ui, sans-serif; letter-spacing: -.02em; color: var(--nh-ink); }
.nh-word b { color: var(--nh-accent); }
.nh-round { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: var(--nh-ink); }
.nh-round svg { width: 24px; height: 24px; }
.nh-round.is-user { background: var(--nh-accent-soft); color: var(--nh-accent); }
.nh-round:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; }
.nh-title { margin: 14px 2px 6px; font: 800 34px/1.1 Manrope, system-ui, sans-serif; letter-spacing: -.02em; color: var(--nh-ink); }
.nh-row { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 10px; }
.nh-row h2 { margin: 0; font-size: 19px; color: var(--nh-ink); }
/* Inicio: Continuar y módulos */
.nh-continue { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; cursor: pointer; background: var(--nh-surface); border: 1px solid var(--nh-line); box-shadow: 0 6px 16px rgba(20, 60, 40, .06); }
.nh-continue-cover { flex: none; width: 42px; }
.nh-continue b { display: block; font-size: 15.5px; color: var(--nh-ink); } .nh-continue small { display: block; font-size: 13px; color: var(--nh-soft); }
.nh-continue i, .nh-mod i, .nh-nbgo, .nh-morerow i { margin-left: auto; display: grid; color: var(--nh-soft); }
.nh-continue i svg, .nh-mod i svg, .nh-nbgo svg, .nh-morerow i svg { width: 20px; height: 20px; }
.nh-favlink { all: unset; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--nh-accent); font-weight: 800; font-size: 14.5px; }
.nh-favlink svg { width: 22px; height: 22px; }
.nh-mods { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(108px, 1fr); gap: 12px; }
@media (min-width: 700px) { .nh-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nh-mod { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 18px; cursor: pointer;
  background: var(--nh-surface); border: 1px solid var(--nh-line); box-shadow: 0 6px 16px rgba(20, 60, 40, .06); }
.nh-mod i { position: absolute; right: 12px; top: 26px; }
.nh-mod-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--nh-accent-soft); color: var(--nh-accent); }
.nh-mod-ic svg { width: 28px; height: 28px; }
.nh-mod b { font-size: 16px; color: var(--nh-ink); }
.nh-mod:active, .nh-continue:active, .nh-morerow:active { transform: scale(.98); }
.nh-mod:focus-visible, .nh-continue:focus-visible, .nh-morerow:focus-visible, .nh-nbopen:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; }
/* Cuadernos: buscar, nuevo y lista */
.nh-search { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; padding: 0 14px; border-radius: 16px; background: var(--nh-surface); border: 1px solid var(--nh-line); color: var(--nh-soft); }
.nh-search svg { width: 20px; height: 20px; flex: none; }
.nh-search input { flex: 1; min-width: 0; padding: 14px 0; border: 0; outline: 0; background: transparent; color: var(--nh-ink); font: 600 15px Manrope, system-ui, sans-serif; }
body #view-notes .nh .nh-primary { margin: 0 0 14px; background: linear-gradient(135deg, #0f7a4b, #0b5e3a); }
.nh-nblist { display: grid; gap: 12px; }
.nh-nbcard { display: flex; align-items: center; gap: 4px; padding: 10px 12px 10px 16px; border-radius: 18px; background: var(--nh-surface); border: 1px solid var(--nh-line); box-shadow: 0 6px 16px rgba(20, 60, 40, .06); }
.nh-nbopen { all: unset; flex: 1; min-width: 0; display: flex; align-items: center; gap: 18px; cursor: pointer; }
.nh-nbcover { flex: none; width: 58px; padding: 4px 6px 8px 4px; }
.nh-nbtext { min-width: 0; } .nh-nbtext b { display: block; font-size: 16px; color: var(--nh-ink); overflow-wrap: anywhere; }
.nh-nbtext small { display: block; font-size: 13px; color: var(--nh-soft); }
.nh-nbtext em { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--nh-accent-soft); color: var(--nh-accent); font: 700 12px Manrope, system-ui, sans-serif; font-style: normal; }
/* Hoja de funciones del cuaderno: barra para volver */
.nh-detailbar { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--nh-soft); font-weight: 700; }
/* Más */
.nh-morelist { display: grid; gap: 10px; margin-top: 8px; }
.nh-morerow { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px; cursor: pointer; background: var(--nh-surface); border: 1px solid var(--nh-line); }
.nh-morerow .nh-mod-ic { width: 44px; height: 44px; } .nh-morerow .nh-mod-ic svg { width: 22px; height: 22px; }
.nh-morerow b { font-size: 15.5px; color: var(--nh-ink); } .nh-morerow b small { display: block; font-size: 12px; font-weight: 600; color: var(--nh-soft); }
.nh-switchrow input { margin-left: auto; width: 46px; height: 26px; accent-color: var(--nh-accent); }
/* Barra de abajo (en pantallas anchas pasa a la izquierda, en vertical) */
.nh-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  background: var(--nh-nav); border-top: 1px solid var(--nh-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nh-bottom button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 16px; cursor: pointer; color: var(--nh-soft); font: 700 12px Manrope, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.nh-bottom button svg { width: 24px; height: 24px; padding: 4px 18px; border-radius: 999px; box-sizing: content-box; }
.nh-bottom button[aria-current="page"] { color: var(--nh-accent); }
.nh-bottom button[aria-current="page"] svg { background: var(--nh-accent-soft); }
.nh-bottom button:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; }
@media (min-width: 1000px) {
  body #view-notes .nh { padding-left: 116px; padding-bottom: 14px; }
  .nh-bottom { top: 0; right: auto; width: 96px; grid-template-columns: 1fr; grid-auto-rows: min-content; align-content: center; gap: 10px; padding: 16px 8px; border-top: 0; border-right: 1px solid var(--nh-line); }
}
/* ★ Favoritos: estrella dorada (antes corazón) */
.nh-heart[aria-pressed="true"] svg { fill: #f2b83a; stroke: #d9952a; }
.nh-heart svg { stroke: #c9b27a; }
.nh-favbar { border-color: #f1dca2; background: linear-gradient(135deg, #fff, #fff6dc); box-shadow: 0 6px 14px rgba(217, 149, 42, .14); }
.nh-favbar b { color: #9a6a00; } .nh-favbar small { color: #8a7a52; } .nh-favbar i { color: #d9b260; }
.nb-fav-check { border-color: rgba(242, 184, 58, .6); } .nb-fav-check input { accent-color: #e0a02a; } .nb-fav-check span { color: #b98100; }
/* Modo oscuro: hoja del cuaderno y ventanitas */
:root[data-theme="dark"] body #view-notes .nh .nh-page { background: radial-gradient(circle at 1px 1px, rgba(0, 255, 102, .07) 1px, transparent 1.4px) 0 0 / 16px 16px, linear-gradient(180deg, #0f271c, #0a1d15); box-shadow: 0 20px 44px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(0, 255, 102, .14), inset 10px 0 0 -6px var(--c); }
:root[data-theme="dark"] body #view-notes .nh .nh-name strong, :root[data-theme="dark"] body #view-notes .nh .nh-tile b { color: #e6fbf0; }
:root[data-theme="dark"] body #view-notes .nh .nh-tile, :root[data-theme="dark"] body #view-notes .nh .nh-btn { background: #102a1f; border-color: rgba(0, 255, 102, .16); color: #e6fbf0; }
:root[data-theme="dark"] .nh-win { background: linear-gradient(180deg, #0f271c, #08170f); color: #e6fbf0; }
:root[data-theme="dark"] .nh-win .nh-item, :root[data-theme="dark"] .nh-win .nh-acts button, :root[data-theme="dark"] .nh-win .nh-task, :root[data-theme="dark"] .nh-win .nh-list button, :root[data-theme="dark"] .nh-win .nh-book, :root[data-theme="dark"] .nh-win .nh-chip, :root[data-theme="dark"] .nh-win .nh-theme { background: #102a1f; border-color: rgba(0, 255, 102, .16); color: #e6fbf0; }
:root[data-theme="dark"] .nh-win .nh-item-open b, :root[data-theme="dark"] .nh-win .nh-acts button span, :root[data-theme="dark"] .nh-win-head b { color: #e6fbf0; }
:root[data-theme="dark"] .nh-win .nh-input, :root[data-theme="dark"] .nh-win .nh-task-add input, :root[data-theme="dark"] .nh-win .nh-folder-add input { background: #121b43; color: #e6fbf0; border-color: rgba(0, 255, 102, .25); }
:root[data-theme="dark"] .nh-win .nh-x { background: rgba(255, 255, 255, .08); color: #e6fbf0; }
/* Los íconos de la barra de abajo llevan su «píldora» por fuera (si no, la regla general los dejaba sin espacio). */
body #view-notes .nh .nh-bottom button svg { box-sizing: content-box; }

/* ---------- Calculadora (Fase 2 del prompt maestro, 2026-10-13; src/calculator.js) ---------- */
/* 7 funciones en el cuaderno: «Asistente» ocupa la fila completa para que no quede un hueco. */
.nh-grid .nh-tile[data-tile="ai"] { grid-column: 1 / -1; }
.cc-layer { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; font-family: Manrope, Roboto, system-ui, sans-serif;
  --cc-bg: #fbfdfb; --cc-ink: #12291f; --cc-soft: #5f7a6d; --cc-key: #ffffff; --cc-keyline: #e3ebe6; --cc-fn: #eef6f1; --cc-op: #dcefe4; --cc-eq: #0f7a4b; --cc-disp: #eaf6ef; }
:root[data-theme="dark"] .cc-layer { --cc-bg: #0b1d15; --cc-ink: #e6fbf0; --cc-soft: #8fb8a4; --cc-key: #102a1f; --cc-keyline: rgba(0, 255, 102, .14); --cc-fn: #0f2a1e; --cc-op: #123826; --cc-eq: #00c853; --cc-disp: #081a12; }
.cc-bg { position: absolute; inset: 0; background: rgba(8, 30, 20, .35); opacity: 0; transition: opacity .2s ease; }
.cc-panel { position: absolute; left: 50%; bottom: 0; width: min(460px, 100%); max-height: 94vh; overflow: auto; box-sizing: border-box; padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0; background: var(--cc-bg); color: var(--cc-ink); box-shadow: 0 -16px 40px rgba(0, 0, 0, .25); transform: translate(-50%, 105%); transition: transform .26s cubic-bezier(.4, 0, .2, 1); }
.cc-layer.is-open { pointer-events: auto; }
.cc-layer.is-open .cc-bg { opacity: 1; }
.cc-layer.is-open .cc-panel { transform: translate(-50%, 0); }
/* Pantallas anchas: panel a la derecha, la hoja sigue visible a la izquierda. */
@media (min-width: 900px) {
  .cc-bg { background: transparent; }
  .cc-panel { left: auto; right: 0; top: 0; bottom: 0; width: 400px; max-height: none; border-radius: 22px 0 0 22px; transform: translateX(105%); box-shadow: -16px 0 40px rgba(0, 0, 0, .2); }
  .cc-layer.is-open .cc-panel { transform: translateX(0); }
}
.cc-panel * { box-sizing: border-box; }
.cc-head { display: flex; align-items: center; gap: 8px; }
.cc-head > div { flex: 1; min-width: 0; } .cc-head b { display: block; font-size: 20px; } .cc-head small { display: block; font-size: 11.5px; color: var(--cc-soft); }
.cc-insert { all: unset; padding: 8px 10px; border-radius: 12px; background: var(--cc-op); color: var(--cc-eq); font-weight: 800; font-size: 12.5px; cursor: pointer; }
.cc-insert:disabled { opacity: .45; cursor: default; }
.cc-x { all: unset; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cc-fn); font-size: 22px; cursor: pointer; }
.cc-tools { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.cc-modes { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--cc-fn); }
.cc-modes button { all: unset; text-align: center; padding: 8px; border-radius: 11px; font-weight: 800; font-size: 13.5px; color: var(--cc-soft); cursor: pointer; }
.cc-modes button[aria-pressed="true"] { background: var(--cc-key); color: var(--cc-eq); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.cc-angle { all: unset; padding: 9px 14px; border-radius: 12px; background: var(--cc-op); color: var(--cc-eq); font-weight: 800; font-size: 13px; cursor: pointer; }
.cc-display { padding: 12px 14px; border-radius: 18px; background: var(--cc-disp); border: 1px solid var(--cc-keyline); min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; }
.cc-expr { font: 600 24px/1.25 Manrope, system-ui, sans-serif; overflow-wrap: anywhere; color: var(--cc-ink); }
.cc-ph { color: var(--cc-soft); }
.cc-result { align-self: flex-end; min-height: 40px; font: 800 34px/1.15 Manrope, system-ui, sans-serif; color: var(--cc-eq); overflow-wrap: anywhere; text-align: right; }
.cc-error { font-size: 15px; font-weight: 700; color: #c0392b; }
.cc-memory { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.cc-mem { all: unset; padding: 5px 10px; border-radius: 10px; font-size: 12px; font-weight: 800; color: var(--cc-soft); background: var(--cc-fn); cursor: pointer; }
.cc-mem:disabled { opacity: .45; cursor: default; }
.cc-memval { margin-left: auto; font-size: 12px; color: var(--cc-soft); }
.cc-grid { display: grid; gap: 6px; margin-bottom: 7px; }
/* Calculadora científica única (2026-10-13): 24 teclas de funciones (6 columnas) + 19 de números (5 columnas). */
.cc-basic { grid-template-columns: repeat(5, 1fr); }
.cc-sci { grid-template-columns: repeat(6, 1fr); }
.cc-key { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50px; border-radius: 14px; background: var(--cc-key); border: 1px solid var(--cc-keyline); cursor: pointer;
  font: 700 20px Manrope, system-ui, sans-serif; color: var(--cc-ink); -webkit-tap-highlight-color: transparent; user-select: none; }
.cc-sci .cc-key { min-height: 44px; font-size: 14px; background: var(--cc-fn); padding: 2px 1px; }
.cc-key .cc-alt { display: block; font-size: 9.5px; font-weight: 800; line-height: 1; color: #c77700; margin-bottom: 2px; }
.cc-key.is-shifted { color: #c77700; }
.cc-key.is-shifted .cc-alt { color: var(--cc-soft); }
.cc-key.is-shift { background: #c77700; color: #fff; font-size: 12px; }
.cc-key.is-shift.is-on { box-shadow: 0 0 0 3px rgba(199, 119, 0, .35); }
.cc-key.is-on:not(.is-shift) { background: var(--cc-eq); color: #fff; }
.cc-key.is-del { background: #fde8ec; color: #b3263e; font-size: 16px; }
.cc-key.is-wide { grid-column: span 2; }
.cc-flags { display: flex; gap: 6px; min-height: 14px; font-size: 10.5px; font-weight: 800; color: var(--cc-soft); letter-spacing: .04em; }
:root[data-theme="dark"] .cc-key.is-del { background: #3a1820; color: #ff8fa3; }
:root[data-theme="dark"] .cc-key .cc-alt, :root[data-theme="dark"] .cc-key.is-shifted { color: #ffb74d; }
.cc-key.is-fn { background: var(--cc-fn); }
.cc-key.is-op { background: var(--cc-op); color: var(--cc-eq); font-size: 24px; }
.cc-key.is-eq { background: var(--cc-eq); color: #fff; font-size: 26px; }
.cc-key:active { transform: scale(.95); }
.cc-key:focus-visible, .cc-modes button:focus-visible, .cc-angle:focus-visible, .cc-insert:focus-visible, .cc-x:focus-visible { outline: 2px solid var(--cc-eq); outline-offset: 2px; }
.cc-history { margin-top: 6px; border: 1px solid var(--cc-keyline); border-radius: 16px; background: var(--cc-key); }
.cc-histhead { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; font-weight: 800; cursor: pointer; }
.cc-histhead small { padding: 2px 8px; border-radius: 999px; background: var(--cc-fn); color: var(--cc-soft); }
.cc-history ul { list-style: none; margin: 0; padding: 0 10px 6px; display: grid; gap: 6px; }
.cc-history li { display: flex; align-items: center; gap: 6px; padding: 6px 4px; border-top: 1px solid var(--cc-keyline); }
.cc-histitem { all: unset; flex: 1; min-width: 0; cursor: pointer; }
.cc-histitem span { display: block; font-size: 13.5px; overflow-wrap: anywhere; } .cc-histitem b { display: block; font-size: 13px; color: var(--cc-soft); }
.cc-mini { all: unset; padding: 6px 9px; border-radius: 10px; background: var(--cc-fn); font-size: 11.5px; font-weight: 800; color: var(--cc-eq); cursor: pointer; }
.cc-link { all: unset; display: block; padding: 6px 14px 12px; font-size: 12.5px; font-weight: 800; color: #b3263e; cursor: pointer; }
.cc-note { display: block; padding: 0 14px 12px; font-size: 12px; color: var(--cc-soft); }
@media (max-height: 820px) { .cc-key { min-height: 44px; } .cc-sci .cc-key { min-height: 38px; } .cc-display { min-height: 84px; } }
@media (max-height: 700px) { .cc-key { min-height: 40px; } .cc-sci .cc-key { min-height: 34px; } .cc-display { min-height: 78px; } .cc-result { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .cc-panel, .cc-bg { transition: none; } }

/* ---------- Tablas con cálculos en la hoja (Fase 2 del prompt maestro, 2026-10-13; src/page-tables.js) ---------- */
table.pt-table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 10px 0; font-size: .95em; }
table.pt-table th, table.pt-table td { min-width: 96px; max-width: 220px; padding: 6px 9px; line-height: 1.35; border: 1px solid rgba(15, 122, 75, .28); vertical-align: top; text-align: left; overflow-wrap: normal; word-break: keep-all; hyphens: none; background-clip: padding-box; }
/* La hoja corta palabras en cualquier punto (notebook-cover.css); en las tablas no: la tabla se desliza a lo ancho. */
body dialog.notebook-book-dialog .book-page-content table.pt-table :is(td, th), body .reader-content table.pt-table :is(td, th) { overflow-wrap: normal; word-break: keep-all; }
table.pt-table tfoot td, table.pt-table td.pt-auto { white-space: nowrap; }
.pt-bar select { width: auto; max-width: 170px; min-width: 0; }
table.pt-table tbody td { background-color: rgba(255, 255, 255, .55); }
table.pt-table thead th { background: rgba(15, 122, 75, .1); font-weight: 800; }
table.pt-table td.pt-auto { color: #0f7a4b; font-weight: 700; background: rgba(15, 122, 75, .04); text-align: right; }
table.pt-table tfoot td { background: rgba(15, 122, 75, .14); font-weight: 800; color: #0f7a4b; text-align: right; }
table.pt-table tfoot td small { display: block; font-size: .72em; font-weight: 700; opacity: .75; text-transform: uppercase; letter-spacing: .03em; }
[contenteditable="true"] table.pt-table tfoot td { cursor: pointer; }
[contenteditable="true"] table.pt-table tfoot td:empty::after { content: '＋ cálculo'; font-size: .75em; font-weight: 600; opacity: .55; }
:root[data-theme="dark"] table.pt-table th, :root[data-theme="dark"] table.pt-table td { border-color: rgba(0, 255, 102, .22); }
:root[data-theme="dark"] table.pt-table td.pt-auto, :root[data-theme="dark"] table.pt-table tfoot td { color: #3ee08a; }
.pt-bar { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; align-items: center; gap: 6px; margin: 6px 0; padding: 7px 10px; border-radius: 14px; background: #eaf6ef; border: 1px solid #cfe6d8; color: #12291f; font-size: 13px; }
.pt-bar > * { flex: 0 0 auto; white-space: nowrap; }
.pt-bar[hidden] { display: none; }
.pt-bar strong { margin-right: 4px; }
.pt-bar button, .pt-bar select { font: inherit; font-weight: 700; padding: 7px 10px; border-radius: 10px; border: 1px solid #cfe6d8; background: #fff; color: #0f7a4b; cursor: pointer; }
.pt-bar .pt-fn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.pt-bar .pt-danger { color: #b3263e; }
:root[data-theme="dark"] .pt-bar { background: #0f2a1e; border-color: rgba(0, 255, 102, .18); color: #e6fbf0; }
:root[data-theme="dark"] .pt-bar button, :root[data-theme="dark"] .pt-bar select { background: #102a1f; border-color: rgba(0, 255, 102, .18); color: #3ee08a; }
.pt-dialog { border: 0; border-radius: 20px; padding: 18px; width: min(360px, calc(100% - 32px)); background: #fbfdfb; color: #12291f; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.pt-dialog::backdrop { background: rgba(8, 30, 20, .35); }
.pt-dialog form { display: grid; gap: 12px; }
.pt-dialog strong { font-size: 18px; }
.pt-dialog small { color: #5f7a6d; }
.pt-dialog-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-dialog label { display: grid; gap: 4px; font-weight: 700; font-size: 13px; }
.pt-dialog input[type="number"] { font: inherit; padding: 9px 10px; border-radius: 10px; border: 1px solid #cfe6d8; }
.pt-dialog .pt-check { display: flex; align-items: center; gap: 8px; }
.pt-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
:root[data-theme="dark"] .pt-dialog { background: #0b1d15; color: #e6fbf0; }
:root[data-theme="dark"] .pt-dialog input[type="number"] { background: #102a1f; color: #e6fbf0; border-color: rgba(0, 255, 102, .18); }