/* ═══════════════════════════════════════════════
   THE VAULT — CYBERPUNK CSS SYSTEM
   vault.css — Shared styles for all pages
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap');

/* ─── TOKENS ─── */
:root {
  --cyan:      #00fff5;
  --magenta:   #ff00aa;
  --green:     #39ff14;
  --yellow:    #ffe500;
  --orange:    #ff6a00;
  /*--white: */ 
  --dark:      #050810;
  --dark2:     #090d1a;
  --dark3:     #0d1324;
  --panel:     rgba(0,255,245,0.04);
  --border:    rgba(0,255,245,0.12);
  --text:      #a8c0cc;
  --text-dim:  rgba(168,192,204,0.45);
  --glow-c:    0 0 8px #00fff5, 0 0 24px rgba(0,255,245,0.25);
  --glow-m:    0 0 8px #ff00aa, 0 0 24px rgba(255,0,170,0.25);
  --glow-g:    0 0 8px #39ff14, 0 0 24px rgba(57,255,20,0.25);
  --glow-y:    0 0 8px #ffe500, 0 0 24px rgba(255,229,0,0.25);
  --font-mono: 'Share Tech Mono', monospace;
  --font-hd:   'Orbitron', monospace;
  --font-body: 'Rajdhani', sans-serif;
}

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--dark);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: crosshair;
}

/* ─── GLOBAL BG ─── */
body::before {
  content:'';
  position:fixed; inset:0;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.13) 2px,rgba(0,0,0,0.13) 4px);
  pointer-events:none; z-index:9999;
}
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(0,255,245,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,245,0.025) 1px,transparent 1px);
  background-size:44px 44px;
  pointer-events:none; z-index:0;
}

/* ─── PARTICLES CANVAS ─── */
#particles { position:fixed; inset:0; z-index:1; pointer-events:none; }

/* ─── CORNER DECOS ─── */
.corner { position:fixed; width:52px; height:52px; pointer-events:none; z-index:200; opacity:.35; }
.corner.tl { top:64px; left:10px; border-top:1px solid var(--cyan); border-left:1px solid var(--cyan); }
.corner.tr { top:64px; right:10px; border-top:1px solid var(--cyan); border-right:1px solid var(--cyan); }
.corner.bl { bottom:10px; left:10px; border-bottom:1px solid var(--cyan); border-left:1px solid var(--cyan); }
.corner.br { bottom:10px; right:10px; border-bottom:1px solid var(--cyan); border-right:1px solid var(--cyan); }

/* ─── WRAPPER ─── */
.wrapper { position:relative; z-index:10; max-width:1280px; margin:0 auto; padding:0 28px; }

/* ═══════════════════════════
   NAVIGATION
═══════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(5,8,16,0.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  height:56px;
}
.nav-inner {
  max-width:1280px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
  height:100%;
}
.nav-logo {
  font-family:var(--font-hd); font-weight:900; font-size:1.05rem;
  color:var(--cyan); text-shadow:var(--glow-c);
  letter-spacing:.18em; text-decoration:none; white-space:nowrap;
}
.nav-logo em { color:var(--magenta); text-shadow:var(--glow-m); font-style:normal; }

.nav-links { display:flex; list-style:none; gap:0; }
.nav-links a {
  display:flex; align-items:center; gap:6px;
  height:56px; padding:0 16px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em;
  color:var(--text-dim); text-decoration:none; text-transform:uppercase;
  border-left:1px solid transparent;
  transition:color .2s, background .2s, border-color .2s;
}
.nav-links a:hover,
.nav-links a.active {
  color:var(--cyan); background:rgba(0,255,245,0.045);
  border-left-color:var(--cyan); text-shadow:var(--glow-c);
}
.nav-links li.bt a:hover, .nav-links li.bt a.active { color:var(--cyan); border-left-color:var(--cyan); }
.nav-links li.rt a:hover, .nav-links li.rt a.active { color:var(--magenta); background:rgba(255,0,170,.04); border-left-color:var(--magenta); text-shadow:var(--glow-m); }
.nav-links li.rc a:hover, .nav-links li.rc a.active { color:var(--green); background:rgba(57,255,20,.04); border-left-color:var(--green); text-shadow:var(--glow-g); }

.status-dot {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--green); box-shadow:var(--glow-g);
  animation:blink 2.2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ─── mobile nav ─── */
