:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#182235;background:#f4f6fa;font-size:16px}*{box-sizing:border-box}body{margin:0;min-height:100vh}header{background:#101827;color:white;padding:24px max(20px,calc((100vw - 900px)/2));display:flex;align-items:center;justify-content:space-between;gap:12px}header h1{margin:0;font-size:1.55rem}header p{margin:4px 0 0;color:#aeb9cb;font-size:.9rem}button,input,textarea,select{font:inherit}button{border:0;cursor:pointer;border-radius:10px;padding:11px 15px}.primary{background:#7165e8;color:white;font-weight:650}.primary:hover{background:#5d52d4}.secondary{background:#e9edf5;color:#253149}.icon{background:transparent;color:inherit;font-size:1.4rem;padding:7px 10px}.toolbar{max-width:900px;margin:24px auto 16px;padding:0 20px;display:flex;gap:10px}.toolbar input{flex:1}.toolbar input,.toolbar select,input,textarea{border:1px solid #d6dce7;background:white;border-radius:10px;padding:12px;color:#182235}.song-list{max-width:900px;margin:auto;padding:0 20px 40px;display:grid;gap:10px}.song-card{background:white;border:1px solid #e3e7ef;border-radius:14px;padding:17px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 7px #15213a08}.song-main{flex:1;min-width:0;cursor:pointer}.song-main h3{margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-main p{margin:0;color:#69758a;font-size:.9rem}.song-actions{display:flex;gap:2px;color:#5a6680}.empty{text-align:center;margin:9vh auto;padding:20px;max-width:430px;display:none}.empty.show{display:block}.empty p{color:#66738a;line-height:1.5}.music{font-size:2.7rem;color:#7165e8}.overlay{position:fixed;inset:0;background:#10182788;display:grid;place-items:center;padding:16px;z-index:5}.hidden{display:none!important}.panel{width:min(600px,100%);max-height:94vh;overflow:auto;background:#f9faff;border-radius:18px;padding:22px;box-shadow:0 20px 80px #10182744}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.panel-head h2{margin:0}.panel label{display:block;font-weight:650;margin:14px 0}.panel input,.panel textarea{display:block;width:100%;margin-top:6px;resize:vertical}.muted{font-weight:400;color:#778197;font-size:.85rem}.actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.reader{position:fixed;inset:0;background:#090d16;color:#f6f7fb;display:flex;flex-direction:column;z-index:4}.reader-top{height:64px;flex:none;display:flex;align-items:center;padding:6px 14px;gap:8px;border-bottom:1px solid #273044}.reader-title{flex:1;display:flex;flex-direction:column;overflow:hidden}.reader-title strong,.reader-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reader-title span{font-size:.82rem;color:#9ca8bd;margin-top:2px}.lyrics-view{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8vh max(8vw,24px) 35vh;text-align:center;font-size:clamp(1.65rem,5.8vw,3rem);line-height:1.55;white-space:pre-wrap;scroll-behavior:auto}.reader-controls{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 14px max(14px,env(safe-area-inset-bottom));background:#111827;border-top:1px solid #273044}.reader-controls button{padding:10px 12px}.speed{font-size:.8rem;color:#bac3d3;display:flex;align-items:center;gap:5px}.speed input{width:min(20vw,110px);accent-color:#9a91ff}.reader.mirror .lyrics-view{transform:scaleY(-1)}@media(max-width:560px){header{padding:18px 16px}.toolbar{margin:16px auto 12px;flex-direction:column}.song-list{padding:0 14px 30px}.song-card{padding:14px}.reader-controls{gap:5px}.reader-controls button{font-size:.88rem;padding:10px 8px}.speed{gap:2px}.speed input{width:65px}}
.voice-status{font-size:.78rem;text-align:center;color:#aeb9cb;background:#111827;padding:0 12px 10px}.voice-status.active{color:#b9f2d0}.voice-status.error{color:#ffb4ac}.reader-controls button.listening{background:#b93147;color:white}
.heard-word{flex:none;margin:0 12px 10px;padding:10px 14px;min-height:64px;border-radius:10px;background:#ffe46b;color:#302600;display:flex;flex-direction:column;justify-content:center;text-align:center;overflow-wrap:anywhere}.heard-label{font-size:.65rem;font-weight:800;letter-spacing:.11em;opacity:.7;margin-bottom:3px}#voiceWords{font-size:1.1rem;font-weight:650;line-height:1.25}
.heard-heading{display:flex;align-items:center;justify-content:space-between}.heard-heading #resetGuide{border:0;background:#fff3b0;color:#574600;border-radius:6px;padding:4px 8px;font-size:.72rem;font-weight:650;cursor:pointer}#voiceWords{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-height:58px;overflow:auto;font-size:.9rem}.sung-chip{background:#fff7cd;border:1px solid #ead16a;border-radius:6px;padding:3px 7px;font-weight:650;line-height:1.2}
.lyric-word.sung-word{color:#92e3a7}.lyric-word.current-word{color:#17120a;background:#ffe36a;border-radius:.22em;padding:.02em .12em;box-shadow:0 0 0 .04em #ffe36a}.lyric-notes{margin-top:2.5em;color:#99a4b8;font-size:.58em;line-height:1.45}.reader-controls button.listening{background:#b93147;color:white}
.tandas-view{max-width:900px;margin:0 auto;padding:0 20px 42px}.new-tanda{display:flex;gap:10px;margin:0 0 16px}.new-tanda input,.tanda-add select{min-width:0;flex:1}.tanda-card{background:#fff;border:1px solid #e0e5ee;border-radius:16px;padding:17px;margin:0 0 14px;box-shadow:0 2px 7px #15213a08}.tanda-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ebeff5;padding-bottom:12px}.tanda-head h2{font-size:1.08rem;margin:0 0 3px}.tanda-head span,.tanda-song small{color:#718096;font-size:.82rem}.tanda-songs{list-style:none;padding:0;margin:4px 0 12px}.tanda-song{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #eef1f6}.tanda-number{font-size:.82rem;color:#7b8799;min-width:20px;text-align:center}.tanda-song-title{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1;min-width:0;background:transparent;padding:5px;color:#182235;text-align:left}.tanda-song-title strong,.tanda-song-title small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tanda-actions{display:flex;gap:0}.tanda-actions .icon{padding:6px 8px;font-size:1.12rem}.tanda-actions button:disabled{opacity:.3;cursor:default}.tanda-empty{padding:16px;text-align:center;color:#718096}.tanda-add{display:flex;gap:8px}.tanda-add select{border:1px solid #d6dce7;background:white;border-radius:10px;padding:10px;min-width:0}.tandas-view .empty{display:block;margin:12px auto;padding:18px}.tandas-view.hidden{display:none}
@media(max-width:560px){.tandas-view{padding:0 14px 30px}.new-tanda{flex-direction:column}.tanda-card{padding:14px}.tanda-add{flex-direction:column}.tanda-actions .icon{padding:6px}}
.tanda-toggle{display:flex;align-items:center;gap:10px;flex:1;min-width:0;background:transparent;text-align:left;padding:5px 2px;color:#182235}.tanda-toggle>span:last-child{display:flex;flex-direction:column;gap:2px}.tanda-toggle strong{font-size:1.08rem}.tanda-toggle small{font-size:.82rem;color:#718096}.tanda-chevron{font-size:1.15rem;color:#7165e8;width:20px;text-align:center}.tanda-body.hidden{display:none!important}.tanda-song{display:block;padding:9px 0}.tanda-song-head{display:flex;align-items:center;gap:10px}.tanda-lyrics{margin:8px 0 3px 30px;padding:12px 14px;border-left:3px solid #7165e8;border-radius:0 8px 8px 0;background:#f5f6fb;color:#2c374b;font:inherit;font-size:.92rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.sing-tanda{white-space:nowrap;padding:8px 10px;font-size:.82rem}.setlist-song-title{font-size:1em;color:#a99fff;text-align:left;margin:1.1em 0 .8em}.setlist-spacer{height:1.5em;border-top:1px solid #2b3548;margin:2em 0}
@media(max-width:560px){.sing-tanda{padding:7px 8px;font-size:.75rem}.tanda-head{gap:4px}}
.tanda-head-actions{display:flex;align-items:center;gap:2px}.tanda-head-actions .icon{padding:6px 7px;font-size:1.05rem}.tanda-head-actions button:disabled{opacity:.3;cursor:default}.tanda-head-actions .sing-tanda{margin-left:4px}
@media(max-width:560px){.tanda-head-actions{gap:0}.tanda-head-actions .icon{padding:5px}.tanda-head-actions .sing-tanda{margin-left:2px;padding:7px 8px}}
@media(max-width:560px){.tanda-head{align-items:flex-start;flex-wrap:wrap}.tanda-toggle{flex-basis:100%}.tanda-head-actions{width:100%;justify-content:flex-end}}
.rename-set-form{display:flex;align-items:center;gap:6px;flex:1;min-width:180px}.rename-set-form input{min-width:80px;max-width:250px;flex:1;padding:8px 10px}.rename-set-form button{padding:8px 10px;font-size:.82rem}
@media(max-width:560px){.rename-set-form{flex-wrap:wrap}.rename-set-form input{flex-basis:100%;max-width:none}}
.tanda-add{display:block}.tanda-add input{display:block;width:100%;min-width:0}.song-search-results{margin-top:5px;border-radius:10px;overflow:hidden;background:white;box-shadow:0 4px 14px #15213a12}.song-choice{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:10px 12px;border-radius:0;border-bottom:1px solid #e9edf4;background:white;color:#182235;text-align:left}.song-choice:last-child{border-bottom:0}.song-choice:hover,.song-choice:focus{background:#f1f0ff}.song-choice small{color:#718096;margin-top:2px}.song-no-results{padding:10px 12px;color:#718096;font-size:.9rem}
.set-group-control{display:flex;justify-content:flex-end;align-items:center;margin:0 0 10px;color:#617087;font-size:.86rem}.set-group-control label{display:flex;align-items:center;gap:8px}.set-group-control select{border:1px solid #d6dce7;background:white;border-radius:8px;padding:7px 10px;color:#182235}.set-group-label{list-style:none;margin:10px 0 2px;padding:7px 10px;border-radius:8px;background:#f0efff;color:#5d52d4;font-size:.8rem;font-weight:750;letter-spacing:.04em;display:flex;align-items:center;justify-content:space-between;gap:10px}.setlist-group-title{font-size:.92em;color:#a99fff;text-align:left;margin:1.4em 0 .3em;padding-bottom:.3em;border-bottom:1px solid #384257}
.add-song-group{padding:7px 10px;font-size:.82rem}.add-song-group:disabled{opacity:.45;cursor:default}.set-group-control>span{font-weight:650}
.add-group-before{font-size:.92rem!important;color:#7165e8!important}.tanda-actions .add-group-before:disabled{opacity:.25}
.group-add-row{list-style:none;padding:8px 0 14px;border-bottom:1px solid #eef1f6}.group-add-row .tanda-add{margin:0}.tanda-song[draggable="true"] .tanda-song-title{cursor:grab;touch-action:pan-y;user-select:none}.tanda-song.dragging{opacity:.35}.tanda-song.drop-target{outline:2px dashed #7165e8;outline-offset:-2px;border-radius:10px}
.song-sort-buttons{max-width:900px;margin:0 auto 14px;padding:0 20px;display:flex;gap:8px}.song-sort-buttons button{flex:1;min-width:0;background:white;color:#39455c;border:1px solid #d6dce7;font-size:.9rem;font-weight:600}.song-sort-buttons button.active{background:#7165e8;color:white;border-color:#7165e8}.song-sort-buttons.hidden{display:none}
@media(max-width:560px){.song-sort-buttons{padding:0 14px;gap:5px}.song-sort-buttons button{padding:9px 5px;font-size:.77rem}}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.header-actions button{white-space:nowrap}@media(max-width:560px){header{flex-wrap:wrap}.header-actions{width:100%;gap:6px}.header-actions button{flex:1;padding:9px 7px;font-size:.8rem}}

/* Ajustes para teléfonos */
@media(max-width:700px){
  header{padding:16px;align-items:flex-start}
  .toolbar,.song-sort-buttons,.song-list,.tandas-view{max-width:100%}
  .song-card{min-width:0}
  .reader{height:100vh;height:100dvh}
  .lyrics-view{min-height:0;padding:9vh 7vw 24vh;font-size:clamp(1.55rem,7vw,2.45rem);line-height:1.52}
}
@media(max-width:560px){
  body{overflow-x:hidden}
  header{gap:12px;padding:14px 12px}
  header h1{font-size:1.25rem}
  header p{font-size:.78rem}
  .header-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px}
  .header-actions button{min-width:0;min-height:42px;padding:7px 4px;font-size:.75rem;line-height:1.15;white-space:normal}
  .toolbar{padding:0 12px;margin:14px auto 10px;gap:8px}
  .toolbar input,.toolbar select{width:100%;min-height:46px;padding:10px 12px}
  .song-sort-buttons{padding:0 12px;margin-bottom:10px;gap:5px}
  .song-sort-buttons button{min-height:42px;padding:7px 3px;font-size:.72rem;line-height:1.1}
  .song-list{padding:0 12px 28px;gap:8px}
  .song-card{padding:12px;border-radius:12px;gap:7px}
  .song-card h3{font-size:1rem}
  .song-card .icon{padding:6px;font-size:1.15rem}
  .tandas-view{padding:0 12px 28px}
  .new-tanda{gap:7px;margin-bottom:12px}
  .new-tanda input,.new-tanda button{min-height:46px}
  .tanda-card{padding:11px;border-radius:13px;margin-bottom:10px}
  .tanda-head{align-items:center;padding-bottom:9px}
  .tanda-head-actions{width:100%;justify-content:flex-end;flex-wrap:wrap;gap:2px}
  .tanda-head-actions .icon{min-width:34px;min-height:38px;padding:5px;font-size:1rem}
  .tanda-head-actions .secondary{min-height:38px;padding:7px 10px;font-size:.78rem}
  .tanda-toggle{padding:4px 0}
  .tanda-toggle strong{font-size:1rem}
  .set-group-control{margin-bottom:6px}
  .add-song-group{min-height:38px}
  .set-group-label{margin-top:8px;padding:6px 8px;font-size:.78rem}
  .sing-group{min-height:34px;padding:6px 9px;font-size:.75rem}
  .tanda-song-head{gap:4px}
  .tanda-number{min-width:17px;font-size:.72rem}
  .tanda-song-title{padding:6px 2px}
  .tanda-song-title strong{font-size:.92rem}
  .tanda-song-title small{font-size:.76rem}
  .tanda-actions .icon{min-width:28px;min-height:36px;padding:5px 4px;font-size:1rem}
  .group-add-row{padding:6px 0 10px}
  .group-add-row input{min-height:44px;padding:10px;font-size:.88rem}
  .reader-top{height:auto;min-height:56px;padding:5px 8px;gap:4px}
  .reader-top .icon{padding:6px 8px}
  .reader-title strong{font-size:.92rem}
  .reader-title span{font-size:.72rem}
  .lyrics-view{padding:8vh 6vw 20vh;font-size:clamp(1.45rem,7vw,2.25rem);line-height:1.5}
  .reader-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;padding:7px 8px max(7px,env(safe-area-inset-bottom))}
  .reader-controls button{min-height:40px;white-space:nowrap;font-size:.78rem;padding:8px 6px}
  #voiceToggle,#scrollToggle{flex:1 1 30%}
  #sizeDown,#sizeUp{flex:0 0 40px}
  .speed{order:5;flex:1 0 100%;justify-content:center;font-size:.76rem;padding:0 4px}
  .speed input{width:min(58vw,210px);min-height:28px;padding:0}
  .voice-status{font-size:.7rem;padding:0 8px max(7px,env(safe-area-inset-bottom));line-height:1.25}
  .heard-word{margin:0 8px 6px;padding:7px 9px;min-height:52px}
  #voiceWords{max-height:44px;font-size:.8rem}
  .overlay{align-items:flex-start;overflow-y:auto;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
  .panel{width:100%;max-height:calc(100dvh - 20px);padding:16px;border-radius:15px}
  .panel label{margin:11px 0;font-size:.92rem}
  .panel input,.panel textarea{padding:10px}
  .panel textarea{font-size:16px}
  .actions button{min-height:42px}
}
@media(max-width:380px){
  .header-actions button{font-size:.69rem;padding:6px 2px}
  .song-sort-buttons button{font-size:.67rem}
  .tanda-card{padding:9px}
  .tanda-actions .icon{min-width:25px;padding:4px 3px}
  .lyrics-view{padding-left:5vw;padding-right:5vw}
}