/* ============================================================================
   UI moderna (UI2–UI4, 2026-09-27) — capa de sistema, cargada la ÚLTIMA.
   Unifica lo que cada pantalla resolvía a su manera: un solo sistema de botones, controles
   segmentados de verdad, desplegables y casillas propios, panel del agente más limpio,
   lectura sin marco y biblioteca con «Continuar leyendo». Los tokens viven en themes.css;
   aquí solo se APLICAN. Regla de la casa: nada de barras de acento laterales.
   ========================================================================== */

body { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }

/* ---------------------------------------------------------------- Botones ---
   Principal = tinta. Secundario = relleno gris de sistema. Texto = acento. El verde deja
   de ser el color de TODAS las acciones: ahora señala marca, progreso, citas y selección. */
.primary-btn, .lib-upload, .dlg-ok, .ai-nb-save, .ai-toast-action {
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: none;
  border-radius: var(--r-md);
  font-weight: 600;
  box-shadow: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.primary-btn:hover, .lib-upload:hover, .dlg-ok:hover, .ai-nb-save:hover, .ai-toast-action:hover {
  background: var(--btn-bg-hover);
}
.primary-btn:active, .lib-upload:active, .dlg-ok:active { transform: scale(0.98); }
.primary-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.primary-btn { padding: 10px 18px; font-size: var(--fs-md); }
.lib-upload { border-radius: var(--r-pill); }

.studio-gen, .studio-new, .ai-see, .lib-dd-btn {
  background: var(--fill);
  color: var(--text);
  border: none;
  font-weight: 600;
  transition: background var(--transition-fast);
}
.studio-gen:hover, .studio-new:hover, .ai-see:hover, .lib-dd-btn:hover { background: var(--fill-strong); color: var(--text); }
.studio-gen { border-radius: var(--r-pill); padding: 7px 14px; }
.studio-new { border-radius: var(--r-pill); }

/* Foco visible y consistente en todo lo pulsable. */
:where(button, [role="button"], select, input, textarea, a):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

/* ------------------------------------------------------- Controles segmentados ---
   Pista gris con la opción elegida «levantada» (blanca con sombra), como en iOS/macOS.
   Sirve para modo de lectura, pase de página, ajuste del PDF, pestañas del agente y la
   barra lateral. «Pase de página» ni siquiera tenía estilo: eran botones del navegador. */
.reading-mode-selector, .pdf-fit-selector, .ai-tabs, .sidebar-tabs {
  display: flex; gap: 2px; padding: 2px;
  background: var(--fill);
  border-radius: 9px;
}
.reading-mode-btn, .pdf-fit-btn, .page-turn-btn, .ai-tab, .tab-btn {
  flex: 1; min-width: 0;
  padding: 6px 10px;
  border: none; border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}
.reading-mode-btn:hover, .pdf-fit-btn:hover, .page-turn-btn:hover, .ai-tab:hover, .tab-btn:hover {
  background: color-mix(in srgb, var(--surface-0) 45%, transparent);
  border-color: transparent;
}
.reading-mode-btn.active, .pdf-fit-btn.active, .page-turn-btn.active, .ai-tab.active, .tab-btn.active {
  background: var(--surface-0);
  color: var(--text);
  font-weight: 600;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] :is(.reading-mode-btn, .pdf-fit-btn, .page-turn-btn, .ai-tab, .tab-btn).active { background: #636366; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="sepia"]) :is(.reading-mode-btn, .pdf-fit-btn, .page-turn-btn, .ai-tab, .tab-btn).active { background: #636366; }
}
/* La barra lateral: la pista va con margen, no pegada al borde. */
.sidebar-tabs { margin: 10px 12px 4px; border-bottom: none; overflow: hidden; }
/* Cuatro pestañas en 296 px: se reparten el ancho y encogen letra y relleno lo justo para
   que «Subrayados» no se corte. */
.tab-btn { flex: 1 1 auto; padding: 6px 4px; font-size: 12.5px; }
.tab-btn::after { display: none !important; }
.ai-tabs { margin: 10px 16px 0; }
.ai-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ------------------------------------------------------ Desplegables y casillas --- */
select {
  -webkit-appearance: none; appearance: none;
  padding: 9px 34px 9px 12px;
  border: none; border-radius: var(--r-md);
  background-color: var(--fill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: var(--text);
  font: inherit; font-size: var(--fs-md);
  cursor: pointer;
}
select:hover { background-color: var(--fill-strong); }
/* Los campos de ajustes pintan su fondo con el atajo `background`, que borraba la flecha. */
select.appset-input {
  -webkit-appearance: none; appearance: none;
  padding-right: 34px; border: none;
  background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.appset-input:not(select) { background: var(--fill); border-color: transparent; }
.appset-input:not(select):focus { background: var(--surface-0); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
select:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Casillas como interruptores (iOS). Solo las de ajustes: las de listas siguen siendo casillas. */
input[type="checkbox"]:is(.appset-check, [id^="appset-"], [id^="set-"]),
.appset-row input[type="checkbox"], .settings-group input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  position: relative; flex: none;
  width: 36px; height: 22px; margin: 0;
  border-radius: 999px;
  background: var(--fill-strong);
  cursor: pointer;
  transition: background var(--transition-fast);
  vertical-align: middle;
}
input[type="checkbox"]:is(.appset-check, [id^="appset-"], [id^="set-"])::after,
.appset-row input[type="checkbox"]::after, .settings-group input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition-fast);
}
input[type="checkbox"]:is(.appset-check, [id^="appset-"], [id^="set-"]):checked,
.appset-row input[type="checkbox"]:checked, .settings-group input[type="checkbox"]:checked { background: var(--accent); }
input[type="checkbox"]:is(.appset-check, [id^="appset-"], [id^="set-"]):checked::after,
.appset-row input[type="checkbox"]:checked::after, .settings-group input[type="checkbox"]:checked::after { transform: translateX(14px); }

input[type="range"] { accent-color: var(--accent); }
input[type="text"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], textarea {
  font-family: inherit;
}

/* ------------------------------------------------------- Ajustes de lectura --- */
.settings-group label { font-size: 11px; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 8px; }
.font-size-control {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--fill); border-radius: 9px;
}
.font-size-control .icon-btn {
  width: 44px; height: 32px; border-radius: 7px; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.font-size-control .icon-btn:hover { background: var(--surface-0); }
.font-size-control span#font-size-value { min-width: 52px; font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.fs-a { font-family: var(--font-reader); font-weight: 600; line-height: 1; }
.fs-a--sm { font-size: 12px; }
.fs-a--lg { font-size: 21px; }
.column-width-control span, .line-height-control span, .slider-value { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.theme-btn.active { border-color: var(--text); box-shadow: 0 0 0 3px var(--fill); }

/* ------------------------------------------------ Selección en listas y rails ---
   Seleccionado = relleno gris y texto en tinta (como la barra lateral de Finder/Notas),
   no verde: el verde no puede significar a la vez «pulsa aquí» y «estás aquí». */
.lib-rail-row.is-active { background: var(--fill); }
.lib-rail-item.active { color: var(--text); font-weight: 600; }
.lib-rail-item.active .lib-rail-ico .icon { color: var(--text); }
.lib-rail-thumb--all { background: var(--fill); }
.lib-rail-thumb--all .icon { color: var(--text-soft); }
.lib-rail-settings, .lib-rail-settings:hover { color: var(--text); }
.appset-nav-item.active { background: var(--fill); color: var(--text); }
.appset-nav-item.active .icon { color: var(--accent); }

/* ---------------------------------------------------------- Panel del agente --- */
#ai-panel { background: var(--surface-1); }
/* Cerrado, el panel vive fuera de pantalla a la derecha, pero su sombra asomaba como una
   franja gris por todo el borde (en móvil, sobre la biblioteca). Sin abrir, sin sombra. */
body:not(.ai-open) #ai-panel { box-shadow: none; }
.ai-toolbar { border-bottom: none; }
/* La línea de estado solo aparece cuando dice algo (leyendo, generando…): «Listo para
   preguntar» ocupaba una fila entera para no decir nada. */
.ai-status { border-bottom: none; }
.ai-status.ai-status--idle { display: none; }
.ai-messages { background: transparent; }

/* Burbuja del usuario: gris de sistema con tinta (iMessage/Notas), no un bloque verde. */
.ai-msg-user .ai-bubble {
  background: var(--fill);
  color: var(--text);
  box-shadow: none;
  border-radius: 18px 18px 6px 18px;
}
.ai-msg-user .ai-bubble :is(a, .ai-cite) { color: var(--accent); }

/* Chips de cita: cápsula discreta con la página; al pasar, se rellena. */
.ai-cite { background: var(--accent-soft); color: var(--accent); font-variant-numeric: tabular-nums; }
.ai-cite:hover { background: var(--accent); color: var(--on-accent); }

/* Composer en cápsula: una caja con el campo y los botones dentro; enviar, redondo. */
.ai-composer { padding: 10px 14px 14px; border-top: none; background: transparent; }
.ai-compose-box {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 6px 6px 6px 14px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-1);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ai-compose-box:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
.ai-composer .ai-compose-box textarea {
  flex: 1; min-width: 0;
  min-height: 24px; max-height: 160px;
  padding: 7px 0; margin: 0;
  border: none; border-radius: 0; background: transparent;
  box-shadow: none; outline: none;
  font-size: var(--fs-md); line-height: 1.45; resize: none;
}
.ai-composer .ai-compose-box textarea:focus { border: none; outline: none; }
.ai-compose-box .ai-composer-btns { flex-direction: row; align-items: center; gap: 4px; }
.ai-compose-box .ai-composer-row { flex: none; gap: 4px; align-items: center; }
.ai-compose-box .ai-see { height: 32px; padding: 0 10px; border-radius: 16px; font-size: 12.5px; background: transparent; color: var(--text-soft); }
.ai-compose-box .ai-see:hover { background: var(--fill); color: var(--text); }
.ai-compose-box .ai-mic { width: 32px; padding: 0; }
.ai-compose-box .ai-mic-on { background: var(--accent); color: var(--on-accent); }
.ai-send {
  flex: none !important;
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--btn-bg); color: var(--btn-ink);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.ai-send:hover { background: var(--btn-bg-hover); }
.ai-send:active { transform: scale(0.94); }
.ai-send:disabled { opacity: 0.35; cursor: default; transform: none; }
@media (pointer: coarse) { .ai-composer .ai-compose-box textarea { font-size: 16px; } }

/* Studio en mosaico: cada tipo es una baldosa; con historial, ocupa el ancho entero. */
.studio-book { font-size: var(--fs-sm); color: var(--text-soft); font-weight: 500; margin-bottom: 12px; }
.studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.studio-group {
  margin: 0; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.studio-group--wide { grid-column: 1 / -1; }
.studio-group-head { margin: 0; }
.studio-ico {
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}
.studio-group-name { font-size: var(--fs-md); }
.studio-card { border: none; background: transparent; margin: 0; }
.studio-empty { padding: 0; gap: 10px; flex: 1; border: none; background: transparent; }
.studio-empty .studio-value { flex: 1; }
.studio-generated { background: var(--surface-1); border-radius: var(--r-md); }
.studio-generated + .studio-generated { margin-top: 6px; }
.studio-del { border-left: none; }

/* Aviso de una vez (coachmark): tinta, como un tooltip del sistema. */
.ai-coachmark { border-radius: 12px; }

/* ------------------------------------------------------------------ Lectura ---
   Papel a sangre: sin hoja con esquinas y sombra sobre un «escritorio» gris. El papel
   llena la zona de lectura y la cabecera y el pie son del mismo papel, sin rayas. Solo
   se cambia PINTURA (fondo, radio, sombra, bordes): nada de tamaños, que repaginarían. */
body.reading .reader-viewport:has(> .epub-container.has-desk) { background: var(--page-bg, var(--surface-0)); }
@media (min-width: 1001px) {
  body.reading:not(.scroll-mode) .epub-container.has-desk { border-radius: 0; box-shadow: none; }
}
body.reading .reader-header, body.reading .reader-footer {
  background: var(--page-bg, var(--surface-1));
  border-color: transparent;
  transition: background var(--transition-normal);
}
/* Cromo en calma: mientras lees, cabecera y pie se desvanecen (solo opacidad) y vuelven al
   acercar el ratón o al enfocarlos. Lo activa initImmersive() en app.js. */
body.reading.chrome-quiet:not(.fs) :is(.reader-header, .reader-footer) > * {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
body.reading :is(.reader-header, .reader-footer) > * { transition: opacity 0.2s var(--ease); }
body.reading :is(.reader-header, .reader-footer):hover > * { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body.reading :is(.reader-header, .reader-footer) > * { transition: none; }
}

/* --------------------------------------------------------------- Biblioteca --- */
.lib-h1 { font-size: 30px; letter-spacing: -0.025em; }
.lib-search-box { background: var(--fill); border-color: transparent; }
.lib-search-box:focus-within { background: var(--surface-0); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
.lib-search-box:focus-within .icon { color: var(--text-soft); }
.lib-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 28px 22px; }
.lib-cover { border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.10); }
.lib-card:hover .lib-cover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 16px 32px rgba(0,0,0,0.16); }
.lib-title { font-size: var(--fs-md); font-weight: 600; margin-top: 8px; line-height: 1.3; }
.lib-author { font-size: var(--fs-sm); color: var(--text-soft); }
.lib-progressbar { height: 3px; border-radius: 3px; background: var(--fill); }

/* «Continuar leyendo»: el libro a medias, grande, arriba de todo. */
.lib-continue { margin: 4px 0 28px; }
.lib-hero {
  display: flex; align-items: center; gap: 28px;
  padding: 22px;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  cursor: pointer;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.lib-hero:hover { box-shadow: var(--shadow-2); }
.lib-hero:hover .lib-hero-cover { transform: translateY(-3px) rotate(-0.6deg); }
.lib-hero-cover {
  flex: none; width: 128px; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden;
  background: var(--surface-3);
  box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 18px 36px rgba(0,0,0,0.18);
  transition: transform var(--transition-normal);
}
.lib-hero-cover .lib-cover-img, .lib-hero-cover .lib-cover-fallback { width: 100%; height: 100%; }
.lib-hero-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lib-hero-kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.lib-hero-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); }
.lib-hero-author { margin: 0; font-size: var(--fs-md); color: var(--text-soft); }
.lib-hero-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.lib-hero-progress .lib-progressbar { width: 180px; height: 4px; margin: 0; }
.lib-hero-cta {
  align-self: flex-start; margin-top: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-ink);
  font-size: var(--fs-sm); font-weight: 600;
}
@media (max-width: 767px) {
  /* La tira de estanterías se desliza: un fundido al final lo dice (antes cortaba «Aju…»
     sin ninguna pista de que había más). */
  .lib-rail {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    padding-right: 36px; scroll-padding-right: 36px;
  }
  .lib-rail-row, .lib-rail-settings { background: var(--fill); }
  /* Buscador a todo el ancho; debajo, filtros y subir en una fila. */
  .lib-toolbar { flex-wrap: wrap; row-gap: 10px; }
  .lib-search-box { flex: 1 1 100%; max-width: none; }
  .lib-hero { gap: 16px; padding: 14px; border-radius: var(--r-lg); }
  .lib-hero-cover { width: 84px; }
  .lib-hero-title { font-size: 19px; }
  .lib-hero-progress .lib-progressbar { width: 100px; }
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 22px 14px; }
}

