*{box-sizing:border-box}body{margin:0;background:#0b0b10;color:#f2f2f2;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}header{position:sticky;top:0;z-index:5;background:#12121a;border-bottom:1px solid #2a2a38;padding:12px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between}h1{margin:0;font-size:22px}small{color:#aaa}.top{display:flex;gap:8px;flex-wrap:wrap}select,input,button{border:0;border-radius:12px;padding:10px 12px;background:#232333;color:white}button{cursor:pointer;font-weight:800}.play{background:#0f8f4d}.stop{background:#b02b2b}.sync{background:#2d55d8}main{max-width:980px;margin:auto;padding:14px}.panel{background:#15151f;border:1px solid #272737;border-radius:18px;padding:14px;margin-bottom:14px}.now{display:flex;align-items:center;justify-content:space-between;gap:12px}.now h2{margin:4px 0;font-size:26px}.controls{display:grid;grid-template-columns:1fr 1.5fr 1.5fr 1.5fr 1.7fr;gap:8px;margin:12px 0}.dots{display:flex;gap:8px;justify-content:center;padding:10px}.dot{width:18px;height:18px;border-radius:50%;background:#555}.dot.on{background:#fff;box-shadow:0 0 18px #fff}.dot.first.on{background:#40ff85;box-shadow:0 0 24px #40ff85}.stage{text-align:center;position:relative}.stage h2{font-size:34px;margin:12px 0 2px}.stage #bpmBig{font-size:88px;font-weight:950;line-height:1}.bpmLabel{color:#aaa}.big .dot{width:34px;height:34px}.bigbtn,.bigsync{font-size:22px;padding:18px 28px;margin:12px 8px 0}.bigsync{min-width:180px}.soundFloat{position:absolute;left:14px;top:14px;font-size:24px;background:transparent}.toolbar{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px}#songs{list-style:none;margin:0;padding:0}.song{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#1d1d29;margin-bottom:8px;border-radius:14px;padding:10px;border:1px solid #303044}.song.current{outline:2px solid #40ff85}.song.skipped{opacity:.45}.song.skipped .title{text-decoration:line-through}.title{font-weight:800}.meta{color:#bbb;font-size:13px;margin-top:3px}.edit{display:flex;gap:6px;align-items:center}.edit input{width:72px;padding:8px}.drag{font-size:20px;color:#aaa;user-select:none}#flash{position:fixed;inset:0;pointer-events:none;background:white;opacity:0;z-index:100;transition:opacity .045s}.flash-on #flash{opacity:.52}.flash-first #flash{background:#40ff85}.clients{font-size:13px;color:#bbb;margin-top:8px}.stage-mode header,.stage-mode .director,.stage-mode .repertorio{display:none}.stage-mode main{max-width:none;padding:0}.stage-mode .stage{display:flex;min-height:100vh;border:0;border-radius:0;margin:0;background:#030305;flex-direction:column;align-items:center;justify-content:center}.stage-mode .stage h2{font-size:clamp(34px,7vw,78px);max-width:95vw}.stage-mode .stage #bpmBig{font-size:clamp(90px,20vw,230px)}.stage-mode .big .dot{width:clamp(32px,6vw,70px);height:clamp(32px,6vw,70px)}.stage-mode .soundFloat{display:block;position:fixed;top:22px;left:22px;z-index:110}.stage-mode .bigsync{font-size:clamp(28px,6vw,64px);padding:24px 42px;border-radius:28px}.stage-mode .bigbtn{font-size:clamp(18px,4vw,34px)}@media(max-width:650px){header{display:block}.top{margin-top:8px}.controls{grid-template-columns:1fr 1fr}.stage #bpmBig{font-size:72px}.song{grid-template-columns:auto 1fr}.edit{grid-column:1/3}.now h2{font-size:22px}}


/* Botones extra en modo escenario */
.stageMini{
  min-height:24px;
  font-size:18px;
  color:#aeb1c8;
  opacity:.9;
  text-align:center;
  margin:4px 0;
}
.stageNav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:24px;
}
.stageNav button{
  min-width:170px;
  border:1px solid #3a3b52;
  border-radius:16px;
  padding:18px 22px;
  font-size:24px;
  font-weight:800;
}
.stageNav .play,#stagePlayBtn{
  background:#11964e;
}
.stageNav2{
  margin-top:18px;
}
@media(max-width:700px){
  .stageNav{gap:10px;margin-top:18px;}
  .stageNav button{min-width:120px;font-size:18px;padding:14px 12px;}
  .stageMini{font-size:14px;}
}
body.stage-mode header,
body.stage-mode .director,
body.stage-mode .repertorio{
  display:none!important;
}
body.stage-mode main{
  padding:0;
}
body.stage-mode .stage{
  min-height:100vh;
  width:100vw;
  max-width:none;
  border-radius:0;
  border:0;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Ajuste cabecera sin desplegable */
.top input#name{min-width:220px;}
@media(max-width:650px){.top input#name{width:calc(100% - 56px);min-width:0;}}


/* v0.9.6 - Botones de escenario: anterior abajo izquierda / siguiente abajo derecha */
body.stage-mode .stageNav{
  position:fixed;
  left:0;
  right:0;
  bottom:118px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:0 22px;
  z-index:120;
  margin:0;
}
body.stage-mode #stagePrevBtn{
  justify-self:start;
  min-width:min(42vw,260px);
}
body.stage-mode #stagePlayBtn{
  justify-self:center;
  min-width:min(32vw,220px);
}
body.stage-mode #stageNextBtn{
  justify-self:end;
  min-width:min(42vw,260px);
}
body.stage-mode .stageNav2{
  position:fixed;
  left:0;
  right:0;
  bottom:24px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  z-index:121;
  margin:0;
  padding:0 16px;
}
body.stage-mode .stageNav button{
  font-size:clamp(17px,3.2vw,30px);
  padding:clamp(12px,2.4vw,22px) clamp(14px,3vw,32px);
}
body.stage-mode .stageNav2 button{
  font-size:clamp(16px,2.8vw,26px);
  padding:clamp(12px,2vw,20px) clamp(18px,3vw,34px);
}
body.stage-mode #stageTitle,
body.stage-mode #bpmBig,
body.stage-mode #stageDots{
  transform:translateY(-48px);
}
@media(max-width:650px){
  body.stage-mode .stageNav{
    bottom:104px;
    padding:0 10px;
    gap:8px;
  }
  body.stage-mode #stagePrevBtn,
  body.stage-mode #stageNextBtn{
    min-width:34vw;
  }
  body.stage-mode #stagePlayBtn{
    min-width:24vw;
  }
  body.stage-mode .stageNav button{
    font-size:16px;
    padding:13px 8px;
    border-radius:14px;
  }
  body.stage-mode .stageNav2{
    bottom:18px;
    gap:10px;
  }
  body.stage-mode .stageNav2 button{
    font-size:15px;
    padding:12px 12px;
  }
}

