/**
 * PATH: static/css/themes-vault-terminal.css
 * FUNCIONES: Tema Vault Terminal — dark void, cyan/violet/mint (marketplace escrow).
 * CONECTA CON: themes.css variables, layout_futuristic.html, settings.html, marketplace_vault.css.
 * LLAMADO POR: layout_futuristic.html (link stylesheet).
 */

body.theme-vault-terminal {
  --bg-primary:       #030508;
  --bg-secondary:     #070b12;
  --bg-tertiary:      #0c121c;
  --text-primary:     #eef6ff;
  --text-secondary:   #94a3b8;
  --text-muted:       #7d8da6;
  --accent:           #22d3ee;
  --accent-secondary: #a78bfa;
  --border:           rgba(120, 180, 255, 0.14);
  --text-on-accent:   #021018;
  --glow-accent:      rgba(34, 211, 238, 0.35);
}

body.theme-vault-terminal {
  background-color: #030508 !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(34, 211, 238, 0.09), transparent 55%),
    radial-gradient(ellipse 45% 35% at 95% 15%, rgba(167, 139, 250, 0.1), transparent 50%),
    radial-gradient(ellipse 40% 30% at 5% 75%, rgba(94, 234, 212, 0.05), transparent 45%) !important;
  color: #eef6ff !important;
}

body.theme-vault-terminal {
  --primary: #22d3ee;
  --primary-dark: #0891b2;
  --primary-light: #67e8f9;
  --secondary: #a78bfa;
  --primary-contrast: #021018;
  --primary-gradient: linear-gradient(135deg, #22d3ee 0%, #0891b2 50%, #a78bfa 100%);
  --secondary-gradient: linear-gradient(135deg, #a78bfa 0%, #6366f1 100%);
  --accent-gradient: linear-gradient(135deg, #22d3ee 0%, #5eead4 100%);
  --bg-dark: #030508;
  --bg-darker: #020305;
  --bg-card: rgba(7, 11, 18, 0.88);
  --bg-card-hover: rgba(34, 211, 238, 0.06);
  --glass-bg: rgba(12, 18, 28, 0.72);
  --glass-bg-solid: rgba(7, 11, 18, 0.94);
  --glass-border: rgba(120, 180, 255, 0.14);
  --glass-border-bright: rgba(56, 189, 248, 0.45);
  --glass-shadow: 0 8px 32px rgba(34, 211, 238, 0.08);
  --bg-gradient: linear-gradient(180deg, #030508 0%, #070b12 42%, #030508 100%);
  --bg-mesh:
    radial-gradient(ellipse at 0% 0%, rgba(34, 211, 238, 0.1) 0px, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(167, 139, 250, 0.08) 0px, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(94, 234, 212, 0.06) 0px, transparent 50%);
  --glow-purple: 0 0 24px rgba(167, 139, 250, 0.22);
  --vault-cyan: #22d3ee;
  --vault-violet: #a78bfa;
  --vault-mint: #5eead4;
  --vault-stroke: rgba(120, 180, 255, 0.14);
  --vault-stroke-bright: rgba(56, 189, 248, 0.45);
}

body.theme-vault-terminal .header {
  background: rgba(3, 5, 8, 0.94) !important;
  border-bottom: 1px solid rgba(120, 180, 255, 0.18) !important;
  box-shadow: 0 4px 24px rgba(34, 211, 238, 0.06) !important;
}

body.theme-vault-terminal .left-sidebar,
body.theme-vault-terminal .right-sidebar {
  background-color: rgba(7, 11, 18, 0.85) !important;
  border-color: rgba(120, 180, 255, 0.14) !important;
}

body.theme-vault-terminal .glass-card,
body.theme-vault-terminal .post-card,
body.theme-vault-terminal .create-post-card,
body.theme-vault-terminal .settings-section,
body.theme-vault-terminal .modal-content {
  background: rgba(7, 11, 18, 0.9) !important;
  border: 1px solid rgba(120, 180, 255, 0.16) !important;
  color: #eef6ff !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.04);
}

body.theme-vault-terminal .sidebar-item.active,
body.theme-vault-terminal .header-nav-link.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.18), rgba(167, 139, 250, 0.08)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(34, 211, 238, 0.42) !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.18) !important;
}

body.theme-vault-terminal .sidebar-item:hover,
body.theme-vault-terminal .header-nav-link:hover {
  background: rgba(34, 211, 238, 0.06) !important;
  border-color: rgba(56, 189, 248, 0.32) !important;
  color: #a5f3fc !important;
}

body.theme-vault-terminal .btn-primary,
body.theme-vault-terminal .btn.btn-primary,
body.theme-vault-terminal a.btn.primary,
body.theme-vault-terminal button.btn.primary {
  background: linear-gradient(135deg, #22d3ee, #0891b2) !important;
  color: #021018 !important;
  -webkit-text-fill-color: #021018 !important;
  border: 1px solid rgba(34, 211, 238, 0.55) !important;
  box-shadow: 0 4px 18px rgba(34, 211, 238, 0.22) !important;
}

body.theme-vault-terminal .btn-primary:hover,
body.theme-vault-terminal .btn.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 22px rgba(34, 211, 238, 0.32) !important;
}

body.theme-vault-terminal .btn-secondary,
body.theme-vault-terminal a.btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(120, 180, 255, 0.28) !important;
  color: #a5f3fc !important;
  -webkit-text-fill-color: #a5f3fc !important;
}

body.theme-vault-terminal .header-search-compact input,
body.theme-vault-terminal .header-search-input,
body.theme-vault-terminal .form-input,
body.theme-vault-terminal input:not([type="checkbox"]):not([type="radio"]),
body.theme-vault-terminal textarea,
body.theme-vault-terminal select {
  background: rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(120, 180, 255, 0.2) !important;
  color: #eef6ff !important;
}

body.theme-vault-terminal input::placeholder,
body.theme-vault-terminal textarea::placeholder {
  color: #64748b !important;
}

body.theme-vault-terminal .badge {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.28), rgba(167, 139, 250, 0.18)) !important;
  color: #ecfeff !important;
  border: 1px solid rgba(34, 211, 238, 0.32) !important;
}

body.theme-vault-terminal .mobile-nav {
  background: rgba(7, 11, 18, 0.98) !important;
  border-top: 1px solid rgba(120, 180, 255, 0.2) !important;
}

body.theme-vault-terminal .msg-hub {
  --msg-accent: #22d3ee;
  --msg-border: rgba(120, 180, 255, 0.2);
}

body.theme-vault-terminal .klktoki-brand__text {
  background: linear-gradient(90deg, #22d3ee 0%, #a78bfa 55%, #5eead4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.theme-vault-terminal .klktoki-brand__mark {
  box-shadow: 0 4px 18px rgba(34, 211, 238, 0.22);
}

body.theme-vault-terminal .theme-option.selected {
  border-color: #22d3ee !important;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.32) !important;
}

body.theme-vault-terminal .header-theme-opt.selected {
  border-color: rgba(34, 211, 238, 0.55) !important;
  background: rgba(34, 211, 238, 0.1) !important;
}