@font-face{
  font-family:"Fira Code"; font-style:normal; font-weight:400; font-display:swap;
  src:url("vendor/fonts/FiraCode-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Fira Code"; font-style:normal; font-weight:600; font-display:swap;
  src:url("vendor/fonts/FiraCode-SemiBold.woff2") format("woff2");
}
@font-face{
  font-family:"Fira Code"; font-style:normal; font-weight:700; font-display:swap;
  src:url("vendor/fonts/FiraCode-Bold.woff2") format("woff2");
}
:root{
  --bg:#ffffff;
  --ink:#0a0a0a;
  --ink-dim:#6b6b6b;
  --line:#e4e4e4;
  --line-strong:#0a0a0a;
  --mono:"Fira Code", ui-monospace, "SF Mono", Consolas, monospace;
  --sidebar-w:405px;
  --content-max:110ch;
  /* escala de espaciado — ritmo vertical consistente en #content */
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--mono); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink); text-decoration:none}
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--bg);
  padding:8px 12px; z-index:100;
}
.skip-link:focus{left:8px; top:8px}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
/* #content se enfoca por script en cada cambio de ruta (para lectores de
   pantalla); nunca es resultado de Tab real, así que no debe mostrar anillo. */
#content:focus, #content:focus-visible{outline:none}

#app{display:flex; min-height:100vh}

/* ---------- sidebar ---------- */
#sidebar{
  width:var(--sidebar-w); flex:none; border-right:1px solid var(--line);
  display:flex; flex-direction:column; height:100vh; position:sticky; top:0;
}
#sidebar .brand{
  padding:20px 20px 16px; border-bottom:1px solid var(--line);
}
#sidebar .brand a{
  font-size:15px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
#sidebar nav{flex:1; overflow-y:auto; padding:14px 0 24px}

.nav-info a{
  display:block; padding:8px 20px; color:var(--ink); font-size:13px;
  border-left:2px solid transparent;
}
.nav-info a:hover{background:#f7f7f7}
.nav-info a.active{border-left-color:var(--ink); font-weight:600; background:#f7f7f7}

.nav-section{margin-top:6px}
.nav-section > button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:none; border:none; cursor:pointer; font-family:var(--mono);
  padding:8px 20px; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-dim); border-radius:0;
}
.nav-section > button:hover{color:var(--ink)}
.nav-section > button .chev{
  transition:transform .12s; font-size:10px; color:var(--ink-dim);
}
.nav-section.open > button .chev{transform:rotate(90deg)}
.nav-section .items{
  list-style:none; margin:0; padding:0 0 6px;
  display:none;
  /* eco rizomático: los ítems cuelgan de una línea raíz común */
  margin-left:20px; border-left:1px solid var(--line);
}
.nav-section.open .items{display:block}
.nav-section .items li a{
  display:block; padding:6px 16px; font-size:13px; color:var(--ink);
  border-left:2px solid transparent; margin-left:-1px;
}
.nav-section .items li a:hover{background:#f7f7f7}
.nav-section .items li a.active{border-left-color:var(--ink); font-weight:600; background:#f7f7f7}
.nav-section .empty{padding:6px 16px; font-size:12px; color:var(--ink-dim); font-style:italic}

/* ---------- barra móvil ---------- */
#mobilebar{
  display:none; position:sticky; top:0; z-index:20;
  align-items:center; gap:12px; padding:12px 16px;
  background:var(--bg); border-bottom:1px solid var(--line);
}
#mobilebar .brand{font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
#menu-toggle{
  background:none; border:1px solid var(--line); border-radius:2px; cursor:pointer;
  padding:6px 9px; font-family:var(--mono); font-size:14px; color:var(--ink); line-height:1;
}

/* ---------- contenido ---------- */
#main{flex:1; min-width:0}
#content-wrap{padding:48px 32px 80px; display:flex; justify-content:flex-start}
#content{width:100%; max-width:var(--content-max)}

@media (min-width:761px){
  /* Fija el margen izquierdo para acercar el texto al menú */
  #content-wrap{padding-left: 64px;}
}

#content h1{font-size:22px; margin:0 0 var(--sp-8); letter-spacing:-.01em; text-wrap:balance}
#content h2{font-size:17px; margin:var(--sp-8) 0 var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--line); text-wrap:balance}
#content h3{font-size:14px; margin:var(--sp-6) 0 var(--sp-2); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); text-wrap:balance}

#content p{margin:0 0 var(--sp-4); text-wrap:pretty; hyphens:none; -webkit-hyphens:none}
#content ul,#content ol{margin:0 0 var(--sp-4); padding-left:22px}
#content li{margin:4px 0; text-wrap:pretty; hyphens:none; -webkit-hyphens:none}

#content ul li::marker,#content ol li::marker{color:var(--ink-dim)}
#content a{text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
#content a:hover{color:var(--ink-dim)}
#content img{max-width:100%; height:auto; display:block; margin:18px 0; border:1px solid var(--line)}

/* Regla de seguridad para las negritas */
#content strong, #content b {font-weight: 700;}

#content code{
  background:#f3f3f3; padding:2px 5px; border-radius:2px; font-size:.92em;
}
#content pre{
  background:#0a0a0a; color:#f2f2f2; padding:16px; overflow-x:auto;
  border-radius:2px; margin:0 0 var(--sp-4); font-size:12.5px; line-height:1.55;
}
#content pre code{background:none; padding:0; color:inherit}
#content blockquote{
  margin:0 0 var(--sp-4); padding:2px 0 2px 16px; border-left:2px solid var(--ink);
  color:var(--ink-dim); text-wrap:pretty; hyphens:none; -webkit-hyphens:none;
}
#content hr{border:none; border-top:1px solid var(--line); margin:var(--sp-8)}
#content table{border-collapse:collapse; width:100%; margin:0 0 var(--sp-4); font-size:13px}
#content th,#content td{border:1px solid var(--line); padding:6px 10px; text-align:left}
#content th{background:#f7f7f7}

.state{color:var(--ink-dim); font-size:13px}
.state.error{color:var(--ink)}
.state .path{color:var(--ink-dim); font-size:12px; margin-top:6px}

/* Clases de utilidad para inyectar en Markdown (AHORA SON GLOBALES) */
.txt-rojo { color: #d32f2f; }
.txt-azul { color: #1976d2; }
.txt-verde { color: #5c9e00; }
.txt-grande { font-size: 1.3em; font-weight: 600; }
.txt-pequeno { font-size: 0.85em; color: var(--ink-dim); }
.destacado { background: #fff9c4; padding: 0 4px; }

@media (max-width:760px){
  #app{flex-direction:column}

  #mobilebar{display:flex; order:1}

  /* acordeón: el sidebar vive en el flujo normal, debajo de la barra,
     y empuja el contenido hacia abajo al abrirse — no es un overlay. */
  #sidebar{
    order:2; position:static; width:100%; height:auto;
    border-right:none; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden;
    transition:max-height .22s ease;
  }
  #sidebar.open{max-height:75vh; overflow-y:auto}
  #sidebar nav{flex:none; overflow-y:visible}

  #main{order:3}
  #content-wrap{padding:32px 20px 64px}
}