:root{
  --bg:#0b1017;
  --soft:#121a28;
  --stroke:#1a2333;
  --text:#e9f0fb;
  --muted:#9bb0c9;
  --brand:#5da9ff;
  --brand-2:#8b7dff;
  --ok:#3ddc97;
  --header-h:64px;
}

/* Scroll suave y compensación de anclas por header sticky */
html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); }

body{
  margin:0;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(93,169,255,.08), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(139,125,255,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Header */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(16,22,34,.75), rgba(14,20,32,.75));
  backdrop-filter: blur(6px);
  position:sticky; top:0; z-index:10; height:var(--header-h);
}
.brand{ display:flex; align-items:center; gap:.75rem; color:var(--text); text-decoration:none; }
.nav-logo{ height:32px; }
.back{
  display:inline-flex; align-items:center; gap:.6rem; padding:9px 12px; border-radius:10px;
  color:var(--text); text-decoration:none; background:var(--soft); border:1px solid var(--stroke);
}
.back:hover{ background:#151e2f; }

/* Layout con sidebar izquierda */
.wrap{ max-width:1100px; margin:28px auto; padding:0 16px; }
.layout{
  display:grid;
  grid-template-columns: 1fr;           /* móvil: pila */
  grid-template-areas:
    "toc"
    "content";
  gap:22px;
}
@media (min-width: 980px){
  .layout{
    grid-template-columns: 300px 1fr;   /* desktop: sidebar izquierda */
    grid-template-areas: "toc content";
    align-items:start;
  }
}
.toc{ grid-area: toc; }
.card{ grid-area: content; }

/* Índice (sidebar izquierda) */
.toc{
  position:sticky;
  top:calc(var(--header-h) + 16px);
  background: linear-gradient(180deg, rgba(16,22,34,.7), rgba(12,18,28,.7));
  border:1px solid var(--stroke);
  border-radius:14px; padding:16px;
}
.toc h3{ margin:0 0 10px; font-size:1rem; color:#cfe0ff; }
.toc a{
  display:block; padding:8px 10px; border-radius:10px;
  color:var(--muted); text-decoration:none;
}
.toc a:hover{ background:#131b2a; color:#fff; }
.toc a.active{ background:#152136; color:#eaf1ff; border:1px solid #22314b; }

/* Tarjeta de contenido (derecha) */
.card{
  border:1px solid var(--stroke);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(18,23,36,.7), rgba(14,20,33,.78));
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  overflow:hidden;
}
.card .head{
  padding:24px 22px;
  background: linear-gradient(90deg, rgba(93,169,255,.12), rgba(139,125,255,.10));
  border-bottom:1px solid var(--stroke);
}
.title{
  margin:6px 0 0;
  font-weight:800;
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing:.2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stamp{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.86rem; color:#cfe0ff; opacity:.9;
}
.stamp .dot{ width:8px; height:8px; border-radius:999px; background:var(--ok); display:inline-block; }

.content{ padding:18px 22px 24px; }
.lead{ color:#cfe0ff; margin:0 0 10px; }
.muted{ color:var(--muted); }

/* Bloques */
.block{ border-top:1px dashed #20304a; padding:18px 0 8px; }
.block:first-child{ border-top:0; }
h2{ margin:0 0 10px; color:#e6eeff; font-size:1.25rem; letter-spacing:.2px; }
p, li{ line-height:1.7; color:var(--muted); }
ul{ margin:8px 0 0 18px; }

/* Llamados */
.callout{
  margin:14px 0 6px; padding:14px 14px;
  background:#0f1727; border:1px solid var(--stroke); border-radius:12px;
}
.callout.ok{ border-color: rgba(61,220,151,.35); }
.callout.warn{ border-color: rgba(255,209,102,.35); }

/* Botones/footer */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:10px 14px; border-radius:10px;
  color:#0b111a; background:linear-gradient(90deg, var(--brand), var(--brand-2)); text-decoration:none; font-weight:700;
  border:0;
}
.btn:hover{ filter:brightness(1.06); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:.6rem; padding:9px 12px; border-radius:10px;
  background:var(--soft); color:var(--text); text-decoration:none; border:1px solid var(--stroke);
}
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }

.footer{
  text-align:center; color:#95a6be; padding:36px 0 26px; font-size:.92rem;
  border-top:1px solid var(--stroke); margin-top:28px;
}

/* Accesibilidad */
a:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:8px;
}