/* ═══════════════════════════════════════════════════════════════════
   ESSAM · Iteración 7 — Biblioteca del curso (catálogo + lector)
   Estética verde/crema tibetana coherente con campus y aula.
   ═══════════════════════════════════════════════════════════════════ */

.bl-header{
  max-width:1180px; margin:0 auto; padding:0.8rem 1.25rem;
  border-bottom:1px solid rgba(42,90,58,0.18);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem;
  font-family:'Cinzel',serif; font-size:1.05rem; color:var(--verde, #2A5A3A);
}
.bl-back{ display:flex; gap:1rem; flex-wrap:wrap; }
.bl-back a{
  color:var(--verde, #2A5A3A); text-decoration:none; font-size:0.9rem;
  border:1px solid rgba(42,90,58,0.25); border-radius:5px; padding:4px 10px;
}
.bl-back a:hover{ background:rgba(42,90,58,0.08); }

.bl-main{ max-width:1080px; margin:0 auto; padding:1.6rem 1.25rem 4rem; }

/* ── Cabecera de la biblioteca ── */
.bl-hero{ margin-bottom:1.4rem; }
.bl-hero h1{
  font-family:'Cinzel',serif; color:var(--verde, #2A5A3A);
  font-size:1.7rem; margin:0 0 0.4rem;
}
.bl-hero p{ color:#7a7464; margin:0; font-size:0.98rem; }

/* ── Buscador ── */
.bl-buscar{
  display:flex; gap:0.6rem; margin-bottom:1.6rem; align-items:center;
}
.bl-buscar input{
  flex:1; padding:0.65rem 0.9rem; font-size:1rem; font-family:inherit;
  border:1px solid var(--border, #d9cdb2); border-radius:6px; background:#fffdf7;
  color:var(--ink, #2c2a24);
}
.bl-buscar input:focus{ outline:none; border-color:var(--dorado, #b08d3e); box-shadow:0 0 0 2px rgba(176,141,62,0.18); }
.bl-contador{ color:#7a7464; font-size:0.85rem; white-space:nowrap; }

/* ── Sección de tomo ── */
.bl-seccion{ margin-bottom:2rem; }
.bl-seccion h2{
  font-family:'Cinzel',serif; font-size:1.05rem; color:var(--dorado, #b08d3e);
  letter-spacing:0.12em; margin:0 0 0.9rem; padding-bottom:0.4rem;
  border-bottom:1px solid rgba(176,141,62,0.35);
}

/* ── Tarjetas de capítulos ── */
.bl-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1rem; }
.bl-card{
  background:var(--bg2, rgba(242,234,215,0.55));
  border:1px solid var(--border, #d9cdb2); border-radius:8px;
  padding:1rem 1.1rem; display:flex; flex-direction:column; gap:0.5rem;
  transition:transform .15s, box-shadow .15s;
}
.bl-card:hover{ transform:translateY(-2px); box-shadow:0 4px 14px rgba(42,90,58,0.12); }
.bl-card.leida{ border-color:var(--dorado, #b08d3e); background:rgba(240,228,196,0.55); }
.bl-card-leida{
  font-family:'Cinzel',serif; font-size:0.72rem; letter-spacing:0.08em;
  color:var(--dorado, #b08d3e); text-transform:uppercase;
}
.bl-card h3{
  font-family:'Cinzel',serif; font-size:0.95rem; color:var(--verde, #2A5A3A);
  margin:0; line-height:1.35;
}
.bl-card small{ color:#7a7464; font-size:0.82rem; }
.bl-unidad{
  display:inline-block; font-family:'Cinzel',serif; font-size:0.7rem;
  letter-spacing:0.06em; color:#6b5520; background:rgba(176,141,62,0.15);
  border:1px solid rgba(176,141,62,0.3); border-radius:9px; padding:2px 8px;
  text-transform:uppercase;
}

/* ── Barra de progreso de lectura ── */
.bl-barra{ height:5px; border-radius:3px; background:rgba(42,90,58,0.12); overflow:hidden; margin:0.2rem 0; }
.bl-barra > span{ display:block; height:100%; background:linear-gradient(90deg, var(--verde, #2A5A3A), var(--dorado, #b08d3e)); border-radius:3px; transition:width .3s; }
.bl-barra-titulo{ display:flex; justify-content:space-between; font-size:0.75rem; color:#7a7464; }

/* ── Botones de tarjeta ── */
.bl-actions{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:auto; }
.bl-btn{
  font-family:'Cinzel',serif; font-size:0.78rem; letter-spacing:0.04em;
  border:1px solid var(--dorado, #b08d3e); background:var(--bg2, rgba(242,234,215,0.55));
  color:var(--ink, #2c2a24); border-radius:5px; padding:6px 12px; cursor:pointer;
  transition:background .15s; text-decoration:none;
}
.bl-btn:hover{ background:#e8d8ae; }
.bl-btn.leido{ border-color:var(--verde, #2A5A3A); background:rgba(42,90,58,0.08); color:var(--verde, #2A5A3A); }
.bl-btn.leido.siempre{ cursor:default; opacity:0.85; }
.bl-btn.unidad{ border-color:rgba(42,90,58,0.4); color:var(--verde, #2A5A3A); }
.bl-btn.unidad:hover{ background:rgba(42,90,58,0.08); }
.bl-btn.confirmando{ background:var(--dorado, #b08d3e); color:#f3ead4; border-color:var(--dorado, #b08d3e); }

/* ── Lector ── */
.bl-lector{
  position:fixed; inset:0; z-index:400; background:rgba(26,61,40,0.65);
  display:flex; justify-content:center; align-items:flex-start; padding:3rem 1rem;
  overflow-y:auto;
}
.bl-lector-box{
  width:100%; max-width:760px; background:#fffdf7; border-radius:10px;
  border:1px solid var(--border, #d9cdb2); padding:1.8rem 2rem;
  box-shadow:0 18px 50px rgba(20,40,30,0.35); position:relative;
}
.bl-lector-tomo{ font-family:'Cinzel',serif; font-size:0.72rem; letter-spacing:0.1em; color:var(--dorado, #b08d3e); margin-bottom:0.4rem; }
.bl-lector-titulo{ font-family:'Cinzel',serif; color:var(--verde, #2A5A3A); font-size:1.4rem; margin:0 0 1rem; line-height:1.3; }
.bl-lector-contenido{
  font-family:'EB Garamond',Georgia,serif; font-size:1.08rem; line-height:1.75;
  color:#2c2a24;
}
.bl-lector-contenido p{ margin:0 0 0.9rem; }
.bl-lector-contenido h1, .bl-lector-contenido h2, .bl-lector-contenido h3{
  font-family:'Cinzel',serif; color:var(--verde, #2A5A3A); margin:1.4rem 0 0.6rem;
}
.bl-lector-contenido h1{ font-size:1.25rem; }
.bl-lector-contenido h2{ font-size:1.15rem; }
.bl-lector-contenido h3{ font-size:1.05rem; }
.bl-lector-contenido ul, .bl-lector-contenido ol{ margin:0 0 0.9rem; padding-left:1.6rem; }
.bl-lector-contenido em{ color:#5c4f2e; }
.bl-lector-nav{
  display:flex; justify-content:space-between; align-items:center; gap:0.6rem;
  margin-top:1.4rem; padding-top:1rem; border-top:1px solid rgba(42,90,58,0.18);
  flex-wrap:wrap;
}
.bl-lector-voz{
  display:flex; align-items:center; gap:0.5rem;
  font-family:'Cinzel',serif; font-size:0.8rem; color:var(--verde, #2A5A3A);
  cursor:pointer; user-select:none; border:1px solid rgba(42,90,58,0.3);
  border-radius:5px; padding:5px 12px; background:rgba(42,90,58,0.05);
}
.bl-lector-voz:hover{ background:rgba(42,90,58,0.12); }
.bl-lector-voz.on{ background:var(--verde, #2A5A3A); color:#f3ead4; border-color:var(--verde, #2A5A3A); }
.bl-lector-cerrar{
  position:absolute; top:1rem; right:1rem; background:none; border:none;
  font-size:1.3rem; cursor:pointer; color:#7a7464; line-height:1;
}
.bl-lector-cerrar:hover{ color:var(--rojo, #8a3b3b); }

/* ── Estado vacío ── */
.bl-vacio{
  text-align:center; color:#7a7464; padding:2.5rem 1rem;
  font-family:'Cinzel',serif; font-size:0.95rem; letter-spacing:0.05em;
}

@media (max-width:640px){
  .bl-header{ flex-direction:column; align-items:flex-start; }
  .bl-lector-box{ padding:1.4rem 1.1rem; }
  .bl-lector-titulo{ font-size:1.15rem; }
}