/* ==========================================================================
   BERNAL & OLIVEROS — TEMA "COMANDO" (capa final)
   --------------------------------------------------------------------------
   Se carga DESPUÉS de styles.css, luxury.css, cyber.css y defense.css.
   Unifica todo el panel en un solo tema sobrio: grafito, acentos latón,
   bordes finos y tipografía institucional. Sin auroras, sin brillos
   animados, sin partículas: el lujo aquí es la contención.

   Si se quiere ajustar la intensidad del acento, basta con tocar
   --gold-2 más abajo.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS */
:root {
  /* Fondos grafito fríos */
  --onyx-1: #0B0D10;
  --onyx-2: #0E1114;
  --onyx-3: #08090B;

  /* Latón apagado (acento contenido) */
  --gold-1: #E4CB96;
  --gold-2: #C8A45C;
  --gold-3: #7E6335;
  --gold-glow: rgba(200, 164, 92, 0.16);

  /* Tinta fría */
  --ink: #E9E7E1;
  --ink-soft: #A6ACB5;
  --ink-faint: #6E757E;

  --danger: #B4534A;
  --danger-glow: rgba(180, 83, 74, 0.2);
  --success: #4C9A72;
  --success-glow: rgba(76, 154, 114, 0.18);
  --warn: #C9972E;

  /* Superficies y líneas */
  --card-border: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.13);
  --glass-bg: #12151A;
  --surface-raised: #171B21;
  --surface-sunken: #0D1013;

  /* Tipografía */
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Inter', -apple-system, sans-serif;   /* neutraliza títulos serif itálicos */
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --radius: 6px;
  --marble-vein: none;

  /* Salvia sobria para la vista SOC (antes cian neón) */
  --cyber-cyan: #8FB0A4;
  --cyber-line: rgba(143, 176, 164, 0.18);
}

/* Un solo tema institucional: si un equipo guardó otro tema, se neutraliza */
body[data-theme="forest"],
body[data-theme="ocean"],
body[data-theme="terracotta"] {
  --onyx-1: #0B0D10; --onyx-2: #0E1114; --onyx-3: #08090B;
  --gold-1: #E4CB96; --gold-2: #C8A45C; --gold-3: #7E6335;
  --gold-glow: rgba(200, 164, 92, 0.16);
  --ink: #E9E7E1; --ink-soft: #A6ACB5; --ink-faint: #6E757E;
  --card-border: rgba(255, 255, 255, 0.08);
  --glass-bg: #12151A;
  --marble-vein: none;
}

/* ------------------------------------------------------------- FONDO */
body {
  background-color: var(--onyx-1);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(180deg, var(--onyx-1) 0%, var(--onyx-2) 60%, var(--onyx-3) 100%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
}

/* Apagar toda la parafernalia ambiental */
body::before,
.grain,
#luxDust,
.ambient-spotlight,
#bootLoader .bl-aurora,
.cmd::after,
.cmd-scan {
  display: none !important;
}

/* ------------------------------------------------------------- BARRA SUPERIOR */
.luxury-top-strip {
  background: #0C0E11;
  border-bottom: 1px solid var(--line-strong);
  backdrop-filter: none;
}

.quantum-badge {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  border-radius: 3px;
}

.strip-label { color: var(--ink); }
.strip-mono { color: var(--ink-faint); }

.lux-hint-btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-faint);
  border-radius: 3px;
}
.lux-hint-btn:hover {
  background: transparent;
  color: var(--gold-2);
  border-color: rgba(200, 164, 92, 0.45);
  box-shadow: none;
}

#threatBanner { backdrop-filter: none; }

/* ------------------------------------------------------------- SIDEBAR */
.sidebar {
  background: #0C0E11;
  border-right: 1px solid var(--line-strong);
  box-shadow: none;
  backdrop-filter: none;
}

.brand-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--ink) !important;
  background: none;
  animation: none;
}

.brand-subtitle {
  color: var(--gold-2);
  letter-spacing: 0.2em;
}

.sidebar-header:hover .brand-logo {
  transform: none;
  filter: brightness(0) invert(1);
}

.gold-divider {
  background: var(--line-strong);
  opacity: 1;
}

.nav-item {
  border-radius: 4px;
  transform: none !important;
}
.nav-item::before { display: none; }

.nav-item:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.035);
  border-color: transparent;
  transform: none;
}

.nav-item.active {
  color: var(--gold-1);
  background: rgba(200, 164, 92, 0.09);
  border-color: transparent;
  box-shadow: none;
}

.nav-item.active .nav-glow {
  width: 2px;
  top: 8px;
  bottom: 8px;
  background: var(--gold-2);
  border-radius: 0 2px 2px 0;
  box-shadow: none;
}

.nav-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  opacity: 1;
}
.nav-item:hover .nav-ic,
.nav-item.active .nav-ic {
  color: var(--gold-2);
  transform: none;
  text-shadow: none;
}
.nav-ic svg { display: block; }

.nav-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}

.sidebar-footer { border-top: 1px solid var(--line-strong); }

.staff-card {
  background: var(--surface-sunken);
  border: 1px solid var(--card-border);
}

