/* =========================================================
   Documentación viewer — estilos
   Tema claro/oscuro vía [data-theme] + prefers-color-scheme
   ========================================================= */

:root{
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --topbar-h: 58px;
  --sidebar-w: 280px;
  --content-max: 780px;

  --transition-fast: 140ms ease;
  --transition-med: 220ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Light theme (default) ---------- */
:root,
:root[data-theme="light"]{
  --bg: #f6f7fb;
  --bg-elevated: #ffffff;
  --bg-sidebar: #fbfbfd;
  --bg-hover: #eef0f7;
  --bg-active: #e8ecff;
  --border: #e3e5ee;
  --border-soft: #ececf3;
  --text: #1c2130;
  --text-dim: #565d72;
  --text-faint: #8790a3;
  --accent: #4a5fe8;
  --accent-hover: #3b4dd0;
  --accent-soft: #eef0ff;
  --code-bg: #1e2130;
  --code-text: #e3e6f3;
  --code-header-bg: #171a26;
  --shadow-sm: 0 1px 2px rgba(20,23,40,.06);
  --shadow-md: 0 6px 20px rgba(20,23,40,.10);
  --scrollbar: #d6d9e6;

  --note-bg: #eaf3ff; --note-border: #7fb1f7; --note-fg: #14508f; --note-icon:#2f6fed;
  --tip-bg: #eafbf1; --tip-border: #6fd39a; --tip-fg: #106b3f; --tip-icon:#1caa5c;
  --warn-bg: #fff6e0; --warn-border: #f2c14e; --warn-fg: #7a5300; --warn-icon:#d99a12;
  --imp-bg: #fbeaf7; --imp-border: #e084d0; --imp-fg: #7c1466; --imp-icon:#c22bb0;
}

/* ---------- Dark theme ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #14161f;
    --bg-elevated: #1a1d29;
    --bg-sidebar: #14161f;
    --bg-hover: #21243333;
    --bg-hover: #232637;
    --bg-active: #2a2f4a;
    --border: #2a2d3d;
    --border-soft: #262838;
    --text: #e7e9f2;
    --text-dim: #a7acc0;
    --text-faint: #767c92;
    --accent: #8b9bff;
    --accent-hover: #a3b1ff;
    --accent-soft: #232752;
    --code-bg: #0f1119;
    --code-text: #dfe2f0;
    --code-header-bg: #0a0b12;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 10px 30px rgba(0,0,0,.45);
    --scrollbar: #34384a;

    --note-bg: #16233a; --note-border: #3b6bb0; --note-fg: #a9cdff; --note-icon:#6ea8f5;
    --tip-bg: #123322; --tip-border: #2f8557; --tip-fg: #9fe8bf; --tip-icon:#3ec178;
    --warn-bg: #3a2c0d; --warn-border: #a87c1f; --warn-fg: #f4d489; --warn-icon:#e0ac2c;
    --imp-bg: #331230; --imp-border: #a2469a; --imp-fg: #f2b3e6; --imp-icon:#e158d1;
  }
}
:root[data-theme="dark"]{
  --bg: #14161f;
  --bg-elevated: #1a1d29;
  --bg-sidebar: #14161f;
  --bg-hover: #232637;
  --bg-active: #2a2f4a;
  --border: #2a2d3d;
  --border-soft: #262838;
  --text: #e7e9f2;
  --text-dim: #a7acc0;
  --text-faint: #767c92;
  --accent: #8b9bff;
  --accent-hover: #a3b1ff;
  --accent-soft: #232752;
  --code-bg: #0f1119;
  --code-text: #dfe2f0;
  --code-header-bg: #0a0b12;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 10px 30px rgba(0,0,0,.45);
  --scrollbar: #34384a;

  --note-bg: #16233a; --note-border: #3b6bb0; --note-fg: #a9cdff; --note-icon:#6ea8f5;
  --tip-bg: #123322; --tip-border: #2f8557; --tip-fg: #9fe8bf; --tip-icon:#3ec178;
  --warn-bg: #3a2c0d; --warn-border: #a87c1f; --warn-fg: #f4d489; --warn-icon:#e0ac2c;
  --imp-bg: #331230; --imp-border: #a2469a; --imp-fg: #f2b3e6; --imp-icon:#e158d1;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  padding-top: var(--topbar-h);
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition-med), color var(--transition-med);
}

::selection{ background: var(--accent-soft); color: var(--text); }

/* scrollbars */
#sidebar-scroll::-webkit-scrollbar, #content-wrap::-webkit-scrollbar{ width:9px; }
#sidebar-scroll::-webkit-scrollbar-thumb, #content-wrap::-webkit-scrollbar-thumb{
  background: var(--scrollbar); border-radius: 8px;
}
#sidebar-scroll::-webkit-scrollbar-track, #content-wrap::-webkit-scrollbar-track{ background: transparent; }

