/* ═══════════════════════════════════════════════════════
   Reader UI — Lector integrado de obras de dominio público
   Clases: .lr-*  |  Prefijo: lr = Libreos Reader
   Integración total con el sistema de accesibilidad Libreos
   ═══════════════════════════════════════════════════════ */

/* ── Overlay ── */
.lr-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #f8f2ea;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.lr-overlay.is-open {
  display: flex;
}

/* ── Container ── */
.lr-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* ── Header ── */
.lr-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(248,242,234,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(156,124,71,.12);
  flex-shrink: 0;
  z-index: 10;
}

.lr-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #5a4a3a;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.lr-back:hover { background: rgba(156,124,71,.1) }

.lr-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lr-header-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 600;
  color: #3a2e22;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lr-header-chapter {
  font-size: 12px;
  color: #9c7c47;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lr-header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.lr-btn-toc,
.lr-btn-a11y {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: #5a4a3a;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.lr-btn-toc:hover,
.lr-btn-a11y:hover {
  background: rgba(156,124,71,.1);
  color: #9c7c47;
}

/* ── Progress bar ── */
.lr-progress-bar {
  height: 3px;
  background: rgba(156,124,71,.1);
  flex-shrink: 0;
  overflow: hidden;
}
.lr-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #9c7c47, #d4b76e);
  transition: width .4s ease;
  border-radius: 0 2px 2px 0;
}

/* ── Last session banner ── */
.lr-session-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(156,124,71,.06);
  border-bottom: 1px solid rgba(156,124,71,.08);
  font-size: 12px;
  color: #9c7c47;
  flex-shrink: 0;
}
.lr-session-banner svg {
  width: 14px;
  height: 14px;
  opacity: .7;
  flex-shrink: 0;
}
.lr-session-resume {
  background: none;
  border: 1px solid rgba(156,124,71,.25);
  color: #9c7c47;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 4px;
  transition: background .2s;
}
.lr-session-resume:hover {
  background: rgba(156,124,71,.1);
}

/* ── TOC sidebar ── */
.lr-toc {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  background: #f5f0e6;
  border-right: 1px solid rgba(156,124,71,.15);
  z-index: 20;
  transform: translateX(-100%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 4px 0 20px rgba(0,0,0,.08);
}
.lr-toc.is-open { transform: translateX(0) }

.lr-toc-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: #3a2e22;
  padding: 20px 20px 12px;
  border-bottom: 1px solid rgba(156,124,71,.1);
  flex-shrink: 0;
}

.lr-toc-list {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  overflow-y: auto;
  flex: 1;
}

.lr-toc-item { margin: 0; padding: 0 }
.lr-toc-item button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: #5a4a3a;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1.4;
}
.lr-toc-item button:hover {
  background: rgba(156,124,71,.08);
  color: #9c7c47;
}
.lr-toc-item.active button {
  color: #9c7c47;
  font-weight: 600;
  background: rgba(156,124,71,.06);
  border-left: 3px solid #9c7c47;
}

/* ══════════════════════════════════════════════════════
   MAIN CONTENT — Integración accesibilidad Libreos
   Hereda: --a11y-font-size, --a11y-font-weight,
           --a11y-font-color, data-font, data-spacing-letter,
           data-line-height
   ══════════════════════════════════════════════════════ */

.lr-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 40px 20px 60px;
  scroll-behavior: smooth;
}

.lr-text {
  max-width: 680px;
  margin: 0 auto;
  /* Base tipográfica — sobreescrita por variables de accesibilidad */
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.75;
  font-weight: 400;
  color: #3a2e22;
  /* Texto responsive — evita desbordamiento y saltos irregulares */
  overflow-wrap: break-word;       /* rompe palabras largas (URLs, etc.) */
  word-break: break-word;          /* fallback para navegadores antiguos */
  -webkit-hyphens: auto;
  hyphens: auto;                   /* guionado automático en castellano */
}