.staff-avatar {
  background: var(--surface-raised);
  color: var(--gold-2);
  font-family: var(--font-body);
  border: 1px solid var(--line-strong);
  box-shadow: none;
  animation: none;
}

/* ------------------------------------------------------------- ENCABEZADOS */
.main { padding: 36px 44px; }

.page-title {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: none;
  animation: none;
}
.page-title::after { display: none; }

.page-desc { color: var(--ink-faint); }

.panel-title,
.queue-name,
.settings-card h3,
.soc-card h3,
.kyc-name {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
}

/* ------------------------------------------------------------- TARJETAS */
.panel,
.queue-card,
.customer-card,
.settings-card,
.wagon,
.chain-summary .stat,
.cyber-panel,
.soc-card,
.kyc-card,
.task-item {
  background: var(--glass-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: none;
  backdrop-filter: none;
  will-change: auto;
}

.panel::before,
.queue-card::before { display: none; }

.panel::after,
.queue-card::after,
.customer-card::after,
.settings-card::after,
.wagon::after,
.cyber-panel::after,
.chain-summary .stat::after { display: none; }

.panel:hover,
.queue-card:hover,
.customer-card:hover,
.settings-card:hover {
  border-color: var(--card-border);
  box-shadow: none;
  transform: none;
}

/* El JS de lujo inclina algunas tarjetas: se anula */
.stat,
.settings-card,
.customer-card,
.threat-chip,
.wagon,
.cyber-panel,
.queue-card,
.panel {
  transform: none !important;
}

.panel-badge { color: var(--ink-faint); }
.panel-badge.gold { color: var(--gold-2); }

.panel-sub { color: var(--ink-faint); }

/* ------------------------------------------------------------- BOTONES */
.btn,
.btn-cyber { overflow: visible; }
.btn-gold::before,
.btn-cyber::before { display: none; }

.btn-gold {
  background: var(--gold-2);
  background-size: 100% 100%;
  color: #14110A;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: none;
  font-weight: 600;
}
.btn-gold:hover {
  background: #D6B476;
  background-size: 100% 100%;
  background-position: 0 0;
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0.25);
  filter: none;
  transform: none;
}

.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  background: transparent;
}
.btn-ghost:hover {
  border-color: rgba(200, 164, 92, 0.5);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.02);
  transform: none;
}

.btn-cyber {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}
.btn-cyber:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(143, 176, 164, 0.5);
  color: var(--ink);
  box-shadow: none;
}
.btn-cyber.primary {
  background: var(--gold-2);
  border-color: rgba(0, 0, 0, 0.25);
  color: #14110A;
}
.btn-cyber.primary:hover { background: #D6B476; }

.btn-cyber-danger {
  border-color: rgba(180, 83, 74, 0.5);
  color: #D98C84;
}
.btn-cyber-danger:hover {
  background: rgba(180, 83, 74, 0.1);
  border-color: var(--danger);
}

/* ------------------------------------------------------------- FORMULARIOS */
.field label { transition: none; }
.field:focus-within label { color: var(--gold-2); letter-spacing: 0.12em; }

.field-shell {
  background: var(--surface-sunken);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: none;
  transition: border-color 0.15s ease;
}
.field-shell:focus-within {
  transform: none;
  border-color: var(--gold-2);
  background: var(--surface-sunken);
  box-shadow: none;
}

.field-shell select option { background: #12151A; color: var(--ink); }

.search-hint {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-faint);
  border-radius: 3px;
}
.search-ic { color: var(--ink-faint); }

.select-control {
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
}

.cyber-input {
  background: var(--surface-sunken);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ink);
}
.cyber-input:focus {
  border-color: rgba(143, 176, 164, 0.6);
  box-shadow: none;
}

/* ------------------------------------------------------------- TABLAS */
th {
  background: #0E1114;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-faint);
  backdrop-filter: none;
}

td { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

tbody tr { transition: background 0.15s ease; }
tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
  transform: none;
}
tr:hover td { background: transparent; color: var(--ink); }

/* ------------------------------------------------------------- TAREAS */
.task-item:hover {
  border-color: var(--line-strong);
  background: var(--glass-bg);
}
.task-check { border-color: var(--ink-faint); color: var(--ink); }
.task-check:hover:not(.done) {
  border-color: var(--gold-2);
  background: rgba(200, 164, 92, 0.08);
  transform: none;
  box-shadow: none;
}
.task-check.done {
  background: var(--gold-2);
  border-color: var(--gold-2);
  color: #14110A;
  animation: none;
}

/* ------------------------------------------------------------- ETIQUETAS */
.tag { border-radius: 3px; }
.tag-success,
.tag-danger { box-shadow: none; }

/* ------------------------------------------------------------- CONFIGURACIÓN */
.settings-row { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }

.settings-preview {
  background: var(--surface-sunken);
  border: 1px solid var(--card-border);
}

.preview-kicker { color: var(--gold-2); }
.preview-title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}
.preview-line { background: var(--line-strong); opacity: 1; }

