/* ============================================================
   DOCUMENTACIÓN — sistema de diseño de artículos técnicos.
   Dark, premium, sobrio. Reutiliza los tokens de :root de
   styles.css (--bg, --surface, --accent, --fg, --muted…).
   Lo cargan el índice (/documentacion) y cada artículo
   (/documentacion/<slug>/). Mobile-first.
   ============================================================ */

/* ---------- ÍNDICE ---------- */
.docs-page { max-width: 1040px; margin: 0 auto; padding: 40px 20px 96px; }
.docs-hero { text-align: center; max-width: 680px; margin: 8px auto 44px; }
.docs-hero h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(32px, 7vw, 52px); font-weight: 800;
    letter-spacing: -0.03em; line-height: 1.05; color: var(--fg); margin: 0 0 16px;
}
.docs-hero p { color: var(--muted); font-size: clamp(16px, 2.2vw, 19px); line-height: 1.6; margin: 0; }

.docs-cat { margin-bottom: 40px; }
.docs-cat-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; }
.docs-cat-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--accent); margin: 0;
}
.docs-cat-sub { color: var(--muted-soft); font-size: 13px; }

.docs-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.doc-card {
    display: flex; flex-direction: column; gap: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 18px; padding: 22px 22px 20px; text-decoration: none;
    transition: border-color .2s ease, transform .15s ease, background .2s ease;
    position: relative; overflow: hidden;
}
a.doc-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.doc-card-icon {
    width: 42px; height: 42px; border-radius: 12px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 127, 255, 0.12); color: var(--accent-hover);
    border: 1px solid rgba(0, 127, 255, 0.22);
}
.doc-card-icon svg { width: 22px; height: 22px; }
.doc-card-tag {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted-soft); margin-bottom: 8px;
}
.doc-card h3 { font-size: 18px; font-weight: 700; color: var(--fg); margin: 0 0 8px; letter-spacing: -0.01em; }
.doc-card p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 16px; flex: 1 1 auto; }
.doc-card-go { font-size: 14px; font-weight: 600; color: var(--accent-hover); display: inline-flex; align-items: center; gap: 6px; }
.doc-card-go .arr { transition: transform .18s ease; }
a.doc-card:hover .doc-card-go .arr { transform: translateX(3px); }
.doc-card.is-soon { pointer-events: none; opacity: 0.62; }
.doc-card.is-soon .doc-card-go { color: var(--muted-soft); }

/* ---------- ARTÍCULO ---------- */
.doc-article { max-width: 1080px; margin: 0 auto; padding: 36px 20px 96px; }

/* Layout: contenido + índice lateral pegajoso (desktop). */
.doc-layout { display: block; }
@media (min-width: 1000px) {
    .doc-layout { display: grid; grid-template-columns: 1fr 232px; gap: 56px; align-items: start; }
    .doc-toc { position: sticky; top: 32px; }
}

/* Portada del artículo */
.doc-head { margin-bottom: 40px; }
.doc-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--accent-hover);
    background: rgba(0, 127, 255, 0.1); border: 1px solid rgba(0, 127, 255, 0.24);
    padding: 6px 13px; border-radius: 999px;
}
.doc-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(30px, 6vw, 46px); font-weight: 800;
    letter-spacing: -0.032em; line-height: 1.08; color: var(--fg); margin: 0 0 18px;
}
.doc-deck { font-size: clamp(17px, 2.4vw, 20px); color: var(--fg-soft); line-height: 1.55; margin: 0; max-width: 60ch; }
.doc-byline { margin-top: 20px; font-size: 13px; color: var(--muted-soft); display: flex; gap: 16px; flex-wrap: wrap; }

/* Tipografía del cuerpo */
.doc-prose { font-size: 16.5px; line-height: 1.7; color: var(--fg-soft); }
.doc-prose > section { margin-bottom: 40px; scroll-margin-top: 24px; }
.doc-prose h2 {
    font-size: clamp(22px, 3.4vw, 28px); font-weight: 800; letter-spacing: -0.02em;
    color: var(--fg); margin: 0 0 16px; line-height: 1.2;
}
.doc-prose h3 { font-size: 18px; font-weight: 700; color: var(--fg); margin: 28px 0 10px; }
.doc-prose p { margin: 0 0 16px; }
.doc-prose a { color: var(--accent-hover); text-decoration: none; border-bottom: 1px solid rgba(0,127,255,.3); }
.doc-prose a:hover { border-bottom-color: var(--accent-hover); }
.doc-prose strong { color: var(--fg); font-weight: 650; }
.doc-prose ul { margin: 4px 0 18px; padding-left: 0; list-style: none; }
.doc-prose ul li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.doc-prose ul li::before {
    content: ""; position: absolute; left: 6px; top: 11px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--accent);
}

