.canvas-viewport{width:100%;height:640px;overflow:auto;border:1px solid #d6c8df;border-radius:9px;background:#e5dfeb;overscroll-behavior:contain;position:relative;cursor:default}.canvas-workspace{min-width:100%;width:max-content;padding:35px;display:flex;justify-content:center;position:relative}.canvas-workspace .sheet{flex-shrink:0;max-width:none!important;overflow:visible;box-shadow:0 6px 22px #47374f26}.canvas-viewport.panning,.canvas-viewport.space-ready{cursor:grab}.canvas-viewport.panning{cursor:grabbing}.zoom-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;margin:0 0 14px;width:100%}.zoom-tools button{background:#fffaf6;border:1px solid #d7c7df;border-radius:6px;padding:7px 10px;color:#493b53;font-size:11px}.zoom-tools input{width:100px;accent-color:#9d78b3}.zoom-tools output{font-size:11px;min-width:37px;text-align:center}.sheet-ruler-x{position:absolute;left:0;right:0;top:-24px;height:20px;border-bottom:1px solid #bba9c6;color:#7a6388;font-size:8px;background-image:repeating-linear-gradient(90deg,#bba9c6 0 1px,transparent 1px var(--cm-size));background-position:0 15px;background-size:auto 5px;background-repeat:repeat-x}.sheet-ruler-y{position:absolute;left:-25px;top:0;bottom:0;width:21px;border-right:1px solid #bba9c6;color:#7a6388;font-size:8px;background-image:repeating-linear-gradient(#bba9c6 0 1px,transparent 1px var(--cm-size));background-position:16px 0;background-size:5px auto;background-repeat:repeat-y}.sheet-ruler-x span{position:absolute;top:0;transform:translateX(-50%)}.sheet-ruler-y span{position:absolute;left:0;transform:translateY(-50%)}.resize-handle{position:absolute;right:-6px;bottom:-6px;width:13px;height:13px;border:2px solid white;border-radius:3px;background:#9569a8;cursor:nwse-resize;z-index:4;touch-action:none;box-shadow:0 1px 4px #493b5355}.size-live{position:absolute;bottom:-23px;left:0;white-space:nowrap;border-radius:3px;background:#493b53;color:white;font-size:9px;padding:3px 5px;pointer-events:none;z-index:4}.design.selected{z-index:2}.design.filler-copy{outline:1px dashed #81a98d}.presets{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.presets button{border:1px solid #d8c4e3;border-radius:6px;background:#f3eaf8;padding:7px 10px;font-size:10px;color:#493b53}.filler-bank{width:100%;margin:16px 0 0;font-size:11px}.filler-bank button{display:flex;align-items:center;gap:8px;width:100%;padding:8px;margin:5px 0;background:#fffcfa;border:1px solid #d8cbdf;border-radius:6px;text-align:left;color:#493b53}.filler-bank img{height:35px;width:40px;object-fit:contain}.filler-options{background:#edf4e9;padding:12px;border-radius:8px;margin-top:16px;font-size:11px}.filler-options label{font-size:11px}.piece-toolbar{width:100%;display:flex;gap:7px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}.piece-toolbar button{font-size:10px;border:1px solid #d5c4df;background:#fffcfa;border-radius:5px;padding:7px}.piece-count{font-size:11px;margin:10px 0}.design-list{display:flex;gap:5px;flex-wrap:wrap}.design-list button{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #d9cce0;border-radius:5px;background:white;padding:7px;font-size:10px;color:#493b53}.brand img{max-height:45px;max-width:170px;object-fit:contain}.local-order-note{border:1px solid #d6e3d3;background:#f0f6ed;padding:14px;border-radius:8px;font-size:12px}.maintenance{text-align:center;padding:100px 25px;max-width:850px;margin:auto}.canvasarea .hint{margin-bottom:5px}.editorwrap{max-width:1480px}.editor{grid-template-columns:250px minmax(320px,1fr) 290px}@media(max-width:1180px){.editor{grid-template-columns:230px 1fr}.editor>.panel:last-child{grid-column:1/-1}.canvas-viewport{height:590px}}@media(max-width:720px){.editor{grid-template-columns:1fr}.editor>.panel:last-child{grid-column:auto}.canvas-viewport{height:520px}.zoom-tools{gap:5px}.zoom-tools input{width:85px}.canvasarea{padding:17px}.editorwrap>.sectionhead{flex-wrap:wrap}}
.panel,.creative,.productart,.canvasarea,.notice{border-radius:var(--radius,12px)}

/* Rejilla a prueba de lienzo: el visor puede desplazarse sin estirar la página. */
.editor{grid-template-columns:250px minmax(0,1fr) 290px}
.editor>*{min-width:0}
.canvasarea{min-width:0}
.canvas-viewport{max-width:100%}
@media(max-width:1180px){.editor{grid-template-columns:230px minmax(0,1fr)}}
@media(max-width:720px){
 .editor{grid-template-columns:minmax(0,1fr)}
 .editor>*{min-width:0;width:100%}
 .editor>.panel:last-child{grid-column:auto}
 .canvasarea{padding:14px}
 .canvas-viewport{height:460px}
 .canvas-workspace{padding:18px}
 .zoom-tools{justify-content:center;flex-wrap:wrap;gap:5px}
 .zoom-tools input{width:88px}
 .sheet-ruler-y{left:-22px;width:19px}
 .piece-toolbar button,.presets button{font-size:11px;padding:8px 10px}
 .design-list button{max-width:100%}
}
@media(max-width:480px){
 .library{grid-template-columns:1fr 1fr}
 .library img{height:82px}
 .canvas-viewport{height:420px}
}