/* ============================================================================
   HRO · Documentación
   Los tokens de color NO viven acá: se importan de /assets/hro.css (la fuente
   única del sitio). Este archivo solo tiene los estilos propios de la doc.
   ============================================================================ */

@import url('/assets/hro.css?v=5');

*, *::before, *::after { box-sizing:border-box; }

body {
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--sans); font-size:16px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

a { color:inherit; text-decoration:none; }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }

/* ── Rastro de migas ── */

.crumbs {
    font-family:var(--mono); font-size:.78rem; color:var(--muted);
    padding:22px 0 0; display:flex; gap:8px; flex-wrap:wrap;
}
.crumbs a:hover { color:var(--accent); }
.crumbs span { opacity:.45; }

/* ── Estructura de dos columnas ── */

.docs { display:block; padding-bottom:96px; }

@media (min-width:960px) {
    .docs { display:grid; grid-template-columns:236px minmax(0,1fr); gap:56px; align-items:start; }
}

.rail { display:none; }

@media (min-width:960px) {
    .rail {
        display:block; position:sticky; top:88px;
        max-height:calc(100vh - 120px); overflow-y:auto;
        padding-top:34px;
    }
}
.rail h4 {
    margin:0 0 12px; font-family:var(--mono); font-size:.7rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.rail ol { list-style:none; margin:0 0 26px; padding:0; border-left:1px solid var(--border); }
.rail li a {
    display:block; padding:6px 0 6px 16px; margin-left:-1px;
    border-left:1px solid transparent; font-size:.88rem; color:var(--muted);
    transition:color .15s, border-color .15s;
}
.rail li a:hover { color:var(--text); border-left-color:var(--border); }

/* ── Artículo ── */

.article { padding-top:34px; max-width:74ch; }

.article h1 {
    font-size:clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem); line-height:1.12;
    letter-spacing:-.02em; margin:.2em 0 .3em; font-weight:700;
}
.lede {
    font-family:var(--serif); font-size:1.14rem; line-height:1.6;
    color:var(--muted); margin:0 0 40px;
}

