#editBar{display:none;position:fixed;left:50%;bottom:124px;transform:translateX(-50%);z-index:30;gap:8px}
@media (prefers-reduced-motion:no-preference){.modal{animation:fade .18s ease-out}}

@media (max-width:760px),(max-height:500px) and (max-width:960px){
  body{--hoja-vis:0px;--hoja-lado:0px;--hoja-suelo:max(min(var(--hoja-vis),var(--hoja-media)),env(safe-area-inset-bottom,0px))}
  body[data-view="design"],body[data-view="snapper"][data-left="open"],body[data-hist="open"]{--hoja-vis:var(--hoja-h)}
  body.panel-oculto,body.no-snapper[data-view="snapper"]:not([data-hist="open"]){--hoja-vis:0px}
  body.editando #editBar{display:flex;bottom:calc(var(--hoja-suelo) + 64px)}
  body.panel-oculto #rightPanel{display:none}
  body[data-view="snapper"] #rightPanel{display:none}
  body[data-view="design"] #leftPanel{display:none}
  body[data-view] .cubo-vista{--cubo:52px;top:calc(var(--hdr) + 8px);right:calc(var(--hoja-lado) + max(4px,env(safe-area-inset-right,0px)))}
  .visor-cotas{top:calc(var(--hdr) + 104px);bottom:auto;right:calc(var(--hoja-lado) + max(8px,env(safe-area-inset-right,0px)))}
  .ocupado{bottom:calc(var(--hoja-suelo) + 64px)}
  .toasts{bottom:calc(var(--hoja-suelo) + 64px);left:calc((100vw - var(--hoja-lado)) / 2);max-width:min(420px,calc(100vw - var(--hoja-lado) - 32px))}
  body:has(.ocupado:not([hidden])) .toasts,body.editando .toasts{bottom:calc(var(--hoja-suelo) + 116px)}
}
@media (prefers-reduced-motion:no-preference) and (max-width:760px),(prefers-reduced-motion:no-preference) and (max-height:500px) and (max-width:960px){.toasts{transition:bottom .28s cubic-bezier(.2,.7,.2,1)}body.hoja-arrastre .toasts{transition:none}}
@media (max-height:500px) and (min-width:761px) and (max-width:960px){
  .side-panel .collapse-btn{display:inline-flex}
}
@media (max-height:500px) and (min-width:561px) and (max-width:960px){
  body{--hoja-suelo:env(safe-area-inset-bottom,0px)}
  body[data-view="design"],body[data-view="snapper"][data-left="open"],body[data-hist="open"]{--hoja-lado:calc(min(380px,46vw) + 16px)}
  body.panel-oculto,body.no-snapper[data-view="snapper"]:not([data-hist="open"]){--hoja-lado:0px}
  #editBar,.estado-vacio{left:calc((100vw - var(--hoja-lado)) / 2)}
  .estado-vacio{gap:2px;padding:10px 12px}
  .estado-vacio>p,.ev-btn small{display:none}
  .ev-acciones{flex-direction:row;margin-top:6px}
  .ev-btn{flex:1;flex-direction:column;gap:4px;min-height:0;padding:8px 6px;text-align:center}
  .ev-btn .cinta-ic{width:28px;height:28px}
}
@media (min-width:761px) and (min-height:501px),(min-width:961px){
  body{--visor-der:calc(var(--carril-w) + 8px)}
  body:is([data-left="open"],[data-right="open"],[data-hist="open"]){--visor-der:var(--visor-der-max)}
  #leftPanel{left:auto;width:var(--pl-der,324px)}
  body[data-view] .cubo-vista{right:var(--visor-der)}
  .visor-cotas{right:var(--visor-der);bottom:16px}
  body:not([data-page]) :is(#editBar,.estado-vacio,.toasts,.ocupado){left:var(--visor-centro)}
  #editBar{bottom:68px}
  body.editando .toasts{bottom:120px}
}
@media (min-width:1440px){
  #leftPanel{max-height:calc((100dvh - var(--hdr) - 36px) * .45)}
  body[data-left="open"] #rightPanel{top:calc(var(--hdr) + 24px + var(--piezas-h,0px));max-height:calc(100dvh - var(--hdr) - 36px - var(--piezas-h,0px))}
}
@media (pointer:coarse){#selloPanel .btn,#relieveAplicar,#sellosAjustes .btn,#sellosAjustes .add-obj-btn{min-height:44px}}