/* ═══════════════════════════════════════════════
   LIBROS — catálogo (/libros/) y lector PDF
═══════════════════════════════════════════════ */

/* ── Catálogo ── */
.libros-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
  gap: 2rem;
}
.libro-card {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 1.75rem;
  padding: 1.75rem;
  background: var(--g2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
}
.libro-portada {
  display: block;
  align-self: start;
  aspect-ratio: 2 / 3;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgb(var(--navy-rgb) / .12), 0 14px 30px rgb(var(--navy-rgb) / .18);
  transition: transform .2s, box-shadow .2s;
}
a.libro-portada:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgb(var(--navy-rgb) / .14), 0 20px 40px rgb(var(--navy-rgb) / .22); }
.libro-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Portada tipográfica cuando no se sube imagen */
.libro-portada-tipo {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.1rem .95rem;
  background: var(--navy);
  border-left: 6px solid var(--blue);
  color: var(--on-dark);
}
.lpt-titulo { font-family: var(--ffc); font-size: 1.15rem; line-height: 1.15; overflow-wrap: anywhere; }
.lpt-autor  { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }

.libro-info { display: flex; flex-direction: column; min-width: 0; }
.libro-anio { font-family: var(--ffm); font-size: .72rem; letter-spacing: .14em; color: var(--text3); margin-bottom: .4rem; }
.libro-titulo { font-family: var(--ffc); font-weight: 400; font-size: 1.6rem; line-height: 1.15; color: var(--navy); }
.libro-subtitulo { margin-top: .35rem; font-size: .95rem; font-weight: 600; color: var(--text2); line-height: 1.45; }
.libro-desc { white-space: pre-line; margin-top: .9rem; font-size: .92rem; color: var(--text2); line-height: 1.7; }
/* Mi biblioteca: progreso del lector en este navegador */
.libro-progreso { margin-top: 1rem; }
.libro-progreso-barra { height: 6px; border-radius: 99px; background: var(--g3); overflow: hidden; }
.libro-progreso-barra span { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.libro-progreso p { margin-top: .45rem; font-size: .8rem; font-weight: 600; color: var(--green-ink); }

.libro-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: 1.25rem; }
.libro-acciones .btn { padding: .7rem 1.2rem; font-size: .86rem; }
.libro-acciones .btn small { font-weight: 500; color: var(--text3); font-size: .74rem; }

.libros-vacio {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 2rem;
  background: var(--g2);
  border: 1px dashed var(--border2);
  border-radius: var(--r2);
}
.libros-vacio h2 { font-family: var(--ffc); font-weight: 400; font-size: 1.7rem; color: var(--navy); margin-bottom: .75rem; }
.libros-vacio p { color: var(--text2); line-height: 1.7; margin-bottom: 1.5rem; }

/* Celular: portada junto al título; descripción y botones a todo el ancho */
@media (max-width: 600px) {
  .libro-card { grid-template-columns: 100px 1fr; grid-auto-rows: auto; column-gap: 1rem; row-gap: 0; padding: 1.1rem; align-items: start; }
  .libro-info { display: contents; }
  .libro-portada { grid-row: 1 / span 3; }
  .libro-anio, .libro-titulo, .libro-subtitulo { grid-column: 2; }
  .libro-titulo { font-size: 1.3rem; }
  .libro-subtitulo { font-size: .86rem; }
  .libro-desc, .libro-progreso, .libro-acciones { grid-column: 1 / -1; }
  .libro-desc { margin-top: 1.1rem; }
  .libro-acciones .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
  .lpt-titulo { font-size: .8rem; }
}


/* ── Lector ── */
.lector-body { overflow: hidden; }
.lector-body #nav { background: var(--navy); }
.lector-body .sticky-cta { display: none; }

.lector {
  --pagina: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-top: 68px;
  background: var(--g0);
  color: var(--text);
}
.lector:fullscreen { padding-top: 0; }