/* =============== Topbar =============== */
#topbar{
  height: var(--topbar-h);
  display:flex; align-items:center; gap:.6rem;
  padding: 0 .9rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: fixed; top:0; left:0; right:0; z-index: 50;
}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent; color: var(--text-dim);
  cursor:pointer; transition: background var(--transition-fast), color var(--transition-fast);
  flex: none;
}
.icon-btn:hover{ background: var(--bg-hover); color: var(--text); }
#sidebar-toggle{ display:none; }

#brand{
  display:flex; align-items:center; gap:.5rem;
  text-decoration:none; color: var(--text); font-weight:600; font-size:.95rem;
  white-space:nowrap; padding:.3rem .3rem; border-radius: var(--radius-sm);
}
#brand:hover{ background: var(--bg-hover); }
.brand-mark{
  font-family: var(--font-mono); color: var(--accent); font-weight:700;
  background: var(--accent-soft); padding: .15rem .4rem; border-radius: 6px; font-size:.85rem;
}
.brand-text{ display:inline-block; }

.search-wrap{
  margin-left: auto;
  position: relative;
  width: min(360px, 40vw);
}
.search-icon{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color: var(--text-faint); pointer-events:none; }
#search-input{
  width:100%; height:36px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); padding: 0 .8rem 0 2.1rem; font-size:.85rem;
  outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#search-input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#search-input::placeholder{ color: var(--text-faint); }

#theme-toggle{ flex:none; }

/* =============== Layout =============== */
#layout{ display:flex; min-height: calc(100vh - var(--topbar-h)); }

#sidebar{
  width: var(--sidebar-w); flex: none;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
}
#sidebar-scroll{ height:100%; overflow-y:auto; padding: .9rem .6rem 2rem; }

.sidebar-loading{ color: var(--text-faint); font-size:.85rem; padding: .5rem .6rem; }

.nav-section{ margin-bottom: .3rem; }
.nav-section-btn{
  width:100%; display:flex; align-items:center; gap:.4rem;
  background:none; border:none; cursor:pointer;
  color: var(--text-dim); font-weight:700; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding: .6rem .5rem; border-radius: var(--radius-sm);
}
.nav-section-btn:hover{ background: var(--bg-hover); color: var(--text); }
.nav-section-btn .chevron{ transition: transform var(--transition-fast); flex:none; color: var(--text-faint); }
.nav-section.collapsed .chevron{ transform: rotate(-90deg); }
.nav-section.collapsed .nav-section-body{ display:none; }

.nav-group{ margin: 0 0 .1rem .5rem; border-left: 1px solid var(--border); }
.nav-group-btn{
  width:100%; display:flex; align-items:center; gap:.35rem;
  background:none; border:none; cursor:pointer;
  color: var(--text-faint); font-weight:600; font-size:.68rem;
  letter-spacing:.04em; text-transform:uppercase;
  padding: .38rem .5rem .38rem .6rem; border-radius: var(--radius-sm);
}
.nav-group-btn:hover{ background: var(--bg-hover); color: var(--text-dim); }
.nav-group-btn .chevron{ transition: transform var(--transition-fast); flex:none; }
.nav-group.collapsed .chevron{ transform: rotate(-90deg); }
.nav-group.collapsed .nav-pages{ display:none; }
.nav-group.hidden{ display:none; }
.nav-group .nav-link{ padding-left: 1.5rem; font-size: .82rem; }

