/* ============================================================
   PULSO — UNIFIED LAVENDER THEME
   Single source of truth para todos los panels, modales,
   sidebars y secciones dinámicas JS.
   Se carga al final para ganar el cascade con !important
   solo donde hay conflicto real con los FX layers anteriores.
   ============================================================ */

/* ── TOKENS MAESTROS ──────────────────────────────────────── */
:root {
  /* Lavanda como color principal de UI — toda referencia al purple
     queda centralizada aquí y es consistente en toda la app */
  --lv-50:  #f3eeff;   /* texto sobre fondo claro */
  --lv-100: #e4d6ff;   /* label activo */
  --lv-200: #c9adff;   /* valor, hover fuerte */
  --lv-300: #B388FF;   /* acento principal (= acc-purple existente) */
  --lv-400: #9b6fe0;   /* acento oscurecido para gradientes */
  --lv-500: #7b50c0;   /* borde activo */

  /* Fondos — paleta unificada: azul muy oscuro, no gris cálido */
  --panel-bg-0:    #0d0d14;                    /* canvas / body */
  --panel-bg-1:    #13131e;                    /* modal base */
  --panel-bg-2:    #18182a;                    /* sidebar */
  --panel-bg-3:    #1e1e30;                    /* signal-group / section interna */
  --panel-bg-4:    #252540;                    /* elemento elevado, hover */
  --panel-glass:   rgba(16, 16, 30, 0.90);    /* glass panels JS */
  --panel-glass-b: rgba(22, 22, 40, 0.94);    /* modal header sticky */

  /* Bordes */
  --panel-line-1:  rgba(179, 136, 255, 0.08);  /* muy sutil */
  --panel-line-2:  rgba(179, 136, 255, 0.15);  /* normal */
  --panel-line-3:  rgba(179, 136, 255, 0.28);  /* activo */

  /* Texto */
  --panel-text-0:  #ede8ff;    /* principal */
  --panel-text-1:  #a89ec8;    /* label */
  --panel-text-2:  #6a609a;    /* muted */
  --panel-text-3:  #3d3560;    /* muy muted */

  /* Accents funcionales */
  --panel-gold:    #d4a83a;
  --panel-red:     #d07070;
  --panel-green:   #a8c870;
  --panel-cyan:    #6cc8d4;

  /* Geometry */
  --panel-r-sm:  6px;
  --panel-r-md:  10px;
  --panel-r-lg:  14px;
  --panel-r-xl:  18px;

  /* Shadows */
  --panel-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--panel-line-2);
  --panel-blur:   blur(20px) saturate(1.3);

  /* Remap tokens legacy → nuevos para que todo el style.css siga funcionando */
  --bg-0:        var(--panel-bg-0);
  --bg-1:        var(--panel-bg-1);
  --bg-2:        var(--panel-bg-3);
  --bg-3:        var(--panel-bg-4);
  --bg-modal:    var(--panel-bg-1);
  --bg-elevated: var(--panel-glass);
  --line-1:      var(--panel-line-1);
  --line-2:      var(--panel-line-2);
  --line-3:      var(--panel-line-3);
  --text-0:      var(--panel-text-0);
  --text-1:      var(--panel-text-1);
  --text-2:      var(--panel-text-2);
  --text-3:      var(--panel-text-3);
  --acc-purple:  var(--lv-300);
  --acc-purple-soft: rgba(179, 136, 255, 0.55);

  /* Remap tokens pulso-ui → nuevos */
  --pulso-ui-bg:           var(--panel-glass);
  --pulso-ui-bg-soft:      rgba(179, 136, 255, 0.08);
  --pulso-ui-bg-hover:     rgba(179, 136, 255, 0.15);
  --pulso-ui-border:       var(--panel-line-2);
  --pulso-ui-border-strong: var(--panel-line-3);
  --pulso-ui-text:         var(--panel-text-0);
  --pulso-ui-accent:       rgba(179, 136, 255, 0.20);
  --pulso-ui-radius:       var(--panel-r-lg);

  /* Remap tokens pulso legacy */
  --pulso-bg:      var(--panel-glass);
  --pulso-bg2:     rgba(179, 136, 255, 0.08);
  --pulso-bg3:     rgba(179, 136, 255, 0.18);
  --pulso-border:  var(--panel-line-2);
  --pulso-border2: var(--panel-line-3);
  --pulso-text:    var(--panel-text-0);
  --pulso-muted:   var(--panel-text-1);
  --pulso-accent:  var(--lv-300);
  --pulso-radius:  var(--panel-r-lg);
  --pulso-shadow:  var(--panel-shadow);
  --pulso-blur:    var(--panel-blur);
}

