/* Sharvis Lab — Modo Taller · hoja compartida de artículos
   Tokens idénticos a index.html para que todo se vea nativo. */

:root{
  --bg-color:#080a0c;
  --card-bg:#111418;
  --card-bg-2:#171c21;
  --neon-green:#00ff66;
  --text-main:#ffffff;
  --text-dim:#94a3b8;
  --border-color:#1e293b;
  --warn:#fbbf24;
  --crit:#f87171;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg-color);
  color:var(--text-main);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---------- navegación ---------- */
.nav{
  position:sticky; top:0; z-index:30;
  background:rgba(8,10,12,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-color);
}
.nav-inner{
  max-width:860px; margin:0 auto;
  padding:14px 20px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.brand{font-weight:800; font-size:20px; letter-spacing:-.025em; text-decoration:none; color:var(--text-main)}
.brand b{color:var(--neon-green)}
.nav a.link{color:var(--text-dim); text-decoration:none; font-size:14.5px; font-weight:500}
.nav a.link:hover{color:var(--neon-green)}
.nav a.link:focus-visible, .brand:focus-visible{outline:2px solid var(--neon-green); outline-offset:3px; border-radius:4px}

/* ---------- estructura ---------- */
.wrap{max-width:760px; margin:0 auto; padding:0 20px 90px}

.crumb{
  font-size:13px; color:var(--text-dim);
  padding:26px 0 0;
}
.crumb a{color:var(--text-dim); text-decoration:none}
.crumb a:hover{color:var(--neon-green)}

article h1{
  font-size:clamp(28px,5.5vw,40px);
  line-height:1.15; letter-spacing:-.02em;
  margin:14px 0 12px; font-weight:800;
  text-wrap:balance;
}
.meta{
  font-size:13.5px; color:var(--text-dim);
  padding-bottom:22px; margin-bottom:28px;
  border-bottom:1px solid var(--border-color);
}
.lede{font-size:19px; color:#cbd5e1; margin:0 0 26px}

article h2{
  font-size:24px; font-weight:700; letter-spacing:-.015em;
  margin:40px 0 10px; text-wrap:balance;
}
article h3{font-size:18.5px; font-weight:600; margin:28px 0 8px}
article p{margin:0 0 17px}
article ul, article ol{margin:0 0 17px; padding-left:22px}
article li{margin-bottom:8px}
article strong{font-weight:600; color:#fff}
article a{color:var(--neon-green)}

/* ---------- piezas ---------- */
.formula{
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-left:3px solid var(--neon-green);
  border-radius:10px;
  padding:18px 20px;
  margin:24px 0;
  font-family:"JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size:15px;
  line-height:1.8;
  overflow-x:auto;
}
.formula .r{color:var(--neon-green); font-weight:600}

.callout{
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:10px;
  padding:18px 20px;
  margin:24px 0;
}
.callout.warn{border-color:rgba(251,191,36,.35)}
.callout .tag{
  display:block; font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--neon-green); margin-bottom:8px;
}
.callout.warn .tag{color:var(--warn)}
.callout p:last-child{margin-bottom:0}

.tbl-scroll{overflow-x:auto; margin:24px 0; border:1px solid var(--border-color); border-radius:10px; background:var(--card-bg)}
table{border-collapse:collapse; width:100%; font-size:15px; min-width:420px}
th{
  text-align:left; padding:11px 15px;
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); border-bottom:1px solid var(--border-color); white-space:nowrap;
}
td{padding:11px 15px; border-bottom:1px solid var(--border-color); vertical-align:top}
tr:last-child td{border-bottom:none}
td.num{font-family:"JetBrains Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
tfoot td{font-weight:600; color:var(--neon-green); border-top:1px solid var(--border-color)}

.cta{
  display:block;
  background:linear-gradient(135deg, rgba(0,255,102,.12), rgba(0,255,102,.04));
  border:1px solid rgba(0,255,102,.3);
  border-radius:12px;
  padding:22px;
  margin:36px 0 0;
  text-decoration:none;
  color:var(--text-main);
}
.cta b{display:block; font-size:18px; margin-bottom:5px; color:var(--neon-green)}
.cta span{font-size:15px; color:var(--text-dim)}
.cta:hover{border-color:rgba(0,255,102,.55)}

/* ---------- listado del blog ---------- */
.post-list{display:grid; gap:14px; margin-top:26px}
.post-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:12px;
  padding:20px 22px;
}
.post-card:hover{border-color:rgba(0,255,102,.4)}
.post-card h2{font-size:20px; margin:0 0 6px; letter-spacing:-.01em}
.post-card p{margin:0 0 10px; color:var(--text-dim); font-size:15.5px}
.post-card .m{font-size:12.5px; color:var(--text-dim); font-family:"JetBrains Mono", ui-monospace, monospace}

/* ---------- pie ---------- */
footer{
  border-top:1px solid var(--border-color);
  margin-top:60px; padding:24px 20px 40px;
  color:var(--text-dim); font-size:14px;
}
.footer-inner{max-width:760px; margin:0 auto; display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between}
footer a{color:var(--text-dim); text-decoration:none}
footer a:hover{color:var(--neon-green)}

@media (max-width:560px){
  body{font-size:16.5px}
  .nav-inner{gap:14px}
}