/* ============================================================
   Libro técnico: Angular · NestJS · MikroORM
   Hoja de estilos común a todos los capítulos
   ============================================================ */

:root{
  --bg:#0b1020;
  --bg-soft:#121a33;
  --card:#151d38;
  --card-2:#1b2547;
  --border:#26325c;
  --txt:#e8ecf8;
  --txt-dim:#a4b0d4;
  --accent:#5b8cff;
  --accent-2:#00d3a7;
  --ng:#e2374a;
  --nest:#ea2865;
  --orm:#ffb020;
  --ok:#2ecc8f;
  --warn:#ffb020;
  --danger:#ff5c7a;
  --code-bg:#0a0f1f;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --measure:78ch;
}
html[data-theme="light"]{
  --bg:#f5f7fc;
  --bg-soft:#ffffff;
  --card:#ffffff;
  --card-2:#eef2fb;
  --border:#dbe1f0;
  --txt:#141a2e;
  --txt-dim:#57628a;
  --code-bg:#0e1428;
  --shadow:0 8px 22px rgba(20,26,46,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  font-size:16px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,pre,kbd{font-family:"JetBrains Mono",Consolas,"Fira Code","Liberation Mono",monospace}
p code,li code,td code,summary code,h3 code,h4 code{
  background:var(--card-2);border:1px solid var(--border);
  padding:1px 6px;border-radius:6px;font-size:.87em;color:var(--txt);white-space:nowrap;
}
strong{color:var(--txt)}
hr{border:0;border-top:1px solid var(--border);margin:34px 0}

/* ---------------- Layout ---------------- */
.layout{display:flex;min-height:100vh}
aside.sidebar{
  width:300px;flex:0 0 300px;background:var(--bg-soft);
  border-right:1px solid var(--border);
  position:sticky;top:0;height:100vh;overflow-y:auto;padding:18px 14px 60px;
}
main{flex:1;min-width:0;padding:26px 44px 100px;max-width:1180px;margin:0 auto}
main > *{max-width:var(--measure)}
main > .wide,main > pre,main > table,main > .grid,main > .cmp-wrap{max-width:none}

/* ---------------- Sidebar ---------------- */
.brand{display:flex;gap:11px;align-items:center;margin-bottom:4px}
.brand-logo{
  width:40px;height:40px;border-radius:11px;flex:0 0 40px;
  background:linear-gradient(135deg,var(--ng),var(--nest) 55%,var(--orm));
  display:grid;place-items:center;font-weight:800;color:#fff;font-size:12px;letter-spacing:.5px
}
.brand h1{font-size:15px;margin:0;line-height:1.25}
.brand small{color:var(--txt-dim);font-size:11.5px}
.sidebar input.search{
  width:100%;margin:14px 0 6px;padding:9px 11px;border-radius:10px;
  border:1px solid var(--border);background:var(--card);color:var(--txt);font-size:13px
}
.sidebar input.search:focus{outline:2px solid var(--accent);outline-offset:1px}
.sidebar nav ul{list-style:none;padding:0;margin:0}
.sidebar nav a{
  display:block;padding:6px 10px;border-radius:9px;color:var(--txt-dim);font-size:13.2px;line-height:1.45
}
.sidebar nav a:hover{background:var(--card);color:var(--txt);text-decoration:none}
.sidebar nav a.active{background:var(--card-2);color:var(--txt);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.sidebar nav a.lvl3{padding-left:24px;font-size:12.4px;opacity:.88}
.sidebar .grp{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--txt-dim);opacity:.6;margin:16px 0 6px 10px
}
.sidebar .backlink{
  display:block;margin:10px 0 4px;padding:8px 10px;border-radius:9px;
  background:var(--card);border:1px solid var(--border);font-size:12.6px;text-align:center
}

/* ---------------- Topbar ---------------- */
.topbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--border);max-width:none
}
.btn{
  border:1px solid var(--border);background:var(--card);color:var(--txt);
  padding:7px 13px;border-radius:9px;font-size:12.8px;cursor:pointer;transition:.15s;
  display:inline-block;line-height:1.4
}
.btn:hover{background:var(--card-2);transform:translateY(-1px);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent}
.readbar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0;z-index:99}