.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
.nav-hamburger span { display:block; width:22px; height:1px; background:var(--cyan); box-shadow:var(--glow-c); }

@media(max-width:900px){
  .nav-links { display:none; flex-direction:column; position:absolute; top:56px; left:0; right:0; background:rgba(5,8,16,.97); border-bottom:1px solid var(--border); }
  .nav-links.open { display:flex; }
  .nav-links a { height:48px; border-left:none; border-bottom:1px solid var(--border); padding:0 28px; }
  .nav-hamburger { display:flex; }
}

/* ═══════════════════════════
   PAGE SCAFFOLD
═══════════════════════════ */
.page-wrap { padding-top:56px; min-height:100vh; }

/* ─── PAGE HERO (sub-pages) ─── */
.page-hero {
  padding:80px 0 60px;
  position:relative; overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0;
  font-family:var(--font-hd); font-size:clamp(70px,14vw,200px); font-weight:900;
  color:transparent; -webkit-text-stroke:1px rgba(0,255,245,0.04);
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:5%; user-select:none; pointer-events:none; letter-spacing:-.02em;
  white-space:nowrap;
}
.page-hero-tag {
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.3em;
  text-transform:uppercase; margin-bottom:14px;
  display:flex; align-items:center; gap:12px;
}
.page-hero-tag::before { content:''; display:block; width:36px; height:1px; background:currentColor; box-shadow:0 0 6px currentColor; }
.page-hero-tag.cyan { color:var(--cyan); }
.page-hero-tag.magenta { color:var(--magenta); }
.page-hero-tag.green { color:var(--green); }

.page-hero h1 {
  font-family:var(--font-hd); font-weight:900;
  font-size:clamp(2rem,5vw,3.8rem); line-height:1;
  color:#fff; margin-bottom:14px;
}
.page-hero h1 span { color:var(--cyan); text-shadow:var(--glow-c); }
.page-hero h1 span.m { color:var(--magenta); text-shadow:var(--glow-m); }
.page-hero h1 span.g { color:var(--green); text-shadow:var(--glow-g); }

.page-hero p { font-size:1.05rem; color:var(--text-dim); max-width:520px; }

/* ═══════════════════════════
   SECTION HEADERS
═══════════════════════════ */
.sec-head {
  display:flex; align-items:center; gap:18px; margin-bottom:40px;
}
.sec-num { font-family:var(--font-mono); font-size:.62rem; color:var(--magenta); text-shadow:var(--glow-m); letter-spacing:.2em; white-space:nowrap; }
.sec-line { flex:1; height:1px; background:linear-gradient(90deg,rgba(255,0,170,.35),transparent); }
.sec-title { font-family:var(--font-hd); font-size:clamp(1.3rem,2.5vw,1.9rem); font-weight:700; color:#fff; white-space:nowrap; }
.sec-title span { color:var(--cyan); text-shadow:var(--glow-c); }

/* ═══════════════════════════
   CARDS
═══════════════════════════ */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:2px; }

.card {
  background:var(--dark2); border:1px solid var(--border);
  padding:30px; position:relative; overflow:hidden;
  transition:background .25s, border-color .25s, transform .25s;
  display:block; text-decoration:none; color:inherit;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  transform:scaleX(0); transition:transform .4s;
}
.card:hover { background:var(--dark3); border-color:rgba(0,255,245,.28); transform:translateY(-3px); }
.card:hover::before { transform:scaleX(1); }
.card.rt::before { background:linear-gradient(90deg,transparent,var(--magenta),transparent); }
.card.rt:hover { border-color:rgba(255,0,170,.28); }
.card.rc::before { background:linear-gradient(90deg,transparent,var(--green),transparent); }
.card.rc:hover { border-color:rgba(57,255,20,.28); }

.card-tag {
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; margin-bottom:18px;
  display:flex; align-items:center; gap:8px;
}
.card-tag.c { color:var(--cyan); }
.card-tag.m { color:var(--magenta); }
.card-tag.g { color:var(--green); }
.tag-dot { width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 5px currentColor; flex-shrink:0; }