/* ---------------------------------------------------- Infografía (IG2): carrusel y story ---
   Vista previa de las diapositivas en una tira que se desliza, cada una con su sombra de
   «publicación»; la story, una sola, más estrecha. */
.ig-slides {
  display: flex; gap: 16px; overflow-x: auto; padding: 8px 4px 18px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.ig-slide {
  flex: 0 0 auto; width: min(300px, 78vw); scroll-snap-align: start;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 10px 26px rgba(0,0,0,0.14);
}
.ig-slide svg { display: block; width: 100%; height: auto; max-width: 100%; }
.ig-slides--story .ig-slide { width: min(280px, 70vw); }
.mm-format-row:has(.ig-format) { margin-top: 6px; }
/* La cabecera del resultado (Volver · Regenerar) dejaba «Regenerar» debajo de la X de cerrar
   del modal: se le reserva su hueco. */
.sum-resulthead { padding-right: 44px; }
/* Selector de formato (mapa e infografía): mismo control segmentado que el resto de la app.
   En oscuro, la opción elegida se levanta en gris claro (antes quedaba más oscura que la pista). */
.mm-format { background: var(--fill); border-radius: 9px; padding: 2px; gap: 2px; }
.mm-format button { border-radius: 7px; color: var(--text); }
.mm-format button[aria-pressed="true"] { background: var(--surface-0); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06); }
[data-theme="dark"] .mm-format button[aria-pressed="true"] { background: #636366; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="sepia"]) .mm-format button[aria-pressed="true"] { background: #636366; }
}