/* ---------------- Cabecera de capítulo ---------------- */
.chapter-head{
  background:linear-gradient(135deg,rgba(91,140,255,.15),rgba(0,211,167,.09));
  border:1px solid var(--border);border-radius:18px;padding:26px 30px;margin-bottom:26px;max-width:none
}
.chapter-head .kicker{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);font-weight:700
}
.chapter-head h1{font-size:31px;margin:6px 0 10px;line-height:1.2}
.chapter-head p{color:var(--txt-dim);margin:0;font-size:15px;max-width:80ch}
.chapter-head .meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;font-size:12.5px;color:var(--txt-dim)}

/* ---------------- Títulos ---------------- */
h2{
  font-size:25px;margin:52px 0 6px;padding-top:6px;line-height:1.28;scroll-margin-top:16px;
  border-top:1px solid var(--border);padding-top:26px
}
h2:first-of-type{border-top:0;padding-top:0;margin-top:26px}
h3{font-size:19.5px;margin:32px 0 8px;line-height:1.35;scroll-margin-top:16px}
h4{font-size:16px;margin:24px 0 6px;color:var(--txt)}
h5{font-size:13.5px;margin:18px 0 6px;color:var(--txt-dim);text-transform:uppercase;letter-spacing:.07em}
.anchor{opacity:0;margin-left:8px;font-size:.7em;color:var(--txt-dim);text-decoration:none}
h2:hover .anchor,h3:hover .anchor{opacity:1}
.lead{font-size:16.6px;color:var(--txt-dim)}

