/* Interfaz en BLANCO Y NEGRO (pedido de Edilberto, 2026-10-13; prompt 2, sección 1).
   - Solo dos opciones: Claro (fondo blanco, letras negras) y Oscuro (fondo negro, letras blancas).
   - El logo conserva sus colores (es una imagen; aquí no se toca).
   - Los colores del CONTENIDO (portadas, letras y resaltados del cuaderno, dibujos, fondos del chat) se conservan.
   - monochrome-auto.css (generado) cambia el resto de verdes por grises; este archivo pone los colores principales.
   Se carga al final de index.html para ganar sobre los estilos anteriores. */
:root {
  --mono-bg: #F5F7FF; --mono-surface: #ffffff; --mono-line: #DDE3F7; --mono-ink: #1B2550; --mono-soft: #56608A;
  --mono-accent: #1B2550; --mono-accent-soft: #E6ECFF; --mono-on-accent: #ffffff;
  --mono-nav: #1B2550; --mono-nav-ink: #ffffff; --mono-nav-soft: #B7C0E6; --mono-nav-active: #ffffff; --mono-nav-active-ink: #1B2550;
  --cuadernote-neon: #1B2550;
}
:root[data-theme="dark"] {
  --mono-bg: #0B1233; --mono-surface: #141D47; --mono-line: #26326A; --mono-ink: #EEF1FF; --mono-soft: #A3ADD8;
  --mono-accent: #ffffff; --mono-accent-soft: rgba(255, 255, 255, .12); --mono-on-accent: #0B1233;
  --mono-nav: #EEF1FF; --mono-nav-ink: #1B2550; --mono-nav-soft: #56608A; --mono-nav-active: #1B2550; --mono-nav-active-ink: #ffffff;
  --cuadernote-neon: #ffffff;
}
html, body { background: var(--mono-bg); }

/* ---------- Pantallas principales (Inicio, Cuadernos, Más) ---------- */
body #view-notes .nh, :root[data-theme="dark"] body #view-notes .nh {
  --nh-bg: var(--mono-bg); --nh-surface: var(--mono-surface); --nh-line: var(--mono-line); --nh-ink: var(--mono-ink); --nh-soft: var(--mono-soft);
  --nh-accent: var(--mono-accent); --nh-accent-soft: var(--mono-accent-soft); --nh-green: var(--mono-accent); --nh-nav: var(--mono-nav);
}
body #view-notes .nh, :root[data-theme="dark"] body #view-notes .nh { background: var(--mono-bg); }
body.cuadernote-exclusive .app-shell { background: var(--mono-bg) !important; }
body #view-notes .nh .nh-primary, :root[data-theme="dark"] body #view-notes .nh .nh-primary { background: var(--mono-accent); color: var(--mono-on-accent); }
.nh-continue, .nh-mod, .nh-nbcard { box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.nh-brand img { box-shadow: 0 3px 8px rgba(0, 0, 0, .18); }

/* Encabezado fijo: el logo, el nombre, la lupa y el perfil nunca desaparecen al deslizar. */
/* «sticky» no sirve aquí (un contenedor antiguo recorta el desplazamiento), por eso va fijo y la página baja lo mismo. */
body #view-notes .nh .nh-appbar { position: fixed; top: 0; left: 0; right: 0; z-index: 45; box-sizing: border-box; height: calc(60px + env(safe-area-inset-top));
  margin: 0; padding: env(safe-area-inset-top) 14px 0; background: var(--mono-bg); border-bottom: 1px solid var(--mono-line); }
body #view-notes .nh .nh-body { padding-top: calc(60px + env(safe-area-inset-top)); }
@media (min-width: 1000px) { body #view-notes .nh .nh-appbar { left: 96px; padding-left: 20px; padding-right: 20px; } }

/* Barra de abajo: negra en modo claro (sección activa blanca), clara en modo oscuro (sección activa negra). */
body #view-notes .nh .nh-bottom { background: var(--mono-nav); border-top: 0; box-shadow: 0 -6px 18px rgba(0, 0, 0, .12); -webkit-backdrop-filter: none; backdrop-filter: none; }
body #view-notes .nh .nh-bottom button { color: var(--mono-nav-soft); }
body #view-notes .nh .nh-bottom button[aria-current="page"] { color: var(--mono-nav-ink); }
body #view-notes .nh .nh-bottom button[aria-current="page"] svg { background: var(--mono-nav-active); color: var(--mono-nav-active-ink); }
body #view-notes .nh .nh-bottom button:focus-visible { outline-color: var(--mono-nav-ink); }

/* Interruptor (claro / oscuro) con forma de interruptor real, no de casilla. */
.nh-toggle { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 52px !important; height: 30px !important; margin-left: auto; border-radius: 999px;
  background: var(--mono-line); border: 1px solid var(--mono-soft); cursor: pointer; transition: background .2s ease; }
.nh-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--mono-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s ease; }
.nh-toggle:checked { background: var(--mono-accent); border-color: var(--mono-accent); }
.nh-toggle:checked::after { transform: translateX(22px); background: var(--mono-on-accent); }
.nh-toggle:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 3px; }

/* Configuración → Apariencia: selector Claro | Oscuro en blanco y negro. */
body .cn-theme-setting { background: var(--mono-surface) !important; border-color: var(--mono-line) !important; color: var(--mono-ink) !important; }
body .cn-theme-setting legend, body .cn-theme-setting p { color: var(--mono-ink) !important; background: transparent !important; }
body .cn-theme-switch { all: unset; box-sizing: border-box; display: grid; gap: 8px; width: 100%; cursor: pointer; }
.cn-mono-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 16px; border: 1px solid var(--mono-line); background: var(--mono-bg); }
.cn-mono-seg span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px; font: 800 16px Manrope, system-ui, sans-serif; color: var(--mono-soft); }
.cn-mono-seg i { font-style: normal; font-size: 18px; }
.cn-theme-switch[data-theme="light"] .cn-mono-seg [data-opt="light"] { background: #ffffff; color: #1B2550; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.cn-theme-switch[data-theme="dark"] .cn-mono-seg [data-opt="dark"] { background: #1B2550; color: #ffffff; box-shadow: 0 0 0 1px #212f66; }
body .cn-theme-switch .cn-theme-current { justify-self: center; font-size: 13px; color: var(--mono-soft) !important; }
body .cn-theme-switch:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 3px; border-radius: 16px; }

/* ---------- Inicio útil y barra de 5 secciones (prompt 2, sección 2) ---------- */
body #view-notes .nh .nh-bottom { grid-template-columns: repeat(5, 1fr); gap: 2px; padding-left: 6px; padding-right: 6px; }
body #view-notes .nh .nh-bottom button { font-size: 11.5px; padding: 6px 0; }
body #view-notes .nh .nh-bottom button svg { padding: 4px 12px; }
.nh-nextlist { display: grid; gap: 10px; }
.nh-next { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; cursor: pointer;
  background: var(--mono-surface); border: 1px solid var(--mono-line); box-shadow: 0 4px 14px rgba(0, 0, 0, .05); }
.nh-next .nh-mod-ic { width: 44px; height: 44px; flex: none; }
.nh-next .nh-mod-ic svg { width: 22px; height: 22px; }
.nh-next > span:nth-child(2) { flex: 1; min-width: 0; }
.nh-next b { display: block; font-size: 15.5px; color: var(--mono-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-next small { display: block; font-size: 13px; color: var(--mono-soft); }
.nh-next i { display: grid; color: var(--mono-soft); } .nh-next i svg { width: 20px; height: 20px; }
.nh-next.is-empty { border-style: dashed; box-shadow: none; }
.nh-next:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 2px; }
.nh-recent { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.nh-recent-item { all: unset; box-sizing: border-box; display: grid; justify-items: center; gap: 8px; padding: 12px 8px; border-radius: 18px; cursor: pointer;
  background: var(--mono-surface); border: 1px solid var(--mono-line); }
.nh-recent-cover { width: 56px; }
.nh-recent-item b { font-size: 13px; color: var(--mono-ink); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-recent-item:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 2px; }

/* ---------- Cuadernos: letreros de contenido y «Tapa y nombre» (2026-10-13) ---------- */
.nh-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.nh-tags i { font: 700 11.5px Manrope, system-ui, sans-serif; font-style: normal; padding: 3px 9px; border-radius: 999px; background: var(--mono-accent-soft); color: var(--mono-ink); }
.nh-nbtext small, .nh-book small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--mono-soft); }
.nh-editcover { all: unset; display: inline-block; margin-top: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer; font: 800 12.5px Manrope, system-ui, sans-serif;
  background: var(--mono-accent); color: var(--mono-on-accent); }
.nh-editcover:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 2px; }
.nh-grid .nh-tile[data-tile="ai"] { grid-column: auto; }

/* ---------- Multimedia y Agenda: una sola fila de tipos y un botón «＋ Agregar» (prompt 2, sección 10) ---------- */
.nh-typebar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.nh-type { all: unset; box-sizing: border-box; flex: none; display: grid; justify-items: center; gap: 4px; min-width: 66px; padding: 8px 8px 7px; border-radius: 16px; cursor: pointer;
  background: var(--mono-surface); border: 1px solid var(--mono-line); font: 700 12px Manrope, system-ui, sans-serif; color: var(--mono-ink); }
.nh-type svg { width: 26px; height: 26px; }
.nh-type[aria-selected="true"] { background: var(--mono-accent); border-color: var(--mono-accent); color: var(--mono-on-accent); }
.nh-type:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 2px; }
.nh-addrow { display: flex; gap: 8px; margin: 6px 0 4px; }
.nh-add { all: unset; box-sizing: border-box; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 14px; border-radius: 14px; cursor: pointer;
  background: var(--mono-accent); color: var(--mono-on-accent); font: 800 14.5px Manrope, system-ui, sans-serif; }
.nh-add.is-ghost { flex: none; background: var(--mono-surface); color: var(--mono-ink); border: 1px solid var(--mono-line); }
.nh-add svg { width: 20px; height: 20px; }
.nh-add:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 2px; }

/* Ventanitas del cuaderno (Multimedia, Agenda, Documentos…): fondo de la interfaz, no crema. */
body .nh-win, :root[data-theme="dark"] body .nh-win { background: var(--mono-bg) !important; color: var(--mono-ink); }
body .nh-win .nh-win-head b { color: var(--mono-ink); }

/* ---------- Logo tocable («La historia de SEIMA»), eliminar cuadernos y flecha de volver fija ---------- */
body #view-notes .nh .nh-brand { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; margin-right: auto; min-width: 0; cursor: pointer; border-radius: 12px; }
body #view-notes .nh .nh-brand:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 3px; }
.nh-logo-wrap { position: relative; display: inline-flex; }
.nh-logo-plus { position: absolute; right: -5px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 900 12px/1 system-ui; font-style: normal;
  background: var(--mono-accent); color: var(--mono-on-accent); border: 2px solid var(--mono-bg); }
.nh-about { display: grid; justify-items: center; gap: 12px; padding: 10px 6px 18px; text-align: center; }
.nh-about img { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 8px 22px rgba(0, 0, 0, .2); }
.nh-about p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--mono-ink); }
/* Eliminar cuaderno: botón propio, separado del resto de la tarjeta (no se confunde con abrir). */
.nh-book-del { all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 42px; height: 42px; margin-left: 6px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--mono-line); background: var(--mono-bg); color: var(--mono-soft); }
.nh-book-del svg { width: 19px; height: 19px; }
.nh-book-del:hover, .nh-book-del:focus-visible { background: #b3263e; border-color: #b3263e; color: #fff; outline: none; }
.nh-recent-cell { display: grid; gap: 6px; justify-items: center; }
.nh-recent-cell .nh-recent-item { width: 100%; }
.nh-recent-cell .nh-book-del { width: 100%; height: 34px; margin: 0; border-radius: 10px; }
/* Flecha de volver: fija debajo del encabezado, nunca se pierde al deslizar. */
body #view-notes .nh .nh-detailbar, body #view-notes .nh .nh-backlink { position: fixed; top: calc(60px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 44; margin: 0;
  display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px; border-radius: 0; background: var(--mono-bg); border-bottom: 1px solid var(--mono-line); color: var(--mono-ink); }
