:root {
  --bg-lectura: #0f0e0c;
  --bg-topbar: #141210;
  --bg-margen: #171513;
  --color-texto-lectura: #e8e2d5;
  --color-secundario: #9e9589;
  --color-acento: #c4923a;
  --color-borde: #2c2722;
  --fuente-editorial: "Georgia", "Cambria", "Times New Roman", serif;
  --fuente-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tamano-base-texto: 1.18rem;
  --ancho-lectura: 680px;
}

[data-tema="sepia"] {
  --bg-lectura: #f4ecd8;
  --bg-topbar: #e8dfc8;
  --bg-margen: #ede4ce;
  --color-texto-lectura: #2c221e;
  --color-secundario: #6f6155;
  --color-acento: #8c581a;
  --color-borde: #d8cdb4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg-lectura); color: var(--color-texto-lectura); font-family: var(--fuente-editorial); min-height: 100vh; overflow-x: hidden; }

/* Topbar */
.lector-topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-topbar); border-bottom: 1px solid var(--color-borde);
  padding: 12px 24px; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--fuente-ui); font-size: 0.85rem;
}
.btn-topbar-link { color: var(--color-secundario); text-decoration: none; font-weight: 500; }
.btn-topbar-link:hover { color: var(--color-acento); }
.separador { margin: 0 8px; color: var(--color-borde); }
.topbar-obra { color: var(--color-secundario); font-weight: 500; }
.topbar-capitulo { color: var(--color-texto-lectura); font-weight: 600; }

.control-tipografia { display: flex; gap: 6px; }
.btn-tipo {
  background: none; border: 1px solid var(--color-borde); color: var(--color-texto-lectura);
  padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8rem;
}
.btn-tipo:hover { border-color: var(--color-acento); }
.usuario-saldo-pill {
  background: rgba(196,146,58,0.1); border: 1px solid var(--color-acento);
  color: var(--color-acento); padding: 4px 12px; border-radius: 12px; font-weight: 700;
}

/* Barra de Progreso */
.barra-progreso-wrapper { position: fixed; top: 48px; left: 0; width: 100vw; height: 3px; background: transparent; z-index: 99; }
.barra-progreso-fill { width: 0%; height: 100%; background: var(--color-acento); transition: width 0.1s ease; }

/* Cuerpo de Lectura */
.lector-main {
  max-width: 1080px; margin: 0 auto; padding: 60px 24px 120px 24px;
  display: flex; justify-content: center; position: relative; gap: 40px;
}
.lector-articulo { max-width: var(--ancho-lectura); width: 100%; }

.contenido-renderizado {
  font-size: var(--tamano-base-texto); line-height: 1.85; letter-spacing: -0.003em;
}
.contenido-renderizado p { margin-bottom: 1.6em; position: relative; }
.contenido-renderizado h2, .contenido-renderizado h3 {
  font-family: var(--fuente-editorial); margin: 2em 0 0.8em 0; color: var(--color-texto-lectura);
}

/* Disparador de Anotaciones por Párrafo */
.trigger-margen {
  position: absolute; right: -32px; top: 0; width: 24px; height: 24px;
  border-radius: 50%; background: var(--bg-topbar); border: 1px solid var(--color-borde);
  color: var(--color-secundario); font-size: 0.7rem; font-family: var(--fuente-ui);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0.4; transition: all 0.2s;
}
.contenido-renderizado p:hover .trigger-margen { opacity: 1; border-color: var(--color-acento); color: var(--color-acento); }

/* Panel Lateral Margen */
.panel-margen {
  width: 320px; background: var(--bg-margen); border: 1px solid var(--color-borde);
  border-radius: 8px; padding: 20px; height: fit-content; position: sticky; top: 80px;
  display: none; flex-direction: column; gap: 16px; font-family: var(--fuente-ui);
}
.panel-margen.abierto { display: flex; }
.margen-header { display: flex; justify-content: space-between; align-items: center; }
.margen-header h4 { font-size: 0.9rem; font-weight: 700; color: var(--color-texto-lectura); }
.btn-close-margen { background: none; border: none; color: var(--color-secundario); font-size: 1.2rem; cursor: pointer; }
.margen-lista { display: flex; flex-direction: column; gap: 12px; max-height: 380px; overflow-y: auto; }
.comentario-item { background: var(--bg-lectura); border: 1px solid var(--color-borde); padding: 10px; border-radius: 6px; font-size: 0.85rem; }
.comentario-autor { font-weight: 700; color: var(--color-acento); font-size: 0.8rem; margin-bottom: 4px; display: block; }

.margen-input-box textarea {
  width: 100%; background: var(--bg-lectura); border: 1px solid var(--color-borde);
  color: var(--color-texto-lectura); padding: 8px; border-radius: 4px; font-size: 0.85rem;
  font-family: var(--fuente-ui); resize: vertical; min-height: 60px; outline: none;
}
.btn-publicar-comentario {
  background: var(--color-acento); color: #000; border: none; width: 100%; padding: 8px;
  border-radius: 4px; font-weight: 700; font-size: 0.8rem; margin-top: 6px; cursor: pointer;
}

/* Tarjeta de Bloqueo */
.bloqueo-creditos-card {
  background: var(--bg-topbar); border: 1px solid var(--color-acento);
  border-radius: 8px; padding: 40px 32px; text-align: center; margin: 40px 0; font-family: var(--fuente-ui);
}
.bloqueo-tag { font-size: 0.75rem; text-transform: uppercase; color: var(--color-acento); font-weight: 700; letter-spacing: 0.1em; }
.bloqueo-creditos-card h3 { font-family: var(--fuente-editorial); font-size: 1.6rem; margin: 12px 0; }
.bloqueo-creditos-card p { color: var(--color-secundario); font-size: 0.95rem; margin-bottom: 24px; }
.bloqueo-cta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.btn-desbloqueo-cta { background: var(--color-acento); color: #000; border: none; padding: 12px 24px; border-radius: 6px; font-weight: 700; cursor: pointer; }
.btn-ir-recarga { background: transparent; border: 1px solid var(--color-borde); color: var(--color-texto-lectura); padding: 12px 20px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 0.9rem; }

/* Footer Nav */
.lector-footer { border-top: 1px solid var(--color-borde); background: var(--bg-topbar); padding: 20px 24px; font-family: var(--fuente-ui); }
.footer-nav-container { max-width: var(--ancho-lectura); margin: 0 auto; display: flex; justify-content: space-between; }
.btn-nav-cap { background: var(--bg-lectura); border: 1px solid var(--color-borde); color: var(--color-texto-lectura); padding: 10px 18px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.btn-nav-cap:hover { border-color: var(--color-acento); }