/* ============================================================
   Crónica de la Aviación Española — Hoja de estilos
   Tema claro y brillante, con selector de color (acento) y modo lectura.
   Basado en documentos de Ángel Hernán Sanz Merlo.
   ============================================================ */

:root{
  --accent:#1b6ca8;          /* acento por defecto (azul aeronáutico) */
  --accent-2:#c8952f;        /* dorado secundario */
  --accent-soft:#e8f1f8;
  --bg:#f5f8fc;
  --bg-2:#ffffff;
  --panel:#ffffff;
  --ink:#1c2733;
  --ink-soft:#4a5866;
  --line:#dfe7ef;
  --shadow:0 8px 30px rgba(27,60,90,.10);
  --shadow-sm:0 3px 12px rgba(27,60,90,.08);
  --radius:16px;
  --maxw:1180px;
  --font-body:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-ui:"Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --reading:1.16rem;
}

/* ---- Modos de fondo (todos claros/brillantes) ---- */
html[data-tema="sepia"]{
  --bg:#f7f1e4; --bg-2:#fffdf8; --panel:#fffdf8; --ink:#3a3226;
  --ink-soft:#6b5f4c; --line:#e7dcc6; --accent-soft:#f3ead7;
}
html[data-tema="nieve"]{
  --bg:#eef2f7; --bg-2:#ffffff; --panel:#ffffff; --ink:#18202a;
  --ink-soft:#48566a; --line:#e2e8f0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:
    radial-gradient(1200px 600px at 80% -10%, var(--accent-soft), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg));
  color:var(--ink); font-family:var(--font-body); line-height:1.7;
  font-size:var(--reading); -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* ---- Barra de progreso de lectura ---- */
#progreso{position:fixed; top:0; left:0; height:4px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); z-index:60;
  transition:width .1s ease}

/* ---- Cabecera ---- */
header.top{position:sticky; top:0; z-index:50; backdrop-filter:blur(8px);
  background:color-mix(in srgb, var(--bg-2) 82%, transparent);
  border-bottom:1px solid var(--line)}
.topbar{display:flex; align-items:center; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--font-ui);
  font-weight:700; letter-spacing:.2px; color:var(--ink)}
.brand .logo{width:38px; height:38px; flex:0 0 auto}
.brand small{display:block; font-weight:500; font-size:.72rem; color:var(--ink-soft);
  letter-spacing:2px; text-transform:uppercase}
nav.menu{margin-left:auto; display:flex; gap:6px; font-family:var(--font-ui); font-size:.92rem}
nav.menu a{padding:8px 12px; border-radius:10px; color:var(--ink-soft)}
nav.menu a:hover{background:var(--accent-soft); color:var(--accent); text-decoration:none}
nav.menu a.activo{color:var(--accent); font-weight:600}

/* ---- Botón de ajustes ---- */
.btn-cfg{font-family:var(--font-ui); cursor:pointer; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); border-radius:10px; padding:8px 12px;
  display:inline-flex; gap:8px; align-items:center; box-shadow:var(--shadow-sm)}
.btn-cfg:hover{border-color:var(--accent)}

/* ---- Panel de ajustes ---- */
#ajustes{position:fixed; right:18px; top:74px; z-index:70; width:280px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:16px; font-family:var(--font-ui);
  transform:translateY(-8px) scale(.98); opacity:0; pointer-events:none; transition:.18s}
#ajustes.abierto{transform:none; opacity:1; pointer-events:auto}
#ajustes h4{margin:.2rem 0 .5rem; font-size:.8rem; text-transform:uppercase;
  letter-spacing:1px; color:var(--ink-soft)}