/* ── BASE ─────────────────────────────────────────────────── */
html, body {
  background: var(--panel-bg-0) !important;
}

/* ── SIDEBARS ─────────────────────────────────────────────── */
#leftBar {
  background: var(--panel-bg-2) !important;
  border-right: 1px solid var(--panel-line-2) !important;
  backdrop-filter: var(--panel-blur) !important;
  -webkit-backdrop-filter: var(--panel-blur) !important;
}

#rightBar {
  background: var(--panel-bg-2) !important;
  border-left: 1px solid var(--panel-line-2) !important;
  backdrop-filter: var(--panel-blur) !important;
  -webkit-backdrop-filter: var(--panel-blur) !important;
}

#leftBar .tool {
  color: var(--panel-text-2) !important;
  border-radius: var(--panel-r-md) !important;
  transition: background 0.15s, color 0.15s !important;
}
#leftBar .tool:hover {
  background: rgba(179, 136, 255, 0.12) !important;
  color: var(--lv-300) !important;
}
#leftBar .tool.on {
  background: rgba(179, 136, 255, 0.18) !important;
  color: var(--lv-300) !important;
  box-shadow: 0 0 0 1px rgba(179, 136, 255, 0.35) !important;
}

/* ── TOP BAR ──────────────────────────────────────────────── */
#topInfo .bpm {
  background: var(--panel-bg-2) !important;
  border: 1px solid var(--panel-line-2) !important;
  color: var(--lv-300) !important;
  backdrop-filter: var(--panel-blur) !important;
  -webkit-backdrop-filter: var(--panel-blur) !important;
}

/* ── MODAL SCRIM ─────────────────────────────────────────── */
#modalScrim {
  background: rgba(5, 5, 12, 0.60) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* ── TODOS LOS MODALES HTML ──────────────────────────────── */
/* Los .modal son los paneles del HTML base (Scenes, FX, Tunnel, etc.) */
.modal {
  background: var(--panel-bg-1) !important;
  border: 1px solid var(--panel-line-2) !important;
  border-radius: var(--panel-r-lg) !important;
  box-shadow: var(--panel-shadow) !important;
}