/* ── A11y font-size override ── */
html.a11y-font-active .lr-text {
  font-size: var(--a11y-font-size, 18px);
}

/* ── A11y font-weight override ── */
html.a11y-weight-active .lr-text {
  font-weight: var(--a11y-font-weight, 400);
}

/* ── A11y font-color override ── */
html.a11y-color-active .lr-text,
html.a11y-color-active .lr-text p,
html.a11y-color-active .lr-text h1,
html.a11y-color-active .lr-text h2,
html.a11y-color-active .lr-text h3 {
  color: var(--a11y-font-color) !important;
}

/* ── A11y font-family override ── */
html[data-font="sans"] .lr-text       { font-family: 'Inter', system-ui, sans-serif }
html[data-font="mono"] .lr-text       { font-family: 'JetBrains Mono', 'Fira Code', monospace }
html[data-font="dyslexic"] .lr-text   { font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif }

/* ── A11y letter-spacing override ── */
html[data-spacing-letter="wide"] .lr-text    { letter-spacing: 0.05em }
html[data-spacing-letter="wider"] .lr-text   { letter-spacing: 0.1em }

/* ── A11y line-height override ── */
html[data-line-height="relaxed"] .lr-text    { line-height: 1.9 }
html[data-line-height="loose"] .lr-text      { line-height: 2.4 }

