/* ══════════════════════════════════════════════
   BUDA HACK SECURITY — main.css
   Classified / Ultra-Secret Dark Web Theme
══════════════════════════════════════════════ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&family=Roboto+Mono:wght@400;700&display=swap');

/* ── ROOT VARS ──
   FIX: nombres semánticos correctos (antes --green valía #990000)
─────────────────────────────────────────────── */
:root {
  --green:        #00ff41;
  --green-dim:    rgba(0,255,65,0.18);
  --green-glow:   rgba(0,255,65,0.35);
  --red:        #cc0000;
  --red-bright: #ff1111;
  --red-dim:    #660000;
  --red-dark:   #990000;
  --red-glow:   rgba(204,0,0,0.35);
  --red-trace:  rgba(204,0,0,0.12);
  --yellow:     #ff0000;   /* usado en alert border */
  --bg:         #000000;
  --bg2:        #050000;
  --surface:    rgba(8,0,0,0.90);
  --text:       #e8e8e8;
  --text-dim:   #888888;
  --mono:       'Share Tech Mono', 'Roboto Mono', 'Courier New', monospace;
  --display:    'VT323', 'Courier New', monospace;
}

/* ── RESET / BODY ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(100,0,0,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(70,0,0,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 80%, rgba(50,0,0,0.12) 0%, transparent 50%),
    linear-gradient(160deg, #0c0000 0%, #060000 30%, #080000 60%, #050000 100%);
  color: var(--text);
  font-family: var(--mono);
  overflow-x: hidden;
  padding-top: 28px;
  padding-bottom: 24px;
}

/* scrollbar */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: var(--red-dark); border-radius: 2px; }
::selection               { background: rgba(204,0,0,0.22); }


/* ══════════════════════════════════════════════
   BACKGROUND LAYERS
══════════════════════════════════════════════ */

/* 1 — Matrix Rain canvas */
#matrix-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.4;
  pointer-events: none;
}

/* 2 — Hex Grid */
#hex-grid-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.18;
  pointer-events: none;
}

/* 3 — Classified Watermark */
#classified-watermark {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
#classified-watermark span {
  position: absolute;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--green);
  opacity: 0.10;
  letter-spacing: 3px;
  white-space: nowrap;
  transform: rotate(-35deg);
  user-select: none;
}

/* 4 — Moving Scanline */
#scanline-bar {
  position: fixed;
  left: 0; right: 0;
  height: 2px;
  background: rgba(204,0,0,0.06);
  z-index: 3;
  pointer-events: none;
  animation: scanMove 7s linear infinite;
}
@keyframes scanMove { 0% { top: -2px; } 100% { top: 100%; } }

/* 5 — Noise */
#noise-layer {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: noiseFlick 0.15s steps(1) infinite;
}
@keyframes noiseFlick { 0%,100% { opacity:0.05; } 50% { opacity:0.08; } }

/* 6 — Vignette */
#vignette-layer {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    transparent 35%,
    rgba(0,0,0,0.50) 72%,
    rgba(0,0,0,0.88) 100%
  );
}

/* CRT Scanlines (body pseudo) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px
  );
}

/* 7 — Corner Brackets */
.corner-bracket { display: none; }

/* 8 — Radar */
#radar-canvas {
  position: fixed;
  bottom: 32px;
  right: 16px;
  z-index: 6;
  opacity: 0.85;
  pointer-events: none;
}


/* ══════════════════════════════════════════════
   STATUS BARS
══════════════════════════════════════════════ */

#top-status-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 28px;
  z-index: 100;
  background: rgba(0,0,0,0.95);
  border-bottom: 1px solid var(--red-dim);
  box-shadow: 0 0 18px rgba(204,0,0,0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 2px;
}
#top-status-bar .tsci      { color: var(--red-bright); font-weight: bold; }
#top-status-bar .enc-blink { color: var(--red); animation: blink 0.9s step-end infinite; }
#top-status-bar #status-clock { color: var(--red-dim); }