.swatches{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.swatch{width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid #fff;
  box-shadow:0 0 0 1px var(--line), var(--shadow-sm)}
.swatch.sel{outline:3px solid var(--accent); outline-offset:2px}
.fila{display:flex; gap:8px; align-items:center; margin:8px 0}
.fila .opt{flex:1; text-align:center; border:1px solid var(--line); border-radius:9px;
  padding:7px 0; cursor:pointer; font-size:.85rem}
.fila .opt.sel{background:var(--accent); color:#fff; border-color:var(--accent)}

/* ============================================================
   PORTADA
   ============================================================ */
.hero{position:relative; overflow:hidden; padding:70px 0 54px;
  background:
    radial-gradient(900px 420px at 15% 0%, color-mix(in srgb,var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(700px 380px at 90% 20%, color-mix(in srgb,var(--accent-2) 16%, transparent), transparent 55%)}
.hero .kicker{font-family:var(--font-ui); letter-spacing:3px; text-transform:uppercase;
  font-size:.78rem; color:var(--accent); font-weight:700}
.hero h1{font-family:var(--font-ui); font-weight:800; font-size:clamp(2.1rem,5vw,3.6rem);
  line-height:1.05; margin:.3rem 0 .5rem; letter-spacing:-.5px}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero p.lede{max-width:640px; font-size:1.2rem; color:var(--ink-soft)}
.hero .autor{font-family:var(--font-ui); font-size:.9rem; color:var(--ink-soft); margin-top:10px}
.hero .cta{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; font-family:var(--font-ui)}
.cta a{padding:12px 20px; border-radius:12px; font-weight:600}
.cta .prim{background:var(--accent); color:#fff; box-shadow:var(--shadow)}
.cta .prim:hover{text-decoration:none; filter:brightness(1.06)}
.cta .sec{border:1px solid var(--line); background:var(--panel); color:var(--ink)}
.plane{position:absolute; right:-40px; top:40px; width:min(46%,520px); opacity:.9;
  filter:drop-shadow(0 20px 30px rgba(27,60,90,.18))}
@media(max-width:820px){.plane{display:none}}

/* Cifras */
.stats{display:flex; gap:26px; flex-wrap:wrap; margin-top:30px; font-family:var(--font-ui)}
.stat b{display:block; font-size:1.7rem; color:var(--accent)}
.stat span{font-size:.82rem; color:var(--ink-soft)}

/* ---- Rejilla de eras/documentos ---- */
.seccion{padding:52px 0}
.seccion h2.tit{font-family:var(--font-ui); font-weight:800; font-size:1.7rem; margin:0 0 6px}
.seccion p.sub{color:var(--ink-soft); margin:0 0 26px; max-width:680px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px}
.card{position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s; display:flex; flex-direction:column}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card .cover{height:158px; background-size:cover; background-position:center;
  background-color:#e6ecf2; border-bottom:1px solid var(--line)}
.card .cab{padding:18px 18px 0}
.card .era{font-family:var(--font-ui); font-size:.74rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--accent)}
.card h3{font-family:var(--font-ui); font-size:1.2rem; margin:.3rem 0 .4rem; color:var(--ink)}
.card p{margin:0 0 16px; color:var(--ink-soft); font-size:.98rem; padding:0 18px}
.card .pie{margin-top:auto; padding:14px 18px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; font-family:var(--font-ui);
  font-size:.82rem; color:var(--ink-soft)}
.card .pie a{font-weight:600}
.card.proximo{opacity:.72}
.badge{display:inline-block; font-family:var(--font-ui); font-size:.68rem; font-weight:700;
  padding:3px 8px; border-radius:20px; background:var(--accent-2); color:#fff; letter-spacing:.5px}
.tira{height:6px; background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* ---- Cronología (timeline) ---- */
.timeline{position:relative; margin:20px 0; padding-left:26px}
.timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2)); border-radius:3px}
.hito{position:relative; margin:0 0 20px; padding-left:8px}
.hito::before{content:""; position:absolute; left:-24px; top:6px; width:14px; height:14px;
  background:var(--bg-2); border:3px solid var(--accent); border-radius:50%}
.hito .a{font-family:var(--font-ui); font-weight:800; color:var(--accent)}
.hito .t{color:var(--ink-soft)}

/* ============================================================
   PÁGINA DE LECTURA (documento)
   ============================================================ */
.doc-hero{padding:44px 0 26px; border-bottom:1px solid var(--line);
  background:radial-gradient(700px 300px at 12% 0%, var(--accent-soft), transparent 60%)}
.doc-hero .era{font-family:var(--font-ui); font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--accent); font-size:.78rem}
.doc-hero h1{font-family:var(--font-ui); font-weight:800; font-size:clamp(1.8rem,4vw,2.8rem);
  margin:.3rem 0 .4rem; line-height:1.08}
.doc-hero .meta{font-family:var(--font-ui); color:var(--ink-soft); font-size:.92rem;
  display:flex; gap:18px; flex-wrap:wrap}

.layout{display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start;
  padding:34px 0 60px}
@media(max-width:900px){.layout{grid-template-columns:1fr}}

/* Índice lateral */
aside.toc{position:sticky; top:80px; align-self:start; font-family:var(--font-ui);
  max-height:calc(100vh - 100px); overflow:auto; padding-right:6px}
@media(max-width:900px){aside.toc{position:static; max-height:none;
  border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--panel)}}
aside.toc h4{font-size:.74rem; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--ink-soft); margin:0 0 10px}
aside.toc ul{list-style:none; margin:0; padding:0; border-left:2px solid var(--line)}
aside.toc li a{display:block; padding:5px 12px; font-size:.9rem; color:var(--ink-soft);
  border-left:2px solid transparent; margin-left:-2px}
aside.toc li a:hover{color:var(--accent); text-decoration:none}
aside.toc li a.activo{color:var(--accent); border-left-color:var(--accent); font-weight:600}

/* Cuerpo del artículo */
article.texto{max-width:760px}
article.texto h2{font-family:var(--font-ui); font-weight:800; font-size:1.5rem;
  margin:2.2rem 0 .8rem; padding-top:.4rem; color:var(--ink); scroll-margin-top:84px;
  display:flex; align-items:baseline; gap:12px}
article.texto h2::before{content:""; width:26px; height:4px; border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); flex:0 0 auto; transform:translateY(-4px)}
article.texto h3{font-family:var(--font-ui); font-weight:700; font-size:1.15rem;
  margin:1.6rem 0 .5rem; color:var(--accent); scroll-margin-top:84px}