body #view-notes .nh .nh-body:has(.nh-detailbar, .nh-backlink) { padding-top: calc(110px + env(safe-area-inset-top)); }
@media (min-width: 1000px) { body #view-notes .nh .nh-detailbar, body #view-notes .nh .nh-backlink { left: 96px; } }

/* ---------- Inicio: ★ Favoritos y Mis cuadernos con círculo ＋ (2026-10-13) ---------- */
body #view-notes .nh .nh-row h2 { display: flex; align-items: center; gap: 8px; }
body #view-notes .nh .nh-row h2 svg { width: 22px; height: 22px; }
.nh-favlist { display: grid; gap: 8px; }
.nh-favrow { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; cursor: pointer;
  background: var(--mono-surface); border: 1px solid var(--mono-line); }
.nh-favrow-cover { width: 34px; flex: none; }
.nh-favrow > span:last-child { min-width: 0; }
.nh-favrow b { display: block; font-size: 15px; color: var(--mono-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-favrow small { display: block; font-size: 12.5px; color: var(--mono-soft); }
.nh-favrow:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 2px; }
.nh-favempty { padding: 16px; border-radius: 16px; border: 1px dashed var(--mono-line); color: var(--mono-soft); font-size: 13.5px; text-align: center; }
.nh-welcome { display: grid; justify-items: center; gap: 10px; margin: 4px 0 22px; padding: 24px 16px; border: 1px solid var(--mono-line); border-radius: 22px; text-align: center; background: var(--mono-surface); }
.nh-welcome-book { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--mono-ink); border-radius: 14px; color: var(--mono-ink); }
.nh-welcome-book svg { width: 27px; height: 27px; }
.nh-welcome .nh-eyebrow { margin: 3px 0 0; color: var(--mono-soft); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.nh-welcome h2 { margin: 0; color: var(--mono-ink); font: 800 25px/1.1 Manrope, system-ui, sans-serif; }
.nh-welcome-line { max-width: 31ch; margin: 0; color: var(--mono-soft); font-size: 14px; }
.nh-welcome-steps { display: grid; gap: 8px; width: min(100%, 420px); margin: 8px 0 0; padding: 0; list-style: none; text-align: left; }
.nh-welcome-steps button { all: unset; box-sizing: border-box; display: grid; gap: 3px; width: 100%; min-height: 58px; padding: 11px 13px; border: 1px solid var(--mono-line); border-radius: 14px; cursor: pointer; color: var(--mono-ink); }
.nh-welcome-steps button:hover, .nh-welcome-steps button:focus-visible { background: var(--mono-accent-soft); outline: 2px solid var(--mono-accent); outline-offset: 2px; }
.nh-welcome-steps b { font: 800 14px/1.25 Manrope, system-ui, sans-serif; }
.nh-welcome-steps small { color: var(--mono-soft); font-size: 12px; }
.nh-homegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 8px; }
@media (min-width: 640px) { .nh-homegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nh-homegrid .nh-recent-item { height: 100%; align-content: start; }
.nh-homegrid .nh-tags { justify-content: center; }
.nh-homegrid small { text-align: center; }
.nh-newcircle { all: unset; box-sizing: border-box; display: grid; place-items: center; align-content: center; gap: 10px; min-height: 150px; border-radius: 18px; cursor: pointer;
  border: 2px dashed var(--mono-line); color: var(--mono-ink); }
.nh-newcircle span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--mono-accent); color: var(--mono-on-accent); font: 300 38px/1 system-ui, sans-serif; }
.nh-newcircle b { font: 800 14px Manrope, system-ui, sans-serif; }
.nh-newcircle:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 2px; }

/* Caneca al lado del cuaderno (esquina de su tarjeta, botón propio) y aviso del borrador. */
.nh-recent-cell { position: relative; }
body .nh-recent-cell .nh-book-del { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; margin: 0; border-radius: 12px; background: var(--mono-surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.nh-book-del svg { width: 22px; height: 22px; }
.nh-draftnote { margin: 4px 2px 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; background: var(--mono-accent-soft); color: var(--mono-ink); }

/* Papelera de reciclaje: caneca más grande y elegante; acceso visible en Cuadernos y en Más. */
body .nh-recent-cell .nh-book-del, body .nh-nbcard .nh-book-del { width: 46px; height: 46px; }
.nh-book-del .ic-bin { width: 30px !important; height: 30px !important; }
.nh-morerow .nh-mod-ic .ic-bin { width: 30px; height: 30px; }
.nh-trashlink { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px 0 10px; border-radius: 14px; cursor: pointer;
  background: var(--mono-surface); border: 1px solid var(--mono-line); color: var(--mono-ink); font: 800 14px Manrope, system-ui, sans-serif; }
.nh-trashlink .ic-bin { width: 30px; height: 30px; }
.nh-trashlink:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 2px; }
.nh-trashhead { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; padding: 14px; border-radius: 18px; background: var(--mono-surface); border: 1px solid var(--mono-line); }
.nh-trashhead .ic-bin { flex: none; width: 56px; height: 56px; color: var(--mono-ink); }
.nh-trashhead p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--mono-soft); }
.nh-trashhead b { color: var(--mono-ink); }
/* «Eliminar para siempre»: solo colores de la app (blanco/negro), con borde para distinguirlo de «Recuperar». */
body .nh-pill.is-danger { background: transparent; color: var(--mono-ink); border: 1.5px solid var(--mono-ink); margin-left: 6px; }

