/* Guides (/docs): the site's look, for long reading — steps, commands to
   copy, a checklist and a troubleshooting table. One language at a time
   (docs.js shows the one picked here or on the home page). */
.docs { max-width: 46rem; margin: 0 auto; padding: 24px var(--gutter) 96px; }
.docs [data-lang-block] { display: none; }
html[lang="es"] .docs [data-lang-block="es"],
html[lang="en"] .docs [data-lang-block="en"] { display: block; }

.docs .crumbs { font-size: .9rem; color: var(--text-3); margin: 0 0 18px; }
.docs .crumbs a { color: var(--text-2); }
.docs h1 { font-family: var(--display); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; margin: 0 0 12px; }
.docs .meta { color: var(--text-3); font-size: .95rem; margin: 0 0 24px; }
.docs .lead { font-size: 1.15rem; line-height: 1.6; color: var(--text); }
.docs h2 { font-family: var(--display); font-size: 1.5rem; margin: 48px 0 12px; scroll-margin-top: 24px; }
.docs h3 { font-size: 1.05rem; margin: 24px 0 8px; }
.docs p, .docs li { color: var(--text-2); line-height: 1.65; }
.docs strong { color: var(--text); }
.docs ol, .docs ul { padding-left: 1.3em; }
.docs li + li { margin-top: 6px; }
.docs a { color: var(--ver); }

.docs .toc { margin: 28px 0 8px; padding: 16px 20px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; }
.docs .toc p { margin: 0 0 6px; color: var(--text); font-weight: 600; }
.docs .toc ol { margin: 0; }
.docs .toc a { color: var(--text-2); text-decoration: none; }
.docs .toc a:hover { color: var(--text); text-decoration: underline; }

.docs .note, .docs .warn {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.docs .warn { border-color: color-mix(in srgb, var(--wait) 45%, transparent); background: color-mix(in srgb, var(--wait) 8%, var(--ink-2)); }
.docs .note p, .docs .warn p { margin: 0; }

.docs code { font-family: var(--mono); font-size: .9em; color: var(--text); background: var(--ink-3); padding: 1px 6px; border-radius: 6px; }
.docs .cmd { position: relative; margin: 12px 0 16px; }
.docs .cmd pre {
  margin: 0;
  padding: 14px 16px;
  padding-right: 92px;
  /* Long commands wrap: nothing hides behind «Copiar». */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text);
  background: #0b0b0e;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.docs .cmd pre code { background: none; padding: 0; font-size: inherit; }
.docs .copy {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 34px;
  padding: 0 12px;
  font: 600 .82rem var(--body);
  color: var(--text);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.docs .copy:hover { background: var(--line); }

.docs .check { list-style: none; padding: 0; }
.docs .check li { display: flex; gap: 12px; align-items: flex-start; }
.docs .check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ok); flex: 0 0 auto; }
.docs .check label { cursor: pointer; }

.docs .table { width: 100%; overflow-x: auto; margin: 12px 0; }
.docs table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.docs th, .docs td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.docs th { color: var(--text); font-weight: 600; background: var(--ink-2); }

.docs .cards { display: grid; gap: 14px; margin-top: 28px; }
.docs .card {
  display: block;
  padding: 20px 22px;
  text-decoration: none;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.docs .card:hover { border-color: var(--text-3); }
.docs .card b { display: block; font-family: var(--display); font-size: 1.25rem; color: var(--text); }
.docs .card span { display: block; margin-top: 6px; color: var(--text-2); line-height: 1.5; }
.docs .card small { display: block; margin-top: 10px; color: var(--text-3); }

.top .lang { margin-left: auto; }
@media print {
  .top, .foot, .copy { display: none; }
  .docs { padding: 0; }
}