/* ==========================================================
   NIRVAEL V45.6 - INTELLIGENT PRO EXPERIENCE POLISH
   Human-first PRO UI: fewer controls, more guidance, all English.
========================================================== */
#advancedPanel{
  background:
    radial-gradient(circle at 50% 0%,rgba(0,195,255,.12),transparent 36%),
    radial-gradient(circle at 8% 38%,rgba(123,97,255,.10),transparent 34%),
    linear-gradient(180deg,rgba(3,13,29,.78),rgba(0,0,0,.34)) !important;
}
#advancedPanel .advanced-title,
#advancedPanel .nir-advanced-note,
#advancedPanel #advancedFaders,
#advancedPanel .instrument-box:not(.nir-pro-intelligence-visible){
  display:none !important;
}
.nir-pro-hero{
  margin-bottom:18px !important;
  border-radius:32px !important;
}
.nir-pro-eyebrow{color:#8ff8e8 !important;}
.nir-pro-title{font-size:clamp(28px,4vw,46px) !important;}
.nir-pro-copy{max-width:820px !important;font-size:14px !important;color:rgba(226,242,255,.70) !important;}
.nir-pro-badge{background:rgba(0,195,255,.12) !important;color:#c9f8ff !important;}
.nir-pro-presets{display:none !important;}
.nir-pro-status{display:none !important;}

.nir-pro-intelligence{
  margin:18px 0 0;
  display:grid;
  gap:16px;
}
.nir-pro-section{
  padding:22px;
  border-radius:30px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(180,215,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 20px 60px rgba(0,0,0,.20);
}
.nir-pro-section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px;}
.nir-pro-section-kicker{margin:0 0 6px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:860;color:#7ee8ff;}
.nir-pro-section-title{margin:0;font-size:22px;line-height:1.08;letter-spacing:-.04em;font-weight:860;color:rgba(255,255,255,.94);}
.nir-pro-section-copy{margin:8px 0 0;max-width:760px;font-size:13px;line-height:1.55;color:rgba(226,242,255,.62);}

.nir-pro-scene-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.nir-pro-scene-card{
  min-height:148px;
  text-align:left;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.030));
  border:1px solid rgba(180,215,255,.13);
  color:rgba(244,251,255,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
.nir-pro-scene-card:hover{background:rgba(0,195,255,.10);border-color:rgba(0,195,255,.30);}
.nir-pro-scene-card.active{background:linear-gradient(135deg,rgba(0,195,255,.22),rgba(123,97,255,.17));border-color:rgba(0,195,255,.48);box-shadow:0 0 34px rgba(0,195,255,.15),inset 0 1px 0 rgba(255,255,255,.08);}
.nir-pro-scene-icon{font-size:22px;line-height:1;margin-bottom:12px;filter:drop-shadow(0 0 12px rgba(0,195,255,.26));}
.nir-pro-scene-name{display:block;font-size:14px;font-weight:860;line-height:1.12;letter-spacing:-.02em;}
.nir-pro-scene-desc{display:block;margin-top:8px;font-size:11px;line-height:1.38;font-weight:620;color:rgba(226,242,255,.56);}

.nir-pro-intent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.nir-pro-intent{
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(180,215,255,.11);
}
.nir-pro-intent-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px;}
.nir-pro-intent-name{font-size:14px;font-weight:860;color:rgba(255,255,255,.94);}
.nir-pro-intent-value{font-size:13px;font-weight:860;color:#8ff8e8;}
.nir-pro-intent-help{min-height:34px;margin:0 0 12px;font-size:11px;line-height:1.45;color:rgba(226,242,255,.56);}
.nir-pro-intent input[type="range"]{height:6px;}

.nir-pro-live-row{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:stretch;}
.nir-pro-live-card{padding:18px;border-radius:24px;background:rgba(0,0,0,.24);border:1px solid rgba(180,215,255,.12);}
.nir-pro-live-label{margin:0 0 8px;font-size:11px;letter-spacing:.20em;text-transform:uppercase;font-weight:860;color:rgba(126,232,255,.75);}
.nir-pro-live-text{margin:0;font-size:15px;line-height:1.45;font-weight:760;color:rgba(245,251,255,.88);}
.nir-pro-evolve-btn{width:100%;height:100%;min-height:76px;border-radius:24px;background:linear-gradient(135deg,rgba(0,195,255,.92),rgba(45,125,255,.86),rgba(123,97,255,.84));color:white;font-size:15px;font-weight:880;box-shadow:0 20px 55px rgba(0,195,255,.22),inset 0 1px 0 rgba(255,255,255,.18);}
.nir-pro-evolve-btn{position:relative;overflow:hidden;transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;border:1px solid rgba(180,235,255,.22);}
.nir-pro-evolve-btn strong{display:block;font-size:15px;font-weight:900;letter-spacing:-.01em;}
.nir-pro-evolve-btn em{display:block;margin-top:5px;font-size:11px;font-style:normal;font-weight:650;opacity:.78;line-height:1.35;}
.nir-pro-evolve-dot{position:absolute;left:17px;top:17px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.58);box-shadow:0 0 12px rgba(255,255,255,.34);}
.nir-pro-evolve-btn.active{background:linear-gradient(135deg,rgba(0,230,255,1),rgba(45,125,255,.98),rgba(150,92,255,.96));border-color:rgba(143,248,232,.90);box-shadow:0 0 0 1px rgba(143,248,232,.20),0 0 34px rgba(0,195,255,.50),0 0 72px rgba(123,97,255,.34),inset 0 1px 0 rgba(255,255,255,.30);animation:nirProEvolveBreath 2.8s ease-in-out infinite;}
.nir-pro-evolve-btn.active:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.24),transparent 30%);opacity:.75;pointer-events:none;}
.nir-pro-evolve-btn.active .nir-pro-evolve-dot{background:#8ff8e8;box-shadow:0 0 14px rgba(143,248,232,.95),0 0 32px rgba(0,195,255,.70);animation:nirProEvolveDot 1.35s ease-in-out infinite;}
@keyframes nirProEvolveBreath{0%,100%{transform:translateY(0) scale(1);filter:saturate(1)}50%{transform:translateY(-1px) scale(1.012);filter:saturate(1.16)}}
@keyframes nirProEvolveDot{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.75);opacity:1}}

