/* ::::bastion:::: export-canonical skin · nexus (multicolor)
   fuente: bastion-esqueleto-institucional-FINAL.html · facta non ficta
   carga DESPUÉS del <style> inline para ganar en cascada */

:root {
  --font-sans: "Hanken Grotesk", "Instrument Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* tokens ndi / export-canonical */
  --magenta: #ff4fd8;
  --gold: #f4c757;
  --amber: #edc152;
  --purple: #9b7fe8;
  --blue: #2e6bff;
  --val: #00ffc8;
  --mod-midi: #ffe14d;
  --mod-admin: #ff4fd8;
  --mod-grp: #2e6bff;
  --mod-sys: #1fe9c2;
  --mod-cyan: #00daf8;
  --mod-alx: #c9ccd1;
  --gl: #2e383c;
  --gl2: rgba(46, 56, 60, 0.45);
  --tp: #e2e2e7;
  --ts: #bac9cd;
  --border-cyan: rgba(0, 218, 248, 0.22);

  --carbon:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0, rgba(255, 255, 255, 0.022) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.016) 0, rgba(255, 255, 255, 0.016) 1px, transparent 1px, transparent 9px),
    radial-gradient(900px 600px at 50% 32%, rgba(255, 255, 255, 0.03), transparent 70%);

  --clip-octagon: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  --clip-octa-btn: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);

  /* romper el monocromo cyan del chrome legacy */
  --accent: var(--tp);
  --accent-dim: var(--gl);
  --accent-glow: rgba(155, 127, 232, 0.2);
}

body {
  font-family: var(--font-sans);
  background-color: #000;
  background-image: var(--carbon);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 75% 55% at 8% 18%, rgba(255, 79, 216, 0.09), transparent 58%),
    radial-gradient(ellipse 65% 50% at 92% 12%, rgba(155, 127, 232, 0.08), transparent 52%),
    radial-gradient(ellipse 70% 45% at 88% 78%, rgba(46, 107, 255, 0.06), transparent 50%),
    radial-gradient(ellipse 60% 40% at 12% 82%, rgba(244, 199, 87, 0.06), transparent 48%),
    radial-gradient(ellipse 55% 35% at 50% 50%, rgba(0, 218, 248, 0.04), transparent 42%);
}

.app-container {
  position: relative;
  z-index: 1;
}

body .scanlines {
  opacity: 0.06;
}

body .grid-bg {
  opacity: 0.14;
  background-image:
    linear-gradient(rgba(201, 204, 209, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 204, 209, 0.02) 1px, transparent 1px);
}

::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--purple) 35%, var(--gl)) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--magenta) 40%, var(--gl)) !important;
}

@keyframes bastion-nexus-breathe {
  0%, 100% {
    border-color: rgba(46, 56, 60, 0.9);
    box-shadow: 0 0 10px rgba(255, 79, 216, 0.06), 0 0 20px rgba(0, 218, 248, 0.04);
  }
  33% {
    border-color: rgba(255, 79, 216, 0.35);
    box-shadow: 0 0 14px rgba(255, 79, 216, 0.1), 0 0 28px rgba(155, 127, 232, 0.06);
  }
  66% {
    border-color: rgba(244, 199, 87, 0.28);
    box-shadow: 0 0 12px rgba(244, 199, 87, 0.08), 0 0 24px rgba(46, 107, 255, 0.05);
  }
}

.breathing-border {
  animation: bastion-nexus-breathe 7s ease-in-out infinite !important;
}

header {
  background: rgba(4, 4, 6, 0.88) !important;
  backdrop-filter: blur(10px);
  border-color: var(--gl) !important;
}

header::before {
  background: linear-gradient(
    90deg,
    transparent,
    var(--magenta),
    var(--mod-cyan),
    var(--gold),
    var(--purple),
    var(--blue),
    var(--mod-sys),
    var(--magenta),
    transparent
  ) !important;
  opacity: 1 !important;
  height: 2px !important;
}

.token-bracket {
  color: var(--purple) !important;
}

.token-text {
  background: linear-gradient(92deg, var(--mod-cyan) 0%, var(--magenta) 42%, var(--gold) 78%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}

.jd {
  color: var(--mod-cyan) !important;
  text-shadow: 0 0 10px rgba(255, 79, 216, 0.25), 0 0 14px rgba(0, 218, 248, 0.2) !important;
}

.nexus-brand-mark {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 79, 216, 0.35)) drop-shadow(0 0 12px rgba(0, 218, 248, 0.25));
  flex: none;
}

.modal-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.modal-logo .nexus-brand-mark {
  width: 56px;
  height: 56px;
}

