/* BETA 2 · draft competitivo, manteniendo la identidad visual del lobby. */
#app #betaTab .beta-draft-mode-settings{
 display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin:12px 0;
 padding:16px;border:1px solid #487787;border-left:3px solid #e0aa82;
 background:linear-gradient(112deg,#123441,#102735);min-width:0
}
#app #betaTab .beta-draft-mode-settings>div{flex:1 1 230px;display:grid;gap:6px}
#app #betaTab .beta-draft-mode-settings strong{font-size:11px;letter-spacing:.08em;color:#f4c0a1}
#app #betaTab .beta-draft-mode-settings small{color:#a8c8ca;font-size:11px}
#app #betaTab .beta-draft-mode-settings label{display:flex;align-items:center;gap:8px;color:#b8dbdb;font-size:10px;font-weight:900}
#app #betaTab .beta-draft-mode-settings input[type=number]{
 background:#0a2430;color:#f6ffff;border:1px solid #59818a;
 padding:8px;width:65px;font-weight:900
}
#app #betaTab .beta-draft-mode-settings select,#app #betaTab .beta-draft-captains select{
 min-width:0;max-width:100%;padding:9px;background:#082634;border:1px solid #497486;
 color:#effdfa;font:800 11px var(--rift-text,Manrope,sans-serif)
}
#app #betaTab .beta-live-draft{margin-top:15px;min-width:0}
#app #betaTab .beta-draft-shell{border:1px solid #476d78;background:#0d2937;padding:clamp(13px,2vw,23px);min-width:0}
#app #betaTab .beta-draft-title{
 display:flex;justify-content:space-between;align-items:center;gap:15px;
 border-bottom:1px solid #466b75;padding:0 2px 18px;margin-bottom:15px
}
#app #betaTab .beta-draft-title>div{min-width:0}
#app #betaTab .beta-draft-title span{color:#9bddd0;font-size:10px;font-weight:900;letter-spacing:.1em}
#app #betaTab .beta-draft-title h2{font:650 clamp(36px,5vw,62px)/1 var(--rift-display,Teko,sans-serif);color:#fff;margin:8px 0 5px}
#app #betaTab .beta-draft-title small{display:block;font-size:10px;color:#b1cdd1}
#app #betaTab .beta-draft-title>span{color:#f1b591;border:1px solid #6a706b;padding:10px;white-space:nowrap}
#app #betaTab .beta-draft-bans{display:inline-flex;flex-direction:column;gap:11px;vertical-align:top;width:calc(50% - 6px);box-sizing:border-box;background:#123545;border-top:3px solid #65add3;padding:13px;margin:0 8px 13px 0;min-width:0}
#app #betaTab .beta-draft-bans.is-red{border-top-color:#ee8c80;margin-right:0}
#app #betaTab .beta-draft-bans>strong{color:#e9f7f8;font-size:11px;font-weight:900}
#app #betaTab .beta-draft-bans>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#app #betaTab .beta-draft-ban{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
#app #betaTab .beta-draft-ban img,#app #betaTab .beta-draft-ban>span{width:100%;max-width:56px;aspect-ratio:1;object-fit:cover;border:1px solid #58727f}
#app #betaTab .beta-draft-ban>span{display:grid;place-items:center;font-size:20px;color:#7197a3}
#app #betaTab .beta-draft-ban small{color:#a9c9ce;font-size:8px;overflow-wrap:anywhere}
#app #betaTab .beta-draft-turn{
 display:flex;justify-content:space-between;align-items:center;gap:15px;padding:22px;
 border:1px solid #6a9abb;background:linear-gradient(95deg,#143a54,#102c3c);margin:2px 0 14px
}
#app #betaTab .beta-draft-turn.is-red{border-color:#b57c72;background:linear-gradient(95deg,#422b38,#14303d)}
#app #betaTab .beta-draft-turn.complete{border-color:#68b5a4;background:#163a42}
#app #betaTab .beta-draft-turn span{font-size:10px;color:#94d8d1;font-weight:900;letter-spacing:.08em}
#app #betaTab .beta-draft-turn h3{font:650 clamp(25px,3vw,40px)/1.1 var(--rift-display,Teko,sans-serif);color:#fff;margin:8px 0}
#app #betaTab .beta-draft-turn small{font-size:10px;color:#d6e7e7;font-weight:800}
#app #betaTab .beta-draft-clock{text-align:center;padding:10px 20px;background:#0b2633;border:1px solid #537b86}
#app #betaTab .beta-draft-clock strong{display:block;font:700 38px/1 var(--rift-display,Teko,sans-serif);color:#ffcf9f;letter-spacing:.06em}
#app #betaTab .beta-draft-clock small{display:block;margin-top:4px;color:#a8c9cc}
#app #betaTab .beta-draft-rosters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
#app #betaTab .beta-draft-team{min-width:0;border:1px solid #426975;border-top:4px solid #62b4df;padding:11px;background:#092330}
#app #betaTab .beta-draft-team.is-red{border-top-color:#eb8f82}
#app #betaTab .beta-draft-team header{display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px;justify-content:space-between;padding:4px 4px 12px}
#app #betaTab .beta-draft-team header strong{color:#fff;font-size:12px}
#app #betaTab .beta-draft-team header small{color:#a3bfc7;font-size:9px}
#app #betaTab .beta-draft-slot{
 display:flex;align-items:center;gap:10px;min-height:65px;background:#133745;
 border:1px solid #305360;padding:8px;margin:5px 0;min-width:0
}
#app #betaTab .beta-draft-slot.is-current{outline:1px solid #f4bb87}
#app #betaTab .beta-draft-slot.is-mine{background:#234550}
#app #betaTab .beta-draft-slot img,#app #betaTab .beta-slot-placeholder{width:43px;height:43px;object-fit:cover;flex:none;border:1px solid #446977}
#app #betaTab .beta-slot-placeholder{display:grid;place-items:center;color:#84b5bb;font-size:16px}
#app #betaTab .beta-draft-slot>div{flex:1;min-width:0}
#app #betaTab .beta-draft-slot small{font-size:9px;color:#89c8c4;display:block;font-weight:900}
#app #betaTab .beta-draft-slot strong{font-size:12px;color:#fff;display:block;margin:3px 0;overflow-wrap:anywhere}
#app #betaTab .beta-draft-slot span{font-size:10px;color:#f4bc97;display:block}
#app #betaTab .beta-draft-slot>b{font-size:8px;color:#ffcc9c;flex:none}
#app #betaTab .beta-draft-host-controls,#app #betaTab .beta-draft-picker,
#app #betaTab .beta-draft-swaps,#app #betaTab .beta-draft-history{
 background:#143441;border:1px solid #3d6270;padding:16px;margin-top:13px;min-width:0
}
#app #betaTab .beta-draft-host-controls>strong,#app #betaTab .beta-draft-picker-header>strong,
#app #betaTab .beta-draft-swaps>strong,#app #betaTab .beta-draft-history>strong{
 font-size:11px;color:#b1ebdf;letter-spacing:.08em;font-weight:900
}
#app #betaTab .beta-draft-host-controls>div:nth-child(2){display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
#app #betaTab .beta-draft-captains{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin-top:13px}
#app #betaTab .beta-draft-captains label{display:grid;gap:7px;color:#adcad1;font-size:9px;font-weight:900;min-width:130px}
#app #betaTab .beta-draft-picker-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
#app #betaTab .beta-draft-picker-header small{color:#b4cbd1;font-size:10px}
#app #betaTab .beta-draft-filters{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}
#app #betaTab .beta-draft-filters input,#app #betaTab .beta-draft-filters select,
#app #betaTab .beta-draft-swap-controls select{
 background:#0a2532;border:1px solid #5d818d;padding:10px;color:#eafdf6;font-size:12px;min-width:0;box-sizing:border-box
}
#app #betaTab .beta-draft-filters input{flex:1 1 180px}
#app #betaTab .beta-draft-filters select{flex:0 1 130px}
#app #betaTab .beta-draft-champion-grid{
 display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));
 max-height:322px;overflow-y:auto;gap:7px;margin-bottom:13px;
}
#app #betaTab button.beta-draft-champion{
 padding:5px!important;min-width:0;display:flex;flex-direction:column;align-items:center;
 gap:6px;background:#102b38;border:1px solid #3a6370;font-size:10px;text-align:center
}
#app #betaTab button.beta-draft-champion img{height:56px;width:56px;object-fit:cover}
#app #betaTab button.beta-draft-champion span{overflow-wrap:anywhere}
#app #betaTab button.beta-draft-champion.selected{border-color:#f4be92;background:#245262;box-shadow:inset 0 0 0 1px #ffd4ae}
#app #betaTab .beta-draft-empty{color:#a7c4cd;font-size:11px}
#app #betaTab .beta-draft-swaps p{color:#b5cdd0;font-size:11px;line-height:1.65}
#app #betaTab .beta-draft-swap-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
#app #betaTab .beta-draft-swap-controls select{flex:1 1 165px}
#app #betaTab .beta-draft-offer{margin-top:14px;padding:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid #bea577;color:#ffe5c0;font-size:11px}
#app #betaTab .beta-draft-history>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:12px}
#app #betaTab .beta-draft-history>div>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:7px;padding:9px;background:#0a2a39;border:1px solid #325866;font-size:10px}
#app #betaTab .beta-draft-history span{color:#a2c9d1}
#app #betaTab .beta-draft-history b{color:#f7ddbd}
@media(max-width:850px){
 #app #betaTab .beta-draft-rosters{grid-template-columns:1fr}
 #app #betaTab .beta-draft-team{padding:9px}
 #app #betaTab .beta-draft-history>div{grid-template-columns:1fr}
 #app #betaTab .beta-draft-bans{padding:8px}
 #app #betaTab .beta-draft-bans>div{gap:3px}
 #app #betaTab .beta-draft-ban small{font-size:7px}
}
@media(max-width:500px){
 #app #betaTab .beta-draft-title{align-items:start;flex-direction:column}
 #app #betaTab .beta-draft-turn{padding:13px}
 #app #betaTab .beta-draft-clock{padding:9px}
 #app #betaTab .beta-draft-clock strong{font-size:29px}
 #app #betaTab .beta-draft-bans{width:calc(50% - 4px);margin-right:4px;padding:5px}
 #app #betaTab .beta-draft-bans>strong{font-size:8px}
 #app #betaTab .beta-draft-ban img,#app #betaTab .beta-draft-ban>span{max-width:38px}
 #app #betaTab .beta-draft-slot>b{display:none}
 #app #betaTab .beta-draft-mode-settings{align-items:stretch}
 #app #betaTab .beta-draft-mode-settings select{width:100%}
 #app #betaTab .beta-draft-champion-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
 #app #betaTab button.beta-draft-champion img{width:45px;height:45px}
}