#advancedPanel.nir-pro-locked .nir-pro-intelligence{filter:grayscale(.75);opacity:.44;pointer-events:none;}
#advancedPanel .nir-pro-lock-message{font-size:12px !important;line-height:1.55 !important;letter-spacing:.10em !important;text-transform:uppercase !important;color:rgba(235,248,255,.82) !important;}

@media(max-width:1100px){.nir-pro-scene-grid{grid-template-columns:repeat(3,1fr)}.nir-pro-intent-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.nir-pro-scene-grid,.nir-pro-intent-grid,.nir-pro-live-row{grid-template-columns:1fr}.nir-pro-section{padding:18px}.nir-pro-scene-card{min-height:120px}}


/* ==========================================================
   NIRVAEL V45.36 - MOBILE LAYOUT HARDENING
   Solo corrige maquetación responsive. No toca motor de audio.
========================================================== */
html,body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  -webkit-text-size-adjust:100%;
}
body{touch-action:manipulation;}
#appContainer,
.nir-dashboard,
.nir-hero,
.visual-card,
.waveform-card,
#masterVolumeContainer,
#topControls,
#topButtons,
#faders,
#advancedPanel,
#advancedFaders,
.layer-block,
.advanced-block,
.instrument-box,
.nir-pro-hero,
.nir-pro-intelligence,
.nir-pro-section,
.nir-pro-live-card{
  max-width:100% !important;
  min-width:0 !important;
}
canvas,
#chordCircleCanvas,
#waveform{
  max-width:100% !important;
}
.layer-head,
.advanced-head,
.nir-pro-section-head,
.nir-pro-intent-top,
.range-row{
  min-width:0 !important;
}
.layer-title,
.track-label,
.advanced-name,
.advanced-label,
.nir-pro-section-title,
.nir-pro-section-copy,
.nir-pro-live-text,
.nir-pro-intent-help,
.selection-badge span{
  overflow-wrap:anywhere;
  word-break:normal;
}