/* ---------------- Bloques ---------------- */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 22px;margin:18px 0;box-shadow:var(--shadow);max-width:none
}
.card h3,.card h4{margin-top:0}
.grid{display:grid;gap:16px;margin:18px 0;max-width:none}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.callout{
  border-left:4px solid var(--accent);background:var(--card-2);
  padding:13px 17px;border-radius:0 12px 12px 0;margin:18px 0;font-size:14.6px
}
.callout > b:first-child,.callout > .t{display:block;margin-bottom:4px;color:var(--txt)}
.callout.warn{border-color:var(--warn)}
.callout.ok{border-color:var(--ok)}
.callout.danger{border-color:var(--danger)}
.callout.info{border-color:var(--accent)}
.callout.analogy{border-color:#b07cff}
.callout.history{border-color:#7c9cff}
.callout p:last-child{margin-bottom:0}

/* ---------------- Código ---------------- */
.codeblock{position:relative;margin:16px 0;max-width:none}
.codeblock .code-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--card-2);border:1px solid var(--border);border-bottom:0;
  border-radius:11px 11px 0 0;padding:6px 13px;font-size:11.6px;color:var(--txt-dim)
}
.codeblock .code-head .fname{font-family:Consolas,monospace;letter-spacing:.02em}
.codeblock .code-head .tag{
  padding:1px 8px;border-radius:99px;border:1px solid var(--border);font-weight:700;font-size:10.5px
}
.codeblock .code-head .tag.bad{color:#ff8ba0;border-color:rgba(255,92,122,.45)}
.codeblock .code-head .tag.good{color:#68e0b4;border-color:rgba(46,204,143,.45)}
.codeblock .copy{
  border:1px solid var(--border);background:var(--card);color:var(--txt-dim);
  border-radius:7px;padding:2px 9px;font-size:11px;cursor:pointer
}
.codeblock .copy:hover{color:var(--txt)}
.codeblock .code-head + pre{border-radius:0 0 11px 11px;margin-top:0}
pre{
  background:var(--code-bg);border:1px solid var(--border);border-radius:11px;
  padding:15px 17px;overflow-x:auto;font-size:13.1px;line-height:1.62;margin:16px 0;max-width:none
}
pre code{color:#d7e0f7;white-space:pre;display:block}
pre.diagram code{color:#9fb4e8;line-height:1.35}
.codeblock.bad pre{border-color:rgba(255,92,122,.4);box-shadow:inset 3px 0 0 var(--danger)}
.codeblock.good pre{border-color:rgba(46,204,143,.4);box-shadow:inset 3px 0 0 var(--ok)}

/* tokens del resaltador */
.tok-com{color:#6b7ba8;font-style:italic}
.tok-str{color:#c3e88d}
.tok-kw{color:#c792ea}
.tok-num{color:#f78c6c}
.tok-dec{color:#ffcb6b}
.tok-fn{color:#82aaff}
.tok-ty{color:#7fdbca}
.tok-tag{color:#f07178}
.tok-attr{color:#ffcb6b}
.tok-op{color:#89ddff}

/* ---------------- Tablas ---------------- */
.cmp-wrap{overflow-x:auto;margin:18px 0;max-width:none}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
th,td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--card-2);font-size:12.4px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-dim)}
tbody tr:hover{background:var(--card)}

/* ---------------- Listas ---------------- */
ul,ol{padding-left:24px}
li{margin:5px 0}
ul.clean{list-style:none;padding-left:0}
ul.clean li{padding-left:22px;position:relative}
ul.clean li::before{content:"▹";position:absolute;left:2px;color:var(--accent)}
ul.dos li::before{content:"✔";color:var(--ok)}
ul.donts li::before{content:"✘";color:var(--danger)}
ul.dos,ul.donts{list-style:none;padding-left:0}
ul.dos li,ul.donts li{padding-left:24px;position:relative}
ul.donts li::before{position:absolute;left:2px}
ul.dos li::before{position:absolute;left:2px}

/* ---------------- Chips ---------------- */
.chip{
  display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700;
  border:1px solid var(--border);background:var(--card-2);color:var(--txt-dim);margin:0 5px 4px 0
}
.chip.ng{border-color:rgba(226,55,74,.5);color:#ff8494}
.chip.nest{border-color:rgba(234,40,101,.5);color:#ff7ea6}
.chip.orm{border-color:rgba(255,176,32,.5);color:#ffc65e}
.chip.new{border-color:rgba(46,204,143,.5);color:#5ce0ae}
.chip.core{border-color:rgba(91,140,255,.5);color:#8fb0ff}
.chip.adv{border-color:rgba(176,124,255,.5);color:#c9a6ff}

/* ---------------- FAQ / ejercicios ---------------- */
details.qa,details.ex{
  border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin:11px 0;background:var(--card);max-width:none
}
details.qa summary,details.ex summary{cursor:pointer;font-weight:600;font-size:14.6px;list-style:none}
details summary::-webkit-details-marker{display:none}
details.qa summary::before,details.ex summary::before{content:"▸ ";color:var(--accent)}
details.qa[open] summary::before,details.ex[open] summary::before{content:"▾ "}
details.qa .ans,details.ex .ans{
  margin-top:11px;padding-top:11px;border-top:1px solid var(--border);font-size:14.4px;color:var(--txt-dim)
}
details.qa .ans strong,details.ex .ans strong{color:var(--txt)}
.exercise{
  border:1px dashed var(--border);border-radius:12px;padding:15px 18px;margin:14px 0;background:var(--card-2);max-width:none
}
.exercise .lvl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}

/* ---------------- Navegación entre capítulos ---------------- */
.chapter-nav{
  display:flex;justify-content:space-between;gap:14px;margin:56px 0 0;
  padding-top:22px;border-top:1px solid var(--border);flex-wrap:wrap;max-width:none
}
.chapter-nav a{
  flex:1 1 260px;background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:13px 17px;font-size:13.6px
}
.chapter-nav a:hover{background:var(--card-2);text-decoration:none}
.chapter-nav small{display:block;color:var(--txt-dim);font-size:11.4px;text-transform:uppercase;letter-spacing:.09em}

/* ---------------- Índice del libro (portada) ---------------- */
.toc-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:none}
.toc-card{
  background:var(--card);border:1px solid var(--border);border-radius:13px;padding:16px 18px;
  display:block;color:var(--txt);transition:.15s
}
.toc-card:hover{transform:translateY(-2px);border-color:var(--accent);text-decoration:none;box-shadow:var(--shadow)}
.toc-card .num{font-size:11px;letter-spacing:.14em;color:var(--accent-2);font-weight:700}
.toc-card h3{margin:4px 0 6px;font-size:16.5px}
.toc-card p{margin:0;font-size:13.2px;color:var(--txt-dim)}
.toc-card .topics{margin-top:9px;font-size:11.4px;color:var(--txt-dim);opacity:.85}

/* ---------------- Checklist ---------------- */
ul.topics{list-style:none;padding:0;margin:8px 0}
ul.topics li{display:flex;gap:10px;align-items:flex-start;padding:6px 8px;border-radius:8px;font-size:14.2px}
ul.topics li:hover{background:var(--card-2)}
ul.topics input[type=checkbox]{margin-top:6px;width:16px;height:16px;accent-color:var(--accent-2);cursor:pointer;flex:0 0 auto}
ul.topics label{cursor:pointer}
ul.topics li.done label{opacity:.5;text-decoration:line-through}
.bar{height:9px;background:var(--card-2);border-radius:99px;overflow:hidden;border:1px solid var(--border)}
.bar > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s}

.hide{display:none !important}
.muted{color:var(--txt-dim)}
.center{text-align:center}
.small{font-size:12.8px}
.menu-toggle{display:none}
main > .wide{max-width:none}

/* ---------------- Glosario / índice alfabético ---------------- */
.alpha-nav{font-size:14px;line-height:1.9}
.alpha-nav a{margin:0 2px;font-weight:600}
.glossary{margin:0 0 28px}
.glossary-entry{
  display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:10px 18px;
  padding:12px 0;border-bottom:1px solid var(--border);align-items:start
}
.glossary-entry dt{margin:0;font-weight:700;font-size:14.6px}
.glossary-entry dt a{color:var(--txt)}
.glossary-entry dd{margin:0;font-size:14.2px;color:var(--txt-dim)}
.glossary-link{display:inline-block;margin-left:6px;font-size:12.4px;white-space:nowrap}
@media(max-width:700px){
  .glossary-entry{grid-template-columns:1fr}
}

/* ---------------- Mapa de capítulos ---------------- */
.dep-card .num{letter-spacing:.08em}

/* ---------------- Flashcards ---------------- */
.flash-toolbar{display:flex;flex-direction:column;gap:12px}
.flash-stats{font-size:13.5px;font-variant-numeric:tabular-nums}
.flash-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.flash-stage{margin:22px 0 10px}
.flash-card{
  display:block;width:100%;max-width:720px;margin:0 auto;min-height:260px;
  background:var(--card);border:1px solid var(--border);border-radius:18px;
  padding:28px 30px;text-align:left;cursor:pointer;color:var(--txt);
  box-shadow:var(--shadow);transition:border-color .15s, transform .15s;position:relative
}
.flash-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.flash-card.is-known{border-color:rgba(46,204,143,.55)}
.flash-face p{margin:10px 0 0;font-size:18px;line-height:1.45}
.flash-label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent-2)
}
.flash-card .flash-a{display:none}
.flash-card.flipped .flash-q{display:none}
.flash-card.flipped .flash-a{display:block}
.flash-card.flipped{background:linear-gradient(135deg,rgba(91,140,255,.12),rgba(0,211,167,.08))}

/* ---------------- Modo examen (checklist) ---------------- */
body.exam-mode main > section:not(#examen){display:none !important}
body.exam-mode details.qa .ans{display:none !important}
body.exam-mode details.qa[open] summary::before{content:"▸ "}
body.exam-mode #expandBtn{display:none}
.exam-bar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--card-2);border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;margin:14px 0
}
.exam-bar .timer{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:18px;color:var(--accent-2);min-width:4.5ch
}
.exam-bar.urgent .timer{color:var(--danger)}
.mcq{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:12px 0;background:var(--card)}
.mcq fieldset{border:0;margin:8px 0 0;padding:0}
.mcq label{display:block;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:14px}
.mcq label:hover{background:var(--card-2)}
.mcq input{margin-right:8px;accent-color:var(--accent)}
.mcq.correct{border-color:rgba(46,204,143,.55)}
.mcq.wrong{border-color:rgba(255,92,122,.55)}
.exam-score{
  font-size:20px;font-weight:700;margin:16px 0;padding:16px 18px;border-radius:12px;
  background:var(--card-2);border:1px solid var(--border)
}

@media(max-width:960px){
  aside.sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:.25s}
  aside.sidebar.open{transform:translateX(0)}
  main{padding:18px 16px 80px}
  .menu-toggle{display:inline-block}
  .chapter-head{padding:20px}
  .chapter-head h1{font-size:24px}
}
@media print{
  aside.sidebar,.topbar,.chapter-nav,.copy,.readbar{display:none !important}
  main{padding:0;max-width:100%}
  body{background:#fff;color:#000;font-size:11pt}
  pre{background:#f4f4f8;color:#111;border:1px solid #ccc}
  pre code{color:#111}
  details{open:true}
  details .ans{display:block !important}
  h2{page-break-after:avoid}
  pre,table,.card{page-break-inside:avoid}
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

.exam-form .exam-q{margin:0 0 16px;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.exam-form .exam-q label{display:block;margin:6px 0;font-size:14px;cursor:pointer}
.exam-form .exam-q.ok{border-color:var(--ok)}
.exam-form .exam-q.bad{border-color:var(--danger)}