/* ---------- Estantería de cuadernos «libres» (sin cuadro): ★ a un lado, caneca al otro, nombre debajo ---------- */
.nh-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; padding: 6px 0 12px; }
@media (min-width: 640px) { .nh-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nh-shelf-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-rows: auto auto; align-items: start; justify-items: center; row-gap: 8px; }
.nh-shelf-cover { all: unset; grid-column: 2; grid-row: 1; width: 78px; cursor: pointer; border-radius: 8px; transition: transform .15s ease; }
.nh-shelf-cover:active { transform: scale(.96); }
.nh-shelf-cover:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 4px; }
body .nh-shelf-item .nh-shelf-star { grid-column: 1; grid-row: 1; align-self: start; margin-top: 2px; }
body .nh-shelf-item .nh-book-del { grid-column: 3; grid-row: 1; align-self: start; position: static; width: 44px; height: 44px; margin: 0; border: 0; background: transparent; box-shadow: none; color: var(--mono-ink); }
body .nh-shelf-item .nh-book-del:hover, body .nh-shelf-item .nh-book-del:focus-visible { background: var(--mono-accent-soft); color: var(--mono-ink); }
.nh-shelf-name { all: unset; grid-column: 1 / -1; grid-row: 2; display: grid; justify-items: center; gap: 2px; max-width: 100%; text-align: center; cursor: pointer; }
.nh-shelf-name b { font: 800 14.5px Manrope, system-ui, sans-serif; color: var(--mono-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-shelf-name .nh-tags { justify-content: center; margin-top: 3px; }
.nh-shelf-name small { font-size: 12px; color: var(--mono-soft); }
.nh-shelf-item.is-new { grid-template-columns: 1fr; }
.nh-shelf-item.is-new .nh-newcircle { min-height: 0; width: 78px; height: 104px; border-radius: 10px; }
.nh-shelf-newlabel { font: 800 14.5px Manrope, system-ui, sans-serif; color: var(--mono-ink); }

/* Caneca cerrada; al poner el dedo o el cursor se abre la tapa y baja la flecha (animación mínima). */
.ic-bin .ic-bin-lid { transform-box: view-box; transform-origin: 26.5px 13px; transition: transform .2s ease; }
.ic-bin .ic-bin-arrow { opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .2s ease; }
.nh-book-del:hover .ic-bin-lid, .nh-book-del:active .ic-bin-lid, .nh-book-del:focus-visible .ic-bin-lid,
.nh-trashlink:hover .ic-bin-lid, .nh-trashlink:active .ic-bin-lid, .nh-morerow:hover .ic-bin-lid, .nh-morerow:active .ic-bin-lid, .nh-trashhead .ic-bin-lid { transform: rotate(78deg); }
.nh-book-del:hover .ic-bin-arrow, .nh-book-del:active .ic-bin-arrow, .nh-book-del:focus-visible .ic-bin-arrow,
.nh-trashlink:hover .ic-bin-arrow, .nh-trashlink:active .ic-bin-arrow, .nh-morerow:hover .ic-bin-arrow, .nh-morerow:active .ic-bin-arrow, .nh-trashhead .ic-bin-arrow { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ic-bin .ic-bin-lid, .ic-bin .ic-bin-arrow { transition: none; } }
.nh-rem .nh-rem-open { min-width: 0; }
body #view-notes .nh .nh-twobtn .nh-primary { margin: 0; }

/* ---------- Recordatorios, Archivados y Papelera (diseño nuevo) ---------- */
.nh-backlink { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 8px; margin: 4px 0 2px; border-radius: 999px;
  cursor: pointer; font: 700 14px Manrope, system-ui, sans-serif; color: var(--mono-soft); }
.nh-backlink svg { width: 20px; height: 20px; }
.nh-backlink:focus-visible { outline: 2px solid var(--mono-accent); }
.nh-twobtn { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 6px 0 4px; }
body #view-notes .nh .nh-twobtn .nh-primary { margin: 0; }
.nh-secondary { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 14px; cursor: pointer;
  background: var(--mono-surface); border: 1px solid var(--mono-line); color: var(--mono-ink); font: 800 14.5px Manrope, system-ui, sans-serif; }
.nh-secondary svg { width: 20px; height: 20px; }
.nh-rems { display: grid; gap: 10px; }
.nh-rem { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; border-radius: 18px; background: var(--mono-surface); border: 1px solid var(--mono-line); }
.nh-rem.is-late { border-left: 4px solid var(--mono-ink); }
.nh-rem.is-done .nh-rem-open b { text-decoration: line-through; color: var(--mono-soft); }
.nh-rem-check { -webkit-appearance: none; appearance: none; flex: none; width: 26px; height: 26px; margin: 0; border-radius: 50%; border: 2px solid var(--mono-soft); cursor: pointer; display: grid; place-items: center; }
.nh-rem-check:checked { background: var(--mono-accent); border-color: var(--mono-accent); }
.nh-rem-check:checked::after { content: '✓'; color: var(--mono-on-accent); font: 900 14px system-ui; }
.nh-rem-open { all: unset; flex: 1; min-width: 0; cursor: pointer; display: grid; gap: 2px; }
.nh-rem-open b { font-size: 15.5px; color: var(--mono-ink); overflow-wrap: anywhere; }
.nh-rem-open small { font-size: 12.5px; color: var(--mono-soft); }
.nh-rem-open span { font-size: 13px; color: var(--mono-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nh-rem-del { all: unset; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: var(--mono-soft); }
.nh-rem-del svg { width: 20px; height: 20px; }
.nh-rem-del:hover, .nh-rem-del:focus-visible { background: var(--mono-accent-soft); color: var(--mono-ink); }
.nh-pill { all: unset; flex: none; padding: 9px 14px; border-radius: 999px; cursor: pointer; background: var(--mono-accent); color: var(--mono-on-accent); font: 800 13px Manrope, system-ui, sans-serif; }
.nh-fav-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.nh-fav-ic svg { width: 30px; height: 30px; }
.nh-emptybox {display: grid; justify-items: center; gap: 8px; margin-top: 24px; padding: 34px 20px; border-radius: 22px; border: 1px dashed var(--mono-line); text-align: center; color: var(--mono-soft); }
.nh-emptybox svg { width: 40px; height: 40px; }
.nh-emptybox b { color: var(--mono-ink); font-size: 16px; }

/* ---------- Menú de abajo con burbuja flotante (referencia de Edilberto) ---------- */
@media (max-width: 999px) {
  body #view-notes .nh .nh-bubblebar { grid-template-columns: repeat(5, 1fr); height: calc(66px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom); gap: 0; overflow: visible;
    border-radius: 22px 22px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .14); }
  /* La burbuja: círculo del color activo, con un aro del color de la página que hace ver el «corte» curvo en la barra. */
  body #view-notes .nh .nh-bubblebar .nh-notch { position: absolute; top: -34px; z-index: 0; width: 54px; height: 54px; border-radius: 50%; pointer-events: none;
    left: calc(6px + (100% - 12px) / 5 * var(--i) + (100% - 12px) / 10 - 33px); box-sizing: content-box;
    background: var(--mono-nav-active); border: 6px solid var(--mono-bg); box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
    transition: left .42s cubic-bezier(.45, 1.35, .45, 1); }
  /* Pequeñas curvas a los lados del corte para que se vea suave, como en la referencia. */
  body #view-notes .nh .nh-bubblebar .nh-notch::before, body #view-notes .nh .nh-bubblebar .nh-notch::after { content: ''; position: absolute; top: 25px; width: 14px; height: 14px; background: transparent; }
  body #view-notes .nh .nh-bubblebar .nh-notch::before { left: -19px; border-top-right-radius: 14px; box-shadow: 5px -5px 0 0 var(--mono-bg); }
  body #view-notes .nh .nh-bubblebar .nh-notch::after { right: -19px; border-top-left-radius: 14px; box-shadow: -5px -5px 0 0 var(--mono-bg); }
  body #view-notes .nh .nh-bubblebar button { position: relative; z-index: 1; justify-content: flex-end; gap: 4px; padding: 0 0 9px; height: 66px; border-radius: 0; color: var(--mono-nav-soft); }
  body #view-notes .nh .nh-bubblebar button svg { width: 24px; height: 24px; padding: 0; background: none !important; transition: transform .42s cubic-bezier(.45, 1.35, .45, 1), color .2s ease; }
  body #view-notes .nh .nh-bubblebar button span { font-size: 11px; transition: color .2s ease; }
  body #view-notes .nh .nh-bubblebar button[aria-current="page"] { color: var(--mono-nav-ink); }
  body #view-notes .nh .nh-bubblebar button[aria-current="page"] svg { transform: translateY(-37px) scale(1.12); color: var(--mono-nav-active-ink); }
  body #view-notes .nh .nh-body { padding-bottom: 34px; }
}
@media (prefers-reduced-motion: reduce) { body #view-notes .nh .nh-bubblebar .nh-notch, body #view-notes .nh .nh-bubblebar button svg { transition: none; } }
@media (min-width: 1000px) { body #view-notes .nh .nh-bubblebar .nh-notch { display: none; } }

/* ---------- Temática de cuaderno: brinco del menú y páginas que se pasan (pedido de Edilberto) ---------- */
@keyframes nh-hop { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-20px) rotate(-10deg) scale(1.06, .94); } 70% { transform: translateY(-6px) rotate(4deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes nh-iconflip { 0% { transform: translateY(-37px) scale(1.12) perspective(200px) rotateY(-180deg); } 100% { transform: translateY(-37px) scale(1.12) perspective(200px) rotateY(0); } }
@keyframes nh-pageturn { 0% { transform: perspective(1400px) rotateY(-78deg); opacity: .25; box-shadow: 24px 0 40px rgba(0, 0, 0, .25); } 70% { opacity: 1; } 100% { transform: perspective(1400px) rotateY(0); opacity: 1; } }
@media (max-width: 999px) {
  body #view-notes .nh .nh-bubblebar.is-hopping .nh-notch { animation: nh-hop .6s cubic-bezier(.3, 1.4, .5, 1); }
  body #view-notes .nh .nh-bubblebar.is-hopping button[aria-current="page"] svg { animation: nh-iconflip .6s ease; }
}
/* La hoja de funciones del cuaderno, las ventanitas (Agenda, Multimedia…) y las hojas se abren como una página
   que se pasa desde el lomo (solo al abrirse, no cada vez que se actualizan). */
body #view-notes .nh.is-turning .nh-page { transform-origin: left center; animation: nh-pageturn .62s cubic-bezier(.2, .8, .25, 1) both; }
/* La ventanita se centra con translate(-50%); la animación debe CONSERVARLO (si no, queda corrida a la derecha). */
@keyframes nh-pageturn-win { 0% { transform: translate(-50%, 0) perspective(1400px) rotateY(-70deg); opacity: .25; } 70% { opacity: 1; } 100% { transform: translate(-50%, 0) perspective(1400px) rotateY(0); opacity: 1; } }
body .nh-layer.is-open .nh-win.is-turning { transform-origin: left center; animation: nh-pageturn-win .55s cubic-bezier(.2, .8, .25, 1) both; }
body dialog.notebook-book-dialog[open] .book-layout { transform-origin: left center; animation: nh-pageturn .62s cubic-bezier(.2, .8, .25, 1) both; }
@media (prefers-reduced-motion: reduce) { body #view-notes .nh .nh-bubblebar.is-hopping .nh-notch, body #view-notes .nh .nh-bubblebar.is-hopping button svg, body #view-notes .nh.is-turning .nh-page, body .nh-win.is-turning, body dialog.notebook-book-dialog[open] .book-layout { animation: none; } }
/* ＋ pequeño en el encabezado (crear cuaderno), junto a la lupa. */
body #view-notes .nh .nh-appbar .nh-plus { font: 300 26px/1 system-ui, sans-serif; color: var(--mono-ink); }

/* Lupa por pantalla: barra de búsqueda bajo el título, con X para cerrarla. */
.nh-topsearch { margin: 4px 0 12px; }
.nh-search-x { all: unset; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font: 400 24px/1 system-ui; color: var(--mono-soft); }
.nh-search-x:focus-visible { outline: 2px solid var(--mono-accent); }
body #view-notes .nh .nh-appbar .nh-round[data-act="search"][aria-pressed="true"] { background: var(--mono-accent); color: var(--mono-on-accent); }
[hidden].nh-morerow, [hidden].nh-rem, [hidden].nh-favrow, [hidden].nh-shelf-item { display: none !important; }

/* ---------- Calculadora y tablas ---------- */
.cc-layer, :root[data-theme="dark"] .cc-layer {
  --cc-bg: var(--mono-surface); --cc-ink: var(--mono-ink); --cc-soft: var(--mono-soft); --cc-key: var(--mono-surface); --cc-keyline: var(--mono-line);
  --cc-fn: var(--mono-accent-soft); --cc-op: var(--mono-accent-soft); --cc-eq: var(--mono-accent); --cc-disp: var(--mono-bg);
}
.cc-key.is-eq { color: var(--mono-on-accent); }
.cc-key.is-on:not(.is-shift) { color: var(--mono-on-accent); }
.cc-bg { background: rgba(0, 0, 0, .35); }
.pt-bar, :root[data-theme="dark"] .pt-bar { background: var(--mono-accent-soft); border-color: var(--mono-line); color: var(--mono-ink); }
.pt-bar button, .pt-bar select, :root[data-theme="dark"] .pt-bar button, :root[data-theme="dark"] .pt-bar select { background: var(--mono-surface); border-color: var(--mono-line); color: var(--mono-ink); }
.pt-dialog, :root[data-theme="dark"] .pt-dialog { background: var(--mono-surface); color: var(--mono-ink); }

/* ---------- Chat ---------- */
.ian-chat, :root[data-theme="light"] .ian-chat {
  --ic-surface: var(--mono-surface); --ic-field: var(--mono-bg); --ic-line: var(--mono-line); --ic-text: var(--mono-ink); --ic-muted: var(--mono-soft);
  --ic-accent: var(--mono-accent); --ic-accent-ink: var(--mono-on-accent);
}
/* chat.css trae un degradado oscuro propio. En el modo Claro la interfaz debe
   respetar el fondo blanco; los fondos elegidos dentro de cada conversación
   siguen siendo contenido y se conservan en .ic-thread-messages. */
:root[data-theme="light"] .ian-chat { background: var(--mono-bg); }

/* Volver al Inicio desde el Chat: flecha grande y bien visible en claro y oscuro (pedido de Edilberto). */
body .ian-chat .ic-head .ic-back-app { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 8px !important;
  border-radius: 999px !important; background: #ffffff !important; color: #1B2550 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); font: 800 15px Manrope, system-ui, sans-serif !important; opacity: 1 !important; }
body .ian-chat .ic-head .ic-back-app svg { width: 24px !important; height: 24px !important; stroke-width: 2.6; }
body .ian-chat .ic-head .ic-back-app span { display: inline !important; font-size: 15px !important; color: inherit !important; }
body .ian-chat .ic-goback { margin-top: 10px; font-weight: 800; }
/* Con el aviso «No se pudo conectar» queda UNA sola salida: «← Volver al Inicio» (pedido de Edilberto). */
body .ian-chat:has(.ic-goback) .ic-back-app { display: none !important; }

/* X grande para salir del Chat en cualquier pantalla (también si no se pudo conectar). */
.ian-chat .ic-exit { all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: 6px; border-radius: 50%; cursor: pointer;
  font: 400 28px/1 system-ui, sans-serif; color: var(--ic-text); background: color-mix(in srgb, var(--ic-text) 10%, transparent); }
.ian-chat .ic-exit:focus-visible { outline: 2px solid var(--ic-accent); outline-offset: 2px; }

/* Chat en modo claro: las filas de conversación tenían fondo casi negro con letras negras (ilegible).
   Revisado con cuenta de prueba, 2026-10-13. */
:root[data-theme="light"] body .ian-chat .ic-row { background: var(--mono-surface) !important; color: var(--mono-ink) !important; border: 1px solid var(--mono-line) !important; }
:root[data-theme="light"] body .ian-chat .ic-row:hover, :root[data-theme="light"] body .ian-chat .ic-row:focus-visible { background: var(--mono-accent-soft) !important; }
:root[data-theme="light"] body .ian-chat .ic-row * { color: inherit; }
:root[data-theme="light"] body .ian-chat .ic-row small, :root[data-theme="light"] body .ian-chat .ic-row .ic-sub { color: var(--mono-soft) !important; }
/* Etiquetas «Pendiente», «Modo prueba» y «No disponible»: solo blanco y negro (sin amarillo ni naranja). */
body .ian-chat .ic-soon, body .ian-chat .ic-test, body .settings-na-badge { background: transparent !important; color: var(--mono-soft) !important; border: 1px solid var(--mono-line) !important; }

/* ---------- Entrada con correo y contraseña (referencia de Edilberto, 2026-10-13) ---------- */
.ian-chat .ic-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body .ian-chat .ic-login { max-width: 420px; margin-inline: auto; }
body .ian-chat .ic-login h2 { font-size: 30px; letter-spacing: -.01em; }
body .ian-chat .ic-login .ic-form { display: grid; gap: 12px; width: 100%; margin-top: 6px; text-align: left; }
body .ian-chat .ic-login .ic-field input { box-sizing: border-box; width: 100%; min-height: 52px; padding: 0 20px; border-radius: 999px !important;
  border: 1.5px solid var(--mono-line) !important; background: var(--mono-surface) !important; color: var(--mono-ink) !important; font: 500 16px Manrope, system-ui, sans-serif; }
body .ian-chat .ic-login .ic-field input::placeholder { color: var(--mono-soft); }
body .ian-chat .ic-login .ic-field input:focus { outline: none; border-color: var(--mono-accent) !important; box-shadow: 0 0 0 3px var(--mono-accent-soft) !important; }
body .ian-chat .ic-login .ic-pass { position: relative; display: block; }
body .ian-chat .ic-login .ic-pass .ic-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; }
body .ian-chat .ic-login .ic-forgot { justify-self: end; margin-top: -4px; font-size: 13px; font-weight: 700; color: var(--mono-ink) !important; }
body .ian-chat .ic-login .ic-primary { min-height: 52px; border-radius: 999px; background: var(--mono-accent) !important; color: var(--mono-on-accent) !important; }
body .ian-chat .ic-login .ic-or { width: 100%; margin: 14px 0; }
body .ian-chat .ic-login .ic-google { width: 100%; min-height: 52px; border-radius: 999px; border: 1.5px solid var(--mono-line) !important; background: var(--mono-surface) !important; color: var(--mono-ink) !important; }
body .ian-chat .ic-login .ic-create { width: 100%; min-height: 50px; margin-top: 12px; border-radius: 999px; font-weight: 800; }

/* ---------- Avisos ---------- */
.ian-toast { background: var(--mono-ink); color: var(--mono-bg); }

/* Frase del día: estilo elegante (cursiva con serifa), un poco más grande y entre comillas. */
body .nh-welcome .nh-welcome-line { font: italic 400 17px/1.45 Georgia, 'Times New Roman', serif !important; color: var(--mono-ink) !important; opacity: .82; max-width: 30ch; margin: 2px auto 4px !important; }
body .nh-welcome .nh-welcome-line::before { content: '“'; }
body .nh-welcome .nh-welcome-line::after { content: '”'; }
/* Bienvenida: 3 pasos como tarjetas limpias, con el número dentro (pedido de Edilberto, 2026-10-13). */
body ol.nh-welcome-steps { list-style: none !important; counter-reset: paso; padding: 0 !important; margin: 10px 0 0 !important; display: grid; gap: 10px; width: min(100%, 440px); }
body ol.nh-welcome-steps > li { list-style: none !important; margin: 0; padding: 0; counter-increment: paso; }
body ol.nh-welcome-steps > li::marker { content: ''; }
body .nh-welcome-steps button { all: unset; box-sizing: border-box; position: relative; display: grid; gap: 3px; width: 100%; min-height: 64px; padding: 12px 14px 12px 58px; text-align: left; cursor: pointer;
  background: var(--mono-surface) !important; color: var(--mono-ink) !important; border: 1px solid var(--mono-line) !important; border-radius: 16px; box-shadow: 0 3px 12px rgba(0, 0, 0, .06); }
body .nh-welcome-steps button::before { content: counter(paso); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--mono-accent); color: var(--mono-on-accent); font: 800 15px/1 Manrope, system-ui, sans-serif; }
body .nh-welcome-steps b { display: block; font: 800 14.5px/1.25 Manrope, system-ui, sans-serif; color: var(--mono-ink) !important; }
body .nh-welcome-steps b::first-letter { letter-spacing: 0; }
body .nh-welcome-steps small { display: block; font-size: 12.5px; color: var(--mono-soft) !important; }
body .nh-welcome-steps button:hover, body .nh-welcome-steps button:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 2px; }

/* Entrada solo con Google: enlace «Crear una cuenta de Google gratis» con forma de botón (2026-10-13). */
body .ian-chat .ic-login a.ic-create { box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center;
  border: 1.5px solid var(--mono-line) !important; background: var(--mono-surface) !important; color: var(--mono-ink) !important; padding: 0 16px; }
body .ian-chat .ic-login a.ic-create:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 2px; }
body .ian-chat .ic-login .ic-or span { font-size: 12.5px; color: var(--mono-soft); }

/* ---------- Simulación animada del Inicio vacío (pedido de Edilberto, 2026-10-13) ---------- */
.nh-showcase { position: relative; width: min(100%, 440px); margin: 6px auto 4px; }
.sc-scene { display: none; margin: 0; }
.sc-scene.is-active { display: grid; gap: 10px; justify-items: center; animation: sc-in .45s ease both; }
@keyframes sc-in { from { opacity: 0; transform: perspective(900px) rotateY(-25deg); } to { opacity: 1; transform: none; } }
.sc-stage { position: relative; width: 100%; height: 170px; display: grid; place-items: center; border-radius: 18px; overflow: hidden;
  background: var(--mono-bg); border: 1px solid var(--mono-line); }
.sc-scene figcaption { display: grid; gap: 2px; text-align: center; }
.sc-scene figcaption b { font: 800 16px/1.2 Manrope, system-ui, sans-serif; color: var(--mono-ink); }
.sc-scene figcaption small { font-size: 13px; color: var(--mono-soft); }
.sc-dots { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.sc-dots button { all: unset; box-sizing: border-box; width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer; }
.sc-dots button::after { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--mono-line); transition: width .25s ease, background .25s ease; }
.sc-dots button[aria-pressed="true"]::after { width: 22px; background: var(--mono-ink); }
.sc-dots button:focus-visible { outline: 2px solid var(--mono-accent); border-radius: 8px; }

/* 1 · Cuaderno que se abre */
.sc-book { position: relative; width: 96px; height: 124px; perspective: 700px; }
.sc-page { position: absolute; inset: 0; border-radius: 4px 10px 10px 4px; background: var(--mono-surface); border: 1px solid var(--mono-line); display: grid; align-content: center; gap: 12px; padding: 0 14px; }
.sc-page i { height: 2px; background: var(--mono-line); border-radius: 2px; }
.sc-cover { position: absolute; inset: 0; border-radius: 4px 10px 10px 4px; background: var(--mono-ink); transform-origin: left center; box-shadow: 4px 6px 14px rgba(0, 0, 0, .25); }
.sc-cover span { position: absolute; left: -6px; width: 12px; height: 8px; border-radius: 4px; border: 2px solid var(--mono-soft); background: var(--mono-bg); }
.sc-cover span:nth-child(1) { top: 26px; } .sc-cover span:nth-child(2) { top: 56px; } .sc-cover span:nth-child(3) { top: 86px; }
.sc-scene.is-active .sc-cover { animation: sc-open 3.2s ease-in-out infinite; }
@keyframes sc-open { 0%, 15% { transform: rotateY(0); } 50%, 85% { transform: rotateY(-155deg); } 100% { transform: rotateY(0); } }

/* 2 · Tinta que escribe */
.sc-sheet { position: relative; width: 190px; height: 124px; border-radius: 10px; background: var(--mono-surface); border: 1px solid var(--mono-line); display: grid; align-content: center; gap: 16px; padding: 0 18px; box-sizing: border-box; }
.sc-sheet i { height: 3px; border-radius: 3px; background: var(--mono-ink); width: 0; }
.sc-scene.is-active .sc-sheet i { animation: sc-ink 3.2s ease-out infinite; }
.sc-sheet i:nth-child(2) { animation-delay: .5s !important; } .sc-sheet i:nth-child(3) { animation-delay: 1s !important; } .sc-sheet i:nth-child(4) { animation-delay: 1.5s !important; }
@keyframes sc-ink { 0% { width: 0; } 30% { width: 100%; } 90% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
.sc-sheet i:nth-child(4) { max-width: 60%; }
.sc-pen { position: absolute; right: 10px; top: 14px; font: 400 26px/1 system-ui; color: var(--mono-ink); }
.sc-scene.is-active .sc-pen { animation: sc-pen 1.6s ease-in-out infinite; }
@keyframes sc-pen { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-8px, 6px) rotate(-12deg); } }

/* 3 · Fotos, audios y enlaces que caen al cuaderno */
.sc-save { position: relative; width: 200px; height: 140px; }
.sc-tray { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 64px; height: 64px; display: grid; place-items: center; color: var(--mono-ink); }
.sc-tray svg { width: 56px; height: 56px; }
.sc-chip { position: absolute; top: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--mono-ink); color: var(--mono-bg); font: 800 20px/1 system-ui; opacity: 0; }
.sc-chip svg { width: 22px; height: 22px; }
.sc-chip:nth-child(1) { left: 22px; } .sc-chip:nth-child(2) { left: 80px; } .sc-chip:nth-child(3) { left: 138px; }
.sc-scene.is-active .sc-chip { animation: sc-drop 3.2s ease-in infinite; }
.sc-chip:nth-child(2) { animation-delay: .4s !important; } .sc-chip:nth-child(3) { animation-delay: .8s !important; }
@keyframes sc-drop { 0% { opacity: 0; transform: translateY(-10px); } 15% { opacity: 1; transform: translateY(0); } 55% { opacity: 1; transform: translate(var(--sc-x, 0), 70px) scale(.6); } 70%, 100% { opacity: 0; transform: translate(var(--sc-x, 0), 80px) scale(.3); } }
.sc-chip:nth-child(1) { --sc-x: 58px; } .sc-chip:nth-child(3) { --sc-x: -58px; }