.modal-header {
  background: var(--panel-glass-b) !important;
  border-bottom: 1px solid var(--panel-line-2) !important;
  border-radius: var(--panel-r-lg) var(--panel-r-lg) 0 0 !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.modal-header h2 {
  color: var(--lv-300) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.modal-close {
  background: rgba(179, 136, 255, 0.08) !important;
  border: 1px solid var(--panel-line-2) !important;
  color: var(--panel-text-2) !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
}
.modal-close:hover {
  background: rgba(179, 136, 255, 0.20) !important;
  color: var(--lv-300) !important;
  border-color: var(--panel-line-3) !important;
}

/* ── SIGNAL GROUPS (secciones internas de modales) ────────── */
.signal-group {
  background: var(--panel-bg-3) !important;
  border: 1px solid var(--panel-line-1) !important;
  border-radius: var(--panel-r-md) !important;
}

.signal-head > span {
  color: var(--panel-text-2) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Labels de slider */
.modal label,
.modal .row span,
.modal .row {
  color: var(--panel-text-1) !important;
}

.modal .row .val,
.modal .row b,
[data-val-for] {
  color: var(--lv-200) !important;
  font-family: var(--font-mono, 'SF Mono', monospace) !important;
  font-size: 11px !important;
}

/* ── TODOS LOS PANELES JS DINÁMICOS ──────────────────────── */
/* section[id^="pulso-"] = paneles creados en runtime por JS */
section[id^="pulso-"][id$="-panel"],
section[id^="pulso-"]:not(#pulso-atmospheric-overlay):not(#pulso-atmospheric-grain):not(#pulso-credits),
#pulso-performance-system,
#pulso-clip-controls-fix-panel,
#pulso-super-tunnel-panel,
.pulso-integrated-legacy-panel,
#pulso-context-dock,
#pulso-ui-stage section {
  background: var(--panel-glass) !important;
  border: 1px solid var(--panel-line-2) !important;
  border-radius: var(--panel-r-lg) !important;
  color: var(--panel-text-0) !important;
  box-shadow: var(--panel-shadow) !important;
  backdrop-filter: var(--panel-blur) !important;
  -webkit-backdrop-filter: var(--panel-blur) !important;
}

/* Títulos en paneles JS */
section[id^="pulso-"] h3,
section[id^="pulso-"] h4,
#pulso-performance-system h3,
#pulso-performance-system h4,
#pulso-clip-controls-fix-panel h3,
#pulso-super-tunnel-panel h3 {
  color: var(--lv-300) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

section[id^="pulso-"] h3,
#pulso-performance-system h3 {
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

section[id^="pulso-"] h4 {
  font-size: 10px !important;
  color: var(--panel-text-2) !important;
  opacity: 1 !important;
}

/* Texto muted en paneles JS */
section[id^="pulso-"] p,
section[id^="pulso-"] small,
section[id^="pulso-"] span:not(button span),
#pulso-performance-system small {
  color: var(--panel-text-1) !important;
}

/* ── BOTONES — UNIFICADOS ────────────────────────────────── */
/* Base: todos los botones en la UI */
.modal button,
section[id^="pulso-"] button,
#pulso-performance-system button,
#pulso-clip-controls-fix-panel button,
#pulso-context-dock button,
#leftBar button,
#rightBar button,
#topInfo button {
  background: rgba(179, 136, 255, 0.07) !important;
  border: 1px solid var(--panel-line-2) !important;
  color: var(--panel-text-1) !important;
  border-radius: var(--panel-r-sm) !important;
  font-family: var(--font-ui, system-ui) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}

.modal button:hover,
section[id^="pulso-"] button:hover,
#pulso-context-dock button:hover {
  background: rgba(179, 136, 255, 0.16) !important;
  border-color: var(--panel-line-3) !important;
  color: var(--lv-200) !important;
}

/* Estado ON: el botón está activo / activado */
.modal button.on,
.modal button.active,
section[id^="pulso-"] button.on,
section[id^="pulso-"] button.active,
#pulso-context-dock button.active {
  background: rgba(179, 136, 255, 0.22) !important;
  border-color: rgba(179, 136, 255, 0.55) !important;
  color: var(--lv-300) !important;
  box-shadow: 0 0 0 1px rgba(179, 136, 255, 0.25) !important;
}

/* Botón PRIMARY */
.modal button.primary,
section[id^="pulso-"] button.primary {
  background: rgba(179, 136, 255, 0.22) !important;
  border-color: rgba(179, 136, 255, 0.50) !important;
  color: var(--lv-200) !important;
  font-weight: 600 !important;
}
.modal button.primary:hover,
section[id^="pulso-"] button.primary:hover {
  background: rgba(179, 136, 255, 0.32) !important;
  box-shadow: 0 0 16px rgba(179, 136, 255, 0.15) !important;
}

