/* ============================================================================
   NEUTRINO.SANDBOX
   Estructura editorial inspirada en teamfortress.com
   Lenguaje visual (terminal de fósforo verde) tomado de tito.host
   ========================================================================== */

:root{
  --bg:        #050505;
  --bg-2:      #080a08;
  --panel:     rgba(0,255,65,.035);
  --panel-2:   rgba(0,255,65,.06);

  --green:     #00FF41;
  --green-70:  rgba(0,255,65,.70);
  --green-50:  rgba(0,255,65,.50);
  --green-30:  rgba(0,255,65,.30);
  --green-18:  rgba(0,255,65,.18);
  --green-08:  rgba(0,255,65,.08);

  --text:      #e5e7eb;
  --muted:     rgba(229,231,235,.55);
  --dim:       rgba(229,231,235,.35);

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'Rajdhani', system-ui, sans-serif;

  --glow: 0 0 6px rgba(0,255,65,.55), 0 0 18px rgba(0,255,65,.22);
  --maxw: 1180px;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(0,255,65,.075), transparent 62%),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--green); text-decoration:none; }
a:hover{ text-shadow:var(--glow); }

img{ max-width:100%; height:auto; display:block; }

::selection{ background:var(--green); color:#000; }

/* ── overlays de ambiente ─────────────────────────────────────────────────── */
.scanlines{
  position:fixed; inset:0; z-index:900; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0 2px, rgba(0,0,0,.55) 2px 4px);
  mix-blend-mode:multiply;
}
.vignette{
  position:fixed; inset:0; z-index:899; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.75) 100%);
}

/* ── marco de terminal ────────────────────────────────────────────────────── */
.terminal{
  max-width:var(--maxw);
  margin:26px auto 46px;
  border:1px solid var(--green-30);
  background:linear-gradient(180deg, rgba(0,255,65,.03), transparent 260px), var(--bg-2);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 42px rgba(0,255,65,.09), inset 0 0 90px rgba(0,255,65,.02);
  position:relative;
}

