/* Vista de documentacion publica (topico 220). Mismos nombres de tokens que
   ui/src/styles/tokens.css -- la landing ya los usaba con estos nombres. */

:root {
  color-scheme: light dark;
  --bg: #fbfbfa;
  --surface: #ffffff;
  --surface-sunken: #f4f4f2;
  --border: #e6e5e1;
  --text: #1c1b19;
  --text-muted: #6f6d67;
  --accent: #e8955a;
  --accent-strong: #cf7538;
  --running-bg: #14130f;
  --running-text: #f6f5f2;
  --running-muted: #948f86;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-8: 96px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --content-width: 1080px;
  --text-width: 640px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  --shadow-sm: 0 1px 2px rgba(28, 27, 25, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171613;
    --surface: #201f1b;
    --surface-sunken: #100f0d;
    --border: #38352e;
    --text: #f2f0ea;
    --text-muted: #a6a196;
    --running-bg: #201f1b;
    --running-text: #f6f5f2;
    --running-muted: #948f86;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(var(--content-width), calc(100vw - 48px)); margin: 0 auto; }
a { color: inherit; }
code { font-family: var(--font-mono); }

nav.top { padding: var(--space-5) 0; border-bottom: 1px solid var(--border); }
nav.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.wordmark { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; }
.wordmark span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: var(--space-5); font-size: 14px; }
.nav-links a { text-decoration: none; color: var(--text-muted); }
.nav-links a:hover { color: var(--text); }

.docs-main { padding: var(--space-6) 0 var(--space-8); }

.docs {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: var(--text-width);
  margin: 0 auto;
}

.docs__nav {
  display: flex;
  gap: var(--space-1);
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  width: fit-content;
}
.docs__nav a {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.docs__nav a.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.docs__content {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Sin borde ni fondo a proposito (a diferencia de .doc-card): solo agrupa,
   por ejemplo, un comando con el texto que lo explica, con un gap propio mas
   chico que el que separa una seccion de la siguiente en .docs__content. */
.doc-group { display: flex; flex-direction: column; gap: var(--space-3); }

.doc-heading { margin: 0; padding-top: 40px; }
.doc-paragraph { margin: 0; line-height: 1.6; }
.doc-paragraph a { color: var(--accent-strong); }
.doc-paragraph img {
  display: block;
  max-width: 100%;
  margin-top: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.doc-list {
  margin: 0;
  padding-left: 1.3em;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.doc-code {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: 13px;
  overflow-x: auto;
}

.doc-card {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.doc-card__title { margin: 0; font-size: 14px; }
.doc-card__body { display: flex; flex-direction: column; gap: var(--space-3); color: var(--text-muted); }
.doc-card__body .doc-paragraph { color: inherit; }

.doc-codebash { border-radius: var(--radius-md); background: var(--running-bg); overflow: hidden; }
.doc-codebash__bar { display: flex; gap: 6px; padding: var(--space-2) var(--space-3); }
.doc-codebash__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--running-muted); opacity: 0.5; }
.doc-codebash__body {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  color: var(--running-text);
  font-size: 13px;
  overflow-x: auto;
}

.doc-video { border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); }
.doc-video video, .doc-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

@media (max-width: 600px) {
  .docs__nav { width: 100%; }
  .docs__nav a { flex: 1; text-align: center; }
}