/* ============================================================== Repaso (ST2) ===
   Pantalla de concentración: la tarjeta es un objeto (gira en 3D) y el montón de detrás es
   el progreso. `--book` es el color del libro de la tarjeta actual (de su portada). */
.ai-onboarding.study-screen {
  padding: 0; align-items: stretch; justify-content: stretch;
  background: var(--surface-0);
}
.study-screen .study-card {
  --book: var(--accent);
  max-width: none; max-height: none; min-height: 100%; height: 100%; width: 100%;
  border: none; border-radius: 0; box-shadow: none;
  padding: 18px max(20px, calc((100% - 720px) / 2)) max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, color-mix(in srgb, var(--book) 7%, var(--surface-0)), var(--surface-0) 55%);
  transition: background 0.4s ease;
}
.study-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--fill); }
.study-progress span { display: block; height: 100%; width: 0; background: var(--book); transition: width 0.35s var(--ease); }
.study-screen .study-head { padding-right: 0; margin: 6px 0 4px; }
.study-screen .study-head .ai-ob-close { position: static; margin-left: 4px; }
.study-screen .study-title { font-size: var(--fs-md); }
.study-tools { position: relative; align-items: center; }
.study-tool { opacity: 0.75; }
.study-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 250px;
  background: var(--surface-0); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-3); padding: 6px;
}
.study-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: none; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm);
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.study-menu-item:hover { background: var(--fill); }
.study-menu-item[data-act="delete"] { color: #d70015; }

.study-screen .study-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 8px 0; overflow: visible; }
.study-stage { position: relative; perspective: 1400px; width: 100%; max-width: 620px; margin: 0 auto; }
.study-stack { position: absolute; inset: 0; pointer-events: none; }
.study-stack span {
  position: absolute; inset: 0; border-radius: 22px;
  background: var(--surface-0); border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.study-stack span:nth-child(1) { transform: translateY(10px) scale(0.97); opacity: 0.9; }
.study-stack span:nth-child(2) { transform: translateY(20px) scale(0.94); opacity: 0.7; }
.study-stack span:nth-child(3) { transform: translateY(30px) scale(0.91); opacity: 0.5; }

.study-card3d {
  --drag: 0;
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  min-height: 340px;
  transform-style: preserve-3d;
  /* --drag es un NÚMERO sin unidad (JS lo setea como "-42"): así rotate() recibe un
     ángulo real vía calc(x / 30 * 1deg). La versión anterior (translateX(var(--drag))
     con --drag en px + rotate(calc(px / 30))) producía una LONGITUD donde rotate()
     exige un ángulo: declaración inválida → transform nunca aplicado → la tarjeta no
     giraba visualmente en ningún navegador (transform computado = none). */
  transform: translateX(calc(var(--drag) * 1px)) rotate(calc(var(--drag) / 30 * 1deg)) rotateY(0deg);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
  cursor: pointer; outline: none;
  /* pan-y: el gesto HORIZONTAL es del swipe (calificar); el vertical queda para el scroll
     del overlay en táctil. Sin esto, el navegador podía robarse el arrastre y matar el
     gesto con un pointercancel. El lienzo de dibujo sigue en touch-action: none. */
  touch-action: pan-y;
}
.study-card3d.is-flipped { transform: translateX(calc(var(--drag) * 1px)) rotate(calc(var(--drag) / 30 * 1deg)) rotateY(180deg); cursor: grab; }
.study-card3d.is-dragging { transition: none; }
.study-ghost-wrap { position: fixed; inset: 0; z-index: 301; pointer-events: none; }
.study-ghost { position: fixed !important; pointer-events: none; margin: 0; }
.study-card3d.out-left { transform: translateX(-120%) rotate(-8deg) rotateY(180deg); opacity: 0; transition: transform 0.22s ease-in, opacity 0.22s ease-in; }
.study-card3d.out-right { transform: translateX(120%) rotate(8deg) rotateY(180deg); opacity: 0; transition: transform 0.22s ease-in, opacity 0.22s ease-in; }
.study-card3d[data-lean="good"] .study-face--back { box-shadow: 0 0 0 3px color-mix(in srgb, #34c759 60%, transparent), var(--shadow-3); }
.study-card3d[data-lean="again"] .study-face--back { box-shadow: 0 0 0 3px color-mix(in srgb, #ff3b30 55%, transparent), var(--shadow-3); }
.study-face {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px;
  padding: 26px 30px 28px; border-radius: 22px;
  background: var(--surface-0); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 18px 44px rgba(0,0,0,0.10);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow-wrap: break-word;
  /* min-width: 0 + overflow:hidden: el contenido nowrap (deckname) no debe poder
     expandir la cara más allá del track (minmax(0,1fr) del grid la fija) ni
     derramarse fuera de la tarjeta. */
  min-width: 0; overflow: hidden;
}
.study-face--back { transform: rotateY(180deg); }
.study-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.study-meta-cover {
  flex: none; width: 22px; height: 32px; border-radius: 3px;
  background: var(--book) center / cover no-repeat; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.study-screen .study-deckname {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--book) 80%, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.study-screen .study-q {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-reader); font-size: clamp(22px, 3.4vw, 28px); font-weight: 600; line-height: 1.35;
}
.study-tap { margin: 0; text-align: center; font-size: 12.5px; color: var(--text-faint); }
.study-qmini { font-size: var(--fs-sm); color: var(--text-soft); font-weight: 500; }
.study-screen .study-a { border-top: none; padding-top: 0; font-size: 19px; line-height: 1.55; color: var(--text); }
.study-screen .study-face--back .study-a { font-family: var(--font-ui); }
.study-cloze {
  display: inline-block; min-width: 3em; padding: 0 4px; text-align: center;
  border-bottom: 2.5px solid var(--book); color: var(--text-faint); background: none; border-radius: 0;
}
.study-cloze.is-revealed { color: var(--text); background: color-mix(in srgb, var(--book) 16%, transparent); border-radius: 4px 4px 0 0; }
.study-screen .study-extra { font-size: var(--fs-md); }
.study-leech { align-items: center; flex-wrap: wrap; }
.study-leech-fix, .study-src {
  border: none; background: var(--fill); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600;
  border-radius: 999px; padding: 5px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.study-src { align-self: center; margin: 0 auto 2px; }
.study-src:hover, .study-leech-fix:hover { background: var(--fill-strong); }
.study-src:disabled { opacity: 0.55; cursor: default; }   /* segmentando el libro en caliente */

/* El pasaje citado, como recorte de página: papel, serif y plegado por defecto. */
.study-passage-wrap { margin-top: 6px; }
.study-passage-wrap summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.study-passage-wrap summary::-webkit-details-marker { display: none; }
.study-screen .study-passage {
  margin: 10px 0 0; padding: 14px 16px; border: none; border-radius: 10px;
  background: #fbf8f0; color: #3a3326; font-family: var(--font-reader); font-size: 15.5px; line-height: 1.6;
  box-shadow: inset 0 0 0 1px #ece4d2;
}

/* Recuerdo activo: escribe tu respuesta y el agente la corrige. */
.study-recall { width: 100%; max-width: 620px; margin: 8px auto 0; }
.study-recall-input {
  width: 100%; resize: none; min-height: 44px; max-height: 140px;
  padding: 11px 16px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface-0); color: var(--text); font: inherit; font-size: var(--fs-md);
}
.study-recall-input:focus { outline: none; border-color: color-mix(in srgb, var(--book) 60%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--book) 16%, transparent); }
.study-feedback { border-radius: 12px; padding: 12px 14px; background: var(--fill); font-size: var(--fs-sm); line-height: 1.5; }
.study-feedback p { margin: 6px 0 0; }
.study-feedback-wait { margin: 0 !important; color: var(--text-soft); display: flex; gap: 6px; align-items: center; }
.study-feedback-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.study-feedback-tag { font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.study-feedback-you { color: var(--text-soft); font-size: 12.5px; }
.study-feedback.is-good .study-feedback-tag { background: rgba(52,199,89,0.16); color: #1f8a3c; }
.study-feedback.is-partial .study-feedback-tag { background: rgba(255,149,0,0.16); color: #b25f00; }
.study-feedback.is-wrong .study-feedback-tag { background: rgba(255,59,48,0.14); color: #c81e1e; }
.study-working { margin: 0 auto; font-size: var(--fs-sm); color: var(--text-soft); display: flex; gap: 6px; align-items: center; }
.study-working.is-error { color: #c81e1e; }
.study-draft-note { font-size: var(--fs-sm); color: var(--text-soft); display: flex; gap: 6px; align-items: center; margin: 0 0 8px; }
.study-stage--edit { background: var(--surface-0); border: 1px solid var(--border); border-radius: 22px; padding: 22px; }

/* Tarjetas visuales (WU6): figura con oclusión, diagrama SVG y lienzo de dibujo. Todo con
   los tokens del tema (surface/border/accent) y con tope de alto para que la tarjeta siga
   cabiendo en el overlay (que ya gestiona su propio overflow). */
.study-fig { position: relative; margin: 2px auto 0; width: fit-content; max-width: 100%; }
.study-fig-img {
  display: block; max-width: 100%; max-height: 220px; margin: 0 auto;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-0);
  /* Ni drag nativo de imagen (Safari/WebKit): sobre la figura se desliza para calificar. */
  -webkit-user-drag: none;
}
.study-fig.is-loading { min-height: 60px; min-width: 160px; }
.study-fig-empty { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-faint); text-align: center; }
.study-occl {
  position: absolute; display: grid; place-items: center;
  min-width: 14px; min-height: 14px;
  background: var(--surface-0);
  border: 2px dashed color-mix(in srgb, var(--accent) 70%, var(--border));
  border-radius: 6px;
  color: var(--accent); font-weight: 700;
}
.study-occl-mark { font-size: 15px; line-height: 1; }
.study-occl.is-hl {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-style: solid;
  border-color: var(--accent);
}
.study-occl-answer { font-weight: 600; }
.study-diagram { width: 100%; max-height: 240px; margin: 2px 0 0; overflow: hidden; }
.study-diagram svg { display: block; width: 100%; height: auto; max-height: 240px; margin: 0 auto; }
/* Resaltado del nodo de respuesta: CSS gana a los atributos fill del SVG generado. */
.study-diagram .study-answer-node,
.study-diagram .study-answer-node text,
.study-diagram .study-answer-node tspan { fill: var(--accent); color: var(--accent); }
.study-draw { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.study-draw-canvas {
  display: block; width: 100%; height: 200px; touch-action: none;
  background: var(--surface-0); border: 1px solid var(--border); border-radius: 12px;
  cursor: crosshair;
}
.study-draw-bar { display: flex; gap: 8px; justify-content: center; }
.study-draw-bar button {
  border: none; border-radius: var(--r-pill); padding: 6px 14px;
  background: var(--fill); color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--transition-fast);
}
.study-draw-bar button:hover { background: var(--fill-strong); }
.study-steps { margin: 2px 0 0; padding-left: 20px; text-align: left; font-size: var(--fs-md); display: grid; gap: 4px; }

/* Pie: mostrar respuesta y notas. Tiempo en palabras, tinte suave por nota y la tecla. */
.study-screen .study-foot { width: 100%; max-width: 620px; margin: 0 auto; padding-top: 10px; }
.study-screen .study-flip { width: 100%; padding: 14px; font-size: var(--fs-md); border-radius: 14px; }
.study-grades.is-simple { grid-template-columns: 1fr 1fr; }
.study-screen .study-grade {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px 14px; border-radius: 14px; border: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: var(--fs-md); color: var(--text);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.study-screen .study-grade small { font-size: 12px; font-weight: 500; color: var(--text-soft); }
.study-screen .study-grade kbd {
  position: absolute; top: 7px; right: 8px; font: 600 10px var(--font-ui); color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; background: var(--surface-0);
}
.study-screen .study-grade:hover { transform: translateY(-1px); }
.study-screen .study-grade.is-again { background: rgba(255,59,48,0.10); }
.study-screen .study-grade.is-hard { background: rgba(255,149,0,0.12); }
.study-screen .study-grade.is-good { background: rgba(52,199,89,0.13); }
.study-screen .study-grade.is-easy { background: rgba(0,122,255,0.11); }
.study-screen .study-grade.is-suggested { box-shadow: 0 0 0 2px var(--book); }
.study-swipe-hint { display: none; margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--text-faint); }
@media (pointer: coarse) { .study-swipe-hint { display: block; } }

/* Final: anillo que se completa, datos, calendario de racha y previsión. */
.study-screen .study-end { gap: 12px; text-align: center; max-width: 620px; margin: 0 auto; width: 100%; }
.study-screen .study-end-icon { position: relative; width: 84px; height: 84px; background: none; display: grid; place-items: center; color: var(--book); }
.study-end-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.study-ring-track { fill: none; stroke: var(--fill); stroke-width: 5; }
.study-ring-fill { fill: none; stroke: var(--book); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; }
.study-end-icon.is-done .study-ring-fill { animation: study-ring 0.9s 0.1s var(--ease) forwards; }
@keyframes study-ring { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .study-end-icon.is-done .study-ring-fill { animation: none; stroke-dashoffset: 0; } }
.study-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: 4px; }
.study-stats div { background: var(--surface-0); border: 1px solid var(--border-soft); border-radius: 14px; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.study-stats b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.study-stats span { font-size: 12px; color: var(--text-soft); }
.study-end-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; margin-top: 6px; text-align: left; }
.study-end-charts > div { background: var(--surface-0); border: 1px solid var(--border-soft); border-radius: 14px; padding: 14px; }
.study-end-charts h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.study-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.study-heat-cell { aspect-ratio: 1; border-radius: 4px; background: var(--fill); }
/* Calidad del día (T5): subrayado por retención a la primera. Un color distinto del libro
   para que no se confunda con la cantidad: el calor dice cuánto, el subrayado cómo fue. */
.study-heat-cell.ret-good { box-shadow: inset 0 -3px 0 #16a34a; }
.study-heat-cell.ret-mid { box-shadow: inset 0 -3px 0 #d97706; }
.study-heat-cell.ret-low { box-shadow: inset 0 -3px 0 #dc2626; }
.study-heat-cell.lvl-1 { background: color-mix(in srgb, var(--book) 35%, var(--surface-0)); }
.study-heat-cell.lvl-2 { background: color-mix(in srgb, var(--book) 65%, var(--surface-0)); }
.study-heat-cell.lvl-3 { background: var(--book); }
.study-heat-cell.is-today { box-shadow: 0 0 0 1.5px var(--text); }
.study-forecast { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 110px; }
.study-fc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.study-fc-bar { width: 70%; min-height: 3px; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--book) 70%, var(--surface-0)); }
.study-fc-n { font-size: 11px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.study-fc-day { font-size: 10.5px; color: var(--text-faint); text-transform: capitalize; }
.study-end-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.study-end-actions .ai-ob-back { justify-content: center; }
.study-screen .study-streak { margin: 0; }

@media (max-width: 767px) {
  .study-screen .study-card { padding: 12px 16px max(16px, env(safe-area-inset-bottom)); }
  .study-face { padding: 20px 20px 22px; border-radius: 18px; }
  .study-card3d { min-height: 300px; }
  .study-end-charts { grid-template-columns: 1fr; }
  .study-fig-img, .study-diagram svg { max-height: 160px; }
  .study-diagram { max-height: 160px; }
  .study-draw-canvas { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .study-card3d, .study-card3d.is-flipped { transition: none; }
  .study-card3d.is-flipped { transform: none; }
  .study-card3d.is-flipped .study-face--front { visibility: hidden; }
  .study-card3d .study-face--back { transform: none; visibility: hidden; }
  .study-card3d.is-flipped .study-face--back { visibility: visible; }
}

/* ------------------------------------------------ Biblioteca: «Hoy» junto a «Continuar» --- */
.lib-top { display: grid; gap: 18px; margin: 4px 0 28px; }
.lib-top .lib-continue { margin: 0; }
.lib-top.has-today:has(.lib-continue) { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
.lib-today-slot:empty { display: none; }
.lib-today {
  height: 100%; display: flex; align-items: center; gap: 20px; padding: 22px;
  background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--r-xl);
}
.lib-today-ring { position: relative; flex: none; width: 88px; height: 88px; display: grid; place-items: center; }
.lib-today-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lib-ring-track { fill: none; stroke: var(--fill); stroke-width: 6; }
.lib-ring-fill { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.6s var(--ease); }
.lib-today-ring span { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); display: grid; place-items: center; }
.lib-today.is-done .lib-today-ring span { color: var(--accent); }
.lib-today-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lib-today-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.lib-today-meta { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); }
.lib-today-covers { display: flex; margin: 6px 0 2px; }
.lib-today-covers img, .lib-today-ph {
  width: 26px; height: 38px; border-radius: 3px; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  border: 2px solid var(--surface-1); margin-left: -6px; background: var(--surface-3);
  display: grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--text-soft);
}
.lib-today-covers > :first-child { margin-left: 0; }
.lib-today-actions { position: relative; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lib-today .lib-study-chip {
  display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-ink); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: 9px 16px; border-radius: 999px;
}
.lib-today .lib-study-chip:hover { background: var(--btn-bg-hover); }
.lib-study-pick {
  display: inline-flex; align-items: center; gap: 4px; border: none; cursor: pointer;
  background: var(--fill); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: 9px 12px; border-radius: 999px;
}
.lib-study-pick:hover { background: var(--fill-strong); }
@media (max-width: 767px) {
  .lib-top.has-today:has(.lib-continue) { grid-template-columns: 1fr; }
  .lib-today { padding: 14px; gap: 14px; border-radius: var(--r-lg); }
  .lib-today-ring { width: 70px; height: 70px; }
}

/* ----------------------------- Retención visible (T1): racha siempre presente -------------- */
.study-streakchip {
  flex: none; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: 999px; background: var(--fill); color: var(--text);
}
.study-streakchip.is-zero { opacity: 0.45; }
/* «En riesgo»: hoy todavía no repasaste y la racha vive. Pulso suave que pide acción. */
.study-streakchip.is-risky {
  background: color-mix(in srgb, var(--accent) 14%, var(--fill));
  animation: study-risk 1.8s var(--ease) infinite;
}
@keyframes study-risk { 50% { opacity: 0.55; } }

/* Meta diaria (T3): anillo de progreso en el header, ajustable al click. Cuenta el repaso
   del día entero (study_log), no el de la sesión: la promesa es diaria. */
.study-goal {
  position: relative; flex: none; width: 34px; height: 34px;
  display: grid; place-items: center; border: none; background: none; cursor: pointer; padding: 0;
}
.study-goal svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.study-goal-track { fill: none; stroke: var(--fill); stroke-width: 4; }
.study-goal-fill {
  fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round;
  transition: stroke-dashoffset 0.5s var(--ease);
}
.study-goal-n { font-size: 9.5px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.study-goal.is-done .study-goal-n { color: var(--accent); }
.study-goal-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; white-space: nowrap;
  background: var(--surface-1); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.study-goal-v { font-size: var(--fs-sm); color: var(--text-soft); }
.study-goal-v b { color: var(--text); font-variant-numeric: tabular-nums; }
.study-goal-less, .study-goal-more {
  width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer;
  border: none; border-radius: 999px; background: var(--fill); color: var(--text);
  font: inherit; font-weight: 700; line-height: 1;
}
.study-goal-less:hover, .study-goal-more:hover { background: var(--fill-strong); }

/* Hito de racha (T4): celebración puntual al cruzar 7/30/100/365, con tarjeta compartible. */
.study-milestone {
  display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px;
  text-align: left; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-soft));
}
.study-milestone-flame { flex: none; font-size: 28px; }
.study-milestone-txt { flex: 1; min-width: 0; }
.study-milestone-txt h3 { margin: 0; font-size: var(--fs-md); color: var(--text); }
.study-milestone-txt p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-soft); }
.study-share {
  flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 12px; border: none; border-radius: var(--r-md);
  background: var(--accent); color: #fff; font: inherit; font-size: var(--fs-sm); font-weight: 600;
}
.study-share:disabled { opacity: 0.6; }
.study-share:hover { filter: brightness(1.05); }
.lib-streak-slot { display: inline-flex; justify-content: flex-end; }
.lib-streakchip {
  display: inline-flex; align-items: center; gap: 6px; align-self: start;
  padding: 6px 14px; border-radius: 999px; background: var(--surface-1);
  border: 1px solid var(--border-soft); font-size: var(--fs-sm); color: var(--text);
}
.lib-streakchip b { font-variant-numeric: tabular-nums; }
.lib-streakchip.is-risky {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
  animation: study-risk 1.8s var(--ease) infinite;
}

/* Dominio del libro (T2): % del material dominado, ponderado por estabilidad FSRS. La barra
   vive justo bajo la de progreso de lectura: leer ≠ dominar, y ahora se ve la diferencia. */
.lib-mastery {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.lib-mastery-bar {
  position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--fill);
  overflow: hidden;
}
.lib-mastery-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--accent); border-radius: 2px;
  transition: width 0.5s var(--ease);
}
.lib-mastery-lbl { flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.lib-mastery[hidden] { display: none; }