/* ===== BRUCK PURE R4 (sin dependencias) ===== */
:root { --bruck-green:#31ae79; }
* { box-sizing: border-box; }
.selectable { position:absolute; touch-action:none; will-change: width, height, transform; }
.selectable .content { position:relative; }
.resize-box{ position:absolute; inset:0; pointer-events:none; z-index:40; }
.resize-handle{
  position:absolute; width:16px; height:16px;
  border:2px solid var(--bruck-green); border-radius:9999px; background:#0d1117;
  pointer-events:auto; touch-action:none; z-index:41;
  box-shadow:0 0 0 2px rgba(49,174,121,.25);
}
/* Aumenta el "hit area" sin cambiar el tamaño visible */
.resize-handle::after{
  content:""; position:absolute; inset:-8px; /* 32x32 area clickeable */
}
.handle-tl{top:-9px; left:-9px; cursor:nwse-resize;}
.handle-tr{top:-9px; right:-9px; cursor:nesw-resize;}
.handle-bl{bottom:-9px; left:-9px; cursor:nesw-resize;}
.handle-br{bottom:-9px; right:-9px; cursor:nwse-resize;}
.handle-t{top:-9px; left:50%; transform:translateX(-50%); cursor:ns-resize;}
.handle-b{bottom:-9px; left:50%; transform:translateX(-50%); cursor:ns-resize;}
.handle-l{left:-9px; top:50%; transform:translateY(-50%); cursor:ew-resize;}
.handle-r{right:-9px; top:50%; transform:translateY(-50%); cursor:ew-resize;}
.selectable img{ user-select:none; pointer-events:none; }

/* Crop mode */
.selectable.crop-mode { outline: 2px dashed var(--bruck-green); outline-offset: 4px; }
.crop-frame{
  position:absolute; left:0; top:0; width:100%; height:100%;
  overflow:hidden; border:2px solid var(--bruck-green); box-shadow:0 0 0 9999px rgba(0,0,0,.45);
  pointer-events:auto; touch-action:none; z-index:50;
}
.crop-frame .crop-handle{
  position:absolute; width:12px; height:12px; background:#fff; border:2px solid var(--bruck-green); border-radius:9999px;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.crop-handle.tl{top:-8px; left:-8px; cursor:nwse-resize;}
.crop-handle.tr{top:-8px; right:-8px; cursor:nesw-resize;}
.crop-handle.bl{bottom:-8px; left:-8px; cursor:nesw-resize;}
.crop-handle.br{bottom:-8px; right:-8px; cursor:nwse-resize;}
.crop-handle.t{top:-8px; left:50%; transform:translateX(-50%); cursor:ns-resize;}
.crop-handle.b{bottom:-8px; left:50%; transform:translateX(-50%); cursor:ns-resize;}
.crop-handle.l{left:-8px; top:50%; transform:translateY(-50%); cursor:ew-resize;}
.crop-handle.r{right:-8px; top:50%; transform:translateY(-50%); cursor:ew-resize;}

.locked { outline: 1px dashed #aaa; }
.locked::after{
  content:"🔒"; position:absolute; top:-18px; right:-18px; font-size:14px; background:#fff; border:1px solid #ccc; border-radius:50%; padding:2px;
}

/* === Option A: la imagen llena el marco (cover) === */
.selectable > .content { position: relative; width: 100%; height: 100%; }
.selectable > .content > img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* cambiar a 'contain' si querés ver todo sin recortar */
  display: block;
}
/* En modo recorte: la imagen debe aceptar drag dentro del marco */
.selectable.crop-mode .crop-frame img { pointer-events: auto; }