:root { --bg:#fbfbf9; --surface:#f3f3ee; --ink:#181816; --muted:#6e6d67; --line:#e2e2dc; --accent:#c45a27; --accent-glow:rgba(196,90,39,0.2); --carousel-glow:rgba(0,0,0,0.18); --carousel-bg:rgba(251,251,249,0.85); --reader-size:19px; --type-card-title-size:15.5px; --type-card-title-weight:700; --type-card-title-leading:1.25; --type-card-body-size:13.5px; --type-card-body-weight:400; --type-card-body-leading:1.42; font-family:Arial, Helvetica, sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; }
html,body { max-width:100%; overflow-x:clip; }
body { margin:0; background:var(--bg); color:var(--ink); }
button, input { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; max-width:1440px; min-width:0; margin:auto; }
.topbar { height:72px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 4vw; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:10px; appearance:none; border:0; background:transparent; font-size:19px; font-weight:800; letter-spacing:.08em; color:var(--ink); }.brand-logo, .menu-brand img { width:28px !important; min-width:28px !important; max-width:28px !important; height:28px !important; min-height:28px !important; max-height:28px !important; aspect-ratio:1/1 !important; object-fit:contain !important; flex:0 0 28px !important; display:inline-block !important; vertical-align:middle; border-radius:6px; }.menu-brand { display:inline-flex; align-items:center; gap:10px; font-size:18px; font-weight:800; letter-spacing:.06em; color:var(--ink); }
.top-actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }.search { display:flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; }.search input { width:145px; border:0; outline:0; background:transparent; color:var(--ink); }
.import-button { display:inline-flex; align-items:center; justify-content:center; width:42px; min-width:42px; min-height:42px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); }.import-icon { width:21px; height:21px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.icon-button { min-width:40px; height:40px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font-weight:700; }.navigation { display:flex; gap:28px; padding:0 4vw; border-bottom:1px solid var(--line); overflow:auto; }.nav-item { padding:16px 0 13px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font-size:16.5px; white-space:nowrap; }.nav-item.active { color:var(--ink); border-color:var(--accent); font-weight:700; }
main { min-width:0; padding:42px 4vw 70px; }.view { display:none; min-width:0; }.view.active { display:block; }.continue-card { display:none; grid-template-columns:80px 1fr auto; gap:20px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:12px; margin-bottom:48px; background:var(--surface); }.continue-card.visible { display:grid; }.continue-card h2 { font-size:22px; line-height:1.25; margin:2px 0 8px; }.continue-card p { color:var(--muted); margin:0; font-size:15.5px; line-height:1.42; }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 22px; }.eyebrow { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.11em; margin:0 0 8px; }.section-heading h1 { margin:0; font-size:clamp(28px,3vw,34px); letter-spacing:-.04em; }.text-button { border:0; background:transparent; color:var(--ink); padding:8px 0; font-size:16px; font-weight:700; }.primary-button,.secondary-button,.setting-button { border-radius:7px; padding:10px 14px; border:1px solid var(--ink); font-size:16px; font-weight:700; }.primary-button { background:var(--ink); color:var(--bg); }.secondary-button,.setting-button { background:var(--bg); color:var(--ink); }
.collection-carousel-wrapper { position:relative; display:flex; align-items:center; margin:0 0 24px; }
.collection-carousel-wrapper[hidden] { display:none !important; }.collection-carousel-wrapper .collection-filters { display:flex; gap:8px; margin:0; padding:6px 0 12px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; width:100%; }.collection-carousel-wrapper .collection-filters::-webkit-scrollbar { display:none; }.carousel-arrow { position:absolute; top:calc(50% - 3px); transform:translateY(-50%); z-index:5; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--carousel-bg); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--ink); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.1); opacity:0; pointer-events:none; transition:opacity .3s ease, transform .2s ease, background .2s ease, box-shadow .2s ease; }.carousel-arrow svg { display:block; pointer-events:none; }.carousel-arrow.prev { left:-4px; }.carousel-arrow.next { right:-4px; }.carousel-arrow.visible { opacity:.6; pointer-events:auto; animation:carousel-arrow-breathe 2.4s ease-in-out infinite; }.carousel-arrow.visible:hover { opacity:1 !important; transform:translateY(-50%) scale(1.12) !important; animation-play-state:paused; background:var(--bg); box-shadow:0 4px 14px var(--carousel-glow); }.carousel-arrow.visible:active { transform:translateY(-50%) scale(.92) !important; }@keyframes carousel-arrow-breathe { 0%,100% { opacity:.35; transform:translateY(-50%) scale(.95); box-shadow:0 1px 4px rgba(0,0,0,0.06); } 50% { opacity:.95; transform:translateY(-50%) scale(1.08); box-shadow:0 0 14px var(--carousel-glow); } }.filter { display:inline-flex; align-items:center; min-height:42px; padding:8px 14px; border:1px solid var(--line); border-radius:99px; background:var(--bg); color:var(--muted); font-size:15px; white-space:nowrap; scroll-snap-align:start; }.filter.active { background:var(--ink); color:var(--bg); border-color:var(--ink); }.book-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:28px 18px; }.book-card { text-align:left; border:0; padding:0; background:transparent; color:var(--ink); }.cover { position:relative; display:flex; min-height:225px; align-items:flex-end; padding:16px; background:#deded8; border-radius:5px; overflow:hidden; color:#fff; box-shadow:0 7px 18px #00000012; }.cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,#000000c9); }.cover > * { position:relative; z-index:1; }.cover-title { font-size:21px; font-family:Georgia, serif; line-height:1.1; font-weight:400; }.cover-subtitle { position:absolute; top:16px; left:16px; font-size:10px; letter-spacing:.1em; }.book-card h3 { margin:12px 0 4px; font-size:var(--type-card-title-size); font-weight:var(--type-card-title-weight); line-height:var(--type-card-title-leading); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.book-card p { margin:0; font-size:var(--type-card-body-size); font-weight:var(--type-card-body-weight); line-height:var(--type-card-body-leading); color:var(--muted); }.book-card progress { width:100%; height:3px; margin-top:10px; accent-color:var(--accent); }
.continue-cover { width:80px; height:116px; flex-shrink:0; border-radius:8px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,0.14); }
.compact-cover { width:80px; height:116px; min-height:116px; max-height:116px; padding:10px 8px; box-sizing:border-box; border-radius:8px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; overflow:hidden; position:relative; }
.compact-cover .cover-subtitle { position:static; font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.92; margin-bottom:auto; }
.compact-cover .cover-title { font-size:11px; font-family:Georgia, serif; font-weight:700; line-height:1.2; width:100%; max-width:100%; word-break:break-word; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-overflow:ellipsis; }
.collection-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }.collection-card,.settings-card,.empty-state { border:1px solid var(--line); border-radius:10px; padding:20px; background:var(--surface); }.collection-card { display:flex; justify-content:space-between; align-items:center; text-align:left; }.collection-card h2 { margin:0 0 5px; font-size:18px; line-height:1.25; }.collection-card p,.settings-note { margin:0; color:var(--muted); font-size:15.5px; font-weight:var(--type-card-body-weight); line-height:var(--type-card-body-leading); }.settings-card { max-width:620px; }.setting-row { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:58px; font-size:16px; border-bottom:1px solid var(--line); }.setting-row:last-of-type { border:0; }.setting-row input { accent-color:var(--accent); }.settings-note { padding-top:14px; }.empty-state { color:var(--muted); }
.reader-view { position:fixed; inset:0; z-index:2000; width:100vw; height:100vh; height:100dvh; max-width:none; margin:0; padding:0; background:#ffffff; display:none; flex-direction:column; overflow:hidden; user-select:none; }.reader-view.active { display:flex; }
.reader-hud { position:fixed; left:0; right:0; z-index:2040; display:flex; align-items:center; justify-content:center; padding:8px 14px; background:var(--carousel-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-color:var(--line); transition:transform .24s cubic-bezier(0.16, 1, 0.3, 1), opacity .22s ease; pointer-events:none; }
.reader-hud.top-hud { top:0; height:56px; border-bottom:1px solid var(--line); box-shadow:0 4px 18px rgba(0,0,0,0.06); }
.reader-hud-inner { width:100%; max-width:min(94vw, 920px); margin:0 auto; display:flex; flex-direction:row; align-items:center; justify-content:space-between; position:relative; pointer-events:auto; }
.reader-view.zen-mode .reader-hud.top-hud { transform:translateY(-115%) !important; opacity:0 !important; pointer-events:none !important; }
.hud-left { flex:1 1 0; display:flex; align-items:center; justify-content:flex-start; gap:8px; min-width:0; }
.hud-center { flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:8px; }
.hud-right { flex:1 1 0; display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
.hud-book-title { margin:0; font-size:14px; font-weight:700; color:var(--ink); max-width:clamp(100px, 26vw, 300px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hud-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:36px; height:36px; padding:0 8px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:all .16s ease; pointer-events:auto; }
.hud-btn:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.hud-btn.close-btn:hover { background:#a82020; color:#fff; border-color:#a82020; }
.hud-btn.audio-mode-btn { color:var(--accent); font-weight:700; }
.hud-btn.audio-mode-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.hud-btn.audio-mode-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); animation:audio-pulse 1.8s ease-in-out infinite; }
.hud-btn.audio-mode-btn.active.paused { animation-play-state:paused; opacity:.85; }
@keyframes audio-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(196,90,39,0.5); } 50% { box-shadow:0 0 0 8px rgba(196,90,39,0); } }

/* Barra Lateral Flotante Derecha (Solo Audio, Micrófono y Aa) */
.reader-right-toolbar { position:fixed; right:12px; top:50%; transform:translateY(-50%); z-index:2050; display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 6px; background:var(--carousel-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--line); border-radius:99px; box-shadow:0 6px 24px rgba(0,0,0,0.16); transition:transform .26s cubic-bezier(0.16, 1, 0.3, 1), opacity .22s ease; }
.reader-view.zen-mode .reader-right-toolbar { transform:translate(140%, -50%) !important; opacity:0 !important; pointer-events:none !important; }

/* Barra Inferior Flotante (Herramientas de Estudio y Marcador) */
.reader-bottom-toolbar { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:2050; display:flex; flex-direction:row; align-items:center; gap:5px; padding:6px 14px; background:var(--carousel-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--line); border-radius:99px; box-shadow:0 6px 24px rgba(0,0,0,0.16); transition:transform .26s cubic-bezier(0.16, 1, 0.3, 1), opacity .22s ease; }
.reader-view.zen-mode .reader-bottom-toolbar { transform:translate(-50%, 150%) !important; opacity:0 !important; pointer-events:none !important; }
.hud-tool-sep-h { display:block; width:1px; height:18px; background:var(--line); margin:0 4px; }

.hud-tool-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; min-width:34px; height:34px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; transition:all .16s ease; }
.hud-tool-btn:hover { background:rgba(0,0,0,0.08); color:var(--ink); }
body.dark .hud-tool-btn:hover { background:rgba(255,255,255,0.14); color:#fff; }
.hud-tool-btn.active { background:var(--ink); color:var(--bg); box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.hud-tool-btn:disabled { opacity:.25; cursor:not-allowed; }
.hud-tool-sep-v { display:block; width:18px; height:1px; background:var(--line); margin:3px 0; }
.tool-highlight-container, .tool-bookmark-container { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.highlight-color-dot-indicator { position:absolute; bottom:3px; right:4px; width:7px; height:7px; border-radius:50%; box-shadow:0 0 0 1.5px var(--surface); pointer-events:none; transition:background-color .15s ease; }
.bookmark-color-dot-indicator { position:absolute; bottom:3px; right:4px; width:7px; height:7px; border-radius:50%; background:transparent; border:2px solid currentColor; box-shadow:0 0 0 1.5px var(--surface); pointer-events:none; }

/* Popovers Flotantes: Hacia arriba en la barra inferior, lateral en barra derecha */
.reader-bottom-toolbar .hud-color-popover.bottom-popover { position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%); top:auto; right:auto; z-index:2060; display:flex; flex-direction:row; align-items:center; gap:8px; padding:7px 12px; border-radius:99px; background:var(--surface); border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,0.22); animation:popover-slide-up .15s cubic-bezier(0.16, 1, 0.3, 1); }
.reader-bottom-toolbar .hud-color-popover[hidden] { display:none !important; }
@keyframes popover-slide-up { from { opacity:0; transform:translate(-50%, 8px); } to { opacity:1; transform:translate(-50%, 0); } }

.reader-right-toolbar .hud-color-popover { position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%); z-index:2060; display:flex; flex-direction:row; align-items:center; gap:6px; padding:6px 10px; border-radius:99px; background:var(--surface); border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,0.22); animation:popover-slide-left .14s cubic-bezier(0.16, 1, 0.3, 1); }
.reader-right-toolbar .hud-color-popover[hidden] { display:none !important; }
@keyframes popover-slide-left { from { opacity:0; transform:translate(8px, -50%); } to { opacity:1; transform:translate(0, -50%); } }

