/**
 * stk-troq-bbox.css v1.0.0
 * Bbox handles para troqueladas V3 — mismo diseño que láminas.
 * Borde morado #6C5CE7, corners blancos, rotación, botón X rojo.
 * PROBADO EN VIVO: clipart resize, rotate, delete — funciona.
 */

/* ═══ CONTENEDOR HANDLES ═══ */
.stk-bbox {
  position: absolute;
  pointer-events: none;
  display: none;
  z-index: 50;
}
.stk-bbox.stk-bbox-active { display: block; }

/* ═══ BORDE ═══ */
.stk-bbox-border {
  position: absolute;
  inset: 0;
  border: 1.5px solid #6C5CE7;
  pointer-events: none;
}

/* ═══ LÍNEA AL HANDLE DE ROTACIÓN ═══ */
.stk-bbox-rotate-line {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 1px;
  height: 20px;
  background: #6C5CE7;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ═══ DOTS GENÉRICOS ═══ */
.stk-bbox-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #6C5CE7;
  border-radius: 50%;
  pointer-events: all;
}

/* ═══ CORNERS (resize proporcional) ═══ */
.stk-bbox-nw { top: -5px;  left: -5px;  cursor: nw-resize; }
.stk-bbox-ne { top: -5px;  right: -5px; cursor: ne-resize; }
.stk-bbox-sw { bottom: -5px; left: -5px;  cursor: sw-resize; }
.stk-bbox-se { bottom: -5px; right: -5px; cursor: se-resize; }

/* Hit area ampliado 44×44 */
.stk-bbox-nw::after,
.stk-bbox-ne::after,
.stk-bbox-sw::after,
.stk-bbox-se::after {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: inherit;
}

/* ═══ ROTACIÓN ═══ */
.stk-bbox-rotate {
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  cursor: grab;
  background: #6C5CE7;
  border: 2px solid #fff;
  width: 12px;
  height: 12px;
}
.stk-bbox-rotate:active { cursor: grabbing; }

.stk-bbox-rotate::after {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: inherit;
}

/* ═══ BOTÓN ELIMINAR ═══ */
.stk-bbox-delete {
  top: 15px;
  right: -14px;
  bottom: auto;
  left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e0e0e0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stk-bbox-delete::before,
.stk-bbox-delete::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 2.5px;
  background: #ff3b30;
  border-radius: 1px;
}
.stk-bbox-delete::before { transform: translate(-50%,-50%) rotate(45deg); }
.stk-bbox-delete::after  { transform: translate(-50%,-50%) rotate(-45deg); }

/* ═══ DIMENSIONES ═══ */
.stk-bbox-dims {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: #1a73e8;
  white-space: nowrap;
  pointer-events: none;
}

/* ═══ OCULTAR HANDLES VIEJOS DE StkHandles ═══ */
#stk-clip-handles { display: none !important; }
#stk-clip-hover { display: none !important; }

/* ═══ LAMINADO: debe estar encima del SVG overlay (z-index:5) ═══ */
#stk-laminate-overlay { z-index: 8 !important; }

/* ═══ TEXT BBOX WRAPPER ═══ */
.stk-text-bbox-wrap {
  position: absolute;
  pointer-events: all;
  cursor: move;
  z-index: 25;
}

/* ═══ DESIGN BBOX WRAPPER (imagen principal) ═══
   Visible solo cuando #stk-stage tiene .stk-design-active.
   Wrap transparente a clicks (solo dots reciben) para no bloquear cliparts/texto. */
.stk-design-bbox-wrap {
  display: none !important;
  z-index: 20 !important;
  pointer-events: none !important;
}
#stk-stage.stk-design-active .stk-design-bbox-wrap {
  display: block !important;
}
.stk-design-bbox-wrap .stk-bbox             { display: block !important; pointer-events: none !important; }
.stk-design-bbox-wrap .stk-bbox-border      { display: block !important; pointer-events: none !important; }
.stk-design-bbox-wrap .stk-bbox-rotate-line { pointer-events: none !important; }
.stk-design-bbox-wrap .stk-bbox-dot         { pointer-events: all !important; }

#stk-design-handles { display: none !important; pointer-events: none !important; }

/* ═══ TOPBAR PADDING PARA SUBTITULO ═══ */
.stk-topbar { padding-top: 60px !important; }