/* v0.9.7 - Arreglo textos en pantalla completa móvil */
body.stage-mode .stage{
  min-height:100vh!important;
  width:100vw!important;
  padding:70px 14px 220px!important;
  justify-content:center!important;
  gap:8px!important;
  overflow:hidden!important;
}
body.stage-mode #stagePrevTitle,
body.stage-mode #stageNextTitle{
  display:block!important;
  width:94vw!important;
  max-width:94vw!important;
  min-height:18px!important;
  font-size:clamp(12px,3.3vw,22px)!important;
  line-height:1.15!important;
  color:#aeb1c8!important;
  opacity:.58!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:center!important;
  margin:0 auto!important;
  transform:none!important;
}
body.stage-mode #stageTitle{
  display:block!important;
  width:94vw!important;
  max-width:94vw!important;
  font-size:clamp(30px,9vw,78px)!important;
  line-height:1.05!important;
  margin:8px auto 4px!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  transform:none!important;
}
body.stage-mode #bpmBig{
  display:block!important;
  font-size:clamp(92px,24vw,230px)!important;
  line-height:.9!important;
  margin:22px auto 0!important;
  transform:none!important;
}
body.stage-mode .bpmLabel{
  display:block!important;
  font-size:clamp(14px,3.2vw,22px)!important;
  line-height:1!important;
  color:#aaa!important;
  margin:8px auto 12px!important;
}
body.stage-mode #stageDots{
  transform:none!important;
  margin:4px auto 0!important;
  padding:8px 0!important;
}
body.stage-mode .big .dot{
  width:clamp(34px,8vw,70px)!important;
  height:clamp(34px,8vw,70px)!important;
}
@media(max-width:650px){
  body.stage-mode .stage{
    padding-top:62px!important;
    padding-bottom:210px!important;
  }
  body.stage-mode #stageTitle{
    font-size:clamp(28px,10vw,54px)!important;
  }
  body.stage-mode #bpmBig{
    font-size:clamp(96px,28vw,150px)!important;
  }
}
@media(max-height:760px){
  body.stage-mode .stage{
    padding-top:48px!important;
    padding-bottom:185px!important;
    gap:4px!important;
  }
  body.stage-mode #bpmBig{
    margin-top:10px!important;
  }
  body.stage-mode .stageNav{
    bottom:92px!important;
  }
  body.stage-mode .stageNav2{
    bottom:14px!important;
  }
}