#bottom-status-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 24px;
  z-index: 100;
  background: rgba(0,0,0,0.95);
  border-top: 1px solid var(--red-dim);
  box-shadow: 0 0 12px rgba(204,0,0,0.14);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1rem;
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 1px;
  color: #444;
}
#bottom-status-bar .g { color: var(--red); font-weight: normal; }
#bottom-status-bar .r { color: var(--red-bright); font-weight: bold; }


/* ══════════════════════════════════════════════
   CONTENT WRAPPER
══════════════════════════════════════════════ */
.content-wrapper {
  position: relative;
  z-index: 10;
}


/* ══════════════════════════════════════════════
   NAVBAR
   FIX: fondo oscuro unificado — sin conflicto entre
   background:#cc0000 y las reglas .navbar-dark
══════════════════════════════════════════════ */
.navbar {
  background: rgba(5,0,0,0.96) !important;
  border-bottom: 2px solid var(--red-dim);
  box-shadow: 0 2px 20px rgba(204,0,0,0.18);
  backdrop-filter: blur(10px);
}

.navbar .navbar-brand {
  color: var(--text) !important;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 1rem;
  transition: color 0.3s ease;
}
.navbar .navbar-brand:hover {
  color: var(--red) !important;
}

/* FIX: una sola cadena de reglas para nav-link */
.navbar .nav-link {
  color: #aaaaaa !important;
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  padding: 0.5rem 0.9rem !important;
}
.navbar .nav-link:hover {
  color: var(--red-bright) !important;
  text-shadow: 0 0 8px rgba(255,17,17,0.55);
}
.navbar .nav-link.active {
  color: var(--red-bright) !important;
  font-weight: bold;
}

.navbar-logo {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--red-dim);
  box-shadow: 0 0 8px rgba(204,0,0,0.25);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.navbar-logo:hover {
  transform: scale(1.1);
  border-color: var(--red);
  box-shadow: 0 0 14px var(--red-glow);
}

.navbar-toggler {
  border-color: var(--red-dim) !important;
}
.navbar-toggler-icon {
  filter: invert(20%) sepia(100%) saturate(700%) hue-rotate(330deg);
}


/* ══════════════════════════════════════════════
   TERMINAL
══════════════════════════════════════════════ */
.terminal-hero {
  position: relative;
  z-index: 10;
  background: rgba(0,0,0,0.3);
}

/* classified tag above terminal */
.terminal-hero .container::before {
  content: '⚠  SISTEMA CLASIFICADO — ACCESO RESTRINGIDO';
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--red);
  letter-spacing: 3px;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.terminal-classified {
  background: rgba(0,2,0,0.94);
  border: 1px solid rgba(0,255,65,0.18);
  border-radius: 4px;
  overflow: hidden;
  max-width: 700px;
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 40px rgba(0,255,65,0.08),
    0 0 80px rgba(0,0,0,0.8),
    inset 0 0 30px rgba(0,255,65,0.02);
}

