/* V1 pública · experiencia móvil. Reorganiza controles existentes sin duplicar lógica. */
.mobile-only,.mobile-overlay,.mobile-components-drawer,.mobile-bottom-sheet{display:none}

@media(max-width:768px),(orientation:landscape) and (max-height:520px) and (max-width:1000px){
 :root{--mobile-header:84px;--mobile-blue:#102a40;--mobile-accent:#087fce}
 html,body{width:100%;max-width:100%;overflow-x:hidden}
 body{min-width:320px;overflow-y:auto;background:#d9e6ef}
 body.mobile-layout{padding:0}
 .mobile-only{display:block}
 header{position:sticky;top:0;z-index:30;display:grid;height:var(--mobile-header);min-height:0;padding:6px 8px;grid-template-columns:38px auto minmax(0,1fr) 38px;grid-template-rows:34px 34px;gap:4px 8px;align-items:center}
 header .brand{grid-column:2;grid-row:1;border-right:1px solid #7690a3;padding:0 9px 0 0;font-size:14px;line-height:1}
 header .brand small{font-size:6px;letter-spacing:.7px;margin-top:3px}
 header .header-title{grid-column:3;grid-row:1;min-width:0}
 header h1{font-size:15px;letter-spacing:.2px;white-space:nowrap}
 header nav{display:none!important}
 .desktop-title{display:none}.mobile-title{display:inline}
 .equipment-chooser{grid-column:2/4;grid-row:2;width:100%;min-width:0;margin:0}
 .equipment-chooser select{height:32px;padding:5px 10px;font-size:12px;border-radius:9px}
 .header-help{grid-column:4;grid-row:1;width:36px;height:34px;padding:0;border:1px solid #78a0b6;border-radius:9px;background:#234e65;color:#fff;font-size:0}
 .header-help::before{content:'?';font-size:18px;font-weight:800}
 .mobile-header-button{grid-column:1;grid-row:1;width:36px;height:34px;padding:0;border:1px solid #78a0b6;border-radius:9px;background:#234e65;color:#fff;font-size:20px;line-height:1}

 main,body.info-collapsed main{display:flex;height:auto;min-height:calc(100dvh - var(--mobile-header));padding:5px;gap:7px;flex-direction:column;align-items:stretch}
 .stage{order:1;width:100%;height:calc(100dvh - var(--mobile-header) - 10px);min-height:560px;border-radius:10px}
 .scene-title{left:13px;top:13px;max-width:calc(100% - 96px);font-size:18px}.scene-title small{max-width:220px;font-size:10px}
 .mobile-stage-button{position:absolute;z-index:8;right:10px;width:40px;height:40px;padding:0;border:1px solid #8aa9bc;border-radius:8px;background:#244b63e8;color:#fff;box-shadow:0 3px 10px #102a4055;font-size:19px;font-weight:800}
 .mobile-stage-button.components{top:10px}.mobile-stage-button.info{top:56px}
 .left{order:2;display:block;max-height:none;padding:8px;border-radius:10px;overflow:visible}
 .left>h3,.left>.part-filter,.left>#parts{display:none!important}
 .practice-launch{min-height:43px;margin:0 0 7px!important;padding:8px!important;text-align:center!important;font-size:12px!important;font-weight:700}
 .mobile-accordions{display:grid;gap:6px}
 .mobile-accordion{border:1px solid #c1d3df;border-radius:8px;background:#f8fcfe;overflow:hidden}
 .mobile-accordion summary{min-height:43px;padding:12px 13px;cursor:pointer;list-style:none;color:#173a61;font-size:12px;font-weight:750}
 .mobile-accordion summary::-webkit-details-marker{display:none}.mobile-accordion summary::before{content:'▸';display:inline-block;width:19px;color:#087fce}.mobile-accordion[open] summary::before{content:'▾'}
 .mobile-accordion-content{padding:4px 8px 9px;border-top:1px solid #d5e1e9}
 .mobile-accordion .study-controls,.mobile-accordion .environment-controls{margin:0;padding:4px 0;border:0}
 .mobile-accordion .environment-controls>h3,.mobile-accordion .environment-controls>p{display:none}
 .mobile-accordion #views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .mobile-accordion #views button{min-height:40px;padding:7px 4px;text-align:center;font-size:10px}
 .mobile-accordion .environment-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .mobile-accordion .environment-controls>button,.mobile-accordion .environment-choices button{min-height:40px;padding:6px;font-size:10px;text-align:center}
 .mobile-accordion .study-controls{grid-template-columns:1fr 1fr;gap:7px}.mobile-accordion .study-controls small{grid-column:1/-1}.mobile-accordion .study-controls label:first-child{grid-column:1/-1}

 .modes{left:6px;right:6px;bottom:6px;transform:none;display:grid;width:auto;max-width:none;min-height:56px;height:56px;padding:4px;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;overflow:visible;border-radius:10px}
 .modes>*{order:initial!important}
 .modes button,.modes select{width:100%;min-width:0;min-height:48px;height:48px;padding:4px 2px!important;border-radius:7px!important;font-size:9px!important;white-space:normal;line-height:1.1;text-align:center}
 .modes #mobile-more{display:block;background:#405e75}
 .modes .dock-status{display:none}
 .environment-caption{left:10px;right:auto;bottom:69px;max-width:calc(100% - 20px);padding:4px 8px;font-size:9px}
 .selection-badge{left:10px;bottom:69px;max-width:calc(100% - 20px);font-size:10px}

 .right,body.info-collapsed .right{position:fixed;z-index:42;left:7px;right:7px;bottom:7px;display:block;width:auto;max-height:min(82dvh,720px);padding:48px 12px 13px;grid-column:auto;border-radius:15px;overflow:auto;transform:translateY(calc(100% + 18px));transition:transform .22s ease;pointer-events:none;box-shadow:0 18px 60px #0c243977}
 .right>:not(.info-panel-toggle),body.info-collapsed .right>:not(.info-panel-toggle){display:revert!important}
 body.mobile-info-open:not(.practicing) .right{transform:translateY(0);pointer-events:auto}
 .right>h3:first-of-type{margin:0 34px 8px 0;min-height:0}
 .right .info-panel-toggle,body.info-collapsed .info-panel-toggle{display:block;left:auto;right:10px;top:8px;width:34px;height:34px;transform:none;border:0;border-radius:50%;background:#edf5fa;color:#173a61;font-size:0}
 .right .info-panel-toggle::after{content:'×';font-size:24px;line-height:1}.right .info-panel-toggle span{display:none}
 .right h2,.right .info-title{font-size:20px}.right .box,.right .info-box{padding:9px;margin:6px 0;font-size:12px}

 .mobile-overlay{position:fixed;z-index:38;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#102a407d;opacity:0;pointer-events:none;transition:opacity .2s ease}
 .mobile-overlay.open{opacity:1;pointer-events:auto}
 .mobile-components-drawer{position:fixed;z-index:44;inset:0 auto 0 0;display:flex;width:min(89vw,390px);padding:0;flex-direction:column;background:#f7fbfe;border:0;border-radius:0 15px 15px 0;box-shadow:16px 0 45px #102a4066;transform:translateX(-105%);transition:transform .22s ease;overflow:hidden}
 body.mobile-components-open .mobile-components-drawer{transform:translateX(0)}
 .mobile-components-drawer>header,.mobile-bottom-sheet>header{position:relative;display:flex;height:auto;min-height:54px;padding:10px 12px;align-items:center;justify-content:space-between;background:#f7fbfe;color:#173a61;box-shadow:none;border-bottom:1px solid #c9d9e4}
 .mobile-components-drawer>header strong{font-size:15px}.mobile-components-drawer>header button,.mobile-bottom-sheet>header button{width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#eaf3f8;color:#173a61;font-size:24px}
 .mobile-components-body{flex:1;padding:10px 12px 20px;overflow:auto}
 .mobile-components-body .part-filter{display:block;width:100%;height:42px;margin:0 0 8px;padding:8px 10px;font-size:13px}
 .mobile-components-body #parts details{border-bottom:1px solid #d7e3eb}.mobile-components-body #parts summary{min-height:42px;padding:11px 3px;font-size:12px}
 .mobile-components-body #parts button{display:block;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:6px;background:transparent;color:#173a61;text-align:left;font-size:12px}
 .mobile-components-body #parts button:hover,.mobile-components-body #parts button.active{background:#1383cb;color:#fff}

 .mobile-bottom-sheet{position:fixed;z-index:44;left:7px;right:7px;bottom:7px;display:block;max-height:85dvh;border:1px solid #aec4d3;border-radius:16px;background:#f7fbfe;box-shadow:0 18px 60px #0c243977;transform:translateY(calc(100% + 18px));transition:transform .22s ease;overflow:hidden}
 body.mobile-tools-open .mobile-tools-sheet{transform:translateY(0)}
 .mobile-sheet-handle{width:42px;height:4px;margin:7px auto 0;border-radius:4px;background:#9ab1c1}
 .mobile-bottom-sheet>header{min-height:48px;padding:5px 12px 8px}.mobile-bottom-sheet h2{margin:0;font-size:18px}
 .mobile-tools-content{display:grid;max-height:calc(85dvh - 64px);padding:5px 10px 14px;gap:5px;overflow:auto}
 .mobile-tools-content button,.mobile-tools-content select{width:100%;min-height:45px;padding:8px 12px;border:1px solid #d2e0e9;border-radius:8px;background:#eaf3f8;color:#173a61;text-align:left;font-size:12px}
 .mobile-tools-content button.on{background:#e58114;color:#fff}.mobile-tools-content select{background:#fff}.mobile-tools-content .dock-status{padding:7px;color:#5b7485;font-size:10px;text-align:center}
 .mobile-tools-content #mechanic-card{padding:8px;border-radius:8px;background:#e8f3f8;font-size:11px}.mobile-tools-content #mechanic-card small{display:block}

 body.practicing .right,body.practicing.info-collapsed .right{position:relative;z-index:auto;left:auto;right:auto;bottom:auto;order:3;display:block;width:100%;max-height:none;padding:10px;transform:none;pointer-events:auto;box-shadow:0 4px 16px #47627a18}
 body.practicing .right>:not(.practice-panel){display:none!important}body.practicing .right>.practice-panel{display:block!important}
 body.practicing .right .info-panel-toggle{display:none}.practicing .stage{height:clamp(480px,66dvh,620px);min-height:480px}
 body.practicing .modes{grid-template-columns:repeat(4,minmax(0,1fr))}
 body.practicing .mobile-stage-button{display:none}
 .public-dialog{width:calc(100% - 14px);max-height:calc(100dvh - 14px)}.public-dialog-head{padding:12px}.public-dialog section{margin:8px 10px;padding:10px}
}

@media(max-width:380px){
 header h1{font-size:14px}.stage{min-height:520px}.scene-title{font-size:17px}.modes button{font-size:8px!important}
}

@media(orientation:landscape) and (max-height:520px) and (max-width:1000px){
 :root{--mobile-header:48px}
 body{overflow:hidden}
 header{position:relative;height:var(--mobile-header);padding:4px 7px;grid-template-columns:36px auto minmax(80px,1fr) minmax(135px,190px) 36px;grid-template-rows:40px;gap:6px}
 header .brand{grid-column:2;grid-row:1;font-size:12px}header .header-title{grid-column:3;grid-row:1}.equipment-chooser{grid-column:4;grid-row:1}.header-help{grid-column:5;grid-row:1}.mobile-header-button{grid-column:1;grid-row:1}
 main,body.info-collapsed main{height:calc(100dvh - var(--mobile-header));min-height:0;padding:4px}
 .stage{height:100%;min-height:0}.scene-title{font-size:15px}.scene-title small{font-size:9px}
 .left{position:fixed;z-index:44;left:5px;top:53px;bottom:5px;display:block;width:min(88vw,340px);padding:8px;overflow:auto;transform:translateX(calc(-100% - 12px));transition:transform .22s ease;box-shadow:14px 0 38px #102a4060}
 body.mobile-left-open .left{transform:translateX(0)}
 .modes{left:50%;right:auto;width:min(520px,calc(100% - 100px));transform:translateX(-50%)}
 .mobile-stage-button.components{top:8px}.mobile-stage-button.info{top:54px}
 body.practicing{overflow:auto}body.practicing main{height:auto;min-height:calc(100dvh - var(--mobile-header))}body.practicing .stage{height:calc(100dvh - var(--mobile-header) - 8px);min-height:330px}
}

@media(min-width:769px) and (min-height:521px){.mobile-title{display:none}.desktop-title{display:inline}}