@media(max-width:860px){
  #appContainer{
    width:100% !important;
    padding:8px 8px 24px !important;
    margin:0 !important;
  }
  .nir-dashboard{
    width:100% !important;
    padding:8px !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }
  .nir-hero{
    width:100% !important;
    min-height:auto !important;
    padding:34px 12px 24px !important;
    border-radius:20px !important;
  }
  .nir-hero:before{
    width:min(560px,92vw) !important;
  }
  .nir-hero:after{
    width:min(360px,72vw) !important;
  }
  .nir-subtitle{
    max-width:100% !important;
    font-size:clamp(18px,6vw,24px) !important;
    line-height:1.18 !important;
    letter-spacing:-.035em !important;
    padding:0 2px !important;
  }
  .selection-badges{
    width:100% !important;
    margin-top:18px !important;
  }
  .selection-badge{
    max-width:100% !important;
    min-height:44px !important;
    padding:9px 13px !important;
    font-size:12px !important;
  }
  #startScreen{
    width:100% !important;
    padding:24px 0 0 !important;
  }
  .start-card{
    width:100% !important;
    border-radius:26px !important;
    padding:10px !important;
  }
  #startAudioBtn{
    width:100% !important;
    min-height:58px !important;
    padding:14px 18px !important;
    font-size:16px !important;
  }
  #topControls{
    width:100% !important;
    margin-top:24px !important;
    gap:12px !important;
  }
  #topButtons{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    gap:10px !important;
  }
  .btn-primary,.btn-secondary,.customize-btn{
    width:100% !important;
    min-width:0 !important;
    padding:13px 18px !important;
  }
  #masterVolumeContainer{
    padding:14px !important;
    border-radius:20px !important;
  }
  .range-row{
    gap:10px !important;
  }
  .range-row > div:first-child{
    display:none !important;
  }
  .range-percent{
    width:42px !important;
    flex:0 0 42px !important;
    font-size:13px !important;
  }
  .visual-card,
  .waveform-card{
    width:100% !important;
    border-radius:22px !important;
    margin-top:12px !important;
  }
  .harmonic-card{
    min-height:260px !important;
  }
  #chordCircleCanvas{
    height:260px !important;
    border-radius:22px !important;
  }
  .waveform-card #waveform,
  #waveform{
    height:78px !important;
  }
  #faders,
  #faders.nir-basic-faders,
  #advancedFaders,
  .nir-pro-scene-grid,
  .nir-pro-intent-grid,
  .nir-pro-live-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .layer-block,
  .advanced-block,
  .instrument-box,
  .nir-pro-section,
  .nir-pro-live-card,
  .nir-pro-scene-card,
  .nir-pro-intent{
    padding:14px !important;
    border-radius:20px !important;
  }
  .layer-head,
  .advanced-head{
    gap:10px !important;
    margin-bottom:12px !important;
  }
  .layer-left,
  .advanced-name-wrap{
    min-width:0 !important;
    gap:10px !important;
  }
  .icon-card{
    width:44px !important;
    height:44px !important;
    border-radius:15px !important;
    flex:0 0 44px !important;
  }
  .icon-card svg{
    width:24px !important;
    height:24px !important;
  }
  .layer-title{
    font-size:15px !important;
  }
  .layer-value,
  .advanced-value{
    font-size:15px !important;
    white-space:nowrap !important;
  }
  #advancedPanel{
    padding:12px !important;
    border-radius:22px !important;
  }
  .nir-pro-hero{
    padding:16px !important;
    border-radius:22px !important;
  }
  .nir-pro-title,
  .nir-pro-section-title{
    font-size:clamp(20px,7vw,28px) !important;
  }
}

@media(max-width:420px){
  #appContainer{padding-left:6px !important;padding-right:6px !important;}
  .nir-dashboard{padding:6px !important;border-radius:20px !important;}
  .nir-hero{padding:28px 10px 20px !important;}
  .harmonic-card{min-height:230px !important;}
  #chordCircleCanvas{height:230px !important;}
  .waveform-card #waveform,#waveform{height:68px !important;}
  .layer-block,.advanced-block,.instrument-box{padding:12px !important;}
}