.article h2 {
    font-size:1.42rem; line-height:1.25; letter-spacing:-.01em;
    margin:64px 0 6px; scroll-margin-top:92px; font-weight:700;
}
.article h3 {
    font-size:1.06rem; margin:36px 0 4px; scroll-margin-top:92px; font-weight:700;
}
.article p, .article li { color:color-mix(in srgb, var(--text) 88%, var(--muted)); }
.article p { margin:14px 0; }
.article ul, .article ol { margin:14px 0; padding-left:22px; }
.article li { margin:6px 0; }
.article strong { color:var(--text); font-weight:650; }
.article a:not(.anchor) { color:var(--accent); border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.article a:not(.anchor):hover { border-bottom-color:var(--accent); }

/* Enlace de ancla: aparece al pasar por el título, para copiar la URL exacta
   de la sección — es lo que usan los avisos del Health Check del panel. */
.anchor {
    font-family:var(--mono); color:var(--muted); opacity:0;
    margin-left:.4em; font-size:.7em; font-weight:400;
    transition:opacity .15s;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity:.6; }
.anchor:hover { opacity:1 !important; color:var(--accent); }

/* Ancla objetivo: destaca brevemente la sección a la que llegó el admin */
:target { animation:land 2.2s ease-out; }
@keyframes land {
    0%, 55% { background:color-mix(in srgb, var(--accent) 14%, transparent); }
    100%    { background:transparent; }
}
@media (prefers-reduced-motion:reduce) { :target { animation:none; } }

/* ── Código y terminal ── */

code {
    font-family:var(--mono); font-size:.88em;
    background:var(--surface-2); border:1px solid var(--border);
    border-radius:5px; padding:.12em .38em;
}

pre {
    margin:18px 0; padding:16px 18px; overflow-x:auto;
    background:var(--term-bg); border:1px solid var(--term-border);
    border-radius:11px; box-shadow:var(--shadow);
    font-family:var(--mono); font-size:.86rem; line-height:1.6;
    color:#cfd8ec;
}
pre code { background:none; border:0; padding:0; font-size:inherit; color:inherit; }
pre .c { color:var(--muted); }              /* comentario */
pre .k { color:var(--ansi-cyan); }          /* comando */
pre .s { color:var(--ansi-green); }         /* valor */
pre .w { color:var(--ansi-amber); }         /* advertencia */

/* ── Avisos ── */

.note {
    margin:22px 0; padding:15px 18px 15px 46px; position:relative;
    border:1px solid var(--border); border-radius:11px;
    background:var(--surface); font-size:.95rem;
}
.note::before {
    position:absolute; left:17px; top:14px;
    font-family:var(--mono); font-size:1rem; line-height:1.4;
}
.note p:first-child { margin-top:0; }
.note p:last-child { margin-bottom:0; }

.note.warn { border-color:color-mix(in srgb, var(--gold) 45%, var(--border)); background:color-mix(in srgb, var(--gold-soft) 55%, var(--surface)); }
.note.warn::before { content:"!"; color:var(--gold); font-weight:700; }

.note.danger { border-color:color-mix(in srgb, var(--ansi-red) 45%, var(--border)); background:color-mix(in srgb, var(--ansi-red) 8%, var(--surface)); }
.note.danger::before { content:"\00d7"; color:var(--ansi-red); font-weight:700; }

.note.ok { border-color:color-mix(in srgb, var(--ansi-green) 40%, var(--border)); background:color-mix(in srgb, var(--ansi-green) 7%, var(--surface)); }
.note.ok::before { content:"\2713"; color:var(--ansi-green); font-weight:700; }

/* ── Fila del Health Check ──────────────────────────────────────────────────
   Réplica del renglón que el administrador acaba de ver en su panel antes de
   pulsar "Guía". Es el puente visual entre el panel y la documentación: llega
   aquí y reconoce de inmediato el aviso que lo trajo.
   ------------------------------------------------------------------------- */

.hc {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    margin:24px 0; padding:12px 16px;
    border:1px solid var(--border); border-radius:11px;
    background:var(--surface); font-size:.9rem;
}
.hc::before {
    content:""; width:8px; height:8px; border-radius:50%; flex:0 0 auto;
    background:var(--gold);
}
.hc.err::before { background:var(--ansi-red); }
.hc.ok::before  { background:var(--ansi-green); }
.hc b { font-weight:650; }
.hc .msg { color:var(--muted); flex:1 1 260px; min-width:0; }
.hc .badge {
    font-family:var(--mono); font-size:.62rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase;
    padding:3px 8px; border-radius:6px;
    border:1px solid color-mix(in srgb, var(--gold) 40%, transparent);
    color:var(--gold); background:color-mix(in srgb, var(--gold) 10%, transparent);
}
.hc.err .badge { border-color:color-mix(in srgb, var(--ansi-red) 40%, transparent); color:var(--ansi-red); background:color-mix(in srgb, var(--ansi-red) 10%, transparent); }
.hc.ok .badge  { border-color:color-mix(in srgb, var(--ansi-green) 40%, transparent); color:var(--ansi-green); background:color-mix(in srgb, var(--ansi-green) 10%, transparent); }

/* ── Tarjetas de índice ── */

.grid { display:grid; gap:16px; margin:32px 0 0; }
@media (min-width:680px) { .grid.two { grid-template-columns:repeat(2,1fr); } }

.card {
    display:block; padding:22px 24px; border:1px solid var(--border);
    border-radius:14px; background:var(--surface);
    transition:border-color .18s, transform .18s;
}
.card:hover { border-color:var(--accent); transform:translateY(-2px); }
.card h3 { margin:0 0 6px; font-size:1.06rem; }
.card p { margin:0; color:var(--muted); font-size:.92rem; }
.card .tag {
    display:inline-block; margin-bottom:10px;
    font-family:var(--mono); font-size:.66rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.card.soon { opacity:.55; }
.card.soon:hover { border-color:var(--border); transform:none; }

/* ── Pie ── */

.foot {
    border-top:1px solid var(--border); padding:26px 0 40px;
    color:var(--muted); font-size:.85rem;
    display:flex; gap:18px; flex-wrap:wrap; align-items:center;
}
.foot a:hover { color:var(--text); }
.foot .sep { margin-inline:auto; }