/* Folio · By Kompilador */

.hoja { position: relative; overflow: visible; }

.encuadre {
  position: absolute;
  touch-action: none;
  cursor: move;
  outline: 1px dashed rgba(226, 87, 76, .55);
  outline-offset: 0;
}
.encuadre img {
  display: block; width: 100%; height: 100%; object-fit: fill;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.encuadre:hover, .encuadre--propio { outline-color: var(--accent); outline-style: solid; }
.encuadre--activo { outline: 2px solid var(--accent); }
.encuadre:focus-visible { outline: 2px solid var(--word); outline-offset: 2px; }

.encuadre-asa {
  position: absolute; width: 12px; height: 12px; box-sizing: border-box;
  background: #fff; border: 2px solid var(--accent); border-radius: 2px;
}
.encuadre-asa::before { content: ""; position: absolute; inset: -10px; }
.asa-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.asa-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.asa-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.asa-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }

.encuadre-barra {
  border-top: 1px solid var(--line); background: var(--panel);
  padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px;
}
.encuadre-barra[hidden] { display: none; }
.encuadre-lectura { margin: 0; font-family: var(--ui); font-size: 12px; line-height: 1.45; min-height: 17px; }
.encuadre-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.encuadre-botones button { font-size: 12px; padding: 6px 11px; min-height: 32px; }
.encuadre-barra .ayuda { margin: 0; font-size: 11.5px; line-height: 1.45; }

@media (max-width: 860px) {
  .stage { min-height: 360px; }
}

@media (pointer: coarse) {
  .encuadre-asa { width: 18px; height: 18px; }
  .asa-nw { left: -9px; top: -9px; }
  .asa-se { right: -9px; bottom: -9px; }
  .asa-ne { right: -9px; top: -9px; }
  .asa-sw { left: -9px; bottom: -9px; }
  .encuadre-botones button { min-height: 44px; }
}