:root{
  --bg1:#ffffff;      /* azul oscuro */
  --bg2:#f2f7fd;      /* casi negro */
  --accent:#030335;   /* verde agua */
  --text:#030335;     /* texto principal */
  --muted:#030335ba;    /* texto secundario */
  --card:rgba(255,255,255,0.04);
  --stroke:rgba(0,191,166,0.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color:var(--text);
  background: radial-gradient(circle at 60% 40%, var(--bg1), var(--bg2));
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; background:linear-gradient(180deg,  #ffffff, #f2f7fd);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--stroke);
}
.brand{display:flex; gap:12px; align-items:center}
.logo{width:36px; height:36px; opacity:.85}
h1{font-size:1.1rem; margin:0; color:var(--text)}
.subtitle{margin:2px 0 0; font-size:.8rem; color:var(--muted)}
.btn-link{
  color:var(--accent); text-decoration:none; border:1px solid var(--stroke);
  padding:8px 10px; border-radius:10px;
}
.btn-link:hover{background:var(--card)}

/* Layout */
.container{
  display:grid; grid-template-columns: 280px 1fr;
  gap:24px; max-width:1200px; margin:32px auto; padding:0 20px;
}
@media (max-width: 960px){
  .container{grid-template-columns: 1fr}
}

/* TOC */
.toc{
  position:sticky; top:88px; align-self:start;
  padding:16px; border:1px solid var(--stroke); border-radius:16px; background:var(--card);
}
.toc h2{margin:0 0 10px; font-size:1rem}
.toc ol{margin:0; padding-left:18px}
.toc a{color:var(--muted); text-decoration:none}
.toc a:hover{color:var(--accent)}

/* Doc */
.doc{
  padding:20px 22px; border:1px solid var(--stroke); border-radius:16px; background:var(--card);
}
.doc h2{margin-top:0; font-size:1.4rem; color:var(--accent)}
.doc h3{margin-top:26px; font-size:1.1rem; color:var(--text)}
.doc p, .doc li{line-height:1.65}
.doc ul{margin:10px 0 0 18px}
.meta{
  margin-top:28px; padding-top:16px; border-top:1px dashed var(--stroke);
  color:var(--muted)
}

/* Back to top */
.to-top{
  position:fixed; right:18px; bottom:70px; z-index:9;
  width:42px; height:42px; border-radius:12px; border:1px solid var(--stroke);
  background:var(--card); color:var(--accent); font-size:18px; cursor:pointer;
  opacity:0; transform:translateY(12px); transition:.25s ease;
}
.to-top.show{opacity:1; transform:none}
.to-top:hover{background:rgba(0,191,166,0.08)}

/* Footer */
.site-footer{
  position:sticky; bottom:0; z-index:8;
  display:flex; justify-content:center;
  padding:12px 10px; background:linear-gradient(0deg,  #ffffff, #f2f7fd);
  border-top:1px solid var(--stroke); color:var(--muted)
}
.site-footer p{margin:0}