/* Main layout: navigator, canvas area and rulers. */

/* ---------- Main ---------- */
main{flex:1;display:flex;min-height:0}
body.nav-hidden #navigator{display:none}
#navigator{width:220px;background:var(--panel);border-right:1px solid var(--line2);
  overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.section-head{font-size:11px;font-weight:700;color:var(--txt2);text-transform:uppercase;
  letter-spacing:.4px;padding:6px 2px 0}
.thumb{position:relative;cursor:pointer;border:2px solid var(--line2);border-radius:6px;
  overflow:hidden;background:#111;box-shadow:0 1px 3px #0001;flex-shrink:0}  /* never squash: scroll instead */
.section-head{flex-shrink:0}
.thumb.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.thumb.dragging{opacity:.4}
.thumb.drop-target{border-color:var(--go);box-shadow:0 -3px 0 var(--go)}
.thumb-num{position:absolute;top:2px;left:5px;z-index:2;font-size:11px;color:#fff;opacity:.75;text-shadow:0 1px 2px #000}
.thumb-canvas{position:relative;aspect-ratio:var(--ar,16/9);overflow:hidden}
.thumb-inner{position:absolute;top:0;left:0;transform-origin:top left}
.thumb-del{position:absolute;top:2px;right:2px;z-index:3;background:#0008;border:none;color:#fff;
  border-radius:4px;cursor:pointer;font-size:11px;line-height:1;padding:2px 5px;display:none}
.thumb:hover .thumb-del{display:block}
.thumb.is-hidden .thumb-canvas{opacity:.38}
.thumb-hidden{position:absolute;top:2px;right:24px;z-index:3;color:#fff;background:#0008;border-radius:4px;
  display:grid;place-items:center;padding:1px 3px}
.thumb-hidden .ms{font-size:14px}
.pv-block>div,.pv-block>img{width:100%;height:100%}

#canvas-wrap{flex:1;display:grid;place-items:center;padding:28px;overflow:auto;background:var(--canvas-bg)}
#stage-sizer{position:relative;overflow:visible}
#stage-grid{display:grid;width:max-content;grid-template-columns:auto auto;grid-template-rows:auto auto;
  transform-origin:top left}
#stage{position:relative;background:#111;border-radius:4px;overflow:visible;flex:0 0 auto;
  box-shadow:0 10px 34px #0003}

/* Rulers (View ▸ Regla). Major mark every 100 px, minor every 20 px. */
#ruler-corner,#ruler-h,#ruler-v{display:none;background:var(--panel)}
body.show-ruler #ruler-corner,body.show-ruler #ruler-h,body.show-ruler #ruler-v{display:block}
#ruler-corner{width:20px;height:20px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}
#ruler-h{height:20px;border-bottom:1px solid var(--line2);
  background-image:repeating-linear-gradient(90deg,transparent 0 99px,var(--txt2) 99px 100px),
                   repeating-linear-gradient(90deg,transparent 0 19px,var(--line) 19px 20px)}
#ruler-v{width:20px;border-right:1px solid var(--line2);
  background-image:repeating-linear-gradient(180deg,transparent 0 99px,var(--txt2) 99px 100px),
                   repeating-linear-gradient(180deg,transparent 0 19px,var(--line) 19px 20px)}
#stage.guides::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(#fff2 1px,transparent 1px) 0 0/100% 10%,linear-gradient(90deg,#fff2 1px,transparent 1px) 0 0/10% 100%}

/* Slide sorter (View ▸ Clasificador): the slides panel, big, over the editing area. */
body.sorter #canvas-wrap,body.sorter #notes-bar,body.sorter #elements-panel{display:none!important}
body.sorter #navigator,body.sorter.nav-hidden #navigator{display:grid;flex:1;width:auto;height:auto;border-right:none;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-content:start;gap:22px 18px;padding:24px;overflow-y:auto;background:var(--canvas-bg)}
body.sorter #navigator .section-head{display:block;grid-column:1/-1;font-size:12px;padding:4px 2px 0}
body.sorter .thumb{flex:none}
body.sorter .thumb.is-vertical{margin-inline-start:0}
@media (max-width:860px){ body.sorter #navigator{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:12px} }
body.sorter #statusbar .zoom{visibility:hidden}