/* =====================================================
   METEOR DEVELOPERS — Docs (guías + MCP): layout con sidebar + prosa
   Todo sobre tokens del DS. Sin hex crudos.
   ===================================================== */

.docs { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: var(--space-10);
  max-width: 1080px; margin: 0 auto; padding: var(--space-10) var(--space-6) var(--space-20);
  align-items: start; }
@media (max-width: 880px) { .docs { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Sidebar de navegación de docs */
.docs-nav { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--space-1); }
@media (max-width: 880px) { .docs-nav { position: static; border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-4); margin-bottom: var(--space-2); } }
.docs-nav .group { font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-quartiary); padding: var(--space-3) var(--space-3) var(--space-1); }
.docs-nav a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  font-size: var(--fs-body-md); color: var(--text-secondary); line-height: var(--lh-snug);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.docs-nav a:hover { background: var(--sidebar-item-hover); color: var(--text-primary); }
.docs-nav a.active { background: var(--sidebar-item-active); color: var(--sidebar-item-active-text); font-weight: 600; }
.docs-nav a.sub { padding-left: var(--space-5); font-size: var(--fs-body-sm); color: var(--text-tertiary); }
.docs-nav a.sub:hover { color: var(--text-primary); }

/* Contenido — prosa */
.prose { min-width: 0; max-width: 76ch; }
.prose > .eyebrow-row { display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-body-sm); color: var(--text-tertiary); margin-bottom: var(--space-3); }
.prose h1 { font-size: var(--fs-display-md); letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight); margin: 0 0 var(--space-3); font-weight: 750; }
.prose .lead { font-size: var(--fs-h-md); color: var(--text-secondary); line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-6); }
.prose h2 { font-size: var(--fs-h-lg); letter-spacing: var(--tracking-tight); margin: var(--space-8) 0 var(--space-3);
  padding-top: var(--space-2); font-weight: 700; line-height: var(--lh-snug); scroll-margin-top: 84px; }
.prose h3 { font-size: var(--fs-h-md); margin: var(--space-6) 0 var(--space-2); font-weight: 650; scroll-margin-top: 84px; }
.prose p { font-size: var(--fs-body-lg); color: var(--text-secondary); line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-4); }
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose a { color: var(--text-brand); text-decoration: none; border-bottom: 1px solid var(--border-brand); }
.prose a:hover { color: var(--action-primary-hover); }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2); }
.prose li { font-size: var(--fs-body-lg); color: var(--text-secondary); line-height: var(--lh-normal); }
.prose li::marker { color: var(--text-quartiary); }
.prose :not(pre) > code { font-family: var(--font-mono); font-size: .9em; color: var(--text-brand);
  background: var(--action-primary-subtle); padding: 1px 6px; border-radius: var(--radius-sm); }
.prose pre { margin: 0 0 var(--space-5); background: var(--surface-inverse); color: var(--text-inverse);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  overflow-x: auto; font-family: var(--font-mono); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.prose pre code { font-family: var(--font-mono); color: inherit; background: none; padding: 0; }
.prose blockquote { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-5);
  border-left: 3px solid var(--border-brand); background: var(--action-primary-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.prose blockquote p { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-md); }
.prose hr { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-8) 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-5); font-size: var(--fs-body-md); }
.prose th { text-align: left; padding: var(--space-2) var(--space-3); color: var(--text-tertiary);
  font-weight: 600; border-bottom: 1px solid var(--border-default); }
.prose td { padding: var(--space-2) var(--space-3); color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }

/* Paginación entre guías */
.doc-foot { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-10);
  padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.doc-foot a { display: inline-flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-md); text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-out); max-width: 48%; }
.doc-foot a:hover { border-color: var(--border-brand); }
.doc-foot .dir { font-size: var(--fs-body-sm); color: var(--text-tertiary); }
.doc-foot .ttl { font-size: var(--fs-body-md); color: var(--text-primary); font-weight: 600; }
.doc-foot .next { text-align: right; margin-left: auto; }

/* Índice de guías (cards) */
.guides-index { max-width: 900px; margin: 0 auto; padding: var(--space-12) var(--space-6) var(--space-20); }
.guides-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-8); }
@media (max-width: 640px) { .guides-grid { grid-template-columns: 1fr; } }
.guide-card { display: block; background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.guide-card:hover { border-color: var(--border-brand); transform: translateY(-3px); }
.guide-card .idx { font-family: var(--font-mono); font-size: var(--fs-body-xs); color: var(--text-brand); }
.guide-card h3 { margin: var(--space-2) 0 var(--space-1); font-size: var(--fs-h-sm); color: var(--text-primary);
  letter-spacing: var(--tracking-tight); }
.guide-card p { margin: 0; font-size: var(--fs-body-md); color: var(--text-secondary); line-height: var(--lh-normal); }