/* v0.9.8 - SYNC grande en el centro de pantalla completa */
.stageSyncCenter{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:26px;
  width:100%;
}
body.stage-mode .stageSyncCenter{
  width:100%;
  display:flex!important;
  justify-content:center;
  align-items:center;
  margin:clamp(22px,5vh,55px) 0 clamp(16px,3vh,30px)!important;
  z-index:119;
}
body.stage-mode .stageSyncCenter .bigsync{
  width:min(82vw,720px)!important;
  min-height:clamp(78px,11vh,130px)!important;
  border-radius:clamp(18px,3vw,32px)!important;
  border:2px solid #2595ff!important;
  background:rgba(10,25,45,.42)!important;
  color:#2f95ff!important;
  box-shadow:0 0 18px rgba(37,149,255,.5), inset 0 0 20px rgba(37,149,255,.08)!important;
  font-size:clamp(34px,7vw,76px)!important;
  font-weight:950!important;
  letter-spacing:.04em!important;
  padding:18px 26px!important;
  margin:0!important;
}
body.stage-mode .stageNav2{
  bottom:18px!important;
}
body.stage-mode .stageNav2 .bigbtn{
  min-width:min(74vw,520px)!important;
}
@media(max-width:650px){
  body.stage-mode .stage{
    padding-bottom:235px!important;
    gap:4px!important;
  }
  body.stage-mode .stageSyncCenter{
    margin:22px 0 14px!important;
  }
  body.stage-mode .stageSyncCenter .bigsync{
    width:88vw!important;
    min-height:108px!important;
    font-size:42px!important;
  }
  body.stage-mode .stageNav{
    bottom:106px!important;
  }
  body.stage-mode .stageNav2{
    bottom:14px!important;
  }
  body.stage-mode .stageNav2 .bigbtn{
    min-width:74vw!important;
  }
}
@media(max-height:760px){
  body.stage-mode .stage{
    padding-bottom:220px!important;
  }
  body.stage-mode .stageSyncCenter .bigsync{
    min-height:88px!important;
    font-size:34px!important;
  }
  body.stage-mode .stageSyncCenter{
    margin:12px 0 10px!important;
  }
  body.stage-mode .stageNav{
    bottom:90px!important;
  }
  body.stage-mode .stageNav2{
    bottom:10px!important;
  }
}


/* v1.0 - Botones + / - BPM en pantalla completa */
.stageBpmRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.bpmAdjust{
  width:46px;
  height:46px;
  border-radius:50%;
  border:2px solid #cc2b35;
  background:transparent;
  color:#ff2f3d;
  font-size:34px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-shadow:0 0 10px rgba(255,47,61,.18);
}
.bpmAdjust:active{
  transform:scale(.94);
  background:rgba(255,47,61,.18);
}
body.stage-mode .stageBpmRow{
  width:100%;
  max-width:92vw;
  gap:clamp(16px,7vw,70px);
  margin:18px auto 0;
}
body.stage-mode .bpmAdjust{
  width:clamp(42px,12vw,78px);
  height:clamp(42px,12vw,78px);
  font-size:clamp(30px,9vw,58px);
  flex:0 0 auto;
}
body.stage-mode #bpmBig{
  margin:0!important;
}
@media(max-width:650px){
  body.stage-mode .stageBpmRow{
    gap:34px;
    margin-top:14px;
  }
  body.stage-mode .bpmAdjust{
    width:48px;
    height:48px;
    font-size:34px;
  }
}