.color-dot { width:22px; height:22px; border-radius:50%; background:var(--dot-c); border:2px solid transparent; cursor:pointer; padding:0; transition:transform .14s ease, box-shadow .14s ease; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.color-dot:hover { transform:scale(1.22); }
.color-dot.active { border-color:var(--ink); transform:scale(1.18); box-shadow:0 0 0 2px var(--bg), 0 2px 8px rgba(0,0,0,0.25); }

/* Puntos de Marcador Flotante (Sin fondo y con borde nítido de color) */
.bookmark-color-dot { width:22px; height:22px; border-radius:50%; background:transparent !important; border:2.5px solid var(--bdot-c) !important; cursor:pointer; padding:0; transition:transform .14s ease, box-shadow .14s ease; box-shadow:0 1px 3px rgba(0,0,0,0.15); box-sizing:border-box; }
.bookmark-color-dot:hover { transform:scale(1.25); box-shadow:0 0 8px var(--bdot-c); }
.bookmark-color-dot.active { transform:scale(1.22); box-shadow:0 0 0 2px var(--bg), 0 0 10px var(--bdot-c); }
.bookmark-clear-dot { width:22px; height:22px; border-radius:50%; background:transparent; border:1.5px solid var(--muted); color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; cursor:pointer; padding:0; transition:all .14s ease; }
.bookmark-clear-dot:hover { border-color:#ff3b30; color:#ff3b30; transform:scale(1.15); }

/* Ribbon de Marcador en esquina de cada página (Sin fondo y con borde fino del color) */
.page-bookmark-ribbon { position:absolute; top:0; right:18px; z-index:15; background:transparent; border:0; padding:4px 2px; cursor:pointer; color:rgba(160, 160, 150, 0.32); transition:color .2s ease, transform .2s ease, filter .2s ease; display:flex; align-items:center; justify-content:center; outline:none; }
.page-bookmark-ribbon svg { fill:transparent !important; stroke:currentColor !important; stroke-width:2.2 !important; }
@media (hover: hover) {
  .page-bookmark-ribbon:hover { color:var(--accent); transform:translateY(2px); }
}
.page-bookmark-ribbon.active { color:var(--ribbon-color, #ffd60a) !important; transform:translateY(2px) scale(1.1); filter:drop-shadow(0 2px 8px rgba(0,0,0,0.22)); }
#reader-bookmark.active { color:var(--accent); }

/* Toast flotante para avisos inmediatos */
.reader-toast { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:2100; background:var(--ink); color:var(--bg); padding:8px 16px; border-radius:99px; font-size:13px; font-weight:700; box-shadow:0 6px 22px rgba(0,0,0,0.25); pointer-events:none; animation:toast-in .2s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes toast-in { from { opacity:0; transform:translate(-50%, -10px); } to { opacity:1; transform:translate(-50%, 0); } }

@media (max-width: 768px) {
  .reader-hud.top-hud {
    height: 48px !important;
    padding: 4px 10px;
  }
  .reader-hud.top-hud .hud-left,
  .reader-hud.top-hud .hud-right {
    gap: 6px;
  }
  #reader-sidebar-toggle .hud-btn-text {
    display: none !important;
  }
  #reader-sidebar-toggle, .hud-btn.close-btn, #reader-theme, #collapse-top-hud {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
  }
  .hud-book-title {
    font-size: 13px !important;
    max-width: 140px !important;
  }
  .reader-right-toolbar {
    right: 6px !important;
    padding: 6px 3px !important;
    gap: 3px !important;
  }
  .reader-right-toolbar .hud-tool-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
  }
  .reader-right-toolbar .hud-tool-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
  .reader-bottom-toolbar {
    bottom: 12px !important;
    padding: 5px 10px !important;
    gap: 3px !important;
    max-width: 96vw;
  }
  .reader-bottom-toolbar .hud-tool-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
  }
  .reader-bottom-toolbar .hud-tool-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* Zoom inline group en barra lateral derecha (estilo ReadEra) */
.zoom-inline-group { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 0; }
.zoom-btn { width:34px; height:34px; border-radius:50%; transition:background .14s ease, transform .1s ease; }
.zoom-btn:hover { background:rgba(0,0,0,0.1); }
body.dark .zoom-btn:hover { background:rgba(255,255,255,0.15); }
.zoom-btn:active { transform:scale(0.88); }
.zoom-pct-label { font-size:10px; font-weight:800; color:var(--accent); letter-spacing:-0.2px; line-height:1; min-width:30px; text-align:center; }

/* Separador visual entre iconos del toolbar y grupo zoom */
.reader-right-toolbar .hud-tool-sep { width:22px; height:1px; background:var(--line); margin:2px 0; }

/* Reglas heredadas (pueden existir referencias en JS) */
.text-settings-dropdown { display:none !important; }
.text-scale-val, .text-settings-row, .text-settings-header, .text-settings-label,
.text-scale-controls, .scale-step-btn { display:none !important; }


.reader-stage-container { position:absolute; inset:0; width:100%; height:100%; display:block; overflow-y:auto; overflow-x:auto; padding:0; margin:0; background:#ffffff !important; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; overscroll-behavior-y:auto; scroll-behavior:auto; touch-action:pan-x pan-y; }
.reader-view.zen-mode .reader-stage-container { padding:0; }
.pdf-viewer-wrap { position:relative; display:flex; flex-direction:column; align-items:center; gap:0; width:max-content; min-width:100%; margin:0 auto; padding:0; box-sizing:border-box; transform-origin:0 0; touch-action:pan-x pan-y; background:#ffffff; will-change:transform; }
.reader-view.zen-mode .pdf-viewer-wrap { padding:0; }
.pdf-page-container { position:relative; box-shadow:none !important; border-radius:0 !important; background:#ffffff !important; display:block; box-sizing:border-box; overflow:hidden; margin:0 auto; }
.pdf-viewer-wrap.tools-active, .pdf-viewer-wrap.tools-active .pdf-page-container { touch-action:none !important; user-select:none; }
.pdf-page-container canvas.pdf-page-canvas { display:block; width:100%; height:100%; background:#ffffff; }
.pdf-page-container canvas.pdf-annotation-canvas { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; touch-action:none; z-index:5; }
.pdf-viewer-wrap.tools-active canvas.pdf-annotation-canvas { pointer-events:none; }
.pdf-page-container .pdf-notes-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:8; }
.pdf-page-divider { width:100%; height:2px; background:#000000; margin:0; padding:0; border:none; user-select:none; pointer-events:none; opacity:1; box-sizing:border-box; flex-shrink:0; }
body.dark .reader-stage-container { background:#121211 !important; }
body.dark .pdf-viewer-wrap { background:#121211 !important; }
body.dark .pdf-page-container { background:#121211 !important; }
body.dark .pdf-page-divider { background:#2e2e2b !important; }
.note-pin { position:absolute; transform:translate(-50%, -100%); pointer-events:auto; background:#fff3c4; color:#5c4403; border:1.5px solid #e2b024; border-radius:8px 8px 8px 0; padding:4px 7px; font-size:13px; font-weight:700; box-shadow:0 3px 10px rgba(0,0,0,0.22); cursor:pointer; display:inline-flex; align-items:center; gap:3px; transition:transform .16s cubic-bezier(0.16,1,0.3,1), box-shadow .16s ease; line-height:1; }
.note-pin:hover { transform:translate(-50%, -110%) scale(1.14); box-shadow:0 6px 18px rgba(0,0,0,0.32); }
body.dark .note-pin { background:#42360a; color:#fde68a; border-color:#d4a72c; }
.note-dialog { width:min(92vw, 420px); border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:0; box-shadow:0 18px 48px rgba(0,0,0,0.28); overflow:hidden; }
.note-dialog::backdrop { background:rgba(0,0,0,0.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.note-form { display:flex; flex-direction:column; padding:18px 20px; gap:12px; }
.note-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:8px; border-bottom:1px solid var(--line); }
.note-header-info { display:flex; align-items:center; gap:8px; }
.note-badge { background:var(--accent); color:#fff; font-size:11px; font-weight:800; padding:3px 8px; border-radius:6px; letter-spacing:.05em; }
.note-page-tag { font-size:13px; font-weight:600; color:var(--muted); }
.note-body { display:flex; flex-direction:column; gap:6px; }
.note-body textarea { width:100%; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; font-size:15px; line-height:1.5; padding:12px; resize:vertical; min-height:90px; outline:0; }
.note-body textarea:focus { border-color:var(--accent); }
.note-time-info { margin:0; font-size:12px; color:var(--muted); }
.note-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:8px; border-top:1px solid var(--line); }
.note-delete-btn { color:#a82020 !important; border-color:#a82020 !important; font-size:14px; }
.note-delete-btn:hover { background:#a82020 !important; color:#fff !important; }
.note-save-btn { font-size:14px; }
.text-page-wrap { font-family:Georgia, 'Times New Roman', serif; font-size:var(--reader-size); line-height:1.8; max-width:720px; width:100%; margin:auto; padding:24px 20px; color:var(--ink); }.text-page-wrap h1 { font-size:1.6em; line-height:1.25; margin:0 0 28px; }.text-page-wrap p { margin:0 0 1.4em; }
.bike-bottom-sheet { position:absolute; bottom:0; left:50%; transform:translate(-50%, 105%); z-index:2060; width:min(94vw, 500px); background:var(--surface); border:1px solid var(--line); border-bottom:0; border-radius:20px 20px 0 0; padding:14px 20px 24px; box-shadow:0 -8px 36px rgba(0,0,0,0.22); transition:transform .3s cubic-bezier(0.16, 1, 0.3, 1); }.bike-bottom-sheet.open { transform:translate(-50%, 0); }.bike-drag-handle { width:44px; height:5px; border-radius:99px; background:var(--line); margin:0 auto 10px; cursor:pointer; }.bike-sheet-header { display:grid; grid-template-columns:1fr auto; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line); }.bike-sheet-title, .audio-sheet-title { display:flex; align-items:center; gap:12px; color:var(--ink); }.bike-hint { color:var(--muted); font-size:13.5px; margin:12px 0 16px; }.bike-big-controls { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:10px; margin-bottom:16px; }.bike-primary-btn { min-height:50px; border-radius:10px; border:0; background:var(--accent); color:#fff; font:inherit; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 4px 14px var(--accent-glow); transition:transform .15s ease, opacity .15s ease; }.bike-primary-btn:active { transform:scale(0.97); }.bike-secondary-btn { min-height:50px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:transform .15s ease; }.bike-secondary-btn:active { transform:scale(0.97); }.bike-speed-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; font-size:14px; color:var(--ink); }.bike-speed-row input { flex:1; accent-color:var(--accent); }.bike-speed-row output { font-weight:700; min-width:36px; text-align:right; }
body.dark { --bg:#121211; --surface:#1a1a19; --ink:#f2f2ed; --muted:#9c9b94; --line:#2e2e2b; --accent:#e57238; --accent-glow:rgba(229,114,56,0.25); --carousel-glow:rgba(255,255,255,0.22); --carousel-bg:rgba(26,26,25,0.85); } body.dark .cover { color:#fff; } body.dark .primary-button { background:#f4f4ef; color:#111; } body.dark .filter.active { background:#f4f4ef; color:#111; }
.image-cover { padding:0; background:#e7e7e2; }.image-cover::after { display:none; }.image-cover img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }.pdf-viewer { display:block; width:100%; height:72vh; border:1px solid var(--line); border-radius:7px; background:#fff; }.book-card p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader-page:fullscreen { width:100vw; max-width:none; height:100vh; min-height:100vh; margin:0; padding:0; background:#111; }
.reader-mode { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--muted); margin-bottom:26px !important; }.reader-loading { font-family:Arial, Helvetica, sans-serif; color:var(--muted); text-align:center; padding:64px 20px; }.reader-page { max-width:720px; padding:0 18px; }.reader-page p { font-size:var(--reader-size); }
@media (max-width:600px) { .reader-page { padding:0 4px; margin-top:22px; }.reader-page p { font-size:var(--reader-size); line-height:1.72; }.reader-page h1 { font-size:1.35em; } }
@media (max-width:600px) { .reader-view { width:100%; }.reader-page { margin:16px 0; } }
@media (max-width:600px) { .topbar { height:66px; padding:0 14px; gap:8px; display:flex; justify-content:space-between; align-items:center; }.navigation { gap:22px; padding:0 18px; }.search { display:none; } main { padding:28px 18px 50px; }.section-heading h1 { font-size:28px; }.book-grid,.study-book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }.cover { min-height:210px; }.continue-card { grid-template-columns:58px 1fr; gap:12px; }.continue-card .primary-button { grid-column:2; justify-self:start; }.reader-header { grid-template-columns:1fr auto; }.reader-header p { display:none; }.reader-page { margin:32px 0; }.reader-options { justify-content:space-between; gap:8px; }.reader-options input { width:120px; }.listen-controls .primary-button { width:100%; }.reader-footer { font-size:11px; } }
.study-route { display:block; }.study-section { border-top:1px solid var(--line); padding:30px 0 38px; }.study-section:first-child { border-top:0; padding-top:0; }.study-section-header { display:grid; grid-template-columns:58px minmax(0,1fr); gap:16px; align-items:start; margin-bottom:22px; }.study-step { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--accent); border-radius:50%; font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--accent); }.study-section h2 { margin:0 0 6px; font-size:22px; letter-spacing:-.025em; }.study-section p { max-width:680px; margin:0; color:var(--muted); line-height:1.45; }.study-book-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:28px 18px; } @media (max-width:600px) { .study-section { padding:26px 0 32px; }.study-section-header { grid-template-columns:44px minmax(0,1fr); gap:12px; }.study-step { width:40px; height:40px; font-size:10px; }.study-section h2 { font-size:19px; }.study-section p { font-size:14px; } }

/* Lectura móvil: escala prioritaria inspirada en el estándar táctil de Command. */
@media (max-width:600px) {
  .topbar { height:66px; padding:0 14px; gap:8px; }
  .topbar-left { gap:10px; }
  .topbar-title { font-size:clamp(15px, 4.2vw, 19px); }
  .top-actions { gap:6px; }
  .menu-toggle { flex-shrink:0; }
  .brand { font-size:20px; }
  .brand span { font-size:25px; }
  .icon-button { min-width:42px; height:42px; }
  .nav-item { font-size:16px; }
  .section-heading h1 { font-size:32px; }
  .text-button,.primary-button,.secondary-button,.setting-button { font-size:16px; }
  .filter { font-size:15.5px; }
  .continue-card { min-height:148px; }
  .continue-card h2 { display:-webkit-box; font-size:22px; line-height:1.2; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .continue-card p { font-size:16px; line-height:1.42; }
  .compact-cover .cover-title { font-size:16px; }
  .compact-cover .cover-subtitle { font-size:9px; }
  .book-card h3 { display:-webkit-box; min-height:2.5em; font-size:18px; line-height:1.25; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .book-card p { display:-webkit-box; min-height:2.84em; font-size:15px; line-height:1.42; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .cover-title { font-size:24px; }
  .cover-subtitle { font-size:11px; }
  .collection-card h2 { font-size:20px; }
  .collection-card p,.settings-note { font-size:16px; }
  .setting-row { font-size:17px; }
  .carousel-arrow { width:32px; height:32px; }
  .carousel-arrow.prev { left:-6px; }
  .carousel-arrow.next { right:-6px; }
}

.menu-backdrop { position:fixed; inset:0; z-index:1000; display:block; width:100%; border:0; background:#0008; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.menu-backdrop.open { opacity:1; pointer-events:auto; }
.menu-toggle { display:grid; justify-self:start; place-items:center; font-size:22px; line-height:1; }
.navigation { position:fixed; inset:0; z-index:1001; display:flex; flex-direction:column; align-items:stretch; gap:0; width:100vw; padding:22px max(4vw,24px); overflow-y:auto; background:var(--bg); border:0; transform:translateX(-105%); transition:transform .2s ease; }
.navigation.open { transform:translateX(0); }
.mobile-menu-heading { display:flex; align-items:center; justify-content:space-between; padding:0 0 18px; border-bottom:1px solid var(--line); font-size:17px; letter-spacing:.08em; }
.menu-brand { display:inline-flex; align-items:center; gap:9px; }.menu-brand img { width:27px; height:27px; }
.mobile-menu-heading .icon-button { min-width:42px; }
.menu-search { display:flex; width:min(100%,520px); margin:22px 0 6px; }.menu-search input { width:100%; min-width:0; }
.menu-account { display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:center; padding:20px 4px 14px; }
.account-avatar { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--bg); font-size:15px; font-weight:800; letter-spacing:.04em; }
.account-details { display:grid; gap:3px; min-width:0; }.account-details strong { overflow:hidden; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }.account-details small { overflow:hidden; color:var(--muted); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.account-link,.menu-logout { display:block; width:100%; padding:14px 4px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; font-size:16px; text-align:left; }.account-link { font-weight:700; }.menu-logout { margin-top:auto; border-top:1px solid var(--line); border-bottom:0; color:#9f1e1e; }
.navigation .nav-item { width:100%; padding:18px 4px; border:0; border-bottom:1px solid var(--line); color:var(--ink); font-size:18px; text-align:left; }.navigation .nav-item.active { border-left:3px solid var(--accent); padding-left:12px; }
body.menu-open { overflow:hidden; }
@media (max-width: 860px) {
  .navigation {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 18px 20px 28px !important;
    background: var(--bg) !important;
    z-index: 2000 !important;
    transform: translateX(-105%) !important;
    transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .navigation.open {
    transform: translateX(0) !important;
  }
}
@media (min-width: 861px) {
  .navigation {
    position: fixed;
    inset: 0 auto 0 0;
    width: clamp(340px, 28vw, 420px);
    padding: 22px 28px;
    box-shadow: 18px 0 44px #0003;
    z-index: 2000;
    transform: translateX(-105%);
    transition: transform .22s ease;
  }
  .navigation.open {
    transform: translateX(0);
  }
}
.drawer-item-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
}
.nav-drawer-item:hover .drawer-item-icon,
.nav-drawer-item.active .drawer-item-icon {
  color: var(--accent);
}
.drawer-item-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  display: block;
}
.import-dialog { width:min(92vw,560px); max-height:calc(100dvh - 24px); padding:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--bg); color:var(--ink); box-shadow:0 24px 70px #0005; }.import-dialog::backdrop { background:#0008; }.import-form { display:flex; flex-direction:column; max-height:calc(100dvh - 24px); padding:18px 24px; overflow:hidden; }.import-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line); }.import-form > .settings-note { padding-top:0; margin:14px 0; }.file-picker { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:14px; margin:0 0 12px; padding:14px; border:1.5px dashed var(--line); border-radius:10px; background:var(--surface); cursor:pointer; transition:border-color .2s, background .2s; }.file-picker:hover { border-color:var(--accent, #e05a2b); }.file-picker-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:8px; background:var(--ink); color:var(--bg); font-size:21px; }.file-picker strong,.file-picker p { display:block; margin:0; }.file-picker p { margin-top:4px; color:var(--muted); font-size:13px; }.import-field { display:grid; gap:7px; margin-top:12px; font-size:15px; font-weight:700; }.import-field select,.import-field input { width:100%; min-height:42px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:inherit; font-weight:400; }.new-category-link { padding:10px 0 0; border:0; background:transparent; color:var(--ink); font:inherit; font-weight:700; text-align:left; }.import-status { min-height:20px; margin:10px 0 0; font-size:14px; font-weight:600; line-height:1.4; }.import-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:auto; padding-top:14px; }.import-actions .primary-button:disabled { cursor:not-allowed; opacity:.45; }
@media (max-width:600px) { .import-button { width:42px; min-width:42px; padding:0; justify-content:center; }.import-button span:last-child { display:none; }.file-picker { grid-template-columns:42px minmax(0,1fr); }.file-picker .secondary-button { grid-column:2; justify-self:start; }.import-actions { display:grid; grid-template-columns:1fr 1fr; }.import-actions button { width:100%; } }
.continue-card { grid-template-columns:104px minmax(0,1fr) auto; gap:20px; align-items:center; }.continue-cover,.continue-cover .compact-cover { width:104px; height:138px; min-height:138px; }.continue-content { min-width:0; }.continue-card h2 { display:-webkit-box; margin:2px 0 8px; overflow:hidden; font-size:22px; line-height:1.25; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.continue-meta { color:var(--muted); }.continue-open { white-space:nowrap; }
@media (max-width:600px) { .continue-card { grid-template-columns:72px minmax(0,1fr); grid-template-areas:'cover content' 'cover action'; grid-template-rows:1fr auto; gap:10px 14px; min-height:136px; padding:14px; }.continue-cover { grid-area:cover; }.continue-cover,.continue-cover .compact-cover { width:72px; height:108px; min-height:108px; }.continue-content { grid-area:content; align-self:end; }.continue-open { grid-area:action; justify-self:start; align-self:start; min-height:40px; padding:8px 14px; }.continue-card h2 { margin:2px 0 5px; font-size:18px; line-height:1.22; }.continue-card .eyebrow { margin-bottom:4px; font-size:10px; }.continue-card .continue-meta { font-size:13px !important; line-height:1.35; }.compact-cover .cover-title { font-size:12px; line-height:1.08; }.compact-cover .cover-subtitle { display:none; } }
.account-entry { border:0; background:transparent; color:var(--ink); font:inherit; text-align:left; }.import-form { display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:0; }.import-header { padding:18px 24px 14px; }.import-body { min-height:0; padding:0 24px; overflow-y:auto; }.import-form > .import-actions { margin:0; padding:14px 24px 18px; border-top:1px solid var(--line); }.import-body .settings-note { padding-top:0; margin:14px 0; } button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@media (max-width:600px) { .import-header { padding:16px 18px 12px; }.import-body { padding:0 18px; }.import-form > .import-actions { padding:12px 18px 16px; } }

/* Panel Lateral de Páginas e Índice (Estilo Google Drive / Acrobat) */
.reader-sidebar { position:fixed; top:0; left:0; bottom:0; z-index:2070; width:clamp(280px, 32vw, 360px); background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; transform:translateX(-105%); transition:transform .26s cubic-bezier(0.16, 1, 0.3, 1); box-shadow:12px 0 38px rgba(0,0,0,0.22); }
.reader-sidebar.open { transform:translateX(0); }
.reader-sidebar-backdrop { position:fixed; inset:0; z-index:2065; background:rgba(0,0,0,0.45); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .22s ease; }
.reader-sidebar-backdrop.open { opacity:1; pointer-events:auto; }
.reader-sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); background:var(--bg); }
.reader-sidebar-title { display:flex; align-items:center; gap:8px; font-size:16px; color:var(--ink); }
.sidebar-page-count { font-size:12.5px; font-weight:600; color:var(--muted); background:var(--surface); padding:2px 8px; border-radius:99px; border:1px solid var(--line); }
.reader-sidebar-quick { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--line); }
.sidebar-quick-btn { padding:7px 10px; border-radius:7px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:all .14s ease; text-align:center; white-space:nowrap; }
.sidebar-quick-btn:hover { background:var(--ink); color:var(--bg); }
.reader-sidebar-tabs { display:flex; border-bottom:1px solid var(--line); background:var(--bg); }
.sidebar-tab { flex:1; padding:10px 6px; border:0; border-bottom:2.5px solid transparent; background:transparent; font:inherit; font-size:13.5px; font-weight:700; color:var(--muted); cursor:pointer; text-align:center; transition:all .14s ease; }
.sidebar-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.reader-sidebar-body { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.sidebar-thumbnails-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(105px, 1fr)); gap:12px; padding:14px; }
.page-thumb-card { display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 6px; border-radius:8px; border:2px solid transparent; background:var(--bg); box-shadow:0 1px 4px rgba(0,0,0,0.06); cursor:pointer; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; width:100%; box-sizing:border-box; }
.page-thumb-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.12); }
.page-thumb-card.active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow), 0 4px 14px rgba(0,0,0,0.15); }
.page-thumb-preview { width:100%; aspect-ratio:1 / 1.414; background:#fff; border:1px solid var(--line); border-radius:4px; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.page-thumb-preview canvas { width:100% !important; height:100% !important; object-fit:contain; display:block; }
.page-thumb-loading { font-size:11px; font-weight:700; color:var(--muted); }
.page-thumb-num { font-size:12.5px; font-weight:700; color:var(--ink); }
.sidebar-outline-list { padding:10px 14px; display:flex; flex-direction:column; gap:4px; }
.outline-item-btn { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; padding:8px 10px; border-radius:6px; border:0; background:transparent; color:var(--ink); font:inherit; font-size:13.5px; cursor:pointer; transition:background .12s ease; }
.outline-item-btn:hover { background:var(--bg); }
.outline-item-btn.active { font-weight:700; color:var(--accent); }
.outline-item-page { color:var(--muted); font-size:12px; }
.sidebar-empty { color:var(--muted); font-size:13.5px; padding:24px 14px; text-align:center; line-height:1.5; margin:0; }
#pdf-first svg { pointer-events:none; }

/* Cobertura Inmersiva Total 100% (Ocultación de barra de estado, reloj y batería del móvil) */
:root:fullscreen, :fullscreen, html:fullscreen, body:fullscreen {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #ffffff !important;
  overflow: hidden !important;
}
body.dark:fullscreen, body.dark :fullscreen {
  background: #121211 !important;
}
.reader-view:fullscreen {
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   DISEÑO READERA CON BRANDING BOOKFLOW (LISTA, DRAWER Y TARJETAS)
   ========================================================= */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.menu-toggle {
  flex-shrink: 0;
}
.topbar-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.topbar-title {
  margin: 0;
  font-size: clamp(16px, 4.5vw, 20px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-search-toggle,
.topbar-options-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search-bar-container {
  padding: 10px 4vw;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  animation: search-slide-down 0.18s ease-out;
}
@keyframes search-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
}
.search-input-wrap input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
}
.search-close-btn {
  border: 0;
  background: transparent;
  padding: 4px;
  min-width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
}

/* Opciones Dropdown */
.options-dropdown {
  position: absolute;
  top: 68px;
  right: 4vw;
  z-index: 1050;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
  padding: 8px 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.options-dropdown[hidden] {
  display: none !important;
}
.options-dropdown-group {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.options-group-title {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.options-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.options-item:hover {
  background: var(--bg);
}
.options-item.active {
  color: var(--accent);
  font-weight: 700;
}
.options-dropdown-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

/* Drawer Sections */
.drawer-sections-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
}
.nav-drawer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.nav-drawer-item:hover {
  background: var(--surface);
}
.nav-drawer-item.active {
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
}
.drawer-item-icon {
  font-size: 17px;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drawer-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-item-badge {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--line);
  color: var(--muted);
}
.nav-drawer-item.active .drawer-item-badge {
  background: var(--accent-glow);
  color: var(--accent);
}
.nav-drawer-item[draggable="true"] {
  user-select: none;
  -webkit-user-select: none;
}
.nav-drawer-item.dragging {
  opacity: 0.4;
  background: var(--surface);
  transform: scale(0.98);
}
.nav-drawer-item.touch-dragging {
  opacity: 0.85;
  background: var(--surface);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  z-index: 100;
  transform: scale(1.02);
}
.nav-drawer-item.drag-over-indicator {
  outline: 2px dashed var(--accent, #e05a2b);
  outline-offset: -2px;
}
.drawer-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 6px;
}
.drawer-footer-static {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex-shrink: 0;
  padding-bottom: 28px;
}

/* ReadEra Book Cards Layout */
.readera-book-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.readera-book-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 14px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.readera-book-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.readera-card-cover-wrap {
  width: 76px;
  min-width: 76px;
  height: 112px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: #181a1e;
  box-shadow: 0 3px 10px rgba(0,0,0,0.16);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.readera-card-cover-wrap .cover.image-cover {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.readera-card-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Auto-ajustable a la medida y proporción de la foto sin recortes */
  object-position: center;
  display: block;
}
.readera-card-cover-wrap .cover:not(.image-cover) {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}
.readera-card-cover-wrap .cover:not(.image-cover) .cover-subtitle {
  position: static !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 0.95 !important;
  margin-bottom: auto !important;
  display: block !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.readera-card-cover-wrap .cover:not(.image-cover) .cover-title {
  font-size: 11px !important;
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.cover-upload-hint {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 8.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.3);
  line-height: 1;
}
.cover-upload-hint:hover {
  background: var(--accent, #e05a2b);
  border-color: var(--accent, #e05a2b);
  transform: scale(1.06);
}
[data-cover-action="upload"] {
  cursor: pointer;
}
.readera-card-cover-wrap.uploading {
  opacity: 0.5;
  pointer-events: none;
}

.readera-card-content,
.readera-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.readera-card-main-info {
  cursor: pointer;
}
.card-action-btn.remove-reading-btn:hover {
  color: #e05a2b;
  border-color: rgba(224, 90, 43, 0.4);
  background: rgba(224, 90, 43, 0.1);
}
.readera-book-title,
.readera-card-title {
  margin: 0 0 3px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.readera-book-meta,
.readera-card-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Barra de progreso interactiva estilo ReadEra */
.readera-progress-row {
  margin: 4px 0 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.readera-progress-track {
  flex: 1;
  height: 4px;
  background: var(--line);
  border-radius: 99px;
  position: relative;
  overflow: visible;
}
.readera-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.2s ease;
}
.readera-progress-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}
.readera-progress-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  min-width: 32px;
  text-align: right;
}
.readera-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

/* Fila de Acciones Rápidas ReadEra */
.readera-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(128,128,128,0.12);
}
.card-quick-btn, .card-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, transform 0.12s ease;
}
.card-quick-btn:hover, .card-action-btn:hover {
  background: rgba(128,128,128,0.12);
  color: var(--ink);
  transform: scale(1.12);
}
.card-quick-btn.active.star-btn, .card-action-btn.active-fav {
  color: #f59e0b !important;
}
.card-quick-btn.active.toread-btn, .card-action-btn.active-toread {
  color: #0284c7 !important;
}
.card-quick-btn.active.finished-btn, .card-action-btn.active-finished {
  color: #10b981 !important;
}

/* Popover Flotante de Opciones (⋮) */
.card-options-popover {
  position: fixed;
  z-index: 2100;
  width: 210px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card-options-popover[hidden] {
  display: none !important;
}
.popover-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.popover-action-item:hover {
  background: var(--bg);
}
.popover-action-item.danger-item {
  color: #ef4444;
}
.popover-action-item.danger-item:hover {
  background: rgba(239,68,68,0.12);
}
.popover-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

/* Diálogo de Eliminar Libro */
.delete-dialog {
  width: min(92vw, 440px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  padding: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.delete-dialog::backdrop {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
}
.delete-dialog-content {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.delete-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  font-size: 18px;
}
.delete-book-title {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--ink);
}
.delete-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
@media (min-width: 480px) {
  .delete-dialog-actions {
    flex-direction: row;
    justify-content: flex-end;
  }
}
.danger-button {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
}
.danger-button:hover {
  background: #b91c1c !important;
}

/* Barra de Papelera */
.trash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  margin-bottom: 16px;
}
.trash-toolbar[hidden] {
  display: none !important;
}
.trash-count-text {
  font-size: 14.5px;
  font-weight: 700;
  color: #ef4444;
}
.trash-actions-row {
  display: flex;
  gap: 8px;
}
.btn-restore-card {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.btn-restore-card:hover {
  background: var(--ink);
  color: var(--bg);
}
.btn-permanent-card {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #ef4444;
  background: transparent;
  color: #ef4444;
  font-weight: 700;
  cursor: pointer;
}
.btn-permanent-card:hover {
  background: #ef4444;
  color: #fff;
}

/* Popup flotante elegante de carga de libro */
.reader-loading-pill {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2200;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 20, 22, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  pointer-events: none;
  animation: pillFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reader-loading-pill[hidden] {
  display: none !important;
}
.loading-spinner-ring {
  width: 17px;
  height: 17px;
  border: 2.2px solid rgba(255, 255, 255, 0.22);
  border-top-color: #ffd60a;
  border-radius: 50%;
  animation: ringSpin 0.75s linear infinite;
  flex-shrink: 0;
}
@keyframes ringSpin {
  to { transform: rotate(360deg); }
}
@keyframes pillFadeIn {
  from { opacity: 0; transform: translate(-50%, -42%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}