.terminal-titlebar {
  background: #000a00;
  padding: 0.45rem 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(0,255,65,0.12);
}
.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.dot-red    { background: #cc0000; }
.dot-orange { background: #888800; }
.dot-green  { background: #00ff41; box-shadow: 0 0 6px rgba(0,255,65,0.6); }

.terminal-label {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.58rem;
  color: #004410;
  letter-spacing: 3px;
  transition: color 0.3s ease;
}
.terminal-classified:hover .terminal-label {
  color: rgba(0,255,65,0.45);
}

#term-output {
  margin: 0;
  padding: 1rem;
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  color: #00ff41;
  line-height: 1.75;
  min-height: 200px;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  background: transparent;
}
#term-output::-webkit-scrollbar       { width: 4px; }
#term-output::-webkit-scrollbar-track { background: #000; }
#term-output::-webkit-scrollbar-thumb { background: #00aa33; }

.term-input {
  padding: 0 1rem 0.75rem;
  font-family: var(--mono);
  color: #00ff41;
}
.cursor {
  display: inline-block;
  animation: blink 1s step-end infinite;
  font-size: 1rem;
}

/* Terminal line types */
.line          { display: block; }
.err           { color: #ff4444; font-weight: bold; text-shadow: 0 0 8px #ff4444; }
.success       { color: #00ff41; }
.dim           { color: #007722; }
.overflow-line { color: #00ff99; }
.devil-frame   { display: block; color: #00cc44; font-size: 0.72rem; white-space: pre; line-height: 1.4; font-family: 'Courier New', monospace; text-shadow: 0 0 5px #00ff41; }
.blink         { animation: blinkAnim .3s step-end infinite; }

@keyframes blink     { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes blinkAnim { 0%,100%{opacity:1} 50%{opacity:0} }


/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero {
  position: relative;
  z-index: 10;
}

/* Classified stamp */
.classified-stamp {
  display: inline-block;
  border: 2px solid var(--red-dim);
  padding: 2px 16px;
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--red);
  letter-spacing: 5px;
  opacity: 0.8;
  transform: rotate(-1.5deg);
  text-shadow: 0 0 8px var(--red-dim);
  margin-bottom: 0.75rem;
}

/* FIX: display font VT323 para el h1 — aspecto CRT auténtico */
.neon {
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 3.8rem) !important;
  color: var(--red);
  text-shadow:
    0 0 5px var(--red),
    0 0 12px var(--red),
    0 0 25px rgba(180,0,0,0.7),
    0 0 50px rgba(140,0,0,0.4);
  transition: text-shadow 0.3s;
  animation: flicker 4s infinite;
  letter-spacing: 2px;
  line-height: 1.1;
  position: relative;
  display: inline-block;
}
.neon:hover {
  text-shadow:
    0 0 8px var(--red),
    0 0 20px var(--red),
    0 0 40px var(--red-dark),
    0 0 80px rgba(180,0,0,0.6),
    0 0 120px rgba(140,0,0,0.3);
}

/* Glitch effect en hover */
.neon::before,
.neon::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  font-family: inherit; font-size: inherit;
  color: inherit;
  opacity: 0;
}
.neon:hover::before {
  opacity: 0.5;
  color: #ff0000;
  animation: glitchA 0.15s steps(1) 3;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translateX(-2px);
}
.neon:hover::after {
  opacity: 0.5;
  color: #880000;
  animation: glitchB 0.12s steps(1) 3;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translateX(2px);
}
@keyframes glitchA { 0%,100%{transform:translateX(-2px)} 50%{transform:translateX(2px)} }
@keyframes glitchB { 0%,100%{transform:translateX(2px)}  50%{transform:translateX(-2px)} }

@keyframes flicker {
  0%,19%,21%,23%,25%,54%,56%,100% { opacity:1; }
  20%,24%,55%                      { opacity:0.2; }
}

/* FIX: lead con color neutro — antes era #778 (azulado, fuera de tema) */
.hero .lead {
  color: #777777;
  font-size: 0.88rem;
  letter-spacing: 3px;
}


/* ══════════════════════════════════════════════
   SECTION DIVIDER
══════════════════════════════════════════════ */
.section-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  color: rgba(204,0,0,0.45);
  letter-spacing: 4px;
  margin-bottom: 0.5rem;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
}
.section-divider::before { background: linear-gradient(90deg, transparent, rgba(204,0,0,0.2)); }
.section-divider::after  { background: linear-gradient(90deg, rgba(204,0,0,0.2), transparent); }


/* ══════════════════════════════════════════════
   CARDS
   FIX: fondo rgba(8,0,0) negro puro (antes rgba(4,8,4) tenía tinte verde)
══════════════════════════════════════════════ */
.card-classified {
  position: relative;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  border: 1px solid rgba(204,0,0,0.14) !important;
  background: rgba(8,0,0,0.90) !important;
  backdrop-filter: blur(6px);
  border-radius: 4px !important;
  overflow: hidden;
}
.card-classified:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: rgba(204,0,0,0.55) !important;
  box-shadow:
    0 0 14px rgba(204,0,0,0.25),
    0 0 35px rgba(204,0,0,0.10),
    inset 0 0 20px rgba(204,0,0,0.04);
}
.card-classified .card-img-top {
  transition: filter .4s, transform .4s;
}
.card-classified:hover .card-img-top {
  filter: brightness(1.22);
  transform: scale(1.04);
}
.card-classified:hover .card-text {
  color: #aa3333;
  text-shadow: 0 0 8px rgba(180,0,0,0.4);
}

/* clearance badge */
.card-clearance-tag {
  position: absolute;
  top: 8px; right: 8px;
  font-family: var(--mono);
  font-size: 0.50rem;
  color: #330000;
  letter-spacing: 2px;
  transition: color .3s;
  z-index: 2;
}
.card-classified:hover .card-clearance-tag {
  color: rgba(204,0,0,0.45);
}


/* ══════════════════════════════════════════════
   BUTTONS
   FIX: degradado rojo→verde eliminado — ahora monocromo rojo coherente
══════════════════════════════════════════════ */
.btn-neon {
  display: inline-block;
  padding: 7px 20px;
  font-weight: 600;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--red-bright);
  background: transparent;
  border: 1px solid var(--red-dim);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(204,0,0,0.12), inset 0 0 8px rgba(204,0,0,0.04);
  transition: all 180ms ease;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 1px;
}
.btn-neon:hover {
  background: rgba(204,0,0,0.10);
  border-color: var(--red);
  box-shadow: 0 0 18px rgba(204,0,0,0.45), 0 0 6px rgba(204,0,0,0.25);
  transform: translateY(-2px);
  color: #ffffff;
}


/* ══════════════════════════════════════════════
   ALERT
══════════════════════════════════════════════ */
.custom-alert {
  background: rgba(0,0,0,0.92);
  color: #cccccc;
  border: 1px solid rgba(0,255,65,0.4) !important;
  box-shadow: 0 0 10px rgba(0,255,65,0.18), 0 0 25px rgba(0,255,65,0.07);
  border-radius: 3px;
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 0.80rem;
  animation: glowPulseGreen 2.5s infinite alternate ease-in-out;
  text-align: center;
  backdrop-filter: blur(4px);
}
.custom-alert strong { color: #00ff41; }

@keyframes glowPulseGreen {
  0%   { box-shadow: 0 0 5px rgba(0,255,65,0.14), 0 0 15px rgba(0,255,65,0.06); }
  100% { box-shadow: 0 0 14px rgba(0,255,65,0.38), 0 0 32px rgba(0,255,65,0.16); }
}


/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.footer {
  background: rgba(0,0,0,0.96);
  border-top: 2px solid var(--red-dim);
  box-shadow: 0 -2px 20px rgba(204,0,0,0.18);
  position: relative;
  z-index: 10;
}
.footer-title {
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--red);
  text-shadow: 0 0 10px rgba(204,0,0,0.5);
}
.footer-subtitle { color: #666666; font-size: 0.82rem; }
.social-link {
  color: var(--red-dim);
  margin: 0 10px;
  font-size: 1.5rem;
  text-shadow: 0 0 5px rgba(204,0,0,0.3);
  transition: all .3s;
}
.social-link:hover {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(204,0,0,0.8);
  transform: translateY(-2px);
}
.footer-copy { font-size: 0.80rem; color: #333333; }


/* ══════════════════════════════════════════════
   DROPDOWN
══════════════════════════════════════════════ */
.navbar .dropdown-menu {
  background: rgba(0,0,0,0.96);
  border: 1px solid var(--red-dim);
  box-shadow: 0 0 12px rgba(204,0,0,0.25);
  border-radius: 4px;
  animation: dropFade .25s ease;
}
@keyframes dropFade {
  from { opacity:0; transform:translateY(-5px); }
  to   { opacity:1; transform:translateY(0); }
}
.dropdown-item { color: #bbbbbb; font-family: var(--mono); transition: all .2s; }
.dropdown-item:hover {
  background: rgba(204,0,0,0.08);
  color: var(--red);
  text-shadow: 0 0 6px rgba(204,0,0,0.7);
}


/* ══════════════════════════════════════════════
   BOOTSTRAP OVERRIDES — eliminar verde residual
══════════════════════════════════════════════ */

/* text-success → rojo */
.text-success { color: var(--red) !important; }

/* text-danger ya es rojo en Bootstrap pero lo fijamos al nuestro */
.text-danger  { color: var(--red) !important; }

/* border-success → borde rojo */
.border-success { border-color: var(--red-dim) !important; }