#app #betaTab .beta-draft-audit{margin-top:14px;border-top:1px solid #426371;padding-top:12px}
#app #betaTab .beta-draft-audit summary{color:#9eddd2;font:900 10px var(--rift-text,Manrope,sans-serif);cursor:pointer;letter-spacing:.05em}
#app #betaTab .beta-draft-audit p{padding:7px 10px;margin:6px 0;background:#0b2532;color:#b3d1d4;font-size:11px}
#app #betaTab .beta-draft-audit p b{color:#f4c3a0}

/* Corrección de UX: selección inmediata y desplazamiento estable en BETA Draft. */
#app #betaTab .beta-draft-turn{
 position:sticky;top:0;z-index:8;
 padding:10px 16px;margin:0 0 10px;
 box-shadow:0 8px 20px rgba(0,0,0,.28)
}
#app #betaTab .beta-draft-turn h3{font-size:clamp(22px,3vw,32px);margin:4px 0}
#app #betaTab .beta-draft-clock{padding:7px 12px}
#app #betaTab .beta-draft-picker{
 margin:0 0 12px;padding:12px;
 border-color:#88a6a5
}
#app #betaTab .beta-draft-filters{margin:9px 0}
#app #betaTab .beta-draft-champion-grid{
 max-height:205px;overscroll-behavior:contain;
 grid-template-columns:repeat(auto-fill,minmax(82px,1fr));
}
#app #betaTab button.beta-draft-champion{padding:4px!important}
#app #betaTab button.beta-draft-champion img{width:43px;height:43px}
#app #betaTab .beta-draft-picker>.beta-primary{
 display:block;width:100%;position:relative;z-index:1;margin-top:7px
}
#app #betaTab .beta-draft-picker-header{gap:5px}
#app #betaTab .beta-draft-picker-header small{font-size:9px}
#app #betaTab .beta-draft-bans{
 margin-bottom:9px;padding:8px
}
#app #betaTab .beta-draft-host-controls{margin:2px 0 12px;padding:11px}
@media(max-width:550px){
 #app #betaTab .beta-draft-turn{padding:9px;top:0}
 #app #betaTab .beta-draft-turn h3{font-size:23px}
 #app #betaTab .beta-draft-picker{padding:9px}
 #app #betaTab .beta-draft-champion-grid{
  max-height:170px;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:5px
 }
 #app #betaTab button.beta-draft-champion img{width:39px;height:39px}
}

#app #betaTab .beta-draft-locked{margin:9px 0;background:#172f3c;border:1px solid #7b7066;padding:8px}
#app #betaTab .beta-draft-locked>strong{display:block;color:#f4c5a3;font-size:10px;margin:1px 0 8px}
#app #betaTab .beta-draft-locked>div{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:5px}
#app #betaTab .beta-draft-locked>div>span{display:grid;justify-items:center;gap:4px;min-width:60px;max-width:90px}
#app #betaTab .beta-draft-locked img{width:40px;height:40px;object-fit:cover;filter:grayscale(1);opacity:.64}
#app #betaTab .beta-draft-locked small{font-size:8px;color:#dda691;text-align:center;overflow-wrap:anywhere}