.card-icon { font-size:2.2rem; margin-bottom:16px; display:block; }
.card h3 { font-family:var(--font-hd); font-size:1rem; font-weight:700; color:#fff; margin-bottom:10px; letter-spacing:.04em; }
.card p { font-size:.9rem; color:var(--text-dim); line-height:1.65; margin-bottom:20px; }

.chip-list { display:flex; flex-wrap:wrap; gap:6px; }
.chip {
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em;
  padding:3px 10px; border:1px solid currentColor; opacity:.55;
  transition:opacity .2s;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.card:hover .chip { opacity:1; }
.chip.c { color:var(--cyan); }
.chip.m { color:var(--magenta); }
.chip.g { color:var(--green); }

/* ═══════════════════════════
   BUTTONS
═══════════════════════════ */
.btn {
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:13px 28px; background:transparent; border:1px solid currentColor;
  cursor:pointer; text-decoration:none; display:inline-block; transition:all .2s;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.btn-c { color:var(--cyan); box-shadow:var(--glow-c); }
.btn-c:hover { background:rgba(0,255,245,.1); color:#fff; box-shadow:0 0 20px #00fff5,0 0 40px rgba(0,255,245,.35); }
.btn-m { color:var(--magenta); box-shadow:var(--glow-m); }
.btn-m:hover { background:rgba(255,0,170,.1); color:#fff; box-shadow:0 0 20px #ff00aa,0 0 40px rgba(255,0,170,.35); }
.btn-g { color:var(--green); box-shadow:var(--glow-g); }
.btn-g:hover { background:rgba(57,255,20,.1); color:#fff; }

/* ═══════════════════════════
   TERMINAL WIDGET
═══════════════════════════ */
.terminal {
  background:#020509; border:1px solid var(--border);
  font-family:var(--font-mono);
}
.terminal-bar {
  background:var(--dark3); border-bottom:1px solid var(--border);
  padding:9px 14px; display:flex; align-items:center; gap:7px;
}
.tb-dot { width:10px; height:10px; border-radius:50%; }
.tb-dot.r { background:#ff5f57; }
.tb-dot.y { background:#ffbd2e; }
.tb-dot.g { background:#28ca41; }
.tb-title { font-size:.62rem; color:var(--text-dim); letter-spacing:.15em; text-transform:uppercase; margin-left:6px; }
.terminal-body { padding:18px 20px; font-size:.76rem; line-height:2.05; min-height:220px; }
.t-prompt { color:var(--green); }
.t-cmd { color:#fff; }
.t-out { color:var(--text-dim); }
.t-c { color:var(--cyan); }
.t-m { color:var(--magenta); }
.t-g { color:var(--green); }
.t-y { color:var(--yellow); }
.t-dim { color:rgba(168,192,204,.25); }
.cursor { display:inline-block; width:7px; height:13px; background:var(--green); box-shadow:var(--glow-g); animation:cur 1s step-end infinite; vertical-align:text-bottom; margin-left:2px; }
@keyframes cur { 0%,100%{opacity:1} 50%{opacity:0} }

/* ═══════════════════════════
   POST LIST
═══════════════════════════ */
.post-list { display:flex; flex-direction:column; gap:2px; }
.post-row {
  background:var(--dark2); border:1px solid var(--border);
  padding:20px 28px; display:grid; grid-template-columns:110px 1fr auto;
  align-items:center; gap:24px;
  transition:background .2s, border-color .2s, padding-left .2s;
  text-decoration:none; color:inherit;
}
.post-row:hover { background:var(--dark3); border-color:rgba(0,255,245,.22); padding-left:36px; }
.post-date { font-family:var(--font-mono); font-size:.68rem; color:var(--text-dim); letter-spacing:.1em; }
.post-ttl { font-size:1rem; font-weight:600; color:#fff; }
.post-sub { font-size:.84rem; color:var(--text-dim); margin-top:2px; }
.badge { font-family:var(--font-mono); font-size:.58rem; padding:3px 10px; letter-spacing:.1em; white-space:nowrap; }
.badge.c { color:var(--cyan); border:1px solid rgba(0,255,245,.28); }
.badge.m { color:var(--magenta); border:1px solid rgba(255,0,170,.28); }
.badge.g { color:var(--green); border:1px solid rgba(57,255,20,.28); }
.badge.y { color:var(--yellow); border:1px solid rgba(255,229,0,.38); background:rgba(255,229,0,.06); text-shadow:var(--glow-y); }
.badge.o {color: var(--orange); border: 1px solid rgba(255,106,0,.40); box-shadow: 0 0 8px #ff6a00, 0 0 24px rgba(255,106,0,.25); }
/*Color Para futura sección de LABS*/
.badge.w {color: #ffffff; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 0 8px rgba(255,255,255,.35), 0 0 24px rgba(255,255,255,.15); }
.post-cat.yellow { color: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 6px rgba(255,229,0,.15); }
.post-cat.white  { color: #d0dde8; border-color: rgba(168,192,204,.4); }

/* ═══════════════════════════
   POST CONTENT (article page)
═══════════════════════════ */
.post-article { max-width:820px; }
.post-article h2 { font-family:var(--font-hd); color:var(--cyan); text-shadow:var(--glow-c); font-size:1.25rem; margin:2.2em 0 .8em; letter-spacing:.05em; }
.post-article h3 { font-family:var(--font-hd); color:var(--magenta); font-size:1rem; margin:1.8em 0 .6em; letter-spacing:.05em; }
.post-article p { color:var(--text); margin-bottom:1.2em; line-height:1.8; }
.post-article ul, .post-article ol { padding-left:1.5em; margin-bottom:1.2em; }
.post-article li { color:var(--text); margin-bottom:.4em; line-height:1.7; }
.post-article li::marker { color:var(--cyan); }
.post-article a { color:var(--cyan); text-decoration:none; border-bottom:1px solid rgba(0,255,245,.3); transition:border-color .2s; }
.post-article a:hover { border-bottom-color:var(--cyan); }
.post-article strong { color:#fff; }
.post-article blockquote { border-left:2px solid var(--magenta); padding:12px 20px; margin:1.5em 0; background:rgba(255,0,170,.04); }
.post-article blockquote p { color:rgba(168,192,204,.75); margin:0; }
.post-article pre { background:#020509; border:1px solid var(--border); border-left:2px solid var(--green); padding:20px; overflow-x:auto; margin:1.5em 0; border-radius:0; }
.post-article code { font-family:var(--font-mono); font-size:.82rem; color:var(--green); }
.post-article pre code { color:var(--text); }
.post-article .note { background:rgba(0,255,245,.04); border:1px solid rgba(0,255,245,.15); padding:16px 20px; margin:1.5em 0; }
.post-article .note::before { content:'// NOTE '; color:var(--cyan); font-family:var(--font-mono); font-size:.7rem; display:block; margin-bottom:6px; }
.post-article .warn { background:rgba(255,0,170,.04); border:1px solid rgba(255,0,170,.15); padding:16px 20px; margin:1.5em 0; }
.post-article .warn::before { content:'// WARNING '; color:var(--magenta); font-family:var(--font-mono); font-size:.7rem; display:block; margin-bottom:6px; }

/* ═══════════════════════════
   FOOTER
═══════════════════════════ */
footer {
  /*border-top:1px solid var(--border); padding:40px 0; text-align:center;*/   
  border-top:1px solid rgba(255,0,170,0.4); box-shadow:0 -1px 20px rgba(255,0,170,0.12); padding:40px 0; text-align:center;
  margin-top:80px; position:relative; z-index:10;
  .footer-logo em { color: var(--magenta); font-style: normal; text-shadow: var(--glow-m); } 
}
.footer-logo { font-family:var(--font-hd); font-weight:900; font-size:1.4rem; color:var(--cyan); text-shadow:var(--glow-c); letter-spacing:.15em; margin-bottom:16px; }
.footer-links { display:flex; justify-content:center; gap:28px; list-style:none; margin:14px 0; }
.footer-links a { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; color:var(--text-dim); text-decoration:none; text-transform:uppercase; transition:color .2s; }
.footer-links a:hover { color:var(--cyan); text-shadow:var(--glow-c); }
.footer-copy { font-family:var(--font-mono); font-size:.6rem; color:rgba(168,192,204,.2); letter-spacing:.18em; }

/* ═══════════════════════════
   STATS BAR
═══════════════════════════ */
.stats-bar {
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--panel); padding:22px 0; margin:70px 0;
  position:relative; overflow:hidden;
}
.stats-bar::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(0,255,245,.05),transparent); animation:sweep 5s ease-in-out infinite; }
@keyframes sweep { to{left:150%} }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item { padding:0 28px; border-right:1px solid var(--border); text-align:center; }
.stat-item:last-child { border-right:none; }
.stat-n { font-family:var(--font-hd); font-size:2rem; font-weight:700; color:var(--cyan); text-shadow:var(--glow-c); display:block; }
.stat-l { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); margin-top:3px; }

/* ═══════════════════════════
   SCROLL REVEAL
═══════════════════════════ */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ═══════════════════════════
   GLITCH
═══════════════════════════ */
@keyframes glitch-a {
  0%   { clip-path:inset(40% 0 61% 0); transform:translate(-2px) }
  20%  { clip-path:inset(92% 0 1% 0);  transform:translate(1px) }
  40%  { clip-path:inset(25% 0 58% 0); transform:translate(3px) }
  60%  { clip-path:inset(54% 0 7% 0);  transform:translate(-1px) }
  80%  { clip-path:inset(100% 0 0 0);  transform:translate(0) }
  100% { clip-path:inset(0 0 0 0);     transform:translate(0) }
}
.glitch { position:relative; display:inline-block; }
.glitch::before, .glitch::after { content:attr(data-text); position:absolute; top:0; left:0; font:inherit; color:inherit; white-space:nowrap; }
.glitch::before { color:var(--magenta); animation:glitch-a 3.5s infinite; animation-delay:.6s; opacity:.65; }
.glitch::after  { color:var(--cyan);    animation:glitch-a 3.5s infinite reverse; animation-delay:1.1s; opacity:.65; }

/* ─── DIVIDER ─── */
.divider { border:none; border-top:1px solid var(--border); margin:60px 0; }

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stat-item:nth-child(2) { border-right:none; }
  .post-row { grid-template-columns:1fr; gap:8px; }
  .post-date { display:none; }
  .cards-grid { grid-template-columns:1fr; }
  .page-hero h1 { font-size:2rem; }
}

/* ---TABLES FOR POSTS--*/ 
.post-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0 34px;
  background: rgba(0, 255, 245, 0.025);
  border: 1px solid rgba(0, 255, 245, 0.16);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text);
}

.post-article thead {
  background: rgba(0, 255, 245, 0.06);
}

.post-article th {
  padding: 14px 16px;
  text-align: left;
  color: var(--cyan);
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  border-bottom: 1px solid rgba(0, 255, 245, 0.18);
}

.post-article td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(0, 255, 245, 0.12);
  border-right: 1px solid rgba(0, 255, 245, 0.10);
  vertical-align: top;
}

.post-article td:last-child,
.post-article th:last-child {
  border-right: none;
}

.post-article tr:nth-child(even) {
  background: rgba(0, 255, 245, 0.025);
}

.post-article tr:hover {
  background: rgba(0, 255, 245, 0.055);
}

/*--TABLES FOR RESPOSNIVE MOBILEPH ---*/ 
@media (max-width: 700px) {
  .post-article table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
/* ═══════════════════════════
   POST LAYOUT — RESPONSIVE
   Aplica a todos los posts automáticamente
═══════════════════════════ */
 
/* Pre/code — scroll horizontal en lugar de desbordar */
.post-article pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  word-wrap: normal;
}
.post-article pre code {
  white-space: pre;
  word-break: normal;
  display: block;
}
 
/* Imágenes responsivas */
.post-article img {
  max-width: 100%;
  height: auto;
  display: block;
}
 
/* Pantallas grandes >= 1440px: centrar y limitar ancho */
@media(min-width:1440px) {
  .wrapper { max-width:1240px; }
}
 
/* Tablet y móvil <= 900px */
@media(max-width:900px) {
  /* El grid pasa a una sola columna — el TOC sube arriba del artículo */
  .post-layout {
    grid-template-columns: 1fr !important;
  }
  .toc {
    position: static !important;
    margin-bottom: 28px;
    order: -1; /* TOC arriba del artículo */
  }
  .post-article {
    min-width: 0;
    overflow-x: hidden;
  }
  /* Padding lateral más estrecho en móvil */
  .wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Títulos del artículo adaptativos */
  .post-article h1 {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
  }
  .post-article h2 {
    font-size: clamp(1.05rem, 4vw, 1.3rem) !important;
  }
}
 
/* Nota TFG — estilo reutilizable para cualquier post */
/*.tfg-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(0,255,245,.04);
  border: 1px solid rgba(0,255,245,.18);
  border-left: 3px solid var(--cyan);
  padding: 16px 20px;
  margin: 40px 0;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--text-dim);
}
.tfg-note a { color: var(--cyan); text-decoration: none; }
.tfg-note a:hover { text-shadow: var(--glow-c); }
.tfg-note .tfg-icon { font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }*/
/* Nota TFG */
.tfg-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(0,255,245,.06);
  border: 1px solid rgba(0,255,245,.32);
  border-left: 4px solid var(--cyan);
  box-shadow: 0 0 22px rgba(0,255,245,.08);
  padding: 16px 20px;
  margin: 40px 0;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--text-dim);
}

.tfg-note strong {
  color: var(--cyan);
  text-shadow: var(--glow-c);
}

.tfg-note a {
  color: var(--cyan);
  text-decoration: none;
}

.tfg-note a:hover {
  text-shadow: var(--glow-c);
}

.tfg-note .tfg-icon {
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.tfg-note p {
  margin: 0 0 8px;
}

.tfg-note p:last-child {
  margin-bottom: 0;
}

/* ── POST-CAT badges (usados en index.html renderHome) ── */
.post-cat {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  padding: 3px 10px;
  border: 1px solid;
  white-space: nowrap;
  text-transform: uppercase;
}
.post-cat.blue  { color: var(--cyan);    border-color: var(--cyan);    box-shadow: 0 0 6px rgba(0,255,245,.15); }
.post-cat.red   { color: var(--magenta); border-color: var(--magenta); box-shadow: 0 0 6px rgba(255,0,170,.15); }
.post-cat.green { color: var(--green);   border-color: var(--green);   box-shadow: 0 0 6px rgba(57,255,20,.15); }
.post-cat.ctf   { color: var(--yellow);  border-color: var(--yellow);  box-shadow: var(--glow-y); }
.post-cat.orange { color: var(--orange); border-color: var(--orange);  box-shadow: 0 0 8px #ff6a00, 0 0 24px rgba(255,106,0,.25); }
.post-cat.white,
.post-cat.labs {color: #ffffff; border-color: rgba(255,255,255,.65); box-shadow: 0 0 8px rgba(255,255,255,.35), 0 0 24px rgba(255,255,255,.15); }

/* ═══════════════════════════
   RESOURCES — TERMINAL INTERACTIVO DEL INDEX INSIDE TERMINAL
═══════════════════════════ */

.hidden {
  display: none !important;
}

.terminal-section-index {
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
}

.terminal-loader-line {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 14px 0 16px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .08em;
}

.loader-bracket {
  color: var(--green);
  text-shadow: var(--glow-g);
}

.loader-blocks {
  letter-spacing: 0;
}

#loader-filled {
  color: var(--magenta);
  text-shadow: var(--glow-m);
}

#loader-empty {
  color: rgba(255,255,255,.22);
  text-shadow: none;
}

.loader-loaded {
  margin-left: 10px;
  color: var(--magenta);
  text-shadow: var(--glow-m);
  letter-spacing: .12em;
}

.terminal-link {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,255,245,.08);
  transition: color .2s, text-shadow .2s, padding-left .2s;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 30;
}

.terminal-link:hover {
  color: var(--cyan);
  text-shadow: var(--glow-c);
  padding-left: 8px;
}

.terminal-link:hover .t-g {
  color: var(--magenta);
  text-shadow: var(--glow-m);
}

.terminal-body {
  position: relative;
  z-index: 20;
}