/**
 * PATH: static/css/themes-color-view.css
 * FUNCIONES: Tema Color View — Obsidian Pro v3 (void #010204, cyan #00f5ff, violet #bf00ff, mint #00ffaa).
 * CONECTA CON: themes.css variables, layout_futuristic.html, settings.html, marketplace vault.
 * LLAMADO POR: layout_futuristic.html, vault_layout.html (link stylesheet).
 */

body.theme-color-view {
  --bg-primary:       #010204;
  --bg-secondary:     #050810;
  --bg-tertiary:      #0a1018;
  --text-primary:     #f0f9ff;
  --text-secondary:   #94a3b8;
  --text-muted:       #64748b;
  --accent:           #00f5ff;
  --accent-secondary: #bf00ff;
  --border:           rgba(0, 245, 255, 0.18);
  --text-on-accent:   #010204;
  --glow-accent:      rgba(0, 245, 255, 0.42);
}

body.theme-color-view {
  background-color: #010204 !important;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -15%, rgba(0, 245, 255, 0.18), transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 30%, rgba(191, 0, 255, 0.14), transparent 45%),
    radial-gradient(ellipse 40% 35% at 0% 90%, rgba(0, 255, 170, 0.08), transparent 40%) !important;
  color: #f0f9ff !important;
  position: relative;
}

body.theme-color-view::after {
  content: '';
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(0, 245, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: color-view-grid 24s linear infinite;
}

@keyframes color-view-grid {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 32px 32px, 32px 32px; }
}