/* 4 · Chat que conversa */
.sc-chat { width: 220px; display: grid; gap: 8px; }
.sc-chat p { margin: 0; padding: 8px 12px; border-radius: 14px; font: 600 13px/1.3 Manrope, system-ui, sans-serif; max-width: 80%; opacity: 0; }
.sc-chat .is-in { justify-self: start; background: var(--mono-surface); border: 1px solid var(--mono-line); color: var(--mono-ink); border-bottom-left-radius: 4px; }
.sc-chat .is-out { justify-self: end; background: var(--mono-ink); color: var(--mono-bg); border-bottom-right-radius: 4px; }
.sc-scene.is-active .sc-chat p { animation: sc-msg 3.2s ease-out infinite; }
.sc-chat p:nth-child(2) { animation-delay: .7s !important; } .sc-chat p:nth-child(3) { animation-delay: 1.4s !important; }
@keyframes sc-msg { 0% { opacity: 0; transform: translateY(8px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sc-typing { display: flex; gap: 4px; }
.sc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mono-soft); animation: sc-dot 1s ease-in-out infinite; }
.sc-typing i:nth-child(2) { animation-delay: .15s; } .sc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sc-dot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }

/* 5 · Reloj de tarjetas y campana */
.sc-clock { display: flex; align-items: center; gap: 8px; }
.sc-card { position: relative; display: grid; place-items: center; width: 64px; height: 72px; border-radius: 10px; background: #16204c; color: #d9d9d9; font: 400 46px/1 "Bebas Neue", Oswald, Impact, sans-serif; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.sc-card::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #0f173c; }
.sc-scene.is-active .sc-card:nth-child(2) { animation: sc-flip 3.2s ease-in-out infinite; }
@keyframes sc-flip { 0%, 40% { transform: perspective(300px) rotateX(0); } 50% { transform: perspective(300px) rotateX(-90deg); } 60%, 100% { transform: perspective(300px) rotateX(0); } }
.sc-bell { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 8px; color: var(--mono-ink); }
.sc-bell svg { width: 34px; height: 34px; }
.sc-scene.is-active .sc-bell { animation: sc-ring 3.2s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes sc-ring { 0%, 55% { transform: rotate(0); } 60% { transform: rotate(18deg); } 65% { transform: rotate(-16deg); } 70% { transform: rotate(12deg); } 75% { transform: rotate(-8deg); } 80%, 100% { transform: rotate(0); } }

/* Botón principal de la bienvenida */
.nh-welcome-cta { all: unset; box-sizing: border-box; display: grid; place-items: center; width: min(100%, 440px); min-height: 52px; margin: 14px auto 0; border-radius: 999px; cursor: pointer;
  background: var(--mono-accent); color: var(--mono-on-accent); font: 800 16px Manrope, system-ui, sans-serif; }
.nh-welcome-cta:focus-visible { outline: 2px solid var(--mono-accent); outline-offset: 3px; }

/* Menos movimiento: las escenas se ven quietas (se cambian con los puntitos o deslizando). */
@media (prefers-reduced-motion: reduce) {
  .sc-scene.is-active, .sc-scene.is-active * { animation: none !important; }
  .sc-sheet i { width: 100%; } .sc-chat p, .sc-chip { opacity: 1; }
}

/* Bienvenida a PANTALLA COMPLETA (pedido de Edilberto): solo quedan el logo arriba y el menú abajo. */
body #view-notes .nh .nh-welcome.is-full { box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; margin: 8px 0 0; padding: 14px 14px 10px; border: 0; background: transparent;
  min-height: calc(100dvh - 60px - 66px - 34px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); text-align: center; }
.nh-welcome-hello { margin: 0; font-size: 13.5px; color: var(--mono-soft); line-height: 1.4; }
.nh-welcome-hello b { color: var(--mono-ink); font-size: 15px; }
.nh-welcome-hello span { font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
body .nh-welcome.is-full .nh-welcome-cta { margin: 0 auto; width: min(100%, 460px); }
.nh-welcome-cta.is-swap { animation: sc-cta .4s ease; }
@keyframes sc-cta { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
body .nh-welcome.is-full .nh-showcase { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 560px; margin: 0 auto; }
body .nh-welcome.is-full .sc-scene.is-active { flex: 1; grid-template-rows: 1fr auto; }
body .nh-welcome.is-full .sc-stage { height: auto; min-height: 260px; border-radius: 24px; }
/* Las ilustraciones se agrandan para llenar la escena. */
body .nh-welcome.is-full .sc-stage > * { transform: scale(1.55); }
@media (max-height: 640px) { body .nh-welcome.is-full .sc-stage { min-height: 200px; } body .nh-welcome.is-full .sc-stage > * { transform: scale(1.2); } }
body .nh-welcome.is-full .sc-scene figcaption b { font-size: 19px; }
body .nh-welcome.is-full .sc-scene figcaption small { font-size: 14px; }
body .nh-welcome.is-full .sc-stage > .sc-book { transform: translateX(78px) scale(1.4); }

/* ---------- Escenas «reales» de la bienvenida (2026-10-13) ---------- */
/* 2 · El lápiz escribe de verdad, con letra de mano */
.sc-write { width: 210px; height: 128px; align-content: center; padding: 10px 16px; background-image: repeating-linear-gradient(transparent 0 27px, var(--mono-line) 27px 28px); }
.sc-hand { margin: 0; font: 400 19px/28px 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; color: var(--mono-ink); text-align: left; min-height: 84px; }
.sc-hand .sc-pen { display: inline-block; position: static; margin-left: 2px; font: 400 20px/1 system-ui; transform: translateY(-4px) rotate(-10deg); }
.sc-scene.is-active .sc-hand .sc-pen { animation: sc-pen-wiggle .35s ease-in-out infinite alternate; }
@keyframes sc-pen-wiggle { from { transform: translateY(-4px) rotate(-14deg); } to { transform: translate(2px, -1px) rotate(-4deg); } }

/* 3 · Video que se reproduce, audio con ondas y una foto */
.sc-media { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 220px; }
.sc-video { grid-column: 1 / -1; position: relative; height: 82px; border-radius: 12px; background: var(--mono-ink); display: grid; place-items: center; overflow: hidden; }
.sc-play { color: var(--mono-bg); font: 400 26px/1 system-ui; }
.sc-scene.is-active .sc-play { animation: sc-play 1.6s ease-in-out infinite; }
@keyframes sc-play { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.15); opacity: 1; } }
.sc-bar { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); overflow: hidden; }
:root[data-theme="dark"] .sc-bar { background: rgba(0, 0, 0, .25); }
.sc-bar i { display: block; height: 100%; width: 0; background: var(--mono-bg); }
.sc-scene.is-active .sc-bar i { animation: sc-progress 4.6s linear infinite; }
@keyframes sc-progress { from { width: 0; } to { width: 100%; } }
.sc-audio { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--mono-line); background: var(--mono-surface); color: var(--mono-ink); }
.sc-audio span { display: flex; align-items: center; gap: 3px; height: 24px; }
.sc-audio span i { width: 3px; height: 30%; border-radius: 2px; background: var(--mono-ink); }
.sc-scene.is-active .sc-audio span i { animation: sc-eq .9s ease-in-out infinite; }
.sc-audio span i:nth-child(2) { animation-delay: .1s !important; } .sc-audio span i:nth-child(3) { animation-delay: .25s !important; } .sc-audio span i:nth-child(4) { animation-delay: .05s !important; }
.sc-audio span i:nth-child(5) { animation-delay: .3s !important; } .sc-audio span i:nth-child(6) { animation-delay: .15s !important; } .sc-audio span i:nth-child(7) { animation-delay: .2s !important; }
@keyframes sc-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.sc-photo { display: grid; place-items: center; height: 44px; border-radius: 12px; border: 1px solid var(--mono-line); background: var(--mono-surface); color: var(--mono-ink); }
.sc-photo svg { width: 24px; height: 24px; }
.sc-scene.is-active .sc-photo { animation: sc-pop 2.4s ease-in-out infinite; }
@keyframes sc-pop { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.08) rotate(-3deg); } }

