:root{
  --bg:#f6f7fb;
  --card:#fff;
  --line:#e6e7ee;
  --text:#111;
  --muted:#555;
  --brand:#2f6fed;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius:14px;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}

.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;
  padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line);
}

.iconbtn{
  display:none;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}

.brand{font-weight:800;letter-spacing:.2px}

.topnav{display:flex;gap:6px;align-items:center}
.dropdown{position:relative}
.dropbtn{
  display:flex;align-items:center;gap:6px;
  padding:10px 10px;border-radius:10px;
  border:1px solid transparent;background:transparent;
  cursor:pointer;color:var(--text);font-weight:600;
}
.dropbtn:hover{background:#f2f3ff}
.caret{font-size:12px;color:#666}

.dropmenu{
  position:absolute;top:calc(100% + 8px);left:0;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);
  min-width:260px;
  padding:6px;
  display:none;
}
.dropdown.open .dropmenu{display:block}
.dropmenu a{
  display:block;padding:10px;border-radius:10px;text-decoration:none;color:var(--text)
}
.dropmenu a:hover{background:#f2f3ff}

.search{position:relative;flex:1;max-width:520px;margin-left:auto}
.search input{
  width:100%;padding:10px 12px;border:1px solid #d8d9e2;border-radius:10px;outline:none
}
.search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,111,237,.12)}

.results{
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);
  max-height:360px;overflow:auto;padding:6px;
}
.result-item{padding:10px;border-radius:10px;cursor:pointer}
.result-item:hover{background:#f2f3ff}
.result-title{font-weight:800;margin-bottom:4px}
.result-snippet{font-size:13px;color:var(--muted);line-height:1.35}

.layout{
  display:grid;grid-template-columns:320px 1fr;gap:16px;
  padding:16px;max-width:1300px;margin:0 auto;
}

.sidebar{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;
  height:calc(100vh - 90px);
  position:sticky;top:68px;overflow:auto;
}
.sidebar-title{font-weight:800;margin:6px 6px 10px;color:#333}

.sidemenu .sec{margin:10px 0}
.sidemenu .sec-title{
  font-weight:800;padding:8px;border-radius:10px;background:#f6f7ff;margin-bottom:6px
}
.sidemenu a{
  display:block;padding:8px;border-radius:10px;text-decoration:none;color:var(--text)
}
.sidemenu a:hover{background:#f2f3ff}
.sidemenu a.active{background:var(--brand);color:#fff}

.content{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;min-height:70vh;
}
.crumbs{font-size:13px;color:#666;margin-bottom:10px}
.crumbs span{color:#999}
.article h1{margin-top:0}
.article p{line-height:1.7}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .iconbtn{display:inline-block}
  .sidebar{
    position:fixed;top:56px;left:12px;right:12px;bottom:12px;
    height:auto;transform:translateY(-120%);transition:.2s;
    box-shadow:var(--shadow);
  }
  .sidebar.open{transform:translateY(0)}
  .topnav{display:none} /* en móvil, dejamos sidebar */
  .search{max-width:none}
}

.lead { font-size: 1.05rem; color: #333; line-height: 1.7; }
table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; }
th, td { border: 1px solid #e6e7ee; padding: 10px; text-align: left; vertical-align: top; }
th { background: #f6f7ff; }
hr { border: 0; border-top: 1px solid #e6e7ee; margin: 18px 0; }


/* ============================
   PRO DOCS MINI UI (append)
   ============================ */

/* Tipografía y ritmo dentro del artículo */
.article h1, .article h2, .article h3, .article h4 {
  line-height: 1.25;
  letter-spacing: -0.2px;
}
.article h2 { margin-top: 22px; padding-top: 6px; }
.article h3 { margin-top: 16px; }
.article ul, .article ol { padding-left: 1.2rem; }
.article li { margin: 6px 0; }
.article a { color: var(--brand); text-decoration: none; }
.article a:hover { text-decoration: underline; }
.article code {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f7ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}

/* PRE = caja copiable estilo Notion */
.article pre {
  position: relative;
  margin: 12px 0 16px;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8f9ff;
  overflow: auto;
  white-space: pre-wrap;      /* mantiene saltos y ajusta */
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Opcional: si luego agregamos un botón Copiar dentro del <pre> */
.article pre .copybtn {
  position: absolute;
  top: 10px; right: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
}
.article pre .copybtn:hover { background: #f2f3ff; }

/* Callouts (por si querés destacaditos tipo wiki) */
.callout {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0 16px;
  background: #fff;
}
.callout .title { font-weight: 800; margin-bottom: 6px; }
.callout.info { border-left: 5px solid var(--brand); background: #f2f6ff; }
.callout.tip { border-left: 5px solid #22c55e; background: #f2fff6; }
.callout.warn { border-left: 5px solid #f59e0b; background: #fff9ec; }

/* Tabla responsive (scroll horizontal en móvil) */
.article table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}
.article thead th { position: sticky; top: 0; } /* útil si la tabla es larga */

/* Pequeño “chip” visual para separar secciones si querés usarlo */
.chip {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f6f7ff;
  font-size: 12px;
  color: #333;
}

/* Bloque de cita bonito */
.article blockquote {
  margin: 12px 0 16px;
  padding: 10px 14px;
  border-left: 5px solid var(--line);
  border-radius: 10px;
  background: #fafbff;
  color: #333;
}