.nav-pages{ list-style:none; margin:0; padding:0 0 .4rem; }
.nav-pages li{ margin: 1px 0; }
.nav-link{
  display:block; text-decoration:none; color: var(--text-dim);
  font-size:.86rem; padding: .48rem .6rem .48rem 1.2rem;
  border-radius: var(--radius-sm); position:relative;
  border-left: 2px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.nav-link:hover{ background: var(--bg-hover); color: var(--text); }
.nav-link.active{
  background: var(--bg-active); color: var(--accent); font-weight:600;
  border-left-color: var(--accent);
}
.nav-link.hidden, .nav-section.hidden{ display:none; }

#sidebar-backdrop{
  display:none; position: fixed; top: var(--topbar-h); left:0; right:0; bottom:0;
  background: rgba(10,12,20,.45);
  z-index: 45;
}

/* =============== Content =============== */
#content-wrap{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center;
  padding: 2.6rem 1.5rem 1rem;
}
#content{
  width:100%; max-width: var(--content-max);
  opacity:1; transform: translateY(0);
  transition: opacity var(--transition-med), transform var(--transition-med);
}
#content.fade-out{ opacity:0; transform: translateY(6px); }

.loading-msg{ color: var(--text-faint); }

.page-eyebrow{
  display:flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:600; color: var(--accent);
  text-transform: uppercase; letter-spacing:.05em; margin-bottom:.6rem;
}
.page-eyebrow svg{ color: var(--text-faint); }

.page-head-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
}
.page-head-eyebrow-title{ min-width:0; flex:1; }

.page-title{
  font-size: 2.1rem; line-height:1.2; margin: 0 0 .5rem; font-weight:800;
  letter-spacing:-.02em;
}
.page-summary{
  color: var(--text-dim); font-size:1.05rem; line-height:1.55; margin: 0 0 1rem;
}
.page-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom: 1.2rem; }
.tag-chip{
  font-size:.72rem; font-weight:600; color: var(--accent);
  background: var(--accent-soft); padding: .25rem .6rem; border-radius: 999px;
}

