/* Mobile workspace: the model takes the main area; editing opens a dock. */
.mobile-only,.mobile-camera-help{display:none}
.project-file-actions{display:contents}
.expand-viewport{display:grid;place-items:center;width:32px;min-width:32px;min-height:31px;padding:5px;border-color:#a9bdc9;background:#f7fafc;color:#395b6e}
.expand-viewport svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body[data-viewport-expanded=true] .work-area{position:fixed;inset:0;z-index:60;background:#10212d;padding:0;min-width:0}
body[data-viewport-expanded=true] .viewport-card{border:0;border-radius:0;width:100%;height:100dvh;height:var(--tube-mobile-height,100dvh)}
body[data-viewport-expanded=true] .viewport-top{border-radius:0;padding-top:max(8px,env(safe-area-inset-top))}
body[data-viewport-expanded=true] .expand-viewport{border-color:#438899;background:#d6eef0;color:#15596b}
body[data-viewport-expanded=true] .simulation-panel{padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:760px){
  .mobile-only{display:flex}
  .studio-app{height:var(--tube-mobile-height,100dvh)}
  .tube-header{height:40px;min-height:40px;padding:5px max(10px,env(safe-area-inset-right)) 5px max(10px,env(safe-area-inset-left));gap:10px}
  .tube-brand img{width:25px;height:25px}.tube-brand>span{font-size:9px}
  .mobile-page-name{font-size:13px;font-weight:600;letter-spacing:-.2px;margin-right:auto;color:#e4edf2}
  .home-link{font-size:10px;min-height:30px;display:flex;align-items:center}
  main{gap:6px;padding:6px max(6px,env(safe-area-inset-right)) 0 max(6px,env(safe-area-inset-left));min-height:0}
  .workspace-heading,.project-metrics{display:none}
  .project-toolbar{order:0;min-height:48px;padding:6px 8px;gap:6px;border-radius:8px}
  .project-name{min-width:55px;max-width:none}.project-name>span{font-size:7px;letter-spacing:.8px;margin:0 0 2px}.project-name input{font-size:12px;min-height:23px}
  .project-actions{position:relative;gap:4px}.project-actions>button{min-width:38px;min-height:38px;padding:4px 6px;font-size:12px}
  .project-actions>button:nth-child(-n+2){width:36px;min-width:36px;min-height:38px;font-size:21px;padding:0}
  .project-actions>#save-project{min-width:57px;width:auto;max-width:none;min-height:38px;font-size:0;padding:5px 8px}
  .project-actions>#save-project:after{content:'Guardar';font-size:11px}
  #project-files-toggle{display:flex;align-items:center;justify-content:center;min-width:36px;width:36px;letter-spacing:1px;font-size:12px}
  .project-file-actions{display:none;position:absolute;right:0;top:calc(100% + 10px);z-index:35;min-width:185px;padding:8px;gap:6px;border:1px solid #acbeca;border-radius:9px;background:#f8fbfd;box-shadow:0 10px 28px #142f4540}
  body[data-project-files=true] .project-file-actions{display:flex;flex-direction:column}
  .project-file-actions button{width:100%;min-height:44px;text-align:left;font-size:13px;padding:9px 12px}
  .studio-error{order:1;padding:7px 9px;border-radius:7px}.studio-error button{min-height:36px;font-size:10px}
  body.studio-app .studio-grid{order:2;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:'viewport';gap:0;min-height:0;flex:1}
  body.studio-app .setup-panel,body.studio-app .inspector-panel{display:none}
  body.studio-app[data-mobile-panel=setup] .studio-grid,body.studio-app[data-mobile-panel=inspector] .studio-grid{grid-template-rows:minmax(0,1fr) clamp(180px,34dvh,300px);grid-template-areas:'viewport' 'controls';gap:6px}
  body.studio-app[data-mobile-panel=setup] #setup-panel,body.studio-app[data-mobile-panel=inspector] #inspector-panel{display:block;grid-area:controls;border-radius:10px 10px 5px 5px;border-color:#9eb5c4;box-shadow:0 -2px 10px #19374e14}
  .dock-heading{padding:3px 8px 3px 13px;min-height:40px;letter-spacing:.8px}.dock-tag{margin-left:auto}.close-dock{align-items:center;justify-content:center;width:36px;min-height:34px;padding:0;font-size:23px;border:0;background:transparent;color:#496677}
  .panel{padding:14px}.field label{font-size:12px}.field input,.field select{font-size:16px;min-height:44px}.shape-picker button{min-height:48px;font-size:11px;gap:7px}.profile-panel .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .operation-item{min-height:72px}.operation-item strong{font-size:12px}.operation-item small{font-size:10px}.cut-actions button{min-height:40px;font-size:11px}.property-group legend{font-size:11px}
  .workspace-ribbon{order:3;flex:none;position:relative;z-index:30;display:block;padding:0 3px max(3px,env(safe-area-inset-bottom));min-height:61px;border-radius:10px 10px 0 0;border-bottom:0;background:#f6f9fb;box-shadow:0 -2px 7px #19364c0c;isolation:isolate}
  .panel-navigation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;min-width:0;gap:3px;padding-top:3px;align-items:stretch}
  .panel-navigation button,.panel-navigation button.mobile-only{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;white-space:normal;min-height:54px;min-width:0;padding:4px 3px;border-radius:8px;font-size:10px;line-height:1.25;border:1px solid transparent;color:#6c808d}
  .panel-navigation button>span{font-size:22px;line-height:23px;width:auto;height:23px;color:#65869a}
  .panel-navigation button[aria-pressed=true]{background:#dfedf1;border-color:#a5c4d1;color:#2c657a;font-weight:600}.panel-navigation button[aria-pressed=true]>span{color:#2c657a}
  #mobile-add-toggle{color:#965c2d}#mobile-add-toggle>span{color:#bd773d;font-size:26px}#mobile-add-toggle[aria-expanded=true]{background:#fff0df;border-color:#d0a778}
  .workspace-ribbon .ribbon-create,.workspace-ribbon>.order-open{display:none}
  body[data-mobile-tools=true] .workspace-ribbon .ribbon-create{display:flex;position:absolute;bottom:calc(100% + 7px);left:0;right:67px;border:1px solid #a8becb;border-radius:9px;background:#f8fbfd;min-height:76px;padding:6px;box-shadow:0 -4px 15px #1a34492b}
  .ribbon-label{display:none}.add-cuts{width:100%;gap:3px;justify-content:space-between}.add-cuts button{flex:1;min-width:0;min-height:62px;padding:5px 3px;border-radius:6px;font-size:10px;border:1px solid #d6e1e6;background:#fff;gap:4px}.add-cuts button>span{font-size:27px;width:30px;height:29px}
  body[data-mobile-tools=true] .workspace-ribbon>.order-open{display:flex;position:absolute;right:0;bottom:calc(100% + 7px);width:61px;min-height:76px;margin:0;align-items:center;justify-content:center;gap:5px;border-radius:9px;background:#edf5f8;box-shadow:0 -4px 15px #1a34492b}
  .order-open>span:first-child{font-size:19px}.order-open>span:last-child:after{font-size:10px}
  .viewport-card{border-radius:9px;overflow:visible}.viewport-top{display:flex;min-height:46px;padding:4px 6px;gap:5px;border-radius:8px 8px 0 0}
  .viewport-top>div:first-child{display:none}.cad-toggle{min-height:38px;font-size:11px;padding:7px 8px;flex:1}.cad-toggle span{display:inline}.cad-toggle b{display:none}
  .scene-switch{gap:1px;padding:2px;flex:none}.scene-switch button{min-height:34px;font-size:11px;padding:6px 9px}
  .viewport-options{margin-left:auto}.viewport-options>summary{min-height:38px;width:34px;padding:3px;font-size:0}.viewport-options>summary:after{content:'⋯';font-size:23px;line-height:1}
  .expand-viewport{width:36px;min-width:36px;min-height:38px;padding:6px}.expand-viewport svg{width:19px;height:19px}
  .camera-toolbar{display:flex;padding:3px 5px;min-height:44px;gap:5px}.camera-presets{flex:1;scrollbar-width:none;gap:3px;scroll-snap-type:x proximity}.camera-presets::-webkit-scrollbar{display:none}.camera-presets button{min-height:36px;padding:6px 9px;font-size:11px;border-color:#c4d2da;border-radius:5px;scroll-snap-align:start;background:#eff4f6}
  .camera-zoom{gap:3px}.camera-zoom button{display:flex;align-items:center;justify-content:center;width:34px;min-width:34px;min-height:36px;font-size:17px;padding:4px}
  .camera-zoom button[data-camera=fit]{font-size:0}.camera-zoom button[data-camera=fit]:after{font-size:20px}
  .camera-zoom #camera-pan{display:flex;flex-direction:column;gap:0;width:40px;min-height:36px;padding:2px 3px;font-size:19px;line-height:18px}.camera-pan small{font-size:8px;line-height:10px}.camera-zoom #camera-pan[aria-pressed=true]{color:#fff;background:#386b7e;border-color:#386b7e}
  .scene{min-height:40px}.scene-label{top:12px;left:13px}.scene-label strong{font-size:12px}.scene-label>span{font-size:7px}.scene-label small{font-size:9px}.scene-legend{display:none}.axes{width:43px;bottom:27px;right:11px}
  .mobile-gesture-hint{display:block;position:absolute;left:12px;bottom:10px;font-size:9px;color:#96b7c6;pointer-events:none;text-shadow:0 1px 3px #000;max-width:calc(100% - 60px)}
  .scene-watermark{top:14px;right:13px}.desktop-camera-help{display:none}.mobile-camera-help{display:inline}.camera-help{font-size:12px;line-height:1.75}
  .simulation-panel{padding:7px 8px 1px;border-radius:0 0 8px 8px}.transport{gap:5px;flex-wrap:nowrap}.transport .play-button{min-height:39px;min-width:111px;font-size:11px;padding:7px 9px}.transport>button:not(.play-button):not(.finished-button){min-height:38px;width:32px;font-size:22px}
  .speed-control{display:flex!important;font-size:0}.speed-control select{min-height:38px;font-size:12px;padding:5px}.simulation-options>summary{min-height:38px;font-size:0;width:38px;padding:4px}.simulation-options>summary:before{content:'♫';font-size:18px}.simulation-options>summary:after{font-size:10px}
  .timeline{margin:6px 0 5px;gap:8px;min-height:20px}.timeline input{height:20px}.timeline span{font-size:9px}.axis-readouts{display:none}.simulation-heading{display:none}
  .workspace-popover{width:min(310px,calc(100vw - 24px));max-height:65dvh;padding:16px;border-radius:10px}.workspace-popover .paths-toggle{min-height:40px;font-size:12px;gap:10px}.paths-toggle input{width:19px;height:19px}.physics-controls label,.sound-controls label{min-height:40px}.physics-controls select,.sound-controls button{min-height:42px;font-size:12px}
  .cad-toolbar{padding:9px 7px 5px}.cad-tools{gap:4px;row-gap:7px;padding-top:0}.cad-face-navigation{width:100%;justify-content:space-between;padding:7px 4px 3px;gap:4px}.cad-face-navigation>select{flex:1;width:auto;font-size:12px;min-height:37px}.cad-face-navigation>button{min-width:38px;min-height:37px}.cad-face-map{display:none}.cad-face-caption{font-size:8px}.cad-center-text{display:none}.cad-face-navigation #cad-align{width:38px;padding:5px}.cad-face-navigation #cad-align>span:first-child{font-size:22px}
  body[data-mobile-panel=setup] .cad-toolbar,body[data-mobile-panel=inspector] .cad-toolbar{display:none}
  #cad-select,#cad-align{font-size:0;min-width:38px}#cad-select{min-height:36px;flex:1}#cad-select:after{content:'↔ Mover corte';font-size:11px}#cad-align:after{content:none}
  .cad-tools>label{font-size:10px;margin-left:auto;gap:5px}.cad-tools select{min-height:36px;font-size:12px}.cad-tools #cad-measures{min-height:36px;font-size:11px;padding:5px 9px}.cad-reference{font-size:9px!important;line-height:1.35;margin-top:6px!important}.cad-toolbar #cad-instructions{font-size:10px;line-height:1.4;min-height:0;margin-top:3px}.cad-coordinates{bottom:29px;font-size:9px}
  .measure-summary{display:none!important}.dimension-label{min-height:32px;font-size:11px;padding:0 3px;border-color:transparent;background:transparent!important;box-shadow:none!important;text-shadow:0 1px 3px #071018,0 -1px 2px #071018}.dimension-label:hover:not(:disabled),.dimension-label[data-active=true]{border-color:transparent!important;outline:none;color:#fff!important}.dimension-label:focus-visible{outline:1px solid #b7e0ee;outline-offset:1px}.measure-units{font-size:9px;right:79px}.studio-dialog{border-radius:12px}.dialog-close{min-height:40px;min-width:40px}
  body[data-viewport-expanded=true] .viewport-card{border-radius:0}body[data-viewport-expanded=true] .scene{min-height:0}
}
@media(max-width:760px) and (max-height:550px){
  .tube-header{display:none}.project-toolbar{min-height:40px;padding-block:3px}.project-name>span{display:none}.project-actions>button,.project-actions>button:nth-child(-n+2),.project-actions>#save-project{min-height:32px}
  .viewport-top{display:flex;min-height:39px;padding-block:2px}.cad-toggle,.expand-viewport,.viewport-options>summary{min-height:32px}.scene-switch button{min-height:29px}
  .camera-toolbar{display:flex;min-height:34px;padding-block:2px}.camera-presets button{min-height:29px;font-size:10px;padding:4px 8px}.camera-zoom button,.camera-zoom #camera-pan{min-height:29px}.camera-pan small{display:none}
  .simulation-panel{padding-top:4px}.transport .play-button,.transport>button:not(.play-button):not(.finished-button),.speed-control select,.simulation-options>summary{min-height:31px}.timeline{min-height:14px;margin:3px 0}.timeline input{height:14px}
  .workspace-ribbon{min-height:48px}.panel-navigation button,.panel-navigation button.mobile-only{min-height:43px;flex-direction:row;gap:8px}.panel-navigation button>span{font-size:20px;height:21px;line-height:21px}
  body.studio-app[data-mobile-panel=setup] .studio-grid,body.studio-app[data-mobile-panel=inspector] .studio-grid{grid-template-columns:235px minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:'controls viewport';gap:6px}
  .scene{min-height:25px}.scene-label{top:7px}.scene-label small,.scene-label>span,.axes,.mobile-gesture-hint{display:none}.scene-label strong{font-size:10px}
  .cad-toolbar{padding:7px 6px 3px}.cad-face-navigation{width:auto;flex:1;min-width:0}.cad-face-navigation>select{min-width:70px;font-size:10px}.cad-face-navigation>button{min-width:28px;min-height:29px;padding:3px}.cad-face-navigation #cad-align{width:28px}.cad-tools{flex-wrap:nowrap}.cad-tools>label,#cad-select,.cad-tools #cad-measures{display:none}.cad-reference{display:none}#cad-instructions{display:none}
  .property-group:first-child .cut-fields{grid-template-columns:1fr}.cut-editor-heading{flex-direction:column;align-items:stretch}.cut-actions{max-width:none;justify-content:flex-start}.field label{font-size:11px}.field input,.field select{min-height:40px}.shape-picker button{flex-direction:column;font-size:9px;gap:4px}.shape-picker svg{width:24px;height:24px}
}
@media(max-width:599px) and (max-height:550px){
  body.studio-app[data-mobile-panel=setup] .studio-grid,body.studio-app[data-mobile-panel=inspector] .studio-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) min(42dvh,180px);grid-template-areas:'viewport' 'controls'}
}

/* A single header and camera controls that only occupy space when requested. */
@media(max-width:760px){
  .tube-header{display:none}
  main{padding-top:max(6px,env(safe-area-inset-top))}
  .mobile-workspace-home{display:flex;align-items:center;justify-content:center;flex:none;width:32px;min-height:42px;border-radius:6px;background:#14242f}.mobile-workspace-home img{width:24px;height:24px;object-fit:contain}
  .project-name>span{font-size:10px;letter-spacing:0;color:#486879}
  .project-name>span .project-desktop-label{display:none}
  .project-name>span .mobile-project-label{display:inline;font-weight:600}
  .project-file-actions .project-home{align-items:center;min-height:44px;padding:9px 12px;font-size:12px;border-top:1px solid #d1dfe6}
  .project-toolbar>#save-state[data-error=true]{display:block;position:fixed;z-index:45;left:12px;right:12px;bottom:76px;max-width:none;padding:12px 15px;border:1px solid #cb9771;border-radius:9px;background:#fff2e7;box-shadow:0 4px 18px #142f4530;color:#8b4427;font-size:12px}
  .viewport-card{position:relative;--tube-camera-top:54px}
  .viewport-top{min-height:54px;padding:4px 5px;gap:4px}
  .cad-toggle{min-width:64px;min-height:42px;padding:5px}
  .cad-toggle span,.cad-toggle b{display:none}
  .cad-toggle:after{content:'Diseñar';font-size:12px}
  .scene-switch button{min-height:38px;padding:6px 8px}
  .mobile-camera-toggle{display:flex;align-items:center;justify-content:center;flex:none;width:38px;min-width:38px;min-height:42px;padding:7px;border-color:#a9bdc9;background:#f7fafc;color:#395b6e}
  .mobile-camera-toggle svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .mobile-camera-toggle[aria-expanded=true],.viewport-card:has(#camera-pan[aria-pressed=true]) .mobile-camera-toggle{background:#d6eef0;border-color:#438899;color:#15596b}
  .viewport-options{margin-left:0}.viewport-options>summary{min-height:42px;width:34px}
  .expand-viewport{min-height:42px;width:38px;min-width:38px}
  .camera-toolbar{display:none;position:absolute;top:var(--tube-camera-top);left:7px;right:7px;z-index:22;flex-direction:column;align-items:stretch;gap:8px;min-height:0;padding:10px;background:#f2f8fb;border:1px solid #93aebf;border-radius:0 0 10px 10px;box-shadow:0 10px 25px #07192466}
  body[data-mobile-camera=true] .camera-toolbar{display:flex}
  .camera-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;flex:none;overflow:visible}
  .camera-presets button{min-width:0;min-height:44px;padding:5px 3px;font-size:11px;white-space:normal}
  .camera-zoom{width:100%;gap:5px}
  .camera-zoom button,.camera-zoom #camera-pan{flex:1;width:auto;min-height:44px;min-width:0;font-size:21px}
  .camera-zoom #camera-pan{flex-direction:row;gap:5px;padding:5px;font-size:21px}
  .camera-pan small{display:inline;font-size:11px;line-height:1.3}
  .camera-zoom button[data-camera=fit]:after{content:'Centrar';font-size:11px}
  .dock-tag{display:none}
  .panel-grow{display:flex;align-items:center;justify-content:center;width:40px;min-height:40px;margin-left:auto;padding:3px;font-size:23px;color:#446a7f;background:#f7fbfd;border-color:#becfd9}
  .panel-grow[aria-expanded=true]{background:#d3e9ee;border-color:#719cae}
  .close-dock{width:40px;min-height:40px}
  .cad-toolbar{padding:5px 7px}
  .cad-face-navigation{padding:4px;min-height:45px}
  .cad-face-caption{display:none}
  .cad-tools{row-gap:5px}
  .cad-tools #cad-select,.cad-tools #cad-measures,.cad-tools select{min-height:38px}
  body[data-cad=true] .simulation-panel{display:none}
  body[data-cad-face=true] #cad-instructions:not([data-invalid=true]){display:none}
  body[data-cad-face=true] .cad-reference{margin-top:4px!important}
  .mobile-gesture-hint{font-size:10px}
  .field,.cut-editor .field{scroll-margin-block:50px 12px}
}
@media(max-width:760px) and (min-height:551px){
  body.studio-app[data-mobile-panel=setup] .studio-grid,body.studio-app[data-mobile-panel=inspector] .studio-grid{grid-template-rows:minmax(0,1fr) clamp(168px,calc(var(--tube-mobile-height,100dvh)*.27),250px)}
  body.studio-app[data-mobile-dock-large=true][data-mobile-panel=setup] .studio-grid,body.studio-app[data-mobile-dock-large=true][data-mobile-panel=inspector] .studio-grid{grid-template-rows:minmax(0,1fr) min(48dvh,410px)}
}
@media(max-width:760px) and (max-height:550px){
  .viewport-card{--tube-camera-top:46px}
  .viewport-top{min-height:46px}
  .cad-toggle,.mobile-camera-toggle,.viewport-options>summary,.expand-viewport{min-height:38px}
  .scene-switch button{min-height:34px}
  .camera-toolbar{min-height:0;padding:8px}
  .camera-pan small{display:inline}
  .panel-grow{display:none}
  .cad-face-navigation{min-height:42px}
  .cad-face-navigation>button{min-height:34px}
  .cad-face-navigation>select{min-height:34px}
}
@media(max-width:760px){
  body.studio-app[data-mobile-keyboard=true] .project-toolbar,body.studio-app[data-mobile-keyboard=true] .workspace-ribbon,body.studio-app[data-mobile-keyboard=true] .viewport-top,body.studio-app[data-mobile-keyboard=true] .cad-toolbar,body.studio-app[data-mobile-keyboard=true] .camera-toolbar,body.studio-app[data-mobile-keyboard=true] .simulation-panel{display:none}
  body.studio-app[data-mobile-keyboard=true] .studio-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(50px,20%) minmax(0,1fr);grid-template-areas:'viewport' 'controls';gap:4px}
  body.studio-app[data-mobile-keyboard=true] .scene{min-height:0}
  body.studio-app[data-mobile-keyboard=true] .panel-grow{display:none}
}