/* ============================================================
   MinerOS Hub — Artículo / guía de la biblioteca
   Plantilla de prosa larga con TOC lateral, callouts y tablas.
   Reutiliza tokens del sistema. Scopeado bajo .article.
   ============================================================ */
.art-shell{display:grid;grid-template-columns:1fr minmax(0,720px) 1fr;gap:0;align-items:start}
.art-toc{position:sticky;top:96px;align-self:start;grid-column:1;justify-self:end;
  width:210px;margin-right:36px;padding-right:4px}
.art-toc h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);margin:0 0 12px}
.art-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
  border-left:1px solid var(--border)}
.art-toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;
  color:var(--text-2);font-size:.83rem;line-height:1.35;text-decoration:none;transition:.16s}
.art-toc a:hover{color:var(--text)}
.art-toc a.active{color:var(--gold);border-left-color:var(--gold);font-weight:600}

.article{grid-column:2;max-width:720px;font-size:1.05rem;line-height:1.72;color:var(--text)}
.article .art-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.75rem;color:var(--text-muted);letter-spacing:.02em;
  padding-bottom:22px;margin-bottom:8px;border-bottom:1px solid var(--border)}
.article .art-meta .am-au{display:inline-flex;align-items:center;gap:8px;color:var(--text-2)}
.article .art-meta .am-au img{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:1px solid var(--border-gold)}
.article .art-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-muted)}

.article h2{font-family:var(--display);font-size:1.55rem;line-height:1.2;letter-spacing:-.01em;
  margin:44px 0 14px;scroll-margin-top:96px}
.article h2 .h2-idx{color:var(--gold-2);font-family:var(--mono);font-size:1rem;margin-right:10px;font-weight:700}
.article h3{font-family:var(--display);font-size:1.16rem;margin:30px 0 10px}
.article p{margin:0 0 18px;color:var(--text-2)}
.article p strong,.article li strong{color:var(--text);font-weight:600}
.article a.inline{color:var(--gold-2);text-decoration:none;border-bottom:1px solid var(--border-gold)}
.article a.inline:hover{color:var(--gold)}
.article .lead{font-size:1.22rem;line-height:1.6;color:var(--text);margin:0 0 26px}

.article ul,.article ol.steps{margin:0 0 20px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.article ul li{position:relative;padding-left:26px;color:var(--text-2)}
.article ul li::before{content:"";position:absolute;left:6px;top:11px;width:6px;height:6px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.article ol.steps{counter-reset:st}
.article ol.steps li{position:relative;padding-left:44px;counter-increment:st;color:var(--text-2)}
.article ol.steps li::before{content:counter(st);position:absolute;left:0;top:-2px;width:28px;height:28px;
  display:grid;place-items:center;border-radius:9px;background:var(--gold-glow);border:1px solid var(--border-gold);
  color:var(--gold);font-family:var(--mono);font-weight:700;font-size:.82rem}

/* callout */
.callout{display:flex;gap:14px;padding:18px 20px;border-radius:14px;margin:22px 0;
  background:var(--bg-2);border:1px solid var(--border);border-left:3px solid var(--gold)}
.callout .co-ic{flex:0 0 auto;font-size:1.1rem;line-height:1.5}
.callout .co-b{font-size:.97rem;line-height:1.6;color:var(--text-2)}
.callout .co-b b{color:var(--text)}
.callout.warn{border-left-color:var(--red,#e8637a)}
.callout.tip{border-left-color:var(--green)}

/* tabla dentro de artículo */
.art-table-wrap{overflow-x:auto;margin:22px 0;border:1px solid var(--border);border-radius:14px}
.art-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:460px}
.art-table th,.art-table td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--border)}
.art-table thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);background:var(--bg-2)}
.art-table tbody tr:last-child td{border-bottom:0}
.art-table td:first-child{color:var(--text);font-weight:600}
.art-table .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--gold-2)}

/* bloque CTA a herramienta */
.art-toolcard{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  margin:28px 0;padding:20px 22px;border-radius:16px;background:linear-gradient(135deg,var(--gold-glow),var(--card));
  border:1px solid var(--border-gold)}
.art-toolcard .tc-t{font-family:var(--display);font-size:1.05rem;margin:0 0 3px}
.art-toolcard .tc-d{font-size:.88rem;color:var(--text-2);margin:0}
.art-toolcard .btn{flex:0 0 auto}

/* pie: firma + relacionados */
.art-foot{max-width:720px;margin:44px auto 0;grid-column:2}
.art-author{display:flex;gap:16px;align-items:center;padding:22px;border:1px solid var(--border-gold);border-radius:16px;background:var(--card)}
.art-author img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:1px solid var(--border-gold);flex:0 0 auto}
.art-author .aa-n{font-family:var(--display);font-weight:600;margin:0}
.art-author .aa-r{font-size:.85rem;color:var(--text-2);margin:3px 0 0}
.art-related{margin-top:30px}
.art-related h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:0 0 14px}
.art-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.art-rel-grid a{display:block;padding:16px 18px;border:1px solid var(--border);border-radius:13px;background:var(--card);
  text-decoration:none;transition:.18s}
.art-rel-grid a:hover{border-color:var(--border-gold);transform:translateY(-2px)}
.art-rel-grid .rl-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-2)}
.art-rel-grid .rl-t{display:block;margin-top:6px;color:var(--text);font-weight:600;font-size:.95rem;line-height:1.3}

@media(max-width:1080px){
  .art-shell{grid-template-columns:1fr;justify-items:center}
  .art-toc{display:none}
  .article,.art-foot{grid-column:1}
}
@media(max-width:600px){
  .article{font-size:1rem}
  .article .lead{font-size:1.1rem}
  .article h2{font-size:1.32rem}
  .art-rel-grid{grid-template-columns:1fr}
}