/* Documentación stxGO — extiende /styles.css */
.docs{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;padding-block:48px 80px;align-items:start}
.docs-nav{position:sticky;top:112px;font-size:14px}
.docs-nav h2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin:0 0 12px}
.docs-nav ul{list-style:none;margin:0 0 28px;padding:0;border-left:1px solid var(--border)}
.docs-nav li a,.docs-nav li span{display:block;padding:8px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--muted)}
.docs-nav li a:hover{color:var(--text)}
.docs-nav li a[aria-current=page]{color:var(--orange);border-left-color:var(--orange);font-weight:600}
.docs-nav li span{opacity:.55;cursor:default}
.docs-nav li span small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-left:6px;border:1px solid var(--border);border-radius:4px;padding:1px 5px}
.docs-body{max-width:760px}
.docs-body h1{font-size:40px;line-height:1.15;margin:0 0 16px}
.docs-body h2{font-size:26px;margin:48px 0 12px}
.docs-body h3{font-size:18px;margin:28px 0 8px}
.docs-body p,.docs-body li{color:var(--muted);line-height:1.7;font-size:16px}
.docs-body ul,.docs-body ol{padding-left:22px}
.docs-body a:not(.button):not(.card){color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.docs-body .lead{margin-top:0}
.docs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
.docs-grid .card h3{margin:0 0 8px;font-size:18px}
.docs-grid .card p{margin:0;font-size:15px}
.docs-grid a.card{display:block;transition:border-color .18s,transform .18s}
.docs-grid a.card:hover{border-color:var(--orange);transform:translateY(-2px)}
.docs-grid .card.soon{opacity:.6}
.badge{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);border:1px solid var(--orange);border-radius:4px;padding:2px 6px;margin-left:8px;vertical-align:middle}
.callout{border:1px solid var(--border);border-left:3px solid var(--orange);border-radius:var(--radius);padding:16px 20px;margin:28px 0;background:#11171b}
.callout p{margin:0}
.docs-pager{display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:24px;border-top:1px solid var(--border);font-size:14px}
@media(max-width:900px){.docs{grid-template-columns:1fr;gap:32px;padding-block:32px 56px}.docs-nav{position:static}.docs-grid{grid-template-columns:1fr}.docs-body h1{font-size:32px}}

/* ---- manual técnico ---- */
.docs-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:#1a2127;border:1px solid #28323a;border-radius:4px;padding:1px 6px;color:#ffd699;word-break:break-word}
.docs-body b{color:var(--text)}
.docs-body i{color:#d4dbe0}
.docs-body h2{padding-top:8px;border-top:1px solid #1d252c;margin-top:56px}
.docs-body h2:first-of-type{border-top:0}
.table-wrap{overflow-x:auto;margin:24px 0;border:1px solid var(--border);border-radius:var(--radius)}
.docs-body table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.docs-body th{background:#151c21;color:var(--orange);text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:12px 16px;border-bottom:1px solid var(--border)}
.docs-body td{padding:12px 16px;border-bottom:1px solid #1d252c;vertical-align:top;color:var(--muted);line-height:1.6}
.docs-body td:first-child{color:var(--text);font-weight:600;white-space:nowrap}
.docs-body td:first-child code{white-space:normal}
.docs-body tr:last-child td{border-bottom:0}
.docs-body tbody tr:hover td{background:#10161a}
.callout.warn{border-left-color:#e5483b}
.docs-body .callout b{color:var(--orange)}
/* diagramas */
.diagram{margin:32px 0;padding:20px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(130deg,#13191d,#0d1216)}
.diagram svg{display:block;width:100%;height:auto;font-family:Inter,"Segoe UI",Arial,sans-serif}
.diagram figcaption{margin-top:12px;font-size:13px;color:#8f9ba5;text-align:center}
.diagram text{fill:var(--text);font-size:14.5px;font-weight:600}
.diagram .sub{font-weight:400;fill:#aab5be;font-size:13px}
.diagram .n rect,.diagram .g polygon{fill:#11171b;stroke:#2f3a43;stroke-width:1.2}
.diagram .a rect{fill:#2a1d05;stroke:var(--orange);stroke-width:1.6}
.diagram .a text{fill:#ffcf8a}
.diagram .a .sub{fill:#d9b27a}
.diagram .ok rect{fill:#0f2216;stroke:#3fa662;stroke-width:1.4}
.diagram .ok text{fill:#8fe0ac}
.diagram .err rect{fill:#2a1210;stroke:#e5483b;stroke-width:1.4}
.diagram .err text{fill:#ff9d93}
.diagram .g polygon{stroke:#59646d}
.diagram .box rect{fill:#0c1115;stroke:#26303a;stroke-dasharray:5 4}
.diagram .boxt{fill:#8f9ba5;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.diagram .ln{fill:none;stroke:#59646d;stroke-width:1.8}
.diagram .ln.acc{stroke:var(--orange)}
.diagram .ln.dash{stroke-dasharray:6 5}
.diagram .lbl{fill:#b4bfc8;font-size:13px;font-weight:500}
/* filtro */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.chip{border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer;min-height:36px}
.chip:hover{color:var(--text);border-color:#59646d}
.chip.active{background:var(--orange);border-color:var(--orange);color:#111;font-weight:650}
#guias td:first-child{white-space:normal}
@media(max-width:900px){.docs-body td:first-child{white-space:normal}.diagram{padding:12px;margin-inline:-8px}.diagram text{font-size:14.5px}}

/* ---- móvil ---- */
.docs{grid-template-columns:260px minmax(0,1fr)}
.docs-body{min-width:0}
.docs-menu>summary{display:none}
@media(max-width:900px){
 .docs{grid-template-columns:minmax(0,1fr)}
 .docs-menu>summary{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 16px;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-weight:600;list-style:none;background:#11171b}
 .docs-menu>summary::after{content:"▾";color:var(--orange)}
 .docs-menu[open]>summary::after{content:"▴"}
 .docs-menu[open]>summary{margin-bottom:16px}
 .docs-body h1{font-size:30px}
 .diagram{overflow-x:auto}
 .diagram svg{min-width:640px}
}