/* ═══════════════════════════════════════════════════════════════════════════
   Rustty — visor de documentación

   Tres columnas: índice · documento · «en esta página». El documento se
   renderiza desde Markdown, así que aquí se estilan etiquetas desnudas
   (h2, pre, table…) en lugar de clases: no hay control sobre el marcado que
   produce marked.

   Depende de estilos.css: todos los colores salen de sus tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

.docs-layout {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr) 176px;
  gap: 32px;
  max-width: 1220px;
  margin: 0 auto;
  padding: 28px 20px 60px;
  align-items: start;
}

/* ── índice lateral ─────────────────────────────────────────────────────── */
.docs-sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + 20px);
  max-height: calc(100vh - var(--topbar-h) - 40px);
  overflow-y: auto;
}
.docs-sidebar-title {
  display: none;  /* solo actúa como desplegable en móvil */
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--panel);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.docs-sidebar-chevron { transition: transform 0.2s ease; }
.docs-sidebar-title[aria-expanded="true"] .docs-sidebar-chevron { transform: rotate(180deg); }

#docs-menu { list-style: none; }
.docs-group + .docs-group { margin-top: 18px; }
.docs-group-label {
  display: block;
  margin-bottom: 6px;
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.docs-group-label::before { content: '# '; color: var(--accent); }
.docs-group-list { list-style: none; }
.docs-group-list a {
  display: block;
  padding: 3px 8px;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
}
.docs-group-list a:hover {
  border-left-color: var(--accent);
  color: var(--text);
  text-decoration: none;
}
.docs-group-list a.active {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 600;
}

/* ── documento ──────────────────────────────────────────────────────────── */
.docs-content { min-width: 0; }

.docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 12px;
}
.docs-crumb-sep { color: var(--faint); }
.docs-crumb-current { color: var(--headers); }

/* ── prosa ──────────────────────────────────────────────────────────────── */
/* Sin límite de medida: el documento ocupa toda la columna central, que ya
   está acotada por el ancho del layout. */
.docs-prose { font-size: 13.5px; }

.docs-prose h1 {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}
.docs-prose h1::before { content: '$ '; color: var(--accent); font-weight: 400; }

/* Cada nivel toma un color distinto: al recorrer un documento largo, el tono
   sitúa la profundidad antes de leer el texto. */
.docs-prose h2 {
  margin: 32px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-dim);
  font-size: 15.5px;
  color: var(--accent);
}
.docs-prose h2::before { content: '## '; color: var(--muted); font-weight: 400; }
.docs-prose h3 {
  margin: 22px 0 8px;
  font-size: 13.5px;
  color: var(--headers);
}
.docs-prose h3::before { content: '### '; color: var(--muted); font-weight: 400; }
.docs-prose h4 {
  margin: 18px 0 6px;
  font-size: 13px;
  color: var(--cyan);
}

.docs-prose p { margin: 11px 0; color: var(--text); font-size: 13.5px; line-height: 1.7; }
.docs-prose strong { color: var(--text); font-weight: 600; }
.docs-prose em { color: var(--headers); font-style: normal; }
.docs-prose a { color: var(--accent); }

.docs-prose ul, .docs-prose ol { margin: 10px 0 10px 2px; list-style: none; }
.docs-prose li {
  position: relative;
  padding-left: 20px;
  margin: 5px 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.7;
}
.docs-prose ul > li::before {
  content: '*';
  position: absolute;
  left: 4px;
  color: var(--accent);
}
/* la numeración la lleva el contador, no el marcador de lista */
.docs-prose ol { counter-reset: docs-ol; }
.docs-prose ol > li { counter-increment: docs-ol; }
.docs-prose ol > li::before {
  content: counter(docs-ol) '.';
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-size: 12px;
}
.docs-prose li > ul, .docs-prose li > ol { margin: 4px 0; }

.docs-prose blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 2px solid var(--headers);
  background: var(--panel);
  border-radius: 0 4px 4px 0;
}
.docs-prose blockquote p { margin: 4px 0; }

.docs-prose hr {
  margin: 26px 0;
  border: none;
  border-top: 1px solid var(--border);
}

.docs-prose img { max-width: 100%; border-radius: 5px; }

.docs-prose :not(pre) > code {
  padding: 1px 4px;
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  background: var(--panel-2);
  color: var(--headers);
  font-size: 12px;
}