/* 4 · Chat con guion: «escribiendo…» y luego el mensaje */
.sc-chat { width: 230px; min-height: 150px; align-content: end; }
body .sc-scene.is-active .sc-chat p { opacity: 1; animation: none; }
.sc-chat p.sc-show { animation: sc-show .35s ease-out both !important; }
@keyframes sc-show { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.sc-chat p.sc-typing { display: flex; gap: 4px; padding: 10px 12px; }

/* 5 · Hazlo a tu estilo: la hoja cambia de blanco a negro y las letras de estilo */
.sc-style { display: flex; align-items: center; gap: 16px; }
.sc-mini { width: 130px; height: 120px; border-radius: 12px; border: 1px solid var(--mono-line); display: grid; align-content: center; gap: 8px; padding: 0 14px; box-sizing: border-box; background: #ffffff; color: #1B2550; }
.sc-mini b { font: 800 30px/1 Manrope, system-ui, sans-serif; }
.sc-mini span { font: 600 13px/1 Manrope, system-ui, sans-serif; }
.sc-mini i { height: 3px; border-radius: 3px; background: currentColor; opacity: .35; }
.sc-scene.is-active .sc-mini { animation: sc-theme 5.2s ease-in-out infinite; }
.sc-scene.is-active .sc-mini b { animation: sc-font 5.2s steps(1) infinite; }
@keyframes sc-theme { 0%, 40% { background: #ffffff; color: #1B2550; } 50%, 90% { background: #1B2550; color: #EEF1FF; } 100% { background: #ffffff; color: #1B2550; } }
@keyframes sc-font { 0% { font: 800 30px/1 Manrope, sans-serif; } 25% { font: italic 400 32px/1 Georgia, serif; } 50% { font: 800 34px/1 Manrope, sans-serif; } 75% { font: 400 28px/1 'Segoe Print', cursive; } }
.sc-toggle { position: relative; width: 52px; height: 30px; border-radius: 999px; border: 1.5px solid var(--mono-ink); }
.sc-toggle i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--mono-ink); }
.sc-scene.is-active .sc-toggle i { animation: sc-switch 5.2s ease-in-out infinite; }
@keyframes sc-switch { 0%, 40% { transform: none; } 50%, 90% { transform: translateX(22px); } 100% { transform: none; } }

/* 6 · La alarma suena: ondas alrededor de la campana y el reloj vibra */
.sc-bell { position: relative; }
.sc-wave { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--mono-ink); opacity: 0; }
.sc-scene.is-active .sc-wave { animation: sc-wave 1.6s ease-out infinite; }
.sc-scene.is-active .sc-wave:nth-child(2) { animation-delay: .5s; }
@keyframes sc-wave { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.sc-scene.is-active .sc-bell { animation: sc-ring 1.2s ease-in-out infinite !important; }
.sc-scene.is-active .sc-clock .sc-card:first-child { animation: sc-buzz 1.2s linear infinite; }
@keyframes sc-buzz { 0%, 60%, 100% { transform: none; } 65% { transform: translateX(-2px); } 70% { transform: translateX(2px); } 75% { transform: translateX(-2px); } 80% { transform: translateX(1px); } }

@media (prefers-reduced-motion: reduce) { .sc-mini { background: #1B2550; color: #EEF1FF; } .sc-bar i { width: 60%; } .sc-audio span i { height: 70%; } }
.sc-hand { font-family: Caveat, 'Segoe Print', 'Bradley Hand', cursive !important; font-size: 25px !important; font-weight: 600 !important; }
html body #view-notes .nh .nh-welcome .sc-hand, html body #view-notes .nh .nh-welcome .sc-hand span { font-family: Caveat, 'Segoe Print', 'Bradley Hand', cursive !important; font-size: 26px !important; font-weight: 600 !important; line-height: 28px !important; }
body .nh-welcome.is-full .sc-stage > .sc-media { transform: scale(1.22); } body .nh-welcome.is-full .sc-stage > .sc-clock { transform: scale(1.12); } body .nh-welcome.is-full .sc-stage > .sc-chat { transform: scale(1.12); } body .nh-welcome.is-full .sc-stage > .sc-style { transform: scale(1.3); } body .nh-welcome.is-full .sc-stage > .sc-write { transform: scale(1.3); }


/* ---------- Marca SEIMA (2026-10-13): colores del logo (azul, violeta, cian y azul marino) ---------- */
/* Reemplaza el blanco y negro: solo cambian los colores; la forma de todo sigue igual. */
:root {
  --seima-blue: #2F5BFF; --seima-violet: #8B3DFF; --seima-cyan: #22C7F2; --seima-navy: #13205A;
  --seima-grad: linear-gradient(135deg, #2F5BFF 0%, #6A3DFF 55%, #8B3DFF 100%);
  --mono-bg: #F5F7FF; --mono-surface: #ffffff; --mono-line: #DDE3F7; --mono-ink: #13205A; --mono-soft: #56608A;
  --mono-accent: #2F5BFF; --mono-accent-soft: #E6ECFF; --mono-on-accent: #ffffff;
  --mono-nav: #2F5BFF; --mono-nav-ink: #ffffff; --mono-nav-soft: rgba(255, 255, 255, .72); --mono-nav-active: #ffffff; --mono-nav-active-ink: #2F5BFF;
  --cuadernote-neon: #2F5BFF;
}
:root[data-theme="dark"] {
  --mono-bg: #0B1233; --mono-surface: #141D47; --mono-line: #26326A; --mono-ink: #EEF1FF; --mono-soft: #A3ADD8;
  --mono-accent: #22C7F2; --mono-accent-soft: rgba(34, 199, 242, .16); --mono-on-accent: #0B1233;
  --mono-nav: #1B2A7A; --mono-nav-ink: #ffffff; --mono-nav-soft: rgba(255, 255, 255, .66); --mono-nav-active: #22C7F2; --mono-nav-active-ink: #0B1233;
  --cuadernote-neon: #22C7F2;
}
/* Menú de abajo con el degradado del logo (azul → violeta). */
body #view-notes .nh .nh-bottom { background: var(--seima-grad); }
:root[data-theme="dark"] body #view-notes .nh .nh-bottom { background: linear-gradient(135deg, #1B2A7A 0%, #3A1F8F 100%); }
/* Botón principal con el degradado de la marca. */
body #view-notes .nh .nh-primary, :root[data-theme="dark"] body #view-notes .nh .nh-primary { background: var(--seima-grad); color: #ffffff; }
/* Lema de SEIMA (Piensa. Analiza. Crea.) */
.seima-slogan { margin: 4px 0 10px; font: 700 14px/1.3 Manrope, system-ui, sans-serif; letter-spacing: .03em;
  background: linear-gradient(90deg, #2F5BFF, #8B3DFF 60%, #22C7F2); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Marca de inteligencia artificial: «✦ Próximamente» */
.nh-tile .nh-ai-soon { font-style: normal; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #8B3DFF, #22C7F2); color: #ffffff; font: 800 10.5px/1.6 Manrope, system-ui, sans-serif; }
.nh-tile .nh-ai-soon span { font-size: 11px; }


/* SEIMA · íconos de funciones con los colores del logo (Agenda, Escribir, Multimedia, Documentos…) */
body #view-notes .nh .nh-tile svg, body #view-notes .nh .nh-mod svg, body #view-notes .nh .nh-win-head svg { color: var(--seima-blue); }
body #view-notes .nh .nh-tile:nth-child(3n+2) svg { color: var(--seima-violet); }
body #view-notes .nh .nh-tile:nth-child(3n) svg { color: #1FA9D6; }
:root[data-theme="dark"] body #view-notes .nh .nh-tile svg { color: var(--seima-cyan); }
:root[data-theme="dark"] body #view-notes .nh .nh-tile:nth-child(3n+2) svg { color: #B58CFF; }
/* Encabezados y títulos en azul marino; acentos en azul */
body #view-notes .nh .nh-appbar b, body #view-notes .nh h2 { color: var(--mono-ink); }
body #view-notes .nh .nh-appbar button svg { color: var(--seima-blue); }
:root[data-theme="dark"] body #view-notes .nh .nh-appbar button svg { color: var(--seima-cyan); }
/* Animación de bienvenida: puntos, video y tarjetas con la marca */
.sc-video { background: var(--seima-grad) !important; }
.sc-play, .sc-bar i { color: #ffffff; }
.sc-bar i { background: #ffffff !important; }
.sc-audio span i { background: var(--seima-violet) !important; }
.sc-photo { color: var(--seima-blue) !important; }
.sc-toggle { border-color: var(--seima-blue) !important; } .sc-toggle i { background: var(--seima-grad) !important; }
.sc-wave { border-color: var(--seima-cyan) !important; }
@keyframes sc-theme { 0%, 40% { background: #ffffff; color: #13205A; } 50%, 90% { background: #13205A; color: #EEF1FF; } 100% { background: #ffffff; color: #13205A; } }


/* ---------- SEIMA · ajustes finales (2026-10-13) ---------- */
/* Reloj de la bienvenida y de Recordatorios/Alarma: tarjetas con los colores del logo, no negras. */
.sc-card { background: linear-gradient(180deg, #3D6BFF 0%, #2F5BFF 49%, #6A3DFF 51%, #8B3DFF 100%) !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(47, 91, 255, .35) !important; }
.sc-card::after { background: rgba(19, 32, 90, .35) !important; }
.sc-bell { color: var(--seima-violet) !important; }
body .ck-flip .fc-card, body .ck-board .fc-card, body .fc-card { --fc-card: #2F5BFF; color: #ffffff; }
:root[data-theme="dark"] body .ck-flip .fc-card, :root[data-theme="dark"] body .ck-board .fc-card, :root[data-theme="dark"] body .fc-card { --fc-card: #2A3FB8; box-shadow: 0 0 0 1px #3D55D6, 0 .35em 1em rgba(11, 18, 51, .6); }
body .fc-card::after { background: rgba(19, 32, 90, .45) !important; }
body .fc-flap::after { background: #13205A; }

/* Al tocar un ícono o botón: cambia a violeta/azul del logo (se adapta a claro y oscuro). */
html { -webkit-tap-highlight-color: rgba(139, 61, 255, .18); }
body button:not(:disabled):active svg, body [role="button"]:active svg { color: var(--seima-violet) !important; transition: color .08s; }
:root[data-theme="dark"] body button:not(:disabled):active svg { color: var(--seima-cyan) !important; }
body #view-notes .nh .nh-bottom button:active svg { background: rgba(255, 255, 255, .22); color: #ffffff !important; }
body #view-notes .nh .nh-tile:active { border-color: var(--seima-violet); box-shadow: 0 0 0 3px rgba(139, 61, 255, .22); }

/* Argollado real: doble alambre metálico plateado que entra por un agujero perforado en la hoja. */
body #view-notes .nh-page::before { left: -13px; width: 26px; filter: drop-shadow(1px 2px 1.5px rgba(19, 32, 90, .35));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='20' viewBox='0 0 26 20'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.35' stop-color='%23cfd6ea'/%3E%3Cstop offset='.7' stop-color='%237d88ab'/%3E%3Cstop offset='1' stop-color='%23e9edf8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='20.5' cy='10' rx='2.6' ry='3.1' fill='%2313205A' opacity='.55'/%3E%3Cellipse cx='20.8' cy='10.4' rx='1.7' ry='2.2' fill='%23ffffff' opacity='.35'/%3E%3Cpath d='M20 6.6C9 4.6 2 6.6 2.6 9.2' fill='none' stroke='%235b6690' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M20 6.6C9 4.6 2 6.6 2.6 9.2' fill='none' stroke='url(%23m)' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M20 9.6C9 7.6 2.6 9.4 3.1 12.1C4 14.6 12 14.4 19.6 13' fill='none' stroke='%235b6690' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M20 9.6C9 7.6 2.6 9.4 3.1 12.1C4 14.6 12 14.4 19.6 13' fill='none' stroke='url(%23m)' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M15 6 C10 5.4 6 5.8 4.4 6.8' fill='none' stroke='%23ffffff' stroke-width='.7' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E") repeat-y 0 0 / 26px 20px !important; }
.cn3d-spiral { filter: drop-shadow(1px 2px 1.2px rgba(19, 32, 90, .4)) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='20' viewBox='0 0 26 20'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.35' stop-color='%23cfd6ea'/%3E%3Cstop offset='.7' stop-color='%237d88ab'/%3E%3Cstop offset='1' stop-color='%23e9edf8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='20.5' cy='10' rx='2.6' ry='3.1' fill='%230B1233' opacity='.7'/%3E%3Cpath d='M20 6.6C9 4.6 2 6.6 2.6 9.2' fill='none' stroke='%235b6690' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M20 6.6C9 4.6 2 6.6 2.6 9.2' fill='none' stroke='url(%23m)' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M20 9.6C9 7.6 2.6 9.4 3.1 12.1C4 14.6 12 14.4 19.6 13' fill='none' stroke='%235b6690' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M20 9.6C9 7.6 2.6 9.4 3.1 12.1C4 14.6 12 14.4 19.6 13' fill='none' stroke='url(%23m)' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M15 6 C10 5.4 6 5.8 4.4 6.8' fill='none' stroke='%23ffffff' stroke-width='.7' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E") repeat-y 0 0 / 18cqw 13.8cqw !important; }


/* SEIMA · Cuaderno abierto: marco azul de la marca (ya no verde-negro) y escritura desde el primer renglón/cuadro. */
body dialog.notebook-book-dialog.ian-book { background: linear-gradient(145deg, #23379A, #13205A 78%) !important; }
:root[data-theme="dark"] body dialog.notebook-book-dialog.ian-book { background: linear-gradient(145deg, #1B2A7A, #0B1233 78%) !important; }
body dialog.notebook-book-dialog .book-head { background: var(--seima-grad) !important; }
:root[data-theme="dark"] body dialog.notebook-book-dialog .book-head { background: linear-gradient(135deg, #1F3290, #3A1F8F) !important; }
body dialog.notebook-book-dialog .book-page-content { padding-top: 0 !important; cursor: text; }


/* SEIMA · Letras SOBRE la raya, como en un cuaderno real: todos los renglones miden lo mismo (1.85em)
   y las rayas se suben hasta la línea base de la letra. */
body dialog.notebook-book-dialog .book-page .book-page-content { line-height: 1.85em !important; padding-top: 0 !important; background-position: 0 var(--seima-raya, -0.56em) !important; background-origin: content-box; }
body dialog.notebook-book-dialog .book-page-content :is(p, div, li, blockquote, h1, h2, h3, ul, ol) { margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1.85em !important; }
body dialog.notebook-book-dialog .book-page-content :is(h1, h2, h3) { font-size: 1em !important; font-weight: 800; }


/* SEIMA · candadito y botón «Listo» en blanco sobre la barra azul (pedido de Edilberto). */
body dialog.notebook-book-dialog .book-lock-icon, body dialog.notebook-book-dialog .book-lock-icon svg { color: #ffffff !important; }
body dialog.notebook-book-dialog .book-edit-button { color: #ffffff !important; background: rgba(255, 255, 255, .16) !important; border-color: rgba(255, 255, 255, .85) !important; }
body dialog.notebook-book-dialog .book-edit-button svg { color: #ffffff !important; }


/* SEIMA · Palabra con significado: un «+» pequeñito y sutil; al tocarla sale una burbuja. */
body dialog.notebook-book-dialog .book-page-content .ian-gloss { cursor: pointer; text-decoration: underline dotted rgba(139, 61, 255, .55); text-underline-offset: 3px; border-bottom: 0 !important; background: none !important; }
body dialog.notebook-book-dialog .book-page-content .ian-gloss::after { content: '+'; display: inline-grid; place-items: center; width: .95em; height: .95em; margin-left: 1px; vertical-align: .55em;
  border-radius: 50%; background: linear-gradient(135deg, #2F5BFF, #8B3DFF); color: #ffffff; font: 800 .62em/1 Manrope, system-ui, sans-serif; opacity: .85; user-select: none; }
body dialog.notebook-book-dialog .ian-gloss-pop { max-width: min(280px, 86%); padding: 12px 14px 10px; border-radius: 16px 16px 16px 4px; border: 1px solid #DDE3F7; background: #ffffff; color: #13205A;
  box-shadow: 0 10px 28px rgba(47, 91, 255, .22); animation: seima-pop .18s ease-out; }
body dialog.notebook-book-dialog .ian-gloss-pop strong { display: block; margin-bottom: 4px; font: 800 14px/1.3 Manrope, system-ui, sans-serif; background: linear-gradient(90deg, #2F5BFF, #8B3DFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
body dialog.notebook-book-dialog .ian-gloss-pop p { margin: 0 0 10px; font: 500 14px/1.45 Manrope, system-ui, sans-serif; white-space: pre-wrap; }
body dialog.notebook-book-dialog .ian-gloss-pop .gloss-actions { display: flex; gap: 8px; }
body dialog.notebook-book-dialog .ian-gloss-pop .gloss-actions button { flex: 1; min-height: 36px; border-radius: 10px; border: 1px solid #DDE3F7; background: #F5F7FF; color: #2F5BFF; font: 700 13px Manrope, system-ui, sans-serif; }
body dialog.notebook-book-dialog .ian-gloss-pop .gloss-actions [data-gloss-remove] { color: #b3263e; }
:root[data-theme="dark"] body dialog.notebook-book-dialog .ian-gloss-pop { background: #141D47; border-color: #26326A; color: #EEF1FF; }
:root[data-theme="dark"] body dialog.notebook-book-dialog .ian-gloss-pop .gloss-actions button { background: #1B2550; border-color: #26326A; color: #22C7F2; }
:root[data-theme="dark"] body dialog.notebook-book-dialog .ian-gloss-pop .gloss-actions [data-gloss-remove] { color: #ff8197; }
@keyframes seima-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }


/* SEIMA · Favoritos con ★ (quitar) y caneca (eliminar) a un lado. */
.nh-favrow-wrap { display: flex; align-items: center; gap: 6px; }
.nh-favrow-wrap > .nh-favrow { flex: 1; min-width: 0; }
.nh-favacts { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.nh-favacts .nh-heart { width: 40px; height: 40px; }
.nh-favacts .nh-fav-del { width: 40px !important; height: 40px !important; margin: 0; }
.nh-favacts .nh-fav-del .ic-bin { width: 24px !important; height: 24px !important; }


/* SEIMA · Caneca de eliminar: cajita completa con color, elegante y visible (claro y oscuro). */
body #view-notes .nh .nh-book-del { border-radius: 14px !important; border: 1px solid #F3C4D3 !important;
  background: linear-gradient(145deg, #FFF1F5 0%, #F4ECFF 100%) !important; color: #C9264F !important;
  box-shadow: 0 4px 12px rgba(201, 38, 79, .16), inset 0 1px 0 rgba(255, 255, 255, .9) !important; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
body #view-notes .nh .nh-book-del svg, body #view-notes .nh .nh-book-del .ic-bin { color: #C9264F !important; }
body #view-notes .nh .nh-book-del .ic-bin-arrow { stroke: #8B3DFF !important; color: #8B3DFF !important; }
body #view-notes .nh .nh-book-del:hover, body #view-notes .nh .nh-book-del:focus-visible, body #view-notes .nh .nh-book-del:active {
  background: linear-gradient(145deg, #E5395F 0%, #8B3DFF 100%) !important; border-color: transparent !important; transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(139, 61, 255, .3) !important; }
body #view-notes .nh .nh-book-del:hover svg, body #view-notes .nh .nh-book-del:focus-visible svg, body #view-notes .nh .nh-book-del:active svg,
body #view-notes .nh .nh-book-del:hover .ic-bin-arrow, body #view-notes .nh .nh-book-del:active .ic-bin-arrow { color: #ffffff !important; stroke: #ffffff !important; }
:root[data-theme="dark"] body #view-notes .nh .nh-book-del { background: linear-gradient(145deg, #3A1630 0%, #2A1B5A 100%) !important; border-color: #5A2A55 !important; color: #FF8FAB !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25) !important; }
:root[data-theme="dark"] body #view-notes .nh .nh-book-del svg { color: #FF8FAB !important; }
:root[data-theme="dark"] body #view-notes .nh .nh-book-del .ic-bin-arrow { stroke: #B58CFF !important; color: #B58CFF !important; }


/* SEIMA · Cada cuaderno en su propia tarjeta, con la ★ y la caneca pegaditas a la tapa (no se confunden con el vecino). */
body .nh-shelf-item:not(.is-new) { grid-template-columns: 36px 78px 36px; justify-content: center; column-gap: 6px; padding: 12px 6px 10px; border-radius: 18px;
  background: var(--mono-surface); border: 1px solid var(--mono-line); box-shadow: 0 6px 16px rgba(47, 91, 255, .08); }
body .nh-shelf-item .nh-shelf-star { width: 36px; height: 36px; margin-top: 0; }
body .nh-shelf-item .nh-book-del { width: 36px !important; height: 36px !important; border: 1px solid #F3C4D3 !important; }
body .nh-shelf-item .nh-book-del .ic-bin { width: 22px !important; height: 22px !important; }

/* SEIMA · Botón cerrar (X en circulito) con los colores del logo, en toda la app. */
body .nh-x, body .close-button, body .fc-close, body .st-close, body .pz-close, body .emoji-close, body .sp-dclose, body .rc-side-close, body .rc-close-mobile,
body .notebook-library-type-close, body .ic-owner-bubble-close {
  border-radius: 50% !important; border: 0 !important; background: linear-gradient(135deg, #2F5BFF, #8B3DFF) !important; color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(47, 91, 255, .3) !important; }
body .nh-x svg, body .close-button svg, body .fc-close svg, body .st-close svg, body .pz-close svg, body .rc-side-close svg, body .rc-close-mobile svg { color: #ffffff !important; stroke: #ffffff !important; }
body .nh-x:active, body .close-button:active { transform: scale(.92); }
/* La rayita de arrastre de las ventanas: degradado de la marca en vez de color piel. */
body .nh-grab { background: linear-gradient(90deg, #2F5BFF, #8B3DFF, #22C7F2) !important; opacity: .7; }


/* ---------- SEIMA · Mascota en la bienvenida (2026-10-14) ---------- */
/* Seima, el tejón mielero, entra en cada escena y presenta la función con un globito de diálogo. */
body .sc-stage > .sc-seima { position: absolute; left: 8px; bottom: 6px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; transform: none !important; pointer-events: none; }
body .sc-stage > .sc-seima.is-right { left: auto; right: 8px; align-items: flex-end; }
.sc-seima img { width: 116px; height: auto; filter: drop-shadow(0 6px 10px rgba(19, 32, 90, .28)); }
.sc-seima.is-right img { transform: scaleX(-1); }
.sc-seima-say { max-width: 190px; padding: 7px 11px; border-radius: 14px 14px 14px 4px; background: #ffffff; color: #13205A; border: 1px solid #DDE3F7;
  font: 700 12.5px/1.3 Manrope, system-ui, sans-serif; box-shadow: 0 6px 16px rgba(47, 91, 255, .18); }
.sc-seima.is-right .sc-seima-say { border-radius: 14px 14px 4px 14px; }
:root[data-theme="dark"] .sc-seima-say { background: #141D47; color: #EEF1FF; border-color: #26326A; }
.sc-scene .sc-seima { opacity: 0; }
.sc-scene.is-active .sc-seima { animation: sc-seima-in .6s cubic-bezier(.2, .9, .3, 1.2) .15s both; }
.sc-scene.is-active .sc-seima img { animation: sc-seima-bob 2.4s ease-in-out .8s infinite; }
.sc-scene.is-active .sc-seima.is-right img { animation-name: sc-seima-bob-r; }
.sc-scene.is-active .sc-seima-say { animation: sc-seima-say .4s ease-out .6s both; }
@keyframes sc-seima-in { from { opacity: 0; transform: translateX(-40px) !important; } to { opacity: 1; transform: none; } }
@keyframes sc-seima-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sc-seima-bob-r { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-5px); } }
@keyframes sc-seima-say { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
/* Para que Seima no tape la escena, el contenido se corre un poco hacia el lado contrario. */
body .nh-welcome.is-full .sc-stage { min-height: 300px; }
body .nh-welcome.is-full .sc-scene:nth-child(odd) .sc-stage > :first-child { margin-left: 120px; }
body .nh-welcome.is-full .sc-scene:nth-child(even) .sc-stage > :first-child { margin-right: 120px; }
body .nh-welcome.is-full .sc-stage > .sc-book { transform: scale(1.4) !important; }
@media (max-width: 420px) {
  .sc-seima img { width: 92px; } .sc-seima-say { max-width: 150px; font-size: 11.5px; }
  body .nh-welcome.is-full .sc-scene:nth-child(odd) .sc-stage > :first-child { margin-left: 96px; }
  body .nh-welcome.is-full .sc-scene:nth-child(even) .sc-stage > :first-child { margin-right: 96px; }
}
@media (prefers-reduced-motion: reduce) { .sc-scene .sc-seima { opacity: 1; } .sc-scene.is-active .sc-seima, .sc-scene.is-active .sc-seima img, .sc-scene.is-active .sc-seima-say { animation: none; } }

/* Cuaderno de la bienvenida: portada con el logo; adentro el nombre SEIMA y el lema. */
.sc-cover { background: linear-gradient(145deg, #2F5BFF, #6A3DFF 60%, #8B3DFF) !important; display: grid; place-items: center; }
.sc-cover-logo { width: 62%; height: auto; border-radius: 12px; filter: drop-shadow(0 4px 8px rgba(11, 18, 51, .35)); }
.sc-cover span { border-color: #cfd6ea !important; background: #F5F7FF !important; }
.sc-page { align-content: center; justify-items: center; gap: 6px !important; background: #ffffff !important; }
.sc-page-name { font: 900 17px/1 Manrope, system-ui, sans-serif; letter-spacing: .04em; background: linear-gradient(90deg, #2F5BFF, #8B3DFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-page-slogan { font: 700 6.5px/1.2 Manrope, system-ui, sans-serif; color: #13205A; text-align: center; }
.sc-page i { width: 100%; }

/* ---------- SEIMA · Íconos con color propio según su función (claro y oscuro) ---------- */
/* Escribir = azul · Agenda = violeta · Multimedia = cian · Documentos = azul índigo · Asistente IA = violeta→cian */
:root { --ic-write: #2F5BFF; --ic-agenda: #8B3DFF; --ic-media: #0FA3D1; --ic-docs: #3D4FD6; --ic-clock: #0FA3D1; --ic-calc: #2F5BFF; --ic-bell: #8B3DFF; --ic-gear: #56608A; --ic-box: #3D4FD6; --ic-trash: #C9264F; }
:root[data-theme="dark"] { --ic-write: #6F8FFF; --ic-agenda: #B58CFF; --ic-media: #22C7F2; --ic-docs: #8C9BFF; --ic-clock: #22C7F2; --ic-calc: #6F8FFF; --ic-bell: #B58CFF; --ic-gear: #A3ADD8; --ic-box: #8C9BFF; --ic-trash: #FF8FAB; }
/* Lista de «Más»: cada ícono en su cajita de color suave. */
body #view-notes .nh .nh-morerow .nh-mod-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
body #view-notes .nh .nh-morerow .nh-mod-ic svg { width: 22px; height: 22px; }
body #view-notes .nh [data-more="agenda"] .nh-mod-ic { color: var(--ic-agenda); background: color-mix(in srgb, var(--ic-agenda) 14%, transparent); }
body #view-notes .nh [data-more="media"] .nh-mod-ic { color: var(--ic-media); background: color-mix(in srgb, var(--ic-media) 14%, transparent); }
body #view-notes .nh [data-more="clock"] .nh-mod-ic { color: var(--ic-clock); background: color-mix(in srgb, var(--ic-clock) 14%, transparent); }
body #view-notes .nh [data-more="calc"] .nh-mod-ic { color: var(--ic-calc); background: color-mix(in srgb, var(--ic-calc) 14%, transparent); }
body #view-notes .nh [data-more="reminders"] .nh-mod-ic { color: var(--ic-bell); background: color-mix(in srgb, var(--ic-bell) 14%, transparent); }
body #view-notes .nh [data-more="settings"] .nh-mod-ic { color: var(--ic-gear); background: color-mix(in srgb, var(--ic-gear) 14%, transparent); }
body #view-notes .nh [data-more="archived"] .nh-mod-ic { color: var(--ic-box); background: color-mix(in srgb, var(--ic-box) 14%, transparent); }
body #view-notes .nh [data-more="trash"] .nh-mod-ic { color: var(--ic-trash); background: color-mix(in srgb, var(--ic-trash) 12%, transparent); }
/* Funciones del cuaderno: cajita de color según la función (los dibujos ya traen sus colores). */
body #view-notes .nh .nh-tile > svg:first-child { padding: 6px; border-radius: 14px; box-sizing: content-box; }
body #view-notes .nh .nh-tile[data-tile="write"] > svg:first-child { background: color-mix(in srgb, var(--ic-write) 12%, transparent); }
body #view-notes .nh .nh-tile[data-tile="agenda"] > svg:first-child { background: color-mix(in srgb, var(--ic-agenda) 12%, transparent); }
body #view-notes .nh .nh-tile[data-tile="media"] > svg:first-child { background: color-mix(in srgb, var(--ic-media) 12%, transparent); }
body #view-notes .nh .nh-tile[data-tile="docs"] > svg:first-child { background: color-mix(in srgb, var(--ic-docs) 12%, transparent); }
body #view-notes .nh .nh-tile[data-tile="ai"] > svg:first-child { background: linear-gradient(135deg, color-mix(in srgb, #8B3DFF 16%, transparent), color-mix(in srgb, #22C7F2 16%, transparent)); }
body #view-notes .nh .nh-tile[data-tile="write"] b { color: var(--ic-write); } body #view-notes .nh .nh-tile[data-tile="agenda"] b { color: var(--ic-agenda); }
body #view-notes .nh .nh-tile[data-tile="media"] b { color: var(--ic-media); } body #view-notes .nh .nh-tile[data-tile="docs"] b { color: var(--ic-docs); }
/* Menú de abajo: cada sección con su color cuando está activa. */
body #view-notes .nh .nh-bottom button[aria-current="page"] svg { color: #2F5BFF; }

/* Globito al lado de Seima (no encima) para no tapar la escena. */
body .sc-stage > .sc-seima { flex-direction: row; align-items: flex-end; }
body .sc-stage > .sc-seima.is-right { flex-direction: row-reverse; }
body .sc-stage > .sc-seima .sc-seima-say { margin-bottom: 34px; }


/* ---------- SEIMA · Aviso de Novedades (solo cambios importantes, una vez) ---------- */
.seima-news { position: fixed; inset: 0; z-index: 30000; display: grid; place-items: end center; padding: 16px; background: rgba(11, 18, 51, .45); animation: seima-news-fade .25s ease-out; }
.seima-news.is-out { opacity: 0; transition: opacity .25s ease; }
.seima-news-card { position: relative; width: min(420px, 100%); margin-bottom: calc(env(safe-area-inset-bottom) + 8px); padding: 64px 20px 18px; border-radius: 24px; background: #ffffff; color: #13205A;
  box-shadow: 0 20px 50px rgba(19, 32, 90, .35); font: 500 14px/1.45 Manrope, system-ui, sans-serif; animation: seima-news-up .35s cubic-bezier(.2, .9, .3, 1.15); }
.seima-news-pet { position: absolute; top: -46px; left: 50%; width: 150px; transform: translateX(-50%); filter: drop-shadow(0 8px 14px rgba(19, 32, 90, .3)); }
.seima-news-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #2F5BFF, #8B3DFF); color: #fff; font: 800 11px/1.6 Manrope, system-ui, sans-serif; letter-spacing: .08em; }
.seima-news-card h2 { margin: 8px 0 8px; font: 900 21px/1.2 Manrope, system-ui, sans-serif; }
.seima-news-card ul { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 7px; }
.seima-news-card li { position: relative; padding-left: 22px; }
.seima-news-card li::before { content: '✦'; position: absolute; left: 0; top: 0; color: #8B3DFF; }
.seima-news-card p { margin: 0 0 14px; color: #56608A; font-size: 13px; }
.seima-news-card button { width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #2F5BFF, #8B3DFF); color: #fff; font: 800 16px Manrope, system-ui, sans-serif; cursor: pointer; }
:root[data-theme="dark"] .seima-news-card { background: #141D47; color: #EEF1FF; }
:root[data-theme="dark"] .seima-news-card p { color: #A3ADD8; }
:root[data-theme="dark"] .seima-news-card li::before { color: #22C7F2; }
@keyframes seima-news-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes seima-news-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .seima-news, .seima-news-card { animation: none; } }


/* ---------- Seima con movimientos naturales (2026-10-14) ---------- */
/* Capas de la misma imagen: cuerpo (sin la cola), cola que se mece y patita de adelante que se levanta. */
.sc-seima .sc-pet { position: relative; width: 120px; aspect-ratio: 1373 / 887; transform-origin: 50% 100%; filter: drop-shadow(0 6px 10px rgba(19, 32, 90, .28)); }
.sc-seima.is-right .sc-pet { scale: -1 1; }
.sc-seima .sc-pet img { position: absolute; inset: 0; width: 100% !important; height: 100%; transform: none; animation: none !important; filter: none; }
.sc-seima .sc-pet .sc-pet-body { clip-path: polygon(31% 0, 100% 0, 100% 100%, 0 100%, 0 90%, 6% 89%, 19% 81%, 28% 73%, 31% 58%, 32% 42%); }
.sc-seima .sc-pet .sc-pet-tail { clip-path: polygon(0 40%, 33% 30%, 34% 60%, 29% 75%, 19% 83%, 6% 91%, 0 91%); transform-origin: 32% 50%; }
.sc-seima .sc-pet-leg { position: absolute; inset: 0; transform-origin: 85% 60%; }
.sc-seima .sc-pet-leg img { clip-path: polygon(77% 58%, 93% 56%, 97% 86%, 99% 100%, 79% 100%, 78% 90%, 75% 70%); }
.sc-pet-pencil { position: absolute; left: 89%; top: 88%; font: 400 22px/1 system-ui, sans-serif; color: #13205A; transform: rotate(-30deg); transform-origin: 20% 80%; }
:root[data-theme="dark"] .sc-pet-pencil { color: #22C7F2; }
@media (max-width: 420px) { .sc-seima .sc-pet { width: 98px; } }

/* Siempre: respira, mueve la cola y de vez en cuando inclina el cuerpo. */
.sc-scene.is-active .sc-seima .sc-pet { animation: pet-breathe 3.2s ease-in-out infinite; }
.sc-scene.is-active .sc-seima .sc-pet .sc-pet-tail { animation: pet-tail 1.8s ease-in-out infinite !important; }
@keyframes pet-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.01, 1.025); } }
@keyframes pet-tail { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg); } }

/* Según la escena, la patita hace algo distinto. */
.sc-scene.is-active .sc-seima[data-act="wave"] .sc-pet-leg { animation: pet-wave 2.4s ease-in-out .7s infinite; }
.sc-scene.is-active .sc-seima[data-act="point"] .sc-pet-leg { animation: pet-point 3s ease-in-out .7s infinite; }
.sc-scene.is-active .sc-seima[data-act="tap"] .sc-pet-leg { animation: pet-tap 1.6s ease-in-out .7s infinite; }
.sc-scene.is-active .sc-seima[data-act="write"] .sc-pet-leg { animation: pet-write-arm 1.2s ease-in-out .5s infinite; }
.sc-scene.is-active .sc-seima[data-act="write"] .sc-pet-pencil { animation: pet-write-pen .3s ease-in-out infinite alternate; }
/* Saludo: levanta la patita y la mueve de lado a lado. */
@keyframes pet-wave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-55deg); } 25% { transform: rotate(-38deg); } 35% { transform: rotate(-58deg); } 45% { transform: rotate(-38deg); } 55% { transform: rotate(-55deg); } 70% { transform: rotate(0); } }
/* Señalar: levanta la patita hacia lo que se muestra, la sostiene y la baja. */
@keyframes pet-point { 0%, 100% { transform: rotate(0); } 18%, 70% { transform: rotate(-48deg); } 40% { transform: rotate(-44deg); } 85% { transform: rotate(0); } }
/* Tocar: toques cortos, como cuando suena la alarma. */
@keyframes pet-tap { 0%, 100% { transform: rotate(-20deg); } 30% { transform: rotate(-45deg); } 50% { transform: rotate(-25deg); } 70% { transform: rotate(-45deg); } }
/* Escribir: la patita con el lápiz sube un poco y hace trazos cortos. */
@keyframes pet-write-arm { 0%, 100% { transform: rotate(-28deg) translateX(0); } 25% { transform: rotate(-32deg) translateX(1px); } 50% { transform: rotate(-26deg) translateX(3px); } 75% { transform: rotate(-31deg) translateX(2px); } }
@keyframes pet-write-pen { from { transform: rotate(-36deg); } to { transform: rotate(-22deg); } }
@media (prefers-reduced-motion: reduce) { .sc-scene.is-active .sc-seima .sc-pet, .sc-scene.is-active .sc-seima .sc-pet-tail, .sc-scene.is-active .sc-seima .sc-pet-leg, .sc-pet-pencil { animation: none !important; } }

/* Seima debajo de la escena (no al lado): la escena arriba completa y Seima abajo, señalándola. */
body .nh-welcome.is-full .sc-scene:nth-child(odd) .sc-stage > :first-child, body .nh-welcome.is-full .sc-scene:nth-child(even) .sc-stage > :first-child { margin: 0 0 128px !important; }
body .nh-welcome.is-full .sc-stage { min-height: 340px; }
body .nh-welcome.is-full .sc-stage > .sc-book { transform: translateY(-6px) scale(1.25) !important; }
body .sc-stage > .sc-seima { left: 10px; bottom: 8px; }
body .sc-stage > .sc-seima.is-right { right: 10px; }
.sc-seima .sc-pet { width: 150px; }
@media (max-width: 420px) { .sc-seima .sc-pet { width: 132px; } body .nh-welcome.is-full .sc-scene:nth-child(odd) .sc-stage > :first-child, body .nh-welcome.is-full .sc-scene:nth-child(even) .sc-stage > :first-child { margin: 0 0 112px !important; } }

/* ---------- Seima camina (2026-10-14, reemplaza la patita suelta) ---------- */
/* Llega dando un salto, camina de lado a lado (se voltea al llegar a cada orilla) y salta para salir. */
body .sc-stage > .sc-seima, body .sc-stage > .sc-seima.is-right { flex-direction: column !important; align-items: flex-start !important; left: 2%; right: auto; bottom: 8px; }
body .sc-stage > .sc-seima .sc-seima-say { margin: 0 0 2px 12px; border-radius: 14px 14px 14px 4px; }
.sc-seima .sc-pet { scale: 1 1; }
.sc-seima .sc-pet .sc-pet-body { clip-path: none !important; }
.sc-scene.is-active .sc-seima { opacity: 1; animation: pet-walk 8s ease-in-out .8s infinite !important; }
.sc-scene.is-active .sc-seima .sc-pet { animation: pet-enter .8s cubic-bezier(.3, 1.3, .5, 1) both, pet-face 8s steps(1) .8s infinite !important; }
.sc-scene.is-active .sc-seima .sc-pet img.sc-pet-body { animation: pet-gait .45s ease-in-out .8s infinite !important; transform-origin: 50% 100%; }
.sc-scene.is-active .sc-seima .sc-seima-say { animation: sc-seima-say .4s ease-out .7s both !important; }
@keyframes pet-walk { 0%, 4% { left: 2%; } 46%, 54% { left: calc(96% - 150px); } 96%, 100% { left: 2%; } }
@keyframes pet-face { 0% { scale: 1 1; } 50% { scale: -1 1; } }
@keyframes pet-enter { 0% { transform: translate(-130%, 0) rotate(-6deg); opacity: 0; } 45% { transform: translate(-50%, -42px) rotate(-10deg); opacity: 1; } 80% { transform: translate(0, 2px) rotate(2deg); } 100% { transform: none; } }
@keyframes pet-gait { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(1.2deg); } }
/* Salto de salida antes de cambiar de escena. */
.sc-scene.is-active .sc-seima.is-leaving .sc-pet { animation: pet-leave .75s cubic-bezier(.4, 0, .7, 1) forwards !important; }
.sc-scene.is-active .sc-seima.is-leaving .sc-seima-say { opacity: 0; transition: opacity .2s ease; animation: none !important; }
@keyframes pet-leave { 0% { transform: none; opacity: 1; } 40% { transform: translate(18%, -54px) rotate(-12deg); opacity: 1; } 100% { transform: translate(70%, -10px) rotate(8deg); opacity: 0; } }
@media (max-width: 420px) { @keyframes pet-walk { 0%, 4% { left: 2%; } 46%, 54% { left: calc(96% - 132px); } 96%, 100% { left: 2%; } } }
@media (prefers-reduced-motion: reduce) { .sc-scene.is-active .sc-seima, .sc-scene.is-active .sc-seima .sc-pet, .sc-scene.is-active .sc-seima .sc-pet img.sc-pet-body { animation: none !important; } }

body .nh-welcome.is-full .sc-stage > .sc-book { transform: translate(52px, -6px) scale(1.25) !important; }




/* ---------- Seima camina de verdad (2026-10-14): marioneta de 5 piezas ---------- */
/* El tejón apoya toda la planta (como el oso) y camina en «secuencia lateral»: trasera cercana → delantera cercana →
   trasera lejana → delantera lejana, cada una un cuarto de paso después de la anterior. Las 4 patas son la misma imagen
   recortada; el cuerpo es la imagen sin la parte baja de las patas. */
body .sc-seima .sc-pet .sc-pet-body { clip-path: polygon(0 0, 100% 0, 100% 100%, 99% 100%, 99% 70%, 78% 70%, 78% 78%, 69% 78%, 69% 100%, 64% 100%, 64% 74%, 43% 74%, 43% 100%, 39% 100%, 39% 72%, 21% 72%, 21% 100%, 0 100%) !important; }
.sc-seima .sc-pet .sc-leg { position: absolute; inset: 0; width: 100% !important; height: 100%; }
.sc-seima .sc-pet .sc-leg.is-near-hind { clip-path: polygon(21% 69%, 39% 69%, 39% 100%, 21% 100%); transform-origin: 31% 71%; }
.sc-seima .sc-pet .sc-leg.is-far-hind { clip-path: polygon(43% 71%, 64% 71%, 64% 100%, 43% 100%); transform-origin: 53% 73%; filter: brightness(.88); }
.sc-seima .sc-pet .sc-leg.is-far-front { clip-path: polygon(69% 75%, 78% 75%, 78% 100%, 69% 100%); transform-origin: 74% 77%; filter: brightness(.88); }
.sc-seima .sc-pet .sc-leg.is-near-front { clip-path: polygon(78% 67%, 99% 67%, 99% 100%, 78% 100%); transform-origin: 87% 69%; }

/* Mientras camina: cada pata da su paso; el cuerpo sube y baja un poquito con cada pisada y avanza por la escena. */
body .sc-scene.is-active .sc-seima { animation: pet-walk 11s linear .8s infinite !important; left: 2%; }
body .sc-scene.is-active .sc-seima .sc-pet { animation: pet-enter .8s cubic-bezier(.3, 1.3, .5, 1) both, pet-face 11s steps(1) .8s infinite !important; }
body .sc-scene.is-active .sc-seima .sc-pet img.sc-pet-body { animation: pet-bob .36s ease-in-out .8s infinite !important; transform-origin: 50% 100%; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg { animation: pet-step .72s linear infinite !important; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg.is-near-hind { animation-delay: .8s !important; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg.is-near-front { animation-delay: .98s !important; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg.is-far-hind { animation-delay: 1.16s !important; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg.is-far-front { animation-delay: 1.34s !important; }
/* Un paso: la pata apoyada va de adelante hacia atrás (empuja); luego se levanta y vuelve adelante por el aire. */
@keyframes pet-step {
  0% { transform: rotate(-15deg) translateY(0); }
  60% { transform: rotate(15deg) translateY(0); }
  72% { transform: rotate(10deg) translateY(-4%); }
  86% { transform: rotate(-6deg) translateY(-5%); }
  100% { transform: rotate(-15deg) translateY(0); }
}
@keyframes pet-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(.6deg); } }
/* Recorre la escena a la velocidad de sus pasos, se voltea en cada orilla y regresa. */
@keyframes pet-walk { 0%, 3% { left: 2%; } 47%, 53% { left: calc(96% - 150px); } 97%, 100% { left: 2%; } }
@keyframes pet-face { 0% { scale: 1 1; } 50% { scale: -1 1; } }
@media (max-width: 420px) { @keyframes pet-walk { 0%, 3% { left: 2%; } 47%, 53% { left: calc(96% - 132px); } 97%, 100% { left: 2%; } } }
/* Al saltar para salir, las patas se estiran. */
body .sc-scene.is-active .sc-seima.is-leaving .sc-pet .sc-leg { animation: none !important; transform: rotate(-20deg); transition: transform .2s ease; }
@media (prefers-reduced-motion: reduce) { body .sc-scene.is-active .sc-seima, body .sc-scene.is-active .sc-seima .sc-pet, body .sc-scene.is-active .sc-seima .sc-pet img { animation: none !important; } }

/* Uniones sin grietas: cada pata empieza más arriba (como hombro/cadera) y gira desde ahí. */
.sc-seima .sc-pet .sc-leg.is-near-hind { clip-path: polygon(22% 63%, 39% 63%, 39% 100%, 21% 100%) !important; transform-origin: 31% 66% !important; }
.sc-seima .sc-pet .sc-leg.is-far-hind { clip-path: polygon(44% 65%, 63% 65%, 64% 100%, 43% 100%) !important; transform-origin: 53% 68% !important; }
.sc-seima .sc-pet .sc-leg.is-far-front { clip-path: polygon(70% 69%, 78% 69%, 78% 100%, 69% 100%) !important; transform-origin: 74% 72% !important; }
.sc-seima .sc-pet .sc-leg.is-near-front { clip-path: polygon(79% 56%, 97% 56%, 99% 100%, 78% 100%) !important; transform-origin: 87% 60% !important; }
@keyframes pet-step {
  0% { transform: rotate(-12deg) translateY(0); }
  60% { transform: rotate(12deg) translateY(0); }
  72% { transform: rotate(8deg) translateY(-3%); }
  86% { transform: rotate(-5deg) translateY(-4%); }
  100% { transform: rotate(-12deg) translateY(0); }
}
/* Sin rayitas en los bordes: cada pata cubre un poco más que el hueco que deja en el cuerpo. */
.sc-seima .sc-pet .sc-leg.is-near-hind { clip-path: polygon(20% 63%, 40% 63%, 40% 100%, 20% 100%) !important; }
.sc-seima .sc-pet .sc-leg.is-far-hind { clip-path: polygon(42% 65%, 65% 65%, 65% 100%, 42% 100%) !important; }
.sc-seima .sc-pet .sc-leg.is-far-front { clip-path: polygon(68.5% 69%, 78.5% 69%, 78.5% 100%, 68.5% 100%) !important; }
.sc-seima .sc-pet .sc-leg.is-near-front { clip-path: polygon(77.5% 56%, 98% 56%, 100% 100%, 77.5% 100%) !important; }
/* Patas delanteras: paso más corto; la delantera lejana es más ancha (queda escondida y tapa cualquier hueco). */
.sc-seima .sc-pet .sc-leg.is-far-front { clip-path: polygon(68.5% 66%, 86% 66%, 86% 100%, 68.5% 100%) !important; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg.is-near-front, body .sc-scene.is-active .sc-seima .sc-pet .sc-leg.is-far-front { animation-name: pet-step-front !important; }
@keyframes pet-step-front {
  0% { transform: rotate(-7deg) translateY(0); }
  60% { transform: rotate(7deg) translateY(0); }
  72% { transform: rotate(5deg) translateY(-3%); }
  86% { transform: rotate(-3deg) translateY(-4%); }
  100% { transform: rotate(-7deg) translateY(0); }
}
/* Caminata natural y a su velocidad (2026-10-14): ~2 pasos por segundo como un tejón; movimientos con aceleración
   suave (no a velocidad pareja); el cuerpo sube y baja con cada pisada y se mece un poquito. */
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg { animation-duration: .5s !important; animation-timing-function: ease-in-out !important; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg.is-near-hind { animation-delay: .8s !important; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg.is-near-front { animation-delay: .925s !important; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg.is-far-hind { animation-delay: 1.05s !important; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg.is-far-front { animation-delay: 1.175s !important; }
@keyframes pet-step {
  0% { transform: rotate(-17deg) translateY(0); }
  55% { transform: rotate(16deg) translateY(0); }
  70% { transform: rotate(9deg) translateY(-4%); }
  85% { transform: rotate(-8deg) translateY(-5%); }
  100% { transform: rotate(-17deg) translateY(0); }
}
@keyframes pet-step-front {
  0% { transform: rotate(-9deg) translateY(0); }
  55% { transform: rotate(8deg) translateY(0); }
  70% { transform: rotate(5deg) translateY(-3%); }
  85% { transform: rotate(-4deg) translateY(-4%); }
  100% { transform: rotate(-9deg) translateY(0); }
}
body .sc-scene.is-active .sc-seima .sc-pet img.sc-pet-body { animation: pet-bob-soft .25s ease-in-out .8s infinite alternate !important; }
@keyframes pet-bob-soft { from { transform: translateY(0) rotate(-.4deg); } to { transform: translateY(-2.5px) rotate(.5deg); } }
body .sc-scene.is-active .sc-seima { animation: pet-walk 9s cubic-bezier(.45, .05, .55, .95) .8s infinite !important; }
body .sc-scene.is-active .sc-seima .sc-pet { animation: pet-enter .8s cubic-bezier(.3, 1.3, .5, 1) both, pet-face 9s steps(1) .8s infinite !important; }

/* Recorrido completo en cada escena: ida (izquierda a derecha) y regreso en 5,6 s; patas al ritmo del avance. */
body .sc-scene.is-active .sc-seima { animation: pet-walk 5.6s cubic-bezier(.45, .05, .55, .95) .8s infinite !important; }
body .sc-scene.is-active .sc-seima .sc-pet { animation: pet-enter .8s cubic-bezier(.3, 1.3, .5, 1) both, pet-face 5.6s steps(1) .8s infinite !important; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg { animation-duration: .42s !important; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg.is-near-front { animation-delay: .905s !important; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg.is-far-hind { animation-delay: 1.01s !important; }
body .sc-scene.is-active .sc-seima .sc-pet .sc-leg.is-far-front { animation-delay: 1.115s !important; }
body .sc-scene.is-active .sc-seima .sc-pet img.sc-pet-body { animation-duration: .21s !important; }


/* Seima SIN saltos (pedido de Edilberto, 2026-10-14): aparece suavemente y solo camina de lado a lado. */
body .sc-scene.is-active .sc-seima .sc-pet { animation: pet-appear .6s ease-out both, pet-face 5.6s steps(1) .8s infinite !important; }
body .sc-scene.is-active .sc-seima.is-leaving .sc-pet { animation: pet-appear .6s ease-out both, pet-face 5.6s steps(1) .8s infinite !important; }
body .sc-scene.is-active .sc-seima.is-leaving .sc-pet .sc-leg { animation-name: pet-step !important; animation-play-state: running !important; transform: none; }
body .sc-scene.is-active .sc-seima.is-leaving .sc-pet .sc-leg.is-near-front, body .sc-scene.is-active .sc-seima.is-leaving .sc-pet .sc-leg.is-far-front { animation-name: pet-step-front !important; }
body .sc-scene.is-active .sc-seima.is-leaving .sc-seima-say { opacity: 1; }
@keyframes pet-appear { from { opacity: 0; } to { opacity: 1; } }


/* ---------- Seima quieta que mira (2026-10-14, reemplaza la caminata) ---------- */
/* Quieta en un lado, sin mover las patas. Al cambiar de escena gira la cabeza para mirar la animación.
   En la última escena se aleja (se hace pequeña y desaparece); al volver a empezar, aparece de nuevo. */
html body .sc-scene.is-active .sc-seima, html body .sc-scene .sc-seima { animation: none !important; left: 4% !important; }
html body .sc-scene.is-active .sc-seima .sc-pet { animation: pet-appear .7s ease-out both !important; scale: 1 1 !important; transform-origin: 50% 100%; }
html body .sc-seima .sc-pet .sc-pet-body { clip-path: polygon(0 0, 63% 0, 65% 28%, 76% 33%, 88% 38%, 100% 35%, 100% 100%, 0 100%) !important; animation: none !important; }
html body .sc-seima .sc-pet .sc-pet-head { clip-path: polygon(63% 0, 100% 0, 100% 41%, 88% 46%, 76% 41%, 64% 35%); transform-origin: 74% 37%; }
html body .sc-scene.is-active .sc-seima .sc-pet .sc-pet-head { animation: pet-look 1.6s cubic-bezier(.3, .9, .4, 1) .5s both !important; }
@keyframes pet-look { 0% { transform: rotate(0); } 45% { transform: rotate(-9deg); } 70% { transform: rotate(-5deg); } 100% { transform: rotate(-6deg); } }
/* Última escena: se aleja. */
html body .sc-scene[data-scene="5"].is-active .sc-seima .sc-pet { animation: pet-appear .7s ease-out both, pet-away 2.2s ease-in 4.4s forwards !important; }
@keyframes pet-away { 0% { transform: none; opacity: 1; } 100% { transform: translate(45%, -14px) scale(.45); opacity: 0; } }
html body .sc-scene[data-scene="5"].is-active .sc-seima .sc-seima-say { animation: sc-seima-say .4s ease-out .7s both, pet-say-out .4s ease-in 4.2s forwards !important; }
@keyframes pet-say-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html body .sc-scene.is-active .sc-seima .sc-pet, html body .sc-scene.is-active .sc-seima .sc-pet .sc-pet-head { animation: none !important; } }


/* ---------- Flecha fija que señala el ＋ (reemplaza la barra azul de la bienvenida, 2026-10-14) ---------- */
body #view-notes .nh .nh-plus-hint { all: unset; box-sizing: border-box; position: fixed; z-index: 46; top: calc(62px + env(safe-area-inset-top)); right: 64px;
  display: flex; align-items: flex-start; gap: 4px; cursor: pointer; animation: plus-hint-bob 1.4s ease-in-out infinite; }
body #view-notes .nh .nh-plus-hint span { margin-top: 18px; padding: 7px 12px; border-radius: 14px 4px 14px 14px; background: linear-gradient(135deg, #2F5BFF, #8B3DFF); color: #fff;
  font: 700 13px/1.25 Manrope, system-ui, sans-serif; box-shadow: 0 6px 16px rgba(47, 91, 255, .3); white-space: nowrap; }
body #view-notes .nh .nh-plus-hint span b { font-weight: 900; }
body #view-notes .nh .nh-plus-hint i { display: grid; place-items: center; width: 30px; height: 30px; color: #2F5BFF; transform: rotate(90deg); }
body #view-notes .nh .nh-plus-hint i svg { width: 26px; height: 26px; stroke-width: 2.6; }
:root[data-theme="dark"] body #view-notes .nh .nh-plus-hint i { color: #22C7F2; }
@keyframes plus-hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (min-width: 1000px) { body #view-notes .nh .nh-plus-hint { right: 84px; } }
@media (prefers-reduced-motion: reduce) { body #view-notes .nh .nh-plus-hint { animation: none; } }
/* La animación sube un poco porque ya no está la barra azul. */
body .nh-welcome.is-full .nh-showcase { margin-top: 40px; }

/* ---------- Seima más pequeña y, al final, se aleja dando pasitos ---------- */
html body .sc-seima .sc-pet { width: 104px !important; }
html body .sc-scene[data-scene="5"].is-active .sc-seima .sc-pet { animation: pet-appear .7s ease-out both, pet-away 2.6s linear 4.2s forwards !important; }
html body .sc-scene[data-scene="5"].is-active .sc-seima .sc-pet .sc-pet-body,
html body .sc-scene[data-scene="5"].is-active .sc-seima .sc-pet .sc-pet-head { animation: pet-steps .3s ease-in-out 4.2s 9 alternate !important; }
@keyframes pet-steps { from { translate: 0 0; } to { translate: 0 -4px; } }
@keyframes pet-away { 0% { transform: none; opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(60%, -40px) scale(.3); opacity: 0; } }

html body .sc-scene[data-scene="5"].is-active .sc-seima .sc-pet .sc-pet-head { animation: pet-look 1.6s cubic-bezier(.3, .9, .4, 1) .5s both, pet-steps .3s ease-in-out 4.2s 9 alternate !important; }

body #view-notes .nh .nh-plus-hint { right: 75px; }

body #view-notes .nh .nh-welcome.is-full .nh-welcome-hello { margin-top: 46px; }
body .nh-welcome.is-full .nh-showcase { margin-top: 10px; }


/* Bienvenida: sin el ＋ del encabezado; en su lugar, un solo botón «＋ Empieza a crear» en ese mismo sitio. */
body #view-notes .nh:has(.nh-welcome.is-full) .nh-appbar .nh-plus { display: none !important; }
body #view-notes .nh .nh-plus-hint { top: calc(11px + env(safe-area-inset-top)) !important; right: 58px !important; z-index: 47; animation: plus-hint-pulse 2.2s ease-in-out infinite !important; }
body #view-notes .nh .nh-plus-hint span { margin-top: 0 !important; padding: 9px 14px !important; border-radius: 999px !important; font-size: 14px !important; }
body #view-notes .nh .nh-plus-hint span b { margin-right: 2px; }
body #view-notes .nh .nh-plus-hint i { display: none !important; }
@keyframes plus-hint-pulse { 0%, 100% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.05); } }
body #view-notes .nh .nh-welcome.is-full .nh-welcome-hello { margin-top: 10px !important; }
@media (min-width: 1000px) { body #view-notes .nh .nh-plus-hint { right: 78px !important; } }