/* DraHistory · estilos comunes: navegación de capítulo, biblioteca, índice del libro y secciones.
   Se generan con 06_Herramientas/app/construir_app.py a partir de 02_Editorial/catalogo.json. */
:root{
  --dh-papel:#f5efe3; --dh-papel2:#ebe2d0; --dh-tinta:#2a2521; --dh-suave:#6b6157; --dh-linea:#d6c9b4;
  --dh-acento:#9a4a1c; --dh-oro:#c69456; --dh-oscuro:#111214; --dh-claro:#efe8da;
  --dh-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --dh-sans:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  --dh-ancho:min(1180px, 100vw - 48px);
}

/* ---------- navegación del capítulo (artículo, maqueta…) ---------- */
.nav-cap{position:sticky;top:0;z-index:30;background:#15171bf2;color:#e8e1d3;font:600 13px/1.2 var(--dh-sans);
  display:flex;align-items:center;gap:10px 18px;padding:0 18px;min-height:50px;flex-wrap:wrap;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #2a2c31}
.nav-cap a{color:inherit;text-decoration:none}
.nav-cap .marca{letter-spacing:.16em;text-transform:uppercase;color:var(--dh-oro);font-size:11px;white-space:nowrap}
.nav-cap .migas{display:flex;align-items:center;gap:6px;flex:1 1 0;min-width:0;color:#a59e92;font-weight:500;white-space:nowrap;overflow:hidden}
.nav-cap .migas a:hover{color:#fff}
.nav-cap .migas .sep{opacity:.5}
.nav-cap .migas .actual{color:#f1ece2;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.nav-cap .pestanas{display:flex;gap:4px;margin-left:auto;flex:0 0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-cap .pestanas::-webkit-scrollbar{display:none}
.nav-cap .pestana{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;color:#cfc6b6;white-space:nowrap;border:1px solid transparent}
.nav-cap a.pestana:hover{background:#ffffff14;color:#fff}
.nav-cap .pestana.activa{background:var(--dh-oro);color:#1b1610}
.nav-cap .pestana.pronto{color:#6f6a62;cursor:default}
.nav-cap .pestana.pronto small{font:600 9.5px/1 var(--dh-sans);letter-spacing:.1em;text-transform:uppercase;border:1px solid #4a463f;border-radius:999px;padding:3px 6px}
.nav-cap .estado{font:600 10.5px/1 var(--dh-sans);letter-spacing:.06em;background:#7a3d12;color:#fff;border-radius:999px;padding:5px 9px;white-space:nowrap}
@media (max-width:900px){
  .nav-cap{padding:8px 14px 0;gap:6px 14px}
  .nav-cap{flex-wrap:wrap}
  .nav-cap .pestanas{order:3;flex:1 0 100%;margin:0 -14px;padding:6px 10px 8px;border-top:1px solid #2a2c31}
  .nav-cap .estado{margin-left:auto}
}
@media (max-width:640px){
  .nav-cap .migas .opc{display:none}
}

/* ---------- páginas de índice (biblioteca, libro, sección) ---------- */
body.dh{margin:0;background:var(--dh-papel);color:var(--dh-tinta);font:18px/1.6 var(--dh-serif);-webkit-text-size-adjust:100%}
body.dh *{box-sizing:border-box}
.dh-ancho{width:var(--dh-ancho);margin:0 auto}
.dh-ante{font:600 11.5px/1 var(--dh-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--dh-oro);margin:0 0 12px}
.dh-pie{font:13px/1.5 var(--dh-sans);color:var(--dh-suave);padding:28px 0 40px;border-top:1px solid var(--dh-linea);margin-top:48px}
.dh-pie a{color:var(--dh-acento)}

/* biblioteca */
body.biblioteca{background:radial-gradient(ellipse at 50% -10%,#2a2620 0%,#121212 60%) fixed,#121212;color:var(--dh-claro);min-height:100vh}
.biblioteca header{text-align:center;padding:clamp(40px,8vw,90px) 20px clamp(24px,4vw,40px)}
.biblioteca h1{font:600 clamp(2.6rem,7vw,4.4rem)/1 var(--dh-serif);margin:0;letter-spacing:-.01em}
.biblioteca header p.lema{font-style:italic;color:#bdb4a5;font-size:clamp(1.05rem,2.3vw,1.3rem);margin:.7em 0 0}
.estante{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:clamp(18px,3vw,34px);padding:20px 0 30px;align-items:end}
.libro-tapa{position:relative;display:block;aspect-ratio:3/4.2;border-radius:3px 9px 9px 3px;overflow:hidden;text-decoration:none;color:#f4ecdc;
  box-shadow:0 18px 30px -12px #000c,0 2px 0 #ffffff10 inset;transition:transform .25s}
.libro-tapa::before{content:"";position:absolute;inset:0 auto 0 0;width:14px;background:linear-gradient(90deg,#0008,#0000);z-index:2}
a.libro-tapa:hover{transform:translateY(-6px)}
.libro-tapa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 40%;filter:sepia(.45) contrast(1.1) brightness(.85)}
.libro-tapa .velo{position:absolute;inset:0;background:linear-gradient(180deg,#0b0a09b3 0%,#0b0a0900 22%,#0b0a0900 42%,#0b0a09eb 76%)}
.libro-tapa .titulo{position:absolute;left:16px;right:14px;bottom:16px;z-index:3}
.libro-tapa .titulo b{display:block;font:600 1.45rem/1.1 var(--dh-serif)}
.libro-tapa .titulo span{display:block;font:12px/1.35 var(--dh-sans);color:#d8cdb8;margin-top:6px}
.libro-tapa.tela{background:repeating-linear-gradient(45deg,#2b2925 0 2px,#262420 2px 4px);color:#8f877a;box-shadow:0 12px 22px -12px #000a}
.libro-tapa.tela .titulo b{font-size:1.2rem;color:#a39b8d}
.libro-tapa .marca-libro{position:absolute;top:14px;left:16px;right:14px;z-index:3;font:600 10px/1 var(--dh-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--dh-oro)}
.libro-tapa.tela .marca-libro{color:#6f685d}
.estante-suelo{height:12px;background:linear-gradient(#3a2f24,#1d1813);border-radius:2px;box-shadow:0 10px 20px #0009;margin-top:-6px}
.biblioteca .dh-pie{border-color:#2c2a27;color:#8f877a}

/* portada del libro */
.libro-portada{position:relative;background:#141210;color:var(--dh-claro);overflow:hidden}
.libro-portada img.fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.45) brightness(.55)}
.libro-portada .dentro{position:relative;padding:clamp(48px,9vw,110px) 0 clamp(36px,6vw,64px)}
.libro-portada h1{font:600 clamp(2.6rem,7vw,4.6rem)/1 var(--dh-serif);margin:0}
.libro-portada .sub{font-style:italic;font-size:clamp(1.1rem,2.4vw,1.5rem);color:#e2d8c6;margin:.5em 0 .8em}
.libro-portada .presentacion{max-width:44em;color:#d6ccba;font-size:1.05rem}
.libro-portada .credito{position:absolute;right:14px;bottom:8px;font:11px var(--dh-sans);color:#a59e92}

/* índice de secciones */
.indice{padding:clamp(28px,5vw,56px) 0 0}
.indice h2{font:600 1.7rem/1.2 var(--dh-serif);margin:0 0 .8em}
.indice h2::before{content:"";display:block;width:56px;height:3px;background:var(--dh-acento);margin-bottom:.7em}
.secciones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.secciones li{border-top:1px solid var(--dh-linea)}
.secciones a{display:grid;grid-template-columns:64px 1fr;gap:4px 16px;padding:18px 4px;text-decoration:none;color:inherit;border-radius:6px}
.secciones a:hover{background:#fffaf0}
.secciones .num{grid-row:1/span 3;font:600 2.4rem/1 var(--dh-serif);color:var(--dh-acento)}
.secciones .tit{font:600 1.2rem/1.25 var(--dh-serif)}
.secciones .res{font:14.5px/1.45 var(--dh-sans);color:var(--dh-suave)}
.secciones .cuenta{font:600 11px/1 var(--dh-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dh-oro);margin-top:4px}
.secciones .cuenta.vacia{color:#b3a894}

/* barra simple de las páginas de índice */
.nav-indice{position:sticky;top:0;z-index:30;background:#15171bf2;color:#e8e1d3;font:600 13px/1.2 var(--dh-sans);display:flex;align-items:center;gap:18px;padding:0 18px;min-height:50px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav-indice a{color:inherit;text-decoration:none}
.nav-indice .marca{letter-spacing:.16em;text-transform:uppercase;color:var(--dh-oro);font-size:11px}
.nav-indice .migas{display:flex;gap:6px;color:#a59e92;font-weight:500;white-space:nowrap;overflow:hidden}
.nav-indice .migas .sep{opacity:.5}
.nav-indice .migas .actual{color:#f1ece2;font-weight:600;overflow:hidden;text-overflow:ellipsis}

/* página de sección */
.seccion-cab{padding:clamp(36px,6vw,64px) 0 8px}
.seccion-cab .dh-ante{color:var(--dh-acento)}
.seccion-cab h1{font:600 clamp(2.2rem,5.5vw,3.4rem)/1.05 var(--dh-serif);margin:0}
.seccion-cab p.res{font-size:1.2rem;color:#4a423b;max-width:40em;margin:.6em 0 0}
.capitulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px;padding:32px 0 0}
.cap-tarjeta{display:block;background:#fffaf0;border:1px solid var(--dh-linea);border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 10px 26px -18px #3b2816;transition:transform .2s}
.cap-tarjeta:hover{transform:translateY(-4px)}
.cap-tarjeta .img{aspect-ratio:16/9;background:#111 center/cover no-repeat}
.cap-tarjeta .txt{padding:16px 18px 18px}
.cap-tarjeta .fecha{font:700 12px/1 var(--dh-sans);letter-spacing:.16em;color:var(--dh-acento)}
.cap-tarjeta h3{font:600 1.45rem/1.15 var(--dh-serif);margin:6px 0 6px}
.cap-tarjeta p{font:14.5px/1.45 var(--dh-sans);color:var(--dh-suave);margin:0 0 12px}
.cap-tarjeta .apartados{display:flex;flex-wrap:wrap;gap:6px}
.cap-tarjeta .apartados span{font:600 11.5px/1 var(--dh-sans);border:1px solid var(--dh-linea);border-radius:999px;padding:6px 10px;color:var(--dh-tinta)}
.cap-tarjeta .apartados span.pronto{color:#a89d8a;border-style:dashed}
.en-preparacion{margin:32px 0 0;padding:26px 28px;border:1px dashed #c9b99d;border-radius:8px;background:#fbf6ec;font:15.5px/1.55 var(--dh-sans);color:var(--dh-suave)}
.en-preparacion strong{color:var(--dh-tinta)}

@media (max-width:760px){
  .secciones{grid-template-columns:1fr}
  .estante{grid-template-columns:repeat(2,1fr)}
}