/* ============================================================
   PULSO — LAYER ORDER & MODAL VISIBILITY
   Reemplaza todos los FIX38/40/42/47 acumulados.
   Una sola fuente de verdad para z-index y display de modales.

   Stack (bajo → alto):
     canvases / FX overlays  →  0–100
     scrim                   →  900
     sidebars + topbar       →  1000
     modal abierto           →  1100

   El body NUNCA tiene background blanco.
   Ningún overlay visual captura eventos de tap.
   ============================================================ */

/* ── BODY ──────────────────────────────────────────────────── */
html, body {
  background: #000 !important;
}

/* ── CANVASES (fondo siempre transparente) ──────────────────── */
#webgl,
#source,
#hydraCanvas,
canvas[id^="pulso-"] {
  z-index: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}
/* El canvas principal sí recibe eventos de pintura/gesto */
#webgl {
  pointer-events: auto !important;
}

/* ── OVERLAYS VISUALES (nunca capturan taps) ────────────────── */
#pulso-atmospheric-overlay,
#pulso-atmospheric-grain,
#pulso-true-feedback-engine,
#pulso-particle-ecosystem-pro,
#pulso-particle-ecosystem-canvas,
#pulso-organic-topology-canvas,
#pulso-mandala-layer {
  background-color: transparent !important;
  pointer-events: none !important;
  z-index: 50 !important;
}

/* Atmospheric overlay: nunca un velo blanco opaco */
#pulso-atmospheric-overlay {
  opacity: min(0.18, calc(0.04 + var(--pulso-compositor-atmosphere, 0.5) * 0.12)) !important;
  mix-blend-mode: screen !important;
}
#pulso-atmospheric-grain {
  opacity: min(0.09, calc(var(--pulso-grain, 0.12) * 0.18)) !important;
  mix-blend-mode: overlay !important;
}
#pulso-true-feedback-engine {
  background: transparent !important;
  opacity: min(0.72, var(--pulso-feedback-opacity, 0.55)) !important;
}

/* ── SCRIM ──────────────────────────────────────────────────── */
#modalScrim {
  position: fixed !important;
  inset: 0 !important;
  z-index: 900 !important;
  display: none !important;
  pointer-events: none !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}
#modalScrim.on {
  display: block !important;
  pointer-events: auto !important;
}

/* ── SIDEBARS Y TOPBAR ──────────────────────────────────────── */
#leftBar,
#rightBar {
  z-index: 1000 !important;
  pointer-events: auto !important;
}
#topInfo {
  z-index: 1000 !important;
  pointer-events: none !important;
}
#topInfo > * {
  pointer-events: auto !important;
}
#leftBar .tool,
#leftBar .tool *,
#rightBar .vslider,
#rightBar .vslider * {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* ── MODAL BASE: oculto por defecto ─────────────────────────── */
.modal {
  z-index: 1100 !important;
  pointer-events: none !important;
  display: none !important;          /* JS agrega .on para mostrar */
  /* Sin transform aquí — lo maneja la animación de style.css */
}

/* ── MODAL ABIERTO ──────────────────────────────────────────── */
.modal.on {
  position: fixed !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1100 !important;

  /* Posición: anclado al borde del sidebar izquierdo */
  left: calc(var(--left-bar, 60px) + 12px) !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;

  /* Tamaño */
  width: min(400px, calc(100vw - var(--left-bar, 60px) - var(--right-bar, 44px) - 24px)) !important;
  max-width: calc(100vw - var(--left-bar, 60px) - var(--right-bar, 44px) - 24px) !important;
  max-height: calc(100dvh - 48px) !important;
  min-height: 80px !important;

  /* Scroll */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;

  /* Sin animación extra — style.css ya tiene modalIn */
  animation: none !important;
}

/* En móvil pequeño: ocupa casi toda la pantalla */
@media (max-width: 600px) {
  .modal.on {
    left: calc(var(--left-bar, 52px) + 8px) !important;
    right: 8px !important;
    top: calc(8px + env(safe-area-inset-top)) !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
  }
}

/* Controles dentro del modal siempre interactivos */
.modal.on button,
.modal.on input,
.modal.on select,
.modal.on textarea,
.modal.on label,
.modal.on .vslider,
.modal.on [role="button"] {
  pointer-events: auto !important;
}

/* ── MODO OCULTO (performance/clean mode) ───────────────────── */
/* Todo el chrome de UI desaparece, incluyendo modales abiertos */
body.hide-ui #leftBar,
body.hide-ui #rightBar,
body.hide-ui #topInfo {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s !important;
}
body.hide-ui .modal,
body.hide-ui .modal.on,
body.hide-ui #modalScrim,
body.hide-ui #modalScrim.on {
  display: none !important;
  pointer-events: none !important;
}

/* ── ELEMENTOS QUE NO DEBEN SER PANELES BLANCOS ─────────────── */
/* Cualquier [id^="pulso-"] que no sea section/nav/button/input
   permanece transparente */
[id^="pulso-"]:not(section):not(nav):not(button):not(input):not(select):not(textarea):not(#pulso-credits) {
  background-color: transparent;
}
/* Paneles JS dinámicos sí tienen fondo (override en unified-theme) */
section[id^="pulso-"] {
  background-color: var(--panel-glass, rgba(16, 16, 30, 0.90));
}
/* Canvases Pulso siempre transparentes */
canvas[id^="pulso-"] {
  background-color: transparent !important;
}

/* ── PANELES JS (section[id^="pulso-"]) ─────────────────────── */
/* Deben estar por debajo del modal abierto */
section[id^="pulso-"][id$="-panel"],
#pulso-performance-system,
#pulso-clip-controls-fix-panel {
  z-index: 1050 !important;
  pointer-events: auto !important;
}

/* ── ELEMENTOS OCULTOS DE UI ────────────────────────────────── */
.pulso-legacy-hidden,
.pulso-ui-hidden {
  display: none !important;
}