/* ── A11y high contrast ── */
html.a11y-high-contrast .lr-text { filter: contrast(1.35) }
html.a11y-high-contrast .lr-overlay { background: #fff }

/* ── A11y invert ── */
html.a11y-invert .lr-overlay { filter: invert(1) hue-rotate(180deg) }

/* ── A11y max-width (ya es lectura, pero respetar) ── */
html.a11y-max-width .lr-text { max-width: 60ch }

/* ── A11y spacing scale ── */
html[data-spacing="relaxed"] .lr-text p { margin-bottom: 1.6em }
html[data-spacing="spacious"] .lr-text p { margin-bottom: 2.2em }

/* ── A11y reduce-motion ── */
html.a11y-reduce-motion .lr-toc,
html.a11y-reduce-motion .lr-progress-fill,
html.a11y-reduce-motion .lr-spinner {
  transition-duration: 0.001ms !important;
  animation-duration: 0.001ms !important;
}

/* ── A11y large targets ── */
html.a11y-large-targets .lr-back,
html.a11y-large-targets .lr-btn-toc,
html.a11y-large-targets .lr-btn-a11y { min-width: 44px; min-height: 44px }
html.a11y-large-targets .lr-nav-prev,
html.a11y-large-targets .lr-nav-next { min-height: 44px; padding: 10px 20px }
html.a11y-large-targets .lr-toc-item button { min-height: 44px; padding: 12px 20px }

/* ── WCAG 2.1 AA — focus-visible por defecto en todos los botones ── */
.lr-back:focus-visible,
.lr-btn-toc:focus-visible,
.lr-btn-a11y:focus-visible,
.lr-nav-prev:focus-visible,
.lr-nav-next:focus-visible,
.lr-toc-item button:focus-visible,
.lr-error-close:focus-visible,
.lr-session-resume:focus-visible,
.lr-tb-btn:focus-visible,
.book-btn-reader:focus-visible {
  outline: 2px solid #9c7c47;
  outline-offset: 2px;
}

/* ── A11y focus highlight — anillo más visible cuando activado ── */
html.a11y-focus-highlight .lr-back:focus-visible,
html.a11y-focus-highlight .lr-btn-toc:focus-visible,
html.a11y-focus-highlight .lr-btn-a11y:focus-visible,
html.a11y-focus-highlight .lr-nav-prev:focus-visible,
html.a11y-focus-highlight .lr-nav-next:focus-visible,
html.a11y-focus-highlight .lr-toc-item button:focus-visible,
html.a11y-focus-highlight .lr-error-close:focus-visible,
html.a11y-focus-highlight .lr-session-resume:focus-visible,
html.a11y-focus-highlight .lr-tb-btn:focus-visible,
html.a11y-focus-highlight .book-btn-reader:focus-visible {
  outline: 3px solid #d4b76e;
  outline-offset: 3px;
}

/* ── A11y simplified — ocultar decorativos ── */
html.a11y-simplified .lr-progress-bar { display: none }
html.a11y-simplified .lr-session-banner svg { display: none }

/* ── A11y focus-mode — atenuar navegación ── */
html.a11y-focus-mode .lr-header,
html.a11y-focus-mode .lr-nav { opacity: .3; transition: opacity .3s }
html.a11y-focus-mode .lr-header:hover,
html.a11y-focus-mode .lr-nav:hover { opacity: 1 }

/* ── Paragraphs ── */
.lr-text p {
  margin-bottom: 1.2em;
  text-indent: 1.5em;
  overflow-wrap: break-word;
  word-break: break-word;
}
.lr-text p:first-child { text-indent: 0 }

.lr-text h1, .lr-text h2, .lr-text h3 {
  font-family: 'Cormorant Garamond', serif;
  color: #3a2e22;
  margin: 1.5em 0 .6em;
  line-height: 1.3;
}
.lr-text h1 { font-size: 1.8em }
.lr-text h2 { font-size: 1.5em }
.lr-text h3 { font-size: 1.25em }

/* Font-family override also on headings */
html[data-font="sans"] .lr-text h1,
html[data-font="sans"] .lr-text h2,
html[data-font="sans"] .lr-text h3     { font-family: 'Inter', system-ui, sans-serif }
html[data-font="mono"] .lr-text h1,
html[data-font="mono"] .lr-text h2,
html[data-font="mono"] .lr-text h3     { font-family: 'JetBrains Mono', 'Fira Code', monospace }
html[data-font="dyslexic"] .lr-text h1,
html[data-font="dyslexic"] .lr-text h2,
html[data-font="dyslexic"] .lr-text h3 { font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif }

/* Scrollbar */
.lr-content::-webkit-scrollbar { width: 6px }
.lr-content::-webkit-scrollbar-thumb {
  background: rgba(156,124,71,.25);
  border-radius: 3px;
}
.lr-content::-webkit-scrollbar-track { background: transparent }
.lr-content { scrollbar-color: rgba(156,124,71,.25) transparent }

/* ── Chapter navigation ── */
.lr-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid rgba(156,124,71,.12);
  background: rgba(248,242,234,.95);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.lr-nav-prev,
.lr-nav-next {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid rgba(156,124,71,.2);
  border-radius: 8px;
  background: transparent;
  color: #5a4a3a;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.lr-nav-prev:hover:not(:disabled),
.lr-nav-next:hover:not(:disabled) {
  background: rgba(156,124,71,.08);
  border-color: rgba(156,124,71,.35);
  color: #9c7c47;
}
.lr-nav-prev:disabled,
.lr-nav-next:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.lr-nav-info {
  font-size: 13px;
  color: #9c7c47;
  font-weight: 500;
}

/* ── Loading state ── */
.lr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 16px;
  padding: 40px 20px;
}

.lr-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(156,124,71,.15);
  border-top-color: #9c7c47;
  border-radius: 50%;
  animation: lr-spin 1s linear infinite;
}
@keyframes lr-spin { to { transform: rotate(360deg) } }

.lr-loading-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: #5a4a3a;
  text-align: center;
}
.lr-loading-sub {
  font-size: 13px;
  color: #9c7c47;
  text-align: center;
}

/* ── Error state ── */
.lr-error {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
}
.lr-error-icon { font-size: 48px; margin-bottom: 4px }
.lr-error-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: #3a2e22;
}
.lr-error-text {
  font-size: 15px;
  color: #5a4a3a;
  max-width: 400px;
  line-height: 1.5;
}
.lr-error-close {
  margin-top: 8px;
  padding: 10px 24px;
  border: 1px solid rgba(156,124,71,.3);
  border-radius: 8px;
  background: transparent;
  color: #9c7c47;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s;
}
.lr-error-close:hover { background: rgba(156,124,71,.08) }