/* Temas: se redefinen los colores dentro del lector */
.lector[data-tema="sepia"] {
  --pagina: #F7EFDD;
  --g0: #E4D8BE; --g1: #F3EAD6; --g2: #FAF4E6; --g3: #ECE1C8;
  --border: rgba(92, 64, 24, .12); --border2: rgba(92, 64, 24, .22);
  --text: #3B2F22; --text2: #5A4A38; --text3: #7A6852;
}
.lector[data-tema="oscuro"] {
  --pagina: #1C2128;
  --g0: #0F1216; --g1: #161A1F; --g2: #1C2128; --g3: #262D35; --g4: #3A434E;
  --border: rgba(255, 255, 255, .08); --border2: rgba(255, 255, 255, .16);
  --text: #E6E9EE; --text2: #C3CAD2; --text3: #9AA4AF;
  --navy: #E6E9EE; --blue: #7AA7FF; --blue2: #9BBDFF;
}
.lector[data-tema="sepia"] .lector-pagina canvas { filter: sepia(.4) saturate(1.1) brightness(.98); }
.lector[data-tema="oscuro"] .lector-pagina canvas { filter: invert(.9) hue-rotate(180deg) brightness(1.05); }
.lector[data-tema="oscuro"] .lector-pagina { box-shadow: none; }
.lector[data-tema="oscuro"] .lp-sub { mix-blend-mode: screen; opacity: .65; }

/* ── Barra de controles ── */
.lector-barra {
  display: flex;
  align-items: center;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  padding: .55rem 1.25rem;
  background: var(--g2);
  border-bottom: 1px solid var(--border2);
}
.lector-volver {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .86rem; font-weight: 700; color: var(--blue);
}
.lector-volver svg { width: 18px; height: 18px; }
.lector-btn-panel {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 36px; padding: 0 .8rem;
  border: 1px solid var(--border2); border-radius: var(--r);
  background: transparent; color: var(--navy);
  font: 700 .82rem var(--ffb);
  cursor: pointer;
}
.lector-btn-panel svg { width: 18px; height: 18px; }
.lector-btn-panel:hover, .lector-btn-panel[aria-expanded="true"] { background: var(--g3); }
.lector-btn-panel:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.lector-titulo {
  flex: 1;
  min-width: 0;
  font-family: var(--ffc);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lector-grupo { display: flex; align-items: center; gap: .25rem; }
.lector-grupo button,
.lector-grupo a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 .5rem;
  border: 1px solid transparent; border-radius: var(--r);
  background: transparent; color: var(--navy);
  font: 700 .8rem var(--ffb);
  cursor: pointer;
}
.lector-grupo button:hover,
.lector-grupo a:hover { background: var(--g3); border-color: var(--border); }
.lector-grupo button:focus-visible,
.lector-grupo a:focus-visible,
.lector-pag input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.lector-grupo svg { width: 18px; height: 18px; }
.lector-grupo [hidden] { display: none; }
#lBtnMarca[aria-pressed="true"],
#lBtnVoz[aria-pressed="true"] { color: var(--blue); background: rgb(var(--blue-rgb) / .1); }
#lBtnMarca[aria-pressed="true"] svg { fill: currentColor; }
.lector-pct { min-width: 64px !important; }
.lector-epub { border-color: var(--border2) !important; }
.lector-pag input {
  width: 3.6rem; height: 36px;
  padding: 0 .4rem;
  border: 1px solid var(--border2); border-radius: var(--r);
  background: var(--g1);
  font: 600 .9rem var(--ffb); color: var(--text);
  text-align: center;
  -moz-appearance: textfield;
}
.lector-pag input::-webkit-inner-spin-button,
.lector-pag input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lector-total { font-size: .85rem; color: var(--text3); white-space: nowrap; }

/* Progreso de lectura */
.lector-progreso { height: 3px; background: var(--g3); flex-shrink: 0; }
.lector-progreso span { display: block; height: 100%; width: 0; background: var(--green); transition: width .3s; }

