/* themes.css — 4 temas via CSS custom properties */

/* ── CYBER DARK (default) ─────────────────────── */
:root,
[data-theme="cyber-dark"] {
  --bg-primary:    #08090f;
  --bg-secondary:  #0d0e17;
  --bg-tertiary:   #12141f;
  --card-bg:       #0f1018;
  --accent:        #00ff88;
  --accent-2:      #00e5ff;
  --accent-3:      #7c3aed;
  --text:          #e8eaf0;
  --text-muted:    #8891a8;
  --border:        #1e2235;
  --border-accent: #00ff8840;
  --hero-glow:     radial-gradient(ellipse 80% 50% at 50% -10%, #00ff8820, transparent);
  --grid-color:    #00ff8808;
  --shadow:        0 4px 24px #00000060;
  --shadow-accent: 0 0 30px #00ff8830;
  --nav-bg:        #08090fcc;
}

/* ── CORPORATE BLUE ───────────────────────────── */
[data-theme="corporate"] {
  --bg-primary:    #0a1628;
  --bg-secondary:  #0d1e38;
  --bg-tertiary:   #112244;
  --card-bg:       #0c1b35;
  --btn-text:      #fff;
  --accent:        #4a9eff;
  --accent-2:      #7c3aed;
  --accent-3:      #06b6d4;
  --text:          #e2eaf6;
  --text-muted:    #7a9ac0;
  --border:        #1a2e50;
  --border-accent: #4a9eff40;
  --hero-glow:     radial-gradient(ellipse 80% 50% at 50% -10%, #4a9eff18, transparent);
  --grid-color:    #4a9eff06;
  --shadow:        0 4px 24px #00000060;
  --shadow-accent: 0 0 30px #4a9eff30;
  --nav-bg:        #0a1628cc;
}

/* ── RED TEAM ─────────────────────────────────── */
[data-theme="redteam"] {
  --bg-primary:    #0a0007;
  --bg-secondary:  #120009;
  --bg-tertiary:   #180010;
  --card-bg:       #0f0008;
  --btn-text:      #fff;
  --accent:        #ff2244;
  --accent-2:      #ff8c00;
  --accent-3:      #ff006e;
  --text:          #f0e0e4;
  --text-muted:    #a07080;
  --border:        #2a0818;
  --border-accent: #ff224440;
  --hero-glow:     radial-gradient(ellipse 80% 50% at 50% -10%, #ff224420, transparent);
  --grid-color:    #ff224408;
  --shadow:        0 4px 24px #00000070;
  --shadow-accent: 0 0 30px #ff224435;
  --nav-bg:        #0a0007cc;
}

/* ── MINIMAL LIGHT ────────────────────────────── */
[data-theme="minimal"] {
  --bg-primary:    #f0f4f8;
  --bg-secondary:  #e2e8f0;
  --bg-tertiary:   #cbd5e1;
  --card-bg:       #ffffff;
  --btn-text:      #fff;
  --accent:        #2563eb;
  --accent-2:      #10b981;
  --accent-3:      #7c3aed;
  --text:          #1a202c;
  --text-muted:    #64748b;
  --border:        #cbd5e1;
  --border-accent: #2563eb40;
  --hero-glow:     radial-gradient(ellipse 80% 50% at 50% -10%, #2563eb10, transparent);
  --grid-color:    #2563eb05;
  --shadow:        0 4px 24px #00000015;
  --shadow-accent: 0 0 30px #2563eb25;
  --nav-bg:        #f0f4f8ee;
}

/* ── Tema activo en selector ──────────────────── */
.theme-option { cursor: pointer; transition: transform .2s, box-shadow .2s; }
.theme-option:hover { transform: translateY(-3px); }
.theme-option.active { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Animación de glitch (accent) ─────────────── */
@keyframes glitch {
  0%, 100% { text-shadow: none; }
  25% { text-shadow: 2px 0 var(--accent-2), -2px 0 var(--accent); }
  50% { text-shadow: -2px 0 var(--accent-2), 2px 0 var(--accent); }
  75% { text-shadow: 1px 0 var(--accent-2), -1px 0 var(--accent); }
}

/* ── Typewriter cursor ────────────────────────── */
@keyframes blink { 50% { opacity: 0; } }
.cursor::after {
  content: '▋';
  color: var(--accent);
  animation: blink 1s step-end infinite;
}

/* ── Cyber grid background ────────────────────── */
.cyber-grid {
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Glow effects ─────────────────────────────── */
.glow-text { text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 60%, transparent); }
.glow-border { box-shadow: var(--shadow-accent); }

/* ── Accent line ──────────────────────────────── */
.accent-line {
  width: 3rem; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
  margin: .75rem auto 0;
}

/* ── Gradient text ────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Terminal block ───────────────────────────── */
.terminal {
  background: #000;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
}
.terminal-bar {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: .5rem .85rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.terminal-bar .dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-red    { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green  { background: #28c840; }
.terminal-body { padding: 1.25rem; font-family: monospace; font-size: .825rem; line-height: 1.7; }
.terminal-body .prompt { color: var(--accent); }
.terminal-body .cmd    { color: #e0e0e0; }
.terminal-body .out    { color: #8891a8; }
.terminal-body .err    { color: #ff6b6b; }