article.texto p{margin:0 0 1.05rem; text-align:justify; hyphens:auto}
article.texto blockquote{margin:1rem 0; padding:.4rem 0 .4rem 16px;
  border-left:3px solid var(--accent-2); color:var(--ink-soft); font-style:italic}
article.texto ul{margin:0 0 1.05rem 1.1rem}

/* Figuras */
figure.figs{margin:1.6rem 0; padding:14px; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm)}
figure.figs .imgs{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
figure.figs .imgs img{border-radius:8px; max-height:340px; object-fit:cover; cursor:zoom-in;
  background:#eef2f6; transition:transform .15s}
figure.figs .imgs img:hover{transform:scale(1.02)}
figure.figs figcaption{font-family:var(--font-ui); font-size:.85rem; color:var(--ink-soft);
  text-align:center; margin-top:10px; line-height:1.4}
figure.figs figcaption .fuente{display:block; font-size:.76rem; opacity:.8; margin-top:3px; word-break:break-word}
.img-fallback{display:inline-flex; align-items:center; justify-content:center; min-width:180px;
  min-height:120px; background:repeating-linear-gradient(45deg,#eef2f6,#eef2f6 10px,#e6ecf2 10px,#e6ecf2 20px);
  border-radius:8px; color:var(--ink-soft); font-family:var(--font-ui); font-size:.78rem; padding:12px; text-align:center}

/* Referencias bibliográficas en el texto */
.ref{cursor:help; color:var(--accent); font-family:var(--font-ui); font-size:.82em;
  font-weight:600; border-bottom:1px dotted var(--accent); white-space:nowrap; position:relative}
.ref:hover::after{content:attr(data-fuente); position:absolute; left:0; bottom:135%;
  width:min(340px,72vw); background:var(--ink); color:#fff; padding:9px 12px; border-radius:9px;
  font-size:.78rem; font-weight:400; line-height:1.35; z-index:40; box-shadow:var(--shadow);
  font-family:var(--font-ui); white-space:normal}
.ref:hover::before{content:""; position:absolute; left:14px; bottom:120%; border:6px solid transparent;
  border-top-color:var(--ink); z-index:41}

/* Notas al pie */
.footnote-ref{font-family:var(--font-ui); font-weight:700; text-decoration:none;
  background:var(--accent-soft); color:var(--accent); border-radius:5px; padding:0 5px; font-size:.72em}
.footnote-ref:hover{text-decoration:none; background:var(--accent); color:#fff}
section.footnotes{margin-top:40px; padding-top:18px; border-top:2px solid var(--line);
  font-size:.92rem; color:var(--ink-soft)}
section.footnotes::before{content:"Notas al pie"; display:block; font-family:var(--font-ui);
  font-weight:800; font-size:1.1rem; color:var(--ink); margin-bottom:10px}
section.footnotes ol{padding-left:22px}
section.footnotes li{margin-bottom:8px}

/* Volver arriba */
#arriba{position:fixed; right:18px; bottom:18px; z-index:55; width:44px; height:44px;
  border-radius:50%; background:var(--accent); color:#fff; border:none; cursor:pointer;
  box-shadow:var(--shadow); font-size:1.2rem; opacity:0; pointer-events:none; transition:.2s}
#arriba.visible{opacity:1; pointer-events:auto}

/* Lightbox */
#lb{position:fixed; inset:0; background:rgba(15,25,35,.9); z-index:90; display:none;
  align-items:center; justify-content:center; padding:30px; cursor:zoom-out}
#lb.abierto{display:flex}
#lb img{max-width:94vw; max-height:92vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5)}

/* Pie de página */
footer.pie{border-top:1px solid var(--line); background:var(--panel); padding:32px 0;
  font-family:var(--font-ui); color:var(--ink-soft); font-size:.9rem}
footer.pie .cols{display:flex; gap:30px; flex-wrap:wrap; justify-content:space-between}
footer.pie a{color:var(--accent)}

/* Navegación entre documentos */
.docnav{display:flex; justify-content:space-between; gap:16px; margin-top:36px;
  font-family:var(--font-ui)}
.docnav a{flex:1; padding:16px 18px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); box-shadow:var(--shadow-sm)}
.docnav a:hover{border-color:var(--accent); text-decoration:none}
.docnav .dir{font-size:.74rem; text-transform:uppercase; letter-spacing:1px; color:var(--ink-soft)}
.docnav .tt{font-weight:700; color:var(--ink)}
.docnav .next{text-align:right}

/* ============================================================
   MEJORAS v2 — marca de agua, banda temática, collage, enlaces
   ============================================================ */

/* Marca de agua (logo difuminado) de fondo en todas las páginas */
.marca-agua{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.marca-agua svg{position:fixed; right:-6vw; bottom:-8vh; width:min(64vw,760px); height:auto;
  opacity:.05; transform:rotate(-8deg)}
html[data-tema="sepia"] .marca-agua svg{opacity:.07}

/* Cabecera de la portada con dos columnas + collage de fotos reales */
.hero{padding:64px 0 48px}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:36px; align-items:center}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr} .collage{display:none}}
.collage{position:relative; height:360px}
.collage img{position:absolute; border-radius:14px; border:5px solid #fff; object-fit:cover;
  box-shadow:var(--shadow); background:#e6ecf2}
.collage .c1{width:62%; height:52%; top:0; left:2%; transform:rotate(-4deg); z-index:1}
.collage .c2{width:56%; height:48%; top:34%; right:0; transform:rotate(3.5deg); z-index:3}
.collage .c3{width:54%; height:46%; bottom:0; left:14%; transform:rotate(-1.5deg); z-index:2}
.collage figcaption{position:absolute; bottom:-26px; left:0; right:0; text-align:center;
  font-family:var(--font-ui); font-size:.76rem; color:var(--ink-soft)}

/* Banda temática (foto histórica difuminada) en la cabecera de cada crónica */
.doc-hero{position:relative; overflow:hidden}
.doc-hero .banner{position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:.16; z-index:0; filter:saturate(.9)}
.doc-hero .banner::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, var(--bg))}
.doc-hero .wrap{position:relative; z-index:1}