/* ── Visor y páginas ── */
.lector-cuerpo { position: relative; flex: 1; min-height: 0; display: flex; }
.lector-visor {
  flex: 1;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  outline: none;
  position: relative;
  scrollbar-gutter: stable;   /* el ancho no cambia al aparecer la barra: sin scroll horizontal */
  overflow-anchor: none;      /* la posición la controla el lector, no el navegador */
}
.lector-paginas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  width: max-content;
  min-width: 100%;
}
.lector[data-modo="pagina"] .lector-paginas { min-height: 100%; justify-content: center; }
.lector[data-modo="pagina"] .lector-pagina:not(.activa) { display: none; }

.lector-pagina {
  position: relative;
  flex-shrink: 0;
  background: var(--pagina);
  box-shadow: 0 1px 3px rgb(var(--navy-rgb) / .14), 0 8px 24px rgb(var(--navy-rgb) / .1);
}
.lector-pagina:not(.lista)::after {
  content: attr(data-n);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 600 .9rem var(--ffb); color: var(--g4);
}
.lector-pagina canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Separador: cinta en la esquina de la página */
.lector-pagina.con-separador::before {
  content: '';
  position: absolute;
  top: -4px; right: 28px;
  z-index: 3;
  width: 18px; height: 34px;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  pointer-events: none;
}
.lp-nota-ind {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 3;
  padding: .15rem .5rem;
  border: 0; border-radius: 99px;
  background: #0F2537; color: #fff;
  font: 700 .72rem var(--ffb);
  cursor: pointer;
  opacity: .85;
}
.lp-nota-ind:hover { opacity: 1; }
.lp-nota-ind[hidden] { display: none; }

/* Subrayados (debajo del texto seleccionable) */
.lp-subrayados { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lp-sub { position: absolute; border-radius: 2px; mix-blend-mode: multiply; }
.lp-sub--amarillo { background: rgba(255, 212, 0, .45); }
.lp-sub--verde    { background: rgba(0, 196, 140, .32); }
.lp-sub--azul     { background: rgba(77, 139, 255, .3); }
.lp-sub--rosa     { background: rgba(255, 92, 154, .3); }
.lp-sub--con-nota { box-shadow: inset 0 -2px 0 rgba(15, 37, 55, .6); }

/* Capa de texto de PDF.js: invisible, pero se puede seleccionar */
.textLayer {
  position: absolute; inset: 0; z-index: 2;
  overflow: hidden;
  line-height: 1;
  text-align: initial;
  -webkit-text-size-adjust: none; text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
}
.textLayer span, .textLayer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: rgba(26, 102, 255, .3); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent {
  display: block;
  position: absolute; inset: 100% 0 0;
  z-index: -1;
  cursor: default;
  user-select: none;
}
.textLayer.selecting .endOfContent { top: 0; }
.textLayer span.lp-hit { background: rgba(255, 170, 0, .42); border-radius: 2px; }

.lector-estado {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 2rem;
  text-align: center;
  font-size: .95rem; color: var(--text2);
}
.lector-estado.error { color: #B42318; }

/* ── Panel de herramientas ── */
.lector-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  z-index: 20;
  width: min(390px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--g2);
  border-left: 1px solid var(--border2);
  box-shadow: -14px 0 36px rgb(var(--navy-rgb) / .14);
}
.lector-panel[hidden] { display: none; }
.lp-cabeza { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .75rem .55rem 1rem; }
.lp-resumen { font-size: .78rem; color: var(--text3); line-height: 1.4; }
.lp-cerrar {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 0; border-radius: var(--r);
  background: transparent; color: var(--text2);
  cursor: pointer;
}
.lp-cerrar:hover { background: var(--g3); }
.lp-cerrar svg { width: 18px; height: 18px; }
.lp-pestanas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .25rem;
  padding: 0 .75rem .75rem;
  border-bottom: 1px solid var(--border);
}
.lp-pestanas [role="tab"] {
  padding: .5rem .25rem;
  border: 1px solid transparent; border-radius: var(--r);
  background: none;
  font: 700 .78rem var(--ffb); color: var(--text2);
  cursor: pointer;
}
.lp-pestanas [role="tab"]:hover { background: var(--g3); }
.lp-pestanas [role="tab"][aria-selected="true"] { background: rgb(var(--blue-rgb) / .1); border-color: rgb(var(--blue-rgb) / .25); color: var(--blue); }
.lector-panel :focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.lp-contenido { flex: 1; overflow: auto; padding: 1rem; overscroll-behavior: contain; }