.download-btn{
  flex:none; display:flex; align-items:center; gap:.4rem;
  background: var(--bg-elevated); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size:.82rem; font-weight:600; padding:.5rem .85rem; cursor:pointer;
  margin-top:.15rem;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.download-btn:hover{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.ai-tip{
  display:flex; align-items:flex-start; gap:.55rem;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-md); padding: .75rem .9rem; margin: 0 0 1.8rem;
  font-size:.86rem; line-height:1.55; color: var(--text-dim);
}
.ai-tip svg{ flex:none; margin-top:.15rem; color: var(--accent); }
.ai-tip code{
  font-family: var(--font-mono); font-size:.85em;
  background: var(--bg-elevated); color: var(--text); padding:.1em .35em; border-radius:4px;
}

.page-body{ font-size:1.02rem; line-height:1.75; }
.page-body h2{
  font-size:1.5rem; margin: 2.4rem 0 .9rem; padding-top:.3rem;
  border-top: 1px solid var(--border-soft); font-weight:750; letter-spacing:-.01em;
}
.page-body h2:first-child{ border-top:none; padding-top:0; margin-top:0; }
.page-body h3{ font-size:1.18rem; margin: 1.8rem 0 .6rem; font-weight:700; }
.page-body h4{ font-size:1.02rem; margin: 1.4rem 0 .5rem; font-weight:700; }
.page-body p{ margin: 0 0 1.05rem; }
.page-body a{ color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 2px; }
.page-body a:hover{ color: var(--accent-hover); }
.page-body strong{ font-weight:700; color: var(--text); }
.page-body em{ font-style: italic; }
.page-body ul, .page-body ol{ margin: 0 0 1.1rem; padding-left: 1.4rem; }
.page-body li{ margin: .3rem 0; }
.page-body li::marker{ color: var(--text-faint); }
.page-body hr{ border:none; border-top:1px solid var(--border); margin: 2rem 0; }

.page-body :not(pre) > code{
  font-family: var(--font-mono); font-size: .87em;
  background: var(--accent-soft); color: var(--accent);
  padding: .15em .4em; border-radius: 5px;
}

/* tables */
.table-wrap{ overflow-x:auto; margin: 0 0 1.4rem; border:1px solid var(--border); border-radius: var(--radius-md); }
table{ border-collapse: collapse; width:100%; font-size:.92rem; }
table th, table td{ padding:.6rem .8rem; border-bottom:1px solid var(--border-soft); text-align:left; }
table th{ background: var(--bg-hover); font-weight:700; color: var(--text); white-space:nowrap; }
table tr:last-child td{ border-bottom:none; }
table tbody tr:hover{ background: var(--bg-hover); }

/* =============== Admonitions =============== */
.admonition{
  margin: 1.4rem 0; padding: 0; border-radius: var(--radius-md);
  border: 1px solid; overflow:hidden; box-shadow: var(--shadow-sm);
}
.adm-header{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.85rem; padding: .65rem .9rem;
}
.adm-header svg{ flex:none; }
.adm-body{ padding: .1rem 1rem .9rem; font-size:.95rem; line-height:1.65; }
.adm-body p{ margin: .5rem 0; }
.adm-body p:first-child{ margin-top:0; }
.adm-body p:last-child{ margin-bottom:0; }

.adm-note{ background: var(--note-bg); border-color: var(--note-border); }
.adm-note .adm-header{ color: var(--note-fg); }
.adm-note svg{ color: var(--note-icon); }

.adm-tip{ background: var(--tip-bg); border-color: var(--tip-border); }
.adm-tip .adm-header{ color: var(--tip-fg); }
.adm-tip svg{ color: var(--tip-icon); }

.adm-warning{ background: var(--warn-bg); border-color: var(--warn-border); }
.adm-warning .adm-header{ color: var(--warn-fg); }
.adm-warning svg{ color: var(--warn-icon); }

.adm-important{ background: var(--imp-bg); border-color: var(--imp-border); }
.adm-important .adm-header{ color: var(--imp-fg); }
.adm-important svg{ color: var(--imp-icon); }

/* =============== Code cards =============== */
.code-card{
  margin: 1.5rem 0; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-sm); border:1px solid var(--border);
}
.code-card-header{
  display:flex; align-items:center; gap:.6rem;
  background: var(--code-header-bg); color: #cdd2e6;
  padding: .55rem .5rem .55rem .9rem; font-size:.82rem;
}
.code-card-dots{ display:flex; gap:5px; flex:none; }
.code-card-dots span{ width:9px; height:9px; border-radius:50%; background:#4d5266; }
.code-card-title{ font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e4e7f5; }
.code-card-lang{ font-family: var(--font-mono); font-size:.72rem; color:#8992b3; background:#262a3d; padding:.15rem .5rem; border-radius:5px; flex:none; }
.copy-btn{
  flex:none; display:flex; align-items:center; gap:.3rem;
  background: #262a3d; color:#cdd2e6; border:1px solid #363c56;
  font-size:.75rem; padding:.32rem .6rem; border-radius:6px; cursor:pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.copy-btn:hover{ background:#323752; color:#fff; }
.copy-btn.copied{ background: var(--tip-icon); border-color: var(--tip-icon); color:#08240f; }

.code-card pre{
  margin:0; background: var(--code-bg); color: var(--code-text);
  padding: 1rem 1.1rem; overflow-x:auto; font-size:.87rem; line-height:1.6;
}
.code-card code{ font-family: var(--font-mono); background:none; padding:0; color:inherit; }

.tok-kw{ color:#c792ea; font-weight:600; }
.tok-str{ color:#9cd97e; }
.tok-com{ color:#6b7089; font-style:italic; }
.tok-num{ color:#f2a65a; }
.tok-pre{ color:#6fb8f0; }

/* =============== Prev / next =============== */
.prev-next{
  display:flex; justify-content:space-between; gap:1rem;
  margin: 2.6rem 0 1.2rem; width:100%; max-width: var(--content-max);
}
.pn-link{
  flex: 1; max-width: 48%;
  display:flex; flex-direction:column; gap:.25rem;
  text-decoration:none; padding: .9rem 1.05rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--bg-elevated);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pn-link:hover{ border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pn-link.next{ margin-left:auto; text-align:right; align-items:flex-end; }
.pn-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--text-faint); font-weight:700; }
.pn-title{ color: var(--text); font-weight:700; font-size:.95rem; }
.pn-spacer{ flex:1; }

#page-footer{
  width:100%; max-width: var(--content-max);
  color: var(--text-faint); font-size:.78rem; text-align:center;
  padding: 1.2rem 0 2rem;
}

/* =============== Toast =============== */
.toast{
  position: fixed; bottom: 22px; left:50%; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: var(--bg); padding:.55rem 1rem; border-radius: 999px;
  font-size:.85rem; opacity:0; pointer-events:none; transition: opacity var(--transition-med), transform var(--transition-med);
  z-index: 100; box-shadow: var(--shadow-md);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* =============== Responsive =============== */
@media (max-width: 880px){
  #sidebar-toggle{ display:inline-flex; }
  .brand-text{ display:none; }
  .search-wrap{ width: auto; flex:1; margin-left:.4rem; }

  #sidebar{
    position: fixed; top: var(--topbar-h); left:0; bottom:0;
    width: min(320px, 84vw); height: auto;
    transform: translateX(-100%);
    transition: transform var(--transition-med);
    z-index: 46; box-shadow: var(--shadow-md);
  }
  #sidebar.open{ transform: translateX(0); }
  body.sidebar-open #sidebar-backdrop{ display:block; }

  #content-wrap{ padding: 1.6rem 1.1rem .5rem; }
  .page-title{ font-size:1.6rem; }
  .prev-next{ flex-direction:column; }
  .pn-link{ max-width:100%; }
  .pn-link.next{ margin-left:0; text-align:left; align-items:flex-start; }
}

@media (max-width: 520px){
  .code-card-title{ display:none; }
  .download-btn span{ display:none; }
  .download-btn{ padding:.5rem; }
}

/* =============== Portada (home) =============== */
.home-hero{
  text-align:center; padding: 2.4rem 1rem 1.6rem;
}
.home-title{
  font-size: 3rem; font-weight: 800; letter-spacing:-.02em; margin: 0 0 .5rem;
  background: linear-gradient(120deg, var(--accent), #ff8fd0 60%, #ffb35c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-tagline{
  color: var(--text-dim); font-size: 1.05rem; max-width: 32rem; margin: 0 auto;
}
.home-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; width:100%; max-width: 900px; margin: 1.6rem auto 2rem; padding: 0 .25rem;
}
.home-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
  text-decoration:none; color: var(--text);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.3rem 1.3rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.home-card:hover{
  transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent);
}
.home-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width: 52px; height: 52px; border-radius: var(--radius-md);
  background: #ffffff; border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm); padding: 8px;
}
.home-badge svg{ width:100%; height:100%; display:block; }

.home-card-title{ font-size: 1.12rem; font-weight: 750; letter-spacing:-.01em; }
.home-card-tagline{ font-size: .87rem; color: var(--text-dim); line-height:1.4; }
.home-card-count{ font-size: .74rem; color: var(--text-faint); margin-top:auto; padding-top:.4rem; }

@media (max-width: 640px){
  .home-title{ font-size: 2.1rem; }
  .home-tagline{ font-size: .92rem; }
}