/* redacta + documentación — estilos (reutiliza tokens de redacta.css) */
@import url('/ftnd/archivosCSS/redacta.css');

/* ============ layout docs ============ */
.docs-body{background:var(--bg)}
.docs-nav{position:sticky; top:0; z-index:40; background:color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter:blur(10px)}
.docs-nav-inner{display:flex; align-items:center; justify-content:space-between; height:4rem}
.docs-nav .logo-txt{font-family:var(--f-display); font-size:1.25rem; font-weight:600; letter-spacing:-.02em; color:var(--ink)}
.docs-nav .logo-txt span{color:var(--accent); font-style:italic}
.docs-nav .crumb{display:none; align-items:center; gap:.5rem; font-size:.875rem; color:var(--ink-soft)}
.docs-nav .crumb a:hover{color:var(--ink)}
.docs-nav .crumb .sep{color:var(--muted-fg)}
@media(min-width:768px){.docs-nav .crumb{display:flex}}
.docs-nav .nav-cta button{background:transparent; border:1px solid var(--border); color:var(--ink); border-radius:.6rem; padding:.5rem .9rem; font-size:.8125rem; font-weight:500; cursor:pointer}
.docs-nav .nav-cta button:hover{border-color:var(--ink)}

.docs-layout{width:100%; max-width:1280px; margin-inline:auto; display:grid; grid-template-columns:1fr; gap:0}
@media(min-width:960px){.docs-layout{grid-template-columns:280px 1fr}}

/* sidebar */
.docs-side{position:static; border-block:1px solid var(--border); display:none}
@media(min-width:960px){.docs-side{display:block; position:sticky; top:4rem; height:calc(100vh - 4rem); overflow-y:auto; border-block:0; border-right:1px solid var(--border)}}
.docs-side nav{padding:1.25rem 1.5rem}
.docs-side .s-group{margin:1.25rem 0}
.docs-side .s-group:first-child{margin-top:.5rem}
.docs-side .s-title{font-family:var(--f-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted-fg); margin:0 0 .5rem}
.docs-side .s-link{display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem; margin:.1rem 0; border-radius:.4rem; font-size:.875rem; color:var(--ink-soft); line-height:1.3}
.docs-side .s-link:hover{color:var(--ink); background:var(--card)}
.docs-side .s-link.active{color:var(--accent); background:color-mix(in oklab, var(--accent) 8%, transparent); font-weight:500}
.docs-side .s-link .tag{font-family:var(--f-mono); font-size:.625rem; color:var(--accent); border:1px solid var(--border); border-radius:999px; padding:.05rem .45rem; margin-left:auto}
.docs-side .s-link .dot{width:.35rem; height:.35rem; border-radius:999px; background:var(--muted-fg); flex:none}

/* main */
.docs-main{padding:2.5rem 1.5rem 4rem}
@media(min-width:960px){.docs-main{max-width:860px; padding:3.5rem 3.5rem 5rem}}
.docs-art{scroll-margin-top:5.5rem}
.docs-art .eyebrow{margin-top:2.5rem}
.docs-art h1,.docs-art h2,.docs-art h3{font-family:var(--f-display); letter-spacing:-.02em}
.docs-art h1{font-size:clamp(2rem,3vw+1rem,2.75rem); line-height:1.05; font-weight:600; margin:1rem 0 0}
.docs-art h2{font-size:1.9rem; font-weight:600; margin:3rem 0 1rem; padding-top:1.5rem; border-top:1px solid var(--border)}
.docs-art #bienvenida h2{border-top:0; margin-top:1.5rem; padding-top:0}
.docs-art h3{font-size:1.25rem; font-weight:600; margin:2rem 0 .75rem}
.docs-art .lede{color:var(--ink-soft); font-size:1.125rem; line-height:1.6; margin-top:1.25rem; max-width:44rem}
.docs-art p{color:var(--ink-soft); line-height:1.7; max-width:52rem}
.docs-art p strong{color:var(--ink)}
.docs-art a{color:var(--accent)}
.docs-art a:hover{text-decoration:underline}
.docs-art ul,.docs-art ol{color:var(--ink-soft); line-height:1.7; padding-left:1.25rem}
.docs-art li{margin:.35rem 0}
.docs-art code{font-family:var(--f-mono); font-size:.8125em; background:var(--muted); color:var(--ink); padding:.125rem .4rem; border-radius:.3rem}
.docs-art pre code{background:none; padding:0; color:var(--code-fg)}

