:root {
  --accent: var(--cyan);
  --panel: #111c2b;
  --panel-2: #16283c;
  --text: #e7edf7;
  --mono: 'DM Mono';
}

/* Acciones de tarjetas con el estilo de referencia: fondo oscuro, borde y
   brillo verde neón. La presentación no modifica sus handlers ni su estado. */
body #view-notes .library-context-actions .library-note-pin-action,
body #view-notes .library-context-actions .library-favorite-action,
body #view-notes .library-context-actions .library-like-action,
body #view-notes .library-context-actions .trash-action,
body #view-notes .notebook-context-actions .notebook-card-menu > summary,
body #view-notes .library-note-menu > summary,
body #view-notes .library-media-menu > summary {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 1px solid #00e878 !important;
  border-radius: 11px !important;
  background: #07171a !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px #00e8782b, 0 0 13px #00e87855, inset 0 1px #ffffff14 !important;
  text-shadow: none !important;
}
body #view-notes .library-context-actions .library-note-pin-action .ian-icon,
body #view-notes .library-context-actions .library-favorite-action .ian-icon,
body #view-notes .library-context-actions .library-like-action .ian-icon,
body #view-notes .library-context-actions .trash-action .ian-icon,
body #view-notes .notebook-context-actions .notebook-card-menu > summary .ian-icon,
body #view-notes .library-note-menu > summary .ian-icon,
body #view-notes .library-media-menu > summary .ian-icon {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.9;
}
body #view-notes .library-context-actions .library-note-pin-action { color: #1499ff !important; }
body #view-notes .library-context-actions .library-note-pin-action.is-pinned,
body #view-notes .library-context-actions .library-favorite-action[aria-pressed="true"],
body #view-notes .library-context-actions .library-like-action[aria-pressed="true"] { background: #07352b !important; }
body #view-notes .library-context-actions .trash-action .ian-icon { color: #ffffff !important; }
body #view-notes .library-context-actions .library-note-pin-action:hover,
body #view-notes .library-context-actions .library-note-pin-action:focus-visible,
body #view-notes .library-context-actions .library-favorite-action:hover,
body #view-notes .library-context-actions .library-favorite-action:focus-visible,
body #view-notes .library-context-actions .library-like-action:hover,
body #view-notes .library-context-actions .library-like-action:focus-visible,
body #view-notes .library-context-actions .trash-action:hover,
body #view-notes .library-context-actions .trash-action:focus-visible,
body #view-notes .notebook-context-actions .notebook-card-menu > summary:hover,
body #view-notes .notebook-context-actions .notebook-card-menu[open] > summary,
body #view-notes .library-note-menu > summary:hover,
body #view-notes .library-note-menu[open] > summary,
body #view-notes .library-media-menu > summary:hover,
body #view-notes .library-media-menu[open] > summary {
  border-color: #36ff9a !important;
  background: #0a2c25 !important;
  box-shadow: 0 0 0 2px #00e8782a, 0 0 18px #00e87888, inset 0 1px #ffffff26 !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}
@media (max-width: 480px) {
  body #view-notes .library-context-actions .library-note-pin-action,
  body #view-notes .library-context-actions .library-favorite-action,
  body #view-notes .library-context-actions .library-like-action,
  body #view-notes .library-context-actions .trash-action,
  body #view-notes .notebook-context-actions .notebook-card-menu > summary,
  body #view-notes .library-note-menu > summary,
  body #view-notes .library-media-menu > summary {
    width: 33px !important;
    min-width: 33px !important;
    height: 33px !important;
    min-height: 33px !important;
    border-radius: 10px !important;
  }
}

/* El QR se abre desde Código QR/IAN en un diálogo compacto y con enlace dinámico. */
.brand::after {
  display: none;
}

/* Acciones verticales: una columna lateral evita que la tarjeta pierda
   espacio útil y conserva cada acción dentro del mismo objeto. */
body #view-notes .library-context-actions,
body #view-notes .notebook-context-actions,
body #view-notes .library-note-controls,
body #view-notes .library-media-controls {
  position: absolute !important;
  inset: 12px 10px 10px auto !important;
  z-index: 7;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 36px;
  min-width: 36px;
  height: auto !important;
  gap: 7px !important;
  pointer-events: none;
}
body #view-notes .library-context-actions > *,
body #view-notes .notebook-context-actions > *,
body #view-notes .library-note-controls > *,
body #view-notes .library-media-controls > * { pointer-events: auto; }
body #view-notes .library-context-actions .library-note-pin-action,
body #view-notes .library-context-actions .library-favorite-action,
body #view-notes .library-context-actions .library-like-action,
body #view-notes .library-context-actions .trash-action,
body #view-notes .notebook-context-actions .notebook-card-menu,
body #view-notes .library-note-menu,
body #view-notes .library-media-menu {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto;
  margin: 0 !important;
  transform: none !important;
}
body #view-notes .library-context-actions .trash-action { margin-top: auto !important; }
body #view-notes .library-context-actions .library-note-pin-action,
body #view-notes .library-context-actions .library-favorite-action,
body #view-notes .library-context-actions .library-like-action,
body #view-notes .library-context-actions .trash-action,
body #view-notes .notebook-context-actions .notebook-card-menu > summary,
body #view-notes .library-note-menu > summary,
body #view-notes .library-media-menu > summary {
  border-color: #19ee9a !important;
  background: linear-gradient(145deg, #142a2d, #131c45 72%) !important;
  box-shadow: 0 3px 0 #004a35, 0 9px 16px #000a, inset 0 1px #ffffff2b, inset 0 -1px #001f17 !important;
  transform: perspective(100px) translateZ(0);
}
body #view-notes .library-context-actions .library-note-pin-action:hover,
body #view-notes .library-context-actions .library-note-pin-action:focus-visible,
body #view-notes .library-context-actions .library-favorite-action:hover,
body #view-notes .library-context-actions .library-favorite-action:focus-visible,
body #view-notes .library-context-actions .library-like-action:hover,
body #view-notes .library-context-actions .library-like-action:focus-visible,
body #view-notes .library-context-actions .trash-action:hover,
body #view-notes .library-context-actions .trash-action:focus-visible,
body #view-notes .notebook-context-actions .notebook-card-menu > summary:hover,
body #view-notes .notebook-context-actions .notebook-card-menu[open] > summary,
body #view-notes .library-note-menu > summary:hover,
body #view-notes .library-note-menu[open] > summary,
body #view-notes .library-media-menu > summary:hover,
body #view-notes .library-media-menu[open] > summary {
  box-shadow: 0 5px 0 #006f4f, 0 12px 21px #000b, inset 0 1px #ffffff3b, 0 0 17px #00e8788a !important;
  transform: perspective(100px) translateX(-2px) translateY(-2px) !important;
}
body #view-notes .library-context-actions .library-note-pin-action:active,
body #view-notes .library-context-actions .library-favorite-action:active,
body #view-notes .library-context-actions .library-like-action:active,
body #view-notes .library-context-actions .trash-action:active,
body #view-notes .notebook-context-actions .notebook-card-menu > summary:active,
body #view-notes .library-note-menu > summary:active,
body #view-notes .library-media-menu > summary:active {
  box-shadow: 0 1px 0 #004a35, inset 0 2px 5px #0009 !important;
  transform: translateY(2px) !important;
}
body #view-notes .notebook-card-actions,
body #view-notes .library-note-menu > div,
body #view-notes .library-media-menu > div {
  top: 0 !important;
  right: calc(100% + 8px) !important;
  bottom: auto !important;
}
@media (max-width: 480px) {
  body #view-notes .library-context-actions,
  body #view-notes .notebook-context-actions,
  body #view-notes .library-note-controls,
  body #view-notes .library-media-controls {
    inset: 8px 7px 8px auto !important;
    width: 33px;
    min-width: 33px;
    gap: 6px !important;
  }
}

#view-settings .module-hero::after {
  display: none !important;
}

:root[data-theme="light"] {
  --accent: #0f8f9a;
  --panel: #ffffff;
  --panel-2: #eef3f8;
  --text: #1d2a3a;
}

.settings-profile-button {
  justify-self: start;
  color: var(--accent);
  border-color: var(--accent);
}

.settings-profile-button:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.profile-edit-preview { gap: 14px; }
.profile-large-photo { position: relative; width: 132px; height: 132px; }
.profile-large-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--cyan); background: var(--panel-2); }
.profile-camera-button { position: absolute; right: -4px; bottom: 5px; width: 39px; height: 39px; display: grid; place-items: center; border: 2px solid var(--panel); border-radius: 50%; background: var(--accent); color: #07131b; font-size: 18px; cursor: pointer; box-shadow: 0 4px 16px #0006; }
.profile-camera-button:hover { transform: scale(1.06); }
.profile-edit-preview p { margin: 0; color: var(--muted); font-size: 12px; }
.profile-photo-choices { display: flex; justify-content: center; gap: 9px; }
.profile-photo-choices .secondary-button { color: var(--text); border-color: var(--line); }
.profile-edit-preview > p,
.profile-dialog:not(.profile-dialog-editing) .profile-photo-choices,
.profile-dialog:not(.profile-dialog-editing) .profile-camera-button { display: none; }
.profile-dialog-editing .profile-camera-button { display: none; }
.profile-dialog:not(.profile-dialog-editing) .profile-preview { padding-bottom: 24px; }

.profile-edit {
  display: grid;
  place-items: center;
  right: -2px;
  top: 2px;
  width: 24px;
  height: 24px;
  font-size: 0;
  line-height: 1;
  background: var(--panel-2);
  border-color: #9bdc49;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #355614 0 24%, #16250d 27% 70%, #141d47 72%);
  box-shadow: 0 0 8px #9bdc4966, inset 0 0 0 1px #c7f77a55;
}

.profile-edit::before {
  content: '';
  width: 14px;
  height: 14px;
  background: linear-gradient(145deg, #fff36a 0 35%, #f2b51b 36% 55%, #9a5b08 56% 100%);
  clip-path: polygon(50% 0, 62% 37%, 100% 50%, 62% 63%, 50% 100%, 38% 63%, 0 50%, 38% 37%);
  filter: drop-shadow(0 0 3px #ffd22a);
}

.profile-edit::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffe94d;
  box-shadow: 0 0 4px #ffb300;
}

/* Sustitución exclusivamente visual del icono de cámara. */
.profile-edit::before,
.profile-edit::after { display: none; }
.profile-edit .compass-icon { width: 17px; height: 17px; display: block; overflow: visible; }
.profile-edit .compass-icon > circle:first-child { fill: #0b1725; stroke: #9df7f4; stroke-width: 1; }
.profile-edit .compass-main { fill: #eefcff; stroke: #9db9c7; stroke-width: .35; }
.profile-edit .compass-secondary { fill: #6e8797; opacity: .9; }
.profile-edit .compass-center { fill: #dffcff; stroke: none; }
.profile-edit { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.profile-edit:hover { transform: scale(1.06); border-color: #d8ffff; box-shadow: 0 0 11px #61e4d488, inset 0 0 0 1px #efffff66; }
.profile-edit:active { transform: scale(.96); }
.profile-edit .compass-icon { filter: drop-shadow(0 0 2px #b8ffff) drop-shadow(0 0 4px #61e4d455); }
.profile-edit .compass-main { fill: #f7ffff; }
.profile-edit .compass-secondary { fill: #8aa5b6; opacity: .82; }
.profile-edit { width: 24px; height: 24px; padding: 0; border-radius: 50%; }
.profile-edit > .compass-icon { display: block !important; visibility: visible !important; opacity: 1 !important; }
.profile-edit {
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.profile-edit:hover,
.profile-edit:active { background: transparent !important; box-shadow: none !important; }
.profile-edit .compass-icon { width: 18px; height: 18px; }
.profile-edit .compass-main { fill: #f4fbff; stroke: #c5d9e3; stroke-width: .3; }
.profile-edit .compass-secondary { fill: #6fdde1; opacity: .85; }
.profile-edit .compass-center { fill: #ffffff; }

.profile-camera-button {
  font-size: 0;
}

.profile-camera-button::before {
  content: '';
  width: 18px;
  height: 18px;
  background: linear-gradient(145deg, #fff36a 0 35%, #f2b51b 36% 55%, #9a5b08 56% 100%);
  clip-path: polygon(50% 0, 62% 37%, 100% 50%, 62% 63%, 50% 100%, 38% 63%, 0 50%, 38% 37%);
  filter: drop-shadow(0 0 3px #ffd22a);
}

/* Una vista de referencia no debe saltarse el contrato de .view. */
.view.reference-dashboard { display: none; }
.view.reference-dashboard.active-view { display: grid; }

.storage-ring {
  background: radial-gradient(circle at center, var(--panel) 56%, transparent 57%), conic-gradient(var(--accent) 0 var(--storage-angle, 0%), var(--line) var(--storage-angle, 0%) 100%);
}

.document-list { display: grid; gap: 10px; }
.document-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 90%, transparent); }
.document-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font: 700 11px Manrope; }
.document-card-info { min-width: 0; display: grid; gap: 4px; }
.document-card-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.document-card-info small { color: var(--muted); font-size: 10px; }
.document-card-actions { display: flex; align-items: center; gap: 7px; }
.document-card-actions button, .document-card-actions a { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; background: transparent; color: var(--text); font: 600 10px Manrope; cursor: pointer; text-decoration: none; }
.document-card-actions button:hover, .document-card-actions a:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 700px) {
  .document-card { grid-template-columns: auto minmax(0, 1fr); }
  .document-card-actions { grid-column: 2; }
}

/* Biblioteca como pantalla de inicio: cada creación se muestra como una app
   táctil sin cambiar el modelo, la apertura ni las acciones persistentes. */
#view-notes .library-app-grid {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 18px 12px;
  align-items: start;
}
#view-notes .library-app-grid > .library-app-shell {
  display: grid;
  min-width: 0;
  min-height: 146px;
  gap: 5px;
}
#view-notes .library-app-grid .library-app-open,
#view-notes .library-app-grid .notebook-card.library-app-open {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 112px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  padding: 0;
}
#view-notes .library-app-grid .library-app-open:hover,
#view-notes .library-app-grid .library-app-open:focus-visible,
#view-notes .library-app-grid .notebook-card.library-app-open:hover,
#view-notes .library-app-grid .notebook-card.library-app-open:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  transform: translateY(-2px);
}
#view-notes .library-app-grid .library-app-icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--library-accent) 42%, #d7e1e8);
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff, #e9f0f4);
  box-shadow: inset 2px 2px #ffffff, inset -2px -2px #cbd5dc, 0 7px 14px #17263326;
  color: var(--library-accent);
  font-size: 34px;
}
#view-notes .library-app-grid .library-app-icon .ian-icon { width: 38px; height: 38px; }
#view-notes .library-app-grid .library-app-copy { display: grid; width: 100%; gap: 2px; text-align: center; }
#view-notes .library-app-grid .library-app-copy strong { overflow: hidden; color: var(--text); font: 700 11px/1.2 Inter, var(--ian-ui-font), sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#view-notes .library-app-grid .library-app-copy small { overflow: hidden; color: var(--muted); font: 700 8px/1.1 Inter, var(--ian-ui-font), sans-serif; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
#view-notes .library-app-grid .library-app-icon > img { width: 100%; height: 100%; object-fit: cover; }
#view-notes .library-app-grid .library-app-icon .reminder-calendar { width: 64px; min-height: 66px; border-radius: 15px; box-shadow: 0 4px 9px #99293632; }
#view-notes .library-app-grid .library-app-icon .reminder-calendar-month { padding: 5px; font-size: 8px; }
#view-notes .library-app-grid .library-app-icon .reminder-calendar strong { font-size: 28px; }
#view-notes .library-app-grid .library-app-icon .reminder-calendar small { font-size: 7px; }
#view-notes .library-app-grid .library-app-note-glyph { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: #fff5a9; color: #735a00; box-shadow: inset 0 1px #ffffffb5; font-size: 29px; transform: rotate(-3deg); }
#view-notes .library-app-grid .library-app-media-glyph { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: color-mix(in srgb, var(--media-accent, #22d3ee) 20%, #eaf8fb); color: var(--media-accent, #21728c); font-size: 30px; }
#view-notes .library-app-grid .library-app-notebook-icon .official-reference-art { width: 100%; height: 100%; }
#view-notes .library-app-grid .library-context-actions {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 2px;
  min-height: 24px;
  pointer-events: auto;
}
#view-notes .library-app-grid .library-context-actions > button,
#view-notes .library-app-grid .library-context-actions > details,
#view-notes .library-app-grid .library-context-actions .library-favorite-action,
#view-notes .library-app-grid .library-context-actions .library-like-action,
#view-notes .library-app-grid .library-context-actions .library-note-pin-action,
#view-notes .library-app-grid .library-context-actions .library-edit-action,
#view-notes .library-app-grid .library-context-actions .library-reminder-alert-action,
#view-notes .library-app-grid .library-context-actions .trash-action {
  position: static;
  width: 21px !important;
  min-width: 21px !important;
  height: 21px !important;
  min-height: 21px !important;
  margin: 0 !important;
  border-radius: 7px;
  font-size: 12px;
  transform: none;
}
#view-notes .library-app-grid .library-context-actions .ian-icon { width: 13px; height: 13px; }
#view-notes .library-app-grid .library-context-actions details > summary { width: 21px; height: 21px; padding: 0; }
#view-notes .library-app-grid .library-context-actions details > div { right: auto; left: 50%; transform: translateX(-50%); }
@media (max-width: 420px) {
  #view-notes .library-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 9px; }
  #view-notes .library-app-grid .library-app-icon { width: 72px; height: 72px; border-radius: 20px; }
}

.ian-toast { position: fixed; z-index: 40; left: 50%; bottom: 22px; max-width: min(420px, calc(100vw - 30px)); transform: translate(-50%, 16px); padding: 11px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: 0 12px 35px #0008; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; font-size: 12px; text-align: center; }
.ian-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.ian-toast[data-tone="success"] { border-color: #55d6a0; }
.ian-toast[data-tone="warning"] { border-color: #f1b46d; }
.chat-search { width: 100%; margin: 9px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); padding: 9px 10px; font: 11px Manrope; }
.chat-call-actions { display: flex; gap: 6px; margin-left: auto; }
.chat-call-actions button { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); cursor: pointer; }
.chat-call-actions button:hover { border-color: var(--accent); color: var(--accent); }
.settings-option { cursor: pointer; }
#profile-preview-image:not([src]) { display: none; }
.notebook-create-dialog form { display: grid; gap: 2px; }
.notebook-create-dialog .dialog-head { align-items: center; padding-bottom: 14px; }
.notebook-create-dialog .dialog-head h2 { font-size: 21px; }
.notebook-create-dialog .notebook-options { margin: 0 24px; }
@media (max-width: 700px) {
  .notebook-create-dialog .notebook-options { margin-inline: 16px; }
}
.settings-panel-toggle { width: min(700px, 100%); margin: 0 auto 9px; border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--accent); font: 700 11px Manrope; cursor: pointer; text-align: left; }
.settings-panel-toggle:hover { background: color-mix(in srgb, var(--accent) 20%, var(--panel)); }
.settings-list.settings-collapsed { display: none; }
.nav-extra-menu { display: grid; grid-column: 1 / -1; gap: 6px; padding: 6px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--panel) 86%, transparent); box-shadow: inset 0 0 24px color-mix(in srgb, var(--accent) 6%, transparent); }
.nav-extra-menu.hidden { display: none !important; }
.nav-extra-menu .nav-item { min-height: 40px; }
.settings-open-hint { margin-left: auto; color: var(--accent); font-size: 11px; font-weight: 800; white-space: nowrap; }
.settings-dialog, .ian-info-dialog, .call-dialog { width: min(430px, calc(100% - 28px)); padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); }
.settings-dialog form { display: grid; gap: 12px; }
.setting-check { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); font-size: 12px; }
.setting-check input { accent-color: var(--accent); }
.settings-dialog .dialog-actions { flex-wrap: wrap; }
.settings-dialog .dialog-actions button { flex: 1; }
.call-dialog { text-align: center; }
.call-dialog-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); font-size: 28px; }
.call-dialog h2 { margin: 3px 0; }
.call-status { color: var(--accent); font-weight: 700; font-size: 12px; }
.call-timer { margin: 15px 0; font: 700 25px 'DM Mono', monospace; }
.call-note { color: var(--muted); font-size: 11px; line-height: 1.5; }
.call-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.call-actions button.selected { border-color: var(--accent); color: var(--accent); }
.danger-button { background: #9c3f55 !important; color: #fff !important; }
@media (max-width: 700px) {
  .ian-toast { bottom: 14px; }
  .chat-call-actions button { width: 29px; height: 29px; }
  .settings-open-hint { font-size: 10px; }
}

/* Catálogo de emoticonos Unicode con navegación por categorías. */
.emoji-panel.emoji-catalog { display: block; width: min(370px, calc(100vw - 22px)); max-height: min(390px, 58vh); overflow: auto; padding: 9px; }
.emoji-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 3px 8px; color: var(--accent); font-size: 11px; }
.emoji-close { border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.emoji-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 7px; scrollbar-width: thin; }
.emoji-tab { flex: 0 0 31px; height: 29px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); font-size: 16px; cursor: pointer; }
.emoji-tab.selected, .emoji-tab:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel)); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.emoji-grid .emoji-option { min-height: 31px; padding: 3px; font-size: 21px; }
.emoji-grid .emoji-option:hover { transform: scale(1.08); }
.app-shell { position: relative; isolation: isolate; }
.app-shell::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .42; background-image: linear-gradient(rgba(105,220,225,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(105,220,225,.045) 1px, transparent 1px), radial-gradient(circle at 85% 8%, rgba(126,169,255,.13), transparent 27%), radial-gradient(circle at 8% 90%, rgba(115,238,200,.08), transparent 28%); background-size: 32px 32px, 32px 32px, auto, auto; }
.module-hero, .notebooks-space, .chat-layout, .files-dashboard, .storage-layout, .contact-grid, .module-tile-grid, .settings-list { animation: ian-enter .28s ease both; }
@keyframes ian-enter { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
  .emoji-panel.emoji-catalog { left: 5px; right: 5px; width: auto; }
  .emoji-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .emoji-grid .emoji-option { font-size: 20px; }
}

/* IAN contextual: una sola entrada pequeña por módulo, sin ocupar el área de trabajo. */
.context-ai-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  margin: 10px auto 0;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent);
  font: 800 10px Manrope;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.context-ai-button span { color: var(--muted); font-weight: 600; }
.context-ai-button:hover { background: color-mix(in srgb, var(--accent) 23%, var(--panel)); border-color: var(--accent); transform: translateY(-1px); }
.reference-heading > .context-ai-button { margin: 0; flex: 0 0 auto; }
.toolbar > .context-ai-button { margin: 0; flex: 0 0 auto; align-self: stretch; }
.book-head > [data-ai-notebook-launcher] { margin: 0 0 0 auto; flex: 0 1 auto; }

.ai-companion-dialog {
  width: min(560px, calc(100% - 24px));
  max-width: none;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 18px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 9%, var(--panel)), var(--panel));
  color: var(--text);
  box-shadow: 0 22px 70px #0009;
}
.ai-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ai-dialog-head h2 { margin: 0; font-size: 20px; }
.ai-dialog-intro { margin: 14px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.ai-context-badge { display: inline-flex; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 999px; color: var(--accent); font: 10px 'DM Mono'; }
.ai-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.ai-suggestion { border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--text); padding: 7px 9px; font: 10px Manrope; cursor: pointer; }
.ai-suggestion:hover { border-color: var(--accent); color: var(--accent); }
.ai-companion-form { display: grid; gap: 7px; }
.ai-companion-form label { color: var(--muted); font-size: 11px; }
.ai-companion-form textarea { width: 100%; min-height: 92px; resize: vertical; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--text); padding: 11px; font: 12px/1.55 Manrope; outline: 0; }
.ai-companion-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.ai-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.ai-dialog-actions button { min-width: 96px; }
.ai-companion-answer { min-height: 24px; margin-top: 15px; padding: 12px; border: 1px solid transparent; border-radius: 11px; color: var(--text); font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.ai-companion-answer[data-tone="info"] { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); color: var(--accent); }
.ai-companion-answer[data-tone="success"] { border-color: #55d6a0; background: color-mix(in srgb, #55d6a0 8%, transparent); }
.ai-companion-answer[data-tone="warning"] { border-color: #f1b46d; background: color-mix(in srgb, #f1b46d 9%, transparent); }
@media (max-width: 700px) {
  .context-ai-button { width: 100%; margin-top: 8px; }
  .context-ai-button span { display: none; }
  .reference-heading > .context-ai-button, .toolbar > .context-ai-button { width: 100%; margin: 0; }
  .book-head > [data-ai-notebook-launcher] { width: auto; margin: 0 0 0 auto; padding: 7px 8px; }
  .book-head > [data-ai-notebook-launcher] span { display: none; }
  .ai-companion-dialog { padding: 16px; }
  .ai-dialog-actions { position: sticky; bottom: 0; padding-top: 4px; background: inherit; }
}

/* Pulido final: menos ruido visual y más espacio para el contenido. */
.app-shell::before { opacity: .16; background-size: 42px 42px, 42px 42px, auto, auto; }
.sidebar { width: 178px; padding: 20px 14px; }
.brand { margin: 0 0 20px; padding: 14px 8px 12px; box-shadow: 0 8px 22px #0002; }
.nav-list { gap: 5px; }
.nav-list .nav-item { min-height: 40px; border-color: transparent; background: transparent; box-shadow: none; }
.nav-list .nav-item:hover { border-color: color-mix(in srgb, var(--accent) 34%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: none; }
.nav-list .nav-item.active { border-color: color-mix(in srgb, var(--accent) 58%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 var(--accent); }
.nav-list .nav-item > span { width: 27px; height: 27px; }
.main-content { padding-top: 26px; }
.topbar { margin-bottom: 20px; }
.module-hero { padding: 32px 20px 24px; margin: 10px auto 20px; }
.module-hero .module-symbol { width: 76px; height: 76px; border-radius: 23px; font-size: 32px; }
.module-hero h2 { font-size: 31px; margin: 13px 0 9px; }
.reference-dashboard, .files-dashboard { gap: 14px; padding: 8px 0 26px; }
.storage-card, .dashboard-card, .quick-note-panel, .empty-module-list { border-radius: 16px; padding: 16px; box-shadow: none; }
.notebooks-space { gap: 12px; padding: 4px 0 28px; }
.notebook-library-tools { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(130px, .7fr)); gap: 8px; margin-bottom: 12px; }
.notebook-library-tools label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.notebook-library-tools input, .notebook-library-tools select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); padding: 10px; font: 11px var(--ian-ui-font), Manrope; }
.notebook-card-shell { display: grid; gap: 5px; min-width: 0; }
.notebook-card-shell.in-trash { opacity: .8; }
.notebook-card em { display: block; overflow: hidden; margin-top: 5px; color: color-mix(in srgb, var(--text) 72%, transparent); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.notebook-card-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.notebook-card-actions button { border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--muted); padding: 5px 7px; font: 10px var(--ian-ui-font), Manrope; cursor: pointer; }
.notebook-card-actions button:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 700px) { .notebook-library-tools { grid-template-columns: 1fr 1fr; } .notebook-library-tools label:first-child { grid-column: 1 / -1; } .notebook-card-actions button { flex: 1; } }
.notebook-card { min-height: 145px; padding: 16px; box-shadow: none; }
.module-tile, .assistant-module-grid button { min-height: 120px; padding: 16px; }
.chat-layout { box-shadow: none; }
.ian-launcher-heading { display: grid; gap: 4px; margin: 22px 0 10px; }
.ian-launcher-heading h3 { margin: 0; color: var(--text); font-size: clamp(1.15rem, 2.4vw, 1.55rem); }
.ian-launcher-heading p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .8rem; }
@media (max-width: 700px) {
  .sidebar { width: 100%; padding: 8px 10px; }
  .brand { margin-bottom: 8px; padding: 8px 10px; }
  .main-content { padding-top: 14px; }
  .topbar { margin-bottom: 14px; }
  .module-hero { padding: 22px 8px 18px; margin: 6px auto 15px; }
  .module-hero .module-symbol { width: 64px; height: 64px; border-radius: 20px; font-size: 28px; }
  .module-hero h2 { font-size: 27px; }
  .notebook-card { min-height: 124px; padding: 13px; }
  .settings-qr-card { gap: 10px; padding: 12px; }
  .settings-qr-image { width: 86px; height: 86px; padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Compartir desde la página activa del cuaderno, sin abrir una pantalla grande. */
.book-head { position: relative; }
.book-share-trigger { position: relative; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--accent); padding: 8px 10px; font: 700 10px Manrope; cursor: pointer; white-space: nowrap; }
.book-share-trigger:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.book-share-menu { position: absolute; z-index: 8; top: 66px; right: 18px; display: grid; gap: 5px; width: min(235px, calc(100vw - 34px)); padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 18px 44px #0008; }
.book-share-menu.hidden { display: none !important; }
.book-share-menu strong { padding: 3px 5px 7px; color: var(--accent); font-size: 11px; }
.book-share-menu button { border: 1px solid transparent; border-radius: 8px; background: var(--panel-2); color: var(--text); padding: 9px 10px; text-align: left; font: 600 10px Manrope; cursor: pointer; }
.book-share-menu button:hover { border-color: var(--accent); color: var(--accent); }
.notebook-share-dialog { width: min(420px, calc(100% - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); }
.notebook-share-dialog .dialog-head { padding-bottom: 10px; }
.share-dialog-note { margin: 0 24px 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.share-contact-list { display: grid; gap: 7px; padding: 0 24px 6px; }
.share-contact-option { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--text); padding: 10px; text-align: left; cursor: pointer; }
.share-contact-option:hover { border-color: var(--accent); }
.share-contact-option > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); font-size: 17px; }
.share-contact-option > span:nth-child(2) { display: grid; gap: 3px; flex: 1; }
.share-contact-option small { color: var(--muted); font-size: 9px; }
.share-contact-option b { color: var(--accent); font-size: 17px; }
.notebook-share-dialog .dialog-actions { padding-top: 12px; }
.contact-avatar.cyan { background: linear-gradient(145deg, #2ed5c4, #397be6); }
.share-recorded { margin-left: auto; color: var(--accent); font: 9px 'DM Mono'; }
.qr-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.qr-direct-link { color: var(--accent); font-size: 10px; text-decoration: none; }
.qr-direct-link:hover { text-decoration: underline; }
.qr-actions .secondary-button { padding: 7px 9px; font-size: 10px; }
.qr-url { display: block; max-width: 100%; overflow-wrap: anywhere; color: var(--text); font: 10px var(--mono); text-decoration: none; }
.qr-url:hover { color: var(--accent); text-decoration: underline; }
.settings-qr-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 0 auto 16px; padding: 14px 16px; width: min(700px, 100%); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), color-mix(in srgb, #397be6 9%, var(--panel))); }
.settings-qr-copy { display: grid; gap: 5px; min-width: 0; }
.settings-qr-copy .eyebrow { margin: 0; }
.settings-qr-copy strong { color: var(--text); font-size: 14px; }
.settings-qr-copy small { max-width: 420px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.settings-qr-button { justify-self: start; margin-top: 4px; border: 1px solid var(--accent); border-radius: 8px; background: transparent; color: var(--accent); padding: 7px 10px; font: 700 10px var(--ian-ui-font), Manrope; cursor: pointer; }
.settings-qr-button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.settings-qr-image { display: block; width: 104px; height: 104px; padding: 7px; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px #0003; }
#view-settings [data-ai-launcher="settings"] { display: none !important; }

/* Cada módulo conserva su símbolo dentro de una burbuja reconocible. */
.nav-list .nav-item > span {
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  box-shadow: inset 0 0 0 1px #ffffff08, 0 5px 14px #0003;
  font-weight: 800;
}
.nav-list .nav-item[data-view="storage"] > span { background: #143c51; color: #62d6ff; }
.nav-list .nav-item[data-view="contacts"] > span { background: #503049; color: #ff8bc3; }
.nav-list .nav-item[data-view="others"] > span { background: #5a3a25; color: #ffb74d; }
.nav-list .nav-item[data-view="more"] > span { background: #352e5a; color: #b99cff; }
.nav-list .nav-item[data-view="notes"] > span { border-color: #71ece2; }
.nav-list .nav-item[data-view="ian"] > span { border-color: #d2aaff; }
.nav-list .nav-item[data-view="chat"] > span { border-color: #8fc4ff; }
.nav-list .nav-item[data-view="documents"] > span { border-color: #ffd18a; }
.nav-list .nav-item[data-view="images"] > span { border-color: #f2a9e8; }
.nav-list .nav-item[data-view="settings"] > span { border-color: #b7c8e2; }

.topbar h1[data-view="storage"]::before { content: '☁'; background: #143c51; color: #62d6ff; }
.topbar h1[data-view="contacts"]::before { content: '♧'; background: #503049; color: #ff8bc3; }
.topbar h1[data-view="others"]::before { content: '▣'; background: #5a3a25; color: #ffb74d; }
.topbar h1[data-view="more"]::before { content: '⊞'; background: #352e5a; color: #b99cff; }

#view-storage .module-symbol, #view-storage .eyebrow { color: #62d6ff; }
#view-contacts .module-symbol, #view-contacts .eyebrow { color: #ff8bc3; }
#view-others .module-symbol, #view-others .eyebrow { color: #ffb74d; }
#view-more .module-symbol, #view-more .eyebrow { color: #b99cff; }
#view-storage .module-symbol { background: #143c51; }
#view-contacts .module-symbol { background: #503049; }
#view-others .module-symbol { background: #5a3a25; }
#view-more .module-symbol { background: #352e5a; }
#view-notes .module-symbol { background: #154f58; color: #71ece2; }
#view-ian .module-symbol { background: #3f315a; color: #d2aaff; }
#view-chat .module-symbol { background: #24456a; color: #8fc4ff; }
#view-documents .module-symbol { background: #59452b; color: #ffd18a; }
#view-images .module-symbol { background: #4a3150; color: #f2a9e8; }
#view-settings .module-symbol { background: #354156; color: #b7c8e2; }
.module-hero .module-symbol { opacity: 1; }

.settings-shortcut > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.profile-settings-dialog label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; }
.profile-settings-dialog label input { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); padding: 11px; font: 12px Manrope; outline: 0; }
.profile-settings-dialog label input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.profile-settings-dialog label small, .profile-settings-preview small { color: var(--muted); font-size: 10px; }
.profile-settings-preview { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.profile-settings-preview div { display: grid; gap: 3px; }
.profile-settings-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, var(--accent), #397be6); color: #07131b; font-weight: 800; }
.profile-dialog .profile-edit-preview > p { display: block; }
.profile-dialog [data-profile-dialog-edit] { display: none; }
.profile-dialog:not(.profile-dialog-editing) [data-profile-dialog-edit] { display: inline-flex; }
.notebook-card > span, .folder-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
@media (max-width: 700px) {
  .book-share-trigger { padding: 7px 8px; font-size: 9px; }
  .book-share-menu { top: 58px; right: 10px; }
  .share-recorded { display: none; }
}

.contacts-tools, .media-tools { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.module-search { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); padding: 0 10px; color: var(--muted); }
.module-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); padding: 10px 0; font: 11px Manrope; }
.contacts-tools .secondary-button, .media-tools .secondary-button { white-space: nowrap; padding: 9px 10px; font-size: 10px; }
.contact-more { margin-left: 0 !important; border: 0 !important; padding: 3px !important; color: var(--muted) !important; font-size: 18px; }
.contact-blocked { opacity: .62; }
.chat-empty-state { margin: auto; padding: 20px; color: var(--muted); font-size: 11px; text-align: center; }
.assistant-module-link { min-height: 120px; display: grid; justify-items: start; align-content: center; gap: 7px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--text); cursor: pointer; text-align: left; }
.assistant-module-link:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 12%, transparent); }
.assistant-module-link small { color: var(--muted); }
@media (max-width: 700px) {
  .contacts-tools, .media-tools { align-items: stretch; flex-wrap: wrap; }
  .module-search { flex-basis: 100%; }
  .assistant-module-link { min-height: 92px; padding: 13px; border-radius: 14px; }
}

.book-page { position: relative; }
.notebook-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 0 0; color: var(--muted); }
.notebook-tools strong { margin-right: 3px; font-size: 10px; font-weight: 700; }
.notebook-tools button { border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--text); padding: 7px 9px; font: 600 10px Manrope; cursor: pointer; }
.notebook-tools button:hover { border-color: var(--accent); color: var(--accent); }
.notebook-page-assets { display: grid; gap: 7px; padding: 8px 0 0; }
.notebook-assets-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.notebook-assets-head small { display: grid; place-items: center; min-width: 19px; height: 19px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.notebook-assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 7px; }
.notebook-asset { position: relative; overflow: hidden; min-height: 62px; margin: 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.notebook-asset img { display: block; width: 100%; height: 76px; object-fit: contain; }
.notebook-asset button { position: absolute; top: 3px; right: 3px; width: 21px; height: 21px; border: 0; border-radius: 50%; background: rgba(8, 18, 29, .78); color: #fff; cursor: pointer; }
.notebook-file-asset { display: flex; align-items: center; gap: 6px; min-height: 62px; padding: 7px; background: var(--panel-2); }
.notebook-file-card { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; color: var(--text); text-decoration: none; }
.notebook-file-card > span:first-child { display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 14px; }
.notebook-file-card > span:last-child { display: grid; gap: 2px; min-width: 0; }
.notebook-file-card strong, .notebook-file-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notebook-file-card strong { color: var(--text); font-size: 10px; }
.notebook-file-card small { color: var(--muted); font-size: 9px; }
.notebook-file-asset > button { position: relative; top: auto; right: auto; flex: 0 0 21px; }
.notebook-emoji-picker { position: absolute; z-index: 4; right: 10px; bottom: 60px; display: grid; gap: 7px; width: min(270px, calc(100% - 20px)); padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 16px 38px rgba(0, 0, 0, .28); }
.notebook-emoji-picker strong { color: var(--text); font-size: 11px; }
.notebook-emoji-picker div { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.notebook-emoji-picker button { border: 0; border-radius: 7px; background: transparent; padding: 5px 2px; font-size: 18px; cursor: pointer; }
.notebook-emoji-picker button:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.notebook-drawing-dialog { width: min(620px, calc(100% - 28px)); padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); color: var(--text); }
.notebook-drawing-dialog form { display: grid; gap: 10px; }
.drawing-dialog-head { display: flex; align-items: center; justify-content: space-between; }
.drawing-dialog-head div { display: grid; gap: 2px; }
.drawing-dialog-head small { color: var(--muted); font-size: 9px; }
.notebook-drawing-dialog p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.drawing-controls { display: grid; grid-template-columns: 1.3fr 72px 1fr 1fr; gap: 7px; align-items: end; }
.drawing-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; }
.drawing-controls select, .drawing-controls input[type="color"] { min-height: 31px; width: 100%; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); padding: 5px 7px; font: 10px Manrope; }
.drawing-controls input[type="color"] { padding: 3px; cursor: pointer; }
.drawing-controls input[type="range"] { width: 100%; accent-color: var(--accent); }
.drawing-controls output { color: var(--text); font-size: 9px; text-align: right; }
.notebook-drawing-dialog canvas { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }
.drawing-history { display: flex; flex-wrap: wrap; gap: 6px; }
.notebook-drawing-dialog .dialog-actions { padding-top: 0; border: 0; }
@media (max-width: 700px) {
  .notebook-tools { gap: 5px; }
  .notebook-tools button { flex: 1 1 auto; padding: 8px 6px; }
  .notebook-emoji-picker { right: 5px; bottom: 68px; }
  .drawing-controls { grid-template-columns: 1fr 1fr; }
}

/* Centro único de configuración */
:root { --ian-text-scale: 1; --ian-control-scale: 1; --ian-chat-scale: 1; --ian-ui-font: Manrope; }
body, button, input, textarea, select { font-family: var(--ian-ui-font), Manrope, system-ui, sans-serif; }
/* La elección de fuente del centro de configuración cubre los módulos heredados,
   pero respeta la tipografía elegida dentro de una nota o de una página de cuaderno. */
body .app-shell :not(.book-page):not(.book-page *):not(.note-card):not(.note-card *):not(.editor):not(.editor *),
body dialog :not(.book-page):not(.book-page *):not(.note-card):not(.note-card *):not(.editor):not(.editor *):not(#note-content):not(#note-content *) { font-family: var(--ian-ui-font), Manrope, system-ui, sans-serif !important; }
html { font-size: calc(16px * var(--ian-text-scale)); }
.primary-button, .secondary-button, .nav-item, .settings-menu-item { min-height: calc(36px * var(--ian-control-scale)); }
.messages { font-size: calc(1em * var(--ian-chat-scale)); }
:root[data-ian-contrast="high"] { --line: color-mix(in srgb, var(--text) 65%, transparent); --muted: color-mix(in srgb, var(--text) 76%, transparent); }
:root.ian-reduce-motion *, :root.ian-reduce-motion *::before, :root.ian-reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
:root.ian-large-controls button, :root.ian-large-controls select, :root.ian-large-controls input { min-height: 44px; }
:root[data-ian-enabled="false"] .context-ai-button, :root[data-ian-enabled="false"] [data-ai-notebook-launcher] { display: none !important; }
:root[data-ian-enabled="false"] #view-ian .ian-central-head { opacity: .55; }
.ian-central-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:10px 0 16px; }
.ian-central-head h2 { margin:4px 0 6px; font-size:clamp(1.5rem,3vw,2.2rem); }
.ian-central-head p:not(.eyebrow) { color:var(--muted); margin:0; max-width:620px; }
.ian-head-actions,.ian-composer-actions,.ian-message-tools { display:flex; flex-wrap:wrap; gap:7px; }
.ian-provider,.ian-context-row { border:1px solid var(--line); border-radius:12px; padding:10px 12px; color:var(--muted); font-size:.78rem; margin-bottom:10px; }
.ian-provider[data-tone="warning"] { color:#f2bd7b; border-color:#9b6733; }
.ian-provider[data-tone="success"] { color:#69dfb1; border-color:#3b886e; }
.ian-context-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ian-context-row .secondary-button { padding:6px 9px; font-size:.7rem; }
.ian-conversation { min-height:270px; max-height:52vh; overflow:auto; display:grid; gap:10px; padding:4px 0 14px; }
.ian-empty { display:grid; place-items:center; min-height:210px; color:var(--muted); text-align:center; border:1px dashed var(--line); border-radius:14px; padding:20px; }
.ian-message { max-width:min(86%,760px); padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--panel); justify-self:start; }
.ian-message.user { justify-self:end; background:color-mix(in srgb,var(--accent) 13%,var(--panel)); }
.ian-message-role { color:var(--accent); font-size:.7rem; font-weight:800; margin-bottom:5px; }
.ian-message-text { color:var(--text); line-height:1.6; white-space:normal; }
.ian-message-tools { margin-top:9px; }
.ian-message-tools button,.ian-quick-actions button { border:1px solid var(--line); border-radius:999px; background:var(--panel-2); color:var(--muted); padding:6px 9px; cursor:pointer; font:inherit; font-size:.7rem; }
.ian-message-tools button:hover,.ian-quick-actions button:hover { color:var(--accent); border-color:var(--accent); }
.ian-quick-actions { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.ian-composer { border:1px solid var(--line); border-radius:14px; padding:10px; background:var(--panel); }
.ian-composer textarea { display:block; width:100%; min-height:74px; resize:vertical; border:0; outline:0; background:transparent; color:var(--text); font:inherit; }
.ian-composer-actions { justify-content:flex-end; }
@media (max-width:700px) { .ian-central-head { display:grid; gap:10px; } .ian-head-actions { width:100%; } .ian-head-actions button { flex:1; } .ian-message { max-width:96%; } .ian-conversation { max-height:none; min-height:230px; } }
.ian-story-head { margin:10px 0 16px; }
.ian-story-head h2 { margin:14px 0 5px; font-size:clamp(1.7rem,4vw,2.5rem); }
.ian-story-head p:not(.eyebrow) { color:var(--muted); margin:0; }
.ian-story-card { max-width:820px; border:1px solid var(--line); border-radius:18px; padding:clamp(18px,4vw,30px); background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel)); }
.ian-story-card h3 { margin:24px 0 8px; color:var(--accent); }
.ian-story-card h3:first-child { margin-top:0; }
.ian-story-card p { color:var(--text); line-height:1.75; margin:0 0 12px; }
.story-muted { color:var(--muted); }
.ian-story-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ian-story-principles div { display:grid; gap:5px; padding:13px; border:1px solid var(--line); border-radius:12px; }
.ian-story-principles b { color:var(--accent); font-size:.8rem; }
.ian-story-principles span { color:var(--muted); font-size:.78rem; }
.ian-story-timeline { display:grid; gap:9px; border-left:2px solid var(--accent); padding-left:15px; }
.ian-story-timeline div { display:flex; gap:12px; align-items:baseline; }
.ian-story-timeline time { color:var(--muted); font: .7rem var(--mono); min-width:76px; }
@media (max-width:600px) { .ian-story-principles { grid-template-columns:1fr; } .ian-story-timeline div { display:grid; gap:2px; } }
:root[data-save-chat-media="false"] .save-document { display: none !important; }
:root[data-ian-navigation="expanded"] .nav-extra-menu { display: grid !important; }

.settings-center { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; }
.settings-center-intro { display: flex; align-items: center; gap: 13px; padding: 4px 2px 8px; }
.settings-center-intro .module-symbol { display: grid; flex: 0 0 auto; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #354156; color: #b7c8e2; font-size: 25px; }
.settings-center-intro h2 { margin: 0; font-size: 24px; }
.settings-center-intro p:not(.eyebrow) { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.settings-menu { display: grid; gap: 8px; }
.settings-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); padding: 13px; text-align: left; cursor: pointer; }
.settings-menu-item:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.settings-menu-item > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 17px; }
.settings-menu-item > div { display: grid; flex: 1; gap: 3px; min-width: 0; }
.settings-menu-item strong { font-size: 13px; }
.settings-menu-item small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.settings-menu-item b { color: var(--muted); font-size: 20px; font-weight: 400; }
.settings-center-dialog { width: min(560px, calc(100% - 24px)); max-height: min(780px, calc(100vh - 24px)); overflow: auto; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text); }
.settings-center-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.settings-center-head h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 19px; }
.settings-center-head h2 span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 17%, transparent); color: var(--accent); font-size: 15px; }
.settings-center-body { padding: 16px 20px 22px; }
.settings-form { display: grid; gap: 12px; }
.settings-field { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.settings-field > span { display: flex; justify-content: space-between; gap: 10px; }
.settings-field b { color: var(--accent); font-size: 10px; }
.settings-field input, .settings-field select, .settings-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); padding: 10px 11px; font: 12px var(--ian-ui-font), Manrope; outline: none; }
.settings-field textarea { min-height: 78px; resize: vertical; }
.settings-field input:focus, .settings-field select:focus, .settings-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.settings-field input[type="range"] { padding: 0; accent-color: var(--accent); }
.settings-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 47px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.settings-toggle > span { display: grid; gap: 3px; }
.settings-toggle strong { font-size: 12px; }
.settings-toggle small, .settings-note { color: var(--muted); font-size: 10px; line-height: 1.45; }
.settings-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.settings-toggle i { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 50%, transparent); transition: background .16s ease; }
.settings-toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .16s ease; }
.settings-toggle input:checked + i { background: var(--accent); }
.settings-toggle input:checked + i::after { transform: translateX(16px); }
.settings-toggle:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.settings-preview-message, .settings-status-card, .settings-profile-summary, .settings-storage-summary { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); }
.settings-preview-message small, .settings-status-card small, .settings-profile-summary small { color: var(--muted); font-size: 10px; }
.settings-preview-message > div { justify-self: start; padding: 8px 10px; border-radius: 10px 10px 3px 10px; background: color-mix(in srgb, var(--accent) 23%, var(--panel)); color: var(--text); }
.settings-profile-summary { grid-template-columns: 42px 1fr; align-items: center; }
.settings-profile-summary > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(145deg, var(--accent), #397be6); color: #07131b; font-weight: 800; }
.settings-permissions { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.settings-permissions legend { padding: 0 6px; color: var(--accent); font-size: 11px; font-weight: 800; }
.settings-permissions p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.permission-list { display: grid; gap: 8px; }
.permission-list article { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; }
.permission-list article > div { display: grid; gap: 3px; flex: 1; }
.permission-list strong { font-size: 12px; }
.permission-list small { color: var(--muted); font-size: 10px; }
.permission-list .secondary-button { padding: 8px 9px; font-size: 10px; }
.profile-confirm-dialog { width: min(360px, calc(100% - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); overflow: hidden; }
.profile-confirm-dialog > img { display: block; width: min(220px, calc(100% - 48px)); aspect-ratio: 1; margin: 8px auto 13px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
.profile-confirm-dialog > p { margin: 0 22px 16px; color: var(--muted); text-align: center; font-size: 11px; }
@media (max-width: 700px) {
  .settings-center-intro { padding-inline: 0; }
  .settings-menu-item { min-height: 61px; padding: 11px; }
  .settings-center-dialog { width: min(100% - 14px, 560px); border-radius: 15px; }
  .settings-center-head { padding: 15px 16px 11px; }
  .settings-center-body { padding: 14px 16px 18px; }
  .settings-toggle { min-height: 51px; }
}

/* SEIMA: una sola experiencia de mensajería, con estado local explícito. */
.chat-layout { position: relative; }
.chat-list-head { align-items: flex-start; }
.chat-list-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.chat-list-head #new-chat { display: inline-flex; }
.chat-list-actions .secondary-button { padding: 7px 8px; font-size: 10px; }
.chat-global-search { display: flex; align-items: center; gap: 7px; margin: 10px 0 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--muted); }
.chat-global-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); padding: 10px 0; font: 11px var(--ian-ui-font), Manrope; }
.chat-filters { display: flex; gap: 5px; padding: 2px 0 7px; }
.chat-filters button { border: 1px solid transparent; border-radius: 99px; background: transparent; color: var(--muted); padding: 6px 9px; font-size: 10px; cursor: pointer; }
.chat-filters button.selected, .chat-filters button:hover { border-color: var(--line); background: color-mix(in srgb, var(--accent) 13%, var(--panel)); color: var(--text); }
.chat-conversation-list { display: grid; gap: 5px; min-height: 85px; align-content: start; }
.chat-conversation-item { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); padding: 9px 7px; text-align: left; cursor: pointer; }
.chat-conversation-item:hover, .chat-conversation-item.active { border-color: var(--line); background: var(--panel-2); }
.chat-row-avatar { flex: 0 0 auto; }
.chat-row-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.chat-row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.chat-row-copy strong i { font-style: normal; font-size: 10px; }
.chat-row-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.chat-row-copy small b { color: var(--accent); font-weight: 700; }
.chat-row-meta { display: grid; justify-items: end; align-self: stretch; gap: 5px; color: var(--muted); font-size: 9px; }
.chat-row-meta i { font-style: normal; font-size: 11px; }
.unread-count { display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 99px; background: var(--accent); color: #07131b; font-size: 9px; }
.chat-search-results { display: grid; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.chat-search-results > strong { color: var(--accent); font-size: 10px; }
.chat-search-results button { display: grid; gap: 2px; border: 0; border-radius: 7px; background: transparent; color: var(--text); padding: 7px; text-align: left; cursor: pointer; }
.chat-search-results button:hover { background: var(--panel-2); }
.chat-search-results button span { font-size: 10px; }
.chat-search-results button small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.chat-profile-button { display: flex; align-items: center; gap: 9px; min-width: 0; border: 0; background: transparent; color: var(--text); padding: 0; text-align: left; cursor: pointer; }
.chat-profile-button > span:last-child { display: grid; gap: 3px; min-width: 0; }
.chat-profile-button strong, .chat-profile-button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header-actions { display: flex; gap: 5px; margin-left: auto; }
.chat-header-actions button, .chat-back-button { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); cursor: pointer; }
.chat-header-actions button:hover, .chat-back-button:hover { border-color: var(--accent); color: var(--accent); }
.chat-back-button { display: none; font-size: 22px; line-height: 1; }
.chat-internal-search { position: absolute; z-index: 4; inset: 7px 8px; display: flex; align-items: center; gap: 5px; padding: 5px 6px; border: 1px solid var(--accent); border-radius: 9px; background: var(--panel); box-shadow: 0 8px 25px #0006; }
.chat-internal-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); padding: 4px; }
.chat-internal-search button { flex: 0 0 auto; width: 25px; height: 25px; border: 0; border-radius: 6px; background: var(--panel-2); color: var(--text); cursor: pointer; }
.chat-internal-search span { min-width: 15px; color: var(--accent); text-align: center; font-size: 10px; }
.chat-blocked-banner { padding: 8px 14px; background: #462632; color: #ffc4c9; font-size: 10px; text-align: center; }
.chat-blocked-banner button { border: 0; background: transparent; color: #fff; text-decoration: underline; cursor: pointer; }
.message { display: flex; align-items: flex-end; gap: 4px; }
.message-bubble { position: relative; min-width: 0; padding: 10px 12px; border-radius: 12px; }
.message.sent .message-bubble { background: #16534f; }
.message.received .message-bubble { background: #1b2b3f; }
.message-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.message-more { flex: 0 0 auto; width: 23px; height: 23px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); opacity: .55; cursor: pointer; }
.message:hover .message-more, .message-more:focus { opacity: 1; }
.message-actions { position: absolute; z-index: 6; display: grid; min-width: 145px; margin-top: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); box-shadow: 0 12px 26px #0008; }
.message.sent .message-actions { right: 25px; }
.message.received .message-actions { left: 25px; }
.message-actions button { border: 0; border-radius: 6px; background: transparent; color: var(--text); padding: 8px; text-align: left; font-size: 10px; cursor: pointer; }
.message-actions button:hover { background: var(--panel-2); color: var(--accent); }
.message-reply-quote { display: block; width: 100%; margin-bottom: 6px; border: 0; border-left: 2px solid var(--accent); background: transparent; color: var(--muted); padding: 2px 7px; text-align: left; font-size: 10px; cursor: pointer; }
.chat-message-match .message-bubble { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-attachment-missing { color: #ffc4c9; font-size: 10px; }
.chat-media-preview { display: grid; gap: 5px; max-width: 230px; border: 0; background: transparent; color: var(--text); padding: 0; text-align: left; cursor: zoom-in; }
.chat-media-preview img, .chat-video { display: block; width: min(230px, 100%); max-height: 240px; border-radius: 9px; object-fit: cover; }
.shared-contact-card { display: block; padding: 5px 0; font-weight: 700; }
.message audio { display: block; width: min(240px, 100%); margin-top: 7px; }
.chat-reply-preview { display: flex; align-items: center; gap: 7px; grid-column: 1 / -1; border-left: 2px solid var(--accent); color: var(--muted); padding: 5px 7px; font-size: 10px; }
.chat-reply-preview span { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-preview button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.message-form { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; }
.message-form .emoji-trigger, .message-form .attachment-trigger { align-self: center; }
.chat-attachment-menu { position: absolute; z-index: 8; bottom: 58px; left: 8px; display: grid; gap: 2px; min-width: 170px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 14px 30px #0008; }
.chat-attachment-menu strong { padding: 5px 8px 7px; color: var(--accent); font-size: 10px; }
.chat-attachment-menu button { border: 0; border-radius: 6px; background: transparent; color: var(--text); padding: 8px; text-align: left; font-size: 10px; cursor: pointer; }
.chat-attachment-menu button:hover { background: var(--panel-2); color: var(--accent); }
.chat-picker-dialog, .chat-group-dialog, .chat-info-dialog, .chat-file-dialog, .chat-media-dialog { width: min(440px, calc(100% - 24px)); max-height: min(720px, calc(100vh - 24px)); overflow: auto; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); }
.chat-dialog-note { margin: 0 20px 12px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.chat-picker-dialog > .module-search { margin: 0 20px 10px; }
.chat-picker-list, .chat-choice-list { display: grid; gap: 5px; padding: 0 20px 12px; }
.chat-picker-list > button, .chat-choice-list > button { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); padding: 9px; text-align: left; cursor: pointer; }
.chat-picker-list > button:hover, .chat-choice-list > button:hover { border-color: var(--accent); }
.chat-picker-list > button > span:nth-child(2), .chat-choice-list > button > span:last-child { display: grid; gap: 2px; flex: 1; }
.chat-picker-list small { color: var(--muted); font-size: 9px; }
.chat-picker-list b, .chat-choice-list b { color: var(--accent); }
.chat-dialog-form { display: grid; gap: 12px; padding: 0 20px 20px; }
.chat-dialog-form > label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.chat-dialog-form input:not([type="checkbox"]), .chat-dialog-form select { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); padding: 10px; }
.chat-dialog-form input[type="file"] { font-size: 10px; }
.chat-dialog-form .dialog-actions { padding: 12px 0 0; }
.chat-member-picker { display: grid; gap: 7px; max-height: 260px; overflow: auto; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.chat-member-picker legend { padding: 0 5px; color: var(--accent); font-size: 11px; }
.chat-member-picker label { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 11px; }
.chat-member-picker label .chat-avatar { width: 27px; height: 27px; flex-basis: 27px; }
.group-photo-preview { width: 60px; height: 60px; margin-top: 5px; border-radius: 13px; object-fit: cover; }
.chat-info-profile { display: grid; justify-items: center; gap: 6px; padding: 4px 20px 15px; text-align: center; }
.chat-info-profile .chat-avatar { width: 70px; height: 70px; flex-basis: 70px; font-size: 17px; }
.chat-info-profile h3 { margin: 0; font-size: 18px; }
.chat-info-profile p { margin: 0; color: var(--muted); font-size: 11px; }
.chat-info-actions { display: grid; gap: 5px; padding: 0 20px 20px; }
.chat-info-actions button { border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); padding: 10px; text-align: left; font-size: 11px; cursor: pointer; }
.chat-info-actions button:hover { border-color: var(--accent); color: var(--accent); }
.chat-member-list { display: grid; gap: 7px; margin: 0 20px 14px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.chat-member-list strong { color: var(--accent); font-size: 11px; }
.chat-member-list span { display: flex; align-items: center; gap: 7px; font-size: 10px; }
.chat-member-list .chat-avatar { width: 25px; height: 25px; flex-basis: 25px; }
.chat-file-preview { display: grid; justify-items: center; gap: 7px; padding: 8px 20px 16px; text-align: center; }
.chat-file-preview img, .chat-file-preview video { display: block; max-width: 100%; max-height: 280px; border-radius: 10px; object-fit: contain; }
.chat-file-preview audio { width: 100%; }
.chat-file-preview small { color: var(--muted); font-size: 10px; }
.file-preview-icon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 18%, transparent); font-size: 35px; }
.chat-media-dialog { position: relative; display: grid; justify-items: center; gap: 10px; padding: 20px; text-align: center; }
.chat-media-dialog > img { max-width: 100%; max-height: 75vh; border-radius: 10px; object-fit: contain; }
.chat-media-dialog > .close-button { position: absolute; top: 8px; right: 8px; z-index: 1; }
.contact-header-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.contact-tools { max-width: 560px; }
.contact-avatar-wrap img, .chat-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
/* Tipos de papel reales: las líneas forman parte del fondo de escritura y no del contenido. */
.notebook-book-dialog .book-page-content { background-repeat: repeat; background-attachment: local; }
.notebook-book-dialog .paper-plain .book-page-content { background-image: none; }
.notebook-book-dialog .paper-ruled .book-page-content { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.8em - 1px), color-mix(in srgb, var(--accent) 28%, transparent) 1.8em); background-size: 100% 1.8em; }
.notebook-book-dialog .paper-grid .book-page-content { background-image: linear-gradient(color-mix(in srgb, var(--accent) 20%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent) 1px, transparent 1px); background-size: 1.8em 1.8em; }
.notebook-book-dialog .paper-dotted .book-page-content { background-image: radial-gradient(color-mix(in srgb, var(--accent) 35%, transparent) 1px, transparent 1px); background-size: 1.2em 1.2em; }
.notebook-book-dialog .paper-agenda .book-page-content { background-image: linear-gradient(90deg, color-mix(in srgb, #ef6a7b 45%, transparent) 1px, transparent 1px), repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.8em - 1px), color-mix(in srgb, var(--accent) 24%, transparent) 1.8em); background-size: 2.7em 100%, 100% 1.8em; padding-left: 3.2em; }
@media (max-width: 700px) {
  .chat-layout.chat-list-open .chat-list { display: block; }
  .chat-layout.chat-list-open .conversation { display: none; }
  .chat-layout.chat-conversation-open .chat-list { display: none; }
  .chat-layout.chat-conversation-open .conversation { display: flex; }
  .chat-back-button { display: block; }
  .chat-list-head { display: grid; gap: 7px; }
  .chat-list-actions { justify-content: flex-start; }
  .chat-list-actions .secondary-button { flex: 1; }
  .contact-header-actions { justify-content: flex-start; }
  .contact-header-actions button { flex: 1; }
  .message-form { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .chat-internal-search { inset: 7px 7px; }
}
.ian-icon { width:1.15em; height:1.15em; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-item > span .ian-icon { width:18px; height:18px; }
.nav-item[data-view="notes"] > span .ian-notebook-nav-image { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; background: #131c45; padding: 2px; }
.settings-menu-item > span .ian-icon { width:22px; height:22px; }

/* CuaderNOTE: identidad oficial aislada del resto de IAN. La paleta es
   estructural; los colores del contenido de cada página siguen siendo locales. */
#view-notes .cuadernote-module,
.notebook-create-dialog,
.notebook-book-dialog,
.notebook-confirm-dialog,
.notebook-sections-dialog {
  --cuadernote-neon: #00FF66;
  --cuadernote-secondary: #00C853;
  --cuadernote-deep: #009E3A;
  --cuadernote-white: #FFFFFF;
  --cuadernote-metal: #B0B7BF;
  --cuadernote-bg: #131c45;
  --cuadernote-shadow: #0E1F17;
  --cuadernote-energy: #00FFAA;
  --accent: var(--cuadernote-neon);
  --green: var(--cuadernote-neon);
  --cyan: var(--cuadernote-energy);
  --panel: var(--cuadernote-bg);
  --panel-2: var(--cuadernote-shadow);
  --text: var(--cuadernote-white);
  --muted: var(--cuadernote-metal);
  --line: color-mix(in srgb, var(--cuadernote-metal) 38%, transparent);
}

#view-notes .cuadernote-module .notebook-identity-icon {
  border-color: var(--cuadernote-energy);
  background: var(--cuadernote-bg);
  box-shadow: 0 0 18px color-mix(in srgb, var(--cuadernote-energy) 20%, transparent);
}

#view-notes .cuadernote-module .notebook-identity-icon .cuadernote-logo {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  padding: 2px;
}

/* Cuadernos consolidado: biblioteca y editor local sin duplicar Notas. */
#view-notes .notebooks-space { min-width: 0; gap: 16px; }
#view-notes .notebooks-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 4px 0 6px; }
#view-notes .notebook-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
#view-notes .notebook-identity-icon { display: grid; place-items: center; flex: 0 0 54px; width: 54px; height: 54px; border: 1px solid color-mix(in srgb, var(--accent) 65%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 17%, var(--panel)); color: var(--accent); }
#view-notes .notebook-identity-icon svg { width: 35px; height: 35px; }
#view-notes .notebook-identity-icon img { width: 100%; height: 100%; border-radius: 15px; object-fit: contain; }
#view-notes .notebooks-hero h2 { margin: 0 0 5px; font-size: clamp(20px, 3vw, 29px); }
#view-notes .notebooks-hero p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
#view-notes .notebooks-hero .primary-button { flex: 0 0 auto; white-space: nowrap; }
#view-notes .notebook-library-tools { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(130px, .7fr)) auto; gap: 8px; align-items: end; }
#view-notes .notebook-library-tools label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 10px; }
#view-notes .notebook-library-tools input, #view-notes .notebook-library-tools select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); padding: 10px; font: 11px var(--ian-ui-font), Manrope; }
#view-notes .notebook-library-tools input::placeholder { color: color-mix(in srgb, var(--text) 62%, var(--muted)); opacity: 1; }
#view-notes .notebook-view-switch { display: flex; gap: 4px; }
#view-notes .notebook-view-switch button { border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--muted); padding: 9px 10px; font: 600 10px var(--ian-ui-font), Manrope; cursor: pointer; white-space: nowrap; }
#view-notes .notebook-view-switch button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--panel)); }
#view-notes .notebooks-summary { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
#view-notes .notebooks-summary small { color: color-mix(in srgb, var(--muted) 85%, transparent); text-align: right; }
#view-notes .notebooks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
#view-notes .notebooks-grid { align-items: start; }
#view-notes .notebooks-space.list-view .notebooks-grid { grid-template-columns: 1fr; }
#view-notes .notebook-exit-row { display: flex; justify-content: flex-start; }
#view-notes .notebook-exit-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--panel) 72%, transparent); color: var(--muted); padding: 0; font: 700 16px/1 var(--ian-ui-font), Manrope; cursor: pointer; }
#view-notes .notebook-exit-button:hover, #view-notes .notebook-exit-button:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--accent); outline: none; }
#view-notes .notebook-card-shell { position: relative; display: grid; align-self: start; gap: 5px; min-width: 0; min-height: 0; height: auto; }
#view-notes .notebook-card { display: flex; align-self: start; align-items: flex-start; gap: 12px; width: 100%; min-height: 150px; height: auto; padding: 16px 54px 16px 16px; box-shadow: none; }
#view-notes .notebook-cover-visual { display: grid; place-items: center; flex: 0 0 47px; width: 47px; height: 58px; overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 38%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); font-size: 26px; }
#view-notes .notebook-cover-visual img { width: 100%; height: 100%; object-fit: cover; }
#view-notes .notebook-card-copy { display: grid; align-content: start; gap: 6px; min-width: 0; text-align: left; }
#view-notes .notebook-card-copy strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
#view-notes .notebook-card-copy small, #view-notes .notebook-card-copy em { overflow: hidden; color: color-mix(in srgb, var(--text) 68%, var(--muted)); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
#view-notes .notebook-card-copy .notebook-card-meta { display: flex; flex-wrap: wrap; gap: 3px 8px; overflow: visible; line-height: 1.4; white-space: normal; }
#view-notes .notebook-card-copy .notebook-card-meta span, #view-notes .notebook-card-copy .notebook-card-meta time { white-space: nowrap; }
#view-notes .notebook-card-copy .notebook-card-meta time { color: color-mix(in srgb, var(--text) 82%, var(--muted)); font-weight: 600; }
#view-notes .notebook-card-menu { position: absolute; top: 12px; right: 12px; z-index: 3; }
#view-notes .notebook-card-menu > summary { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); cursor: pointer; list-style: none; }
#view-notes .notebook-card-menu > summary::-webkit-details-marker { display: none; }
#view-notes .notebook-card-menu > summary .ian-icon { width: 16px; height: 16px; }
#view-notes .notebook-card-menu > summary:hover, #view-notes .notebook-card-menu[open] > summary { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
#view-notes .notebook-card.in-trash { cursor: default; }
#view-notes .notebook-card-actions { position: absolute; top: 35px; right: 0; display: grid; gap: 4px; width: min(210px, calc(100vw - 44px)); padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 15px 35px #0008; }
#view-notes .notebook-card-actions button { min-height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--muted); padding: 5px 7px; font: 10px var(--ian-ui-font), Manrope; cursor: pointer; }
#view-notes .notebook-card-actions button:hover { border-color: var(--accent); color: var(--accent); }
#view-notes .notebook-card-shell > .trash-action {
  position: absolute;
  right: 13px;
  bottom: 11px;
  z-index: 4;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-color: color-mix(in srgb, var(--muted) 45%, transparent) !important;
  background: color-mix(in srgb, var(--panel) 80%, transparent) !important;
}
#view-notes .notebook-card-shell > .trash-action .ian-icon { width: 22px; height: 22px; }
#view-notes .notebook-card-shell > .trash-action:hover,
#view-notes .notebook-card-shell > .trash-action:focus-visible {
  border-color: color-mix(in srgb, #ff9aa7 75%, transparent) !important;
  background: color-mix(in srgb, #8d263b 22%, var(--panel)) !important;
}
#view-notes .list-view .notebook-card { min-height: 88px; align-items: center; padding-right: 54px; }
#view-notes .list-view .notebook-card-copy em { display: none; }
#view-notes .notebooks-empty { display: grid; justify-items: center; gap: 8px; grid-column: 1 / -1; padding: 42px 20px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); text-align: center; }
#view-notes .notebooks-empty strong { color: var(--text); font-size: 14px; }
#view-notes .notebooks-empty small { font-size: 11px; }
#view-notes .notebook-empty-icon { color: var(--accent); font-size: 34px; }
.notebook-recovery { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #d69b48; border-radius: 10px; background: color-mix(in srgb, #d69b48 12%, var(--panel)); color: var(--text); font-size: 11px; }
.notebook-recovery div { display: flex; gap: 6px; }
.notebook-recovery button { border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); padding: 6px 8px; font: 600 10px Manrope; cursor: pointer; }
.notebook-recovery button:first-child { border-color: var(--accent); color: var(--accent); }

.notebook-create-dialog .notebook-create-body { padding: 0 24px 6px; }
.notebook-create-dialog .notebook-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 15px; }
.notebook-create-dialog .notebook-options label { margin: 0; }
.notebook-create-dialog .field-help { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.notebook-book-dialog { width: min(980px, calc(100% - 18px)); max-height: calc(100dvh - 18px); overflow: auto; }
.notebook-book-dialog .book-head { position: sticky; top: 0; z-index: 4; gap: 10px; background: var(--panel); }
.notebook-book-dialog .book-head-title { min-width: 0; }
.notebook-book-dialog .book-head-title input { max-width: min(360px, 52vw); font-size: 19px; font-weight: 800; }
.notebook-book-dialog .book-head-title small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.notebook-book-dialog .book-head-title small[data-tone="success"] { color: #65ddb8; }
.notebook-book-dialog .book-head-title small[data-tone="error"] { color: #ff9f9f; }
.notebook-book-dialog .book-head-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.notebook-book-dialog .book-page-counter { color: var(--muted); font-size: 10px; white-space: nowrap; }
.notebook-book-dialog .book-layout { grid-template-columns: minmax(0, 1fr) 210px; align-items: start; }
.notebook-book-dialog .book-page { min-width: 0; min-height: 0; gap: 10px; }
.notebook-book-dialog .page-top-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.notebook-book-dialog .page-top-row > label:first-child { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); font-size: 10px; }
.notebook-book-dialog .page-top-row .page-section { max-width: 180px; }
.notebook-book-dialog .page-number-field { display: flex; align-items: center; gap: 5px; margin-left: auto; color: var(--accent); font-size: 10px; font-weight: 800; }
.notebook-book-dialog .page-number { width: 48px !important; border: 0 !important; border-bottom: 2px solid var(--accent) !important; border-radius: 0 !important; background: transparent !important; color: var(--text) !important; padding: 4px 2px !important; font: 800 15px Manrope !important; text-align: center; }
.notebook-book-dialog .book-page-title { padding: 9px 10px; font-size: 17px; font-weight: 800; }
.notebook-book-dialog .book-page-content { min-height: min(48vh, 450px); max-height: 58vh; overflow: auto; resize: vertical; border-left: 3px solid var(--accent); border-radius: 3px; background-color: var(--page-background, #fffdf5); background-repeat: repeat; background-attachment: local; color: var(--page-ink, #213047); font-family: var(--page-font, Manrope), system-ui, sans-serif; font-size: var(--page-size, 16px); font-style: var(--page-style, normal); font-weight: var(--page-weight, 400); line-height: 1.85; }
.notebook-book-dialog .book-page-content:empty::before { content: attr(data-placeholder); color: color-mix(in srgb, var(--page-ink, #213047) 48%, transparent); pointer-events: none; }
.notebook-book-dialog .book-page-content:focus { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.notebook-book-dialog .book-page.paper-plain .book-page-content { background-image: none; }
.notebook-book-dialog .book-page.paper-ruled .book-page-content { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.85em - 1px), color-mix(in srgb, var(--page-rule, #6c8196) 48%, transparent) 1.85em); background-size: 100% 1.85em; }
.notebook-book-dialog .book-page.paper-grid .book-page-content { background-image: linear-gradient(color-mix(in srgb, var(--page-rule, #6c8196) 42%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--page-rule, #6c8196) 42%, transparent) 1px, transparent 1px); background-size: 1.85em 1.85em; }
.notebook-book-dialog .book-page.paper-dotted .book-page-content { background-image: radial-gradient(color-mix(in srgb, var(--page-rule, #6c8196) 58%, transparent) 1px, transparent 1px); background-size: 1.15em 1.15em; }
.notebook-book-dialog .book-page.paper-cornell .book-page-content { background-image: linear-gradient(90deg, transparent 0, transparent 24%, color-mix(in srgb, var(--page-rule, #6c8196) 48%, transparent) 24%, color-mix(in srgb, var(--page-rule, #6c8196) 48%, transparent) calc(24% + 1px), transparent calc(24% + 1px)), repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.85em - 1px), color-mix(in srgb, var(--page-rule, #6c8196) 45%, transparent) 1.85em); background-size: 100% 100%, 100% 1.85em; }
.notebook-book-dialog .book-page.paper-agenda .book-page-content, .notebook-book-dialog .book-page.paper-planner .book-page-content, .notebook-book-dialog .book-page.paper-diary .book-page-content { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.85em - 1px), color-mix(in srgb, var(--page-rule, #6c8196) 45%, transparent) 1.85em); background-size: 100% 1.85em; }
.notebook-book-dialog .book-page.paper-agenda .book-page-content, .notebook-book-dialog .book-page.paper-planner .book-page-content { padding-left: 3.1em; }
.notebook-book-dialog .book-page.page-paper { --page-background: #fffdf5; }
.notebook-book-dialog .book-page.page-paper { --page-rule: #8a7655; }
.notebook-book-dialog .book-page.page-blue { --page-background: #eaf5ff; --page-rule: #3f6f9e; }
.notebook-book-dialog .book-page.page-green { --page-background: #ecfaf1; --page-rule: #4b8560; }
.notebook-book-dialog .book-page.page-yellow { --page-background: #fff9d9; --page-rule: #9b7620; }
.notebook-book-dialog .book-page.page-pink { --page-background: #fff0f6; --page-rule: #a65d81; }
.notebook-book-dialog .book-page.page-lavender { --page-background: #f4efff; --page-rule: #765ba0; }
.notebook-book-dialog .book-page.page-mint { --page-background: #e5faf1; --page-rule: #43836e; }
.notebook-book-dialog .book-page.page-sky { --page-background: #e7f5ff; --page-rule: #3d769a; }
.notebook-book-dialog .book-page.page-navy { --page-background: #203a5e; --page-rule: #a9cbed; }
.notebook-book-dialog .book-page.page-black { --page-background: #182131; --page-rule: #b8cae2; }
.notebook-book-dialog .book-page.page-coral { --page-background: #fff0e9; --page-rule: #a8674e; }
.notebook-book-dialog .book-page.page-orange { --page-background: #fff0dc; --page-rule: #a36b2f; }
.notebook-book-dialog .book-page.page-gold { --page-background: #fff8d9; --page-rule: #9b7626; }
.notebook-book-dialog .book-page.page-lime { --page-background: #f0fbdc; --page-rule: #6d8f35; }
.notebook-book-dialog .book-page.page-teal { --page-background: #e0faf5; --page-rule: #3d8074; }
.notebook-book-dialog .book-page.page-purple, .notebook-book-dialog .book-page.page-violet { --page-background: #f4eaff; --page-rule: #70539d; }
.notebook-book-dialog .book-page.page-rose { --page-background: #ffeaf3; --page-rule: #a4547b; }
.notebook-book-dialog .book-page.page-brown { --page-background: #f8edde; --page-rule: #806044; }
.notebook-book-dialog .book-page.page-gray { --page-background: #f4f6f8; --page-rule: #64748b; }

.notebook-settings { border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 60%, transparent); }
.notebook-settings > summary, .book-setting > summary, .page-browser > summary, .page-trash > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; color: var(--accent); font-size: 11px; font-weight: 800; }
.notebook-settings > summary { padding: 9px 11px; }
.book-setting > summary { padding: 8px 10px; color: var(--text); font-weight: 600; }
.book-setting > summary span { max-width: 58%; margin-left: auto; overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 400; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.notebook-settings-panel { display: grid; gap: 5px; padding: 0 9px 9px; }
.setting-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 5px; padding: 0 7px 8px; }
.setting-choices button { display: flex; align-items: center; gap: 7px; min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--muted); padding: 7px 8px; text-align: left; font: 10px Manrope; cursor: pointer; }
.setting-choices button > .setting-choice-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setting-color-sample { flex: 0 0 15px; width: 15px; height: 15px; border: 1px solid color-mix(in srgb, #172336 55%, var(--choice-color)); border-radius: 50%; background: var(--choice-color); box-shadow: inset 0 0 0 2px #ffffff88, 0 0 0 1px #ffffff18; }
.setting-color-choices button { min-height: 32px; }
.setting-color-choices button.selected .setting-color-sample { outline: 2px solid var(--accent); outline-offset: 2px; }
.setting-choices button.selected, .setting-choices button:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--panel-2)); }
.setting-color-choices button { position: relative; overflow: visible; isolation: isolate; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease; }
.setting-color-choices button:hover, .setting-color-choices button:focus-visible { z-index: 4; border-color: var(--choice-color); color: var(--text); background: color-mix(in srgb, var(--choice-color) 54%, var(--panel-2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--choice-color) 42%, transparent); transform: translateY(-1px) scale(1.02); }
.setting-color-choices button:hover .setting-color-sample, .setting-color-choices button:focus-visible .setting-color-sample { transform: scale(1.08); }
.setting-color-choices button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.setting-color-choices button:active { transform: translateY(0) scale(.98); }
.setting-color-check { flex: 0 0 auto; margin-left: auto; color: var(--accent); font-size: 13px; line-height: 1; }
.setting-color-tooltip { position: absolute; z-index: 6; left: 50%; bottom: calc(100% + 7px); display: grid; gap: 1px; min-width: 84px; max-width: min(190px, calc(100vw - 42px)); padding: 5px 7px; border: 1px solid var(--choice-color); border-radius: 7px; background: color-mix(in srgb, var(--choice-color) 22%, var(--panel)); color: var(--text); box-shadow: 0 8px 18px #0008; opacity: 0; pointer-events: none; text-align: center; transform: translate(-50%, 4px) scale(.98); transition: opacity .18s ease, transform .18s ease; }
.setting-color-tooltip strong { overflow: hidden; font: 700 10px/1.2 Poppins, Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.setting-color-tooltip small { font: 700 9px/1.2 'DM Mono', monospace; letter-spacing: .04em; }
.setting-color-choices button:hover .setting-color-tooltip, .setting-color-choices button:focus-visible .setting-color-tooltip { opacity: 1; transform: translate(-50%, 0) scale(1); }
.setting-reset { justify-self: start; padding: 7px 9px; font-size: 10px; }
.book-editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.book-editor-toolbar button { min-width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); padding: 4px 7px; font: 600 11px Manrope; cursor: pointer; }
.book-editor-toolbar button:hover { border-color: var(--accent); color: var(--accent); }
.editor-menu { position: relative; }
.editor-menu > summary { display: grid; place-items: center; min-width: 32px; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); padding: 4px 7px; cursor: pointer; list-style: none; font: 700 11px Manrope; }
.editor-menu > summary::-webkit-details-marker { display: none; }
.editor-menu[open] > summary { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.editor-menu-panel { position: absolute; z-index: 8; top: 34px; left: 0; display: grid; gap: 8px; width: min(310px, calc(100vw - 52px)); padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 16px 35px #0009; }
.editor-menu-panel label, .editor-menu-group { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.editor-menu-panel select { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); padding: 7px 8px; font: 10px Manrope; }
.editor-menu-panel option { background: var(--panel-2); color: var(--text); }
.editor-palette { display: flex; flex-wrap: wrap; gap: 5px; }
.editor-swatch { display: grid; place-items: center; width: 28px; min-width: 28px !important; height: 28px !important; padding: 4px !important; }
.editor-swatch i { display: block; width: 15px; height: 15px; border: 1px solid color-mix(in srgb, var(--text) 35%, var(--line)); border-radius: 50%; background: var(--choice-color); box-shadow: inset 0 0 0 2px #ffffff55; }
.editor-highlight-none i { background: linear-gradient(135deg, transparent 42%, #e78691 43%, #e78691 57%, transparent 58%), var(--panel-2); }
.editor-menu-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.editor-menu-actions button { height: 28px; font-size: 10px; }
.editor-review-panel p { margin: 0; color: var(--text); font-size: 11px; font-weight: 700; }
.editor-review-panel small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.toolbar-divider { width: 1px; height: 20px; margin: 0 2px; background: var(--line); }
.page-editor-status { min-height: 14px; color: var(--muted); font-size: 9px; }
.notebook-book-dialog .book-page-content h1, .notebook-book-dialog .book-page-content h2, .notebook-book-dialog .book-page-content h3 { margin: .35em 0; line-height: 1.3; }
.notebook-book-dialog .book-page-content h1 { font-size: 1.7em; }
.notebook-book-dialog .book-page-content h2 { font-size: 1.4em; }
.notebook-book-dialog .book-page-content h3 { font-size: 1.2em; }
.notebook-book-dialog .book-page-content blockquote { margin: .6em 0; border-left: 3px solid var(--accent); color: color-mix(in srgb, var(--page-ink, #213047) 75%, var(--muted)); padding: .3em 0 .3em 1em; }
.notebook-book-dialog .book-page-content hr { border: 0; border-top: 2px solid color-mix(in srgb, var(--page-ink, #213047) 24%, transparent); margin: 1em 0; }
.page-controls { flex-wrap: wrap; }
.page-controls button:disabled { opacity: .4; cursor: not-allowed; }
.page-controls [data-new-page] { margin-left: auto; }
.page-actions, .book-more-menu { position: relative; }
.page-actions > summary, .book-more-menu > summary { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--accent); cursor: pointer; list-style: none; font-size: 18px; line-height: 1; }
.page-actions > summary { width: auto; min-width: 66px; padding: 0 8px; font-size: 10px; font-weight: 700; }
.page-actions > summary::-webkit-details-marker, .book-more-menu > summary::-webkit-details-marker { display: none; }
.page-actions-panel, .book-more-panel { position: absolute; z-index: 6; top: 34px; right: 0; display: grid; gap: 4px; width: 190px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 15px 35px #0008; }
.page-actions-panel button, .book-more-panel button { border: 1px solid transparent; border-radius: 7px; background: var(--panel-2); color: var(--text); padding: 8px; text-align: left; font: 10px Manrope; cursor: pointer; }
.page-actions-panel button:hover, .book-more-panel button:hover { border-color: var(--accent); color: var(--accent); }
.notebook-delete-confirm-dialog .notebook-confirm-copy { display: grid; gap: 6px; }
.notebook-delete-confirm-dialog .notebook-confirm-copy .eyebrow { margin: 0; color: var(--accent); font-size: 10px; letter-spacing: .16em; }
.notebook-delete-confirm-dialog .notebook-confirm-copy h2 { margin: 0; font-size: 18px; }
.notebook-delete-confirm-dialog .notebook-confirm-name { overflow: hidden; margin: 0; color: var(--accent); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.notebook-delete-confirm-dialog .notebook-confirm-copy strong { margin-top: 5px; }
.book-back-button { white-space: nowrap; padding: 7px 10px; font-size: 10px; }
.book-save-button { white-space: nowrap; padding: 7px 10px; font-size: 10px; }
.page-actions-panel button:disabled { opacity: .4; cursor: not-allowed; }
.page-browser { margin: 0; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 60%, transparent); }
.page-browser > summary { padding: 8px 10px; }
.page-browser-body { display: grid; gap: 7px; padding: 0 9px 9px; }
.page-browser-body input { border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); padding: 8px; font: 10px Manrope; }
.page-list { display: grid; gap: 4px; max-height: 180px; overflow: auto; }
.page-list-item { display: grid; gap: 2px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); padding: 7px; text-align: left; cursor: pointer; }
.page-list-item:hover, .page-list-item.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.page-list-item span, .page-list-item small { color: var(--muted); font-size: 9px; }
.page-list-item strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.page-list-empty, .task-empty, .section-empty { padding: 8px; color: var(--muted); font-size: 10px; }
.page-trash { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.deleted-page-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; align-items: center; padding-top: 7px; color: var(--muted); font-size: 10px; }
.deleted-page-row button { border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--muted); padding: 5px; font: 9px Manrope; cursor: pointer; }
.task-heading { display: flex; justify-content: space-between; gap: 5px; }
.task-heading small { color: var(--muted); font-size: 9px; }
.notebook-task-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px !important; }
.notebook-task-row > span { min-width: 0; overflow-wrap: anywhere; }
.notebook-task-row > button { width: 24px; height: 24px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); padding: 0; cursor: pointer; }
.notebook-task-row > button:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.notebook-task-row > button[data-task-delete] { color: #ffb6bd; }
.notebook-task-row > button[data-task-delete]:hover { border-color: #ff9aa7; background: #381d2b; color: #ffd2d6; }
.notebook-sections-dialog { width: min(520px, calc(100% - 28px)); }
.notebook-sections-dialog .dialog-note { margin: 0 24px 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.section-create-form { display: grid; grid-template-columns: minmax(0, 1fr) 100px auto; gap: 6px; margin: 0 24px 14px; }
.section-create-form input, .section-create-form select, .section-manager-row input, .section-manager-row select { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); padding: 8px; font: 10px Manrope; }
.section-create-form button { padding: 8px; font-size: 10px; }
.section-manager-list { display: grid; gap: 6px; padding: 0 24px 20px; }
.section-manager-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 5px; }
.section-manager-row button { border: 1px solid #d97886; border-radius: 7px; background: #381d2b; color: #ffb6bd; padding: 7px; font: 10px Manrope; cursor: pointer; }
#view-title[data-view="notes"] { display: none; }
.topbar:has(#view-title[data-view="notes"]) { display: none; }
@media (max-width: 700px) {
  .notebook-book-dialog .editor-menu-panel { position: fixed; top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-height: 70dvh; overflow: auto; }
  #view-notes .notebooks-hero { align-items: stretch; flex-direction: column; }
  #view-notes .notebooks-hero .primary-button { width: 100%; }
  #view-notes .notebooks-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  #view-notes .notebook-card { min-height: 112px; }
  #view-notes .notebook-library-tools { grid-template-columns: 1fr 1fr; }
  #view-notes .notebook-library-tools label:first-child { grid-column: 1 / -1; }
  #view-notes .notebook-view-switch { grid-column: 1 / -1; }
  #view-notes .notebook-view-switch button { flex: 1; }
  .notebook-recovery { align-items: stretch; flex-direction: column; }
  .notebook-recovery div button { flex: 1; }
  .notebook-book-dialog .book-head { align-items: flex-start; padding: 12px; }
  .notebook-book-dialog .book-head-title input { max-width: 48vw; font-size: 16px; }
  .notebook-book-dialog .book-head-actions { flex-wrap: wrap; justify-content: flex-end; }
  .notebook-book-dialog .book-save-button, .notebook-book-dialog .book-back-button { padding: 7px 8px; font-size: 9px; }
  .notebook-book-dialog .book-page-counter { display: none; }
  .notebook-book-dialog .book-layout { grid-template-columns: 1fr; padding: 9px; }
  .notebook-book-dialog .book-tasks { order: 2; }
  .notebook-book-dialog .book-page-content { min-height: 48vh; max-height: none; }
  .notebook-book-dialog .page-top-row { flex-wrap: wrap; }
  .notebook-book-dialog .page-number-field { margin-left: auto; }
  .page-controls { justify-content: stretch; }
  .page-controls > button { flex: 1 1 auto; }
  .page-controls [data-new-page] { margin-left: 0; }
  .section-create-form { grid-template-columns: 1fr 1fr; }
  .section-create-form button { grid-column: 1 / -1; }
}

/* Navegación móvil compacta: rail vertical a la izquierda, sin ocupar el encabezado. */
@media (max-width: 700px) {
  .app-shell { display: grid; grid-template-columns: 76px minmax(0, 1fr); min-height: 100dvh; height: auto; overflow: visible; }
  .sidebar { position: sticky; top: 0; z-index: 10; width: 76px; height: 100dvh; min-height: 100dvh; padding: 10px 6px; border-right: 1px solid var(--line); border-bottom: 0; overflow-x: hidden; overflow-y: auto; }
  .brand { display: grid; justify-items: center; gap: 7px; margin: 0 0 12px; padding: 5px 0 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
  .brand-title { font-size: 12px; letter-spacing: .13em; }
  .profile-photo-wrap { width: 48px; height: 48px; }
  .profile-photo, .profile-photo .brand-mark, .profile-photo img { width: 42px; height: 42px; }
  .profile-photo img { border-radius: 13px; }
  .profile-edit { display: none; }
  .profile-details { display: none; }
  .nav-list { display: grid; grid-template-columns: 1fr; gap: 5px; }
  .nav-list .nav-item { display: grid; justify-items: center; gap: 3px; min-height: 45px; padding: 5px 2px; border: 0; border-radius: 10px; font-size: 0; line-height: 1; text-align: center; }
  .nav-item > span { width: 30px; height: 30px; }
  .nav-item b, .nav-item em { display: none; }
  .sidebar-footer { margin-top: auto; width: 100%; }
  .quick-nav { grid-template-columns: 1fr; gap: 4px; margin: 10px 0 0; padding: 4px; }
  .quick-item { min-height: 43px; padding: 5px 2px; border-radius: 9px; }
  .quick-item small { display: none; }
  .main-content { width: auto; max-width: none; min-width: 0; height: auto; padding: 15px 12px 38px; overflow: visible; }
}

/* Tipografía de Cuadernos: jerarquía clara, contraste y lectura cómoda. */
#view-notes, .notebook-create-dialog, .notebook-book-dialog {
  font-family: var(--ian-ui-font), Manrope, system-ui, sans-serif;
  letter-spacing: .01em;
}
#view-notes .notebooks-hero h2, .notebook-create-dialog .dialog-head h2, .notebook-book-dialog .book-name {
  font-family: Poppins, var(--ian-ui-font), Manrope, sans-serif;
  letter-spacing: -.025em;
}
#view-notes .notebooks-hero h2 { font-weight: 700; }
#view-notes .notebooks-hero p:not(.eyebrow) { max-width: 58ch; font-family: Inter, var(--ian-ui-font), sans-serif; }
#view-notes .notebook-library-tools label,
#view-notes .notebook-library-tools label > span,
.notebook-create-dialog label,
.notebook-book-dialog .page-top-row > label:first-child,
.notebook-book-dialog .page-number-field,
.notebook-book-dialog .notebook-settings > summary,
.notebook-book-dialog .book-setting > summary,
.notebook-book-dialog .page-browser > summary,
.notebook-book-dialog .page-trash > summary {
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-family: Poppins, var(--ian-ui-font), Manrope, sans-serif;
  font-weight: 600;
  letter-spacing: .015em;
}
#view-notes .notebook-library-tools input,
#view-notes .notebook-library-tools select,
.notebook-create-dialog input,
.notebook-create-dialog select,
.notebook-book-dialog .book-page-title,
.notebook-book-dialog .page-section,
.notebook-book-dialog .page-number,
.notebook-book-dialog .page-browser-body input,
.notebook-book-dialog .book-tasks input {
  font-family: var(--ian-ui-font), Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .005em;
}
#view-notes .notebook-card-copy strong {
  font-family: Poppins, var(--ian-ui-font), Manrope, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}
#view-notes .notebook-card-copy small,
#view-notes .notebook-card-copy em,
#view-notes .notebooks-summary,
#view-notes .notebooks-empty small {
  font-family: Inter, var(--ian-ui-font), sans-serif;
  line-height: 1.45;
}
.notebook-create-dialog .dialog-head h2 { font-size: 25px; font-weight: 700; }
.notebook-create-dialog .notebook-create-body > label,
.notebook-create-dialog .notebook-options label { gap: 8px; }
.notebook-create-dialog .notebook-create-body > label > input,
.notebook-create-dialog .notebook-options input,
.notebook-create-dialog .notebook-options select { min-height: 44px; }
.notebook-book-dialog .book-name { font-size: 20px !important; font-weight: 700 !important; }
.notebook-book-dialog .book-page-title {
  color: var(--text) !important;
  background: var(--panel-2) !important;
  font-family: var(--page-font, Poppins), Inter, sans-serif !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
}
.notebook-book-dialog .book-page-content {
  padding: 15px 16px 18px 18px;
  font-feature-settings: 'kern' 1, 'liga' 1;
  letter-spacing: .008em;
  font-size: calc(var(--page-size, 16px) * var(--page-zoom, 1));
}
.page-zoom-controls { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; color: var(--muted); font-size: 9px; }
.page-zoom-controls output { min-width: 38px; color: var(--text); font: 700 10px Manrope; text-align: center; }
.page-zoom-controls button { min-width: 30px; padding: 5px 7px; }
.pdf-preview-dialog { width: min(1100px, calc(100% - 24px)); height: min(88vh, 760px); padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); }
.pdf-preview-dialog::backdrop { background: rgba(3, 8, 16, .78); }
.pdf-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pdf-preview-head h2 { margin: 2px 0 3px; font-size: 18px; overflow-wrap: anywhere; }
.pdf-preview-head small { color: var(--muted); font-size: 10px; }
.pdf-preview-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; height: calc(100% - 66px); }
.pdf-preview-layout iframe { width: 100%; height: 100%; min-height: 340px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pdf-annotation-panel { display: grid; align-content: start; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel-2) 80%, transparent); }
.pdf-annotation-panel label { color: var(--text); font-size: 11px; font-weight: 700; }
.pdf-annotation-panel textarea { min-height: 150px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); padding: 9px; font: 11px/1.5 Manrope; }
.pdf-annotation-panel .primary-button, .pdf-annotation-panel .secondary-button { width: 100%; }
.pdf-annotation-panel > small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.notebook-book-dialog .book-tasks > strong,
.notebook-book-dialog .task-heading small { font-family: Poppins, var(--ian-ui-font), Manrope, sans-serif; }
.notebook-book-dialog .book-tasks > strong { font-size: 14px; letter-spacing: -.01em; }
.notebook-book-dialog .page-editor-status,
.notebook-book-dialog .book-save-state { font-family: Inter, var(--ian-ui-font), sans-serif; }
.notebook-book-dialog .page-top-row > label:first-child { display: none !important; }
.notebook-book-dialog .page-number-field { margin-left: 0; }
.notebook-book-dialog .page-actions { margin-left: auto; }
.notebook-book-dialog .book-page-content { cursor: text; caret-color: var(--page-ink, #213047); }
.notebook-book-dialog .book-tasks input::placeholder { color: color-mix(in srgb, var(--text) 72%, var(--muted)); opacity: 1; }
.notebook-book-dialog .task-heading strong { color: var(--text); }
.notebook-book-dialog .book-setting > summary {
  list-style: none;
}
.notebook-book-dialog .book-setting > summary::-webkit-details-marker {
  display: none;
}
.notebook-book-dialog .book-setting > summary::after {
  content: '⌄';
  flex: 0 0 auto;
  margin-left: 8px;
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
}
.notebook-book-dialog .book-setting[open] > summary::after {
  content: '⌃';
}
/* La biblioteca conserva la información, pero evita tarjetas altas sin contenido. */
#view-notes .notebook-card {
  min-height: 112px;
  padding: 13px 15px;
}
@media (max-width: 700px) {
  #view-notes .notebook-card-copy strong { font-size: 16px; }
  .notebook-create-dialog .dialog-head h2 { font-size: 23px; }
  .notebook-book-dialog .book-page-title { font-size: 20px !important; }
  #view-notes .notebook-card { min-height: 104px; }
  .pdf-preview-dialog { height: min(92vh, 860px); padding: 10px; }
  .pdf-preview-layout { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 1fr) auto; height: calc(100% - 60px); }
  .pdf-preview-layout iframe { min-height: 300px; }
  .pdf-annotation-panel { grid-template-columns: 1fr 1fr; }
  .pdf-annotation-panel label, .pdf-annotation-panel textarea, .pdf-annotation-panel > small { grid-column: 1 / -1; }
}

/* Acceso temporal del enlace QR: solo Cuadernos queda disponible para una
   persona invitada. No sustituye autenticación ni reglas de servidor. */
body.guest-notebook-mode .nav-item[data-view]:not([data-view="notes"]),
body.guest-notebook-mode .sidebar-footer,
body.guest-notebook-mode .profile-photo-wrap,
body.guest-notebook-mode .profile-details,
body.guest-notebook-mode .view:not(#view-notes):not(#view-ian) { display: none !important; }
body.guest-notebook-mode .sidebar { min-height: 100vh; }
body.guest-notebook-mode .notebooks-space { position: relative; }
.guest-mode-banner { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--text); font-size: 10px; }
.guest-mode-banner strong { color: var(--accent); }
.guest-mode-banner span { color: var(--muted); }
.guest-mode-toast { position: fixed; z-index: 30; left: 50%; bottom: 18px; transform: translate(-50%, 12px); max-width: min(360px, calc(100% - 30px)); padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); box-shadow: 0 16px 35px rgba(0,0,0,.28); font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
 .guest-mode-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* CuaderNOTE se trabaja como un contexto propio. La navegación global sigue
   existiendo en el DOM y vuelve a mostrarse al cambiar a cualquier módulo de
   IAN; durante CuaderNOTE solo queda su contenido y su control de retorno. */
body.cuadernote-exclusive .sidebar { display: none !important; }
body.cuadernote-exclusive .app-shell { display: block; min-height: 100dvh; }
body.cuadernote-exclusive .main-content { width: 100%; max-width: none; min-width: 0; min-height: 100dvh; margin: 0; padding: clamp(16px, 3vw, 34px) clamp(14px, 4vw, 56px) 70px; }
body.cuadernote-exclusive .topbar { display: none; }
body.cuadernote-exclusive #view-notes { width: min(100%, 1380px); margin: 0 auto; }

/* Visibilidad temporal centralizada: los módulos ocultos siguen montados y
   conservan sus rutas, lógica, configuración y datos para reactivarse después. */
[data-temporarily-hidden="true"] { display: none !important; }
body #view-ian.module-launcher-only > :not(.ian-app-selector) { display: none !important; }
#view-ian .ian-app-selector { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
#view-ian .ian-app-selector-entry { display: flex; align-items: center; gap: 11px; min-width: min(280px, 100%); min-height: 64px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--text); padding: 10px 13px; text-align: left; cursor: pointer; }
#view-ian .ian-app-selector-entry:hover, #view-ian .ian-app-selector-entry:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 10%, transparent); outline: none; transform: translateY(-1px); }
#view-ian .ian-app-selector-entry .tile-icon { flex: 0 0 42px; width: 42px; height: 42px; }
#view-ian .ian-app-selector-entry .tile-icon img { display: block; width: 34px; height: 34px; object-fit: contain; }
#view-ian .ian-app-selector-entry > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
#view-ian .ian-app-selector-entry strong { font: 800 13px/1.25 Poppins, var(--ian-ui-font), Manrope, sans-serif; }
#view-ian .ian-app-selector-entry small { color: var(--muted); font: 500 10px/1.35 Inter, var(--ian-ui-font), sans-serif; }
#view-ian .ian-app-selector-entry b { margin-left: auto; color: var(--accent); font-size: 18px; }
@media (max-width: 700px) { #view-ian .ian-app-selector { display: grid; } #view-ian .ian-app-selector-entry { width: 100%; min-width: 0; } }

/* CuaderNOTE: una interacción reutilizable para el logo y los accesos del módulo. */
.cuadernote-interaction-target {
  position: relative;
  transform-origin: center;
  transition: transform 210ms cubic-bezier(.2,.8,.2,1), filter 210ms ease, box-shadow 210ms ease;
  will-change: transform;
}
.cuadernote-interaction-target:hover {
  z-index: 3;
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 5px 12px color-mix(in srgb, #00FFAA 26%, transparent));
}
.cuadernote-interaction-target.cuadernote-pressed {
  z-index: 4;
  transform: translateY(0) scale(.97);
  transition-duration: 120ms;
}
.cuadernote-interaction-target.cuadernote-opening {
  z-index: 5;
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 0 10px color-mix(in srgb, #00FF66 58%, transparent)) drop-shadow(0 8px 18px color-mix(in srgb, #00FFAA 28%, transparent));
}
.cuadernote-interaction-target:focus-visible {
  outline: 2px solid #00FFAA;
  outline-offset: 4px;
}
#view-notes .notebook-identity-icon.cuadernote-module-trigger {
  display: grid;
  flex: 0 0 88px;
  width: 88px;
  height: 78px;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  overflow: visible;
}
#view-notes .notebook-identity-icon.cuadernote-module-trigger img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  filter: none;
}
#view-notes .notebook-identity-icon.cuadernote-module-trigger:hover {
  background: transparent;
  box-shadow: none;
}
.notebook-card .ian-icon { flex: 0 0 17px; width: 17px; height: 17px; }

/* Acción destructiva común de CuaderNOTE: símbolo compacto, nombre accesible
   contextual y área táctil amplia sin convertirla en una tarjeta pesada. */
.trash-action {
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 auto;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0;
  border: 1px solid transparent !important;
  border-radius: 9px;
  background: transparent !important;
  color: var(--muted) !important;
  padding: 7px !important;
  text-align: center !important;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 160ms ease, color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.trash-action .ian-icon { width: 18px; height: 18px; color: currentColor; }
.trash-action:hover { transform: translateY(-1px) scale(1.06); border-color: color-mix(in srgb, #ff8c98 62%, transparent) !important; background: color-mix(in srgb, #8d263b 20%, transparent) !important; color: #ffb6bd !important; }
.trash-action:focus-visible { outline: 2px solid color-mix(in srgb, #ff9aa7 72%, transparent); outline-offset: 2px; color: #ffd2d6 !important; }
.trash-action:active { transform: scale(.96); }
@media (max-width: 700px) {
  .trash-action { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .trash-action { transition: none; }
  .trash-action:hover, .trash-action:active { transform: none; }
}

/* Feedback visual ligero: la operación real se ejecuta al terminar la secuencia. */
.notebook-delete-animation-dialog {
  width: min(360px, calc(100% - 28px));
  border: 1px solid color-mix(in srgb, #00FFAA 48%, #B0B7BF);
  border-radius: 20px;
  padding: 22px 20px 20px;
  background: #131c45;
  color: #FFFFFF;
  box-shadow: 0 22px 70px color-mix(in srgb, #0E1F17 72%, transparent), 0 0 30px color-mix(in srgb, #00FF66 16%, transparent);
  text-align: center;
}
.notebook-delete-animation-dialog::backdrop { background: rgba(4, 8, 12, .72); }
.notebook-delete-animation { display: grid; justify-items: center; gap: 5px; }
.notebook-delete-animation .delete-scene { display: block; width: min(290px, 86vw); height: auto; overflow: visible; }
.delete-bin { transform-origin: 224px 145px; animation: cuadernote-delete-bin 760ms cubic-bezier(.2,.8,.2,1) both; }
.delete-bin-lid { transform-origin: 224px 90px; animation: cuadernote-delete-lid 760ms cubic-bezier(.2,.8,.2,1) both; }
.notebook-delete-animation strong { color: #FFFFFF; font: 700 15px/1.3 Poppins, Manrope, sans-serif; }
.notebook-delete-animation small { color: #B0B7BF; font: 500 12px/1.4 Inter, Manrope, sans-serif; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes cuadernote-delete-bin {
  0%, 68% { transform: rotate(0deg); }
  78% { transform: rotate(-3deg); }
  88% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}
@keyframes cuadernote-delete-lid {
  0%, 30% { transform: rotate(0deg); }
  58%, 100% { transform: rotate(-24deg) translate(-5px, -5px); }
}
@media (max-width: 700px) {
  #view-notes .notebook-identity-icon.cuadernote-module-trigger { flex-basis: 76px; width: 76px; height: 68px; }
  .notebook-delete-animation-dialog { padding: 18px 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cuadernote-interaction-target { transition: none; }
  .cuadernote-interaction-target:hover, .cuadernote-interaction-target.cuadernote-opening, .cuadernote-interaction-target.cuadernote-pressed { transform: none; filter: none; }
  .delete-bin, .delete-bin-lid { animation-duration: 1ms; animation-iteration-count: 1; }
}

/* Biblioteca coherente: los tipos comparten una sola navegación y cada tarjeta
   conserva una identidad visible sin presentar datos de ejemplo. */
#view-notes .library-type-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#view-notes .library-type-filter button { border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 86%, transparent); color: var(--muted); padding: 8px 11px; font: 600 10px var(--ian-ui-font), Manrope; cursor: pointer; }
#view-notes .library-type-filter button:hover, #view-notes .library-type-filter button:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
#view-notes .library-type-filter button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); color: var(--accent); }
#view-notes .notebook-card-kind, #view-notes .library-item-kind { color: var(--accent) !important; font-size: 9px !important; font-weight: 800; letter-spacing: .12em; }
#view-notes .library-favorite-action { position: absolute; top: 12px; right: 52px; z-index: 4; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--panel) 84%, transparent); color: var(--muted); padding: 0; font: 700 17px/1 var(--ian-ui-font), Manrope; cursor: pointer; }
#view-notes .library-favorite-action:hover, #view-notes .library-favorite-action:focus-visible { border-color: #f2cf56; color: #f2cf56; outline: none; }
#view-notes .library-item-card-shell { position: relative; display: grid; align-self: start; min-width: 0; }
#view-notes .library-item-card { display: flex; align-items: flex-start; gap: 12px; min-height: 150px; width: 100%; padding: 16px 94px 16px 16px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel)); color: var(--text); text-align: left; cursor: pointer; }
#view-notes .library-item-card:hover, #view-notes .library-item-card:focus-visible { border-color: var(--accent); outline: none; transform: translateY(-1px); }
#view-notes .library-item-icon { display: grid; place-items: center; flex: 0 0 47px; width: 47px; height: 58px; border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); color: var(--accent); }
#view-notes .library-item-icon .ian-icon { width: 25px; height: 25px; }
#view-notes .library-item-copy { display: grid; align-content: start; gap: 6px; min-width: 0; }
#view-notes .library-item-copy strong { overflow: hidden; font: 700 16px/1.25 Poppins, var(--ian-ui-font), Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#view-notes .library-item-copy small { overflow: hidden; color: color-mix(in srgb, var(--text) 72%, var(--muted)); font: 500 10px/1.45 Inter, var(--ian-ui-font), sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#view-notes .library-item-meta { white-space: normal !important; overflow-wrap: anywhere; }
#view-notes .library-item-delete { position: absolute; right: 12px; bottom: 11px; z-index: 4; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--muted); padding: 8px; cursor: pointer; }
#view-notes .library-item-delete .ian-icon { width: 22px; height: 22px; }
#view-notes .library-item-delete:hover, #view-notes .library-item-delete:focus-visible { border-color: #ff9aa7; background: color-mix(in srgb, #8d263b 22%, var(--panel)); color: #ffd2d6; outline: none; }
#view-notes .library-item-card-shell.in-trash { opacity: .8; }
#view-notes .library-item-card-shell { --library-card-accent: var(--accent); }
#view-notes .library-item-type-note { --library-card-accent: #F6D55C; }
#view-notes .library-item-type-image { --library-card-accent: #9D7AFF; }
#view-notes .library-item-type-video { --library-card-accent: #B08CFF; }
#view-notes .library-item-type-audio { --library-card-accent: #38E0C1; }
#view-notes .library-item-type-file { --library-card-accent: #FF9C4B; }
#view-notes .library-item-type-reminder { --library-card-accent: #FF6F91; }
#view-notes .library-item-type-link { --library-card-accent: #4DE7EF; }
#view-notes .library-item-card-shell .library-item-card { border-color: color-mix(in srgb, var(--library-card-accent) 48%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--library-card-accent) 13%, var(--panel)), var(--panel)); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
#view-notes .library-item-card-shell .library-item-card:hover, #view-notes .library-item-card-shell .library-item-card:focus-visible { border-color: var(--library-card-accent); box-shadow: 0 10px 24px color-mix(in srgb, var(--library-card-accent) 10%, transparent); }
#view-notes .library-item-card-shell .library-item-icon { border-color: color-mix(in srgb, var(--library-card-accent) 52%, transparent); background: color-mix(in srgb, var(--library-card-accent) 20%, var(--panel-2)); color: var(--library-card-accent); }
#view-notes .library-item-card-shell .library-item-kind { color: var(--library-card-accent) !important; }
#view-notes .library-edit-action,
#view-notes .library-reminder-alert-action {
  position: absolute;
  top: 52px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--library-action-bg, #131c45);
  color: var(--library-action-ink, #FFFFFF);
  padding: 0;
  cursor: pointer;
}
#view-notes .library-edit-action { right: 52px; }
#view-notes .library-reminder-alert-action { right: 12px; }
#view-notes .library-edit-action .ian-icon,
#view-notes .library-reminder-alert-action .ian-icon { width: 17px; height: 17px; }
#view-notes .library-reminder-alert-action.is-enabled { border-color: #FF6F91; background: #6F2037; color: #FFE8EF; }
#view-notes .library-edit-action:hover,
#view-notes .library-edit-action:focus-visible,
#view-notes .library-reminder-alert-action:hover,
#view-notes .library-reminder-alert-action:focus-visible { outline: 2px solid color-mix(in srgb, #FF6F91 56%, transparent); outline-offset: 1px; }
#view-notes .library-reminder-open {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 154px;
  border: 1px solid color-mix(in srgb, #FF6F91 56%, var(--line));
  border-radius: 19px;
  background: linear-gradient(145deg, color-mix(in srgb, #FF6F91 17%, var(--panel)), var(--panel));
  color: var(--text);
  padding: 15px 94px 15px 15px;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#view-notes .library-reminder-open:hover,
#view-notes .library-reminder-open:focus-visible { border-color: #FF6F91; box-shadow: 0 10px 24px #ff6f9126; outline: none; transform: translateY(-1px); }
#view-notes .reminder-calendar {
  display: grid;
  grid-template-rows: 28px 1fr 22px;
  width: 108px;
  height: 120px;
  overflow: hidden;
  border: 1px solid #d8dce3;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 9px 15px #0003, inset 0 -1px #ffffff;
  color: #1c2859;
  text-align: center;
}
#view-notes .reminder-calendar-month { display: grid; place-items: center; background: linear-gradient(135deg, #FF7A92, #FF4D6D); color: #FFFFFF; font: 800 11px/1 Inter, var(--ian-ui-font), sans-serif; letter-spacing: .13em; }
#view-notes .reminder-calendar strong { display: grid; place-items: center; padding-top: 3px; font: 800 56px/.85 Poppins, var(--ian-ui-font), sans-serif; letter-spacing: -.08em; }
#view-notes .reminder-calendar small { display: grid; place-items: center; border-top: 1px solid #eef0f4; color: #667085; font: 700 9px/1 Inter, var(--ian-ui-font), sans-serif; }
#view-notes .library-reminder-copy { gap: 6px; }
#view-notes .reminder-alert-status { color: var(--muted) !important; }
#view-notes .reminder-alert-status.is-enabled { color: #FFB1C0 !important; }
#view-notes .library-item-thumbnail { overflow: hidden; padding: 0; }
#view-notes .library-item-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
#view-notes .library-item-video-thumbnail { position: relative; }
#view-notes .library-item-video-thumbnail video { display: block; width: 100%; height: 100%; object-fit: cover; background: #131c45; }
#view-notes .library-item-video-thumbnail b { position: absolute; inset: 0; display: grid; place-items: center; color: #FFFFFF; font-size: 20px; text-shadow: 0 1px 4px #0b1233; pointer-events: none; }
#view-notes .library-item-icon > span[aria-hidden="true"] { font-weight: 800; letter-spacing: -.06em; }
#view-notes .library-create-option-icon .ian-icon { width: 21px; height: 21px; }
#view-notes .library-filter-toggle { display: inline-flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--accent); font-weight: 800; }
#view-notes .library-filter-toggle span { font-size: 12px; line-height: 1; }
#view-notes .library-type-options { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
#view-notes .library-type-options[hidden] { display: none; }
#view-notes .library-favorite-action, #view-notes .library-like-action { background: var(--library-action-bg, #131c45) !important; color: var(--library-action-ink, #FFFFFF) !important; border-color: color-mix(in srgb, var(--library-action-ink, #FFFFFF) 42%, var(--line)) !important; text-shadow: 0 1px 2px #0008; }
#view-notes .library-like-action { position: absolute; top: 12px; right: 12px; z-index: 4; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; padding: 0; font: 700 18px/1 var(--ian-ui-font), Manrope; cursor: pointer; }
#view-notes .library-favorite-action:hover, #view-notes .library-favorite-action:focus-visible, #view-notes .library-like-action:hover, #view-notes .library-like-action:focus-visible { border-color: var(--library-action-ink, #FFFFFF) !important; outline: 2px solid color-mix(in srgb, var(--library-action-ink, #FFFFFF) 45%, transparent); outline-offset: 1px; }
#view-notes .notebook-card-shell > .library-favorite-action { right: 88px; }
#view-notes .notebook-card-shell > .library-like-action { right: 52px; }

@media (max-width: 700px) {
  #view-notes .library-type-filter { display: flex; flex-wrap: nowrap; gap: 6px; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: thin; }
  #view-notes .library-type-options { flex-wrap: nowrap; flex: 0 0 auto; }
  #view-notes .library-type-filter button { flex: 0 0 auto; white-space: nowrap; }
}
.library-create-menu-dialog { width: min(600px, calc(100% - 24px)); max-width: none; }
.library-create-menu-dialog .dialog-head { display: block; }
.library-create-menu-dialog .dialog-head .close-button { position: absolute; top: 18px; right: 20px; }
.library-create-menu-dialog .dialog-note { max-width: 48ch; margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.library-create-options { display: grid; gap: 8px; padding: 8px 24px 24px; }
.library-create-option { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 58px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--text); padding: 9px 11px; text-align: left; cursor: pointer; }
.library-create-option:hover, .library-create-option:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); outline: none; }
.library-create-option:disabled { cursor: not-allowed; opacity: .58; }
.library-create-option-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 9px; color: var(--accent); font-size: 18px; }
.library-create-option span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.library-create-option strong { font: 700 12px/1.25 Poppins, var(--ian-ui-font), Manrope, sans-serif; }
.library-create-option small { color: var(--muted); font: 500 10px/1.35 Inter, var(--ian-ui-font), sans-serif; }
.library-create-option b { color: var(--muted); font-size: 19px; }
.library-item-dialog, .library-item-preview-dialog { width: min(620px, calc(100% - 24px)); max-width: none; }
.library-item-form { display: grid; gap: 12px; padding: 8px 24px 20px; }
.library-item-form label { display: grid; gap: 6px; color: var(--muted); font: 600 11px/1.3 Poppins, var(--ian-ui-font), Manrope, sans-serif; }
.library-item-form input, .library-item-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); padding: 11px; font: 12px/1.45 Inter, var(--ian-ui-font), sans-serif; resize: vertical; }
.library-item-form input:focus, .library-item-form textarea:focus { border-color: var(--accent); outline: none; }
.library-form-note { color: var(--muted); font: 500 10px/1.45 Inter, var(--ian-ui-font), sans-serif; }
.library-preview-content { display: grid; justify-items: center; gap: 12px; padding: 0 24px 24px; color: var(--muted); font-size: 11px; }
.library-preview-content img, .library-preview-content video { display: block; max-width: 100%; max-height: 52vh; border-radius: 10px; background: #131c45; object-fit: contain; }
.library-preview-content audio { width: min(100%, 420px); }
.library-preview-content .primary-button { text-decoration: none; }
@media (max-width: 700px) {
  #view-notes .library-type-filter { gap: 5px; }
  #view-notes .library-type-filter button { padding: 7px 9px; }
  #view-notes .notebook-library-tools { grid-template-columns: 1fr 1fr; }
  #view-notes .notebook-library-tools label:first-child { grid-column: 1 / -1; }
  #view-notes .notebook-view-switch { grid-column: 1 / -1; }
  #view-notes .notebook-view-switch button { flex: 1; }
  #view-notes .library-item-card { min-height: 112px; padding: 13px 94px 13px 13px; }
  #view-notes .library-item-icon { flex-basis: 40px; width: 40px; height: 48px; }
  #view-notes .library-reminder-open { grid-template-columns: 90px minmax(0, 1fr); min-height: 132px; gap: 11px; padding: 12px 84px 12px 12px; }
  #view-notes .reminder-calendar { width: 90px; height: 104px; grid-template-rows: 25px 1fr 19px; border-radius: 15px; }
  #view-notes .reminder-calendar-month { font-size: 9px; }
  #view-notes .reminder-calendar strong { font-size: 47px; }
  #view-notes .reminder-calendar small { font-size: 8px; }
  #view-notes .library-edit-action { right: 48px; }
  #view-notes .library-reminder-alert-action { right: 10px; }
  .library-create-options { padding-inline: 16px; }
  .library-item-form { padding-inline: 16px; }
  .library-preview-content { padding-inline: 16px; }
}

/* REF-03: reglas base conservadas para la pantalla multimedia y su acento
   editable por elemento. La composición final se define más abajo. */
#view-notes .library-media-item { --library-card-accent: var(--media-accent) !important; }
#view-notes .library-media-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; min-height: 292px; padding: 14px 52px 48px 14px; }
#view-notes .library-media-card .library-item-copy { width: 100%; gap: 5px; }
#view-notes .library-media-card .library-item-copy strong { font-size: 15px; }
#view-notes .library-media-card .library-item-kind { font-size: 9px !important; }
#view-notes .library-media-card .library-item-meta { white-space: normal; }
#view-notes .library-media-item .library-item-delete { color: var(--library-action-ink, #FFFFFF); border-color: color-mix(in srgb, var(--library-action-ink, #FFFFFF) 42%, var(--line)); }
.media-tv { position: relative; display: block; width: min(100%, 188px); aspect-ratio: 1.45; margin: 12px auto 0; color: var(--media-accent); filter: drop-shadow(0 7px 10px #0006); }
.media-tv-antennas { position: absolute; z-index: 1; top: 0; left: 50%; width: 72px; height: 28px; transform: translateX(-50%); }
.media-tv-antennas::before, .media-tv-antennas::after { content: ''; position: absolute; bottom: 5px; width: 4px; height: 35px; border-radius: 99px; background: var(--media-accent); box-shadow: 0 0 7px color-mix(in srgb, var(--media-accent) 70%, transparent); transform-origin: bottom center; }
.media-tv-antennas::before { left: 18px; transform: rotate(-34deg); }
.media-tv-antennas::after { right: 18px; transform: rotate(34deg); }
.media-tv-antennas i { position: absolute; top: 0; width: 9px; height: 9px; border: 2px solid var(--media-accent); border-radius: 50%; background: #131c45; box-shadow: 0 0 7px color-mix(in srgb, var(--media-accent) 72%, transparent); }
.media-tv-antennas i:first-child { left: 3px; }
.media-tv-antennas i:last-child { right: 3px; }
.media-tv-set { position: absolute; inset: 20px 0 12px; display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 7px; padding: 10px 9px 10px 11px; border: 3px solid var(--media-accent); border-radius: 19px 19px 23px 23px; background: linear-gradient(145deg, color-mix(in srgb, var(--media-accent) 28%, #0E1F17), #131c45 78%); box-shadow: inset 0 0 0 2px #ffffff1c, 0 0 15px color-mix(in srgb, var(--media-accent) 30%, transparent); }
.media-tv-screen { display: grid; place-items: center; min-width: 0; height: 100%; overflow: hidden; border: 2px solid color-mix(in srgb, var(--media-accent) 72%, #FFFFFF); border-radius: 10px; background: #131c45; box-shadow: inset 0 0 14px #0009; }
.media-tv-screen > img, .media-tv-screen > video, .media-tv-video-frame { display: block; width: 100%; height: 100%; min-width: 0; object-fit: cover; }
.media-tv-video-frame { position: relative; }
.media-tv-video-frame b { position: absolute; inset: 0; display: grid; place-items: center; color: #FFFFFF; font-size: 26px; text-shadow: 0 1px 5px #0b1233; }
.media-tv-controls { display: grid; justify-items: center; gap: 10px; }
.media-tv-controls i { width: 13px; height: 13px; border: 2px solid color-mix(in srgb, var(--media-accent) 80%, #FFFFFF); border-radius: 50%; background: color-mix(in srgb, var(--media-accent) 45%, #131c45); box-shadow: 0 0 6px color-mix(in srgb, var(--media-accent) 45%, transparent); }
.media-tv-legs { position: absolute; left: 18%; right: 18%; bottom: 0; display: flex; justify-content: space-between; }
.media-tv-legs i { width: 4px; height: 15px; border-radius: 99px; background: var(--media-accent); transform: rotate(18deg); }
.media-tv-legs i:last-child { transform: rotate(-18deg); }
.media-tv-placeholder { display: grid; justify-items: center; gap: 5px; color: color-mix(in srgb, var(--media-accent) 80%, #FFFFFF); font-weight: 800; }
.media-tv-placeholder b { font-size: 24px; line-height: 1; }
.media-tv-placeholder small { font: 800 8px/1 var(--ian-ui-font), Manrope, sans-serif; letter-spacing: .16em; }
.media-tv-audio-frame { display: grid; align-content: center; justify-items: center; gap: 7px; width: 100%; height: 100%; padding: 8px; }
.media-tv-audio-frame > b { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--media-accent); border-radius: 50%; color: var(--media-accent); font-size: 18px; }
.media-tv-waveform { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 30px; }
.media-tv-waveform i { width: 4px; height: 13px; border-radius: 99px; background: var(--media-accent); }
.media-tv-waveform i:nth-child(2), .media-tv-waveform i:nth-child(11) { height: 22px; }
.media-tv-waveform i:nth-child(3), .media-tv-waveform i:nth-child(9) { height: 28px; }
.media-tv-waveform i:nth-child(4), .media-tv-waveform i:nth-child(8) { height: 19px; }
.media-tv-waveform i:nth-child(5), .media-tv-waveform i:nth-child(7) { height: 25px; }
.media-tv-waveform i:nth-child(6) { height: 30px; }
.multimedia-personalization { display: grid; gap: 11px; margin: 2px 0 3px; padding: 13px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); }
.multimedia-personalization-heading { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.multimedia-personalization-heading div { display: grid; gap: 3px; }
.multimedia-personalization-heading strong { color: var(--text); font: 800 12px/1.25 Poppins, var(--ian-ui-font), Manrope, sans-serif; }
.multimedia-personalization-heading small { color: var(--muted); font: 500 10px/1.35 Inter, var(--ian-ui-font), sans-serif; }
.multimedia-personalization-heading output { color: var(--text); font: 700 10px/1.2 'DM Mono', monospace; letter-spacing: .04em; }
.multimedia-color-options { display: flex; flex-wrap: wrap; gap: 6px; }
.multimedia-color-swatch { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--muted); padding: 5px 8px 5px 5px; font: 600 9px/1 var(--ian-ui-font), Manrope, sans-serif; cursor: pointer; }
.multimedia-color-swatch i { width: 15px; height: 15px; border: 2px solid #FFFFFF99; border-radius: 50%; background: var(--media-swatch); box-shadow: 0 0 0 1px #0005; }
.multimedia-color-swatch:hover, .multimedia-color-swatch:focus-visible, .multimedia-color-swatch.selected { border-color: var(--media-swatch); color: var(--text); outline: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--media-swatch) 48%, transparent); }
.multimedia-custom-color { display: inline-flex !important; grid-template-columns: auto auto !important; align-items: center; gap: 6px; width: auto !important; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); padding: 4px 6px 4px 9px; color: var(--muted) !important; font-size: 9px !important; }
.multimedia-custom-color input { width: 25px; height: 25px; min-height: 25px; border: 0; border-radius: 50%; padding: 0; background: transparent; cursor: pointer; }
.media-dialog-preview { display: grid; justify-items: center; gap: 4px; padding: 9px 8px 4px; border-top: 1px solid var(--line); }
.media-dialog-preview .media-tv { width: min(100%, 230px); }
.media-dialog-preview strong { max-width: 100%; overflow: hidden; color: var(--text); font: 800 14px/1.25 Poppins, var(--ian-ui-font), Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.media-dialog-preview small { color: var(--muted); font: 500 10px/1.35 Inter, var(--ian-ui-font), sans-serif; }
.multimedia-reset { justify-self: start; padding: 8px 10px; font-size: 10px; }
#view-notes .library-media-menu { position: absolute; top: 50px; right: 12px; z-index: 5; }
#view-notes .library-media-menu > summary { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); cursor: pointer; list-style: none; }
#view-notes .library-media-menu > summary::-webkit-details-marker { display: none; }
#view-notes .library-media-menu > summary:hover, #view-notes .library-media-menu[open] > summary { border-color: var(--media-accent); color: var(--media-accent); }
#view-notes .library-media-menu > div { position: absolute; top: 34px; right: 0; display: grid; min-width: 118px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); box-shadow: 0 12px 28px #0009; }
#view-notes .library-media-menu button { border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); padding: 7px 8px; text-align: left; font: 600 10px/1.2 var(--ian-ui-font), Manrope, sans-serif; cursor: pointer; }
#view-notes .library-media-menu button:hover, #view-notes .library-media-menu button:focus-visible { border-color: var(--media-accent); color: var(--media-accent); outline: none; }
@media (max-width: 700px) {
  #view-notes .library-media-card { min-height: 256px; padding: 12px 50px 45px 12px; }
  .media-tv { width: min(100%, 210px); }
  .multimedia-color-options { gap: 5px; }
  .multimedia-color-swatch span { display: none; }
  .multimedia-color-swatch { padding: 5px; }
  .multimedia-custom-color { padding-left: 7px; }
  .multimedia-custom-color span { display: inline !important; }
}

/* REF multimedia definitiva: cada medio es un objeto independiente de la
   cuadrícula. Sus controles no están dentro de una tarjeta exterior; el
   nombre y los metadatos quedan debajo del objeto. */
#view-notes .library-media-item {
  position: relative;
  display: grid;
  align-self: start;
  justify-items: center;
  align-content: start;
  min-width: 0;
  min-height: 306px;
  padding: 8px 4px 12px;
  --library-card-accent: var(--media-accent);
}
#view-notes .library-media-open {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 22px 32px 0 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}
#view-notes .library-media-open:hover,
#view-notes .library-media-open:focus-visible {
  outline: none;
}
#view-notes .library-media-open:focus-visible .media-tv,
#view-notes .library-media-open:hover .media-tv {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 14px #0008) drop-shadow(0 0 7px color-mix(in srgb, var(--media-accent) 26%, transparent));
}
#view-notes .library-media-open .media-tv {
  width: min(100%, 190px);
  margin: 8px auto 0;
  transition: transform .18s ease, filter .18s ease;
}
#view-notes .library-media-copy {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  width: 100%;
  min-width: 0;
  text-align: center;
}
#view-notes .library-media-copy strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font: 800 15px/1.25 Poppins, var(--ian-ui-font), Manrope, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-notes .library-media-copy .library-item-kind {
  font-size: 9px !important;
}
#view-notes .library-media-copy .library-item-meta {
  max-width: 100%;
  overflow: hidden;
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  font: 500 10px/1.4 Inter, var(--ian-ui-font), sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-notes .library-media-controls {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
#view-notes .library-media-controls > .library-favorite-action,
#view-notes .library-media-controls > .library-like-action,
#view-notes .library-media-controls > .library-item-delete,
#view-notes .library-media-controls > .library-media-menu {
  pointer-events: auto;
}
#view-notes .library-media-controls .library-favorite-action,
#view-notes .library-media-controls .library-like-action,
#view-notes .library-media-controls .library-item-delete,
#view-notes .library-media-controls .library-media-menu {
  position: absolute;
  z-index: 4;
}
#view-notes .library-media-controls .library-favorite-action,
#view-notes .library-media-controls .library-like-action,
#view-notes .library-media-controls .library-item-delete,
#view-notes .library-media-menu > summary {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--library-action-ink, #FFFFFF) 42%, var(--line));
  border-radius: 50%;
  background: var(--library-action-bg, #131c45) !important;
  color: var(--library-action-ink, #FFFFFF) !important;
  padding: 0;
  font: 700 19px/1 var(--ian-ui-font), Manrope, sans-serif;
  cursor: pointer;
  text-shadow: 0 1px 2px #0008;
}
#view-notes .library-media-controls .library-favorite-action { top: 8px; right: 48px; }
#view-notes .library-media-controls .library-like-action { top: 8px; right: 4px; }
#view-notes .library-media-controls .library-item-delete {
  left: 4px;
  right: auto;
  bottom: 63px;
  padding: 8px;
}
#view-notes .library-media-controls .library-item-delete .ian-icon { width: 21px; height: 21px; }
#view-notes .library-media-controls .library-favorite-action:hover,
#view-notes .library-media-controls .library-favorite-action:focus-visible,
#view-notes .library-media-controls .library-like-action:hover,
#view-notes .library-media-controls .library-like-action:focus-visible,
#view-notes .library-media-controls .library-item-delete:hover,
#view-notes .library-media-controls .library-item-delete:focus-visible,
#view-notes .library-media-menu > summary:hover,
#view-notes .library-media-menu[open] > summary {
  border-color: var(--media-accent) !important;
  outline: 2px solid color-mix(in srgb, var(--media-accent) 42%, transparent);
  outline-offset: 1px;
}
#view-notes .library-media-menu {
  top: 52px;
  right: 4px;
}
#view-notes .library-media-menu > summary {
  list-style: none;
}
#view-notes .library-media-menu > summary::-webkit-details-marker { display: none; }
#view-notes .library-media-menu > div {
  position: absolute;
  top: 43px;
  right: 0;
  display: grid;
  min-width: 150px;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 12px 28px #0009;
}
#view-notes .library-media-menu button {
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 8px;
  text-align: left;
  font: 600 10px/1.2 var(--ian-ui-font), Manrope, sans-serif;
  cursor: pointer;
}
#view-notes .library-media-menu button:hover,
#view-notes .library-media-menu button:focus-visible {
  border-color: var(--media-accent);
  color: var(--media-accent);
  outline: none;
}
#view-notes .list-view .library-media-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 156px;
  padding: 8px 4px;
}
#view-notes .list-view .library-media-open {
  grid-template-columns: minmax(0, 155px) minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 12px;
  padding: 0 8px 0 36px;
  text-align: left;
}
#view-notes .list-view .library-media-open .media-tv {
  width: min(100%, 145px);
  margin: 0 auto;
}
#view-notes .list-view .library-media-copy {
  justify-items: start;
  text-align: left;
}
#view-notes .list-view .library-media-controls {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 128px;
  padding-right: 4px;
}
#view-notes .list-view .library-media-controls .library-favorite-action,
#view-notes .list-view .library-media-controls .library-like-action,
#view-notes .list-view .library-media-controls .library-item-delete,
#view-notes .list-view .library-media-menu {
  position: static;
}
#view-notes .list-view .library-media-menu > div {
  top: 43px;
  right: 0;
}
@media (prefers-reduced-motion: reduce) {
  #view-notes .library-media-open .media-tv { transition: none; }
}
@media (max-width: 700px) {
  #view-notes .library-media-item { min-height: 296px; }
  #view-notes .library-media-open { padding-right: 42px; }
  #view-notes .library-media-open .media-tv { width: min(100%, 230px); }
  #view-notes .library-media-controls .library-favorite-action,
  #view-notes .library-media-controls .library-like-action,
  #view-notes .library-media-controls .library-item-delete,
  #view-notes .library-media-menu > summary {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }
  #view-notes .library-media-controls .library-favorite-action { right: 52px; }
  #view-notes .library-media-controls .library-like-action { right: 4px; }
  #view-notes .list-view .library-media-item {
    grid-template-columns: 1fr;
    min-height: 150px;
  }
  #view-notes .list-view .library-media-open {
    grid-template-columns: minmax(0, 125px) minmax(0, 1fr);
    padding-left: 34px;
  }
  #view-notes .list-view .library-media-open .media-tv { width: min(100%, 125px); }
  #view-notes .list-view .library-media-controls {
    position: absolute;
    inset: 0;
    display: block;
    min-width: 0;
    padding: 0;
  }
  #view-notes .list-view .library-media-controls .library-item-delete { position: absolute; left: 4px; bottom: 42px; }
  #view-notes .list-view .library-media-controls .library-favorite-action { position: absolute; top: 4px; right: 52px; }
  #view-notes .list-view .library-media-controls .library-like-action { position: absolute; top: 4px; right: 4px; }
  #view-notes .list-view .library-media-menu { position: absolute; top: 52px; right: 4px; }
}

/* Controles contextuales globales: un solo sistema, siempre anclado al
   objeto que representa. El contenedor no agrega una tarjeta ni reserva una
   columna; únicamente ofrece una capa local para sus acciones. */
#view-notes .library-context-actions {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
#view-notes .library-context-actions > * { pointer-events: auto; }
#view-notes .library-context-actions .library-favorite-action,
#view-notes .library-context-actions .library-like-action,
#view-notes .library-context-actions .trash-action {
  position: absolute;
}
#view-notes .library-context-actions .library-favorite-action {
  top: 12px;
  right: 52px;
}
#view-notes .library-context-actions .library-like-action {
  top: 12px;
  right: 12px;
}
#view-notes .library-context-actions .trash-action {
  right: 12px;
  bottom: 11px;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
}
#view-notes .library-context-actions .trash-action .ian-icon { width: 22px; height: 22px; }
#view-notes .library-context-actions .library-favorite-action,
#view-notes .library-context-actions .library-like-action {
  background: var(--library-action-bg, #131c45) !important;
  color: var(--library-action-ink, #FFFFFF) !important;
  border-color: color-mix(in srgb, var(--library-action-ink, #FFFFFF) 42%, var(--line)) !important;
  text-shadow: 0 1px 2px #0008;
}
#view-notes .library-context-actions .library-favorite-action:hover,
#view-notes .library-context-actions .library-favorite-action:focus-visible,
#view-notes .library-context-actions .library-like-action:hover,
#view-notes .library-context-actions .library-like-action:focus-visible,
#view-notes .library-context-actions .trash-action:hover,
#view-notes .library-context-actions .trash-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--library-action-ink, #FFFFFF) 45%, transparent);
  outline-offset: 1px;
}
#view-notes .notebook-context-actions .library-favorite-action { right: 88px; }
#view-notes .notebook-context-actions .library-like-action { right: 52px; }
#view-notes .notebook-context-actions .notebook-card-menu {
  position: absolute;
  top: 12px;
  right: 12px;
  pointer-events: auto;
}
#view-notes .notebook-context-actions .trash-action {
  right: 13px;
}
#view-notes .library-item-controls .trash-action {
  right: 12px;
}
@media (max-width: 700px) {
  #view-notes .library-context-actions .library-favorite-action,
  #view-notes .library-context-actions .library-like-action,
  #view-notes .library-context-actions .trash-action,
  #view-notes .notebook-context-actions .notebook-card-menu > summary {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }
  #view-notes .library-context-actions .library-favorite-action { right: 52px; }
  #view-notes .library-context-actions .library-like-action { right: 4px; }
  #view-notes .notebook-context-actions .library-favorite-action { right: 96px; }
  #view-notes .notebook-context-actions .library-like-action { right: 52px; }
}
/* La variante multimedia conserva la distribución de referencia: eliminar
   queda abajo a la izquierda y el menú debajo de los estados superiores. */
#view-notes .library-media-controls .library-favorite-action { top: 8px; right: 48px; }
#view-notes .library-media-controls .library-like-action { top: 8px; right: 4px; }
#view-notes .library-media-controls .library-item-delete { left: 4px; right: auto; bottom: 63px; }
#view-notes .library-media-controls .library-media-menu { top: 52px; right: 4px; }
@media (max-width: 700px) {
  #view-notes .library-media-controls .library-favorite-action { top: 4px; right: 52px; }
  #view-notes .library-media-controls .library-like-action { top: 4px; right: 4px; }
  #view-notes .library-media-controls .library-item-delete { left: 4px; right: auto; bottom: 63px; }
  #view-notes .list-view .library-media-controls .library-item-delete { bottom: 42px; }
  #view-notes .library-media-controls .library-media-menu { top: 52px; right: 4px; }
}

/* REF-02: las notas son objetos adhesivos reales, no tarjetas genéricas. Cada
   nota conserva su color, tipografía, contenido y estado fijado en local. */
#view-notes .library-note-item {
  position: relative;
  display: grid;
  align-self: start;
  justify-items: center;
  align-content: start;
  min-width: 0;
  min-height: 310px;
  padding: 8px 4px 12px;
  --library-card-accent: var(--note-bg, #FACC15);
}
#view-notes .library-note-open {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 26px 32px 0 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}
#view-notes .library-note-open:hover,
#view-notes .library-note-open:focus-visible { outline: none; }
#view-notes .library-note-open:hover .library-note-paper,
#view-notes .library-note-open:focus-visible .library-note-paper {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 14px 23px #0007, 0 0 0 2px color-mix(in srgb, var(--note-border) 44%, transparent), inset 0 0 0 1px #ffffff2b;
}
#view-notes .library-note-paper {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  width: min(100%, 205px);
  min-height: 174px;
  padding: 22px 17px 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--note-border) 34%, #131c45);
  border-radius: 3px 3px 15px 3px;
  background: var(--note-bg);
  color: var(--note-ink);
  box-shadow: 0 10px 18px #0006, inset 0 0 0 1px #ffffff29;
  text-align: left;
  transform: rotate(-1deg);
  transition: transform .18s ease, box-shadow .18s ease;
}
#view-notes .library-note-paper::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  border-top: 1px solid color-mix(in srgb, var(--note-border) 35%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--note-border) 35%, transparent);
  background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--note-ink) 12%, var(--note-bg)) 51%);
  content: '';
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
#view-notes .library-note-paper-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
#view-notes .library-note-icon { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid color-mix(in srgb, var(--note-ink) 32%, transparent); border-radius: 8px; color: var(--note-ink); font-size: 18px; line-height: 1; }
#view-notes .library-note-icon .ian-icon { width: 17px; height: 17px; }
#view-notes .library-note-label { color: var(--note-secondary); font: 800 8px/1 var(--ian-ui-font), Manrope, sans-serif; letter-spacing: .16em; }
#view-notes .library-note-content { display: -webkit-box; min-width: 0; overflow: hidden; color: var(--note-ink); font-family: var(--note-font), var(--ian-ui-font), sans-serif; font-size: var(--note-size); font-style: var(--note-style); font-weight: var(--note-weight); line-height: 1.35; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
#view-notes .library-note-paper-foot { color: var(--note-secondary); font: 600 9px/1.25 Inter, var(--ian-ui-font), sans-serif; }
#view-notes .library-note-copy { display: grid; justify-items: center; align-content: start; gap: 4px; width: 100%; min-width: 0; text-align: center; }
#view-notes .library-note-copy strong { display: block; max-width: 100%; overflow: hidden; color: var(--text); font: 800 15px/1.25 Poppins, var(--ian-ui-font), Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#view-notes .library-note-copy .library-item-kind { color: var(--note-ink) !important; }
#view-notes .library-note-copy .library-item-meta { max-width: 100%; overflow: hidden; color: color-mix(in srgb, var(--text) 72%, var(--muted)); font: 500 10px/1.4 Inter, var(--ian-ui-font), sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#view-notes .library-note-controls .library-note-pin-action { position: absolute; top: 0; left: 50%; z-index: 4; display: grid; place-items: center; width: 42px; min-width: 42px; height: 42px; min-height: 42px; border: 1px solid color-mix(in srgb, var(--note-ink) 46%, var(--line)); border-radius: 50%; background: var(--library-action-bg, #131c45) !important; color: var(--library-action-ink, #FFFFFF) !important; padding: 0; font-size: 19px; line-height: 1; cursor: pointer; filter: drop-shadow(0 3px 5px #0008); pointer-events: auto; transform: translateX(-50%); }
#view-notes .library-note-controls .library-note-pin-action.is-pinned { border-color: var(--note-border); background: var(--note-bg) !important; color: var(--note-ink) !important; }
#view-notes .library-note-controls .library-note-pin-action:hover,
#view-notes .library-note-controls .library-note-pin-action:focus-visible { border-color: var(--note-ink); outline: 2px solid color-mix(in srgb, var(--note-ink) 42%, transparent); outline-offset: 1px; }
#view-notes .library-note-controls .library-favorite-action { top: 12px; right: 52px; }
#view-notes .library-note-controls .library-like-action { top: 12px; right: 12px; }
#view-notes .library-note-controls .library-item-delete { right: 12px; bottom: 11px; }
#view-notes .library-note-menu { position: absolute; top: 56px; right: 12px; z-index: 5; }
#view-notes .library-note-menu > summary { display: grid; place-items: center; width: 38px; min-width: 38px; height: 38px; min-height: 38px; border: 1px solid color-mix(in srgb, var(--note-ink) 42%, var(--line)); border-radius: 50%; background: var(--library-action-bg, #131c45); color: var(--library-action-ink, #FFFFFF); cursor: pointer; list-style: none; }
#view-notes .library-note-menu > summary::-webkit-details-marker { display: none; }
#view-notes .library-note-menu > summary:hover, #view-notes .library-note-menu[open] > summary { border-color: var(--note-ink); outline: 2px solid color-mix(in srgb, var(--note-ink) 34%, transparent); outline-offset: 1px; }
#view-notes .library-note-menu > div { position: absolute; top: 43px; right: 0; display: grid; min-width: 170px; gap: 3px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 12px 28px #0009; }
#view-notes .library-note-menu button { border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); padding: 8px; text-align: left; font: 600 10px/1.2 var(--ian-ui-font), Manrope, sans-serif; cursor: pointer; }
#view-notes .library-note-menu button:hover, #view-notes .library-note-menu button:focus-visible { border-color: var(--note-bg); color: var(--note-bg); outline: none; }

.library-note-editor-dialog { width: min(790px, calc(100% - 24px)); max-width: none; --note-editor-accent: #F6C453; border-color: color-mix(in srgb, var(--note-editor-accent) 34%, var(--line)); }
.library-note-editor-dialog .note-editor-form { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 8px 24px 20px; }
.library-note-editor-dialog .note-editor-form > label, .library-note-editor-dialog .note-appearance-grid label { display: grid; gap: 6px; color: color-mix(in srgb, var(--text) 78%, var(--muted)); font: 700 12px/1.3 Poppins, var(--ian-ui-font), Manrope, sans-serif; }
.library-note-editor-dialog .note-editor-form input, .library-note-editor-dialog .note-editor-form textarea, .library-note-editor-dialog .note-editor-form select { width: 100%; border: 1px solid color-mix(in srgb, var(--text) 22%, var(--line)); border-radius: 10px; background: var(--panel-2); color: var(--text); padding: 11px 13px; font: 13px/1.5 Inter, var(--ian-ui-font), sans-serif; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.library-note-editor-dialog .note-editor-form > label:first-of-type input { min-height: 46px; }
.library-note-editor-dialog .note-editor-form textarea { min-height: 250px; resize: vertical; }
.library-note-editor-dialog .note-editor-form input::placeholder, .library-note-editor-dialog .note-editor-form textarea::placeholder { color: color-mix(in srgb, var(--text) 52%, var(--muted)); opacity: 1; }
.library-note-editor-dialog .note-editor-form input:focus, .library-note-editor-dialog .note-editor-form textarea:focus, .library-note-editor-dialog .note-editor-form select:focus { border-color: var(--note-editor-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--note-editor-accent) 22%, transparent), 0 0 18px color-mix(in srgb, var(--note-editor-accent) 12%, transparent); background: color-mix(in srgb, var(--panel-2) 92%, var(--note-editor-accent)); }
.library-note-editor-dialog .note-editor-form input[aria-invalid="true"] { border-color: #ff9aa7; box-shadow: 0 0 0 3px color-mix(in srgb, #ff9aa7 18%, transparent); }
.library-note-editor-dialog .note-form-error { margin: -5px 0 0; color: #ffb6bd; font: 600 11px/1.35 Inter, var(--ian-ui-font), sans-serif; }
.library-note-editor-dialog .note-appearance { display: grid; gap: 11px; margin-top: 2px; padding: 13px; border: 1px solid color-mix(in srgb, var(--note-editor-accent) 34%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--note-editor-accent) 7%, var(--panel-2)); }
.note-appearance-heading { display: grid; gap: 3px; }
.note-appearance-heading strong { color: var(--text); font: 800 12px/1.25 Poppins, var(--ian-ui-font), Manrope, sans-serif; }
.note-appearance-heading small { color: var(--muted); font: 500 10px/1.35 Inter, var(--ian-ui-font), sans-serif; }
.note-color-options { display: flex; flex-wrap: wrap; gap: 6px; }
.note-color-swatch { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--muted); padding: 5px 8px 5px 5px; font: 600 9px/1 var(--ian-ui-font), Manrope, sans-serif; cursor: pointer; }
.note-color-swatch i { width: 16px; height: 16px; border: 2px solid #FFFFFF99; border-radius: 50%; background: var(--note-swatch); box-shadow: 0 0 0 1px #0005; }
.note-color-swatch:hover, .note-color-swatch:focus-visible, .note-color-swatch.selected { border-color: var(--note-swatch); color: var(--text); outline: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--note-swatch) 48%, transparent); }
.note-custom-color { display: inline-flex !important; grid-template-columns: auto auto !important; align-items: center; gap: 6px; width: auto !important; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); padding: 4px 6px 4px 9px; color: var(--muted) !important; font-size: 9px !important; }
.note-custom-color input { width: 25px; height: 25px; min-height: 25px; border: 0; border-radius: 50%; padding: 0; background: transparent; cursor: pointer; }
.note-appearance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.note-appearance-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.note-appearance-actions button { padding: 8px 10px; font-size: 10px; }
.library-note-editor-dialog .dialog-actions { border-top-color: color-mix(in srgb, var(--note-editor-accent) 28%, var(--line)); }
.library-note-editor-dialog .dialog-actions .primary-button { border: 1px solid color-mix(in srgb, var(--note-editor-accent) 78%, #FFFFFF); background: var(--note-editor-accent); color: #131c45; box-shadow: 0 8px 22px color-mix(in srgb, var(--note-editor-accent) 18%, transparent); }
.library-note-editor-dialog .dialog-actions .primary-button:hover, .library-note-editor-dialog .dialog-actions .primary-button:focus-visible { background: color-mix(in srgb, var(--note-editor-accent) 82%, #FFFFFF); border-color: var(--note-editor-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--note-editor-accent) 22%, transparent), 0 10px 26px color-mix(in srgb, var(--note-editor-accent) 24%, transparent); transform: translateY(-1px); }
.library-note-editor-dialog .dialog-actions .primary-button:active { transform: translateY(0); }
.library-note-editor-dialog .dialog-actions .primary-button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.library-note-editor-dialog .note-appearance-actions .secondary-button:hover, .library-note-editor-dialog .note-appearance-actions .secondary-button:focus-visible { border-color: var(--note-editor-accent); color: var(--note-editor-accent); outline: none; }
@media (max-width: 700px) {
  #view-notes .library-note-item { min-height: 296px; }
  #view-notes .library-note-open { padding-right: 42px; }
  #view-notes .library-note-controls .library-note-pin-action { width: 42px; min-width: 42px; height: 42px; min-height: 42px; }
  #view-notes .library-note-controls .library-favorite-action { top: 4px; right: 52px; }
  #view-notes .library-note-controls .library-like-action { top: 4px; right: 4px; }
  #view-notes .library-note-controls .library-item-delete { right: 4px; bottom: 11px; }
  #view-notes .library-note-menu { top: 52px; right: 4px; }
  #view-notes .library-note-menu > summary { width: 42px; min-width: 42px; height: 42px; min-height: 42px; }
  #view-notes .list-view .library-note-item { grid-template-columns: 1fr; min-height: 150px; }
  #view-notes .list-view .library-note-open { grid-template-columns: minmax(0, 125px) minmax(0, 1fr); align-items: center; justify-items: start; gap: 12px; padding-left: 34px; text-align: left; }
  #view-notes .list-view .library-note-paper { width: min(100%, 125px); min-height: 112px; padding: 16px 11px 12px; }
  #view-notes .list-view .library-note-copy { justify-items: start; text-align: left; }
  .library-note-editor-dialog .note-editor-form { padding-inline: 16px; }
  .library-note-editor-dialog .note-editor-form textarea { min-height: 190px; }
  .note-appearance-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #view-notes .library-note-paper { transition: none; }
}

/* Tablet: la orientación queda libre. La biblioteca reorganiza sus controles
   según el ancho disponible para que el giro vertical/horizontal no cree una
   versión paralela ni un desplazamiento horizontal. */
@media (min-width: 701px) and (max-width: 1100px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .app-shell, .main-content, #view-notes, #view-notes .notebooks-space { min-width: 0; }
  body.cuadernote-exclusive .main-content { padding-inline: clamp(20px, 4vw, 42px); }
  #view-notes .notebook-library-tools { grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(112px, .75fr)) auto; }
  #view-notes .notebooks-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
  #view-notes .library-note-item { min-height: 300px; }
  #view-notes .library-note-controls .library-note-pin-action,
  #view-notes .library-note-controls .library-favorite-action,
  #view-notes .library-note-controls .library-like-action,
  #view-notes .library-note-controls .library-item-delete,
  #view-notes .library-note-menu > summary { min-width: 42px; min-height: 42px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  #view-notes .notebook-library-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-notes .notebook-library-tools label:first-child,
  #view-notes .notebook-library-tools .notebook-view-switch { grid-column: 1 / -1; }
}

/* REF multimedia: estudio futurista para Imagen, Vídeo y Audio. Conserva
   la pantalla y los metadatos reales, pero sustituye la silueta de televisor
   por una consola visual con órbitas, señal y controles laterales. */
#view-notes .library-media-item {
  min-height: 344px;
  padding: 10px 4px 14px;
}
#view-notes .library-media-open {
  gap: 10px;
  padding: 16px 42px 0 4px;
}
#view-notes .library-media-open .media-studio {
  width: min(100%, 230px);
  margin: 0 auto;
}
.media-studio {
  position: relative;
  display: block;
  width: min(100%, 230px);
  aspect-ratio: 1.16;
  overflow: visible;
  isolation: isolate;
  color: var(--media-accent);
  filter: drop-shadow(0 12px 14px #0009) drop-shadow(0 0 10px color-mix(in srgb, var(--media-accent) 24%, transparent));
}
.media-studio .media-tv-antennas,
.media-studio .media-tv-legs {
  display: none !important;
}
.media-studio-orbit {
  position: absolute;
  z-index: 0;
  border: 1px solid color-mix(in srgb, var(--media-accent) 68%, #FFFFFF);
  border-radius: 50%;
  opacity: .72;
  pointer-events: none;
}
.media-studio-orbit-a {
  inset: 5% 4% 5%;
  transform: rotate(-12deg);
}
.media-studio-orbit-b {
  inset: 13% -1% 11%;
  border-style: dashed;
  opacity: .48;
  transform: rotate(17deg);
}
.media-studio-orbit::before,
.media-studio-orbit::after,
.media-studio-orbit i {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid var(--media-accent);
  border-radius: 50%;
  background: #131c45;
  box-shadow: 0 0 7px color-mix(in srgb, var(--media-accent) 74%, transparent);
  content: '';
}
.media-studio-orbit::before { top: 5%; left: 18%; }
.media-studio-orbit::after { right: 12%; bottom: 9%; }
.media-studio-orbit i:first-child { top: 32%; right: 1%; }
.media-studio-orbit i:nth-child(2) { bottom: 1%; left: 33%; }
.media-studio-orbit i:last-child { top: 16%; left: 4%; }
.media-studio-status {
  position: absolute;
  z-index: 3;
  top: 9%;
  left: 8%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 16%);
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--media-accent) 68%, #FFFFFF);
  border-radius: 999px;
  background: color-mix(in srgb, #131c45 82%, var(--media-accent));
  box-shadow: 0 0 9px color-mix(in srgb, var(--media-accent) 24%, transparent);
}
.media-studio-status i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--media-accent);
  box-shadow: 0 0 7px var(--media-accent);
}
.media-studio-status b {
  overflow: hidden;
  color: color-mix(in srgb, var(--media-accent) 70%, #FFFFFF);
  font: 800 7px/1 var(--ian-ui-font), Manrope, sans-serif;
  letter-spacing: .16em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-studio-device {
  position: absolute;
  z-index: 1;
  inset: 19% 1% 13%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 11px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--media-accent) 86%, #FFFFFF);
  border-radius: 25px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--media-accent) 35%, #0E1F17), #131c45 72%);
  box-shadow: inset 0 0 0 1px #FFFFFF2b, inset 0 -12px 25px #0008, 0 0 17px color-mix(in srgb, var(--media-accent) 30%, transparent);
  transform: perspective(480px) rotateX(2deg);
}
.media-studio-device::before {
  position: absolute;
  z-index: 0;
  inset: 1px;
  border-radius: 23px;
  background: repeating-linear-gradient(180deg, transparent 0 7px, color-mix(in srgb, var(--media-accent) 16%, transparent) 8px, transparent 9px);
  content: '';
  opacity: .34;
  pointer-events: none;
}
.media-studio-device::after {
  position: absolute;
  z-index: 0;
  right: 12%;
  bottom: 7px;
  left: 12%;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--media-accent), transparent);
  box-shadow: 0 0 8px var(--media-accent);
  content: '';
  opacity: .7;
}
.media-studio-screen {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--media-accent) 78%, #FFFFFF);
  border-radius: 16px;
  background: #131c45;
  box-shadow: inset 0 0 15px #000b, 0 0 8px color-mix(in srgb, var(--media-accent) 30%, transparent);
}
.media-studio-screen::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(120deg, #FFFFFF1b, transparent 32%, transparent 70%, color-mix(in srgb, var(--media-accent) 16%, transparent));
  content: '';
  pointer-events: none;
}
.media-studio-screen > img,
.media-studio-screen > video,
.media-studio-screen .media-tv-video-frame {
  position: relative;
  z-index: 1;
}
.media-studio-side-rail {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  min-width: 0;
}
.media-studio-side-rail::before {
  width: 17px;
  height: 3px;
  margin-bottom: 1px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--media-accent) 72%, #FFFFFF);
  box-shadow: 0 0 6px color-mix(in srgb, var(--media-accent) 45%, transparent);
  content: '';
}
.media-studio-side-rail i {
  width: 14px;
  height: 14px;
  border: 1px solid color-mix(in srgb, var(--media-accent) 80%, #FFFFFF);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFFaa 0 10%, color-mix(in srgb, var(--media-accent) 62%, #131c45) 34%, #131c45 72%);
  box-shadow: 0 0 7px color-mix(in srgb, var(--media-accent) 48%, transparent);
}
.media-studio-side-rail i:last-child {
  width: 19px;
  height: 3px;
  border: 0;
  border-radius: 99px;
  background: color-mix(in srgb, var(--media-accent) 78%, #FFFFFF);
}
.media-studio-signal {
  position: absolute;
  z-index: 2;
  right: 19%;
  bottom: 3%;
  left: 19%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  height: 14px;
  pointer-events: none;
}
.media-studio-signal i {
  width: 3px;
  height: 5px;
  border-radius: 99px;
  background: var(--media-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--media-accent) 70%, transparent);
}
.media-studio-signal i:nth-child(2),
.media-studio-signal i:nth-child(6) { height: 9px; }
.media-studio-signal i:nth-child(3),
.media-studio-signal i:nth-child(5) { height: 13px; }
.media-studio-signal i:nth-child(4) { height: 7px; }
.media-dialog-preview .media-studio { width: min(100%, 270px); }
@media (prefers-reduced-motion: reduce) {
  #view-notes .library-media-open .media-studio { transition: none; }
}
@media (max-width: 700px) {
  #view-notes .library-media-item { min-height: 330px; }
  #view-notes .library-media-open .media-studio { width: min(100%, 236px); }
  #view-notes .list-view .library-media-open .media-studio { width: min(100%, 132px); }
}

/* Biblioteca principal: composición inspirada en la referencia móvil, sin
   cambiar el asset oficial ni duplicar el sistema de creación. */
#view-notes .notebooks-space {
  --library-accent: #00FF66;
  gap: 17px;
  padding-bottom: 26px;
}
#view-notes .notebooks-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 2px 0 0;
}
#view-notes .notebook-identity {
  align-items: center;
  gap: 15px;
}
#view-notes .notebook-identity-icon.cuadernote-module-trigger {
  flex: 0 0 104px;
  width: 104px;
  height: 88px;
}
#view-notes .notebooks-hero h2 {
  margin-bottom: 4px;
  color: var(--text);
  font-size: clamp(25px, 4vw, 43px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.04;
}
#view-notes .notebooks-hero .eyebrow {
  margin-bottom: 7px;
  color: var(--library-accent);
  font-size: 10px;
  letter-spacing: .19em;
}
#view-notes .notebooks-hero p:not(.eyebrow) {
  color: color-mix(in srgb, var(--text) 68%, var(--muted));
  font-size: 14px;
  line-height: 1.35;
}
#view-notes .notebooks-hero-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
#view-notes .notebook-library-icon-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--text) 28%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--text);
  font: 400 30px/1 Manrope, sans-serif;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
#view-notes .notebook-library-icon-button:hover,
#view-notes .notebook-library-icon-button:focus-visible {
  border-color: var(--library-accent);
  background: color-mix(in srgb, var(--library-accent) 12%, var(--panel));
  color: var(--library-accent);
  outline: none;
  transform: translateY(-1px);
}
#view-notes .library-main-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 540px);
  min-height: 56px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--library-accent) 78%, #FFFFFF);
  border-radius: 19px;
  background: linear-gradient(105deg, #39F58A, #00FF66 52%, #00DFA7);
  color: #131c45;
  box-shadow: 0 10px 25px color-mix(in srgb, var(--library-accent) 18%, transparent), inset 0 1px #FFFFFF88;
  font: 800 16px/1.2 Poppins, var(--ian-ui-font), Manrope, sans-serif;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#view-notes .library-main-create:hover,
#view-notes .library-main-create:focus-visible {
  filter: saturate(1.1) brightness(1.04);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--library-accent) 24%, transparent), 0 13px 29px color-mix(in srgb, var(--library-accent) 25%, transparent), inset 0 1px #FFFFFFaa;
  transform: translateY(-2px);
}
#view-notes .library-main-create:active { transform: translateY(0) scale(.99); }
#view-notes .library-type-filter {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: 7px;
  padding: 6px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--library-accent) 18%, var(--line));
  border-radius: 18px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--library-accent) 7%, var(--panel)), color-mix(in srgb, var(--panel) 82%, transparent));
}
#view-notes .library-type-filter.is-expanded {
  width: 100%;
}
#view-notes .library-type-filter .library-filter-toggle,
#view-notes .library-type-filter .library-type-options button {
  min-height: 40px;
  border-color: color-mix(in srgb, var(--text) 24%, var(--line));
  background: transparent;
  color: color-mix(in srgb, var(--text) 70%, var(--muted));
  padding: 8px 13px;
  font-size: 11px;
  white-space: nowrap;
}
#view-notes .library-type-filter .library-filter-toggle {
  border-color: var(--library-accent);
  background: color-mix(in srgb, var(--library-accent) 16%, var(--panel));
  color: var(--library-accent);
}
#view-notes .library-type-filter .library-type-options {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
#view-notes .library-type-filter .library-type-options button[aria-pressed="true"] {
  border-color: var(--library-accent);
  background: color-mix(in srgb, var(--library-accent) 13%, var(--panel));
  color: var(--library-accent);
}
#view-notes .notebook-library-tools {
  grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(120px, .62fr)) auto;
  gap: 8px;
  margin: 0;
  padding: 0;
}
#view-notes .notebook-library-tools input,
#view-notes .notebook-library-tools select {
  min-height: 42px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel) 82%, #0E1F17);
}
#view-notes .notebook-library-tools label > span { margin-left: 3px; }
#view-notes .notebooks-summary {
  align-items: end;
  min-height: 18px;
  padding-inline: 2px;
  color: color-mix(in srgb, var(--text) 68%, var(--muted));
  font-size: 11px;
}
#view-notes .notebooks-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
#view-notes .notebooks-grid > .notebook-card-shell,
#view-notes .notebooks-grid > .library-item-card-shell:not(.library-note-item):not(.library-media-item) {
  min-height: 232px;
}
#view-notes .notebook-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  min-height: 232px;
  padding: 14px 56px 48px 14px;
  border: 1px solid color-mix(in srgb, var(--library-card-accent, var(--accent)) 48%, var(--line));
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--library-card-accent, var(--accent)) 12%, var(--panel)), color-mix(in srgb, #0E1F17 74%, var(--panel)));
  color: var(--text);
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#view-notes .notebook-card:hover,
#view-notes .notebook-card:focus-visible {
  border-color: var(--library-card-accent, var(--accent));
  box-shadow: 0 12px 27px color-mix(in srgb, var(--library-card-accent, var(--accent)) 14%, transparent);
  outline: none;
  transform: translateY(-2px);
}
#view-notes .notebook-cover-visual {
  width: 100%;
  height: 94px;
  flex: 0 0 auto;
  border-radius: 13px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--library-card-accent, var(--accent)) 24%, var(--panel-2)), var(--panel));
  color: var(--library-card-accent, var(--accent));
  font-size: 37px;
}
#view-notes .notebook-cover-visual img { border-radius: 12px; }
#view-notes .notebook-card-copy { width: 100%; gap: 5px; }
#view-notes .notebook-card-copy strong,
#view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-copy strong {
  font-size: 15px;
}
#view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  min-height: 232px;
  padding: 14px 56px 48px 14px;
  border-radius: 18px;
}
#view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-icon {
  width: 100%;
  height: 94px;
  flex: 0 0 auto;
  border-radius: 13px;
  font-size: 36px;
}
#view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-copy {
  width: 100%;
  gap: 5px;
}
#view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-card:hover,
#view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-card:focus-visible {
  transform: translateY(-2px);
}
#view-notes .notebooks-empty {
  grid-column: 1 / -1;
  min-height: 190px;
  border: 1px dashed color-mix(in srgb, var(--library-accent) 38%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 50%, transparent);
}
#view-notes .cuadernote-bottom-nav {
  position: sticky;
  bottom: 10px;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 650px);
  margin: 4px auto 0;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--library-accent) 22%, var(--line));
  border-radius: 19px;
  background: color-mix(in srgb, #131c45 88%, var(--panel));
  box-shadow: 0 14px 30px #0008;
  backdrop-filter: blur(16px);
}
#view-notes .cuadernote-bottom-nav button {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 50px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  padding: 7px 4px;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
#view-notes .cuadernote-bottom-nav button > span { font-size: 21px; line-height: 1; }
#view-notes .cuadernote-bottom-nav button > small { overflow: hidden; font: 600 9px/1.1 Inter, var(--ian-ui-font), sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#view-notes .cuadernote-bottom-nav button:hover,
#view-notes .cuadernote-bottom-nav button:focus-visible,
#view-notes .cuadernote-bottom-nav button.is-active {
  border-color: color-mix(in srgb, var(--library-accent) 58%, var(--line));
  background: color-mix(in srgb, var(--library-accent) 13%, transparent);
  color: var(--library-accent);
  outline: none;
  transform: translateY(-1px);
}
@media (max-width: 700px) {
  #view-notes .notebooks-space { gap: 14px; padding-bottom: 18px; }
  #view-notes .notebooks-hero { gap: 8px; }
  #view-notes .notebook-identity { gap: 9px; }
  #view-notes .notebook-identity-icon.cuadernote-module-trigger { flex-basis: 78px; width: 78px; height: 68px; }
  #view-notes .notebooks-hero h2 { font-size: clamp(22px, 7vw, 30px); }
  #view-notes .notebooks-hero p:not(.eyebrow) { font-size: 12px; }
  #view-notes .notebook-library-icon-button { width: 42px; height: 42px; font-size: 27px; }
  #view-notes .library-main-create { width: 100%; min-height: 52px; border-radius: 16px; font-size: 14px; }
  #view-notes .library-type-filter,
  #view-notes .library-type-filter.is-expanded { width: 100%; }
  #view-notes .library-type-filter.is-expanded { align-items: flex-start; }
  #view-notes .library-type-filter .library-type-options { align-content: center; }
  #view-notes .library-type-filter .library-type-options button { padding-inline: 10px; }
  #view-notes .notebook-library-tools { grid-template-columns: 1fr 1fr; }
  #view-notes .notebook-library-tools label:first-child,
  #view-notes .notebook-library-tools .notebook-view-switch { grid-column: 1 / -1; }
  #view-notes .notebooks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #view-notes .notebooks-grid > .notebook-card-shell,
  #view-notes .notebooks-grid > .library-item-card-shell:not(.library-note-item):not(.library-media-item) { min-height: 224px; }
  #view-notes .notebook-card,
  #view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-card { min-height: 224px; padding: 11px 45px 44px 11px; gap: 8px; border-radius: 15px; }
  #view-notes .notebook-cover-visual,
  #view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-icon { height: 83px; border-radius: 11px; font-size: 30px; }
  #view-notes .notebook-card-copy strong,
  #view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-copy strong { font-size: 13px; }
  #view-notes .notebook-card-copy small,
  #view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-copy small { font-size: 9px; }
  #view-notes .library-note-item { min-height: 246px; }
  #view-notes .library-note-open { padding-right: 38px; }
  #view-notes .library-note-paper { width: min(100%, 158px); min-height: 142px; padding: 16px 11px 12px; gap: 8px; }
  #view-notes .library-note-content { font-size: clamp(12px, 3.5vw, 16px); }
  #view-notes .library-media-item { min-height: 246px; }
  #view-notes .library-media-open { padding-right: 38px; }
  #view-notes .library-media-open .media-studio { width: min(100%, 158px); }
  #view-notes .library-media-copy strong { font-size: 13px; }
  #view-notes .library-media-copy .library-item-meta { font-size: 9px; }
  #view-notes .library-media-controls .library-item-delete { bottom: 48px; }
  #view-notes .cuadernote-bottom-nav { bottom: 6px; border-radius: 16px; }
  #view-notes .cuadernote-bottom-nav button { min-height: 48px; }
}
@media (max-width: 360px) {
  #view-notes .notebooks-hero h2 { font-size: 21px; }
  #view-notes .notebook-identity-icon.cuadernote-module-trigger { flex-basis: 68px; width: 68px; height: 60px; }
  #view-notes .library-type-filter .library-type-options button { padding-inline: 8px; font-size: 10px; }
  #view-notes .notebooks-grid { gap: 8px; }
  #view-notes .notebook-card,
  #view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-card { padding-inline: 8px; }
}

/* Reloj local en vivo: fichas de tablero sin incorporar la marca de la referencia. */
#view-notes .cuadernote-live-clock {
  display: grid;
  justify-items: center;
  gap: 9px;
  width: min(100%, 560px);
  margin-inline: auto;
  padding: 14px 12px;
  border: 1px solid color-mix(in srgb, var(--library-accent) 18%, var(--line));
  border-radius: 20px;
  background: linear-gradient(145deg, #1c2859, #151f49);
  box-shadow: 0 12px 25px #0004, inset 0 1px #ffffff14;
  color: #f5f8f7;
}
#view-notes .cuadernote-clock-copy { display: grid; justify-items: center; gap: 3px; text-align: center; }
#view-notes .cuadernote-clock-copy > span { color: var(--library-accent); font: 700 10px/1.2 Inter, sans-serif; letter-spacing: .17em; }
#view-notes .cuadernote-clock-copy time { font: 600 13px/1.3 Inter, sans-serif; }
#view-notes .cuadernote-clock-face { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; font-variant-numeric: tabular-nums; }
#view-notes .clock-pair { display: flex; gap: 3px; }
#view-notes .clock-digit {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(28px, 7.8vw, 42px);
  height: clamp(45px, 12vw, 64px);
  overflow: hidden;
  border: 1px solid #ffffff23;
  border-radius: 8px;
  background: linear-gradient(to bottom, #1d295c 49%, #10193f 50%, #192452 52%);
  box-shadow: inset 0 2px 2px #0008, 0 3px 7px #0008;
  font: 700 clamp(25px, 6.9vw, 40px)/1 Inter, sans-serif;
}
#view-notes .clock-digit::after { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: #ffffff38; content: ''; }
#view-notes .clock-colon { color: var(--library-accent); font: 700 clamp(20px, 5vw, 30px)/1 Inter, sans-serif; }
#view-notes .cuadernote-live-clock > small { color: var(--muted); font: 500 10px/1.3 Inter, sans-serif; }
@media (max-width: 360px) {
  #view-notes .cuadernote-live-clock { padding-inline: 7px; }
  #view-notes .cuadernote-clock-face { gap: 3px; }
  #view-notes .clock-pair { gap: 2px; }
}

/* CuaderNOTE 2026-09: reconstrucción visual desde las referencias oficiales
   conservadas en el Plan Maestro. Esta capa no altera la persistencia ni los
   flujos de edición; ordena la biblioteca para móvil y reutiliza su arte real. */
#view-notes,
#view-notes .notebooks-space { min-width: 0; max-width: 100%; overflow-x: clip; }
#view-notes .notebooks-space {
  width: min(100%, 1180px);
  margin-inline: auto;
  gap: 15px;
  padding: 4px 0 28px;
}
#view-notes .notebooks-hero {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--library-accent) 15%, var(--line));
  border-radius: 22px;
  background: linear-gradient(120deg, color-mix(in srgb, #121c44 87%, var(--panel)), color-mix(in srgb, var(--library-accent) 6%, var(--panel)));
  box-shadow: inset 0 1px color-mix(in srgb, #FFFFFF 7%, transparent), 0 14px 32px #0004;
}
#view-notes .notebook-identity { min-width: 0; gap: 12px; }
#view-notes .notebook-identity-icon.cuadernote-module-trigger {
  flex: 0 0 92px;
  width: 92px;
  height: 78px;
  overflow: hidden;
  border: 0;
  border-radius: 17px;
  background: transparent;
  box-shadow: none;
}
#view-notes .notebook-identity-icon .cuadernote-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 11px color-mix(in srgb, var(--library-accent) 30%, transparent));
}
#view-notes .cuadernote-brand-copy { display: grid; gap: 2px; min-width: 0; }
#view-notes .cuadernote-wordmark {
  display: block;
  margin: 0 0 2px;
  color: #F8FBFA;
  font: 800 clamp(22px, 3.5vw, 34px)/1 Poppins, var(--ian-ui-font), Manrope, sans-serif;
  letter-spacing: -.045em;
  white-space: nowrap;
}
#view-notes .cuadernote-wordmark b { color: var(--library-accent); font: inherit; text-shadow: 0 0 15px color-mix(in srgb, var(--library-accent) 52%, transparent); }
#view-notes .notebooks-hero h2 {
  margin: 0;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font: 600 clamp(14px, 2vw, 20px)/1.25 Inter, var(--ian-ui-font), sans-serif;
  letter-spacing: -.02em;
}
#view-notes .notebooks-hero .cuadernote-brand-copy > p:last-child { margin: 0; color: var(--muted); font: 500 11px/1.35 Inter, var(--ian-ui-font), sans-serif; }
#view-notes .notebook-library-icon-button { flex: 0 0 45px; width: 45px; height: 45px; font-size: 0; }
#view-notes .notebook-library-icon-button .ian-icon { width: 22px; height: 22px; }
#view-notes .library-main-create {
  gap: 10px;
  width: min(100%, 560px);
  min-height: 54px;
  border-radius: 18px;
}
#view-notes .library-create-plus {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}
#view-notes .library-create-plus .ian-icon { width: 17px; height: 17px; }
#view-notes .library-type-filter,
#view-notes .library-type-filter.is-expanded {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  gap: 7px;
  padding: 10px;
  overflow: visible;
  border-radius: 19px;
}
#view-notes .library-type-filter > button {
  flex: 0 1 auto;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--text) 24%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  padding: 8px 13px;
  font: 600 11px/1 Inter, var(--ian-ui-font), sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
#view-notes .library-type-filter > button[aria-pressed="true"] {
  border-color: var(--library-accent);
  background: color-mix(in srgb, var(--library-accent) 14%, var(--panel));
  color: var(--library-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--library-accent) 18%, transparent), 0 0 18px color-mix(in srgb, var(--library-accent) 12%, transparent);
}
#view-notes .notebook-library-tools[hidden] { display: none !important; }
#view-notes .notebook-library-tools.is-open {
  display: grid;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--library-accent) 17%, var(--line));
  border-radius: 17px;
  background: color-mix(in srgb, var(--panel) 86%, #121c44);
  box-shadow: inset 0 1px color-mix(in srgb, #FFFFFF 5%, transparent);
  animation: ian-enter .2s ease both;
}
#view-notes .notebooks-grid {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  align-items: stretch;
  gap: 13px;
}
#view-notes .notebook-card-shell,
#view-notes .library-item-card-shell { min-width: 0; }
#view-notes .notebooks-grid > .notebook-card-shell,
#view-notes .notebooks-grid > .library-item-card-shell:not(.library-note-item):not(.library-media-item) { min-height: 252px; }
#view-notes .notebook-card,
#view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-card {
  min-height: 252px;
  padding: 12px 12px 54px;
  border-radius: 18px;
}
#view-notes .notebook-cover-visual,
#view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-icon {
  position: relative;
  width: 100%;
  height: 128px;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background-color: #111a41;
}
#view-notes .notebook-cover-personal-mark {
  position: absolute;
  top: 7px;
  left: 7px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--library-accent) 70%, #FFFFFF);
  border-radius: 8px;
  background: color-mix(in srgb, #121c44 84%, transparent);
  color: var(--library-accent);
  font-size: 15px !important;
  line-height: 1;
  box-shadow: 0 4px 12px #0007;
}
#view-notes .official-reference-art,
.library-create-menu-dialog .official-reference-art {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #111a41;
  background-repeat: no-repeat;
  filter: saturate(1.04) contrast(1.02);
}
#view-notes .official-reference-art-notebook,
.library-create-menu-dialog .official-reference-art-notebook {
  background-image: url('./assets/cuadernote/references/official-notebook.jpg');
  background-position: 5% 46%;
  background-size: 190% auto;
}
#view-notes .official-reference-art-note,
.library-create-menu-dialog .official-reference-art-note {
  background-image: url('./assets/cuadernote/references/official-note.jpg');
  background-position: 4% 45%;
  background-size: 190% auto;
}
#view-notes .official-reference-art-multimedia,
.library-create-menu-dialog .official-reference-art-multimedia {
  background-image: url('./assets/cuadernote/references/official-multimedia.jpg');
  background-position: 4% 48%;
  background-size: 190% auto;
}
#view-notes .official-reference-art-file,
.library-create-menu-dialog .official-reference-art-file {
  background-image: url('./assets/cuadernote/references/official-files.jpg');
  background-position: 4% 47%;
  background-size: 190% auto;
}
#view-notes .official-reference-art-reminder,
#view-notes .official-reference-art-link,
.library-create-menu-dialog .official-reference-art-reminder,
.library-create-menu-dialog .official-reference-art-link {
  background-image: url('./assets/cuadernote/references/official-library-interface.jpg');
  background-size: 370% auto;
}
#view-notes .official-reference-art-reminder,
.library-create-menu-dialog .official-reference-art-reminder { background-position: 57% 66%; }
#view-notes .official-reference-art-link,
.library-create-menu-dialog .official-reference-art-link { background-position: 96% 66%; }
#view-notes .notebook-card-copy { justify-items: start; text-align: left; }
#view-notes .notebook-card-copy { gap: 4px; }
#view-notes .notebook-card-copy strong,
#view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-copy strong {
  color: var(--text);
  font: 750 14px/1.25 Poppins, var(--ian-ui-font), Manrope, sans-serif;
}
#view-notes .notebook-card-kind,
#view-notes .library-item-kind { letter-spacing: .08em; }
#view-notes .notebook-card-copy .notebook-card-meta { display: grid; gap: 2px; }

/* Las acciones forman una barra propia como en la referencia; dejan de cubrir
   títulos, fechas e ilustraciones cuando la tarjeta se estrecha. */
#view-notes .library-context-actions,
#view-notes .notebook-context-actions,
#view-notes .library-note-controls,
#view-notes .library-media-controls {
  position: absolute;
  inset: auto 9px 9px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 34px;
  pointer-events: none;
}
#view-notes .library-context-actions > * { pointer-events: auto; }
#view-notes .library-context-actions .library-favorite-action,
#view-notes .library-context-actions .library-like-action,
#view-notes .library-context-actions .library-note-pin-action,
#view-notes .library-context-actions .trash-action,
#view-notes .notebook-context-actions .notebook-card-menu,
#view-notes .library-note-menu,
#view-notes .library-media-menu {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto;
  transform: none !important;
}
#view-notes .library-context-actions .library-favorite-action,
#view-notes .library-context-actions .library-like-action,
#view-notes .library-context-actions .library-note-pin-action,
#view-notes .library-context-actions .trash-action,
#view-notes .notebook-context-actions .notebook-card-menu > summary,
#view-notes .library-note-menu > summary,
#view-notes .library-media-menu > summary {
  display: grid;
  place-items: center;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 9px !important;
  padding: 0 !important;
  font-size: 17px;
}
#view-notes .library-context-actions .trash-action { margin-left: auto; }
#view-notes .library-context-actions .trash-action .ian-icon { width: 18px; height: 18px; }
#view-notes .notebook-card-actions,
#view-notes .library-note-menu > div,
#view-notes .library-media-menu > div {
  top: auto !important;
  right: 0 !important;
  bottom: 38px !important;
}
#view-notes .library-note-open,
#view-notes .library-media-open { min-height: 270px; padding: 12px 12px 54px; }
#view-notes .library-note-item,
#view-notes .library-media-item { min-height: 270px; }
#view-notes .cuadernote-library-motto {
  margin: 2px 0 0;
  color: color-mix(in srgb, var(--text) 46%, var(--muted));
  font: 500 11px/1.4 Georgia, serif;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
}
#view-notes .cuadernote-library-motto::after { content: ''; display: block; width: 38px; height: 2px; margin: 8px auto 0; border-radius: 99px; background: var(--library-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--library-accent) 45%, transparent); }
#view-notes .cuadernote-bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 680px);
  padding: 7px;
}
#view-notes .cuadernote-bottom-nav button > span { display: grid; place-items: center; min-height: 22px; }
#view-notes .cuadernote-bottom-nav .ian-icon { width: 22px; height: 22px; }
#view-notes .cuadernote-bottom-nav button[data-library-open-statistics] .ian-icon { width: 23px; height: 23px; }
#view-notes .cuadernote-bottom-nav .cuadernote-nav-create {
  position: relative;
  margin-top: -24px;
  min-height: 66px;
  border: 1px solid var(--library-accent);
  border-radius: 50%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--library-accent) 18%, #121c44), #121c44);
  color: var(--library-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, #121c44 92%, transparent), 0 0 22px color-mix(in srgb, var(--library-accent) 48%, transparent);
}
#view-notes .cuadernote-bottom-nav .cuadernote-nav-create > span { font-size: 34px; font-weight: 300; }
#view-notes .cuadernote-bottom-nav .cuadernote-nav-create > small { position: absolute; bottom: -17px; color: var(--muted); }

/* Navegación móvil de CuaderNOTE: conserva los cinco destinos, con el acceso
   activo elevado para que se distinga como en la referencia compartida. */
#view-notes .cuadernote-bottom-nav {
  bottom: 16px;
  align-items: end;
  min-height: 82px;
  width: min(100%, 620px);
  gap: 2px;
  padding: 12px 8px 9px;
  overflow: visible;
  border: 0;
  border-radius: 26px;
  background: #f9fbff;
  box-shadow: 0 15px 34px #02070f99, inset 0 0 0 1px #d9e0e9;
  backdrop-filter: none;
}
#view-notes .cuadernote-bottom-nav button {
  position: relative;
  z-index: 1;
  min-height: 54px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #606b78;
  padding: 6px 3px;
}
#view-notes .cuadernote-bottom-nav button > span { min-height: 24px; font-size: 23px; }
#view-notes .cuadernote-bottom-nav .ian-icon { width: 24px; height: 24px; }
#view-notes .cuadernote-bottom-nav button > small { color: inherit; font-size: 10px; font-weight: 700; }
#view-notes .cuadernote-bottom-nav button:hover,
#view-notes .cuadernote-bottom-nav button:focus-visible {
  border: 0;
  background: #edf4f0;
  color: #1e6c48;
  outline: 2px solid color-mix(in srgb, var(--library-accent) 60%, transparent);
  outline-offset: 2px;
  transform: none;
}
#view-notes .cuadernote-bottom-nav button.is-active {
  z-index: 2;
  align-self: start;
  width: 84px;
  min-height: 84px;
  margin: -43px auto 0;
  border: 5px solid var(--library-accent);
  border-radius: 50%;
  background: #ffffff;
  color: var(--library-accent);
  box-shadow: 0 0 0 5px #f9fbff, 0 12px 26px color-mix(in srgb, var(--library-accent) 32%, transparent);
  transform: none;
}
#view-notes .cuadernote-bottom-nav button.is-active > span { min-height: 27px; font-size: 27px; }
#view-notes .cuadernote-bottom-nav button.is-active > small { font-size: 10px; }
#view-notes .cuadernote-bottom-nav .cuadernote-nav-create {
  position: relative;
  width: auto;
  min-height: 54px;
  margin: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #606b78;
  box-shadow: none;
}
#view-notes .cuadernote-bottom-nav .cuadernote-nav-create > span { font-size: 25px; font-weight: 400; }
#view-notes .cuadernote-bottom-nav .cuadernote-nav-create > small { position: static; color: inherit; }
#view-notes .cuadernote-bottom-nav .bottom-nav-icon-shell {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  min-height: 31px;
  border: 1px solid #d8e0e7;
  border-radius: 10px;
  background: linear-gradient(145deg, #ffffff, #e8edf2);
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #cbd4de, 0 3px 5px #23324322;
}
#view-notes .cuadernote-bottom-nav .bottom-nav-icon-shell .ian-icon { width: 19px; height: 19px; }
#view-notes .cuadernote-bottom-nav button.is-active .bottom-nav-icon-shell {
  width: 37px;
  height: 37px;
  min-height: 37px;
  border-color: color-mix(in srgb, var(--library-accent) 44%, #c8e8d5);
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, #e4f7ea);
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #c9ead7, 0 4px 8px color-mix(in srgb, var(--library-accent) 22%, transparent);
}
#view-notes .cuadernote-bottom-nav button.is-active .bottom-nav-icon-shell .ian-icon { width: 23px; height: 23px; }
#view-notes .cuadernote-bottom-nav button:hover .bottom-nav-icon-shell,
#view-notes .cuadernote-bottom-nav button:focus-visible .bottom-nav-icon-shell { border-color: color-mix(in srgb, var(--library-accent) 56%, #c8e8d5); }

@media (max-width: 420px) {
  #view-notes .cuadernote-bottom-nav { bottom: 9px; min-height: 76px; padding: 10px 4px 7px; border-radius: 22px; }
  #view-notes .cuadernote-bottom-nav button { min-height: 51px; padding-inline: 1px; }
  #view-notes .cuadernote-bottom-nav button > small { font-size: 9px; }
  #view-notes .cuadernote-bottom-nav button.is-active { width: 76px; min-height: 76px; margin-top: -37px; border-width: 4px; }
  #view-notes .cuadernote-bottom-nav button.is-active > span { min-height: 25px; font-size: 25px; }
  #view-notes .cuadernote-bottom-nav .bottom-nav-icon-shell { width: 28px; height: 28px; min-height: 28px; border-radius: 9px; }
  #view-notes .cuadernote-bottom-nav button.is-active .bottom-nav-icon-shell { width: 34px; height: 34px; min-height: 34px; }
}

@media (max-width: 700px) {
  #view-notes .notebooks-space { gap: 13px; padding-bottom: 22px; }
  #view-notes .notebooks-hero { padding: 9px; border-radius: 18px; }
  #view-notes .notebook-identity { gap: 8px; }
  #view-notes .notebook-identity-icon.cuadernote-module-trigger { flex-basis: 74px; width: 74px; height: 66px; }
  #view-notes .cuadernote-wordmark { font-size: clamp(20px, 6.4vw, 25px); }
  #view-notes .notebooks-hero h2 { font-size: 13px; }
  #view-notes .notebooks-hero .cuadernote-brand-copy > p:last-child { font-size: 10px; }
  #view-notes .notebook-library-icon-button { flex-basis: 40px; width: 40px; height: 40px; }
  #view-notes .library-main-create { min-height: 51px; font-size: 14px; }
  #view-notes .library-create-plus { width: 27px; height: 27px; font-size: 18px; }
  #view-notes .library-type-filter { justify-content: flex-start; gap: 6px; padding: 9px; }
  #view-notes .library-type-filter > button { min-height: 35px; padding: 7px 10px; font-size: 10px; }
  #view-notes .notebook-library-tools.is-open { grid-template-columns: 1fr 1fr; padding: 10px; }
  #view-notes .notebooks-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
  #view-notes .notebooks-grid > .notebook-card-shell,
  #view-notes .notebooks-grid > .library-item-card-shell:not(.library-note-item):not(.library-media-item),
  #view-notes .notebook-card,
  #view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-card { min-height: 238px; }
  #view-notes .notebook-card,
  #view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-card { padding: 9px 9px 51px; gap: 7px; }
  #view-notes .notebook-cover-visual,
  #view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-icon { height: 118px; }
  #view-notes .notebook-card-copy strong,
  #view-notes .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-copy strong { font-size: 13px; }
  #view-notes .library-context-actions,
  #view-notes .notebook-context-actions,
  #view-notes .library-note-controls,
  #view-notes .library-media-controls { inset: auto 7px 7px; gap: 4px; }
  #view-notes .library-context-actions .library-favorite-action,
  #view-notes .library-context-actions .library-like-action,
  #view-notes .library-context-actions .library-note-pin-action,
  #view-notes .library-context-actions .trash-action,
  #view-notes .notebook-context-actions .notebook-card-menu > summary,
  #view-notes .library-note-menu > summary,
  #view-notes .library-media-menu > summary { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; }
  #view-notes .library-note-item,
  #view-notes .library-media-item,
  #view-notes .library-note-open,
  #view-notes .library-media-open { min-height: 258px; }
  #view-notes .library-note-open,
  #view-notes .library-media-open { padding: 9px 9px 51px; }
  #view-notes .cuadernote-bottom-nav { bottom: 5px; padding: 6px 4px 8px; }
  #view-notes .cuadernote-bottom-nav button { min-height: 47px; padding-inline: 2px; }
  #view-notes .cuadernote-bottom-nav .cuadernote-nav-create { min-height: 60px; margin: -21px 2px 0; }
}

@media (max-width: 360px) {
  #view-notes .notebook-identity-icon.cuadernote-module-trigger { flex-basis: 62px; width: 62px; height: 58px; }
  #view-notes .cuadernote-wordmark { font-size: 19px; }
  #view-notes .notebooks-hero h2 { font-size: 11px; }
  #view-notes .notebooks-hero .cuadernote-brand-copy > p:last-child { font-size: 9px; }
  #view-notes .notebook-library-icon-button { flex-basis: 36px; width: 36px; height: 36px; }
  #view-notes .notebooks-grid { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 8px; }
  #view-notes .library-type-filter > button { padding-inline: 8px; }
}

/* Ubicación solicitada: reloj dentro del encabezado, junto al texto. */
#view-notes .notebooks-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px) auto;
  align-items: center;
  gap: 12px;
}
#view-notes .notebooks-hero .cuadernote-live-clock {
  min-width: 0;
  width: 100%;
  margin: 0;
  gap: 3px;
  padding: 7px 9px;
  border-radius: 14px;
  box-shadow: inset 0 1px #ffffff14;
}
#view-notes .notebooks-hero .cuadernote-clock-copy { gap: 0; }
#view-notes .notebooks-hero .cuadernote-clock-copy > span { font-size: 8px; }
#view-notes .notebooks-hero .cuadernote-clock-copy time { font-size: 10px; }
#view-notes .notebooks-hero .cuadernote-clock-face { gap: 3px; }
#view-notes .notebooks-hero .clock-pair { gap: 2px; }
#view-notes .notebooks-hero .clock-digit { width: 29px; height: 39px; font-size: 25px; }
#view-notes .notebooks-hero .clock-colon { font-size: 19px; }
#view-notes .notebooks-hero .cuadernote-live-clock > small { font-size: 8px; }
@media (max-width: 700px) {
  #view-notes .notebooks-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  #view-notes .notebooks-hero .notebook-identity { grid-column: 1; grid-row: 1; }
  #view-notes .notebooks-hero .notebooks-hero-actions { grid-column: 2; grid-row: 1; }
  #view-notes .notebooks-hero .cuadernote-live-clock {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 340px);
  }
}

/* Fecha numérica visible y reloj elevado al borde superior. */
#view-notes .notebooks-hero .cuadernote-live-clock {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  margin-top: -5px;
}
#view-notes .notebooks-hero .cuadernote-clock-face {
  grid-column: 1;
  grid-row: 1;
}
#view-notes .notebooks-hero .compact-clock-date {
  grid-column: 1;
  grid-row: 2;
  display: block;
  margin-top: -1px;
  color: #a9b4ad;
  font: 700 8px/1.1 "Courier New", Consolas, monospace;
  letter-spacing: .12em;
  text-align: center;
}
#view-notes .notebooks-hero .clock-functions {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}
@media (max-width: 700px) {
  #view-notes .notebooks-hero .cuadernote-live-clock { margin-top: 0; }
}

/* Reloj CuaderNOTE: acabado de cristal verde coherente con la identidad. */
#view-notes .notebooks-hero .cuadernote-live-clock {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--library-accent) 34%, #17352a);
  background:
    radial-gradient(circle at 50% -35%, color-mix(in srgb, var(--library-accent) 18%, transparent), transparent 58%),
    linear-gradient(145deg, #071710 0%, #121b42 52%, #0e173b 100%);
  box-shadow:
    inset 0 1px color-mix(in srgb, #ffffff 9%, transparent),
    inset 0 -1px color-mix(in srgb, var(--library-accent) 8%, transparent),
    0 8px 20px #0005,
    0 0 18px color-mix(in srgb, var(--library-accent) 7%, transparent);
}
#view-notes .notebooks-hero .cuadernote-live-clock::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 20%;
  left: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--library-accent), transparent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--library-accent) 55%, transparent);
  content: '';
}
#view-notes .notebooks-hero .cuadernote-clock-copy > span {
  color: color-mix(in srgb, var(--library-accent) 82%, #ffffff);
  font-weight: 800;
  letter-spacing: .2em;
  text-shadow: 0 0 10px color-mix(in srgb, var(--library-accent) 35%, transparent);
}
#view-notes .notebooks-hero .cuadernote-clock-copy time {
  color: #f3fff7;
  font-weight: 650;
  letter-spacing: -.01em;
}
#view-notes .notebooks-hero .clock-digit {
  border-color: color-mix(in srgb, var(--library-accent) 17%, #26362f);
  background:
    linear-gradient(to bottom, #14271f 0%, #141e47 48.5%, #0d1538 49%, #121b43 52%, #16214d 100%);
  box-shadow:
    inset 0 1px #ffffff12,
    inset 0 -8px 16px #0005,
    0 3px 7px #0008;
  color: #f4fff8;
  text-shadow: 0 0 7px color-mix(in srgb, var(--library-accent) 15%, transparent);
}
#view-notes .notebooks-hero .clock-digit::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--library-accent) 28%, #ffffff), transparent);
}
#view-notes .notebooks-hero .clock-colon {
  color: var(--library-accent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--library-accent) 68%, transparent);
}
#view-notes .notebooks-hero .cuadernote-live-clock > small {
  color: color-mix(in srgb, var(--text) 46%, var(--muted));
  letter-spacing: .015em;
}

/* Reloj digital configurable: hora, cronómetro, idioma y colores por unidad. */
#view-notes .notebooks-hero {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 480px) auto;
}
#view-notes .notebooks-hero .cuadernote-live-clock {
  --clock-hours: #59ff70;
  --clock-minutes: #59ff70;
  --clock-seconds: #59ff70;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #244b32;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% -50%, #143b20 0%, transparent 52%),
    linear-gradient(155deg, #0e163a 0%, #0c1335 58%, #111a41 100%);
  box-shadow: inset 0 0 0 1px #ffffff08, inset 0 -14px 28px #0008, 0 9px 24px #0007;
}
#view-notes .notebooks-hero .cuadernote-live-clock::before {
  right: 8%;
  left: 8%;
  background: linear-gradient(90deg, transparent, #59ff70, transparent);
  opacity: .72;
}
#view-notes .clock-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 230px);
}
#view-notes .clock-mode-switch button,
#view-notes .stopwatch-actions button {
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid #26402e;
  border-radius: 7px;
  background: #111a41;
  color: #a5afa8;
  font: 700 9px/1.1 var(--ian-ui-font), Manrope, sans-serif;
  cursor: pointer;
}
#view-notes .clock-mode-switch button[aria-pressed="true"],
#view-notes .stopwatch-actions button:first-child {
  border-color: color-mix(in srgb, var(--library-accent) 65%, #26402e);
  background: color-mix(in srgb, var(--library-accent) 12%, #111a41);
  color: #f0fff4;
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--library-accent) 10%, transparent);
}
#view-notes .notebooks-hero .cuadernote-clock-face {
  display: flex;
  gap: 3px;
  width: 100%;
  padding: 5px 7px;
  border: 1px solid #1a2555;
  border-radius: 8px;
  background: #0c1436;
  box-shadow: inset 0 3px 9px #0b1233, 0 1px #ffffff0a;
}
#view-notes .notebooks-hero .clock-pair { gap: 2px; }
#view-notes .notebooks-hero .clock-digit {
  width: clamp(18px, 3.1vw, 27px);
  height: clamp(33px, 5vw, 44px);
  border-color: #1b2a1e;
  border-radius: 4px;
  background: linear-gradient(180deg, #151f4a 0%, #0e163a 49%, #0b1233 50%, #121b43 100%);
  font-family: "Courier New", Consolas, monospace;
  font-size: clamp(23px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -.12em;
  text-indent: -.12em;
}
#view-notes .notebooks-hero .clock-hours .clock-digit {
  color: var(--clock-hours);
  text-shadow: 0 0 7px color-mix(in srgb, var(--clock-hours) 58%, transparent);
}
#view-notes .notebooks-hero .clock-minutes .clock-digit {
  color: var(--clock-minutes);
  text-shadow: 0 0 7px color-mix(in srgb, var(--clock-minutes) 58%, transparent);
}
#view-notes .notebooks-hero .clock-seconds .clock-digit {
  color: var(--clock-seconds);
  text-shadow: 0 0 7px color-mix(in srgb, var(--clock-seconds) 58%, transparent);
}
#view-notes .notebooks-hero .clock-colon {
  color: #58ff75;
  font: 800 clamp(16px, 2.5vw, 24px)/1 "Courier New", monospace;
  text-shadow: 0 0 8px #59ff7088;
}
#view-notes .stopwatch-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
}
#view-notes .stopwatch-actions[hidden] { display: none; }
#view-notes .clock-customizer {
  width: 100%;
  border-top: 1px solid #17301f;
  padding-top: 5px;
}
#view-notes .clock-customizer > summary {
  width: max-content;
  margin-inline: auto;
  color: #9fafaa;
  font: 700 9px/1.2 var(--ian-ui-font), Manrope, sans-serif;
  cursor: pointer;
  list-style-position: inside;
}
#view-notes .clock-customizer-grid {
  display: grid;
  gap: 7px;
  padding-top: 8px;
}
#view-notes .clock-language-control,
#view-notes .clock-color-control {
  display: grid;
  gap: 3px;
  color: #9ba7a0;
  font: 650 8px/1.2 var(--ian-ui-font), Manrope, sans-serif;
}
#view-notes .clock-language-control select {
  width: 100%;
  min-height: 29px;
  border: 1px solid #294432;
  border-radius: 7px;
  background: #111a41;
  color: #effff3;
  padding-inline: 8px;
  font: 600 10px/1 var(--ian-ui-font), Manrope, sans-serif;
}
#view-notes .clock-color-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
#view-notes .clock-color-control input {
  width: 100%;
  height: 27px;
  padding: 2px;
  border: 1px solid #294432;
  border-radius: 6px;
  background: #111a41;
  cursor: pointer;
}
@media (max-width: 980px) {
  #view-notes .notebooks-hero { grid-template-columns: minmax(0, 1fr) auto; }
  #view-notes .notebooks-hero .notebook-identity { grid-column: 1; grid-row: 1; }
  #view-notes .notebooks-hero .notebooks-hero-actions { grid-column: 2; grid-row: 1; }
  #view-notes .notebooks-hero .cuadernote-live-clock {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 480px);
  }
}
@media (max-width: 420px) {
  #view-notes .notebooks-hero .cuadernote-live-clock { padding: 9px 6px; }
  #view-notes .notebooks-hero .cuadernote-clock-face { gap: 2px; padding-inline: 4px; }
  #view-notes .clock-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Reloj compacto: la pantalla permanece visible y las funciones se abren
   temporalmente desde un único botón. */
#view-notes .notebooks-hero {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px) auto;
}
#view-notes .notebooks-hero .cuadernote-live-clock {
  z-index: 12;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  width: min(100%, 320px);
  padding: 5px;
  overflow: visible;
  border-radius: 10px;
}
#view-notes .notebooks-hero .cuadernote-live-clock::before { display: none; }
#view-notes .notebooks-hero .cuadernote-clock-face {
  gap: 2px;
  min-width: 0;
  padding: 3px 4px;
  border-radius: 6px;
}
#view-notes .notebooks-hero .clock-pair { gap: 1px; }
#view-notes .notebooks-hero .clock-digit {
  width: clamp(15px, 2vw, 20px);
  height: clamp(25px, 3vw, 31px);
  border-radius: 3px;
  font-size: clamp(18px, 2.5vw, 24px);
}
#view-notes .notebooks-hero .clock-colon { font-size: clamp(13px, 1.8vw, 18px); }
#view-notes .clock-functions {
  position: relative;
  flex: 0 0 auto;
}
#view-notes .clock-functions > summary {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #294432;
  border-radius: 8px;
  background: #111a41;
  color: var(--library-accent);
  cursor: pointer;
  list-style: none;
  box-shadow: inset 0 1px #ffffff0d;
}
#view-notes .clock-functions > summary::-webkit-details-marker { display: none; }
#view-notes .clock-functions > summary span { font-size: 18px; line-height: 1; }
#view-notes .clock-functions > summary small { display: none; }
#view-notes .clock-functions[open] > summary,
#view-notes .clock-functions > summary:hover,
#view-notes .clock-functions > summary:focus-visible {
  border-color: var(--library-accent);
  background: color-mix(in srgb, var(--library-accent) 12%, #111a41);
  outline: none;
  box-shadow: 0 0 12px color-mix(in srgb, var(--library-accent) 20%, transparent);
}
#view-notes .clock-functions-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  justify-items: stretch;
  gap: 8px;
  width: min(360px, calc(100vw - 30px));
  padding: 12px;
  border: 1px solid #285039;
  border-radius: 12px;
  background: linear-gradient(155deg, #111a41, #0c1436 70%);
  box-shadow: 0 18px 40px #000c, inset 0 1px #ffffff0c;
}
#view-notes .clock-functions:not([open]) > .clock-functions-panel { display: none; }
#view-notes .clock-functions-panel .cuadernote-clock-copy { gap: 2px; }
#view-notes .clock-functions-panel .cuadernote-clock-copy > span { font-size: 8px; }
#view-notes .clock-functions-panel .cuadernote-clock-copy time { font-size: 11px; }
#view-notes .clock-functions-panel > small {
  color: #8e9a93;
  font: 500 8px/1.3 var(--ian-ui-font), Manrope, sans-serif;
  text-align: center;
}
#view-notes .clock-functions-panel .clock-mode-switch { width: 100%; }
#view-notes .clock-functions-panel .clock-customizer-grid {
  padding-top: 8px;
  border-top: 1px solid #17301f;
}
#view-notes .clock-color-confirm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 31px;
}
#view-notes .clock-color-confirm p {
  min-width: 0;
  margin: 0;
  color: #8d9991;
  font: 650 9px/1.25 var(--ian-ui-font), Manrope, sans-serif;
}
#view-notes .clock-color-confirm p[data-tone="ready"] { color: #ffd978; }
#view-notes .clock-color-confirm p[data-tone="applied"] { color: var(--library-accent); }
#view-notes .clock-color-confirm button {
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid var(--library-accent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--library-accent) 18%, #111a41);
  color: #effff3;
  font: 800 9px/1.1 var(--ian-ui-font), Manrope, sans-serif;
  cursor: pointer;
  box-shadow: 0 0 10px color-mix(in srgb, var(--library-accent) 16%, transparent);
}
#view-notes .clock-color-confirm button:disabled {
  border-color: #294432;
  background: #111a41;
  color: #667169;
  cursor: not-allowed;
  box-shadow: none;
}
@media (max-width: 980px) {
  #view-notes .notebooks-hero .cuadernote-live-clock {
    justify-self: end;
    width: min(100%, 320px);
  }
}
@media (max-width: 420px) {
  #view-notes .notebooks-hero .cuadernote-live-clock {
    width: min(100%, 292px);
    padding: 4px;
  }
  #view-notes .notebooks-hero .clock-digit { width: 15px; height: 25px; font-size: 18px; }
  #view-notes .clock-functions > summary { width: 33px; height: 33px; }
  #view-notes .clock-functions-panel { right: -2px; }
  #view-notes .clock-color-confirm { grid-template-columns: 1fr; }
  #view-notes .clock-color-confirm button { width: 100%; }
}

/* Reloj final discreto: HH:MM:SS en la esquina superior derecha. */
#view-notes .notebooks-hero {
  grid-template-columns: minmax(0, 1fr) auto 205px;
  align-items: start;
}
#view-notes .notebooks-hero .notebook-identity { grid-column: 1; grid-row: 1; }
#view-notes .notebooks-hero .notebooks-hero-actions { grid-column: 2; grid-row: 1; align-self: center; }
#view-notes .notebooks-hero .cuadernote-live-clock {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 205px;
  padding: 3px;
  border-color: #173322;
  border-radius: 7px;
  background: #0d1537;
  box-shadow: none;
}
#view-notes .notebooks-hero .cuadernote-clock-face {
  min-height: 29px;
  padding: 2px 5px;
  border: 0;
  border-radius: 4px;
  background: #0b1233;
  box-shadow: inset 0 0 0 1px #16214d;
}
#view-notes .notebooks-hero .clock-digit {
  width: 15px;
  height: 23px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 19px;
  font-weight: 700;
  text-shadow: 0 0 3px currentColor;
}
#view-notes .notebooks-hero .clock-digit::after { display: none; }
#view-notes .notebooks-hero .clock-colon {
  color: #53ed6c;
  font-size: 15px;
  text-shadow: none;
}
#view-notes .clock-functions > summary {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  box-shadow: none;
}
#view-notes .clock-functions > summary span { font-size: 15px; }
#view-notes .clock-color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 701px) and (max-width: 980px) {
  #view-notes .notebooks-hero {
    grid-template-columns: minmax(0, 1fr) auto 205px;
  }
  #view-notes .notebooks-hero .notebook-identity { grid-column: 1; grid-row: 1; }
  #view-notes .notebooks-hero .notebooks-hero-actions { grid-column: 2; grid-row: 1; }
  #view-notes .notebooks-hero .cuadernote-live-clock {
    grid-column: 3;
    grid-row: 1;
    width: 205px;
  }
}
@media (max-width: 700px) {
  #view-notes .notebooks-hero { grid-template-columns: minmax(0, 1fr) auto; }
  #view-notes .notebooks-hero .notebook-identity { grid-column: 1; grid-row: 1; }
  #view-notes .notebooks-hero .notebooks-hero-actions { grid-column: 2; grid-row: 1; }
  #view-notes .notebooks-hero .cuadernote-live-clock {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 205px;
    justify-self: end;
  }
}

/* Reloj reposicionable dentro del encabezado. Los tres elementos del hero se
   colocan en zonas independientes calculadas por JS para impedir solapamientos. */
#view-notes .notebooks-hero {
  position: relative;
  display: block;
  min-height: 142px;
  cursor: default;
}
#view-notes .notebooks-hero .notebook-identity,
#view-notes .notebooks-hero .notebooks-hero-actions,
#view-notes .notebooks-hero .cuadernote-live-clock {
  position: absolute;
  margin: 0;
  transition: left .22s ease, top .22s ease, box-shadow .18s ease;
}
#view-notes .notebooks-hero .notebook-identity {
  width: min(420px, calc(100% - 16px));
  max-width: calc(100% - 16px);
}
#view-notes .notebooks-hero .cuadernote-clock-face[data-clock-move] {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
#view-notes .notebooks-hero .cuadernote-clock-face[data-clock-move]:active { cursor: grabbing; }
#view-notes .notebooks-hero.clock-move-active {
  cursor: crosshair;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--library-accent) 72%, transparent);
}
#view-notes .notebooks-hero.clock-move-active .cuadernote-live-clock {
  box-shadow: 0 0 0 2px var(--library-accent), 0 0 18px color-mix(in srgb, var(--library-accent) 38%, transparent);
}
#view-notes .notebooks-hero .clock-move-status {
  position: absolute;
  z-index: 20;
  right: 50%;
  bottom: 4px;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: #061009e8;
  color: var(--library-accent);
  font: 700 9px/1.25 var(--ian-ui-font), Manrope, sans-serif;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translateX(50%) translateY(3px);
  transition: opacity .16s ease, transform .16s ease;
}
#view-notes .notebooks-hero.clock-move-active .clock-move-status {
  opacity: 1;
  transform: translateX(50%) translateY(0);
}
@media (max-width: 700px) {
  #view-notes .notebooks-hero { min-height: 184px; }
  #view-notes .notebooks-hero .notebook-identity { width: min(270px, calc(100% - 16px)); }
}
@media (prefers-reduced-motion: reduce) {
  #view-notes .notebooks-hero .notebook-identity,
  #view-notes .notebooks-hero .notebooks-hero-actions,
  #view-notes .notebooks-hero .cuadernote-live-clock { transition: none; }
}

/* Encabezado compacto: la identidad queda fija, el reloj solo usa la zona
   libre de la derecha y la búsqueda vive fuera del recuadro. */
#view-notes .notebooks-hero {
  min-height: 94px;
  padding: 8px;
}
#view-notes .notebooks-hero .notebook-identity {
  width: min(420px, calc(100% - 221px));
  max-width: min(420px, calc(100% - 221px));
  transition: none;
}
#view-notes .notebooks-hero .cuadernote-live-clock { width: 205px; }
#view-notes .library-outside-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: flex-end;
  min-height: 40px;
  margin-top: -7px;
  padding-inline: 4px;
}
#view-notes .library-outside-actions .notebook-library-ai-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--library-accent) 68%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--library-accent) 11%, var(--panel));
  color: var(--library-accent);
  font: 800 10px/1 Manrope, sans-serif;
  letter-spacing: .03em;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
#view-notes .library-outside-actions .notebook-library-ai-button .ian-icon { width: 17px; height: 17px; }
#view-notes .library-outside-actions .notebook-library-ai-button:hover,
#view-notes .library-outside-actions .notebook-library-ai-button:focus-visible {
  border-color: var(--library-accent);
  background: color-mix(in srgb, var(--library-accent) 21%, var(--panel));
  outline: none;
  transform: translateY(-1px);
}
#view-notes .library-outside-actions .notebook-library-icon-button {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
}

/* Biblioteca e IAN comparten la barra inferior: el destino activo se reduce
   para que ambos accesos queden próximos y legibles en móvil. */
#view-notes .cuadernote-bottom-nav {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
}
#view-notes .cuadernote-bottom-nav button.is-active {
  width: 64px;
  min-height: 64px;
  margin-top: -27px;
  border-width: 3px;
}
#view-notes .cuadernote-bottom-nav button.is-active > span {
  min-height: 23px;
  font-size: 23px;
}
#view-notes .cuadernote-bottom-nav button.is-active .bottom-nav-icon-shell {
  width: 31px;
  height: 31px;
  min-height: 31px;
}
#view-notes .cuadernote-bottom-nav button.is-active .bottom-nav-icon-shell .ian-icon {
  width: 20px;
  height: 20px;
}
#view-notes .cuadernote-bottom-nav .cuadernote-nav-ai {
  color: #21728c;
}
#view-notes .cuadernote-bottom-nav .cuadernote-nav-ai .bottom-nav-icon-shell {
  border-color: #add5e3;
  background: linear-gradient(145deg, #ffffff, #e1f4fa);
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #bfdce7, 0 3px 5px #1b6f8722;
}
#view-notes .cuadernote-bottom-nav .cuadernote-nav-ai:hover .bottom-nav-icon-shell,
#view-notes .cuadernote-bottom-nav .cuadernote-nav-ai:focus-visible .bottom-nav-icon-shell {
  border-color: #21728c;
}
@media (max-width: 420px) {
  #view-notes .cuadernote-bottom-nav button.is-active {
    width: 58px;
    min-height: 58px;
    margin-top: -22px;
    border-width: 3px;
  }
  #view-notes .cuadernote-bottom-nav button.is-active > span { min-height: 21px; font-size: 21px; }
  #view-notes .cuadernote-bottom-nav button.is-active .bottom-nav-icon-shell { width: 29px; height: 29px; min-height: 29px; }
  #view-notes .cuadernote-bottom-nav button.is-active .bottom-nav-icon-shell .ian-icon { width: 19px; height: 19px; }
  #view-notes .cuadernote-bottom-nav button > small { font-size: 8px; }
}
@media (max-width: 700px) {
  #view-notes .notebooks-hero { min-height: 80px; padding: 6px; }
  #view-notes .notebooks-hero .notebook-identity {
    width: 145px;
    max-width: 145px;
    gap: 4px;
  }
  #view-notes .notebook-identity-icon.cuadernote-module-trigger {
    flex-basis: 52px;
    width: 52px;
    height: 58px;
  }
  #view-notes .notebooks-hero .cuadernote-brand-copy { min-width: 0; }
  #view-notes .notebooks-hero .cuadernote-wordmark { font-size: 15px; }
  #view-notes .notebooks-hero h2 { font-size: 9px; line-height: 1.15; }
  #view-notes .notebooks-hero .cuadernote-brand-copy > p:last-child { font-size: 7px; }
  #view-notes .notebooks-hero .cuadernote-live-clock { width: 175px; }
  #view-notes .notebooks-hero .clock-digit { width: 13px; height: 21px; font-size: 17px; }
  #view-notes .notebooks-hero .clock-colon { font-size: 13px; }
  #view-notes .clock-functions > summary { width: 28px; height: 28px; }
  #view-notes .library-outside-actions { min-height: 36px; gap: 6px; }
  #view-notes .library-outside-actions .notebook-library-ai-button { min-height: 34px; padding-inline: 8px; }
  #view-notes .library-outside-actions .notebook-library-icon-button { width: 36px; height: 36px; flex-basis: 36px; }
}

/* Inicio de CuaderNOTE: cuatro aplicaciones reales, como una pantalla móvil. */
#view-notes .cuadernote-app-home {
  width: min(100%, 470px);
  margin: 0 auto;
  padding: 8px 2px 20px;
}
#view-notes .cuadernote-app-home-heading { margin: 0 0 16px; text-align: center; }
#view-notes .cuadernote-app-home-heading .eyebrow { margin: 0 0 5px; color: var(--library-accent); font-size: 10px; letter-spacing: .18em; }
#view-notes .cuadernote-app-home-heading h3 { margin: 0; color: var(--text); font: 800 clamp(22px, 6vw, 30px)/1.1 Poppins, var(--ian-ui-font), sans-serif; }
#view-notes .cuadernote-app-home-heading p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
#view-notes .cuadernote-app-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#view-notes .cuadernote-home-app {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 168px;
  border: 1px solid color-mix(in srgb, var(--home-app-tone, var(--library-accent)) 70%, #5a6a74);
  border-radius: 24px;
  background: radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--home-app-tone, var(--library-accent)) 30%, transparent), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--home-app-tone, var(--library-accent)) 16%, #131d46), #0b1820);
  box-shadow: inset 0 1px #ffffff23, 0 12px 24px #02070f6e;
  color: #f8fbff;
  padding: 14px 9px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#view-notes .cuadernote-home-app:hover,
#view-notes .cuadernote-home-app:focus-visible { border-color: var(--home-app-tone, var(--library-accent)); box-shadow: inset 0 1px #ffffff3d, 0 15px 28px #02070fad, 0 0 18px color-mix(in srgb, var(--home-app-tone, var(--library-accent)) 30%, transparent); outline: none; transform: translateY(-3px); }
#view-notes .cuadernote-home-app-notebook { --home-app-tone: #00d98b; }
#view-notes .cuadernote-home-app-note { --home-app-tone: #28c2ff; }
#view-notes .cuadernote-home-app-assets { --home-app-tone: #8b7cff; }
#view-notes .cuadernote-home-app-reminder { --home-app-tone: #ff9f45; }
#view-notes .cuadernote-home-app-icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 22px; overflow: hidden; background: color-mix(in srgb, var(--home-app-tone) 14%, #141e48); box-shadow: inset 0 1px #ffffff2b, 0 7px 14px #0007; }
#view-notes .cuadernote-home-app-icon .official-reference-art { width: 100%; height: 100%; background-size: 430% auto; }
#view-notes .cuadernote-home-app strong { overflow: hidden; width: 100%; font: 800 16px/1.15 Poppins, var(--ian-ui-font), sans-serif; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
#view-notes .cuadernote-home-app small { color: color-mix(in srgb, #ffffff 68%, var(--home-app-tone)); font: 700 9px/1 Inter, var(--ian-ui-font), sans-serif; letter-spacing: .06em; text-transform: uppercase; }
#view-notes .library-section-heading { display: flex; align-items: center; gap: 10px; width: min(100%, 650px); margin: 0 auto 8px; }
#view-notes .library-section-heading > button { border: 1px solid color-mix(in srgb, var(--library-accent) 48%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--library-accent) 10%, var(--panel)); color: var(--library-accent); padding: 7px 10px; font: 800 10px/1 Manrope, sans-serif; cursor: pointer; }
#view-notes .library-section-heading > p { display: grid; gap: 2px; margin: 0; }
#view-notes .library-section-heading strong { font-size: 14px; }
#view-notes .library-section-heading small { color: var(--muted); font-size: 9px; }
@media (max-width: 420px) {
  #view-notes .cuadernote-app-home { padding-inline: 2px; }
  #view-notes .cuadernote-app-home-grid { gap: 10px; }
  #view-notes .cuadernote-home-app { min-height: 145px; border-radius: 21px; padding: 11px 7px; }
  #view-notes .cuadernote-home-app-icon { width: 72px; height: 72px; border-radius: 19px; }
  #view-notes .cuadernote-home-app strong { font-size: 14px; }
}
/* Filtro único de contenido de CuaderNOTE. Se mantiene abierto al explorar. */
#view-notes .library-outside-actions { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#view-notes .notebook-library-filter-wrap { position: relative; }
#view-notes .notebook-library-filter-button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid #00e87880; border-radius: 999px; background: #0b171d; color: #e8fff3; font: 700 12px/1 Inter, var(--ian-ui-font), sans-serif; cursor: pointer; }
#view-notes .notebook-library-filter-button:hover, #view-notes .notebook-library-filter-button:focus-visible { border-color: #00ff66; box-shadow: 0 0 0 3px #00ff6622; outline: none; }
#view-notes .notebook-library-type-menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; width: min(270px, calc(100vw - 32px)); padding: 8px; border: 1px solid #00e87866; border-radius: 16px; background: #0b151d; box-shadow: 0 18px 34px #0009; }
#view-notes .notebook-library-type-menu.is-open { display: grid; }
#view-notes .notebook-library-type-menu button { min-height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 10px; background: #14242d; color: #c9d8df; font: 700 10px/1.1 Inter, var(--ian-ui-font), sans-serif; cursor: pointer; }
#view-notes .notebook-library-type-menu button:hover, #view-notes .notebook-library-type-menu button:focus-visible, #view-notes .notebook-library-type-menu button[aria-checked="true"] { border-color: #00ff6688; background: #073b2d; color: #fff; outline: none; }
#view-notes .notebook-library-type-menu .notebook-library-type-close { grid-column: 1 / -1; background: transparent; color: #8fa6b2; }

/* CuaderNOTE móvil primero: mantiene la cabecera y los controles dentro de
   teléfonos estrechos sin crear desplazamiento horizontal. */
@media (max-width: 480px) {
  #view-notes .notebooks-space { width: 100%; max-width: 100%; padding-inline: 8px; }
  #view-notes .notebooks-hero {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 42vw) !important;
    min-height: 76px;
    overflow: visible;
  }
  #view-notes .notebooks-hero .notebook-identity {
    width: min(124px, calc(100% - 136px));
    max-width: min(124px, calc(100% - 136px));
  }
  #view-notes .notebook-identity-icon.cuadernote-module-trigger {
    flex-basis: 46px;
    width: 46px;
    height: 50px;
  }
  #view-notes .notebooks-hero .cuadernote-wordmark { font-size: clamp(15px, 5vw, 20px); }
  #view-notes .notebooks-hero h2 { font-size: 8px; }
  #view-notes .notebooks-hero .cuadernote-brand-copy > p:last-child { font-size: 7px; }
  #view-notes .notebooks-hero .cuadernote-live-clock { width: min(142px, 42vw); }
  #view-notes .library-outside-actions { padding-inline: 0; }
  #view-notes .notebook-library-filter-button { min-height: 36px; padding-inline: 11px; font-size: 11px; }
  #view-notes .notebook-library-type-menu { width: min(260px, calc(100vw - 28px)); max-height: calc(100vh - 150px); overflow-y: auto; }
}

@media (max-width: 360px) {
  #view-notes .notebooks-hero { grid-template-columns: minmax(0, 1fr) 124px !important; }
  #view-notes .notebooks-hero .notebook-identity { width: 112px; max-width: 112px; }
  #view-notes .notebooks-hero .cuadernote-live-clock { width: 124px; }
  #view-notes .notebook-identity-icon.cuadernote-module-trigger { flex-basis: 42px; width: 42px; height: 46px; }
  #view-notes .notebooks-hero .cuadernote-wordmark { font-size: 15px; }
}

/* Acciones compactas: cada tarjeta conserva una pareja a la izquierda y otra
   a la derecha. El antiguo "Me gusta" queda fuera de la interfaz; se conserva
   el dato existente para no alterar registros ya guardados. */
body #view-notes .library-context-actions,
body #view-notes .notebook-context-actions,
body #view-notes .library-note-controls,
body #view-notes .library-media-controls,
body #view-notes .library-reminder-controls,
body #view-notes .library-item-controls {
  position: absolute !important;
  inset: auto 10px 10px !important;
  z-index: 8 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  gap: 5px !important;
  pointer-events: none !important;
}
body #view-notes .library-context-actions > * { pointer-events: auto !important; }
body #view-notes .library-context-actions .library-like-action { display: none !important; }
body #view-notes .library-context-actions .library-note-pin-action,
body #view-notes .library-context-actions .library-favorite-action,
body #view-notes .library-context-actions .trash-action,
body #view-notes .notebook-context-actions .notebook-card-menu,
body #view-notes .library-note-menu,
body #view-notes .library-media-menu,
body #view-notes .library-reminder-menu {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: none !important;
}
body #view-notes .library-context-actions .library-note-pin-action,
body #view-notes .library-context-actions .library-favorite-action,
body #view-notes .library-context-actions .trash-action,
body #view-notes .notebook-context-actions .notebook-card-menu > summary,
body #view-notes .library-note-menu > summary,
body #view-notes .library-media-menu > summary,
body #view-notes .library-reminder-menu > summary {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  color: #fff !important;
  text-shadow: 0 1px 1px #0008 !important;
  transform: perspective(120px) translateZ(0) !important;
}
body #view-notes .library-context-actions .library-note-pin-action {
  border-color: #79c7ff !important;
  background: linear-gradient(145deg, #2f9cff, #0753a8 72%) !important;
  box-shadow: 0 3px 0 #043b81, 0 8px 15px #001a3888, inset 0 1px #ffffff66 !important;
}
body #view-notes .library-context-actions .library-favorite-action {
  border-color: #ffd76e !important;
  background: linear-gradient(145deg, #f7c848, #a85d09 72%) !important;
  box-shadow: 0 3px 0 #754008, 0 8px 15px #2f1a0088, inset 0 1px #ffffff66 !important;
}
body #view-notes .notebook-context-actions .notebook-card-menu > summary,
body #view-notes .library-note-menu > summary,
body #view-notes .library-media-menu > summary,
body #view-notes .library-reminder-menu > summary {
  border-color: #c2a6ff !important;
  background: linear-gradient(145deg, #9c7aff, #45288d 72%) !important;
  box-shadow: 0 3px 0 #2f1b68, 0 8px 15px #190e3788, inset 0 1px #ffffff66 !important;
}
body #view-notes .library-context-actions .trash-action {
  margin-left: 0 !important;
  border-color: #ff9ca6 !important;
  background: linear-gradient(145deg, #fa6878, #8a2138 72%) !important;
  box-shadow: 0 3px 0 #651528, 0 8px 15px #30061188, inset 0 1px #ffffff66 !important;
}
body #view-notes .library-context-actions > details { margin-left: auto !important; }
body #view-notes .library-context-actions .library-note-pin-action:hover,
body #view-notes .library-context-actions .library-note-pin-action:focus-visible,
body #view-notes .library-context-actions .library-favorite-action:hover,
body #view-notes .library-context-actions .library-favorite-action:focus-visible,
body #view-notes .library-context-actions .trash-action:hover,
body #view-notes .library-context-actions .trash-action:focus-visible,
body #view-notes .notebook-context-actions .notebook-card-menu > summary:hover,
body #view-notes .notebook-context-actions .notebook-card-menu[open] > summary,
body #view-notes .library-note-menu > summary:hover,
body #view-notes .library-note-menu[open] > summary,
body #view-notes .library-media-menu > summary:hover,
body #view-notes .library-media-menu[open] > summary,
body #view-notes .library-reminder-menu > summary:hover,
body #view-notes .library-reminder-menu[open] > summary {
  filter: brightness(1.12) saturate(1.08) !important;
  outline: 2px solid #ffffff66 !important;
  outline-offset: 1px !important;
  transform: perspective(120px) translateY(-2px) !important;
}
body #view-notes .library-context-actions .library-note-pin-action:active,
body #view-notes .library-context-actions .library-favorite-action:active,
body #view-notes .library-context-actions .trash-action:active,
body #view-notes .notebook-context-actions .notebook-card-menu > summary:active,
body #view-notes .library-note-menu > summary:active,
body #view-notes .library-media-menu > summary:active,
body #view-notes .library-reminder-menu > summary:active {
  box-shadow: 0 1px 0 #121b42, inset 0 2px 6px #0008 !important;
  transform: translateY(2px) !important;
}
body #view-notes .notebook-card-actions,
body #view-notes .library-note-menu > div,
body #view-notes .library-media-menu > div,
body #view-notes .library-reminder-menu > div {
  top: auto !important;
  right: 0 !important;
  bottom: 42px !important;
}

/* Las creaciones reales usan el mismo contenedor compacto y definido que un
   cuaderno, sin convertir los tipos de contenido en aplicaciones separadas. */
body #view-notes .notebooks-grid > .notebook-card-shell,
body #view-notes .notebooks-grid > .library-item-card-shell {
  width: min(100%, 320px) !important;
  max-width: 320px !important;
  justify-self: center !important;
}
body #view-notes .library-note-item,
body #view-notes .library-media-item,
body #view-notes .library-reminder-item {
  min-height: 270px !important;
  border: 1px solid color-mix(in srgb, var(--library-action-ink, #8de8ff) 36%, #607282) !important;
  border-radius: 21px !important;
  background: linear-gradient(145deg, #1b2a36, #101923 68%) !important;
  box-shadow: inset 0 1px #ffffff2b, inset 0 -1px #0009, 0 13px 24px #02070f86 !important;
}
body #view-notes .library-note-open,
body #view-notes .library-media-open,
body #view-notes .library-reminder-open { min-height: 270px !important; padding-bottom: 56px !important; }
@media (max-width: 480px) {
  body #view-notes .library-context-actions,
  body #view-notes .notebook-context-actions,
  body #view-notes .library-note-controls,
  body #view-notes .library-media-controls,
  body #view-notes .library-reminder-controls,
  body #view-notes .library-item-controls { inset: auto 8px 8px !important; gap: 4px !important; }
  body #view-notes .library-context-actions .library-note-pin-action,
  body #view-notes .library-context-actions .library-favorite-action,
  body #view-notes .library-context-actions .trash-action,
  body #view-notes .notebook-context-actions .notebook-card-menu > summary,
  body #view-notes .library-note-menu > summary,
  body #view-notes .library-media-menu > summary,
  body #view-notes .library-reminder-menu > summary { width: 33px !important; min-width: 33px !important; height: 33px !important; min-height: 33px !important; border-radius: 10px !important; }
  body #view-notes .notebooks-grid > .notebook-card-shell,
  body #view-notes .notebooks-grid > .library-item-card-shell { width: min(100%, 310px) !important; }
}

/* Tarjetas de creacion: el objeto real hereda su propio color y queda dentro
   de una ficha cuadrada, no como una categoria fija de la biblioteca. */
body #view-notes .library-note-item {
  background:
    radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--note-bg) 52%, #ffffff 8%), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--note-bg) 34%, #12212a), #101922 72%) !important;
  border-color: color-mix(in srgb, var(--note-bg) 68%, #c8e3ed) !important;
  box-shadow: inset 0 1px #ffffff45, inset 0 -2px #0009, 0 14px 28px #02070fa8 !important;
}
body #view-notes .library-media-item,
body #view-notes .library-reminder-item {
  background:
    radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--library-card-accent) 42%, #ffffff 5%), transparent 40%),
    linear-gradient(145deg, color-mix(in srgb, var(--library-card-accent) 26%, #13202a), #101922 72%) !important;
  border-color: color-mix(in srgb, var(--library-card-accent) 64%, #c8e3ed) !important;
}
body #view-notes .library-reminder-item { --library-card-accent: #ff9f45; }
body #view-notes .library-note-paper { box-shadow: 0 10px 18px #0007, inset 0 1px #ffffff4d !important; }

/* Izquierda: mas opciones y eliminar. Derecha: fijar y favorito. */
body #view-notes .library-context-actions > details,
body #view-notes .notebook-context-actions .notebook-card-menu,
body #view-notes .library-note-menu,
body #view-notes .library-media-menu,
body #view-notes .library-reminder-menu,
body #view-notes .library-item-menu {
  order: 1 !important;
  margin-left: 0 !important;
}
body #view-notes .library-context-actions .trash-action {
  order: 2 !important;
  margin-left: 0 !important;
}
body #view-notes .library-context-actions .library-note-pin-action {
  order: 3 !important;
  margin-left: auto !important;
}
body #view-notes .library-context-actions .library-favorite-action { order: 4 !important; }
body #view-notes .library-item-menu > summary,
body #view-notes .library-item-menu[open] > summary {
  border-color: #c2a6ff !important;
  background: linear-gradient(145deg, #9c7aff, #45288d 72%) !important;
  box-shadow: 0 3px 0 #2f1b68, 0 8px 15px #190e3788, inset 0 1px #ffffff66 !important;
}
body #view-notes .library-item-menu > div {
  top: auto !important;
  right: 0 !important;
  bottom: 42px !important;
}

/* Cuadernos y creaciones en fichas iguales: no hay panel exterior ni tarjetas
   alargadas. Cada objeto es una pieza individual de la cuadrícula. */
body #view-notes .grid-view .notebooks-grid {
  grid-template-columns: repeat(auto-fit, 250px) !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 16px !important;
}
body #view-notes .grid-view .notebooks-grid > .notebook-card-shell,
body #view-notes .grid-view .notebooks-grid > .library-item-card-shell {
  position: relative !important;
  width: 250px !important;
  max-width: 250px !important;
  min-width: 250px !important;
  height: 250px !important;
  min-height: 250px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body #view-notes .grid-view .notebook-card,
body #view-notes .grid-view .library-item-card,
body #view-notes .grid-view .library-note-open,
body #view-notes .grid-view .library-media-open,
body #view-notes .grid-view .library-reminder-open {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 250px !important;
  border-radius: 22px !important;
}
body #view-notes .grid-view .notebook-card,
body #view-notes .grid-view .library-item-card,
body #view-notes .grid-view .library-media-open,
body #view-notes .grid-view .library-reminder-open {
  padding: 14px 48px !important;
}
body #view-notes .grid-view .library-note-item,
body #view-notes .grid-view .library-media-item,
body #view-notes .grid-view .library-reminder-item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body #view-notes .grid-view .library-note-open {
  padding: 15px 46px 12px !important;
  background: transparent !important;
}
body #view-notes .grid-view .library-note-paper {
  width: min(100%, 150px) !important;
  min-height: 140px !important;
  padding: 15px 12px 13px !important;
  gap: 7px !important;
  border-radius: 7px 7px 15px 7px !important;
}
body #view-notes .grid-view .library-note-copy { gap: 2px !important; }
body #view-notes .grid-view .library-note-copy strong { font-size: 14px !important; }
body #view-notes .grid-view .library-note-copy .library-item-meta { font-size: 9px !important; }
body #view-notes .grid-view .notebook-cover-visual,
body #view-notes .grid-view .library-item-card-shell:not(.library-note-item):not(.library-media-item) .library-item-icon {
  height: 112px !important;
}
body #view-notes .notebook-new-card {
  place-items: center !important;
  align-content: center !important;
  gap: 11px !important;
  border: 1px dashed color-mix(in srgb, var(--library-accent) 68%, #8da4ad) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--library-accent) 16%, #102029), #0c161d) !important;
  color: var(--text) !important;
}
body #view-notes .notebook-new-card:hover,
body #view-notes .notebook-new-card:focus-visible {
  border-style: solid !important;
  border-color: var(--library-accent) !important;
  box-shadow: inset 0 1px #ffffff2e, 0 12px 24px #021015a0, 0 0 18px color-mix(in srgb, var(--library-accent) 35%, transparent) !important;
  outline: none !important;
}
body #view-notes .notebook-new-card-icon {
  display: grid !important;
  place-items: center !important;
  width: 66px !important;
  height: 66px !important;
  border: 1px solid color-mix(in srgb, var(--library-accent) 68%, #ffffff) !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, var(--library-accent) 22%, #141e47) !important;
  color: var(--library-accent) !important;
  box-shadow: inset 0 1px #ffffff35, 0 7px 14px #0007 !important;
}
body #view-notes .notebook-new-card-icon .ian-icon { width: 29px; height: 29px; }

/* Los controles se colocan en pares verticales sobre los laterales de cada
   ficha. Se elimina el icono de tres puntos: el mismo menú se abre con engrane. */
body #view-notes .grid-view .library-context-actions,
body #view-notes .grid-view .notebook-context-actions,
body #view-notes .grid-view .library-note-controls,
body #view-notes .grid-view .library-media-controls,
body #view-notes .grid-view .library-reminder-controls,
body #view-notes .grid-view .library-item-controls {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  pointer-events: none !important;
}
body #view-notes .grid-view .library-context-actions > * { pointer-events: auto !important; }
body #view-notes .grid-view .library-context-actions > details,
body #view-notes .grid-view .notebook-context-actions .notebook-card-menu,
body #view-notes .grid-view .library-note-menu,
body #view-notes .grid-view .library-media-menu,
body #view-notes .grid-view .library-reminder-menu,
body #view-notes .grid-view .library-item-menu {
  position: absolute !important;
  top: 74px !important;
  left: 6px !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
}
body #view-notes .grid-view .library-context-actions .trash-action {
  position: absolute !important;
  top: 118px !important;
  left: 6px !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
}
body #view-notes .grid-view .library-context-actions .library-note-pin-action {
  position: absolute !important;
  top: 74px !important;
  right: 6px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
}
body #view-notes .grid-view .library-context-actions .library-favorite-action {
  position: absolute !important;
  top: 118px !important;
  right: 6px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
}
body #view-notes .grid-view .notebook-card-actions,
body #view-notes .grid-view .library-note-menu > div,
body #view-notes .grid-view .library-media-menu > div,
body #view-notes .grid-view .library-reminder-menu > div,
body #view-notes .grid-view .library-item-menu > div {
  top: 112px !important;
  left: 44px !important;
  right: auto !important;
  bottom: auto !important;
}
@media (max-width: 560px) {
  body #view-notes .grid-view .notebooks-grid { grid-template-columns: 250px !important; gap: 12px !important; }
}

/* Inicio simplificado: Cuadernos y Recordatorios son las únicas áreas
   principales; los tipos internos se crean desde el cuaderno abierto. */
body #view-notes .library-home-section {
  width: min(100%, 980px);
  margin: 18px auto 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--library-accent, #00e887) 28%, #607282);
  border-radius: 24px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--library-accent, #00e887) 8%, #102029), #0c151c 78%);
  box-shadow: inset 0 1px #ffffff20, 0 12px 25px #02070f55;
}
body #view-notes .library-home-section-reminders { --library-accent: #ffb23e; }
body #view-notes .library-home-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
body #view-notes .library-home-section-head > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
body #view-notes .library-home-section-head h2 { margin: 0; color: var(--text); font: 750 clamp(18px, 3vw, 26px)/1.1 Poppins, var(--ian-ui-font), sans-serif; }
body #view-notes .library-home-section-head small { color: var(--muted); font: 600 11px/1.2 Inter, var(--ian-ui-font), sans-serif; }
body #view-notes .library-home-section-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--library-accent) 65%, #fff); border-radius: 12px; color: var(--library-accent); background: color-mix(in srgb, var(--library-accent) 14%, #141e47); }
body #view-notes .library-home-section-icon .ian-icon { width: 22px; height: 22px; }
body #view-notes .library-section-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; justify-content: stretch !important; gap: 16px !important; margin: 0 !important; }
body #view-notes .library-section-grid > .notebook-card-shell,
body #view-notes .library-section-grid > .library-item-card-shell { width: 100% !important; max-width: none !important; min-width: 0 !important; justify-self: stretch !important; }
body #view-notes .library-section-grid .notebook-new-card-shell,
body #view-notes .library-section-grid .library-new-reminder-card-shell { min-height: 270px !important; }
body #view-notes .library-new-reminder-card { display: grid !important; place-items: center !important; align-content: center !important; gap: 10px !important; width: 100% !important; height: 270px !important; min-height: 270px !important; padding: 20px !important; border: 1px dashed color-mix(in srgb, #ffb23e 72%, #aebdcc) !important; border-radius: 22px !important; background: linear-gradient(145deg, color-mix(in srgb, #ffb23e 15%, #102029), #0c161d) !important; color: var(--text) !important; text-align: center !important; }
body #view-notes .library-new-reminder-card:hover,
body #view-notes .library-new-reminder-card:focus-visible { border-style: solid !important; border-color: #ffb23e !important; box-shadow: 0 0 20px #ffb23e33, inset 0 1px #ffffff2e !important; outline: none !important; }
body #view-notes .library-new-reminder-card .library-new-reminder-icon { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid #ffb23eaa; border-radius: 20px; color: #ffb23e; background: #ffb23e20; box-shadow: inset 0 1px #fff3, 0 8px 16px #0007; font-size: 32px; }
body #view-notes .library-new-reminder-card .library-item-copy { display: grid; justify-items: center; gap: 4px; }
body #view-notes .library-new-reminder-card .library-item-copy strong { color: var(--text); font-size: 17px; }
body #view-notes .library-new-reminder-card .library-item-kind { color: #ffb23e !important; }
body #view-notes .library-new-reminder-card .library-item-meta { color: var(--muted); }
body #view-notes .section-empty { grid-column: 1 / -1; min-height: 150px; margin: 0; }
body #view-notes .cuadernote-bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
body #view-notes .book-add-content-menu { margin: 4px 0; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
body #view-notes .book-add-content-menu > summary { padding: 9px 10px; color: var(--accent); cursor: pointer; list-style: none; }
body #view-notes .book-add-content-menu > div { display: grid; gap: 4px; padding: 4px 6px 8px; }
body #view-notes .book-add-content-menu button { width: 100%; padding: 8px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
body #view-notes .book-add-content-menu button:hover,
body #view-notes .book-add-content-menu button:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); outline: none; }
@media (max-width: 600px) {
  body #view-notes .library-home-section { padding: 14px; border-radius: 19px; }
  body #view-notes .library-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  body #view-notes .library-section-grid > .notebook-card-shell,
  body #view-notes .library-section-grid > .library-item-card-shell { width: 100% !important; }
}
@media (max-width: 380px) {
  body #view-notes .library-section-grid { grid-template-columns: 1fr !important; }
}

/* Posicionamiento común de los recordatorios, también en la vista lista. */
body #view-notes .library-reminder-item .library-reminder-controls {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
}
body #view-notes .library-reminder-item .library-reminder-controls > * { pointer-events: auto !important; }
body #view-notes .library-reminder-item .library-reminder-controls > details,
body #view-notes .library-reminder-item .library-reminder-controls .trash-action,
body #view-notes .library-reminder-item .library-reminder-controls .library-note-pin-action,
body #view-notes .library-reminder-item .library-reminder-controls .library-favorite-action,
body #view-notes .library-reminder-item .library-reminder-controls .library-reminder-alert-action {
  position: absolute !important;
  margin: 0 !important;
  transform: none !important;
}
body #view-notes .library-reminder-item .library-reminder-controls > details { top: 13px !important; left: 10px !important; right: auto !important; bottom: auto !important; }
body #view-notes .library-reminder-item .library-reminder-controls .trash-action { top: 52px !important; left: 10px !important; right: auto !important; bottom: auto !important; }
body #view-notes .library-reminder-item .library-reminder-controls .library-reminder-alert-action { top: 13px !important; right: 10px !important; left: auto !important; bottom: auto !important; }
body #view-notes .library-reminder-item .library-reminder-controls .library-note-pin-action { top: 52px !important; right: 10px !important; left: auto !important; bottom: auto !important; }
body #view-notes .library-reminder-item .library-reminder-controls .library-favorite-action { top: 91px !important; right: 10px !important; left: auto !important; bottom: auto !important; }
body #view-notes .library-reminder-item .reminder-calendar { grid-template-rows: 24px 1fr 15px 30px !important; }
body #view-notes .library-reminder-item .reminder-calendar strong { font-size: 45px !important; }
body #view-notes .library-reminder-item .reminder-calendar-dates {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  border-top: 1px solid #eef0f4;
  background: #f7f8fa;
  color: #667085;
  font: 700 6px/1.05 Inter, var(--ian-ui-font), sans-serif;
}
body #view-notes .library-reminder-item .reminder-calendar-dates > span { display: grid; min-width: 0; place-content: center; gap: 2px; padding: 2px 1px; }
body #view-notes .library-reminder-item .reminder-calendar-dates > span + span { border-left: 1px solid #e3e7ed; }
body #view-notes .library-reminder-item .reminder-calendar-dates b,
body #view-notes .library-reminder-item .reminder-calendar-dates time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body #view-notes .library-reminder-item .reminder-calendar-dates b { color: #475467; font-size: .9em; }
body #view-notes .library-reminder-item .reminder-calendar-dates time { color: #667085; font-size: 1em; }
@media (max-width: 560px) {
  body #view-notes .library-reminder-item .library-reminder-controls > details { top: 8px !important; left: 7px !important; }
  body #view-notes .library-reminder-item .library-reminder-controls .trash-action { top: 38px !important; left: 7px !important; }
  body #view-notes .library-reminder-item .library-reminder-controls .library-reminder-alert-action { top: 8px !important; right: 7px !important; }
  body #view-notes .library-reminder-item .library-reminder-controls .library-note-pin-action { top: 38px !important; right: 7px !important; }
  body #view-notes .library-reminder-item .library-reminder-controls .library-favorite-action { top: 68px !important; right: 7px !important; }
  body #view-notes .library-reminder-item .reminder-calendar { grid-template-rows: 17px 1fr 11px 25px !important; }
  body #view-notes .library-reminder-item .reminder-calendar strong { font-size: 30px !important; }
  body #view-notes .library-reminder-item .reminder-calendar-dates { font-size: 5px; }
}

/* Recordatorios: el contenido se lee primero y las acciones quedan en una
   barra inferior limpia, sin marcos superpuestos ni controles sobre el texto. */
body #view-notes .library-reminder-item .library-reminder-copy {
  display: flex !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  text-align: left !important;
}
body #view-notes .library-reminder-item .library-reminder-copy > strong { order: 1 !important; max-width: 100%; }
body #view-notes .library-reminder-item .library-reminder-copy > .library-item-kind { order: 2 !important; }
body #view-notes .library-reminder-item .library-reminder-copy > .reminder-message {
  order: 3 !important;
  display: -webkit-box !important;
  max-width: 100% !important;
  margin: 2px 0 0 !important;
  overflow: hidden !important;
  color: color-mix(in srgb, var(--text) 88%, var(--library-card-accent)) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: ellipsis !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}
body #view-notes .library-reminder-item .library-reminder-copy > .reminder-state-meta { order: 4 !important; }

body #view-notes .library-reminder-item .library-reminder-controls {
  inset: auto 12px 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  height: 36px !important;
}
body #view-notes .library-reminder-item .library-reminder-controls > details,
body #view-notes .library-reminder-item .library-reminder-controls .trash-action,
body #view-notes .library-reminder-item .library-reminder-controls .library-reminder-alert-action,
body #view-notes .library-reminder-item .library-reminder-controls .library-note-pin-action,
body #view-notes .library-reminder-item .library-reminder-controls .library-favorite-action {
  position: static !important;
  inset: auto !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  transform: none !important;
}
body #view-notes .library-reminder-item .library-reminder-controls > details { order: 1 !important; }
body #view-notes .library-reminder-item .library-reminder-controls .trash-action { order: 2 !important; }
body #view-notes .library-reminder-item .library-reminder-controls .library-reminder-alert-action { order: 3 !important; margin-left: auto !important; }
body #view-notes .library-reminder-item .library-reminder-controls .library-note-pin-action { order: 4 !important; }
body #view-notes .library-reminder-item .library-reminder-controls .library-favorite-action { order: 5 !important; }
body #view-notes .library-reminder-item .library-reminder-alert-action::after,
body #view-notes .library-reminder-item .library-reminder-alert-action:not(.is-enabled)::after { display: none !important; content: none !important; }
body #view-notes .library-reminder-item .library-reminder-alert-action { overflow: hidden !important; }

@media (max-width: 560px) {
  body #view-notes .library-reminder-item .library-reminder-controls {
    inset: auto 9px 9px !important;
    gap: 6px !important;
  }
  body #view-notes .library-reminder-item .library-reminder-controls > details,
  body #view-notes .library-reminder-item .library-reminder-controls .trash-action,
  body #view-notes .library-reminder-item .library-reminder-controls .library-reminder-alert-action,
  body #view-notes .library-reminder-item .library-reminder-controls .library-note-pin-action,
  body #view-notes .library-reminder-item .library-reminder-controls .library-favorite-action {
    flex-basis: 33px !important;
    width: 33px !important;
    min-width: 33px !important;
    height: 33px !important;
    min-height: 33px !important;
  }
}

/* Geometría común anterior para todas las tarjetas de inicio. */
body #view-notes .library-section-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-columns: minmax(0, 1fr) !important;
}

/* En móvil cada sección conserva la altura real de sus tarjetas. Una portada
   nunca debe salirse de Cuadernos ni cubrir Recordatorios. */
body #view-notes .library-home-section .library-section-grid {
  grid-auto-rows: auto !important;
  height: auto !important;
  min-height: 0 !important;
}
body #view-notes .library-home-section .library-section-grid > .notebook-card-shell,
body #view-notes .library-home-section .library-section-grid > .library-item-card-shell {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
body #view-notes .library-home-section .library-section-grid > .notebook-card-shell > .notebook-card,
body #view-notes .library-home-section .library-section-grid > .library-item-card-shell > .library-item-card,
body #view-notes .library-home-section .library-section-grid > .library-item-card-shell > .library-new-reminder-card {
  height: auto !important;
  min-height: 270px !important;
  max-height: none !important;
}
body .notebook-book-dialog .book-page-content {
  position: relative;
  z-index: 1;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}
@media (max-width: 520px) {
  body #view-notes .library-home-section .library-section-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
body #view-notes .library-section-grid > .notebook-card-shell,
body #view-notes .library-section-grid > .library-item-card-shell {
  width: 100% !important;
  min-width: 0 !important;
  height: 270px !important;
  min-height: 270px !important;
  max-height: 270px !important;
}
body #view-notes .library-section-grid > .notebook-card-shell > .notebook-card,
body #view-notes .library-section-grid > .library-item-card-shell > .library-item-card,
body #view-notes .library-section-grid > .library-item-card-shell > .library-new-reminder-card {
  width: 100% !important;
  height: 270px !important;
  min-height: 270px !important;
  max-height: 270px !important;
  min-width: 0 !important;
}
@media (max-width: 700px) {
  body #view-notes .library-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 380px) {
  body #view-notes .library-section-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Crear debe conducir a escribir, no a configurar una portada. */
body .notebook-create-reference-dialog .notebook-create-start {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #54e6a366;
  border-radius: 18px;
  background: linear-gradient(135deg, #0e4235, #10221d);
}
body .notebook-create-reference-dialog .notebook-create-start > span {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid #66f2b2;
  border-radius: 14px;
  color: #8cffe0;
  font-size: 23px;
}
body .notebook-create-reference-dialog .notebook-create-start h3 { margin: 0; color: #effff7; font-size: 16px; }
body .notebook-create-reference-dialog .notebook-create-start p { margin: 4px 0 0; color: #b7d3c6; font-size: 12px; line-height: 1.4; }
body .notebook-create-reference-dialog .notebook-create-name { display: grid; gap: 7px; color: #ecfff5; font-weight: 750; }
body .notebook-create-reference-dialog .notebook-create-name input { min-height: 52px; border-color: #63e4aa99; font-size: 16px; }
body .notebook-create-reference-dialog .notebook-create-advanced { border: 1px solid #ffffff25; border-radius: 16px; background: #061b16aa; }
body .notebook-create-reference-dialog .notebook-create-advanced > summary { padding: 13px 14px; color: #c3ead9; font-weight: 750; cursor: pointer; }
body .notebook-create-reference-dialog .notebook-create-advanced > summary small { margin-left: 5px; color: #8eb6a4; font-weight: 600; }
body .notebook-create-reference-dialog .notebook-create-advanced > div { display: grid; gap: 13px; padding: 0 14px 14px; }
body .notebook-create-reference-dialog .notebook-create-submit-row .primary-button { min-height: 54px; font-size: 15px; }

/* Creación compacta: el + pertenece al encabezado de su propia sección. */
body #view-notes .library-home-section-head {
  align-items: center !important;
}
body #view-notes .library-home-section-actions {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
body #view-notes .library-home-section-actions > small {
  white-space: nowrap;
}
body #view-notes .library-home-create {
  display: grid !important;
  justify-items: center;
  gap: 3px;
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  padding: 0;
  border: 0;
  color: var(--library-accent);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
body #view-notes .library-home-create-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--library-accent) 70%, #fff);
  border-radius: 14px;
  background: color-mix(in srgb, var(--library-accent) 16%, #071218);
  box-shadow: inset 0 1px #fff3, 0 5px 12px #0005;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
body #view-notes .library-home-create-icon .ian-icon {
  width: 23px;
  height: 23px;
}
body #view-notes .library-home-create small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.05;
  text-align: center;
}
body #view-notes .library-home-create-reminder {
  --library-accent: #ffb23e;
}
body #view-notes .library-home-create:hover .library-home-create-icon,
body #view-notes .library-home-create:focus-visible .library-home-create-icon {
  background: color-mix(in srgb, var(--library-accent) 27%, #071218);
  box-shadow: inset 0 1px #fff4, 0 0 0 3px color-mix(in srgb, var(--library-accent) 22%, transparent), 0 7px 15px #0006;
  transform: translateY(-1px);
}
body #view-notes .library-home-create:focus-visible {
  outline: none;
}
@media (max-width: 520px) {
  body #view-notes .library-home-section-head { gap: 8px; }
  body #view-notes .library-home-section-actions { gap: 6px; }
  body #view-notes .library-home-section-actions > small { display: none; }
  body #view-notes .library-home-create {
    flex-basis: 58px;
    width: 58px;
    min-width: 58px;
  }
  body #view-notes .library-home-create-icon {
    width: 42px;
    height: 42px;
  }
}

/* Agenda de recordatorios: editor inmersivo y diseñado primero para celular. */
body dialog.reminder-editor-dialog {
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #edf6ff;
  background:
    radial-gradient(circle at 87% 6%, #ffbd4a30 0 7%, transparent 28%),
    radial-gradient(circle at 8% 23%, #45dcb822 0 6%, transparent 25%),
    linear-gradient(160deg, #0b1d2c 0%, #102437 48%, #0b1724 100%) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
body dialog.reminder-editor-dialog::backdrop { background: #02070dcc; }
body dialog.reminder-editor-dialog form {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 0;
}
body dialog.reminder-editor-dialog .dialog-head {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 22px 18px;
  border-bottom: 1px solid #ffffff1f;
  background: linear-gradient(180deg, #102a3cf2, #102436e8);
}
body dialog.reminder-editor-dialog .dialog-head .eyebrow { color: #ffbf54; letter-spacing: .16em; }
body dialog.reminder-editor-dialog .dialog-head h2 { margin-top: 4px; color: #f8fbff; font-size: clamp(25px, 7vw, 34px); }
body dialog.reminder-editor-dialog .close-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #ffffff35;
  border-radius: 14px;
  color: #f8fbff;
  background: #07131ee8;
  box-shadow: inset 0 1px #ffffff20;
}
body dialog.reminder-editor-dialog .library-item-form {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column !important;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 22px;
}
body dialog.reminder-editor-dialog .reminder-editor-hero {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 16px;
  border: 1px solid #ffcb6a66;
  border-radius: 22px;
  background: linear-gradient(135deg, #ffae3626, #1b846a21 68%, #ffffff08);
  box-shadow: inset 0 1px #ffffff2b, 0 12px 28px #0000002e;
}
body dialog.reminder-editor-dialog .reminder-editor-hero-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  color: #1a2631;
  background: linear-gradient(145deg, #ffd76f, #f7a62f);
  box-shadow: inset 0 1px #fff8, 0 6px 16px #f4a72c42;
}
body dialog.reminder-editor-dialog .reminder-editor-hero-icon .ian-icon { width: 28px; height: 28px; }
body dialog.reminder-editor-dialog .reminder-editor-hero small { display: block; color: #ffca73; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
body dialog.reminder-editor-dialog .reminder-editor-hero strong { display: block; margin-top: 3px; color: #fff; font-size: 18px; }
body dialog.reminder-editor-dialog .reminder-editor-hero p { margin: 3px 0 0; color: #b7c6d5; font-size: 12px; line-height: 1.4; }
body dialog.reminder-editor-dialog .library-item-form > label {
  gap: 7px;
  color: #c9d9e8;
  font-size: 12px;
}
body dialog.reminder-editor-dialog .library-item-form input,
body dialog.reminder-editor-dialog .library-item-form textarea,
body dialog.reminder-editor-dialog .library-item-form select {
  border: 1px solid #94b6cf4d;
  border-radius: 15px;
  color: #f5f9ff;
  background: #19334dcc;
  box-shadow: inset 0 1px #ffffff12;
}
body dialog.reminder-editor-dialog .library-item-form input,
body dialog.reminder-editor-dialog .library-item-form select { min-height: 48px; }
body dialog.reminder-editor-dialog .library-item-form textarea { min-height: 126px; padding: 14px; resize: vertical; }
body dialog.reminder-editor-dialog .library-item-form input:focus,
body dialog.reminder-editor-dialog .library-item-form textarea:focus,
body dialog.reminder-editor-dialog .library-item-form select:focus { border-color: #ffc45f; outline: 2px solid #ffbf4c2c; }
body dialog.reminder-editor-dialog .reminder-date-time-picker {
  min-inline-size: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid #ffbd4f73;
  border-radius: 22px;
  background: linear-gradient(145deg, #213c51f2, #132b3cf5);
  box-shadow: inset 0 1px #ffffff1c, 0 8px 20px #00000022;
}
body dialog.reminder-editor-dialog .reminder-date-time-picker legend { padding: 0 8px; color: #ffd487; font-size: 17px; font-weight: 800; }
body dialog.reminder-editor-dialog .reminder-date-grid,
body dialog.reminder-editor-dialog .reminder-time-row { display: grid; align-items: end; gap: 9px; }
body dialog.reminder-editor-dialog .reminder-date-grid { grid-template-columns: .8fr 1.45fr 1fr; }
body dialog.reminder-editor-dialog .reminder-time-block { display: grid; gap: 9px; margin-top: 13px; }
body dialog.reminder-editor-dialog .reminder-time-row { grid-template-columns: 1fr auto 1fr 1.1fr; }
body dialog.reminder-editor-dialog .reminder-date-grid label,
body dialog.reminder-editor-dialog .reminder-time-block label { display: grid; gap: 6px; min-width: 0; color: #c9d9e8; font-size: 11px; }
body dialog.reminder-editor-dialog .reminder-date-grid select,
body dialog.reminder-editor-dialog .reminder-time-block select { width: 100%; padding: 8px 10px; }
body dialog.reminder-editor-dialog .reminder-time-separator { align-self: end; padding-bottom: 10px; color: #ffd487; font-size: 20px; font-weight: 800; }
body dialog.reminder-editor-dialog .reminder-date-time-picker .library-form-note,
body dialog.reminder-editor-dialog .reminder-notification-note { color: #aebfd0; line-height: 1.45; }
body dialog.reminder-editor-dialog .library-card-color-picker {
  border: 1px solid #ffffff23;
  border-radius: 19px;
  background: #10273ae8;
  box-shadow: inset 0 1px #ffffff12;
}
body dialog.reminder-editor-dialog .reminder-sound-field { padding-bottom: 4px; }
body dialog.reminder-editor-dialog .dialog-actions {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 10px;
  flex: 0 0 auto;
  margin: 0;
  padding: 13px 20px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid #ffffff1f;
  background: #0c1c2bf5;
}
body dialog.reminder-editor-dialog .dialog-actions button { min-height: 50px; border-radius: 16px; }
body dialog.reminder-editor-dialog .dialog-actions .primary-button { color: #17212b; background: linear-gradient(135deg, #ffcf64, #f59c2e); box-shadow: 0 8px 18px #ed982d33; }
@media (max-width: 430px) {
  body dialog.reminder-editor-dialog .library-item-form { padding-inline: 16px; }
  body dialog.reminder-editor-dialog .dialog-head { padding-inline: 16px; }
  body dialog.reminder-editor-dialog .dialog-actions { padding-inline: 16px; }
  body dialog.reminder-editor-dialog .reminder-date-grid { grid-template-columns: 1fr 1.35fr; }
  body dialog.reminder-editor-dialog .reminder-date-grid label:last-child { grid-column: 1 / -1; }
  body dialog.reminder-editor-dialog .reminder-time-row { grid-template-columns: 1fr auto 1fr; }
  body dialog.reminder-editor-dialog .reminder-period-field { grid-column: 1 / -1; }
}

/* Paleta común: círculos compactos, agrupados como un panal de color. */
body .appearance-palette-swatches,
body .note-color-options,
body .library-card-color-swatches,
body .multimedia-color-options,
body .notebook-color-swatches,
body .notebook-create-color-choices,
body .setting-color-choices {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-template-rows: none !important;
  gap: 4px 3px !important;
  max-height: 188px;
  padding: 9px !important;
  overflow: auto !important;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--accent) 15%, transparent) 0 2px, transparent 3px) 0 0 / 18px 18px,
    linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 90%, #0b1233), var(--panel)) !important;
  box-shadow: inset 0 1px #ffffff12, 0 8px 20px #00000024;
  scrollbar-width: thin;
}
body .appearance-palette-swatches > *,
body .note-color-options > *,
body .library-card-color-swatches > *,
body .multimedia-color-options > *,
body .notebook-color-swatches > *,
body .notebook-create-color-choices > *,
body .setting-color-choices > * {
  display: grid !important;
  place-items: center;
  width: 34px !important;
  max-width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  justify-self: center !important;
  align-self: center !important;
  transform: none !important;
}
body .appearance-palette-swatches > *:nth-child(even),
body .note-color-options > *:nth-child(even),
body .library-card-color-swatches > *:nth-child(even),
body .multimedia-color-options > *:nth-child(even),
body .notebook-color-swatches > *:nth-child(even),
body .notebook-create-color-choices > *:nth-child(even),
body .setting-color-choices > *:nth-child(even) {
  transform: translateY(8px) !important;
}
body .appearance-palette-swatches > * i,
body .note-color-options > * i,
body .library-card-color-swatches > * i,
body .multimedia-color-options > * i,
body .notebook-color-swatches > * i,
body .notebook-create-color-choices > * i,
body .setting-color-choices > * .setting-color-sample {
  display: block !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border: 2px solid #ffffff9e !important;
  border-radius: 50% !important;
  background: var(--swatch, var(--note-swatch, var(--card-swatch, var(--media-swatch, var(--notebook-swatch, var(--choice-color)))))) !important;
  box-shadow: inset 0 2px 3px #ffffff70, inset 0 -3px 5px #0000002b, 0 3px 7px #00000055 !important;
}
body .appearance-palette-swatches > * span,
body .note-color-options > * span,
body .library-card-color-swatches > * span,
body .multimedia-color-options > * span,
body .notebook-color-swatches > * span,
body .notebook-create-color-choices > * span,
body .setting-color-choices > * .setting-choice-label,
body .setting-color-choices > * .setting-color-check,
body .setting-color-choices > * .setting-color-tooltip { display: none !important; }
body .appearance-palette-swatches > *:hover,
body .appearance-palette-swatches > *:focus-visible,
body .note-color-options > *:hover,
body .note-color-options > *:focus-visible,
body .library-card-color-swatches > *:hover,
body .library-card-color-swatches > *:focus-visible,
body .multimedia-color-options > *:hover,
body .multimedia-color-options > *:focus-visible,
body .notebook-color-swatches > *:hover,
body .notebook-color-swatches > *:focus-visible,
body .notebook-create-color-choices > *:hover,
body .notebook-create-color-choices > *:focus-visible,
body .setting-color-choices > *:hover,
body .setting-color-choices > *:focus-visible {
  z-index: 2;
  outline: 2px solid color-mix(in srgb, var(--accent) 76%, #fff) !important;
  outline-offset: 2px;
  transform: translateY(-2px) scale(1.12) !important;
}
body .appearance-palette-swatches > *[aria-pressed="true"] i,
body .note-color-options > *.selected i,
body .library-card-color-swatches > *.selected i,
body .multimedia-color-options > *.selected i,
body .notebook-color-swatches > *.selected i,
body .notebook-create-color-choices > *.selected i,
body .setting-color-choices > *.selected .setting-color-sample {
  border-color: #fff !important;
  box-shadow: 0 0 0 3px var(--accent), inset 0 2px 3px #ffffff70, inset 0 -3px 5px #0000002b, 0 0 15px color-mix(in srgb, var(--accent) 72%, transparent) !important;
}
body .appearance-palette-swatches .palette-custom-color,
body .note-color-options .note-custom-color,
body .library-card-color-swatches .library-card-custom-color,
body .multimedia-color-options .multimedia-custom-color,
body .notebook-create-color-choices .notebook-custom-color {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  overflow: hidden;
  background: conic-gradient(#ff5a7b, #ffc94e, #45d8a5, #42a5f5, #9c6cff, #ff5a7b) !important;
}
body .appearance-palette-swatches .palette-custom-color input,
body .note-color-options .note-custom-color input,
body .library-card-color-swatches .library-card-custom-color input,
body .multimedia-color-options .multimedia-custom-color input,
body .notebook-create-color-choices .notebook-custom-color input { width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Carrusel de color base: carrusel táctil compacto en todos los
   formularios, con realce temporal al pasar por un tono antes de confirmarlo. */
body .appearance-palette-swatches,
body .note-color-options,
body .library-card-color-swatches,
body .multimedia-color-options,
body .notebook-color-swatches,
body .notebook-create-color-choices,
body .setting-color-choices {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: .45rem !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-height: 4.25rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: .2rem .1rem .45rem !important;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
body .appearance-palette-swatches > *,
body .note-color-options > *,
body .library-card-color-swatches > *,
body .multimedia-color-options > *,
body .notebook-color-swatches > *,
body .notebook-create-color-choices > *,
body .setting-color-choices > * {
  flex: 0 0 2.35rem !important;
  width: 2.35rem !important;
  min-width: 2.35rem !important;
  scroll-snap-align: start;
}
body .appearance-palette-swatches .palette-custom-color,
body .note-color-options .note-custom-color,
body .library-card-color-swatches .library-card-custom-color,
body .multimedia-color-options .multimedia-custom-color,
body .notebook-create-color-choices .notebook-custom-color {
  flex-basis: 5.5rem !important;
  width: 5.5rem !important;
  min-width: 5.5rem !important;
}
body .notebook-create-preview,
body .note-appearance,
body .library-card-color-picker {
  border-color: color-mix(in srgb, var(--palette-preview-color, var(--accent)) 58%, var(--line)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--palette-preview-color, transparent) 22%, transparent), 0 12px 28px #0003 !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* Todas las tarjetas de inicio comparten una única geometría, aunque una
   sección tenga más contenido que la otra. */
body #view-notes .library-section-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-columns: minmax(0, 1fr) !important;
}
body #view-notes .library-section-grid > .notebook-card-shell,
body #view-notes .library-section-grid > .library-item-card-shell {
  width: 100% !important;
  min-width: 0 !important;
  height: 270px !important;
  min-height: 270px !important;
  max-height: 270px !important;
}
body #view-notes .library-section-grid > .notebook-card-shell > .notebook-card,
body #view-notes .library-section-grid > .library-item-card-shell > .library-item-card,
body #view-notes .library-section-grid > .library-item-card-shell > .library-new-reminder-card {
  width: 100% !important;
  height: 270px !important;
  min-height: 270px !important;
  max-height: 270px !important;
  min-width: 0 !important;
}
@media (max-width: 700px) {
  body #view-notes .library-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 380px) {
  body #view-notes .library-section-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* La campana desactivada conserva el mismo icono real con una raya visible. */
body #view-notes .library-reminder-item .library-reminder-alert-action { position: absolute !important; overflow: visible !important; }
body #view-notes .library-reminder-item .library-reminder-alert-action:not(.is-enabled)::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 124%;
  border-radius: 3px;
  background: #ffecb5;
  box-shadow: 0 0 0 1px #7d2f14;
  content: '';
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Menu unico de creacion: fichas cuadradas, tactiles y consistentes en movil. */
.library-create-menu-dialog {
  width: min(680px, calc(100vw - 20px)) !important;
  max-height: min(780px, calc(100dvh - 18px));
  overflow-y: auto;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
  background: linear-gradient(155deg, #13202b, #0b141d 68%) !important;
}
.library-create-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 14px 16px 20px !important;
}
.library-create-option {
  --create-tone: #18d99b;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 8px !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--create-tone) 70%, #a4bac6) !important;
  border-radius: 22px !important;
  background: radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--create-tone) 32%, transparent), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--create-tone) 18%, #172735), #0c151d 75%) !important;
  box-shadow: inset 0 1px #ffffff30, inset 0 -2px #0008, 0 10px 20px #01070c88 !important;
  color: #f8fcff !important;
  padding: 12px !important;
  text-align: center !important;
  touch-action: manipulation;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease !important;
}
.library-create-option::before { position: absolute; inset: auto -28% -48% 18%; height: 66%; border-radius: 50%; background: color-mix(in srgb, var(--create-tone) 17%, transparent); content: ''; filter: blur(10px); pointer-events: none; }
.library-create-option:hover,
.library-create-option:focus-visible { border-color: var(--create-tone) !important; box-shadow: inset 0 1px #ffffff55, 0 14px 24px #01070cb2, 0 0 20px color-mix(in srgb, var(--create-tone) 35%, transparent) !important; outline: none !important; transform: translateY(-3px); }
.library-create-option:active { transform: translateY(1px) scale(.99); }
.library-create-option:disabled { opacity: 1 !important; filter: saturate(.72); }
.library-create-option[data-create-type="notebook"] { --create-tone: #19d99c; }
.library-create-option[data-create-type="note"] { --create-tone: #23bff5; }
.library-create-option[data-create-type="file"] { --create-tone: #7868ef; }
.library-create-option[data-create-type="reminder"] { --create-tone: #f6a432; }
.library-create-option[data-create-type="multimedia"] { --create-tone: #d963e9; }
.library-create-option[data-create-type="link"] { --create-tone: #32d5d2; }
.library-create-option[data-create-type="ai"] { --create-tone: #7c6cff; }
.library-create-option-icon {
  position: relative !important;
  z-index: 1;
  display: grid !important;
  place-items: center !important;
  width: min(100%, 92px) !important;
  height: min(100%, 92px) !important;
  border: 1px solid color-mix(in srgb, var(--create-tone) 62%, #eef8ff) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--create-tone) 28%, #172735), #0d151d) !important;
  box-shadow: inset 0 1px #ffffff4d, 0 8px 16px #0008 !important;
  color: var(--create-tone) !important;
  overflow: hidden;
}
.library-create-option-icon .official-reference-art { width: 100%; height: 100%; background-size: 220% auto; }
.library-create-option-icon .ian-icon { width: 42px; height: 42px; }
.library-create-option > span:nth-child(2) { position: relative; z-index: 1; display: grid !important; width: 100%; gap: 4px !important; min-width: 0; }
.library-create-option strong { overflow: hidden; color: #fff !important; font: 800 14px/1.15 Poppins, var(--ian-ui-font), sans-serif !important; text-overflow: ellipsis; white-space: nowrap; }
.library-create-option small { display: none !important; }
.library-create-option:disabled small { display: block !important; overflow: hidden; color: color-mix(in srgb, #fff 72%, var(--create-tone)) !important; font-size: 9px !important; text-overflow: ellipsis; white-space: nowrap; }
.library-create-option > b { display: none !important; }

/* Las apariencias del formulario heredan el color de la tarjeta elegida. */
[data-creation-type] { --creation-tone: #18d99b; }
[data-creation-type="notebook"] { --creation-tone: #19d99c; }
[data-creation-type="note"] { --creation-tone: #23bff5; }
[data-creation-type="file"] { --creation-tone: #7868ef; }
[data-creation-type="reminder"] { --creation-tone: #f6a432; }
[data-creation-type="multimedia"] { --creation-tone: #d963e9; }
[data-creation-type="link"] { --creation-tone: #32d5d2; }
[data-creation-type] .dialog-head { border-bottom: 1px solid color-mix(in srgb, var(--creation-tone) 45%, transparent); }
[data-creation-type] .primary-button { border-color: color-mix(in srgb, var(--creation-tone) 70%, #fff) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--creation-tone) 75%, #fff), var(--creation-tone)) !important; color: #071017 !important; }
.notebook-create-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.notebook-create-favorite,
.library-form-check { display: flex !important; align-items: center; gap: 8px; color: var(--text) !important; }
.notebook-create-favorite input,
.library-form-check input { width: 18px; height: 18px; accent-color: var(--creation-tone, var(--accent)); }
body #view-notes .library-context-actions .library-like-action {
  display: grid !important;
  border-color: #ff8c99 !important;
  background: linear-gradient(145deg, #f05262, #8d1f31 72%) !important;
  box-shadow: 0 3px 0 #661323, 0 8px 15px #33071288, inset 0 1px #ffffff66 !important;
  color: #fff !important;
}
body #view-notes .grid-view .library-context-actions .library-like-action {
  position: absolute !important;
  top: 162px !important;
  right: 6px !important;
  left: auto !important;
  bottom: auto !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
}
@media (min-width: 640px) {
  .library-create-options { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important; }
}
@media (max-width: 380px) {
  .library-create-menu-dialog { width: calc(100vw - 12px) !important; }
  .library-create-options { gap: 8px !important; padding-inline: 10px !important; }
  .library-create-option { border-radius: 18px !important; padding: 9px !important; }
  .library-create-option-icon { width: 72px !important; height: 72px !important; border-radius: 20px !important; }
  .library-create-option strong { font-size: 12px !important; }
}

#view-notes .library-note-paper[data-note-paper="ruled"] { background-image: repeating-linear-gradient(to bottom, transparent 0 25px, color-mix(in srgb, var(--note-ink) 13%, transparent) 26px 27px), linear-gradient(var(--note-bg), var(--note-bg)); }
#view-notes .library-note-paper[data-note-paper="grid"] { background-image: linear-gradient(color-mix(in srgb, var(--note-ink) 11%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--note-ink) 11%, transparent) 1px, transparent 1px), linear-gradient(var(--note-bg), var(--note-bg)); background-size: 18px 18px, 18px 18px, auto; }
#view-notes .library-note-paper[data-note-paper="dotted"] { background-image: radial-gradient(color-mix(in srgb, var(--note-ink) 20%, transparent) 1px, transparent 1.5px), linear-gradient(var(--note-bg), var(--note-bg)); background-size: 14px 14px, auto; }

/* Un solo marcador afectivo: el corazon rojo controla Favorito. */
body #view-notes .library-context-actions .library-favorite-action {
  border-color: #ff8c99 !important;
  background: linear-gradient(145deg, #f05262, #8d1f31 72%) !important;
  box-shadow: 0 3px 0 #661323, 0 8px 15px #33071288, inset 0 1px #ffffff66 !important;
  color: #fff !important;
}

/* Fichas reales de CuaderNOTE: una misma silueta para cuadernos, notas,
   archivos y recordatorios. El color se toma del objeto guardado. */
body #view-notes .grid-view .notebooks-grid {
  grid-template-columns: repeat(auto-fit, minmax(188px, 220px)) !important;
  justify-content: center !important;
  gap: 18px !important;
}
body #view-notes .grid-view .notebooks-grid > .notebook-card-shell,
body #view-notes .grid-view .notebooks-grid > .library-item-card-shell {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: transparent !important;
  box-shadow: none !important;
}
body #view-notes .grid-view .notebook-card,
body #view-notes .grid-view .library-item-card,
body #view-notes .grid-view .library-note-open,
body #view-notes .grid-view .library-media-open,
body #view-notes .grid-view .library-reminder-open {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  place-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 19px 35px 16px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--library-card-accent, #18d99b) 68%, #ccebf5) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 78% 10%, color-mix(in srgb, var(--library-card-accent, #18d99b) 52%, #ffffff 8%), transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--library-card-accent, #18d99b) 27%, #172936), #0b141d 76%) !important;
  box-shadow: inset 0 1px #ffffff4d, inset 0 -2px #000a, 0 14px 27px #02070fa6 !important;
  color: #f8fcff !important;
  text-align: center !important;
}
body #view-notes .grid-view .notebook-card:hover,
body #view-notes .grid-view .notebook-card:focus-visible,
body #view-notes .grid-view .library-item-card:hover,
body #view-notes .grid-view .library-item-card:focus-visible,
body #view-notes .grid-view .library-note-open:hover,
body #view-notes .grid-view .library-note-open:focus-visible,
body #view-notes .grid-view .library-media-open:hover,
body #view-notes .grid-view .library-media-open:focus-visible,
body #view-notes .grid-view .library-reminder-open:hover,
body #view-notes .grid-view .library-reminder-open:focus-visible {
  border-color: var(--library-card-accent, #18d99b) !important;
  box-shadow: inset 0 1px #ffffff66, inset 0 -2px #000a, 0 16px 30px #02070faa, 0 0 20px color-mix(in srgb, var(--library-card-accent, #18d99b) 25%, transparent) !important;
  outline: none !important;
  transform: translateY(-2px) !important;
}
body #view-notes .grid-view .notebook-cover-visual,
body #view-notes .grid-view .library-item-icon,
body #view-notes .grid-view .library-note-paper,
body #view-notes .grid-view .reminder-calendar,
body #view-notes .grid-view .media-tv {
  grid-row: 1 !important;
  align-self: end !important;
  width: min(100%, 132px) !important;
  height: 132px !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--library-card-accent, #18d99b) 55%, #d9eef6) !important;
  border-radius: 23px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--library-card-accent, #18d99b) 20%, #081117), #16214d) !important;
  box-shadow: inset 0 1px #ffffff47, 0 10px 17px #0009 !important;
  overflow: hidden !important;
}
body #view-notes .grid-view .notebook-cover-visual { display: grid !important; place-items: center !important; }
body #view-notes .grid-view .notebook-cover-visual > * { width: 100% !important; height: 100% !important; }
body #view-notes .grid-view .notebook-cover-visual img,
body #view-notes .grid-view .library-item-icon img,
body #view-notes .grid-view .library-item-icon .official-reference-art,
body #view-notes .grid-view .official-reference-art { width: 100% !important; height: 100% !important; border-radius: inherit !important; }
body #view-notes .grid-view .library-note-paper { padding: 12px 10px !important; text-align: left !important; }
body #view-notes .grid-view .library-note-content { font-size: 12px !important; line-height: 1.35 !important; }
body #view-notes .grid-view .reminder-calendar { display: grid !important; place-content: center !important; }
body #view-notes .grid-view .library-item-copy,
body #view-notes .grid-view .notebook-card-copy {
  grid-row: 2 !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 2px !important;
  place-items: center !important;
  text-align: center !important;
}
body #view-notes .grid-view .library-item-copy strong,
body #view-notes .grid-view .notebook-card-copy strong {
  max-width: 100% !important;
  overflow: hidden !important;
  color: #fff !important;
  font: 800 clamp(15px, 1.7vw, 19px)/1.15 Poppins, var(--ian-ui-font), sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body #view-notes .grid-view .library-item-kind,
body #view-notes .grid-view .notebook-card-kind { display: none !important; }
body #view-notes .grid-view .library-item-meta,
body #view-notes .grid-view .notebook-card-meta { max-width: 100% !important; overflow: hidden !important; color: #d5e2e7 !important; font-size: 9px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body #view-notes .grid-view .notebook-card-copy em,
body #view-notes .grid-view .reminder-alert-status { display: none !important; }

/* Las cuatro acciones siguen disponibles, pero ahora viven dentro de la ficha
   sin alterar su tamaño ni crear paneles laterales. */
body #view-notes .grid-view .library-context-actions > details,
body #view-notes .grid-view .notebook-context-actions .notebook-card-menu,
body #view-notes .grid-view .library-note-menu,
body #view-notes .grid-view .library-media-menu,
body #view-notes .grid-view .library-reminder-menu,
body #view-notes .grid-view .library-item-menu { top: 13px !important; left: 10px !important; }
body #view-notes .grid-view .library-context-actions .trash-action { top: 52px !important; left: 10px !important; }
body #view-notes .grid-view .library-context-actions .library-note-pin-action { top: 13px !important; right: 10px !important; }
body #view-notes .grid-view .library-context-actions .library-favorite-action { top: 52px !important; right: 10px !important; }
body #view-notes .grid-view .library-context-actions .library-note-pin-action,
body #view-notes .grid-view .library-context-actions .library-favorite-action,
body #view-notes .grid-view .library-context-actions .trash-action,
body #view-notes .grid-view .notebook-context-actions .notebook-card-menu > summary,
body #view-notes .grid-view .library-note-menu > summary,
body #view-notes .grid-view .library-media-menu > summary,
body #view-notes .grid-view .library-reminder-menu > summary,
body #view-notes .grid-view .library-item-menu > summary { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; border-radius: 9px !important; font-size: 15px !important; }

body #view-notes .grid-view .library-context-actions > details,
body #view-notes .grid-view .notebook-context-actions .notebook-card-menu > summary { color: #fff !important; }
body #view-notes .grid-view .library-context-actions .library-note-pin-action { border-color: #8be9ff !important; background: linear-gradient(145deg, #1ba9d8, #18558d 72%) !important; color: #fff !important; }
body #view-notes .grid-view .library-context-actions .library-favorite-action { border-color: #ff9daa !important; background: linear-gradient(145deg, #f05262, #8d1f31 72%) !important; color: #fff !important; }
body #view-notes .grid-view .library-context-actions .trash-action { border-color: #ff9a9a !important; background: linear-gradient(145deg, #d94b55, #741f31 72%) !important; color: #fff !important; }
body #view-notes .grid-view .library-context-actions > details > summary,
body #view-notes .grid-view .notebook-context-actions .notebook-card-menu > summary { display: grid !important; place-items: center !important; padding: 0 !important; font-size: 23px !important; line-height: 1 !important; }

/* Paleta persistente para Archivo y Recordatorio. */
.library-card-color-picker { display: grid; gap: 9px; padding: 11px; border: 1px solid color-mix(in srgb, var(--creation-tone, #18d99b) 40%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--creation-tone, #18d99b) 8%, var(--panel)); }
.library-card-color-picker > div:first-child { display: grid; gap: 2px; }
.library-card-color-picker strong { color: var(--text); font-size: 12px; }
.library-card-color-picker small { color: var(--muted); font-size: 10px; }
.library-card-color-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.library-card-color-swatch { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #ffffff66; border-radius: 9px; background: #111c25; cursor: pointer; }
.library-card-color-swatch i { width: 17px; height: 17px; border-radius: 6px; background: var(--card-swatch); box-shadow: inset 0 1px #ffffff88; }
.library-card-color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--creation-tone, #18d99b); }
.library-card-custom-color { display: inline-grid; place-items: center; width: 28px; height: 28px; overflow: hidden; border: 1px solid #ffffff66; border-radius: 9px; cursor: pointer; }
.library-card-custom-color span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.library-card-custom-color input { width: 36px; height: 36px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.notebook-color-picker { display: grid; gap: 8px; padding: 10px; border: 1px solid color-mix(in srgb, var(--creation-tone, #18d99b) 40%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--creation-tone, #18d99b) 8%, var(--panel)); }
.notebook-color-picker > span { color: var(--text); font-size: 12px; font-weight: 700; }
.notebook-color-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.notebook-color-swatch { display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid #ffffff6b; border-radius: 10px; background: #13212a; cursor: pointer; }
.notebook-color-swatch i { width: 19px; height: 19px; border-radius: 7px; background: var(--notebook-swatch); box-shadow: inset 0 1px #ffffff88, 0 2px 4px #0007; }
.notebook-color-swatch span { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.notebook-color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--accent), 0 4px 9px #0007; }
.notebook-color-dialog-body { display: grid; gap: 12px; padding: 14px 0; }
.notebook-color-dialog-body .notebook-color-swatches { gap: 10px; }
.notebook-color-dialog-body .notebook-color-swatch { width: 74px; height: 62px; align-content: center; }
@media (max-width: 560px) {
  body #view-notes .grid-view .notebooks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px !important; }
  body #view-notes .grid-view .notebooks-grid > .notebook-card-shell,
  body #view-notes .grid-view .notebooks-grid > .library-item-card-shell { width: 100% !important; max-width: none !important; }
  body #view-notes .grid-view .notebook-card,
  body #view-notes .grid-view .library-item-card,
  body #view-notes .grid-view .library-note-open,
  body #view-notes .grid-view .library-media-open,
  body #view-notes .grid-view .library-reminder-open { padding: 15px 25px 12px !important; border-radius: 22px !important; }
  body #view-notes .grid-view .notebook-cover-visual,
  body #view-notes .grid-view .library-item-icon,
  body #view-notes .grid-view .library-note-paper,
  body #view-notes .grid-view .reminder-calendar,
  body #view-notes .grid-view .media-tv { width: min(100%, 92px) !important; height: 92px !important; border-radius: 17px !important; }
  body #view-notes .grid-view .library-item-copy strong,
  body #view-notes .grid-view .notebook-card-copy strong { font-size: 13px !important; }
  body #view-notes .grid-view .library-context-actions .library-note-pin-action,
  body #view-notes .grid-view .library-context-actions .library-favorite-action,
  body #view-notes .grid-view .library-context-actions .trash-action,
  body #view-notes .grid-view .notebook-context-actions .notebook-card-menu > summary,
  body #view-notes .grid-view .library-note-menu > summary,
  body #view-notes .grid-view .library-media-menu > summary,
  body #view-notes .grid-view .library-reminder-menu > summary,
  body #view-notes .grid-view .library-item-menu > summary { width: 25px !important; min-width: 25px !important; height: 25px !important; min-height: 25px !important; border-radius: 8px !important; font-size: 12px !important; }
  body #view-notes .grid-view .library-context-actions > details,
  body #view-notes .grid-view .notebook-context-actions .notebook-card-menu,
  body #view-notes .grid-view .library-note-menu,
  body #view-notes .grid-view .library-media-menu,
  body #view-notes .grid-view .library-reminder-menu,
  body #view-notes .grid-view .library-item-menu { top: 8px !important; left: 7px !important; }
  body #view-notes .grid-view .library-context-actions .trash-action { top: 38px !important; left: 7px !important; }
  body #view-notes .grid-view .library-context-actions .library-note-pin-action { top: 8px !important; right: 7px !important; }
  body #view-notes .grid-view .library-context-actions .library-favorite-action { top: 38px !important; right: 7px !important; }
}

/* La vista previa de una nota conserva siempre su papel y el color elegido. */
body #view-notes .grid-view .library-note-paper[data-note-paper="ruled"] { background: repeating-linear-gradient(to bottom, transparent 0 25px, color-mix(in srgb, var(--note-ink) 13%, transparent) 26px 27px), linear-gradient(var(--note-bg), var(--note-bg)) !important; }
body #view-notes .grid-view .library-note-paper[data-note-paper="grid"] { background: linear-gradient(color-mix(in srgb, var(--note-ink) 11%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--note-ink) 11%, transparent) 1px, transparent 1px), linear-gradient(var(--note-bg), var(--note-bg)) !important; background-size: 18px 18px, 18px 18px, auto !important; }
body #view-notes .grid-view .library-note-paper[data-note-paper="dotted"] { background: radial-gradient(color-mix(in srgb, var(--note-ink) 20%, transparent) 1px, transparent 1.5px), linear-gradient(var(--note-bg), var(--note-bg)) !important; background-size: 14px 14px, auto !important; }
body #view-notes .grid-view .notebook-card-copy,
body #view-notes .grid-view .notebook-card-copy .notebook-card-meta,
body #view-notes .grid-view .library-item-copy { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
@media (min-width: 561px) {
  body #view-notes .grid-view .notebooks-grid { grid-template-columns: repeat(auto-fit, minmax(min(310px, calc((100vw - 60px) / 2)), 310px)) !important; gap: 20px !important; }
  body #view-notes .grid-view .notebooks-grid > .notebook-card-shell,
  body #view-notes .grid-view .notebooks-grid > .library-item-card-shell { width: min(310px, calc((100vw - 60px) / 2)) !important; max-width: 310px !important; min-width: 0 !important; height: min(310px, calc((100vw - 60px) / 2)) !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; }
  body #view-notes .grid-view .library-context-actions > details,
  body #view-notes .grid-view .notebook-context-actions .notebook-card-menu { top: 12px !important; }
  body #view-notes .grid-view .library-context-actions .trash-action { top: 60px !important; }
  body #view-notes .grid-view .library-context-actions .library-note-pin-action { top: 12px !important; }
  body #view-notes .grid-view .library-context-actions .library-favorite-action { top: 60px !important; }
}

/* Editor de cuaderno inspirado en una libreta/tableta: barra superior compacta,
   papel amplio y cuadriculado, sin alterar autoguardado ni herramientas. */
body dialog.notebook-book-dialog {
  width: min(1120px, calc(100vw - 18px)) !important;
  max-width: none !important;
  max-height: calc(100dvh - 14px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #35dca080 !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, #14232d, #0a131b 78%) !important;
  box-shadow: 0 24px 70px #000c, 0 0 30px #00ff6620 !important;
  color: #eef8f4 !important;
}
body dialog.notebook-book-dialog::backdrop { background: #02070dcc !important; backdrop-filter: blur(8px); }
body .notebook-book-dialog .book-head {
  display: flex !important;
  align-items: center !important;
  min-height: 66px !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid #ffffff18 !important;
  background: linear-gradient(180deg, #172b36, #0e1b23) !important;
}
body .notebook-book-dialog .book-head-title { min-width: 0 !important; }
body .notebook-book-dialog .book-head-title input {
  max-width: min(420px, 48vw) !important;
  border: 0 !important;
  background: transparent !important;
  color: #f8fffb !important;
  font-size: 20px !important;
  font-weight: 850 !important;
}
body .notebook-book-dialog .book-head-title small { color: #7ee2b8 !important; }
body .notebook-book-dialog .book-cover { width: 42px !important; height: 48px !important; border-radius: 11px !important; box-shadow: inset 0 1px #ffffff3c, 0 6px 12px #0008 !important; }
body .notebook-book-dialog .book-head-actions { gap: 7px !important; }
body .notebook-book-dialog .book-page-counter { color: #9eb8c2 !important; }
body .notebook-book-dialog .book-layout { grid-template-columns: minmax(0, 1fr) 230px !important; gap: 16px !important; padding: 16px !important; overflow: auto !important; }
body .notebook-book-dialog .book-page {
  min-height: 0 !important;
  gap: 11px !important;
  padding: 15px !important;
  border: 1px solid #b4d4db66 !important;
  border-radius: 19px !important;
  background: #eaf3f0 !important;
  box-shadow: inset 0 1px #ffffff, 0 12px 24px #0008 !important;
}
body .notebook-book-dialog .page-top-row { padding-bottom: 2px !important; border-bottom: 1px solid #345a6466 !important; }
body .notebook-book-dialog .book-page-title { border: 0 !important; border-bottom: 2px solid #3c766c66 !important; border-radius: 0 !important; background: transparent !important; color: #18352f !important; font-size: 21px !important; }
body .notebook-book-dialog .book-page-content {
  min-height: min(58vh, 610px) !important;
  max-height: none !important;
  padding: 20px 24px !important;
  border-left: 0 !important;
  border-radius: 10px !important;
  background-color: var(--page-background, #fffdf5) !important;
  color: var(--page-ink, #213047) !important;
  line-height: 1.85 !important;
  box-shadow: inset 0 0 0 1px #58736f28, inset 0 1px #ffffffb8 !important;
}
body .notebook-book-dialog .book-editor-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 40px !important;
  padding: 5px 7px !important;
  overflow-x: auto !important;
  border: 1px solid #8ba9a855 !important;
  border-radius: 12px !important;
  background: #dcebe7 !important;
  scrollbar-width: thin;
}
body .notebook-book-dialog .book-editor-toolbar > button,
body .notebook-book-dialog .book-editor-toolbar > details > summary {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  min-width: 31px !important;
  height: 30px !important;
  padding: 0 8px !important;
  border: 1px solid #6e8f8c66 !important;
  border-radius: 8px !important;
  background: #f7fffc !important;
  color: #1b3c3a !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
body .notebook-book-dialog .book-editor-toolbar > button:hover,
body .notebook-book-dialog .book-editor-toolbar > details[open] > summary { border-color: #168f78 !important; background: #c9f5e2 !important; }
body .notebook-book-dialog .toolbar-divider { width: 1px !important; height: 22px !important; background: #72938f88 !important; }
body .notebook-book-dialog .book-tasks { border: 1px solid #2f5b5b !important; border-radius: 17px !important; background: #10262b !important; box-shadow: inset 0 1px #ffffff12, 0 10px 20px #0006 !important; }
body .notebook-book-dialog .book-tasks input { border-color: #416b6b !important; background: #0b181e !important; }
body .notebook-book-dialog .page-controls { padding-top: 9px !important; border-top: 1px solid #5d817a55 !important; color: #496d68 !important; }
@media (max-width: 700px) {
  body dialog.notebook-book-dialog { width: calc(100vw - 10px) !important; max-height: calc(100dvh - 8px) !important; border-radius: 18px !important; }
  body .notebook-book-dialog .book-head { align-items: flex-start !important; padding: 9px 10px !important; }
  body .notebook-book-dialog .book-head-title input { max-width: 42vw !important; font-size: 16px !important; }
  body .notebook-book-dialog .book-layout { grid-template-columns: 1fr !important; padding: 9px !important; gap: 10px !important; }
  body .notebook-book-dialog .book-page-content { min-height: 52vh !important; padding: 15px !important; }
  body .notebook-book-dialog .book-tasks { order: 2 !important; }
}

/* Selector de plantilla de papel al crear un cuaderno. */
.notebook-paper-picker { display: grid; gap: 9px; margin: 0 24px 15px; padding: 12px; border: 1px solid #3f777366; border-radius: 15px; background: linear-gradient(145deg, #19302f, #102022); }
.notebook-paper-picker > div:first-child { display: grid; gap: 2px; }
.notebook-paper-picker strong { color: #eafff6; font-size: 13px; }
.notebook-paper-picker small { color: #9bb9b6; font-size: 10px; }
.notebook-paper-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.notebook-paper-choice { display: grid; gap: 5px; justify-items: center; min-width: 0; padding: 6px; border: 1px solid #76999766; border-radius: 11px; background: #0c171d; color: #cfe8e2; cursor: pointer; }
.notebook-paper-choice:hover, .notebook-paper-choice.selected { border-color: #55e8b0; background: #17413b; box-shadow: 0 0 0 2px #38d99a44; }
.notebook-paper-choice span { overflow: hidden; max-width: 100%; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.paper-choice-preview { display: block; width: 54px; height: 42px; border: 1px solid #95a5a3; border-radius: 5px; background-color: #fffdf5; box-shadow: inset 0 0 0 1px #ffffffaa, 0 3px 7px #0008; }
.paper-choice-plain { background: #fffdf5; }
.paper-choice-ruled { background-image: repeating-linear-gradient(to bottom, transparent 0 8px, #6b7d7c99 9px 10px); }
.paper-choice-grid { background-image: linear-gradient(#71827f88 1px, transparent 1px), linear-gradient(90deg, #71827f88 1px, transparent 1px); background-size: 9px 9px; }
.paper-choice-dotted { background-image: radial-gradient(#687a7899 1px, transparent 1.5px); background-size: 8px 8px; }
.paper-choice-cornell { background-image: linear-gradient(90deg, transparent 0 25%, #d56f7188 25% 27%, transparent 27%), repeating-linear-gradient(to bottom, transparent 0 8px, #6b7d7c88 9px 10px); }
.paper-choice-agenda { background-image: linear-gradient(90deg, transparent 0 25%, #d56f7188 25% 27%, transparent 27%), repeating-linear-gradient(to bottom, transparent 0 8px, #6b7d7c88 9px 10px); background-size: 100% 100%, 100% 10px; }
.paper-choice-planner { background-image: linear-gradient(#71827f88 1px, transparent 1px), linear-gradient(90deg, #71827f88 1px, transparent 1px); background-size: 18px 18px; }
.paper-choice-diary { background-image: repeating-linear-gradient(to bottom, transparent 0 11px, #6b7d7c88 12px 13px); }
@media (max-width: 560px) {
  .notebook-paper-picker { margin-inline: 14px; }
  .notebook-paper-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .paper-choice-preview { width: 45px; height: 34px; }
  .notebook-paper-choice { padding: 5px 3px; }
  .notebook-paper-choice span { font-size: 9px; }
}

/* Flujo exclusivo de creación de Cuadernos: portada argollada, motivos y
   vista previa en tiempo real. */
body dialog.notebook-create-reference-dialog {
  width: min(520px, calc(100vw - 20px));
  max-height: min(900px, calc(100dvh - 14px));
  padding: 0;
  overflow: hidden auto;
  border: 1px solid #2ce5a5;
  border-radius: 26px;
  background: radial-gradient(circle at 50% 0%, #0e3c32 0, #06231f 38%, #041714 100%);
  color: #f0fff9;
  box-shadow: 0 28px 100px #000b, 0 0 0 1px #1b6f5c55 inset;
}
body dialog.notebook-create-reference-dialog::backdrop { background: #020a0dcc; backdrop-filter: blur(8px); }
body .notebook-create-reference-dialog form { display: flex; min-height: 100%; flex-direction: column; gap: 0; }
body .notebook-create-reference-head { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; padding: 18px 18px 12px; background: linear-gradient(#06231ff5, #06231fe8); backdrop-filter: blur(12px); }
body .notebook-create-reference-head > div { text-align: center; }
body .notebook-create-reference-head .eyebrow { margin: 0 0 2px; color: #5ceab6; font-size: 10px; letter-spacing: .18em; }
body .notebook-create-reference-head h2 { margin: 0; color: #f3fff9; font-size: clamp(22px, 5vw, 29px); }
body .notebook-create-back,
body .notebook-create-reference-head .close-button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #70a89b66; border-radius: 50%; background: #09241f; color: #e9fff7; font-size: 29px; line-height: 1; cursor: pointer; }
body .notebook-create-back:hover,
body .notebook-create-reference-head .close-button:hover { border-color: #52e7b1; background: #12483c; }
body .notebook-create-body { display: grid; gap: 18px; padding: 4px 22px 16px; }
body .notebook-create-preview { display: grid; min-height: 322px; place-items: center; align-content: center; gap: 13px; padding: 18px 12px 20px; border: 1px solid #32806e99; border-radius: 22px; background: linear-gradient(150deg, #0c332c, #061c1a); box-shadow: inset 0 1px #d5fff022, 0 18px 34px #0005; }
body .notebook-create-preview .notebook-cover-art { width: min(250px, 68vw); height: min(280px, 70vw); }
body .notebook-preview-copy { display: grid; justify-items: center; gap: 2px; text-align: center; }
body .notebook-preview-copy strong { max-width: 90%; overflow: hidden; color: #f4fffb; font-size: clamp(18px, 4.5vw, 25px); text-overflow: ellipsis; white-space: nowrap; }
body .notebook-preview-copy small { color: #8fd5bf; font-size: 12px; }
body .notebook-motif-picker { display: grid; gap: 10px; }
body .notebook-motif-picker h3,
body .notebook-create-color-picker h3 { margin: 0; color: #effff8; font-size: 19px; }
body .notebook-motif-choices { display: flex; gap: 10px; overflow-x: auto; padding: 3px 3px 9px; scrollbar-width: thin; scrollbar-color: #36dba4 transparent; }
body .notebook-motif-choice { display: grid; flex: 0 0 92px; gap: 6px; justify-items: center; padding: 7px 5px 8px; border: 1px solid #518c7d55; border-radius: 15px; background: #071b1a; color: #bcddd2; cursor: pointer; }
body .notebook-motif-choice:hover,
body .notebook-motif-choice.selected { border-color: #4af0ae; background: #0d3a30; box-shadow: 0 0 0 2px #3ee6a355, 0 8px 20px #0005; }
body .notebook-motif-choice strong { font-size: 11px; line-height: 1.1; }
body .notebook-motif-choice small { min-height: 23px; color: #78aa9d; font-size: 9px; line-height: 1.15; text-align: center; }
body .notebook-motif-choice-cover { display: block; width: 67px; height: 76px; overflow: visible; }
body .notebook-motif-choice-cover .notebook-cover-art { width: 58px; height: 72px; margin-left: 8px; }
body .notebook-create-name,
body .notebook-create-advanced label { display: grid; gap: 7px; color: #e7fff6; font-size: 15px; }
body .notebook-create-name input,
body .notebook-create-advanced input,
body .notebook-create-advanced textarea,
body .notebook-create-advanced select { min-height: 48px; border: 1px solid #7ba69d; border-radius: 14px; background: #071b1a; color: #edfff8; padding: 0 15px; font: inherit; outline: none; }
body .notebook-create-advanced textarea { min-height: 76px; padding-top: 12px; resize: vertical; }
body .notebook-create-name input:focus,
body .notebook-create-advanced input:focus,
body .notebook-create-advanced textarea:focus,
body .notebook-create-advanced select:focus { border-color: #4cecb1; box-shadow: 0 0 0 3px #4cecb133; }
body .notebook-create-name input::placeholder,
body .notebook-create-advanced input::placeholder,
body .notebook-create-advanced textarea::placeholder { color: #8daaa4; }
body .notebook-create-color-picker { display: grid; gap: 10px; }
body .notebook-create-color-choices { display: flex; flex-wrap: wrap; gap: 13px; }
body .notebook-create-color-choices .notebook-color-swatch { display: grid; width: 45px; gap: 4px; justify-items: center; padding: 0; border: 0; background: transparent; color: #9bc8ba; cursor: pointer; }
body .notebook-create-color-choices .notebook-color-swatch i { display: block; width: 34px; height: 34px; border: 2px solid transparent; border-radius: 50%; background: var(--notebook-swatch); box-shadow: inset 0 0 0 3px #071b1a, 0 4px 11px #0007; }
body .notebook-create-color-choices .notebook-color-swatch.selected i { border-color: #d8fff0; box-shadow: 0 0 0 3px #42e9aa, inset 0 0 0 3px #071b1a, 0 0 17px #42e9aa99; }
body .notebook-create-color-choices .notebook-color-swatch span { font-size: 9px; }
body .notebook-create-advanced { border-top: 1px solid #3f746966; padding-top: 12px; }
body .notebook-create-advanced > summary { color: #a8d8cb; cursor: pointer; font-size: 13px; }
body .notebook-create-advanced > div { display: grid; gap: 12px; padding-top: 12px; }
body .notebook-create-favorite { display: flex; align-items: center; gap: 8px; color: #c9eee1; font-size: 13px; }
body .notebook-create-favorite input { accent-color: #27d999; }
body .notebook-create-submit-row { position: sticky; bottom: 0; z-index: 3; margin: 0; padding: 13px 22px 20px; background: linear-gradient(transparent, #041714 25%); }
body .notebook-create-submit-row .primary-button { width: 100%; min-height: 56px; border: 1px solid #79ffd0; border-radius: 999px; background: linear-gradient(100deg, #22aa76, #2ddc9e); color: #f1fff9; font-size: 18px; font-weight: 750; box-shadow: 0 8px 24px #19b88166, inset 0 1px #d5fff088; }
body .notebook-create-submit-row .primary-button span { margin-left: 12px; font-size: 25px; vertical-align: -2px; }

/* Portadas reales y reutilizables: siempre muestran las argollas a la izquierda. */
body #view-notes .notebook-cover-visual { overflow: visible !important; background: transparent !important; }
body #view-notes .notebook-cover-art { position: relative; display: block; overflow: hidden; border: 1px solid color-mix(in srgb, var(--notebook-cover-accent) 70%, #d8fff3); border-radius: 13px 16px 16px 13px; background: linear-gradient(145deg, #173b35, #061815 68%, color-mix(in srgb, var(--notebook-cover-accent) 30%, #121c44)); box-shadow: inset 7px 0 0 #0007, inset -1px 0 #ffffff22, 0 8px 18px #0008; }
body #view-notes .notebook-cover-art .notebook-cover-spine { position: absolute; inset: 0 auto 0 14%; width: 2px; background: #c8fff055; box-shadow: 4px 0 #0004; }
body #view-notes .notebook-cover-rings { position: absolute; z-index: 2; top: 5%; bottom: 5%; left: 3px; display: flex; flex-direction: column; justify-content: space-around; width: 20px; }
body #view-notes .notebook-cover-rings i { display: block; width: 18px; height: 7px; border: 2px solid #d9fff0; border-left-color: #6c9e91; border-radius: 50%; background: #142c27; box-shadow: 0 2px 3px #0008; }
body #view-notes .notebook-cover-motif-icon { position: absolute; inset: 23% 10% 24% 26%; display: grid; place-items: center; color: color-mix(in srgb, var(--notebook-cover-accent) 75%, #eafff6); font-size: clamp(28px, 9vw, 70px); text-shadow: 0 2px 12px #0b1233, 0 0 22px color-mix(in srgb, var(--notebook-cover-accent) 55%, transparent); }
body #view-notes .notebook-cover-motif-lines { position: absolute; inset: 18% 14% 20% 25%; border: 1px solid color-mix(in srgb, var(--notebook-cover-accent) 60%, transparent); border-radius: 45%; opacity: .6; transform: rotate(-12deg); }
body #view-notes .notebook-cover-art.notebook-motif-academic { background: radial-gradient(circle at 68% 45%, #2469a777 0 15%, transparent 16%), linear-gradient(145deg, #173b70, #071527); }
body #view-notes .notebook-cover-art.notebook-motif-professional { background: linear-gradient(145deg, #293977, #16214d 67%, #8d703b); }
body #view-notes .notebook-cover-art.notebook-motif-technology { background: radial-gradient(circle at 70% 35%, #00b9d566 0 11%, transparent 12%), linear-gradient(145deg, #0c4260, #07162d 68%, #077e9a); }
body #view-notes .notebook-cover-art.notebook-motif-nature { background: radial-gradient(ellipse at 65% 45%, #2f9e5b88 0 17%, transparent 18%), linear-gradient(145deg, #1a4a39, #061713 66%, #1c885a); }
body #view-notes .notebook-cover-art.notebook-motif-creative { background: radial-gradient(circle at 66% 38%, #c26ff077 0 15%, transparent 16%), linear-gradient(145deg, #40235f, #170e2d 68%, #933f9f); }
body #view-notes .notebook-cover-image-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
body #view-notes .notebook-card-shell .notebook-cover-visual .notebook-cover-art { width: 100%; height: 100%; border-radius: inherit; }
body #view-notes .notebook-card-shell .notebook-card-copy { position: relative; z-index: 1; }
body #view-notes .notebooks-only-view .notebook-new-card-shell { display: none !important; }
body .notebook-create-reference-dialog .notebook-cover-art { position: relative; display: block; overflow: hidden; border: 1px solid color-mix(in srgb, var(--notebook-cover-accent) 70%, #d8fff3); border-radius: 13px 16px 16px 13px; background: linear-gradient(145deg, #173b35, #061815 68%, color-mix(in srgb, var(--notebook-cover-accent) 30%, #121c44)); box-shadow: inset 7px 0 0 #0007, inset -1px 0 #ffffff22, 0 8px 18px #0008; }
body .notebook-create-reference-dialog .notebook-cover-art .notebook-cover-spine { position: absolute; inset: 0 auto 0 14%; width: 2px; background: #c8fff055; box-shadow: 4px 0 #0004; }
body .notebook-create-reference-dialog .notebook-cover-rings { position: absolute; z-index: 2; top: 5%; bottom: 5%; left: 3px; display: flex; flex-direction: column; justify-content: space-around; width: 20px; }
body .notebook-create-reference-dialog .notebook-cover-rings i { display: block; width: 18px; height: 7px; border: 2px solid #d9fff0; border-left-color: #6c9e91; border-radius: 50%; background: #142c27; box-shadow: 0 2px 3px #0008; }
body .notebook-create-reference-dialog .notebook-cover-motif-icon { position: absolute; inset: 23% 10% 24% 26%; display: grid; place-items: center; color: color-mix(in srgb, var(--notebook-cover-accent) 75%, #eafff6); font-size: clamp(28px, 9vw, 70px); text-shadow: 0 2px 12px #0b1233, 0 0 22px color-mix(in srgb, var(--notebook-cover-accent) 55%, transparent); }
body .notebook-create-reference-dialog .notebook-cover-motif-lines { position: absolute; inset: 18% 14% 20% 25%; border: 1px solid color-mix(in srgb, var(--notebook-cover-accent) 60%, transparent); border-radius: 45%; opacity: .6; transform: rotate(-12deg); }
body .notebook-create-reference-dialog .notebook-cover-art.notebook-motif-academic { background: radial-gradient(circle at 68% 45%, #2469a777 0 15%, transparent 16%), linear-gradient(145deg, #173b70, #071527); }
body .notebook-create-reference-dialog .notebook-cover-art.notebook-motif-professional { background: linear-gradient(145deg, #293977, #16214d 67%, #8d703b); }
body .notebook-create-reference-dialog .notebook-cover-art.notebook-motif-technology { background: radial-gradient(circle at 70% 35%, #00b9d566 0 11%, transparent 12%), linear-gradient(145deg, #0c4260, #07162d 68%, #077e9a); }
body .notebook-create-reference-dialog .notebook-cover-art.notebook-motif-nature { background: radial-gradient(ellipse at 65% 45%, #2f9e5b88 0 17%, transparent 18%), linear-gradient(145deg, #1a4a39, #061713 66%, #1c885a); }
body .notebook-create-reference-dialog .notebook-cover-art.notebook-motif-creative { background: radial-gradient(circle at 66% 38%, #c26ff077 0 15%, transparent 16%), linear-gradient(145deg, #40235f, #170e2d 68%, #933f9f); }
@media (max-width: 560px) {
  body dialog.notebook-create-reference-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 8px); border-radius: 22px; }
  body .notebook-create-reference-head { padding: 13px 12px 9px; }
  body .notebook-create-body { padding-inline: 15px; gap: 15px; }
  body .notebook-create-preview { min-height: 270px; }
  body .notebook-create-preview .notebook-cover-art { width: 180px; height: 205px; }
  body .notebook-motif-choice { flex-basis: 84px; }
  body .notebook-motif-choice-cover { width: 60px; height: 68px; }
  body .notebook-motif-choice-cover .notebook-cover-art { width: 52px; height: 64px; }
  body .notebook-create-submit-row { padding-inline: 15px; }
}
/* Biblioteca mixta: filtro compacto para las cuatro creaciones visibles. */
.library-type-filter {
  position: relative;
  z-index: 8;
  width: min(100%, 16rem);
  margin: .65rem auto .35rem;
}
.library-type-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.75rem;
  padding: .65rem 1rem;
  border: 1px solid rgba(31, 230, 157, .65);
  border-radius: 999px;
  color: #f4fff9;
  background: rgba(5, 29, 31, .92);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.library-type-menu {
  display: none;
  position: absolute;
  inset: calc(100% + .35rem) 0 auto;
  padding: .4rem;
  border: 1px solid rgba(31, 230, 157, .55);
  border-radius: 1rem;
  background: rgba(7, 19, 25, .98);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .35);
}
.library-type-menu.is-open { display: grid; gap: .25rem; }
.library-type-menu button {
  min-height: 2.5rem;
  padding: .55rem .75rem;
  border: 0;
  border-radius: .7rem;
  color: #e8f6f0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.library-type-menu button:hover,
.library-type-menu button:focus-visible { background: rgba(31, 230, 157, .18); outline: none; }
@media (min-width: 720px) {
  .library-type-filter { margin-left: 1rem; margin-right: auto; }
}

/* El filtro no debe crear una franja vacía: se conserva solo el botón Todos. */
#view-notes .library-type-filter {
  display: block;
  width: min(100%, 16rem);
  max-width: 16rem;
  margin: -8px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#view-notes .library-type-filter .library-type-toggle {
  width: 100%;
  min-height: 2.55rem;
  padding: .55rem .9rem;
  border: 1px solid rgba(31, 230, 157, .65);
  border-radius: 999px;
  background: rgba(5, 29, 31, .92);
  color: #f4fff9;
  font-size: 13px;
}
#view-notes .notebooks-summary { margin-top: 0; }

/* Recordatorios: fecha por día/mes/año y hora explícita en 24 o 12 horas. */
#view-notes .reminder-date-time-picker {
  min-inline-size: 0;
  margin: .85rem 0;
  padding: .85rem;
  border: 1px solid rgba(255, 172, 70, .38);
  border-radius: 1rem;
  background: rgba(17, 34, 51, .72);
}
#view-notes .reminder-date-time-picker legend {
  padding: 0 .35rem;
  color: #ffd08a;
  font-weight: 700;
}
#view-notes .reminder-date-grid,
#view-notes .reminder-time-row {
  display: grid;
  align-items: end;
  gap: .55rem;
}
#view-notes .reminder-date-grid { grid-template-columns: .8fr 1.5fr 1fr; }
#view-notes .reminder-time-block { display: grid; gap: .55rem; margin-top: .75rem; }
#view-notes .reminder-time-row { grid-template-columns: 1fr auto 1fr 1.15fr; }
#view-notes .reminder-date-grid label,
#view-notes .reminder-time-block label { min-width: 0; }
#view-notes .reminder-date-grid select,
#view-notes .reminder-time-block select {
  width: 100%;
  min-height: 2.65rem;
  padding: .55rem .6rem;
  border: 1px solid rgba(166, 194, 219, .35);
  border-radius: .7rem;
  color: #f3f8ff;
  background: #172b40;
  font: inherit;
}
#view-notes .reminder-date-grid select:focus,
#view-notes .reminder-time-block select:focus { border-color: #ffb04b; outline: 2px solid rgba(255, 176, 75, .22); }
#view-notes .reminder-time-separator { align-self: end; padding-bottom: .7rem; color: #ffd08a; font-size: 1.35rem; font-weight: 800; }
.reminder-period-field[hidden] { display: none !important; }
#view-notes .reminder-sound-field { margin-top: .75rem; }
#view-notes .reminder-sound-field select:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 430px) {
  #view-notes .reminder-date-grid { grid-template-columns: 1fr 1.4fr; }
  #view-notes .reminder-date-grid label:last-child { grid-column: 1 / -1; }
  #view-notes .reminder-time-row { grid-template-columns: 1fr auto 1fr; }
  #view-notes .reminder-period-field { grid-column: 1 / -1; }
}

/* Selector de color tipo carrusel: menos ruido visual y previsualización al
   recorrer los tonos con el dedo o el puntero. */
body .appearance-palette-swatches,
body .note-color-options,
body .library-card-color-swatches,
body .multimedia-color-options,
body .notebook-color-swatches,
body .notebook-create-color-choices,
body .setting-color-choices {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
body .appearance-palette-swatches > *,
body .note-color-options > *,
body .library-card-color-swatches > *,
body .multimedia-color-options > *,
body .notebook-color-swatches > *,
body .notebook-create-color-choices > *,
body .setting-color-choices > * {
  flex: 0 0 34px !important;
  scroll-snap-align: start;
}
body .library-card-color-picker,
body .note-appearance,
body .notebook-create-color-picker,
body .notebook-color-dialog-body {
  border-color: color-mix(in srgb, var(--palette-preview-color, var(--accent)) 55%, var(--line)) !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* Apariencia global personalizable: el color elegido en Configuración se
   propaga por todos los módulos sin teñir la imagen oficial del logo. */
body,
.app-shell { color: var(--text); background-color: var(--theme-base); }
.app-shell #view-notes .cuadernote-module,
.notebook-create-dialog,
.notebook-book-dialog,
.notebook-confirm-dialog,
.notebook-sections-dialog {
  --cuadernote-neon: var(--ian-global-accent);
  --cuadernote-secondary: color-mix(in srgb, var(--ian-global-accent) 78%, #0A6B47);
  --cuadernote-deep: color-mix(in srgb, var(--ian-global-accent) 58%, #121c44);
  --cuadernote-energy: color-mix(in srgb, var(--ian-global-accent) 78%, #FFFFFF);
  --accent: var(--ian-global-accent);
  --green: var(--ian-global-accent);
  --cyan: var(--ian-global-accent);
  --panel: color-mix(in srgb, var(--ian-global-accent) 7%, #131c45);
  --panel-2: color-mix(in srgb, var(--ian-global-accent) 12%, #0E1F17);
  --text: #FFFFFF;
  --muted: color-mix(in srgb, #FFFFFF 67%, var(--ian-global-accent));
  --line: color-mix(in srgb, var(--ian-global-accent) 42%, #52615F);
}
#view-notes .notebooks-space { --library-accent: var(--ian-global-accent); }
.app-shell {
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft)), url('./assets/ian-background.jpg');
  background-blend-mode: soft-light, normal;
}
.brand,
.settings-card,
.ian-card,
.quick-nav,
.settings-option,
.settings-shortcut,
.chat-layout,
.library-card,
.dashboard-card,
.storage-card,
.notebook-card,
.settings-center-dialog { border-color: var(--line); background-color: var(--panel); }
.brand-mark,
.new-note,
.primary-button { background: var(--accent); color: var(--accent-contrast); }
.brand-title,
.topbar h1,
.note-card h3,
.settings-card strong { color: var(--text); }
.nav-item > span,
.quick-item span,
.topbar h1::before,
.profile-edit { color: var(--accent); border-color: var(--accent); }
.nav-item > span,
.quick-item,
.topbar h1::before,
.profile-edit { background: var(--accent-soft); }
.nav-item.active,
.nav-item:hover,
.quick-item:hover { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.eyebrow,
.empty-icon,
.module-symbol,
.nav-item.active span,
.dot,
.settings-icon,
.brand-title:hover { color: var(--accent); }
.nav-item.active span,
.dot { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 0 16px var(--accent-glow); }
.primary-button:hover,
.new-note:hover { background: color-mix(in srgb, var(--accent) 82%, #FFFFFF); color: var(--accent-contrast); }
.secondary-button,
.icon-button,
.close-button { color: var(--text); border-color: var(--line); }
.search-box,
.toolbar select,
.settings-field input,
.settings-field select,
.settings-field textarea,
.ian-input textarea,
.message-form input { background: var(--panel-2); border-color: var(--line); color: var(--text); }
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-color: var(--accent); }

/* La identidad gráfica permanece en una cápsula neutra, aunque la paleta
   global cambie a naranja, violeta o cualquier color personalizado. */
#view-notes .notebook-identity-icon.cuadernote-module-trigger {
  background: #121c44 !important;
  border: 1px solid #78958d !important;
  box-shadow: inset 0 0 0 1px #ffffff16, 0 7px 18px #0008 !important;
}
#view-notes .notebook-identity-icon .cuadernote-logo,
#view-notes .notebook-identity-icon.cuadernote-logo,
.lock-logo img { filter: none !important; }

/* Paleta de Apariencia */
.appearance-palette { display: grid; gap: 10px; margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--accent) 6%, var(--panel-2)); }
.appearance-palette legend { padding: 0 5px; color: var(--text); font-size: 12px; font-weight: 800; }
.appearance-palette p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.appearance-palette-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.appearance-swatch { display: flex; align-items: center; gap: 6px; min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text); padding: 7px 6px; font: 600 10px var(--ian-ui-font), Manrope; cursor: pointer; }
.appearance-swatch:hover,
.appearance-swatch[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.appearance-swatch i { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px #ffffff66, 0 0 7px color-mix(in srgb, var(--swatch) 50%, transparent); }
.appearance-swatch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appearance-custom-color { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; }
.appearance-custom-color input[type="color"] { width: 44px; height: 32px; padding: 3px; border-radius: 8px; cursor: pointer; }
.appearance-custom-color code { color: var(--accent); font: 700 10px var(--mono); letter-spacing: .04em; }
.appearance-logo-note { color: var(--muted); font-size: 9px; line-height: 1.4; }
@media (max-width: 430px) {
  .appearance-palette-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Recordatorios: la tarjeta-calendario pertenece a su ficha real y hereda el
   color que la persona escogió, sin convertirse en una burbuja flotante. */
body #view-notes .library-reminder-item {
  --reminder-accent: var(--library-card-accent, #F6A432);
  position: relative !important;
  overflow: hidden !important;
}
body #view-notes .library-reminder-open {
  border-color: color-mix(in srgb, var(--reminder-accent) 70%, #DCE9EF) !important;
  background: radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--reminder-accent) 38%, transparent), transparent 42%), linear-gradient(145deg, color-mix(in srgb, var(--reminder-accent) 25%, #172936), #0B141D 76%) !important;
  box-shadow: inset 0 1px #FFFFFF52, inset 0 -2px #000A, 0 14px 27px #02070FA6 !important;
}
body #view-notes .library-reminder-open:hover,
body #view-notes .library-reminder-open:focus-visible {
  border-color: var(--reminder-accent) !important;
  box-shadow: inset 0 1px #FFFFFF66, inset 0 -2px #000A, 0 16px 30px #02070FAA, 0 0 20px color-mix(in srgb, var(--reminder-accent) 25%, transparent) !important;
}
body #view-notes .library-reminder-item .reminder-calendar {
  border-color: color-mix(in srgb, var(--reminder-accent) 52%, #D8DCE3) !important;
  box-shadow: 0 9px 15px #0003, inset 0 -1px #FFFFFF !important;
}
body #view-notes .library-reminder-item .reminder-calendar-month {
  background: linear-gradient(135deg, color-mix(in srgb, var(--reminder-accent) 82%, #FFFFFF), var(--reminder-accent)) !important;
}
body #view-notes .library-reminder-item .reminder-alert-status.is-enabled { color: color-mix(in srgb, var(--reminder-accent) 78%, #FFFFFF) !important; }
body #view-notes .library-reminder-item .library-item-kind { color: color-mix(in srgb, var(--reminder-accent) 82%, #FFFFFF) !important; }

/* Tarjeta de recordatorio: el mensaje vive dentro de la ficha y la fecha/hora
   se reserva al calendario para no repetirla debajo del título. */
body #view-notes .library-reminder-copy .reminder-message {
  display: -webkit-box;
  overflow: hidden;
  color: color-mix(in srgb, var(--reminder-accent) 74%, #FFFFFF) !important;
  font: 600 12px/1.35 var(--ian-ui-font, Inter), sans-serif;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
}
body #view-notes .library-reminder-copy .reminder-state-meta {
  color: color-mix(in srgb, var(--text) 66%, var(--muted)) !important;
}
body #view-notes .library-reminder-copy .reminder-alert-status {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  overflow: visible;
  white-space: normal;
}
body #view-notes .library-reminder-copy .reminder-alert-bell {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 17px;
  height: 17px;
  color: color-mix(in srgb, var(--reminder-accent) 76%, #FFFFFF);
}
body #view-notes .library-reminder-copy .reminder-alert-bell .ian-icon {
  width: 16px;
  height: 16px;
}

/* Paleta compartida: muchos tonos, pero un selector compacto y usable en móvil. */
.appearance-palette-swatches,
.note-color-options,
.library-card-color-swatches,
.multimedia-color-options,
.notebook-color-swatches,
body .notebook-create-color-choices {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 6px !important;
  max-height: 230px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
  scrollbar-width: thin;
}
.appearance-palette-swatches { grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); }
.appearance-swatch {
  width: 100%;
  min-width: 0;
  min-height: 29px;
  justify-content: center;
  padding: 4px !important;
}
.appearance-swatch i { width: 19px; height: 19px; }
.appearance-swatch span { display: none; }
.note-color-options .note-color-swatch,
.library-card-color-swatches .library-card-color-swatch,
.multimedia-color-options .multimedia-color-swatch,
.notebook-color-swatches .notebook-color-swatch,
body .notebook-create-color-choices .notebook-color-swatch {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
}
.note-color-options .note-color-swatch span,
.multimedia-color-options .multimedia-color-swatch span,
.notebook-color-swatches .notebook-color-swatch span,
body .notebook-create-color-choices .notebook-color-swatch span { display: none; }
.note-color-options .note-color-swatch i,
.multimedia-color-options .multimedia-color-swatch i,
.notebook-color-swatches .notebook-color-swatch i,
body .notebook-create-color-choices .notebook-color-swatch i { width: 20px; height: 20px; }
.library-card-color-swatches .library-card-color-swatch i { width: 20px; height: 20px; }
.library-card-color-swatches .library-card-custom-color,
.multimedia-color-options .multimedia-custom-color,
.note-color-options .note-custom-color {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  justify-content: center;
}
.multimedia-color-options .multimedia-custom-color span,
.note-color-options .note-custom-color span { display: none !important; }
.library-card-color-swatches .library-card-custom-color input,
.multimedia-color-options .multimedia-custom-color input,
.note-color-options .note-custom-color input { width: 30px; height: 30px; }
.notebook-custom-color {
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  overflow: hidden;
  border: 1px solid #ffffff66;
  border-radius: 9px;
  background: var(--panel-2);
  cursor: pointer;
}
.notebook-custom-color span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.notebook-custom-color input { width: 34px; height: 34px; border: 0; padding: 0; background: transparent; cursor: pointer; }
@media (max-width: 430px) {
  .appearance-palette-swatches,
  .note-color-options,
  .library-card-color-swatches,
  .multimedia-color-options,
  .notebook-color-swatches,
  body .notebook-create-color-choices { max-height: 190px; }
  .appearance-palette-swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* La misma paleta también está disponible dentro de cada página y editor. */
.setting-color-choices {
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)) !important;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.setting-color-choices button {
  display: grid !important;
  place-items: center;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 4px !important;
}
.setting-color-choices .setting-choice-label,
.setting-color-choices .setting-color-check,
.setting-color-choices .setting-color-tooltip { display: none; }
.setting-color-choices .setting-color-sample { width: 21px; height: 21px; }
.book-setting-custom-color {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  cursor: pointer;
}
.book-setting-custom-color span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.book-setting-custom-color input { width: 36px; height: 36px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.editor-palette {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 3px;
  scrollbar-width: thin;
}
.editor-palette .editor-swatch { width: 27px; min-width: 27px !important; height: 27px !important; }
@media (max-width: 430px) {
  .setting-color-choices { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; max-height: 190px; }
  .editor-palette { grid-template-columns: repeat(7, minmax(0, 1fr)); max-height: 165px; }
}

/* Recordatorios: la campana es la accion superior y el detalle queda libre.
   El estado se comunica con campana normal o campana tachada; al pulsar se
   conserva el aviso breve de toggleReminderAlert. */
body #view-notes .grid-view .library-reminder-item .library-reminder-alert-action {
  position: absolute !important;
  top: 13px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  border: 1px solid #ffc45b !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #f59e0b, #9a3d17 76%) !important;
  box-shadow: 0 3px 0 #6a2712, 0 8px 15px #3b170788, inset 0 1px #ffffff66 !important;
  color: #fff !important;
}
body #view-notes .grid-view .library-reminder-item .library-reminder-alert-action.is-enabled {
  border-color: #ffe3a1 !important;
  background: linear-gradient(145deg, #ffd166, #c86b1f 76%) !important;
  color: #35160a !important;
}
body #view-notes .grid-view .library-reminder-item .library-reminder-alert-action .ian-icon { width: 18px !important; height: 18px !important; }
body #view-notes .grid-view .library-reminder-item .library-note-pin-action { top: 52px !important; right: 10px !important; }
body #view-notes .grid-view .library-reminder-item .library-favorite-action { top: 91px !important; right: 10px !important; }
body #view-notes .grid-view .library-reminder-item .reminder-calendar {
  grid-template-rows: 24px 1fr 15px 30px !important;
}
body #view-notes .grid-view .library-reminder-item .reminder-calendar strong { font-size: 45px !important; }
body #view-notes .grid-view .library-reminder-item .reminder-calendar-dates {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  border-top: 1px solid #eef0f4;
  background: #f7f8fa;
  color: #667085;
  font: 700 6px/1.05 Inter, var(--ian-ui-font), sans-serif;
}
body #view-notes .grid-view .library-reminder-item .reminder-calendar-dates > span {
  display: grid;
  min-width: 0;
  place-content: center;
  gap: 2px;
  padding: 2px 1px;
}
body #view-notes .grid-view .library-reminder-item .reminder-calendar-dates > span + span { border-left: 1px solid #e3e7ed; }
body #view-notes .grid-view .library-reminder-item .reminder-calendar-dates b,
body #view-notes .grid-view .library-reminder-item .reminder-calendar-dates time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body #view-notes .grid-view .library-reminder-item .reminder-calendar-dates b { color: #475467; font-size: .9em; }
body #view-notes .grid-view .library-reminder-item .reminder-calendar-dates time { color: #667085; font-size: 1em; }
@media (max-width: 560px) {
  body #view-notes .grid-view .library-reminder-item .library-reminder-alert-action { top: 8px !important; right: 7px !important; width: 25px !important; min-width: 25px !important; height: 25px !important; min-height: 25px !important; border-radius: 8px !important; }
  body #view-notes .grid-view .library-reminder-item .library-reminder-alert-action .ian-icon { width: 15px !important; height: 15px !important; }
  body #view-notes .grid-view .library-reminder-item .library-note-pin-action { top: 38px !important; right: 7px !important; }
  body #view-notes .grid-view .library-reminder-item .library-favorite-action { top: 68px !important; right: 7px !important; }
  body #view-notes .grid-view .library-reminder-item .reminder-calendar { grid-template-rows: 17px 1fr 11px 25px !important; }
  body #view-notes .grid-view .library-reminder-item .reminder-calendar strong { font-size: 30px !important; }
  body #view-notes .grid-view .library-reminder-item .reminder-calendar-dates { font-size: 5px; }
}

/* Recordatorio: el detalle es lo primero que se lee; la fecha, hora y color
   quedan al final del editor sin cambiar la estructura del calendario. */
body dialog[data-creation-type="reminder"] .library-item-form {
  display: flex !important;
  flex-direction: column !important;
}
body dialog[data-creation-type="reminder"] .library-item-form > label:first-child { order: 1; }
body dialog[data-creation-type="reminder"] .library-item-form > label:has(textarea[name="content"]) { order: 2; }
body dialog[data-creation-type="reminder"] .library-item-form > label:has(textarea[name="content"]) + .library-form-note { order: 3; }
body dialog[data-creation-type="reminder"] .library-item-form > fieldset.reminder-date-time-picker { order: 4; }
body dialog[data-creation-type="reminder"] .library-item-form > fieldset.reminder-date-time-picker ~ .library-form-note { order: 5; }
body dialog[data-creation-type="reminder"] .library-item-form > .library-card-color-picker { order: 6; }
body dialog[data-creation-type="reminder"] .library-item-form > .library-form-check { display: none !important; }
body dialog[data-creation-type="reminder"] .library-item-form > .reminder-sound-field { order: 7; }

body #view-notes .library-reminder-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0;
  padding: 12px 13px !important;
  border: 1px solid color-mix(in srgb, var(--reminder-accent, var(--library-card-accent, #F6A432)) 36%, #FFFFFF66) !important;
  border-radius: 14px !important;
  background: linear-gradient(155deg, color-mix(in srgb, var(--reminder-accent, #F6A432) 28%, #FFFFFF10), color-mix(in srgb, var(--reminder-accent, #F6A432) 8%, #0B141D)) !important;
  box-shadow: inset 0 1px #FFFFFF30, 0 6px 13px #0004 !important;
}
body #view-notes .library-reminder-copy .reminder-message {
  order: 0 !important;
  margin: 0 0 7px !important;
  color: color-mix(in srgb, var(--reminder-accent, #F6A432) 72%, #FFFFFF) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: 5 !important;
}
body #view-notes .library-reminder-copy > strong { order: 1; }
body #view-notes .library-reminder-copy > .library-item-kind { order: 2; }
body #view-notes .library-reminder-copy > .reminder-state-meta { order: 3; }
body #view-notes .grid-view .library-reminder-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 8px 7px !important;
  text-align: center !important;
  background: linear-gradient(155deg, color-mix(in srgb, var(--reminder-accent, #F6A432) 28%, #FFFFFF10), color-mix(in srgb, var(--reminder-accent, #F6A432) 8%, #0B141D)) !important;
}
body #view-notes .grid-view .library-reminder-copy .reminder-message {
  width: 100%;
  margin-bottom: 3px !important;
  font-size: 10px !important;
  -webkit-line-clamp: 3 !important;
  text-align: center !important;
}

/* Ajuste final del recordatorio: sin marco interno y con todas sus acciones
   en la franja inferior. La campana usa siempre un icono limpio; el clic
   comunica el estado mediante el aviso breve existente. */
body #view-notes .library-reminder-item .library-reminder-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  text-align: left !important;
}
body #view-notes .library-reminder-item .library-reminder-copy > strong { order: 1 !important; max-width: 100%; }
body #view-notes .library-reminder-item .library-reminder-copy > .library-item-kind { order: 2 !important; }
body #view-notes .library-reminder-item .library-reminder-copy > .reminder-message {
  order: 3 !important;
  display: -webkit-box !important;
  max-width: 100% !important;
  margin: 2px 0 0 !important;
  overflow: hidden !important;
  color: color-mix(in srgb, var(--text) 88%, var(--library-card-accent)) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: ellipsis !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}
body #view-notes .library-reminder-item .library-reminder-copy > .reminder-state-meta { order: 4 !important; }
body #view-notes .library-reminder-item .library-reminder-controls {
  inset: auto 12px 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  height: 36px !important;
}
body #view-notes .library-reminder-item .library-reminder-controls > details,
body #view-notes .library-reminder-item .library-reminder-controls .trash-action,
body #view-notes .library-reminder-item .library-reminder-controls .library-reminder-alert-action,
body #view-notes .library-reminder-item .library-reminder-controls .library-note-pin-action,
body #view-notes .library-reminder-item .library-reminder-controls .library-favorite-action {
  position: static !important;
  inset: auto !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  transform: none !important;
}
body #view-notes .library-reminder-item .library-reminder-controls > details { order: 1 !important; }
body #view-notes .library-reminder-item .library-reminder-controls .trash-action { order: 2 !important; }
body #view-notes .library-reminder-item .library-reminder-controls .library-reminder-alert-action { order: 3 !important; margin-left: auto !important; }
body #view-notes .library-reminder-item .library-reminder-controls .library-note-pin-action { order: 4 !important; }
body #view-notes .library-reminder-item .library-reminder-controls .library-favorite-action { order: 5 !important; }
body #view-notes .library-reminder-item .library-reminder-alert-action,
body #view-notes .library-reminder-item .library-reminder-alert-action::after,
body #view-notes .library-reminder-item .library-reminder-alert-action:not(.is-enabled)::after {
  overflow: hidden !important;
}
body #view-notes .library-reminder-item .library-reminder-alert-action::after,
body #view-notes .library-reminder-item .library-reminder-alert-action:not(.is-enabled)::after {
  display: none !important;
  content: none !important;
}
@media (max-width: 560px) {
  body #view-notes .library-reminder-item .library-reminder-controls { inset: auto 9px 9px !important; gap: 6px !important; }
  body #view-notes .library-reminder-item .library-reminder-controls > details,
  body #view-notes .library-reminder-item .library-reminder-controls .trash-action,
  body #view-notes .library-reminder-item .library-reminder-controls .library-reminder-alert-action,
  body #view-notes .library-reminder-item .library-reminder-controls .library-note-pin-action,
  body #view-notes .library-reminder-item .library-reminder-controls .library-favorite-action {
    flex-basis: 33px !important;
    width: 33px !important;
    min-width: 33px !important;
    height: 33px !important;
    min-height: 33px !important;
  }
}

/* Último ajuste del selector de color: carrusel táctil compacto en todos los
   formularios, con realce temporal al pasar por un tono antes de confirmarlo. */
body .appearance-palette-swatches,
body .note-color-options,
body .library-card-color-swatches,
body .multimedia-color-options,
body .notebook-color-swatches,
body .notebook-create-color-choices,
body .setting-color-choices {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: .45rem !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-height: 4.25rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: .2rem .1rem .45rem !important;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
body .appearance-palette-swatches > *,
body .note-color-options > *,
body .library-card-color-swatches > *,
body .multimedia-color-options > *,
body .notebook-color-swatches > *,
body .notebook-create-color-choices > *,
body .setting-color-choices > * {
  flex: 0 0 2.35rem !important;
  width: 2.35rem !important;
  min-width: 2.35rem !important;
  scroll-snap-align: start;
}
body .appearance-palette-swatches .palette-custom-color,
body .note-color-options .note-custom-color,
body .library-card-color-swatches .library-card-custom-color,
body .multimedia-color-options .multimedia-custom-color,
body .notebook-create-color-choices .notebook-custom-color {
  flex-basis: 5.5rem !important;
  width: 5.5rem !important;
  min-width: 5.5rem !important;
}
body .notebook-create-preview,
body .note-appearance,
body .library-card-color-picker {
  border-color: color-mix(in srgb, var(--palette-preview-color, var(--accent)) 58%, var(--line)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--palette-preview-color, transparent) 22%, transparent), 0 12px 28px #0003 !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* Paleta tipo panal: regla final para todos los selectores compartidos. */
body .appearance-palette-swatches,
body .note-color-options,
body .library-card-color-swatches,
body .multimedia-color-options,
body .notebook-color-swatches,
body .notebook-create-color-choices,
body .setting-color-choices {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-template-rows: none !important;
  gap: 4px 3px !important;
  width: 100% !important;
  max-height: 188px !important;
  padding: 9px !important;
  overflow: auto !important;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)) !important;
  border-radius: 20px !important;
  background: radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--accent) 15%, transparent) 0 2px, transparent 3px) 0 0 / 18px 18px, linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 90%, #0b1233), var(--panel)) !important;
  box-shadow: inset 0 1px #ffffff12, 0 8px 20px #00000024;
  scrollbar-width: thin;
}
body .appearance-palette-swatches > *,
body .note-color-options > *,
body .library-card-color-swatches > *,
body .multimedia-color-options > *,
body .notebook-color-swatches > *,
body .notebook-create-color-choices > *,
body .setting-color-choices > * {
  display: grid !important;
  place-items: center;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  justify-self: center !important;
  align-self: center !important;
  transform: none !important;
}
body .appearance-palette-swatches > *:nth-child(even),
body .note-color-options > *:nth-child(even),
body .library-card-color-swatches > *:nth-child(even),
body .multimedia-color-options > *:nth-child(even),
body .notebook-color-swatches > *:nth-child(even),
body .notebook-create-color-choices > *:nth-child(even),
body .setting-color-choices > *:nth-child(even) { transform: translateY(8px) !important; }
body .appearance-palette-swatches > * i,
body .note-color-options > * i,
body .library-card-color-swatches > * i,
body .multimedia-color-options > * i,
body .notebook-color-swatches > * i,
body .notebook-create-color-choices > * i,
body .setting-color-choices > * .setting-color-sample {
  display: block !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border: 2px solid #ffffff9e !important;
  border-radius: 50% !important;
  background: var(--swatch, var(--note-swatch, var(--card-swatch, var(--media-swatch, var(--notebook-swatch, var(--choice-color)))))) !important;
  box-shadow: inset 0 2px 3px #ffffff70, inset 0 -3px 5px #0000002b, 0 3px 7px #00000055 !important;
}
body .appearance-palette-swatches > * span,
body .note-color-options > * span,
body .library-card-color-swatches > * span,
body .multimedia-color-options > * span,
body .notebook-color-swatches > * span,
body .notebook-create-color-choices > * span,
body .setting-color-choices > * .setting-choice-label,
body .setting-color-choices > * .setting-color-check,
body .setting-color-choices > * .setting-color-tooltip { display: none !important; }
body .appearance-palette-swatches > *:hover,
body .appearance-palette-swatches > *:focus-visible,
body .note-color-options > *:hover,
body .note-color-options > *:focus-visible,
body .library-card-color-swatches > *:hover,
body .library-card-color-swatches > *:focus-visible,
body .multimedia-color-options > *:hover,
body .multimedia-color-options > *:focus-visible,
body .notebook-color-swatches > *:hover,
body .notebook-color-swatches > *:focus-visible,
body .notebook-create-color-choices > *:hover,
body .notebook-create-color-choices > *:focus-visible,
body .setting-color-choices > *:hover,
body .setting-color-choices > *:focus-visible { z-index: 2; outline: 2px solid color-mix(in srgb, var(--accent) 76%, #fff) !important; outline-offset: 2px; transform: translateY(-2px) scale(1.12) !important; }
body .appearance-palette-swatches > *[aria-pressed="true"] i,
body .note-color-options > *.selected i,
body .library-card-color-swatches > *.selected i,
body .multimedia-color-options > *.selected i,
body .notebook-color-swatches > *.selected i,
body .notebook-create-color-choices > *.selected i,
body .setting-color-choices > *.selected .setting-color-sample { border-color: #fff !important; box-shadow: 0 0 0 3px var(--accent), inset 0 2px 3px #ffffff70, inset 0 -3px 5px #0000002b, 0 0 15px color-mix(in srgb, var(--accent) 72%, transparent) !important; }

/* Panel inferior de panal exclusivo del editor de cuadernos. */
body .notebook-book-dialog { overflow: hidden; }
body .notebook-hive-panel {
  position: absolute; z-index: 30; right: 0; bottom: 0; left: 0;
  display: grid; gap: 12px; max-height: min(72dvh, 680px); padding: 16px;
  overflow: auto; border: 1px solid #b8893e8a; border-bottom: 0; border-radius: 26px 26px 0 0;
  color: #edf9f1; background: radial-gradient(circle at 82% 8%, #b8893e1c, transparent 22%), linear-gradient(155deg, #0e1f17f8, #0b0f14fc);
  box-shadow: 0 -16px 35px #000a, inset 0 1px #ffffff1c;
}
body .notebook-hive-panel header, body .notebook-hive-preview, body .notebook-hive-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body .notebook-hive-panel header small { color: #dcb96a; font-size: 10px; letter-spacing: .13em; }
body .notebook-hive-panel h3 { margin: 2px 0 0; font-size: 21px; }
body .notebook-hive-panel header button { width: 40px; height: 40px; border: 1px solid #dcb96a; border-radius: 13px; color: #ffe3a2; background: #131c45; font-size: 27px; }
body .notebook-hive-preview { justify-content: flex-start; padding: 10px 12px; border: 1px solid #ffffff1f; border-radius: 16px; background: #06120dd9; }
body .notebook-hive-preview > span { width: 40px; height: 40px; border: 2px solid #00ff66; clip-path: polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%); background: var(--hive-color); box-shadow: 0 0 12px var(--hive-color); }
body .notebook-hive-preview code { color: #dfffe9; font-size: 17px; }
body .notebook-hive-preview button { margin-left: auto; border: 0; color: #ffd978; background: transparent; }
body .notebook-hive-grid { display: grid; grid-template-columns: repeat(9, minmax(30px, 1fr)); gap: 2px; padding: 7px 2px; }
body .notebook-hive-cell { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid #ad823d; clip-path: polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%); background: #131d46; }
body .notebook-hive-cell:nth-child(even) { transform: translateY(14%); }
body .notebook-hive-cell i { display: block; width: 100%; height: 100%; background: var(--hive-color); }
body .notebook-hive-cell b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 15px; text-shadow: 0 1px 3px #0b1233; }
body .notebook-hive-cell.selected { z-index: 2; outline: 3px solid #00ff66; outline-offset: 1px; filter: drop-shadow(0 0 7px #00ff66); }
body .notebook-hive-shelves { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body .notebook-hive-shelves > div { display: grid; gap: 6px; min-width: 0; padding: 8px; border: 1px solid #ffffff1d; border-radius: 14px; background: #07120de0; }
body .notebook-hive-shelves strong { color: #e9f8ee; font-size: 11px; }
body .notebook-hive-shelves span { display: flex; min-height: 28px; gap: 4px; overflow-x: auto; }
body .notebook-hive-shelves small { color: #9eaea5; font-size: 10px; }
body .notebook-hive-mini { flex: 0 0 27px; width: 27px; height: 27px; padding: 0; border: 1px solid #caa85e; clip-path: polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%); background: var(--hive-color); }
body .notebook-hive-mini.selected { outline: 2px solid #00ff66; outline-offset: 1px; }
body .notebook-hive-panel footer { position: sticky; bottom: -16px; padding: 10px 0 max(2px, env(safe-area-inset-bottom)); background: #0b0f14f2; }
body .notebook-hive-custom { position: relative; display: grid; place-items: center; min-height: 48px; padding: 0 12px; overflow: hidden; border: 1px solid #b8893e; border-radius: 15px; color: #e7f9ed; background: #0d1c16; }
body .notebook-hive-custom input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
body .notebook-hive-panel .primary-button { min-height: 48px; padding-inline: 26px; background: linear-gradient(135deg, #00c853, #00ffaa); color: #121b43; }
body .notebook-hive-launchers { display: flex; flex-wrap: wrap; gap: 7px; }
body .notebook-hive-launchers button { border: 1px solid #b8893e75; border-radius: 999px; color: #dfffe9; background: #0d1c16; padding: 7px 9px; }
@media (max-width: 480px) { body .notebook-hive-panel { padding: 13px; } body .notebook-hive-grid { grid-template-columns: repeat(7, minmax(34px, 1fr)); } }

/* Geometría común definitiva para todas las tarjetas de inicio. */
body #view-notes .library-section-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-columns: minmax(0, 1fr) !important;
}
body #view-notes .library-section-grid > .notebook-card-shell,
body #view-notes .library-section-grid > .library-item-card-shell {
  width: 100% !important;
  min-width: 0 !important;
  height: 270px !important;
  min-height: 270px !important;
  max-height: 270px !important;
}
body #view-notes .library-section-grid > .notebook-card-shell > .notebook-card,
body #view-notes .library-section-grid > .library-item-card-shell > .library-item-card,
body #view-notes .library-section-grid > .library-item-card-shell > .library-new-reminder-card {
  width: 100% !important;
  height: 270px !important;
  min-height: 270px !important;
  max-height: 270px !important;
  min-width: 0 !important;
}
@media (max-width: 700px) {
  body #view-notes .library-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 380px) {
  body #view-notes .library-section-grid { grid-template-columns: minmax(0, 1fr) !important; }
}


/* ---- Configuración (2026-10-10, pedido de Edilberto) ----
   Letrero «No disponible»: lo que todavía no funciona se ve apagado y no se puede tocar (src/settings-center.js → na()).
   Sección «Chat»: fondo de las conversaciones (Oscuro, Claro o Imagen con «Opacar») y avisos del Chat. */
.settings-menu-item.is-na { cursor: not-allowed; }
.settings-menu-item.is-na:hover { border-color: var(--line); background: var(--panel); }
.settings-menu-item.is-na > span, .settings-menu-item.is-na > div { opacity: .5; filter: grayscale(.6); }
.settings-na-badge { flex: none; display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border: 1px solid rgba(255, 159, 26, .5); border-radius: 999px; background: rgba(255, 159, 26, .12); color: #ffb44d; font: 800 10.5px/1 Manrope, Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .02em; white-space: nowrap; }
.settings-na { position: relative; display: grid; gap: 6px; padding: 12px; border: 1px dashed var(--line); border-radius: 14px; pointer-events: none; user-select: none; }
.settings-na > :not(.settings-na-badge) { opacity: .42; filter: grayscale(.7); }
.settings-na > .settings-na-badge { position: absolute; top: 8px; right: 10px; z-index: 1; }
.settings-group-title { margin: 10px 0 0; color: var(--muted); font: 800 11px/1.2 Manrope, Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.cn-chat-settings { gap: 14px; }
.cn-set-block { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--panel) 85%, transparent); }
.cn-set-block h3 { margin: 0; font: 800 15px/1.2 Manrope, Inter, system-ui, sans-serif; }
.cn-set-block .settings-note { margin: 0; }
.cn-wall-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 420px; }
.cn-wall-choice { display: grid; justify-items: center; gap: 7px; padding: 9px 6px; border: 1px solid var(--line); border-radius: 16px; background: transparent; color: var(--text); font: 700 12.5px Manrope, Inter, system-ui, sans-serif; text-align: center; cursor: pointer; }
.cn-wall-choice[aria-pressed="true"], .cn-wall-choice[data-on] { border-color: #00ff66; background: rgba(0, 255, 102, .1); color: #00ff66; }
.cn-wall-choice input[hidden] { display: none; }
.cn-wall-prev { position: relative; overflow: hidden; display: grid; place-items: center; width: 100%; max-width: 92px; aspect-ratio: 3 / 4; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background-color: #0a2219; background-position: center; background-size: cover; font-size: 22px; font-style: normal; }
.cn-wall-prev.is-dark { background-color: #04140e; background-image: var(--ic-doodle-dark), radial-gradient(circle at 20% 10%, rgba(0, 255, 102, .16), transparent 55%); background-size: 140px 140px, 100% 100%; background-repeat: repeat, no-repeat; }
.cn-wall-prev.is-light { border-color: rgba(0, 0, 0, .08); background-color: #f7faf5; background-image: var(--ic-doodle-light), linear-gradient(transparent 15px, rgba(0, 150, 75, .14) 15px 16px); background-size: 140px 140px, 100% 16px; background-repeat: repeat, repeat; }
.cn-wall-prev.is-dark::before, .cn-wall-prev.is-light::before, .cn-wall-prev.is-dark::after, .cn-wall-prev.is-light::after { content: ""; position: absolute; width: 56%; height: 13%; border-radius: 6px; }
.cn-wall-prev.is-dark::before, .cn-wall-prev.is-light::before { left: 9%; top: 26%; }
.cn-wall-prev.is-dark::after, .cn-wall-prev.is-light::after { right: 9%; top: 52%; }
.cn-wall-prev.is-dark::before { background: #11382b; }
.cn-wall-prev.is-dark::after { background: #135338; box-shadow: 0 0 0 1px rgba(0, 255, 102, .35); }
.cn-wall-prev.is-light::before { background: #ffffff; box-shadow: 0 0 0 1px #dde9e1; }
.cn-wall-prev.is-light::after { background: #dafbe6; box-shadow: 0 0 0 1px rgba(0, 200, 90, .4); }
.cn-wall-adjust { display: grid; gap: 8px; max-width: 420px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0, 0, 0, .14); }
.cn-wall-adjust-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.cn-wall-adjust-top b { color: #00ff66; }
.cn-wall-adjust input[type="range"] { width: 100%; accent-color: #00ff66; }
.cn-wall-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-wall-steps button { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: 700 12px Manrope, Inter, system-ui, sans-serif; cursor: pointer; }
.cn-wall-steps button[aria-pressed="true"] { border-color: #00ff66; background: rgba(0, 255, 102, .12); color: #00ff66; }

/* Interruptor claro/oscuro propio de SEIMA: una libreta digital de dos ambientes. */
.cn-theme-setting {
  display: grid;
  gap: 11px;
  min-width: 0;
  margin: 0;
  padding: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 20px;
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 34%), var(--panel-2);
}
.cn-theme-setting legend { padding: 0 6px; color: var(--text); font: 800 14px/1.2 Manrope, Inter, system-ui, sans-serif; }
.cn-theme-setting > p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.cn-theme-switch {
  display: grid;
  justify-items: center;
  gap: 9px;
  width: min(100%, 320px);
  min-width: 0;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cn-theme-track {
  --theme-pad: 7px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 104px;
  padding: var(--theme-pad);
  overflow: hidden;
  border: 2px solid #1c382c;
  border-radius: 30px 18px 18px 30px;
  background: linear-gradient(100deg, #fff8df 0 48%, #071a13 52% 100%);
  box-shadow: inset 0 0 0 3px #ffffff10, 0 12px 24px #00000030;
}
.cn-theme-track::before {
  content: "";
  position: absolute;
  inset: 11px 50% 11px auto;
  border-left: 1px dashed #56726566;
}
.cn-theme-track::after {
  content: "";
  position: absolute;
  right: 8px;
  left: 8px;
  bottom: 13px;
  height: 1px;
  background: linear-gradient(90deg, #d5b55c88 0 48%, #00ff6688 52% 100%);
}
.cn-theme-choice { position: relative; z-index: 1; display: grid; justify-items: center; gap: 7px; font-size: 11px; letter-spacing: .04em; }
.cn-theme-choice-light { color: #604b13; }
.cn-theme-choice-dark { color: #b9f8cf; }
.cn-theme-sun { position: relative; width: 24px; height: 24px; border: 4px solid #e7b82e; border-radius: 7px; background: #fff4a8; transform: rotate(45deg); box-shadow: 0 0 15px #ffd34d99; }
.cn-theme-sun::before,
.cn-theme-sun::after { content: ""; position: absolute; inset: 6px -9px; border-top: 2px solid #d99f10; border-bottom: 2px solid #d99f10; }
.cn-theme-sun::after { transform: rotate(90deg); }
.cn-theme-moon { position: relative; width: 31px; height: 31px; border-radius: 50%; background: #90ffc0; box-shadow: 0 0 17px #00ff668f; }
.cn-theme-moon::after { content: ""; position: absolute; top: -3px; left: 10px; width: 29px; height: 29px; border-radius: 50%; background: #071a13; }
.cn-theme-rings { position: absolute; z-index: 5; top: 11px; bottom: 11px; left: 4px; display: flex; flex-direction: column; justify-content: space-around; }
.cn-theme-rings i { width: 13px; height: 5px; border: 1px solid #8c7130; border-radius: 999px; background: linear-gradient(#ecce78, #765d20); box-shadow: 0 1px 2px #0007; }
.cn-theme-thumb {
  position: absolute;
  z-index: 4;
  top: 9px;
  bottom: 9px;
  left: 12px;
  display: grid;
  place-items: center;
  width: calc(50% - 18px);
  border: 1px solid #a9893d;
  border-radius: 24px 13px 13px 24px;
  background: linear-gradient(145deg, #fffdf4, #eee2b8);
  box-shadow: inset 0 0 0 2px #fff9, 0 5px 15px #0005;
  transition: left .3s cubic-bezier(.2, .8, .2, 1), border-radius .3s ease, background .3s ease, border-color .3s ease;
}
.cn-theme-thumb i { width: 34px; height: 42px; border: 2px solid #ba993e; border-radius: 4px 10px 10px 4px; background: repeating-linear-gradient(#fffdf4 0 7px, #d8cda8 8px); box-shadow: -4px 0 0 #ecce78; }
.cn-theme-thumb em { position: absolute; right: 10px; bottom: 8px; color: #80691e; font: 900 7px/1 Manrope, Inter, sans-serif; letter-spacing: .08em; }
.cn-theme-switch[data-theme="dark"] .cn-theme-thumb { left: calc(50% + 6px); border-color: #00b94d; border-radius: 13px 24px 24px 13px; background: linear-gradient(145deg, #123528, #121c44); box-shadow: inset 0 0 0 2px #ffffff12, 0 0 17px #00ff6659, 0 5px 15px #0008; }
.cn-theme-switch[data-theme="dark"] .cn-theme-thumb i { border-color: #00c956; background: repeating-linear-gradient(#0d2b20 0 7px, #17633b 8px); box-shadow: -4px 0 0 #00ff66; }
.cn-theme-switch[data-theme="dark"] .cn-theme-thumb em { color: #72f7a8; }
.cn-theme-switch:focus-visible .cn-theme-track { outline: 3px solid var(--accent); outline-offset: 3px; }
.cn-theme-switch:active .cn-theme-thumb { transform: scale(.97); }
.cn-theme-current { color: var(--accent); font-size: 12px; letter-spacing: .02em; }
html[data-reduce-motion="true"] .cn-theme-thumb { transition: none; }
@media (prefers-reduced-motion: reduce) { .cn-theme-thumb { transition: none; } }
@media (max-width: 360px) {
  .cn-theme-setting { padding-inline: 11px; }
  .cn-theme-track { height: 96px; }
  .cn-theme-choice { font-size: 10px; }
}


/* ---- Interruptor Claro/Oscuro de SEIMA (2026-10-11, diseño propio de la app) ----
   Pedido de Edilberto: nada copiado de imágenes de otros. Pequeño y discreto, a la derecha del título «Fondo de las
   conversaciones», sin texto al lado. La perilla es la BURBUJA DE CHAT del logo de SEIMA con sus tres puntos:
   - Claro: carril de hoja de cuaderno (renglones verdes y margen rojo); burbuja blanca a la izquierda, puntos verdes.
   - Oscuro: carril de noche verde con cuadrícula neón; burbuja verde neón a la derecha, puntos oscuros y brillo.
   - Con imagen de fondo: la burbuja queda en el centro y el carril se apaga (tocarlo vuelve a Oscuro).
   Al cambiar, los tres puntos «escriben» (saltan una vez), como cuando alguien está escribiendo en el chat. */
.cn-set-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cn-set-head h3 { min-width: 0; }
.cn-wall-tools { flex: none; display: flex; align-items: center; gap: 10px; }
/* 2026-10-12 · Rehecho más limpio (pedido de Edilberto: «que se vea como un botón más estético»): carril redondo con
   borde interior, perilla CIRCULAR con la burbuja del logo en SVG (sin la colita recortada), y en el carril un ícono
   pequeño de la otra opción: renglones de cuaderno (Claro) a la izquierda y un destello neón (Oscuro) a la derecha. */
.cn-bubble-switch {
  position: relative; flex: none; width: 66px; height: 36px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; background: linear-gradient(180deg, #0c2c1e, #06170f);
  box-shadow: inset 0 0 0 1.5px rgba(0, 255, 102, .5), inset 0 2px 6px rgba(0, 0, 0, .55), 0 0 14px rgba(0, 255, 102, .16);
  transition: background .35s ease, box-shadow .35s ease, transform .15s ease;
}
.cn-bubble-switch[data-state="light"] { background: linear-gradient(180deg, #f6fcf8, #e1f1e7); box-shadow: inset 0 0 0 1.5px #b9dcc6, inset 0 2px 5px rgba(0, 70, 35, .14), 0 2px 8px rgba(0, 0, 0, .22); }
.cn-bubble-switch[data-state="image"] { background: linear-gradient(180deg, #1f2f28, #182350); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), inset 0 2px 6px rgba(0, 0, 0, .5); }
.cn-bubble-switch:active { transform: scale(.95); }
.cn-bubble-switch:focus-visible { outline: 2px solid rgba(0, 255, 102, .7); outline-offset: 3px; }
.cn-bs-icon { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; transition: opacity .3s ease, color .3s ease; }
.cn-bs-icon svg { display: block; width: 100%; height: 100%; }
.cn-bs-lines { left: 11px; color: rgba(157, 255, 196, .6); }
.cn-bs-lines svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cn-bs-spark { right: 11px; color: #5c9c79; opacity: 0; }
.cn-bs-spark svg { fill: currentColor; }
.cn-bubble-switch[data-state="light"] .cn-bs-lines { opacity: 0; }
.cn-bubble-switch[data-state="light"] .cn-bs-spark { opacity: 1; }
.cn-bubble-switch[data-state="image"] .cn-bs-lines, .cn-bubble-switch[data-state="image"] .cn-bs-spark { opacity: .45; color: #9bb3a7; }
/* La perilla: círculo con la burbuja de chat del logo (y sus tres puntos). */
.cn-bs-knob {
  position: absolute; top: 3px; left: 3px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: #04140e; background: radial-gradient(circle at 35% 30%, #8affbb, #00ff66 58%, #00d957);
  box-shadow: 0 0 10px rgba(0, 255, 102, .55), 0 2px 4px rgba(0, 0, 0, .4);
  transform: translateX(30px); transition: transform .35s cubic-bezier(.4, 0, .2, 1), background .3s ease, box-shadow .3s ease, color .3s ease;
}
.cn-bs-knob svg { width: 19px; height: 19px; overflow: visible; }
.cn-bs-knob .cn-bs-b { fill: currentColor; }
.cn-bs-knob circle { fill: #00ff66; transform-box: fill-box; transform-origin: center; animation: cn-bs-type-b .7s ease 1; transition: fill .3s ease; }
.cn-bs-knob circle:nth-of-type(2) { animation-delay: .1s; }
.cn-bs-knob circle:nth-of-type(3) { animation-delay: .2s; }
.cn-bubble-switch[data-state="light"] .cn-bs-knob { transform: translateX(0); color: #00a650; background: #ffffff; box-shadow: 0 2px 6px rgba(0, 60, 30, .3), 0 0 0 1px #d4e6da; }
.cn-bubble-switch[data-state="light"] .cn-bs-knob circle { fill: #ffffff; animation-name: cn-bs-type-a; }
.cn-bubble-switch[data-state="image"] .cn-bs-knob { transform: translateX(15px); color: #3c6b54; background: #d9efe2; box-shadow: 0 2px 5px rgba(0, 0, 0, .45); }
.cn-bubble-switch[data-state="image"] .cn-bs-knob circle { fill: #d9efe2; animation: none; }
/* Dos nombres iguales: al cambiar de nombre la animación vuelve a empezar (saltan los puntos en cada cambio). */
@keyframes cn-bs-type-a { 0%, 100% { transform: none; } 35% { transform: translateY(-3px); } 65% { transform: translateY(1px); } }
@keyframes cn-bs-type-b { 0%, 100% { transform: none; } 35% { transform: translateY(-3px); } 65% { transform: translateY(1px); } }
/* Ícono «Usar imagen de fondo» al lado del interruptor: una hoja de cuaderno (con su espiral) que guarda una imagen y un
   «+» verde. Con una imagen puesta, el ícono muestra la imagen en miniatura con un anillo verde. */
.cn-wall-pick {
  position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid rgba(0, 255, 102, .45);
  border-radius: 11px; background: rgba(0, 255, 102, .07) center / cover no-repeat; color: #9dffc4; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: border-color .2s ease, background-color .2s ease, transform .15s ease;
}
.cn-wall-pick:hover { border-color: rgba(0, 255, 102, .8); background-color: rgba(0, 255, 102, .14); }
.cn-wall-pick:active { transform: scale(.94); }
.cn-wall-pick:focus-within { outline: 2px solid rgba(0, 255, 102, .7); outline-offset: 3px; }
.cn-wall-pick svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cn-wall-pick svg path:nth-of-type(2) { fill: currentColor; fill-opacity: .35; }
.cn-wall-pick svg circle { fill: currentColor; stroke: none; }
.cn-wall-pick::after {
  content: "+"; position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 16px; height: 16px;
  border: 2px solid var(--panel, #0b1f17); border-radius: 50%; background: #00ff66; color: #04140e; font: 800 12px/1 system-ui, sans-serif;
}
.cn-wall-pick.is-on { border-color: #00ff66; box-shadow: 0 0 0 2px rgba(0, 255, 102, .25); }
.cn-wall-pick.is-on::after { content: "✎"; font-size: 9px; }
.cn-wall-pick input[hidden] { display: none; }
/* Vista previa del fondo del chat (cambia con el interruptor y muestra la imagen antes de aplicarla) */
.cn-theme-preview { position: relative; height: 96px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; transition: background .4s ease; }
.cn-theme-preview[data-state="dark"] { background-color: #04140e; background-image: var(--ic-doodle-dark), linear-gradient(rgba(0, 255, 102, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 102, .035) 1px, transparent 1px); background-size: 200px 200px, 22px 22px, 22px 22px; }
.cn-theme-preview[data-state="light"] { background-color: #f7faf5; background-image: var(--ic-doodle-light), linear-gradient(90deg, transparent 18px, rgba(255, 107, 107, .3) 18px, rgba(255, 107, 107, .3) 19.5px, transparent 19.5px), linear-gradient(transparent 23px, rgba(0, 150, 75, .1) 23px 24px); background-size: 200px 200px, 100% 100%, 100% 24px; }
.cn-theme-preview[data-state="image"] { background: linear-gradient(var(--cn-veil, rgba(0, 0, 0, .25)), var(--cn-veil, rgba(0, 0, 0, .25))), var(--cn-photo) center / cover no-repeat; }
.cn-theme-preview span { position: absolute; height: 16px; border-radius: 8px 8px 8px 3px; transition: background .4s ease; }
.cn-theme-preview span:nth-child(1) { top: 14px; left: 14px; width: 46%; }
.cn-theme-preview span:nth-child(2) { top: 40px; right: 14px; width: 40%; border-radius: 8px 8px 3px 8px; }
.cn-theme-preview span:nth-child(3) { top: 66px; left: 14px; width: 30%; }
.cn-theme-preview[data-state="dark"] span:nth-child(odd), .cn-theme-preview[data-state="image"][data-lum="dark"] span:nth-child(odd) { background: #11382b; }
.cn-theme-preview[data-state="dark"] span:nth-child(2), .cn-theme-preview[data-state="image"][data-lum="dark"] span:nth-child(2) { background: #135338; box-shadow: 0 0 0 1px rgba(0, 255, 102, .3); }
.cn-theme-preview[data-state="light"] span:nth-child(odd), .cn-theme-preview[data-state="image"][data-lum="light"] span:nth-child(odd) { background: #ffffff; box-shadow: 0 0 0 1px #dde9e1; }
.cn-theme-preview[data-state="light"] span:nth-child(2), .cn-theme-preview[data-state="image"][data-lum="light"] span:nth-child(2) { background: #dafbe6; box-shadow: 0 0 0 1px rgba(0, 200, 90, .4); }
/* Confirmar la imagen elegida: «Aplicar imagen de fondo» o «Cancelar» */
.cn-wall-confirm { display: flex; flex-wrap: wrap; gap: 10px; }
.cn-wall-confirm > button { flex: 1 1 140px; min-height: 42px; }
@media (prefers-reduced-motion: reduce) { .cn-bubble-switch, .cn-bs-knob, .cn-bs-icon, .cn-theme-preview { transition: none; } .cn-bs-knob circle { animation: none; } }