/* Editor de piezas + zoom de la vista previa del carrusel (2026-09-20) — ver lib/carruselEditor.js */

/* zoom: #crslZoomInner crece con el zoom, #crslZoomView scrollea */
#crslZoomView{position:relative; border-radius:16px; overflow:hidden; max-width:100%;}
#crslZoomView.z{overflow:auto; max-height:min(76vh, 920px); overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
#crslZoomInner{position:relative; width:100%;}
#crslZoomView.z #carruselPreviewWrap{contain:none;}
/* con zoom>1 el arrastre es para mover piezas, no para cambiar de lámina
   (2026-09-26): las flechitas de #carruselPreviewArrows (index.html) se
   ocultan solas mientras dure el zoom, igual que el swipe (__crslNoSwipe). */
#crslZoomView.z #carruselPreviewArrows{display:none;}

/* selección: caja punteada + manijas (pointer-events solo en la caja y las manijas: el resto deja pasar el toque a la lámina) */
#crslxOv{position:absolute; inset:0; pointer-events:none; z-index:6;}
#crslxBox{display:none; position:absolute; box-sizing:border-box; border:2px dashed var(--yellow); border-radius:4px; pointer-events:auto; touch-action:none; cursor:move; transform-origin:center center; user-select:none; -webkit-user-select:none;}
.crslx-h{position:absolute; width:20px; height:20px; box-sizing:border-box; background:var(--yellow); border:2px solid #000; border-radius:50%; touch-action:none; pointer-events:auto;}
.crslx-h::after{content:""; position:absolute; inset:-10px;}
.crslx-h.nw{left:-11px; top:-11px; cursor:nwse-resize;} .crslx-h.ne{right:-11px; top:-11px; cursor:nesw-resize;}
.crslx-h.sw{left:-11px; bottom:-11px; cursor:nesw-resize;} .crslx-h.se{right:-11px; bottom:-11px; cursor:nwse-resize;}
.crslx-h.rot{left:50%; top:-38px; margin-left:-10px; cursor:grab; background:#fff;}
.crslx-h.rot::before{content:""; position:absolute; left:50%; top:20px; width:2px; height:16px; margin-left:-1px; background:var(--yellow);}
#crslxTag{position:absolute; left:-2px; bottom:calc(100% + 6px); background:var(--yellow); color:#000; font:800 11px 'Inter',sans-serif; padding:2px 8px; border-radius:6px; white-space:nowrap; pointer-events:none; max-width:220px; overflow:hidden; text-overflow:ellipsis;}
#crslxBox.locked{border-color:#ff5c5c;}

/* barra flotante de acciones (2026-09-29): pegada a la caja de selección, SIN rotar (a diferencia de #crslxTag) */
#crslxToolbar{display:none; position:absolute; transform:translateX(-50%); gap:3px; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:4px; box-shadow:0 6px 18px rgba(0,0,0,.4); pointer-events:auto; z-index:7;}
.crslx-tbtn{width:32px; height:30px; padding:0; border:none; border-radius:6px; background:transparent; color:var(--text); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.crslx-tbtn:hover{background:var(--panel);}

/* guías de imán al centro de la lámina (2026-09-29) */
#crslxGuideV{display:none; position:fixed; width:1.5px; background:var(--yellow); z-index:99999; pointer-events:none;}
#crslxGuideH{display:none; position:fixed; height:1.5px; background:var(--yellow); z-index:99999; pointer-events:none;}
.crslx-b.crslx-on{border-color:var(--yellow); color:var(--yellow);}
/* grilla de tercios togglable (2026-09-29, segunda tanda) */
#crslxTercios{display:none; position:fixed; inset:0; z-index:5; pointer-events:none;}
.crslx-terc{position:fixed; background:rgba(255,224,0,.4); pointer-events:none;}
.crslx-terc.v1, .crslx-terc.v2{width:1px;}
.crslx-terc.h1, .crslx-terc.h2{height:1px;}

/* barra de herramientas bajo la vista previa */
#crslPiezaBar{margin-top:10px;}
.crslx-fila{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:6px;}
.crslx-b{padding:7px 11px; font-size:12px; margin:0; min-height:34px;}
.crslx-zt{font:700 12px 'Inter',sans-serif; min-width:44px; text-align:center;}
.crslx-hint{font-size:11.5px; margin:2px 0 8px; line-height:1.4;}
.crslx-card{border:1.5px solid var(--yellow); border-radius:12px; padding:10px 12px 12px; background:var(--panel-2); margin-top:6px;}
.crslx-head{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; font-size:13px;}
.crslx-mini{background:none; border:1px solid var(--border); color:var(--text); border-radius:8px; padding:5px 9px; font-size:11.5px; cursor:pointer; margin-left:4px; font-family:'Inter',sans-serif;}
.crslx-lab{display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:8px 0 3px;}
.crslx-lab b{color:var(--text); text-transform:none; letter-spacing:0;}
.crslx-row{display:flex; align-items:center; gap:8px;}
.crslx-row input[type=range]{flex:1; min-width:0; accent-color:var(--yellow);}
.crslx-row input[type=color]{width:44px; height:34px; padding:2px; border:1px solid var(--border); border-radius:8px; background:var(--panel); cursor:pointer;}
.crslx-flechas .crslx-b{flex:1;}
.crslx-colores{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media (max-width:420px){ .crslx-colores{grid-template-columns:1fr;} }

/* panel de capas: todas las piezas de la lámina activa, tocables (2026-09-29) */
.crslx-capas-tit{margin:10px 0 4px; font-size:11.5px;}
.crslx-capas-lista{max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:10px;}
.crslx-capa-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; cursor:pointer; border-bottom:1px solid var(--border); font-size:12.5px;}
.crslx-capa-row:last-child{border-bottom:none;}
.crslx-capa-row:hover{background:var(--panel-2);}
.crslx-capa-row.sel{background:rgba(255,224,0,.12); border-left:3px solid var(--yellow); padding-left:7px;}
.crslx-capa-row.oculta .crslx-capa-nombre{opacity:.5; font-style:italic;}
.crslx-capa-nombre{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.crslx-capa-chk{margin:0; flex-shrink:0; cursor:pointer;}
.crslx-capa-acc{display:flex; gap:4px; flex-shrink:0;}
.crslx-capa-acc .crslx-mini{margin-left:0; padding:3px 7px;}

/* textos y sellos que suma la persona */
.crslx-extra{position:absolute; z-index:4; white-space:nowrap; line-height:1.08; text-align:center; transform:translate(-50%,-50%); font-family:var(--crsl-font-display),'Inter',sans-serif;}
.crslx-x-texto{font-size:88px; font-weight:900; color:var(--crsl-accent-text, var(--crsl-accent)); text-shadow:0 5px 22px rgba(0,0,0,.35);}
.crslx-x-sello{font-size:170px;}