/* callouts */
.callout{border:1px solid var(--border); border-left:3px solid var(--accent); background:var(--card); border-radius:.6rem; padding:1rem 1.25rem; margin:1.5rem 0}
.callout.tip{border-left-color:#2F9E6E}
.callout.warn{border-left-color:#E8A23D}
.callout .co-title{font-weight:600; color:var(--ink); font-size:.875rem}
.callout p{margin:.35rem 0 0; font-size:.875rem}

/* code cards */
.code-card{border-radius:.85rem; overflow:hidden; margin:1.25rem 0; background:var(--code-bg); box-shadow:var(--shadow-ed)}
.code-card .head{display:flex; align-items:center; justify-content:space-between; padding:.55rem 1rem; font-family:var(--f-mono); font-size:.75rem; color:var(--code-mut)}
.code-card .head .path{display:flex; align-items:center; gap:.5rem; min-width:0}
.code-card .head .method{font-size:.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; padding:.1rem .45rem; border-radius:.3rem; background:rgba(255,255,255,.08); flex:none}
.code-card .head .method.get{color:#8ED4A3}
.code-card .head .method.post{color:#F4A15C}
.code-card pre{margin:0; overflow-x:auto; padding:0 1.25rem 1.25rem; font-family:var(--f-mono); font-size:.8125rem; line-height:1.7; color:var(--code-fg)}
.copy-btn{background:transparent; border:0; color:var(--code-mut); font-family:var(--f-mono); font-size:.75rem; cursor:pointer; flex:none}
.copy-btn:hover{color:var(--code-fg)}

/* code syntax tokens */
.cm{color:var(--code-mut)}
.st{color:var(--code-str)}
.ke{color:var(--code-acc)}
.pn{color:#8FB7E8}
.fn{color:#C9A8E8}

/* http request line */
.http-line{display:flex; align-items:center; gap:.75rem; padding:.55rem 1rem; font-family:var(--f-mono); font-size:.75rem; color:var(--code-fg); border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02)}
.http-line .m{color:#8ED4A3; font-weight:600}
.http-line .u{color:var(--code-fg)}
.http-line .c{margin-left:auto; color:var(--code-mut); font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em}

/* parameter tables */
.table-wrap{margin:1.25rem 0; overflow-x:auto; border:1px solid var(--border); border-radius:.6rem; background:var(--card)}
table.params{width:100%; min-width:560px; border-collapse:collapse; font-size:.8125rem}
table.params th{text-align:left; font-weight:500; color:var(--muted-fg); padding:.75rem 1rem; border-bottom:1px solid var(--border); font-family:var(--f-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em}
table.params td{padding:.75rem 1rem; border-bottom:1px solid var(--border); color:var(--ink-soft); vertical-align:top}
table.params tr:last-child td{border-bottom:0}
table.params td code{font-size:.75rem}
table.params .req{color:var(--accent); font-weight:500}
table.params .req.no{color:var(--muted-fg)}
table.params .opt{color:#2F9E6E}

/* step / stepper */
.steps{list-style:none; padding:0; margin:1.5rem 0; counter-reset:step}
.steps li{display:flex; gap:1rem; padding:1.25rem 0; border-bottom:1px solid var(--border)}
.steps li:last-child{border-bottom:0}
.steps .n{flex:none; width:2rem; height:2rem; border-radius:999px; background:var(--ink); color:var(--cream); display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:600; counter-increment:step; font-size:.875rem}
.steps .n::before{content:counter(step)}
.steps h3{margin:0}
.steps p{margin:.35rem 0 0}

/* highlight for method variants */
.grid-2{display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width:720px){.grid-2{grid-template-columns:1fr 1fr}}

/* changelog */
.changelog{list-style:none; padding:0; margin:1.5rem 0}
.changelog li{display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--border)}
.changelog .ver{flex:none; font-family:var(--f-mono); font-size:.75rem; color:var(--accent); border:1px solid var(--border); border-radius:.4rem; padding:.15rem .5rem; height:fit-content}
.changelog h4{margin:0; font-weight:600}
.changelog p{margin:.3rem 0 0; font-size:.875rem}

/* docs footer */
.docs-foot{width:100%; max-width:1280px; margin:0 auto; border-top:1px solid var(--border)}
.docs-foot .inner{display:flex; flex-direction:column; gap:.5rem; justify-content:space-between; padding:1.5rem; color:var(--muted-fg); font-size:.75rem}
@media(min-width:768px){.docs-foot .inner{flex-direction:row; align-items:center}}
.docs-foot a{color:var(--ink-soft)}
.docs-foot a:hover{color:var(--ink)}

/* hamburger for mobile */
.docs-menu-btn{display:inline-flex; background:transparent; border:1px solid var(--border); border-radius:.5rem; padding:.4rem .6rem; cursor:pointer; color:var(--ink)}
.docs-menu-btn:hover{border-color:var(--ink)}
@media(min-width:960px){.docs-menu-btn{display:none}}