/* ── Read button (injected on libro page) ── */
.book-btn-reader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(145deg, #9c7c47, #7a5f2e);
  color: #f8f2ea;
  border: none;
  border-radius: 10px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  box-shadow: 0 2px 8px rgba(156,124,71,.25);
}
.book-btn-reader:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(156,124,71,.35);
}
.book-btn-reader:active { transform: translateY(0) }
.book-btn-reader svg { flex-shrink: 0 }

/* ── Resume badge ── */
.lr-resume-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: rgba(255,255,255,.2);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 400;
}

/* ── Inline reader toolbar ── */
.lr-toolbar {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(248,242,234,.98);
  border-bottom: 1px solid rgba(156,124,71,.1);
  flex-shrink: 0;
  z-index: 9;
  align-items: center;
}
.lr-toolbar.is-open { display: flex }

.lr-tb-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lr-tb-label {
  font-size: 11px;
  color: #9c7c47;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.lr-tb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(156,124,71,.18);
  border-radius: 6px;
  background: transparent;
  color: #5a4a3a;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.lr-tb-btn:hover { background: rgba(156,124,71,.08); border-color: rgba(156,124,71,.3) }
.lr-tb-btn.active {
  background: rgba(156,124,71,.12);
  border-color: #9c7c47;
  color: #9c7c47;
  font-weight: 600;
}
.lr-tb-sep {
  width: 1px;
  height: 20px;
  background: rgba(156,124,71,.12);
  margin: 0 4px;
  flex-shrink: 0;
}
.lr-tb-size-val {
  font-size: 12px;
  color: #5a4a3a;
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}


/* ── Ocultar elementos de la ficha que se cuelan sobre el lector ── */
.lr-reading .a11y-fab,
.lr-reading #a11yFab,
.lr-reading #btnPremium,
.lr-reading .cta-premium {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .lr-header { padding: 8px 14px; gap: 8px }
  .lr-header-title { font-size: 14px }
  .lr-content { padding: 28px 16px 50px }
  .lr-text { font-size: 17px }
  .lr-nav { padding: 10px 14px }
  .lr-nav-prev, .lr-nav-next { padding: 8px 12px; font-size: 13px }
  .lr-toc { width: 260px }
  .lr-toolbar { padding: 8px 14px; gap: 8px }
  .lr-session-banner { padding: 5px 14px; font-size: 11px }
}

@media (max-width: 480px) {
  .lr-header { padding: 6px 10px; gap: 4px }
  .lr-header-title { font-size: 13px }
  .lr-header-chapter { font-size: 11px }
  .lr-btn-toc, .lr-btn-a11y { width: 30px; height: 30px }
  .lr-back { width: 32px; height: 32px }
  .lr-content { padding: 20px 12px 44px }
  .lr-text { font-size: 16px; line-height: 1.7 }
  .lr-nav { padding: 8px 10px }
  .lr-nav-prev, .lr-nav-next { padding: 6px 10px; font-size: 12px; gap: 4px }
  .lr-toc { width: 240px; max-width: 90vw }

  /* Toolbar se reorganiza verticalmente */
  .lr-toolbar { padding: 6px 10px; gap: 6px }
  .lr-tb-group { flex-wrap: wrap }
  .lr-tb-sep { display: none }
  .lr-tb-label { font-size: 10px }
  .lr-tb-btn { min-width: 28px; height: 28px; font-size: 12px; padding: 0 6px }

  /* Session banner compacto */
  .lr-session-banner { font-size: 10px; padding: 4px 10px; gap: 6px; flex-wrap: wrap; text-align: center }
}

@media (max-width: 360px) {
  .lr-header-info { display: none }
  .lr-content { padding: 16px 10px 40px }
  .lr-text { font-size: 15px }
}