.modal-logo .nexus-brand-title {
  font-size: 14px;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  background: linear-gradient(90deg, var(--mod-cyan), var(--magenta), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.header-left .nexus-brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-left .nexus-brand-block .nexus-brand-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: var(--font-sans);
  background: linear-gradient(92deg, #fff 0%, var(--mod-cyan) 35%, var(--magenta) 62%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.modal-box {
  border: 2px solid transparent !important;
  background:
    linear-gradient(rgba(11, 11, 13, 0.97), rgba(11, 11, 13, 0.97)) padding-box,
    linear-gradient(135deg, var(--magenta), var(--mod-cyan), var(--gold), var(--purple)) border-box !important;
  box-shadow: 0 0 28px rgba(255, 79, 216, 0.14), 0 0 40px rgba(0, 218, 248, 0.08) !important;
}

.oct-btn {
  border-color: var(--gl) !important;
}

.oct-btn:hover {
  color: var(--tp) !important;
  border-color: color-mix(in oklab, var(--purple) 55%, var(--gl)) !important;
  box-shadow:
    0 0 10px rgba(155, 127, 232, 0.18),
    0 0 14px rgba(255, 79, 216, 0.08) !important;
}

.oct-btn.active:not(.nav-btn) {
  color: var(--mod-cyan) !important;
  border-color: var(--border-cyan) !important;
}

.nexus-mod-strip {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--gl2);
  margin-bottom: 2px;
}

.nexus-mod-strip .mod-oct {
  width: 32px;
  height: 32px;
  clip-path: var(--clip-octagon);
  background: color-mix(in oklab, var(--oct-c, var(--mod-cyan)) 32%, #0b0b0d);
  box-shadow: 0 0 14px color-mix(in oklab, var(--oct-c, var(--mod-cyan)) 45%, transparent);
  animation: nexus-oct-pulse 2.8s ease-in-out infinite;
  animation-delay: var(--oct-delay, 0s);
}

@keyframes nexus-oct-pulse {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 8px color-mix(in oklab, var(--oct-c, var(--mod-cyan)) 40%, transparent));
  }
  50% {
    filter: brightness(1.3) drop-shadow(0 0 16px color-mix(in oklab, var(--oct-c, var(--mod-cyan)) 65%, transparent));
  }
}

.nav-btn.gestion-tab,
.nav-btn[data-tab="gestion"].active {
  color: var(--blue) !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 12px rgba(46, 107, 255, 0.22) !important;
}

.nav-btn[data-tab="panel"].active { color: var(--mod-cyan) !important; border-color: var(--mod-cyan) !important; box-shadow: 0 0 10px rgba(0, 218, 248, 0.2) !important; }
.nav-btn[data-tab="praedis"].active { color: var(--magenta) !important; border-color: var(--magenta) !important; box-shadow: 0 0 12px rgba(255, 79, 216, 0.25) !important; }
.nav-btn[data-tab="folder"].active { color: var(--gold) !important; border-color: var(--gold) !important; box-shadow: 0 0 10px rgba(244, 199, 87, 0.2) !important; }
.nav-btn[data-tab="inbox"].active { color: var(--mod-midi) !important; border-color: var(--mod-midi) !important; box-shadow: 0 0 10px rgba(255, 225, 77, 0.2) !important; }
.nav-btn[data-tab="sistemas"].active { color: var(--mod-sys) !important; border-color: var(--mod-sys) !important; box-shadow: 0 0 10px rgba(31, 233, 194, 0.2) !important; }
.nav-btn[data-tab="bitacora"].active { color: var(--purple) !important; border-color: var(--purple) !important; box-shadow: 0 0 10px rgba(155, 127, 232, 0.2) !important; }
.nav-btn[data-tab="pendientes"].active { color: var(--amber) !important; border-color: var(--amber) !important; box-shadow: 0 0 10px rgba(237, 193, 82, 0.2) !important; }
.nav-btn[data-tab="instancias"].active { color: var(--val) !important; border-color: var(--val) !important; box-shadow: 0 0 10px rgba(0, 255, 200, 0.18) !important; }
.nav-btn[data-tab="reglas"].active { color: var(--mod-alx) !important; border-color: var(--mod-alx) !important; }
.nav-btn[data-tab="log"].active { color: var(--c-grok, #ff6b35) !important; border-color: var(--c-grok, #ff6b35) !important; box-shadow: 0 0 10px rgba(255, 107, 53, 0.2) !important; }
.nav-btn[data-tab="manual"].active { color: var(--c-claude-design, #c084fc) !important; border-color: var(--c-claude-design, #c084fc) !important; box-shadow: 0 0 10px rgba(192, 132, 252, 0.2) !important; }
.nav-btn[data-tab="ajustes"].active { color: var(--tp) !important; border-color: var(--gl) !important; }

.nav-btn:hover:not(.active) {
  color: var(--ts) !important;
  border-color: color-mix(in oklab, var(--magenta) 30%, var(--gl)) !important;
}

.main-panel,
.praedis-transcript-panel,
.praedis-circle-container,
.agent-card,
.maschine-pad.control-pad {
  border-color: var(--gl) !important;
}

.main-panel {
  box-shadow: inset 3px 0 0 var(--mod-c, var(--purple)) !important;
}

.praedis-center-octagon {
  border-color: color-mix(in oklab, var(--magenta) 55%, var(--mod-cyan)) !important;
  box-shadow: 0 0 20px rgba(255, 79, 216, 0.18), 0 0 36px rgba(0, 218, 248, 0.1) !important;
}

.agent-card {
  border-color: color-mix(in oklab, var(--agent-color, var(--purple)) 45%, var(--gl)) !important;
}

.heartbeat-led {
  background: linear-gradient(135deg, var(--mod-sys), var(--magenta)) !important;
  box-shadow: 0 0 6px var(--mod-sys), 0 0 10px var(--magenta) !important;
}

.heartbeat-led.active {
  background: linear-gradient(135deg, var(--mod-sys), var(--mod-cyan)) !important;
  box-shadow: 0 0 8px var(--mod-sys), 0 0 12px var(--mod-cyan) !important;
}

.footer-item-active {
  color: var(--val) !important;
  text-shadow: 0 0 8px rgba(0, 255, 200, 0.25);
}

.activity-subject {
  color: var(--gold) !important;
}

.log-source {
  color: var(--mod-cyan) !important;
}

@media (prefers-reduced-motion: reduce) {
  .breathing-border,
  .nexus-mod-strip .mod-oct {
    animation: none !important;
  }
}