@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg-deep:#1C2126;
  --bg-panel:#242A31;
  --bg-panel-2:#252a2f;
  --steel-line:#3a4048;
  --yellow:#F2B705;
  --yellow-dim:#8a6f1e;
  --red:#d6432b;
  --text:#f1ede4;
  --text-muted:#9aa3ac;
  --font-display:'Oswald', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  background:var(--bg-deep);
  color:var(--text);
  font-family:var(--font-body);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* subtle diamond-plate texture on the deep background */
body{
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255,199,44,0.03), transparent 40%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 10px);
}

button{font-family:inherit; -webkit-tap-highlight-color:transparent;}

#app{position:fixed; inset:0; display:flex; flex-direction:column;}

/* ---------- COVER ---------- */
#cover{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 24px calc(32px + var(--safe-bottom));
  background:
    linear-gradient(180deg, rgba(20,23,26,0.2), rgba(20,23,26,0.92) 60%, var(--bg-deep) 100%),
    var(--bg-deep);
  text-align:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#cover.hidden{opacity:0; visibility:hidden; pointer-events:none;}

.cover-eyebrow{
  font-family:var(--font-mono);
  letter-spacing:.28em;
  font-size:11px;
  color:var(--yellow);
  border:1px solid var(--yellow-dim);
  padding:5px 12px;
  border-radius:2px;
  margin-bottom:22px;
}
.cover-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(34px, 10vw, 52px);
  line-height:1.05;
  letter-spacing:.01em;
  margin:0 0 6px;
  text-transform:uppercase;
}
.cover-title em{
  display:block; font-style:normal; color:var(--yellow);
}
.cover-sub{
  color:var(--text-muted);
  font-size:15px;
  max-width:320px;
  margin:14px 0 34px;
  line-height:1.5;
}
.cover-hazard{
  width:100%; max-width:320px; height:6px; margin-bottom:34px;
  background:repeating-linear-gradient(-45deg, var(--yellow) 0 10px, #1a1a1a 10px 20px);
  border-radius:2px; opacity:.85;
}
#start-btn{
  background:var(--yellow); color:#191a1c; border:none;
  font-family:var(--font-display); font-weight:600; letter-spacing:.04em;
  font-size:17px; text-transform:uppercase;
  padding:16px 40px; border-radius:3px;
  box-shadow:0 6px 0 var(--yellow-dim);
  active:translateY(2px);
}
#start-btn:active{transform:translateY(4px); box-shadow:0 2px 0 var(--yellow-dim);}
.cover-meta{
  margin-top:22px; font-family:var(--font-mono); font-size:11px;
  color:var(--text-muted); letter-spacing:.08em;
}

/* ---------- TOP BAR ---------- */
#topbar{
  display:flex; align-items:center; gap:10px;
  padding:calc(12px + var(--safe-top)) 14px 12px;
  background:var(--bg-panel);
  border-bottom:1px solid var(--steel-line);
  z-index:20; position:relative;
}
.icon-btn{
  width:38px; height:38px; border-radius:3px;
  background:var(--bg-panel-2); border:1px solid var(--steel-line);
  color:var(--text); display:flex; align-items:center; justify-content:center;
  flex:none;
}
.icon-btn:active{background:var(--steel-line);}
#topbar .tag{
  flex:1; display:flex; align-items:center; gap:10px; min-width:0;
  background:var(--bg-panel-2);
  border:1px solid var(--steel-line);
  border-radius:3px;
  padding:7px 12px 7px 10px;
  position:relative;
}
#topbar .tag::before{
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--bg-deep); border:1px solid var(--steel-line);
  flex:none;
}
.tag-num{
  font-family:var(--font-mono); color:var(--yellow); font-size:12px; flex:none;
}
.tag-title{
  font-family:var(--font-display); font-size:14px; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-transform:uppercase;
}

/* ---------- PROGRESS GAUGE ---------- */
#gauge{
  height:3px; background:var(--steel-line); position:relative; z-index:20;
}
#gauge-fill{
  height:100%; background:var(--yellow); width:0%;
  transition:width .35s ease;
}

/* ---------- READER (swipeable) ---------- */
#track-wrap{flex:1; position:relative; overflow:hidden;}
#track{
  position:absolute; inset:0; display:flex; height:100%;
  will-change:transform;
}
.page{
  flex:none; width:100%; height:100%; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:20px 20px calc(90px + var(--safe-bottom));
}
.page-inner{max-width:640px; margin:0 auto;}

.chapter-kicker{
  font-family:var(--font-mono); color:var(--yellow);
  font-size:12px; letter-spacing:.15em; margin-bottom:6px;
}
.chapter-heading{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  font-size:26px; line-height:1.15; margin:0 0 18px; letter-spacing:.01em;
  border-bottom:2px solid var(--steel-line); padding-bottom:14px;
}
.page.is-cover-page .chapter-heading{border-bottom:none;}

