/* Docs styles (tu estética + organización estilo Notion)
   Se apoya en /styles.css */

.docsShell{ padding: 110px 0 70px; }
.docsLayout{ display:grid; grid-template-columns: 280px minmax(0,1fr); gap: 20px; align-items:start; }

.docsSidebar{ position: sticky; top: 90px; align-self:start; }

.docsPanel{ background: rgba(20,17,34,0.55); border:1px solid rgba(255,255,255,0.08); box-shadow: 0 14px 36px rgba(0,0,0,0.35); backdrop-filter: blur(12px); border-radius: 18px; padding: 14px; }

.docSearch{ display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.docInput{ width:100%; padding: 12px 12px; border-radius: 14px; border:1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.92); outline:none; }
.docInput::placeholder{ color: rgba(255,255,255,0.55); }

.iconBtn{ width:42px; height:42px; border-radius: 14px; border:1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); display:grid; place-items:center; cursor:pointer; }
.iconBtn:hover{ background: rgba(255,255,255,0.10); }

.muted{ color: rgba(255,255,255,0.62); font-size: 14px; }

/* Sidebar nav */
.docsNav{ display:flex; flex-direction:column; gap:8px; }
.navLink{ padding: 10px 10px; border-radius: 12px; color: rgba(255,255,255,0.78); text-decoration:none; border:1px solid transparent; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.navLink:hover{ background: rgba(255,255,255,0.06); }
.navLink.active{ background: rgba(124,92,255,0.18); border-color: rgba(124,92,255,0.35); color:#fff; }

.navGroup{ border-radius: 14px; border:1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); overflow:hidden; }
.navGroup > summary{ list-style:none; cursor:pointer; padding: 10px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; color: rgba(255,255,255,0.85); user-select:none; }
.navGroup > summary::-webkit-details-marker{ display:none; }

.navGroup .chev{ width: 22px; height: 22px; border-radius: 10px; border:1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); display:grid; place-items:center; }
.navGroup .chev::before{ content:"›"; display:block; transform: rotate(0deg); transition: transform .16s ease; opacity:.9; }
.navGroup[open] .chev::before{ transform: rotate(90deg); }

.navGroupLinks{ display:flex; flex-direction:column; gap:6px; padding: 4px 10px 10px; }
.navGroupLinks .navLink{ padding: 9px 10px; }

/* Content */
.docsContent{ min-width:0; }
.docHero{ margin-bottom: 18px; }
.docHero h1{ margin:0 0 8px; font-size: 44px; letter-spacing:-0.02em; }
.docHero p{ margin:0; color: rgba(255,255,255,0.72); }

.docSection{ margin-top: 28px; }
.docSection h2{ margin: 0 0 10px; font-size: 28px; }
.docSection h3{ margin: 22px 0 8px; font-size: 20px; }
.docSection p{ color: rgba(255,255,255,0.78); line-height:1.6; }

.callout{ padding: 14px 14px; border-radius: 16px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); }
.callout strong{ color:#fff; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin: 12px 0 8px; }
.chip{ font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09); color: rgba(255,255,255,0.8); }

.tableWrap{ overflow:auto; border-radius: 16px; border:1px solid rgba(255,255,255,0.09); background: rgba(0,0,0,0.15); }
.docTable{ width:100%; border-collapse: collapse; min-width: 680px; }
.docTable th, .docTable td{ padding: 10px 12px; text-align:left; border-bottom: 1px solid rgba(255,255,255,0.07); vertical-align: top; }
.docTable th{ font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.docTable td{ color: rgba(255,255,255,0.82); font-size: 14px; }
.docTable code{ background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 8px; }

.codeLine{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 10px 12px; border-radius: 14px; border:1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.05); margin: 10px 0; }
.codeLine code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; color: rgba(255,255,255,0.92); }

.copyBtn{ padding: 9px 12px; border-radius: 12px; border:1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.08); color:#fff; cursor:pointer; }
.copyBtn:hover{ background: rgba(255,255,255,0.12); }
.copyBtn.small{ padding: 8px 10px; }
.copyBtn.mini{ padding: 6px 10px; border-radius: 10px; font-size: 12px; }

/* Command cards */
.cmdCard{ margin: 12px 0; border-radius: 18px; border:1px solid rgba(255,255,255,0.09); background: rgba(18,15,30,0.55); overflow:hidden; }
.cmdCard > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 14px 14px; }
.cmdCard > summary::-webkit-details-marker{ display:none; }
.cmdSummary{ display:flex; align-items:center; gap:12px; min-width:0; }
.cmdTitle{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cmdSlash{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight:700; color:#fff; }
.cmdDesc{ color: rgba(255,255,255,0.68); font-size: 14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 44vw; }
.cmdBody{ padding: 0 14px 14px; border-top:1px solid rgba(255,255,255,0.08); }
.cmdMeta{ display:flex; flex-wrap:wrap; gap:8px; margin: 12px 0 4px; }

.subBlock{ margin: 12px 0; padding: 12px; border-radius: 16px; border:1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }
.subHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }

/* Pager */
.docPager{ display:flex; justify-content:space-between; gap:10px; margin-top: 18px; }
.docNavBtn{ flex:1; text-decoration:none; padding: 12px 12px; border-radius: 16px; border:1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); color:#fff; text-align:center; }
.docNavBtn:hover{ background: rgba(255,255,255,0.10); }
.docNavBtn.disabled{ opacity:.55; cursor:not-allowed; pointer-events:none; }

/* Toast */
.toast{ position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 12px 14px; border-radius: 999px; background: rgba(18,15,30,0.85); border:1px solid rgba(255,255,255,0.10); color:#fff; box-shadow: 0 14px 36px rgba(0,0,0,0.35); opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease; }
.toast.show{ opacity:1; transform: translateX(-50%) translateY(-4px); }

/* Mobile */
@media (max-width: 980px){
  .docsLayout{ grid-template-columns: 1fr; }
  .docsSidebar{ position: static; }
  .cmdDesc{ max-width: 66vw; }
}

@media (max-width: 640px){
  .docsShell{ padding-top: 96px; }
  .docHero h1{ font-size: 34px; }
  .docTable{ min-width: 560px; }
  .cmdCard > summary{ flex-direction:column; align-items:flex-start; }
  .cmdSummaryActions{ width:100%; display:flex; justify-content:flex-end; }
}