/* ------------------------------------------------------------- VISTA SOC */
.cyber-panel { background: #101413; }
.cyber-title { color: #9DBBAC; }
.cyber-title .dot {
  background: #9DBBAC;
  box-shadow: none;
  animation: none;
}

.threat-chip {
  background: var(--surface-sunken);
  border: 1px solid var(--card-border);
}
.threat-chip .n { color: #9DBBAC; }
.threat-chip:hover {
  transform: none;
  border-color: rgba(143, 176, 164, 0.4);
}

.cyber-row { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }

.soc-chip {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
}
.soc-chip:hover { border-color: rgba(255, 255, 255, 0.25); color: var(--ink); }
.soc-chip.active {
  background: rgba(200, 164, 92, 0.12);
  border-color: rgba(200, 164, 92, 0.5);
  color: var(--gold-1);
}

.soc-tabs {
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--surface-sunken);
}
.soc-tab {
  border-bottom: 2px solid transparent;
  border-radius: 4px;
  color: var(--ink-faint);
  background: transparent;
  box-shadow: none;
}
.soc-tab:hover { background: rgba(255, 255, 255, 0.03); }
.soc-tab.active {
  color: var(--gold-1);
  background: rgba(200, 164, 92, 0.1);
  border-bottom-color: transparent;
  box-shadow: none;
}

.soc-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}

.soc-dot.d-ok { background: var(--success); }
.soc-dot.d-warn { background: var(--warn); }
.soc-dot.d-bad { background: var(--danger); }

/* ------------------------------------------------------------- CADENA / BITÁCORA */
.chain-summary .stat { background: var(--glass-bg); }
.coupling { background: var(--line-strong); }
.wagon .seqmark {
  background: var(--surface-raised);
  color: var(--gold-2);
  border: 1px solid var(--line-strong);
  box-shadow: none;
  animation: none;
}
.wagon .wsrc {
  background: rgba(200, 164, 92, 0.12);
  color: var(--gold-1);
}
.wagon:hover { border-color: var(--line-strong); transform: none; }

/* ------------------------------------------------------------- CENTRO DE MANDO (defense.css) */
.cmd {
  background: linear-gradient(180deg, #0C0E0A 0%, #080906 100%);
  border: 1px solid var(--card-border);
  box-shadow: none;
}
.cmd::before { opacity: 0.3; }
.cmd-title {
  color: #E6EDDF;
  text-shadow: none;
  font-family: var(--font-body);
  letter-spacing: 0.14em;
}
.cmd-sub { color: #8A9A80; }
.cmd-top { border-bottom: 1px solid var(--line-strong); }

/* ------------------------------------------------------------- PANTALLA DE CARGA */
#bootLoader { background: #0B0D10; }

#bootLoader .bl-emblem::before {
  animation: none;
  border: 1px solid rgba(200, 164, 92, 0.35);
}
#bootLoader .bl-emblem::after { display: none; }
#bootLoader .bl-emblem img {
  animation: none;
  filter: none;
}
#bootLoader .bl-brand {
  color: var(--gold-2);
  letter-spacing: 0.28em;
}
#bootLoader .bl-status { color: var(--ink-faint); }
#bootLoader .bl-hello { color: var(--ink-soft); }
#bootLoader .bl-name {
  background: none;
  color: var(--ink);
}
#bootLoader .bl-sub { color: var(--ink-faint); }
#bootLoader .bl-bar { background: rgba(255, 255, 255, 0.08); }
#bootLoader .bl-bar i { box-shadow: none; }
#bootLoader .bl-pct { color: var(--ink-faint); }

/* Spinner de autenticación */
body.auth-pending::after {
  border-color: rgba(255, 255, 255, 0.12);
  border-top-color: var(--gold-2);
}

/* ------------------------------------------------------------- PALETA (Ctrl/⌘ K) */
.lux-pal-box {
  background: #12151A;
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.lux-pal-box input { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.lux-pal-item.sel {
  background: rgba(200, 164, 92, 0.1);
  color: var(--ink);
  transform: none;
}
.lux-pal-item .ic { color: var(--gold-2); }
.lux-kbd { border: 1px solid var(--line-strong); color: var(--ink-soft); }

/* ------------------------------------------------------------- DETALLES */
::selection { background: rgba(200, 164, 92, 0.85); color: #12100A; }

* { scrollbar-width: thin; scrollbar-color: #2A2F36 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #2A2F36; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 1px solid rgba(200, 164, 92, 0.6); outline-offset: 2px; }

.level-badge {
  background: rgba(200, 164, 92, 0.1);
  border-color: rgba(200, 164, 92, 0.4);
  color: var(--gold-1);
}

.level-gate-note { border-top: 1px dashed var(--line-strong); }

/* Monograma institucional (respaldo cuando el logo no está disponible) */
.mono-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  margin: 0 auto 26px;
  border: 1px solid rgba(200, 164, 92, 0.35);
  border-radius: 50%;
  font-family: 'Cinzel', serif;
  font-size: 34px;
  letter-spacing: 0.06em;
  color: var(--gold-2);
}
.mono-emblem.sm {
  width: 44px;
  height: 44px;
  font-size: 13px;
  margin: 0;
  border-radius: 6px;
  flex-shrink: 0;
}