body.theme-color-view {
  --primary: #00f5ff;
  --primary-dark: #0891b2;
  --primary-light: #67e8f9;
  --secondary: #bf00ff;
  --primary-contrast: #010204;
  --primary-gradient: linear-gradient(135deg, #00f5ff 0%, #0891b2 45%, #bf00ff 100%);
  --secondary-gradient: linear-gradient(135deg, #bf00ff 0%, #6366f1 100%);
  --accent-gradient: linear-gradient(135deg, #00f5ff 0%, #00ffaa 100%);
  --bg-dark: #010204;
  --bg-darker: #000102;
  --bg-card: rgba(5, 8, 16, 0.9);
  --bg-card-hover: rgba(0, 245, 255, 0.07);
  --glass-bg: rgba(10, 16, 24, 0.78);
  --glass-bg-solid: rgba(5, 8, 16, 0.96);
  --glass-border: rgba(0, 245, 255, 0.18);
  --glass-border-bright: rgba(0, 245, 255, 0.55);
  --glass-shadow: 0 8px 32px rgba(0, 245, 255, 0.1);
  --bg-gradient: linear-gradient(180deg, #010204 0%, #050810 42%, #010204 100%);
  --bg-mesh:
    radial-gradient(ellipse at 0% 0%, rgba(0, 245, 255, 0.12) 0px, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(191, 0, 255, 0.1) 0px, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 255, 170, 0.07) 0px, transparent 50%);
  --glow-purple: 0 0 28px rgba(191, 0, 255, 0.28);
  --vault-cyan: #00f5ff;
  --vault-violet: #bf00ff;
  --vault-mint: #00ffaa;
  --vault-stroke: rgba(0, 245, 255, 0.18);
  --vault-stroke-bright: rgba(0, 245, 255, 0.65);
}

body.theme-color-view .header {
  background: rgba(1, 2, 4, 0.96) !important;
  border-bottom: 1px solid rgba(0, 245, 255, 0.22) !important;
  box-shadow: 0 4px 24px rgba(0, 245, 255, 0.08) !important;
}

body.theme-color-view .left-sidebar,
body.theme-color-view .right-sidebar {
  background-color: rgba(5, 8, 16, 0.88) !important;
  border-color: rgba(0, 245, 255, 0.16) !important;
}

body.theme-color-view .glass-card,
body.theme-color-view .post-card,
body.theme-color-view .create-post-card,
body.theme-color-view .settings-section,
body.theme-color-view .modal-content {
  background: rgba(5, 8, 16, 0.92) !important;
  border: 1px solid rgba(0, 245, 255, 0.2) !important;
  color: #f0f9ff !important;
  box-shadow: 0 0 22px rgba(0, 245, 255, 0.06);
}

body.theme-color-view .sidebar-item.active,
body.theme-color-view .header-nav-link.active {
  background: linear-gradient(90deg, rgba(0, 245, 255, 0.2), rgba(191, 0, 255, 0.1)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(0, 245, 255, 0.48) !important;
  box-shadow: 0 0 22px rgba(0, 245, 255, 0.22) !important;
}

body.theme-color-view .sidebar-item:hover,
body.theme-color-view .header-nav-link:hover {
  background: rgba(0, 245, 255, 0.07) !important;
  border-color: rgba(0, 245, 255, 0.35) !important;
  color: #a5f3fc !important;
}

body.theme-color-view .btn-primary,
body.theme-color-view .btn.btn-primary,
body.theme-color-view a.btn.primary,
body.theme-color-view button.btn.primary {
  background: linear-gradient(135deg, #00f5ff, #0891b2) !important;
  color: #010204 !important;
  -webkit-text-fill-color: #010204 !important;
  border: 1px solid rgba(0, 245, 255, 0.6) !important;
  box-shadow: 0 4px 20px rgba(0, 245, 255, 0.28) !important;
}

body.theme-color-view .btn-primary:hover,
body.theme-color-view .btn.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 26px rgba(0, 245, 255, 0.38) !important;
}

body.theme-color-view .settings-page > a.settings-back-link.btn-primary,
body.theme-color-view .settings-page > a.settings-back-link.btn.btn-primary {
  color: #010204 !important;
  -webkit-text-fill-color: #010204 !important;
}

body.theme-color-view .btn-secondary,
body.theme-color-view a.btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(0, 245, 255, 0.32) !important;
  color: #a5f3fc !important;
  -webkit-text-fill-color: #a5f3fc !important;
}

body.theme-color-view .header-search-compact input,
body.theme-color-view .header-search-input,
body.theme-color-view .form-input,
body.theme-color-view input:not([type="checkbox"]):not([type="radio"]),
body.theme-color-view textarea,
body.theme-color-view select {
  background: rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(0, 245, 255, 0.24) !important;
  color: #f0f9ff !important;
}

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

body.theme-color-view .badge {
  background: linear-gradient(90deg, rgba(0, 245, 255, 0.32), rgba(191, 0, 255, 0.2)) !important;
  color: #ecfeff !important;
  border: 1px solid rgba(0, 245, 255, 0.38) !important;
}

body.theme-color-view .mobile-nav {
  background: rgba(5, 8, 16, 0.98) !important;
  border-top: 1px solid rgba(0, 245, 255, 0.22) !important;
}

body.theme-color-view .msg-hub {
  --msg-accent: #00f5ff;
  --msg-border: rgba(0, 245, 255, 0.22);
}

body.theme-color-view .klktoki-brand__text {
  background: linear-gradient(90deg, #00f5ff 0%, #bf00ff 55%, #00ffaa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.theme-color-view .klktoki-brand__mark {
  box-shadow: 0 4px 22px rgba(0, 245, 255, 0.28);
}

body.theme-color-view .theme-option.selected {
  border-color: #00f5ff !important;
  box-shadow: 0 0 0 2px rgba(0, 245, 255, 0.38) !important;
}

body.theme-color-view .header-theme-opt.selected {
  border-color: rgba(0, 245, 255, 0.6) !important;
  background: rgba(0, 245, 255, 0.12) !important;
}

body.theme-color-view.vault-ui-pro::before {
  background:
    radial-gradient(ellipse 90% 60% at 50% -15%, rgba(0, 245, 255, 0.22), transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 30%, rgba(191, 0, 255, 0.18), transparent 45%),
    radial-gradient(ellipse 40% 35% at 0% 90%, rgba(0, 255, 170, 0.1), transparent 40%);
}