/* Botón DANGER */
.modal button.danger,
section[id^="pulso-"] button.danger {
  background: rgba(208, 112, 112, 0.10) !important;
  border-color: rgba(208, 112, 112, 0.30) !important;
  color: var(--panel-red) !important;
}

/* ── INPUTS ──────────────────────────────────────────────── */
.modal input[type="text"],
.modal textarea,
section[id^="pulso-"] input[type="text"],
section[id^="pulso-"] textarea {
  background: var(--panel-bg-0) !important;
  border: 1px solid var(--panel-line-2) !important;
  color: var(--panel-text-0) !important;
  border-radius: var(--panel-r-sm) !important;
}
.modal input[type="text"]:focus,
.modal textarea:focus {
  border-color: rgba(179, 136, 255, 0.50) !important;
  box-shadow: 0 0 0 2px rgba(179, 136, 255, 0.12) !important;
  outline: none !important;
}

/* Range inputs — accent lavanda */
.modal input[type="range"],
section[id^="pulso-"] input[type="range"] {
  accent-color: var(--lv-300) !important;
}

/* ── SELECT y CYCLE ──────────────────────────────────────── */
.modal select,
section[id^="pulso-"] select {
  background: var(--panel-bg-3) !important;
  border: 1px solid var(--panel-line-2) !important;
  color: var(--panel-text-1) !important;
  border-radius: var(--panel-r-sm) !important;
}

.modal button.cycle,
section[id^="pulso-"] button.cycle {
  background: var(--panel-bg-3) !important;
  border: 1px solid var(--panel-line-2) !important;
  color: var(--panel-text-1) !important;
  text-align: left !important;
  justify-content: space-between !important;
}
.modal button.cycle:hover {
  background: var(--panel-bg-4) !important;
  color: var(--lv-200) !important;
}

/* ── PRESET SLOTS / MEMORY BANKS ─────────────────────────── */
.presets button,
#presetSlots button {
  background: var(--panel-bg-3) !important;
  border: 1px solid var(--panel-line-2) !important;
  color: var(--panel-text-2) !important;
  border-radius: var(--panel-r-sm) !important;
  font-size: 11px !important;
}
.presets button.on,
#presetSlots button.on {
  background: rgba(179, 136, 255, 0.20) !important;
  border-color: rgba(179, 136, 255, 0.45) !important;
  color: var(--lv-300) !important;
}

/* ── SCENE GRID ──────────────────────────────────────────── */
.scene-grid button {
  background: var(--panel-bg-3) !important;
  border: 1px solid var(--panel-line-2) !important;
  color: var(--panel-text-1) !important;
  border-radius: var(--panel-r-md) !important;
}
.scene-grid button:hover,
.scene-grid button.on {
  background: rgba(179, 136, 255, 0.18) !important;
  border-color: rgba(179, 136, 255, 0.45) !important;
  color: var(--lv-300) !important;
}

/* ── LAYER LIST ──────────────────────────────────────────── */
#layerList,
#moduleStack,
#fxChainList,
.layer-list,
.fx-chain-list {
  background: var(--panel-bg-0) !important;
  border: 1px solid var(--panel-line-1) !important;
  border-radius: var(--panel-r-sm) !important;
}

/* ── VSLIDERS (right bar) ────────────────────────────────── */
.vslider .lbl {
  color: var(--panel-text-2) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
}
.vslider .val {
  color: var(--lv-300) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 9px !important;
}

/* ── SEQ SECTIONS (Performance Flow) ────────────────────── */
.seq-section {
  background: var(--panel-bg-3) !important;
  border: 1px solid var(--panel-line-1) !important;
  border-radius: var(--panel-r-md) !important;
}
.seq-section-title {
  color: var(--lv-300) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ── TUNNEL TOOLBAR ──────────────────────────────────────── */
.tunnel-toolbar button {
  background: var(--panel-bg-3) !important;
  border: 1px solid var(--panel-line-2) !important;
  color: var(--panel-text-1) !important;
  border-radius: var(--panel-r-sm) !important;
}
#tunnelLayerBtn.on {
  background: rgba(179, 136, 255, 0.22) !important;
  border-color: rgba(179, 136, 255, 0.55) !important;
  color: var(--lv-300) !important;
}