/* Chip inline para comandos / nombres técnicos */
.doc-chip {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em;
    background: var(--surface-soft); color: var(--fg); padding: 2px 7px;
    border-radius: 6px; border: 1px solid var(--border-soft); white-space: nowrap;
}

/* Callout / aviso (variantes por color) */
.doc-callout {
    display: flex; gap: 14px; padding: 18px 20px; border-radius: 16px; margin: 24px 0;
    background: var(--surface); border: 1px solid var(--border-light);
    border-left: 3px solid var(--accent);
}
.doc-callout .ic { flex: 0 0 auto; color: var(--accent-hover); margin-top: 1px; }
.doc-callout .ic svg { width: 22px; height: 22px; }
.doc-callout-body { font-size: 15px; line-height: 1.6; color: var(--fg-soft); }
.doc-callout-body strong { color: var(--fg); }
.doc-callout-body p { margin: 0; }
.doc-callout--secure { border-left-color: #34d399; }
.doc-callout--secure .ic { color: #34d399; }
.doc-callout--tip { border-left-color: #f5c842; }
.doc-callout--tip .ic { color: #f5c842; }

/* Diagrama de flujo (pasos numerados) */
.doc-flow { display: flex; flex-direction: column; gap: 0; margin: 26px 0; }
.doc-flow-step { position: relative; display: flex; gap: 18px; padding-bottom: 22px; }
.doc-flow-step:last-child { padding-bottom: 0; }
.doc-flow-step::before {
    content: ""; position: absolute; left: 17px; top: 38px; bottom: -4px; width: 2px;
    background: linear-gradient(var(--border-light), transparent);
}
.doc-flow-step:last-child::before { display: none; }
.doc-flow-num {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; color: #fff;
    background: linear-gradient(145deg, var(--accent-hover), var(--accent));
    box-shadow: 0 4px 14px rgba(0,127,255,.3);
}
.doc-flow-body { padding-top: 5px; }
.doc-flow-body h4 { font-size: 16px; font-weight: 700; color: var(--fg); margin: 0 0 4px; }
.doc-flow-body p { font-size: 14.5px; color: var(--muted); line-height: 1.55; margin: 0; }

/* Rejilla de tarjetas-concepto */
.doc-feature-grid { display: grid; gap: 14px; margin: 24px 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.doc-feature { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.doc-feature-ic {
    width: 38px; height: 38px; border-radius: 11px; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,127,255,.1); color: var(--accent-hover); border: 1px solid rgba(0,127,255,.2);
}
.doc-feature-ic svg { width: 20px; height: 20px; }
.doc-feature h4 { font-size: 15.5px; font-weight: 700; color: var(--fg); margin: 0 0 6px; }
.doc-feature p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; }

/* Tabla de especificaciones (term / valor) */
.doc-specs { margin: 24px 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.doc-spec-row { display: grid; grid-template-columns: 200px 1fr; gap: 18px; padding: 15px 20px; border-top: 1px solid var(--border-soft); }
.doc-spec-row:first-child { border-top: none; }
.doc-spec-row dt { color: var(--fg); font-weight: 600; font-size: 14.5px; }
.doc-spec-row dd { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0; }
@media (max-width: 560px) { .doc-spec-row { grid-template-columns: 1fr; gap: 4px; } }

/* Cita / frase destacada */
.doc-pull {
    margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent);
    font-size: clamp(18px, 2.6vw, 22px); font-weight: 600; color: var(--fg);
    line-height: 1.4; letter-spacing: -0.01em;
}

/* Índice lateral (TOC) */
.doc-toc { display: none; }
@media (min-width: 1000px) {
    .doc-toc { display: block; }
    .doc-toc-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-soft); margin: 0 0 12px; }
    .doc-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
    .doc-toc li { margin: 0; }
    .doc-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.4; transition: color .15s, border-color .15s; }
    .doc-toc a:hover { color: var(--fg); border-left-color: var(--border-light); }
}

/* Navegación inferior entre documentos */
.doc-nav { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); }
.doc-nav a {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px;
    font-size: 14px; font-weight: 600; text-decoration: none; color: var(--fg);
    border: 1px solid var(--border-light); background: transparent; transition: border-color .18s, background .18s;
}
.doc-nav a:hover { border-color: var(--accent); background: rgba(0,127,255,.06); }
.doc-nav a.next { background: var(--accent); border-color: var(--accent); color: #fff; }
.doc-nav a.next:hover { background: var(--accent-hover); }