/* Entradilla y bloque de fuentes de las crónicas redactadas */
article.texto .entradilla{font-size:1.22rem; line-height:1.6; color:var(--ink-soft);
  border-left:4px solid var(--accent); padding:4px 0 4px 18px; margin:0 0 1.6rem; font-style:italic}
article.texto p.fuentes{font-family:var(--font-ui); font-size:.84rem; color:var(--ink-soft);
  background:var(--accent-soft); border-radius:10px; padding:9px 14px; margin:.4rem 0 1.8rem}
article.texto p.fuentes span{font-weight:700; color:var(--accent); margin-right:6px}

/* Cronología de la portada: hitos enlazados y clicables */
a.hito{display:block; text-decoration:none; color:inherit; padding:10px 12px; border-radius:10px;
  transition:background .15s, transform .15s}
a.hito:hover{background:var(--panel); box-shadow:var(--shadow-sm); text-decoration:none; transform:translateX(3px)}
a.hito .a{font-family:var(--font-ui); font-weight:800; color:var(--accent)}
a.hito .t{color:var(--ink-soft)}
a.hito .ir{font-family:var(--font-ui); font-size:.76rem; color:var(--accent); opacity:0; transition:.15s}
a.hito:hover .ir{opacity:1}

/* Bibliografía: enlaces "citado en" */
.cita-en{display:block; margin-top:5px; font-size:.8rem}
.cita-en b{color:var(--ink-soft); font-weight:600}
.cita-en a{display:inline-block; margin:2px 4px 0 0; padding:2px 9px; border-radius:20px;
  background:var(--accent-soft); color:var(--accent); font-weight:600; font-size:.78rem}
.cita-en a:hover{background:var(--accent); color:#fff; text-decoration:none}
tr:target{background:var(--accent-soft) !important; outline:2px solid var(--accent)}

/* Referencia con enlace (mantiene el tooltip) */
a.ref{text-decoration:none}
a.ref:hover{text-decoration:none}