/* ── HYDRA PANEL ─────────────────────────────────────────── */
.hydra-editor {
  background: var(--panel-bg-0) !important;
  border: 1px solid var(--panel-line-2) !important;
  border-radius: var(--panel-r-md) !important;
}
.hydra-editor textarea {
  background: transparent !important;
  color: var(--panel-green) !important;
  border: none !important;
}
.hydra-error { color: var(--panel-red) !important; }
.hydra-status { color: var(--panel-text-2) !important; }

/* ── TILT / AUDIO METERS ─────────────────────────────────── */
.axis-meter .lbl,
#audioMeter {
  color: var(--panel-text-2) !important;
}

/* ── HINT TEXT ───────────────────────────────────────────── */
.hint,
small.hint {
  color: var(--panel-text-2) !important;
  font-size: 11px !important;
}

/* ── HEADERS DENTRO DE MODALES ───────────────────────────── */
.modal .slot-heading {
  color: var(--panel-text-2) !important;
}

/* ── CONTEXT DOCK (dock flotante JS) ─────────────────────── */
#pulso-context-dock {
  background: var(--panel-glass) !important;
  border: 1px solid var(--panel-line-2) !important;
  border-radius: 999px !important;
  box-shadow: var(--panel-shadow) !important;
  backdrop-filter: var(--panel-blur) !important;
  -webkit-backdrop-filter: var(--panel-blur) !important;
}

/* ── WATERMARK / CREDITS ─────────────────────────────────── */
#pulsoWatermark {
  color: var(--lv-400) !important;
  opacity: 0.30 !important;
}
#pulsoWatermark small {
  color: var(--panel-text-3) !important;
}
#pulso-credits {
  color: var(--panel-text-3) !important;
}

/* ── REC HUD ─────────────────────────────────────────────── */
#recHud {
  background: rgba(208, 112, 112, 0.18) !important;
  border: 1px solid rgba(208, 112, 112, 0.45) !important;
  color: var(--panel-red) !important;
}

/* ── PERFORMANCE STOP BTN ────────────────────────────────── */
#performStopBtn {
  background: rgba(208, 112, 112, 0.14) !important;
  border: 1px solid rgba(208, 112, 112, 0.35) !important;
  color: var(--panel-red) !important;
}
#restoreUI {
  background: var(--panel-glass) !important;
  border: 1px solid var(--panel-line-2) !important;
  color: var(--lv-300) !important;
  backdrop-filter: var(--panel-blur) !important;
  -webkit-backdrop-filter: var(--panel-blur) !important;
}

/* ── SCROLLBARS ──────────────────────────────────────────── */
.modal::-webkit-scrollbar,
section[id^="pulso-"]::-webkit-scrollbar { width: 3px; }
.modal::-webkit-scrollbar-track,
section[id^="pulso-"]::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb,
section[id^="pulso-"]::-webkit-scrollbar-thumb {
  background: rgba(179, 136, 255, 0.20);
  border-radius: 2px;
}

/* ── FOCUS RING ──────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(179, 136, 255, 0.60) !important;
  outline-offset: 2px !important;
  border-radius: var(--panel-r-sm) !important;
}

/* ── SAFE: no tocar canvas ni overlays visuales ──────────── */
#webgl, #source,
#pulso-atmospheric-overlay,
#pulso-atmospheric-grain,
#pulso-organic-topology-canvas,
#pulso-particle-ecosystem-canvas,
#pulso-true-feedback-engine {
  background: transparent !important;
  /* No overrides de color aquí — son outputs visuales */
}

/* Modal visibility: manejado por whiteOverlayFix.css (fuente única de verdad)
   NO override de display/opacity/transform aquí para evitar conflictos. */