.page h3{
  font-family:var(--font-display); text-transform:uppercase; font-weight:600;
  font-size:16px; letter-spacing:.03em; color:var(--yellow);
  margin:26px 0 10px; padding-top:14px; border-top:1px dashed var(--steel-line);
}
.page h3:first-of-type{border-top:none; padding-top:0;}
.page p{font-size:15.5px; line-height:1.65; color:var(--text); margin:0 0 14px;}
.page ul, .page ol{margin:0 0 16px; padding-left:20px;}
.page li{font-size:15.5px; line-height:1.6; margin-bottom:8px; color:var(--text);}
.page strong{color:#fff; font-weight:600;}
.page em{color:var(--text-muted); font-style:italic;}

/* formulas get a mono readout treatment */
.formula{
  font-family:var(--font-mono); background:var(--bg-panel);
  border:1px solid var(--steel-line); border-left:3px solid var(--yellow);
  padding:12px 14px; border-radius:3px; font-size:14px; color:var(--yellow);
  margin:0 0 16px; overflow-x:auto; white-space:pre;
}

.page img{
  width:100%; height:auto; display:block; border-radius:4px;
  margin:14px 0 18px; border:1px solid var(--steel-line);
  background:#0d0f11;
}

/* danger callout style for lines that read like warnings */
.callout{
  background:rgba(214,66,43,0.1); border:1px solid rgba(214,66,43,0.4);
  border-left:3px solid var(--red); padding:12px 14px; border-radius:3px;
  margin:0 0 16px; font-size:14.5px; line-height:1.55;
}

/* nav hint arrows */
.edge-tap{
  position:absolute; top:0; bottom:0; width:15%; z-index:5;
}
.edge-tap.left{left:0;} .edge-tap.right{right:0;}

/* ---------- BOTTOM BAR ---------- */
#bottombar{
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 16px calc(12px + var(--safe-bottom));
  background:linear-gradient(180deg, rgba(20,23,26,0) 0%, var(--bg-deep) 40%);
  pointer-events:none;
}
#bottombar > *{pointer-events:auto;}
.nav-btn{
  width:44px; height:44px; border-radius:50%;
  background:var(--bg-panel); border:1px solid var(--steel-line); color:var(--text);
  display:flex; align-items:center; justify-content:center;
}
.nav-btn:disabled{opacity:.3;}
.nav-btn:active:not(:disabled){background:var(--steel-line);}
#page-count{
  font-family:var(--font-mono); font-size:12px; color:var(--text-muted);
  background:var(--bg-panel); border:1px solid var(--steel-line);
  padding:8px 14px; border-radius:20px;
}
#page-count b{color:var(--yellow); font-weight:500;}

/* ---------- TOC DRAWER ---------- */
#toc-overlay{
  position:fixed; inset:0; z-index:40; background:rgba(0,0,0,0.55);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
#toc-overlay.open{opacity:1; visibility:visible;}
#toc{
  position:fixed; top:0; bottom:0; left:0; width:min(320px, 84vw); z-index:41;
  background:var(--bg-panel); border-right:1px solid var(--steel-line);
  transform:translateX(-100%); transition:transform .3s ease;
  display:flex; flex-direction:column;
}
#toc.open{transform:translateX(0);}
#toc-head{
  padding:calc(18px + var(--safe-top)) 18px 14px;
  border-bottom:1px solid var(--steel-line);
}
#toc-head .eyebrow{font-family:var(--font-mono); font-size:11px; color:var(--yellow); letter-spacing:.15em;}
#toc-head h2{font-family:var(--font-display); text-transform:uppercase; margin:6px 0 0; font-size:20px;}
#toc-list{flex:1; overflow-y:auto; padding:8px 0;}
.toc-item{
  display:flex; align-items:center; gap:12px; width:100%;
  background:none; border:none; color:var(--text); text-align:left;
  padding:11px 18px; font-size:14px; border-bottom:1px solid rgba(255,255,255,0.04);
}
.toc-item:active{background:var(--bg-panel-2);}
.toc-item.active{background:rgba(255,199,44,0.08); border-left:3px solid var(--yellow);}
.toc-num{font-family:var(--font-mono); color:var(--yellow); font-size:12px; width:22px; flex:none;}
.toc-title{font-family:var(--font-body); line-height:1.3;}

/* ---------- IMAGE LIGHTBOX ---------- */
#lightbox{
  position:fixed; inset:0; z-index:60; background:rgba(10,11,12,0.94);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
#lightbox.open{opacity:1; visibility:visible;}
#lightbox img{max-width:100%; max-height:100%; border-radius:4px;}

::-webkit-scrollbar{width:0; height:0;}


/* ===== Retorno a IzApp ===== */
#volver-izapp{
  display:flex; align-items:center; gap:7px;
  background:var(--bg-panel-2); border:1px solid var(--steel-line);
  color:var(--text); border-radius:9px; padding:7px 11px;
  font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:none;
  white-space:nowrap; flex-shrink:0;
}
#volver-izapp:active{ background:var(--steel-line); }
#volver-izapp img{ width:17px; height:17px; border-radius:4px; }

/* Aviso cuando una imagen no puede cargarse */
.img-error{
  background:var(--bg-panel); border:1px dashed var(--red);
  color:var(--red); font-size:12.5px; padding:14px; border-radius:4px;
  margin:14px 0 18px; text-align:center; font-family:var(--font-mono);
  word-break:break-all;
}