/* ── bloques de código ──────────────────────────────────────────────────── */
.docs-codeblock { position: relative; margin: 14px 0; }
.docs-codeblock pre {
  padding: 13px 15px;
  border: 1px solid var(--border-dim);
  border-left: 2px solid var(--ok);
  border-radius: 5px;
  background: var(--panel);
  overflow-x: auto;
}
.docs-codeblock pre code {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.6;
}
.docs-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.docs-codeblock:hover .docs-copy,
.docs-copy:focus-visible { opacity: 1; }
.docs-copy:hover { border-color: var(--accent-dim); color: var(--accent); }
.docs-copy.is-copied { border-color: var(--ok); color: var(--ok); opacity: 1; }

/* ── tablas ─────────────────────────────────────────────────────────────── */
.docs-table-wrap {
  margin: 14px 0;
  overflow-x: auto;
  border: 1px solid var(--border-dim);
  border-radius: 5px;
}
.docs-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.docs-prose th, .docs-prose td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-dim);
}
.docs-prose th {
  background: var(--panel);
  color: var(--headers);
  font-weight: 600;
  white-space: nowrap;
}
.docs-prose td { color: var(--text); }
.docs-prose tbody tr:last-child td { border-bottom: none; }
.docs-prose tbody tr:hover td { background: var(--panel); }

/* ── enlaces ancla de los encabezados ───────────────────────────────────── */
.docs-anchor {
  margin-left: 8px;
  color: var(--border);
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.15s ease;
}
h2:hover .docs-anchor, h3:hover .docs-anchor, h4:hover .docs-anchor,
.docs-anchor:focus-visible { opacity: 1; color: var(--accent); }
.docs-anchor:hover { text-decoration: none; color: var(--accent); }

/* ── «en esta página» ───────────────────────────────────────────────────── */
.docs-toc {
  position: sticky;
  top: calc(var(--topbar-h) + 20px);
  max-height: calc(100vh - var(--topbar-h) - 40px);
  overflow-y: auto;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.docs-toc-title {
  margin-bottom: 8px;
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.docs-toc ul { list-style: none; }
.docs-toc li { margin: 3px 0; }
.docs-toc a {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}
.docs-toc a:hover { color: var(--text); text-decoration: none; }
.docs-toc a.active { color: var(--accent); }
.docs-toc-h3 { padding-left: 12px; }
.docs-toc-h3 a { font-size: 11px; }

/* ── anterior / siguiente ───────────────────────────────────────────────── */
.docs-pager {
  display: flex;
  gap: 12px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.docs-pager-link {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border-dim);
  border-radius: 5px;
  background: var(--panel);
  transition: border-color 0.15s ease;
}
.docs-pager-link:hover { border-color: var(--accent-dim); text-decoration: none; }
.docs-pager-next { text-align: right; }
.docs-pager-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--faint);
  font-size: 11px;
}
.docs-pager-next .docs-pager-label { justify-content: flex-end; }
.docs-pager-title {
  display: block;
  margin-top: 3px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── carga y error ──────────────────────────────────────────────────────── */
.docs-skeleton { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.docs-skeleton-bar {
  height: 12px;
  border-radius: 3px;
  background: var(--panel-2);
  animation: docsPulse 1.4s ease-in-out infinite;
}
.docs-skeleton-bar:nth-child(2) { width: 92%; animation-delay: 0.1s; }
.docs-skeleton-bar:nth-child(3) { width: 78%; animation-delay: 0.2s; }
.docs-skeleton-bar:nth-child(4) { width: 86%; animation-delay: 0.3s; }
.docs-skeleton-bar:nth-child(5) { width: 64%; animation-delay: 0.4s; }
@keyframes docsPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }

.docs-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.docs-error {
  padding: 26px 22px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--danger);
  border-radius: 5px;
  background: var(--panel);
}
.docs-error h1 { margin-bottom: 8px; font-size: 16px; color: var(--danger); }
.docs-error h1::before { content: '! '; }
.docs-error p { color: var(--muted); font-size: 13px; }
.docs-error-detail {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 3px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.docs-error-back { display: inline-block; margin-top: 14px; font-weight: 600; }
.docs-error-back::before { content: '← '; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .docs-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .docs-toc { display: none; }
}

@media (max-width: 760px) {
  .docs-layout {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 18px;
  }
  .docs-sidebar {
    position: static;
    max-height: none;
  }
  .docs-sidebar-title { display: flex; }
  /* colapsado por defecto: el índice completo empujaría el documento fuera
     de pantalla en cada carga */
  #docs-menu { display: none; margin-top: 12px; }
  .docs-sidebar-title[aria-expanded="true"] + nav #docs-menu { display: block; }
  .docs-pager { flex-direction: column; }
  .docs-pager-next { text-align: left; }
  .docs-pager-next .docs-pager-label { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-skeleton-bar { animation: none; }
  .docs-copy { opacity: 1; }
}