/* ── barra de ventana ─────────────────────────────────────────────────────── */
.term-bar{
  display:flex; align-items:center; gap:16px;
  padding:9px 16px;
  border-bottom:1px solid var(--green-18);
  background:rgba(0,255,65,.045);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
}
.term-dots{ display:flex; gap:6px; flex:none; }
.term-dots span{
  width:9px; height:9px; border-radius:50%;
  border:1px solid var(--green-50); background:var(--green-08);
}
.term-dots span:first-child{ background:var(--green-30); }
.term-title{ color:var(--green-70); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.term-title .sep{ color:var(--green-30); }
.term-links{ margin-left:auto; display:flex; gap:18px; flex:none; }
.term-links a{ color:var(--dim); transition:color .15s, text-shadow .15s; }
.term-links a:hover{ color:var(--green); text-shadow:var(--glow); }
.term-links .ext{ opacity:.5; margin-left:3px; }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding:74px 24px 62px; text-align:center;
  border-bottom:1px solid var(--green-18);
}
.hero-grid{
  position:absolute; inset:0; opacity:.28;
  background-image:
    linear-gradient(var(--green-08) 1px, transparent 1px),
    linear-gradient(90deg, var(--green-08) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse at 50% 40%, #000 5%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 5%, transparent 72%);
}
.hero > *:not(.hero-grid){ position:relative; z-index:1; }

.hero-kicker{
  margin:0 0 18px; font-family:var(--mono); font-size:11px;
  letter-spacing:.42em; color:var(--green-70); text-transform:uppercase;
}
.hero-title{
  margin:0; font-size:clamp(1.65rem, 8.4vw, 5.4rem); font-weight:700;
  letter-spacing:.06em; line-height:1.05; color:var(--green);
  overflow-wrap:break-word; max-width:100%; padding:0 4px;
  text-shadow:0 0 10px rgba(0,255,65,.65), 0 0 34px rgba(0,255,65,.35), 0 0 78px rgba(0,255,65,.18);
}
.hero-title i{ font-style:normal; color:#eafff0; text-shadow:0 0 8px rgba(0,255,65,.9), 0 0 26px rgba(0,255,65,.5); }
.hero-sub{
  margin:16px 0 0; font-family:var(--mono); font-size:12px;
  letter-spacing:.36em; color:var(--muted); text-transform:uppercase;
}
.hero-status{
  margin:30px auto 0; display:inline-flex; flex-wrap:wrap; gap:8px 26px;
  justify-content:center; padding:10px 22px;
  border:1px dashed var(--green-30);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--dim);
}
.hero-status b{ color:var(--green); font-weight:500; }

/* ── navegación principal (fila de pestañas, tipo TF2) ────────────────────── */
.mainnav{
  display:flex; flex-wrap:wrap; align-items:stretch;
  border-bottom:1px solid var(--green-18);
  background:rgba(0,0,0,.45);
  position:sticky; top:0; z-index:800;
  backdrop-filter:blur(6px);
}
.mainnav a{
  padding:14px 26px;
  font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  color:var(--muted); border-right:1px solid var(--green-08);
  transition:background .15s, color .15s;
}
.mainnav a:hover{ background:var(--green-08); color:var(--green); text-shadow:none; }
.mainnav a.on{
  color:var(--green); background:var(--green-08);
  box-shadow:inset 0 -2px 0 var(--green);
  text-shadow:0 0 8px rgba(0,255,65,.5);
}

/* ── layout de dos columnas ───────────────────────────────────────────────── */
.shell{
  display:grid; grid-template-columns:minmax(0,1fr) 296px;
  gap:0; align-items:start;
}
.feed{ padding:34px 38px 46px; min-width:0; }
.side{
  padding:34px 22px 46px;
  border-left:1px solid var(--green-18);
  background:rgba(0,255,65,.018);
  position:sticky; top:47px;
}

/* ── cabecera de sección ──────────────────────────────────────────────────── */
.sec-head{
  display:flex; align-items:baseline; gap:14px;
  margin:0 0 26px; padding-bottom:12px;
  border-bottom:1px solid var(--green-18);
}
.sec-head h2{
  margin:0; font-family:var(--mono); font-size:13px; font-weight:700;
  letter-spacing:.26em; color:var(--green); text-transform:uppercase;
}
.sec-head .count{ font-family:var(--mono); font-size:11px; color:var(--dim); margin-left:auto; }

/* ── filtros / pestañas secundarias ───────────────────────────────────────── */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px; }
.tabs a{
  padding:6px 15px; border:1px solid var(--green-18);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--muted); text-transform:uppercase;
  transition:.15s;
}
.tabs a:hover{ border-color:var(--green-50); color:var(--green); text-shadow:none; }
.tabs a.on{ background:var(--green); color:#000; border-color:var(--green); font-weight:700; }

/* ── entradas del feed ────────────────────────────────────────────────────── */
.post{ padding:0 0 30px; margin:0 0 30px; border-bottom:1px solid var(--green-08); }
.post:last-child{ border-bottom:0; margin-bottom:0; }

.post-tags{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.tag{
  display:inline-block; padding:2.5px 9px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; font-weight:700;
  border:1px solid var(--green-50); color:var(--green); background:var(--green-08);
}
.tag.changelog{ border-color:var(--green); background:var(--green); color:#000; }
.tag.noticia{ border-color:#fff; color:#fff; background:rgba(255,255,255,.08); }
.tag.blog{ border-color:var(--green-50); color:var(--green-70); background:transparent; }
.tag.ver{ border-style:dashed; }
.tag.pin{ border-color:var(--green-30); color:var(--dim); }

.post h2.post-title{ margin:0 0 4px; font-size:2.1rem; font-weight:700; line-height:1.12; letter-spacing:.01em; }
.post h2.post-title a{ color:var(--green); text-shadow:0 0 14px rgba(0,255,65,.28); }
.post h2.post-title a:hover{ color:#fff; text-shadow:0 0 14px rgba(255,255,255,.5); }

.post-meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--dim); margin:0 0 14px;
}
.post-meta b{ color:var(--muted); font-weight:400; }

.post-cover{ margin:0 0 16px; border:1px solid var(--green-18); }
.post-excerpt{ margin:0 0 16px; color:var(--muted); max-width:70ch; }

.readmore{
  display:inline-block; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; color:var(--green); text-transform:uppercase;
}
.readmore::before{ content:'> '; color:var(--green-50); }
.readmore:hover{ letter-spacing:.26em; transition:letter-spacing .18s; }

/* ── artículo completo ────────────────────────────────────────────────────── */
.article h1{
  margin:6px 0 6px; font-size:clamp(2rem,4.6vw,3rem); line-height:1.08;
  color:var(--green); text-shadow:0 0 18px rgba(0,255,65,.3);
}
.prose{ max-width:74ch; color:#d6dbd8; }
.prose h2{ margin:2.1em 0 .5em; font-size:1.55rem; color:var(--green); letter-spacing:.02em; }
.prose h3{ margin:1.7em 0 .4em; font-size:1.25rem; color:#fff; }
.prose h4{ margin:1.5em 0 .3em; font-size:1.05rem; color:var(--muted); font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.prose p{ margin:0 0 1.05em; }
.prose ul,.prose ol{ margin:0 0 1.15em; padding-left:1.3em; }
.prose li{ margin:.28em 0; }
.prose ul{ list-style:none; padding-left:1.25em; }
.prose ul > li::before{ content:'▸'; color:var(--green); margin-left:-1.25em; margin-right:.55em; font-size:.85em; }
.prose ol li::marker{ color:var(--green); font-family:var(--mono); font-size:.85em; }
.prose blockquote{
  margin:1.4em 0; padding:.7em 1.1em;
  border-left:2px solid var(--green); background:var(--green-08);
  color:var(--muted); font-style:normal;
}
.prose code{
  font-family:var(--mono); font-size:.85em; padding:.12em .42em;
  background:var(--green-08); border:1px solid var(--green-18); color:var(--green);
}
.prose .md-pre{
  margin:1.4em 0; padding:1em 1.1em; overflow-x:auto;
  background:rgba(0,0,0,.55); border:1px solid var(--green-18);
}
.prose .md-pre code{ background:none; border:0; padding:0; color:#bff5cd; line-height:1.55; }
.prose hr{ border:0; border-top:1px dashed var(--green-30); margin:2em 0; }
.prose img{ margin:1.4em 0; border:1px solid var(--green-18); }
.prose a{ text-decoration:underline; text-underline-offset:3px; }

.article-foot{
  margin:44px 0 0; padding-top:20px; border-top:1px solid var(--green-18);
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
}

/* ── sidebar ──────────────────────────────────────────────────────────────── */
.widget{ margin:0 0 26px; border:1px solid var(--green-18); background:rgba(0,0,0,.3); }
.widget h3{
  margin:0; padding:9px 13px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; font-weight:700;
  color:var(--green); background:var(--green-08);
  border-bottom:1px solid var(--green-18); text-transform:uppercase;
}
.widget .wbody{ padding:13px; font-size:15px; color:var(--muted); }

.ipbox{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12.5px; color:var(--green);
  background:rgba(0,255,65,.06); border:1px dashed var(--green-30);
  padding:9px 11px; word-break:break-all;
}
.btn{
  display:block; width:100%; margin-top:10px; padding:9px 12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-align:center;
  color:var(--green); background:transparent; border:1px solid var(--green-50);
  cursor:pointer; text-transform:uppercase; transition:.15s;
}
.btn:hover{ background:var(--green); color:#000; text-shadow:none; }
.btn.solid{ background:var(--green); color:#000; font-weight:700; }
.btn.solid:hover{ background:#fff; border-color:#fff; }

.mini{ list-style:none; margin:0; padding:0; }
.mini li{ border-bottom:1px solid var(--green-08); }
.mini li:last-child{ border-bottom:0; }
.mini a{ display:block; padding:9px 13px; color:var(--muted); font-size:14.5px; line-height:1.35; }
.mini a:hover{ background:var(--green-08); color:var(--green); text-shadow:none; }
.mini .d{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--dim); margin-top:3px; }

.searchbox{ display:flex; }
.searchbox input{
  flex:1; min-width:0; padding:8px 10px;
  background:rgba(0,0,0,.5); border:1px solid var(--green-18); border-right:0;
  color:var(--text); font-family:var(--mono); font-size:12px;
}
.searchbox input:focus{ outline:none; border-color:var(--green-50); }
.searchbox button{
  padding:8px 13px; background:var(--green-08); border:1px solid var(--green-50);
  color:var(--green); font-family:var(--mono); font-size:12px; cursor:pointer;
}
.searchbox button:hover{ background:var(--green); color:#000; }

/* ── paginación ───────────────────────────────────────────────────────────── */
.pager{
  display:flex; gap:8px; align-items:center; justify-content:center;
  margin-top:38px; padding-top:22px; border-top:1px solid var(--green-18);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
}
.pager a,.pager span{ padding:6px 12px; border:1px solid var(--green-18); color:var(--muted); }
.pager a:hover{ border-color:var(--green-50); color:var(--green); text-shadow:none; }
.pager .on{ background:var(--green); color:#000; border-color:var(--green); font-weight:700; }
.pager .off{ opacity:.3; }

/* ── vacío / errores ──────────────────────────────────────────────────────── */
.empty{
  padding:56px 24px; text-align:center; border:1px dashed var(--green-30);
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--dim);
}
.empty b{ display:block; color:var(--green); font-size:16px; margin-bottom:10px; letter-spacing:.24em; }

/* ── pie ──────────────────────────────────────────────────────────────────── */
.term-foot{
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center;
  padding:14px 18px; border-top:1px solid var(--green-18);
  background:rgba(0,255,65,.03);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--dim);
  text-transform:uppercase;
}
.term-foot .sep{ color:var(--green-30); }
.term-foot .foot-c{ display:flex; gap:16px; }
.term-foot .foot-c a{ color:var(--muted); }
.term-foot .foot-c a:hover{ color:var(--green); }
.term-foot .foot-r{ margin-left:auto; }

/* ── cursor parpadeante reutilizable ──────────────────────────────────────── */
.caret::after{
  content:'_'; color:var(--green); animation:blink 1.1s steps(1) infinite; margin-left:2px;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .shell{ grid-template-columns:1fr; }
  .side{ border-left:0; border-top:1px solid var(--green-18); position:static; }
  .feed{ padding:26px 20px 34px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .terminal{ margin:0; border-left:0; border-right:0; }
  .term-links{ display:none; }
  .hero{ padding:46px 14px 40px; }
  .hero-title{ letter-spacing:.02em; }
  .hero-kicker{ letter-spacing:.24em; font-size:10px; }
  .hero-sub{ letter-spacing:.22em; font-size:10.5px; }
  .hero-status{ gap:6px 16px; padding:9px 14px; font-size:9.5px; letter-spacing:.1em; }
  .mainnav a{ padding:12px 15px; font-size:11px; letter-spacing:.14em; }
  .post h2.post-title{ font-size:1.6rem; }
  .term-foot{ font-size:9.5px; }
  .term-foot .foot-r{ margin-left:0; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .scanlines{ display:none; }
}