.lp-ayuda { font-size: .8rem; color: var(--text3); line-height: 1.55; }
.lp-vacio { font-size: .86rem; color: var(--text3); line-height: 1.6; padding: .25rem 0; list-style: none; }
.lp-accion {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: .6rem .8rem;
  border: 1px dashed var(--border2); border-radius: var(--r);
  background: none;
  font: 700 .84rem var(--ffb); color: var(--blue);
  cursor: pointer;
  text-align: center;
}
.lp-accion:hover { border-style: solid; border-color: var(--blue); }
.lp-peligro { color: #B42318 !important; }
.lector[data-tema="oscuro"] .lp-peligro { color: #FF9B9B !important; }

.lp-lista { list-style: none; display: flex; flex-direction: column; gap: .7rem; margin-top: .8rem; }
.lp-item { padding: .7rem .8rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--g1); transition: box-shadow .3s; }
.lp-item--fila { display: flex; align-items: center; gap: .4rem; }
.lp-destacado { box-shadow: 0 0 0 2px var(--blue); }
.lp-item-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.lp-ir { background: none; border: 0; padding: .2rem 0; font: 700 .8rem var(--ffb); color: var(--blue); cursor: pointer; white-space: nowrap; }
.lp-ir:hover { text-decoration: underline; }
.lp-fecha { font-size: .72rem; color: var(--text3); }
.lp-cita { margin: 0 0 .4rem; padding-left: .7rem; border-left: 4px solid #FFD400; font-size: .88rem; line-height: 1.55; color: var(--text); }
.lp-cita--verde { border-color: #00C48C; }
.lp-cita--azul  { border-color: #4D8BFF; }
.lp-cita--rosa  { border-color: #FF5C9A; }
.lp-texto { font-size: .88rem; line-height: 1.55; color: var(--text2); white-space: pre-line; overflow-wrap: anywhere; }
.lp-item-acciones { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .5rem; }
.lp-item-acciones button { background: none; border: 0; padding: .15rem 0; font: 700 .78rem var(--ffb); color: var(--blue); cursor: pointer; }
.lp-item-acciones button:hover { text-decoration: underline; }
.lp-nombre {
  flex: 1; min-width: 0;
  padding: .35rem .5rem;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent;
  font: 500 .88rem var(--ffb); color: var(--text);
}
.lp-nombre:hover { border-color: var(--border2); }
.lp-nombre:focus { border-color: var(--blue); background: var(--g2); outline: none; }
.lp-quitar { background: none; border: 0; padding: .3rem .45rem; border-radius: 6px; color: var(--text3); cursor: pointer; }
.lp-quitar:hover { background: var(--g3); color: #B42318; }

/* Índice */
.lp-indice { list-style: none; }
.lp-indice .lp-indice { padding-left: .9rem; }
.lp-capitulo {
  display: flex; justify-content: space-between; gap: .75rem;
  width: 100%;
  padding: .5rem .6rem;
  border: 0; border-radius: 6px;
  background: none;
  font: 500 .88rem var(--ffb); color: var(--text);
  text-align: left; line-height: 1.4;
  cursor: pointer;
}
.lp-capitulo:hover { background: var(--g3); }
.lp-indice--1 > li > .lp-capitulo { font-weight: 700; }
.lp-capitulo[aria-current] { background: rgb(var(--blue-rgb) / .1); color: var(--blue); }
.lp-capitulo--sin { cursor: default; color: var(--text3); }
.lp-num { flex-shrink: 0; font-size: .75rem; font-weight: 600; color: var(--text3); }

/* Búsqueda */
.lp-buscar { display: flex; gap: .4rem; margin-bottom: .6rem; }
.lp-buscar input {
  flex: 1; min-width: 0;
  padding: .6rem .75rem;
  border: 1px solid var(--border2); border-radius: var(--r);
  background: var(--g1); color: var(--text);
  font: 400 .9rem var(--ffb);
}
.lp-buscar button { padding: 0 .9rem; border: 0; border-radius: var(--r); background: var(--blue); color: #fff; font: 700 .84rem var(--ffb); cursor: pointer; }
.lector[data-tema="oscuro"] .lp-buscar button { color: #0F1216; }
.lp-resultados { gap: .4rem; }
.lp-resultado {
  display: flex; flex-direction: column; gap: .2rem;
  width: 100%;
  padding: .55rem .65rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--g1);
  text-align: left;
  cursor: pointer;
}
.lp-resultado:hover { border-color: var(--blue); }
.lp-fragmento { font-size: .84rem; line-height: 1.5; color: var(--text2); }
.lp-fragmento mark { background: #FFE27A; color: #1A1A1A; border-radius: 2px; padding: 0 1px; }

/* Ajustes */
.lp-grupo { border: 0; margin: 0 0 1.4rem; padding: 0; min-width: 0; }
.lp-grupo[hidden] { display: none; }
.lp-grupo legend { font-family: var(--ffm); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); margin-bottom: .6rem; }
.lp-opciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.lp-opcion {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .8rem;
  border: 1px solid var(--border2); border-radius: var(--r);
  font: 600 .84rem var(--ffb); color: var(--text);
  cursor: pointer;
}
.lp-opcion input { accent-color: var(--blue); }
.lp-opcion:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.lp-opcion:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.lp-opcion--claro  { background: #FFFFFF; color: #212529; }
.lp-opcion--sepia  { background: #F7EFDD; color: #3B2F22; }
.lp-opcion--oscuro { background: #1C2128; color: #E6E9EE; }
.lp-zoom { display: flex; gap: .4rem; }
.lp-zoom button {
  flex: 1;
  padding: .55rem;
  border: 1px solid var(--border2); border-radius: var(--r);
  background: var(--g1); color: var(--text);
  font: 700 .9rem var(--ffb);
  cursor: pointer;
}
.lp-zoom button:hover { border-color: var(--blue); }
.lp-campo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; font: 600 .84rem var(--ffb); color: var(--text); }
.lp-campo select { padding: .4rem .5rem; border: 1px solid var(--border2); border-radius: 6px; background: var(--g1); color: var(--text); font: 500 .84rem var(--ffb); }
.lp-botones { display: flex; flex-direction: column; gap: .5rem; margin-top: .7rem; }
.lp-archivo { position: relative; overflow: hidden; }
.lp-archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lp-archivo:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ── Menús flotantes (texto seleccionado y subrayados) ── */
.lector-flotante {
  position: fixed;
  z-index: 60;
  display: flex; align-items: center; gap: .3rem;
  padding: .4rem .45rem;
  background: #0F2537;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}
.lector-flotante[hidden] { display: none; }
.lf-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); cursor: pointer; flex-shrink: 0; }
.lf-color:hover { transform: scale(1.12); }
.lf-color--amarillo { background: #FFD400; }
.lf-color--verde    { background: #00C48C; }
.lf-color--azul     { background: #4D8BFF; }
.lf-color--rosa     { background: #FF5C9A; }
.lf-texto { padding: .35rem .55rem; border: 0; border-radius: 6px; background: none; color: #fff; font: 700 .8rem var(--ffb); white-space: nowrap; cursor: pointer; }
.lf-texto:hover { background: rgba(255, 255, 255, .12); }
.lf-peligro { color: #FFB4B4; }
.lector-flotante button:focus-visible { outline: 2px solid #7AA7FF; outline-offset: 1px; }

/* ── Lectura en voz alta ── */
.lector-voz {
  position: absolute;
  left: 50%; bottom: 18px;
  z-index: 30;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .55rem .45rem .45rem;
  background: #0F2537; color: #fff;
  border-radius: 99px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}
.lector-voz[hidden] { display: none; }
.lector-voz p { font-size: .84rem; font-weight: 600; white-space: nowrap; }
.lector-voz button {
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font: 700 .8rem var(--ffb);
  cursor: pointer;
}
.lector-voz button:hover { background: rgba(255, 255, 255, .22); }
.lector-voz button:focus-visible { outline: 2px solid #7AA7FF; outline-offset: 2px; }

/* ── Avisos ── */
.lector-aviso {
  position: absolute;
  left: 50%; bottom: 22px;
  z-index: 50;
  transform: translate(-50%, 10px);
  max-width: min(92vw, 460px);
  padding: .65rem 1rem;
  border-radius: var(--r);
  background: #0F2537; color: #fff;
  font-size: .86rem; text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.lector-aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.lector-voz:not([hidden]) ~ .lector-aviso { bottom: 84px; }

/* ── Editor de notas ── */
.lector-editor {
  width: min(540px, 92vw);
  padding: 1.5rem;
  border: 0; border-radius: var(--r2);
  background: var(--g2); color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.lector-editor::backdrop { background: rgba(15, 37, 55, .55); }
.lector-editor h2 { font-family: var(--ffc); font-weight: 400; font-size: 1.4rem; color: var(--navy); margin-bottom: .9rem; }
.lector-editor blockquote { margin: 0 0 .9rem; padding-left: .75rem; border-left: 4px solid #FFD400; font-size: .9rem; line-height: 1.55; color: var(--text2); max-height: 8.5em; overflow: auto; }
.lector-editor textarea {
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid var(--border2); border-radius: var(--r);
  background: var(--g1); color: var(--text);
  font: 400 .95rem/1.6 var(--ffb);
  resize: vertical;
}
.lector-editor textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.lector-editor-botones { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.lector-editor .btn { cursor: pointer; padding: .7rem 1.3rem; }
.lector[data-tema="oscuro"] .lector-editor .btn-primary { color: #0F1216; }

@media (max-width: 760px) {
  .lector-barra { padding: .45rem .75rem; gap: .4rem .5rem; }
  .lector-titulo { display: none; }
  .lector-volver span,
  .lector-btn-panel span { display: none; }
  .lector-btn-panel { padding: 0 .5rem; margin-right: auto; }
  .lector-pct { min-width: 52px !important; }
  /* Panel como hoja inferior */
  .lector-panel {
    top: auto;
    width: 100%;
    height: 74%;
    border-left: 0;
    border-top: 1px solid var(--border2);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -14px 36px rgb(var(--navy-rgb) / .2);
  }
}

/* Celular angosto: los controles caben en una sola fila
   (tamaño, voz y descargas siguen disponibles en Herramientas y en el catálogo) */
@media (max-width: 480px) {
  .lector-barra { flex-wrap: nowrap; gap: .15rem; padding: .4rem .5rem; }
  .lector-grupo { gap: .1rem; }
  .lector-grupo button, .lector-grupo a, .lector-btn-panel { min-width: 32px; height: 34px; padding: 0 .3rem; }
  .lector-zoom, .lector-solo-amplio { display: none !important; }
  .lector-pag input { width: 2.9rem; height: 34px; }
  .lector-total { font-size: .78rem; }
  .lector-flotante { flex-wrap: wrap; max-width: calc(100vw - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .lector-progreso span, .lector-aviso, .lp-item { transition: none; }
  .lf-color:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .libro-portada { transition: none; }
  a.libro-portada:hover { transform: none; }
}


/* ── Ficha del libro (/libros/<slug>/): página para compartir ── */
.ficha { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; align-items: center; margin-top: .5rem; }
.ficha-portada {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25), 0 24px 50px rgba(0, 0, 0, .35);
  transition: transform .2s;
}
.ficha-portada:hover { transform: translateY(-4px); }
.ficha-portada img { display: block; width: 100%; height: auto; }
.ficha-info h1 { max-width: 20ch; }
.ficha-subtitulo { font-size: 1.12rem; color: var(--on-dark2); line-height: 1.55; max-width: 52ch; }
.ficha-autor { margin-top: 1rem; font-size: .9rem; font-weight: 700; color: var(--green); }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.ficha-hero .btn-ghost { color: var(--on-dark); border-color: rgba(255, 255, 255, .35); }
.ficha-hero .btn-ghost:hover { border-color: var(--on-dark); background: rgba(255, 255, 255, .06); }
.ficha-hero .btn:focus-visible { outline-color: var(--blue-lt); }

.ficha-cuerpo { max-width: 820px; }
.ficha-desc { white-space: pre-line; font-size: 1.05rem !important; }
.ficha-compartir { margin-top: 2.5rem; padding: 1.5rem 1.75rem; background: var(--g2); border: 1px solid var(--border); border-radius: var(--r2); }
.ficha-compartir h2 { font-family: var(--ffd); font-size: 1rem; font-weight: 800; color: var(--navy); margin-bottom: 1rem; }
.ficha-redes { display: flex; flex-wrap: wrap; gap: .5rem; }
.ficha-red {
  padding: .55rem 1rem;
  border: 1px solid var(--border2);
  border-radius: var(--r);
  background: var(--g2);
  font: 700 .86rem var(--ffb);
  color: var(--navy);
  cursor: pointer;
}
.ficha-red:hover { border-color: var(--blue); color: var(--blue); }
.ficha-red:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ficha-red--nativo { background: var(--blue); border-color: var(--blue); color: #fff; }
.ficha-red--nativo:hover { color: #fff; background: var(--blue2); }
.ficha-red[hidden] { display: none; }
.ficha-enlace { margin-top: .9rem; font-family: var(--ffm); font-size: .76rem; color: var(--text3); overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .ficha { grid-template-columns: 1fr; gap: 1.75rem; justify-items: start; }
  .ficha-portada { width: 170px; }
  .ficha-acciones .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ficha-portada { transition: none; }
  .ficha-portada:hover { transform: none; }
}

/* Títulos enlazados a la ficha del libro */
.libro-titulo a, .lector-titulo a { color: inherit; }
.libro-titulo a:hover, .lector-titulo a:hover { color: var(--blue); }

/* Menú Compartir del lector */
.lector-compartir { flex-wrap: wrap; max-width: min(460px, calc(100vw - 16px)); }
.lector-compartir a { text-decoration: none; }
#lBtnCompartir[aria-expanded="true"] { color: var(--blue); background: rgb(var(--blue-rgb) / .1); }

/* Lectura en voz alta: frase y palabra que se están escuchando */
.lp-voz { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lp-voz-frase, .lp-voz-palabra { position: absolute; border-radius: 3px; }
.lp-voz-frase { background: rgb(var(--blue-rgb) / .14); box-shadow: inset 0 -2px 0 rgb(var(--blue-rgb) / .55); mix-blend-mode: multiply; }
.lp-voz-palabra { background: rgb(var(--blue-rgb) / .28); mix-blend-mode: multiply; }
.lector[data-tema="oscuro"] .lp-voz-frase { background: rgba(122, 167, 255, .18); box-shadow: inset 0 -2px 0 rgba(122, 167, 255, .7); mix-blend-mode: screen; }
.lector[data-tema="oscuro"] .lp-voz-palabra { background: rgba(122, 167, 255, .35); mix-blend-mode: screen; }

/* Indicador de lecturas (ícono de ojo) */
.libro-lecturas, .ficha-lecturas { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; }
.libro-lecturas[hidden], .ficha-lecturas[hidden] { display: none; }
.libro-lecturas svg, .ficha-lecturas svg { width: 16px; height: 16px; flex-shrink: 0; }
.libro-lecturas { margin-top: .55rem; color: var(--text3); }
.ficha-lecturas { margin-top: .5rem; color: var(--on-dark3); }
@media (max-width: 600px) { .libro-lecturas { grid-column: 2; } }