.czs-editor{--cz:#00353f;--cz2:#075763;--line:#dbe4e6;--muted:#708287;--bg:#f4f6f6;max-width:1500px;margin:20px auto;color:#17363c;font-family:inherit;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 35px rgba(0,53,63,.07)}











.czs-editor *{box-sizing:border-box}.czs-editor button,.czs-editor input,.czs-editor textarea{font:inherit}.czs-editor button:disabled{opacity:.35;cursor:not-allowed}











.czs-client-head{height:74px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 20px;border-bottom:1px solid var(--line);background:#fff}











.czs-head-product{display:flex;flex-direction:column;min-width:0}.czs-head-product strong{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.czs-head-product span,.czs-save-state{font-size:11px;color:var(--muted);margin-top:2px}











.czs-head-history{display:flex;align-items:center;gap:7px}.czs-icon-btn{width:37px;height:37px;border:1px solid var(--line);background:#fff;border-radius:9px;color:var(--cz);font-size:18px;cursor:pointer}.czs-save-state{margin-left:6px;min-width:92px}











.czs-head-actions{justify-self:end;display:flex;gap:8px}.czs-primary-btn,.czs-secondary-btn{border-radius:9px;padding:10px 16px;font-weight:750;cursor:pointer}.czs-primary-btn{background:var(--cz);border:1px solid var(--cz);color:#fff}.czs-primary-btn:hover{background:var(--cz2)}.czs-secondary-btn{background:#fff;border:1px solid var(--line);color:var(--cz)}











.czs-client-shell{display:grid;grid-template-columns:82px 290px minmax(0,1fr);min-height:650px}.czs-client-tools{background:var(--cz);padding:10px 6px;display:flex;flex-direction:column;gap:5px}.czs-client-tools button{border:0;background:transparent;color:#c9dadd;border-radius:10px;padding:12px 4px;cursor:pointer}.czs-client-tools button:hover{background:rgba(255,255,255,.08)}.czs-client-tools button.is-active{background:#fff;color:var(--cz)}.czs-client-tools b{display:block;font-size:19px;line-height:1}.czs-client-tools small{display:block;font-size:10px;margin-top:5px;font-weight:650}











.czs-client-side{border-right:1px solid var(--line);background:#fff;padding:20px;overflow:auto;max-height:650px}.czs-panel-head{margin-bottom:15px}.czs-panel-head h3{font-size:19px;margin:0 0 4px}.czs-panel-head p{font-size:12px;line-height:1.45;color:var(--muted);margin:0}.czs-field-label{display:block;font-size:11px;font-weight:750;color:#536a70;margin:12px 0 5px}.czs-client-side textarea,.czs-client-side input[type=text],.czs-client-side input[type=search],.czs-client-side input[type=number]{width:100%;border:1px solid #cfdadd;border-radius:9px;padding:10px;background:#fff}.czs-upload-main,.czs-add-text{width:100%;border:0;border-radius:9px;background:var(--cz);color:#fff;padding:11px;font-weight:750;cursor:pointer}.czs-tip{margin-top:16px;border:1px solid #dce7e9;background:#f6f9f9;border-radius:10px;padding:11px;display:flex;flex-direction:column;gap:3px}.czs-tip b{font-size:11px}.czs-tip span{font-size:10px;color:var(--muted);line-height:1.4}.czs-text-properties hr{border:0;border-top:1px solid var(--line);margin:18px 0}.czs-text-properties h4{margin:0 0 9px}.czs-control-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.czs-control-row label{font-size:10px;color:var(--muted)}.czs-control-row input{margin-top:4px}.czs-edit-color{width:100%;height:39px;border:1px solid var(--line);border-radius:8px;padding:3px}.czs-edit-rotation{width:100%}











.czs-client-work{min-width:0;background:var(--bg);display:grid;grid-template-rows:48px 1fr 38px}.czs-work-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #e4eaea;background:#fafcfc}.czs-area-label{font-size:11px;color:var(--muted);font-weight:650}.czs-selection-actions{display:flex;gap:5px}.czs-selection-actions button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 9px;color:var(--cz);font-size:10px;font-weight:700;cursor:pointer}.czs-selection-actions .czs-delete{color:#9b3636}.czs-canvas-stage{display:flex;align-items:center;justify-content:center;padding:32px;min-width:0}.czs-canvas-wrap{width:min(950px,100%)}.czs-canvas{position:relative;width:100%;background:#fff;border:1px solid #cbd8da;box-shadow:0 10px 30px rgba(22,54,60,.08);overflow:hidden;background-image:linear-gradient(rgba(168,190,195,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(168,190,195,.16) 1px,transparent 1px);background-size:5% 11.111%;touch-action:none}.czs-canvas-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#718388;text-align:center}.czs-canvas-empty b{font-size:15px}.czs-canvas-empty span{font-size:11px;margin-top:5px}.czs-client-help{text-align:center;font-size:10px;color:#7b8d91;padding-top:9px}











.czs-design-item{position:absolute;touch-action:none;user-select:none;z-index:3;min-width:35px;transform-origin:center}.czs-design-item img{display:block;width:100%;height:auto;pointer-events:none}.czs-design-photo img{border-radius:1px}.czs-text-content{width:100%;line-height:1.08;text-align:center;font-weight:700;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none}.czs-design-item.is-selected{outline:2px solid #1f79d0;outline-offset:3px}.czs-resize-handle{display:none;position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;border:3px solid #fff;background:#1f79d0;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:nwse-resize}.czs-design-item.is-selected .czs-resize-handle{display:block}











.czs-clip-search{margin-bottom:10px}.czs-clip-cats{display:flex;gap:5px;overflow:auto;padding-bottom:9px}.czs-clip-cats button{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 9px;font-size:10px;cursor:pointer}.czs-clip-cats button.is-active{background:var(--cz);color:#fff;border-color:var(--cz)}.czs-clip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.czs-clip-card{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px;cursor:pointer;min-width:0}.czs-clip-card:hover{border-color:var(--cz)}.czs-clip-card img{width:100%;aspect-ratio:1;object-fit:contain;display:block}.czs-clip-card span{display:block;font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.czs-clip-empty,.czs-empty-panel{padding:22px 8px;text-align:center;color:var(--muted);font-size:11px;border:1px dashed var(--line);border-radius:9px}.czs-layer-client-list{display:flex;flex-direction:column;gap:6px}.czs-layer-client-list button{width:100%;display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px;text-align:left;color:#405b61;cursor:pointer}.czs-layer-client-list button.is-active{border-color:var(--cz);box-shadow:0 0 0 1px var(--cz)}.czs-layer-client-list button span{width:25px;height:25px;border-radius:6px;background:#eef3f3;display:grid;place-items:center;color:var(--cz)}.czs-layer-client-list b{font-size:11px}.czs-template-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.czs-template{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px;cursor:pointer;text-align:left}.czs-template-thumb{aspect-ratio:1.25;background:#edf2f3;border-radius:6px;overflow:hidden;display:grid;place-items:center;color:#82969a;font-size:10px}.czs-template-thumb img{width:100%;height:100%;object-fit:cover}.czs-template b{display:block;font-size:10px;margin-top:5px}











.czs-editor.is-preview .czs-client-tools,.czs-editor.is-preview .czs-client-side,.czs-editor.is-preview .czs-work-topbar,.czs-editor.is-preview .czs-client-help{display:none}.czs-editor.is-preview .czs-client-shell{grid-template-columns:1fr}.czs-editor.is-preview .czs-client-work{grid-template-rows:1fr}.czs-editor.is-preview .czs-canvas-stage{padding:48px}.czs-editor.is-preview .czs-canvas{background-image:none}.czs-editor.is-preview .czs-canvas-empty{display:none}











.czs-mobile-footer{display:none}.czs-error{max-width:1200px;margin:25px auto;padding:16px;border:1px solid #e2c9c9;background:#fff4f4;border-radius:10px}











@media(max-width:900px){.czs-editor{margin:0;border-radius:0;border-left:0;border-right:0}.czs-client-head{grid-template-columns:1fr auto;height:64px;padding:0 12px}.czs-head-history{display:none}.czs-head-actions{display:none}.czs-client-shell{grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto 1fr;min-height:calc(100vh - 126px)}.czs-client-tools{grid-row:1/3}.czs-client-side{grid-column:2;grid-row:1;max-height:235px;border-right:0;border-bottom:1px solid var(--line);padding:14px;overflow:auto}.czs-client-work{grid-column:2;grid-row:2;min-height:430px}.czs-canvas-stage{padding:18px 12px}.czs-work-topbar{height:42px;padding:0 10px}.czs-client-help{display:none}.czs-clip-grid{grid-template-columns:repeat(4,1fr)}.czs-mobile-footer{display:grid;grid-template-columns:1fr 1.5fr;gap:8px;position:sticky;bottom:0;z-index:10;background:#fff;border-top:1px solid var(--line);padding:9px 10px}.czs-editor.is-preview .czs-client-shell{display:block}.czs-editor.is-preview .czs-client-work{min-height:calc(100vh - 126px)}.czs-editor.is-preview .czs-canvas-stage{padding:18px 10px}}











@media(max-width:520px){.czs-head-product strong{font-size:15px}.czs-head-product span{font-size:10px}.czs-client-shell{grid-template-columns:58px minmax(0,1fr)}.czs-client-tools button{padding:10px 2px}.czs-client-tools b{font-size:17px}.czs-client-tools small{font-size:9px}.czs-client-side{max-height:220px}.czs-clip-grid{grid-template-columns:repeat(3,1fr)}.czs-canvas-stage{padding:12px 8px}.czs-area-label{font-size:9px}}























/* v0.17.0 · Editor cliente Pro */











.czs-client-shell{grid-template-columns:78px 270px minmax(0,1fr);min-height:680px}











.czs-client-side{max-height:680px;padding:18px}











.czs-client-work{grid-template-rows:52px 1fr 42px}











.czs-canvas-stage{position:relative;padding:42px 46px}











.czs-canvas-wrap{width:min(880px,92%);transition:opacity .2s ease}











.czs-canvas{border:2px solid #8fa9ae;border-radius:2px;box-shadow:0 18px 48px rgba(22,54,60,.10);background-size:5% 11.111%;image-rendering:auto}











.czs-canvas:before{content:"ÁREA DE IMPRESIÓN";position:absolute;left:10px;top:8px;z-index:1;font-size:9px;font-weight:800;letter-spacing:.08em;color:rgba(0,53,63,.36);pointer-events:none}











.czs-safe-zone{position:absolute;inset:4.5%;border:1px dashed rgba(0,53,63,.24);pointer-events:none;z-index:1}











.czs-canvas-empty{z-index:2}.czs-canvas-empty b{font-size:17px}.czs-canvas-empty span{font-size:12px}











.czs-design-item{z-index:4}.czs-design-item img{image-rendering:auto;max-width:none}.czs-design-item.is-selected{outline:2px solid #1677d2;outline-offset:4px;filter:drop-shadow(0 3px 7px rgba(22,119,210,.12))}











.czs-work-topbar{padding:0 16px;gap:12px}.czs-selection-actions{align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.czs-selection-actions button{min-height:30px;padding:6px 10px;font-size:10px}.czs-selection-actions .czs-rotate-left,.czs-selection-actions .czs-rotate-right{font-weight:800}.czs-selection-actions .czs-center-item{min-width:58px}











.czs-quality-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 9px;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}.czs-quality-badge.good{background:#e7f6ed;color:#1f6d42}.czs-quality-badge.medium{background:#fff4d9;color:#8a6416}.czs-quality-badge.low{background:#fde9e9;color:#9e3535}











.czs-print-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2b8f68;margin-right:4px}.czs-client-help{font-size:10px;display:flex;align-items:center;justify-content:center;gap:2px}











.czs-3d-stage{position:absolute;inset:24px 32px 24px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at 50% 35%,#fff 0,#f5f8f8 60%,#eaf0f1 100%);border:1px solid #d5e0e2;border-radius:16px;overflow:hidden}.czs-3d-stage[hidden]{display:none!important}.czs-model-viewer{width:100%;height:100%;min-height:500px;background:transparent}.czs-3d-hint{position:absolute;bottom:14px;background:rgba(255,255,255,.9);border:1px solid #dce5e7;border-radius:999px;padding:7px 12px;font-size:10px;color:#5d7175;box-shadow:0 5px 16px rgba(0,0,0,.05)}











.czs-editor.is-3d .czs-client-tools,.czs-editor.is-3d .czs-client-side{opacity:.5;pointer-events:none}.czs-editor.is-3d .czs-area-label:after{content:" · Vista 3D";font-weight:800;color:#00353f}.czs-editor.is-3d .czs-client-help{visibility:hidden}











.czs-template-list:empty{display:none}























@media(max-width:1100px){.czs-client-shell{grid-template-columns:70px 245px minmax(0,1fr)}.czs-canvas-stage{padding:30px 24px}.czs-canvas-wrap{width:min(820px,96%)}.czs-selection-actions .czs-center-item,.czs-selection-actions .czs-send-back,.czs-selection-actions .czs-bring-front{display:none}.czs-quality-badge{font-size:8px}}











@media(max-width:900px){.czs-client-shell{grid-template-columns:64px minmax(0,1fr);min-height:calc(100vh - 126px)}.czs-client-side{max-height:210px}.czs-canvas-stage{padding:22px 12px}.czs-canvas-wrap{width:98%}.czs-selection-actions{gap:4px}.czs-selection-actions button{padding:5px 7px}.czs-selection-actions .czs-duplicate{display:none}.czs-quality-badge{display:none!important}.czs-3d-stage{inset:10px}.czs-model-viewer{min-height:400px}}











@media(max-width:520px){.czs-work-topbar{padding:0 8px}.czs-selection-actions .czs-rotate-left,.czs-selection-actions .czs-rotate-right{font-size:0}.czs-selection-actions .czs-rotate-left:after{content:"↶";font-size:15px}.czs-selection-actions .czs-rotate-right:after{content:"↷";font-size:15px}.czs-canvas-stage{padding:14px 6px}.czs-canvas:before{font-size:7px}.czs-safe-zone{inset:4%}}























/* v0.18.0 · Cliparts + plantillas + selector 2D/3D */











.czs-clip-cats{display:flex;flex-wrap:wrap;gap:6px;overflow:visible;padding-bottom:12px}











.czs-clip-cats button{max-width:100%;white-space:normal;line-height:1.15;padding:7px 10px;color:#35545a;min-width:auto}











.czs-clip-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}











.czs-clip-card{padding:9px;min-height:112px;display:flex;flex-direction:column;justify-content:space-between}











.czs-clip-card img{height:72px;aspect-ratio:auto;object-fit:contain}











.czs-clip-card span{font-size:10px;text-align:center}











.czs-template-list{grid-template-columns:1fr;gap:11px}











.czs-template{padding:8px;border-radius:12px;transition:.15s ease}











.czs-template:hover{border-color:#00353f;box-shadow:0 5px 16px rgba(0,53,63,.08)}











.czs-template-thumb{aspect-ratio:20/9;background:#fff;border:1px solid #dce6e7;position:relative}











.czs-template b{font-size:11px;margin-top:7px}.czs-template small{display:block;color:#6f8387;font-size:9px;margin-top:2px}











.czs-template-mini-canvas{position:absolute;inset:0;overflow:hidden;background:linear-gradient(135deg,#fff,#f3f7f7)}











.czs-template-mini-canvas img,.czs-template-mini-canvas span{position:absolute;display:block;transform-origin:center}











.czs-template-mini-canvas img{height:auto;object-fit:contain}











.czs-template-mini-canvas .is-text{font-weight:800;color:#17363c;font-size:7px;line-height:1.05;text-align:center;white-space:nowrap;overflow:hidden}











.czs-view-switch{display:inline-flex;border:1px solid #d6e1e3;border-radius:11px;background:#f5f8f8;padding:3px;gap:2px}











.czs-view-switch button{border:0;background:transparent;border-radius:8px;padding:9px 13px;font-size:11px;font-weight:800;color:#587075;cursor:pointer}











.czs-view-switch button.is-active{background:#00353f;color:#fff;box-shadow:0 2px 8px rgba(0,53,63,.13)}











.czs-view-switch button:disabled{opacity:.38;cursor:not-allowed}











.czs-editor.is-3d .czs-selection-actions{visibility:hidden}











@media(max-width:1100px){.czs-clip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.czs-view-switch button{padding:8px 10px}}























/* v0.19: biblioteca de cliparts por categorías y carga diferida */











.czs-clip-cats{display:flex!important;flex-wrap:wrap!important;gap:7px!important;overflow:visible!important;margin:12px 0 14px!important}











.czs-clip-cats button{width:auto!important;min-width:0!important;height:auto!important;padding:8px 11px!important;border-radius:999px!important;white-space:nowrap!important;font-size:12px!important}











.czs-load-more{width:100%;margin-top:12px;padding:11px;border:1px solid #d7e1e3;border-radius:10px;background:#fff;font-weight:700;cursor:pointer}























/* v0.20: color editable para SVG y taza 3D paramétrica */











.czs-clip-color-control{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:7px;padding:4px 7px;font-size:10px;font-weight:700;color:var(--cz)}











.czs-clip-color-control[hidden]{display:none!important}.czs-clip-color{width:28px;height:22px;border:0;padding:0;background:transparent;cursor:pointer}











.czs-parametric-mug-wrap{width:100%;height:100%;min-height:500px;touch-action:none}.czs-parametric-mug-wrap[hidden]{display:none!important}.czs-parametric-mug-canvas{width:100%;height:100%;display:block}.czs-model-viewer[hidden]{display:none!important}











@media(max-width:900px){.czs-parametric-mug-wrap{min-height:400px}.czs-clip-color-control{font-size:0;padding:3px}.czs-clip-color{width:26px;height:24px}}



































/* v0.21 · 3D en vivo + sesión temporal */











.czs-canvas-stage{align-items:stretch;justify-content:center;gap:18px;padding:30px 28px}











.czs-canvas-wrap{flex:1 1 auto;width:auto;max-width:920px;display:flex;align-items:center}











.czs-3d-stage{position:relative;inset:auto;flex:0 0 300px;min-width:260px;max-width:330px;height:auto;min-height:360px;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;background:#fff;border:1px solid #d5e0e2;border-radius:14px;overflow:hidden;box-shadow:0 10px 28px rgba(22,54,60,.07)}











.czs-3d-head{height:45px;display:flex;align-items:center;gap:8px;padding:0 10px 0 14px;border-bottom:1px solid #e1e8e9;background:#fafcfc}.czs-3d-head strong{font-size:12px;margin-right:auto}.czs-3d-head button{border:1px solid #d8e2e4;background:#fff;color:#00353f;border-radius:8px;padding:6px 9px;font-size:10px;font-weight:750;cursor:pointer}











.czs-3d-viewport{position:relative;flex:1;min-height:285px;background:radial-gradient(circle at 50% 35%,#fff 0,#f5f8f8 62%,#eaf0f1 100%)}











.czs-parametric-mug-wrap,.czs-model-viewer{width:100%;height:100%;min-height:285px}.czs-3d-hint{position:static;margin:8px auto 10px;box-shadow:none;font-size:9px;padding:5px 9px}











.czs-3d-stage.is-expanded{position:fixed;z-index:999999;left:4vw;right:4vw;top:4vh;bottom:4vh;max-width:none;min-width:0;min-height:0;height:auto;flex:none;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.30)}











.czs-3d-stage.is-expanded:before{content:"";position:fixed;inset:0;background:rgba(10,25,28,.55);z-index:-1}.czs-3d-stage.is-expanded .czs-3d-viewport{min-height:0}.czs-3d-stage.is-expanded .czs-parametric-mug-wrap,.czs-3d-stage.is-expanded .czs-model-viewer{min-height:0;height:100%}.czs-3d-stage.is-expanded .czs-3d-head{height:54px}.czs-3d-open{overflow:hidden}











.czs-mobile-footer{grid-template-columns:1fr}











@media(max-width:1180px){.czs-canvas-stage{gap:12px;padding:24px 16px}.czs-3d-stage{flex-basis:250px;min-width:230px}.czs-3d-head{padding-left:10px}.czs-3d-head strong{font-size:11px}}











@media(max-width:900px){.czs-canvas-stage{display:block;padding:18px 10px}.czs-canvas-wrap{width:100%;max-width:none}.czs-3d-stage{margin-top:14px;max-width:none;width:100%;min-width:0;min-height:300px;height:320px}.czs-3d-viewport,.czs-parametric-mug-wrap,.czs-model-viewer{min-height:240px}.czs-3d-stage.is-expanded{left:2vw;right:2vw;top:2vh;bottom:2vh;height:auto}}



































/* v0.22 · Editor arriba + 3D abajo + fuentes + panel Diseño */











.czs-canvas-stage{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:18px;padding:30px 28px}











.czs-canvas-wrap{width:min(940px,100%);max-width:940px;flex:none;display:flex;align-items:center}











.czs-3d-stage{width:min(940px,100%);max-width:940px;flex:none;min-width:0;height:330px;min-height:0;margin:0;align-self:center}











.czs-3d-viewport{min-height:0}.czs-parametric-mug-wrap,.czs-model-viewer{min-height:0;height:100%}











.czs-3d-stage.is-collapsed{height:46px}.czs-3d-stage.is-collapsed .czs-3d-viewport,.czs-3d-stage.is-collapsed .czs-3d-hint{display:none!important}











.czs-3d-head .czs-toggle-3d{min-width:58px}











.czs-canvas.is-transparent{background-color:transparent!important;background-image:linear-gradient(45deg,#eef2f2 25%,transparent 25%),linear-gradient(-45deg,#eef2f2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f2 75%),linear-gradient(-45deg,transparent 75%,#eef2f2 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}











.czs-design-item.is-multi-selected{outline:2px dashed #1677d2;outline-offset:3px}











.czs-text-content{white-space:pre-wrap;width:100%;min-width:100%;}











.czs-text-properties select,.czs-text-properties input[type=number]{width:100%}











.czs-font-preview{margin:8px 0 12px;padding:12px;border:1px solid #dce5e7;border-radius:9px;background:#fff;text-align:center;font-size:22px;overflow:hidden}











.czs-text-style-row{display:grid;grid-template-columns:42px 42px 1fr;gap:7px;margin:10px 0}.czs-text-style-row button,.czs-text-style-row select{min-height:36px;border:1px solid #d7e1e3;border-radius:8px;background:#fff;color:#17363c}.czs-text-style-row button.is-active{background:#00353f;color:#fff;border-color:#00353f}











.czs-design-settings{padding:12px;border:1px solid #dce5e7;border-radius:11px;background:#fff}.czs-bg-row{display:grid;grid-template-columns:54px 1fr;gap:8px;align-items:center}.czs-bg-row input[type=color]{width:54px;height:38px;border:1px solid #d7e1e3;border-radius:8px;background:#fff;padding:3px}.czs-bg-row button{height:38px;border:1px solid #d7e1e3;border-radius:8px;background:#fff;font-weight:700;color:#17363c}.czs-check-line{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:12px}.czs-design-actions{display:grid;gap:8px;margin:12px 0}.czs-design-actions button{width:100%;min-height:40px;border:1px solid #d7e1e3;border-radius:9px;background:#fff;font-weight:750;color:#17363c;cursor:pointer}.czs-design-actions .danger{color:#a12c2c;border-color:#efcece;background:#fffafa}











@media(max-width:900px){.czs-canvas-stage{padding:18px 10px}.czs-canvas-wrap,.czs-3d-stage{width:100%;max-width:none}.czs-3d-stage{height:300px}.czs-3d-stage.is-collapsed{height:46px}}



































/* v0.23 · Recorte de fotos + 3D ampliado robusto + transparencia sobre producto */











.czs-selection-actions .czs-crop-photo{color:#075763;background:#f5fbfb;border-color:#bdd5d9}











.czs-selection-actions .czs-crop-photo[hidden]{display:none!important}











.czs-design-photo .czs-photo-viewport{position:relative;width:100%;overflow:hidden;background:transparent;pointer-events:none}











.czs-design-photo .czs-photo-viewport img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;transform-origin:center center;pointer-events:none}











.czs-3d-stage.is-expanded{width:auto!important;max-width:none!important;height:auto!important;margin:0!important;inset:3vh 3vw!important;z-index:2147483000!important;overflow:hidden!important;background:#fff!important}











.czs-3d-stage.is-expanded:before{z-index:-1}.czs-3d-stage.is-expanded .czs-3d-viewport{flex:1!important;min-height:0!important}.czs-3d-stage.is-expanded .czs-parametric-mug-wrap,.czs-3d-stage.is-expanded .czs-model-viewer{height:100%!important;min-height:0!important}











.czs-crop-open{overflow:hidden!important}.czs-crop-overlay{position:fixed;inset:0;z-index:2147483640;background:rgba(8,22,25,.72);display:flex;align-items:center;justify-content:center;padding:24px}.czs-crop-dialog{width:min(980px,96vw);max-height:94vh;background:#fff;border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto minmax(260px,1fr) auto auto;box-shadow:0 28px 90px rgba(0,0,0,.34)}











.czs-crop-head{display:flex;align-items:center;gap:16px;padding:15px 18px;border-bottom:1px solid #dde6e8}.czs-crop-head>div{min-width:0}.czs-crop-head strong{display:block;font-size:16px;color:#17363c}.czs-crop-head span{display:block;margin-top:3px;font-size:11px;color:#6c8085}.czs-crop-x{margin-left:auto;width:36px;height:36px;border:1px solid #d9e3e5;border-radius:9px;background:#fff;color:#17363c;cursor:pointer}











.czs-crop-work{min-height:0;overflow:hidden;padding:24px;background:#20282a;display:flex;align-items:center;justify-content:center}.czs-crop-frame{position:relative;width:min(760px,88%);max-height:58vh;overflow:hidden;background:#fff;box-shadow:0 0 0 9999px rgba(0,0,0,.18);touch-action:none;cursor:grab}.czs-crop-frame:active{cursor:grabbing}.czs-crop-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;transform-origin:center;user-select:none;pointer-events:none}.czs-crop-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,transparent 33.15%,rgba(255,255,255,.7) 33.33%,transparent 33.5%,transparent 66.5%,rgba(255,255,255,.7) 66.66%,transparent 66.85%),linear-gradient(to bottom,transparent 33.15%,rgba(255,255,255,.7) 33.33%,transparent 33.5%,transparent 66.5%,rgba(255,255,255,.7) 66.66%,transparent 66.85%);border:2px solid #fff}











.czs-crop-controls{display:grid;grid-template-columns:minmax(150px,220px) minmax(220px,1fr) auto;gap:14px;align-items:end;padding:14px 18px;border-top:1px solid #dde6e8}.czs-crop-controls label{font-size:11px;font-weight:700;color:#536a70}.czs-crop-controls select,.czs-crop-controls input{width:100%;margin-top:5px}.czs-crop-controls select{height:38px;border:1px solid #cfdadd;border-radius:8px;background:#fff;padding:0 9px}.czs-crop-controls input[type=range]{accent-color:#00353f}.czs-crop-reset{height:38px;border:1px solid #d4dfe1;border-radius:8px;background:#fff;color:#17363c;font-weight:700;cursor:pointer}.czs-crop-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px}.czs-crop-actions button{min-height:40px;padding:0 16px;border-radius:9px;font-weight:750;cursor:pointer}.czs-crop-cancel{border:1px solid #d4dfe1;background:#fff;color:#17363c}.czs-crop-apply{border:1px solid #00353f;background:#00353f;color:#fff}











@media(max-width:700px){.czs-crop-overlay{padding:8px}.czs-crop-dialog{width:100%;max-height:97vh}.czs-crop-work{padding:12px}.czs-crop-frame{width:96%;max-height:48vh}.czs-crop-controls{grid-template-columns:1fr;gap:8px}.czs-crop-actions{padding-top:4px}.czs-crop-actions button{flex:1}.czs-3d-stage.is-expanded{inset:1vh 1vw!important}}























/* v0.24 · Recorte libre estilo Photoshop */











.czs-crop-image-stage{position:relative;display:inline-block;max-width:min(900px,92%);max-height:58vh;line-height:0;touch-action:none;user-select:none;cursor:crosshair}











.czs-crop-image-stage>img{display:block;max-width:100%;max-height:58vh;width:auto;height:auto;object-fit:contain;pointer-events:none;user-select:none}











.czs-crop-box{position:absolute;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 0 9999px rgba(0,0,0,.52);cursor:move;touch-action:none;min-width:16px;min-height:16px}











.czs-crop-box .czs-crop-grid{position:absolute;inset:0;border:0;background-image:linear-gradient(to right,transparent 33.15%,rgba(255,255,255,.7) 33.33%,transparent 33.5%,transparent 66.5%,rgba(255,255,255,.7) 66.66%,transparent 66.85%),linear-gradient(to bottom,transparent 33.15%,rgba(255,255,255,.7) 33.33%,transparent 33.5%,transparent 66.5%,rgba(255,255,255,.7) 66.66%,transparent 66.85%);pointer-events:none}











.czs-crop-handle{position:absolute;width:16px;height:16px;background:#fff;border:2px solid #00353f;border-radius:50%;z-index:4}











.czs-crop-handle.nw{left:-9px;top:-9px;cursor:nwse-resize}.czs-crop-handle.ne{right:-9px;top:-9px;cursor:nesw-resize}.czs-crop-handle.sw{left:-9px;bottom:-9px;cursor:nesw-resize}.czs-crop-handle.se{right:-9px;bottom:-9px;cursor:nwse-resize}











.czs-crop-help{align-self:center;font-size:11px;color:#61777c}.czs-crop-help b,.czs-crop-help span{display:block}.czs-crop-help span{margin-top:3px}











@media(max-width:700px){.czs-crop-image-stage,.czs-crop-image-stage>img{max-height:48vh}.czs-crop-handle{width:20px;height:20px}.czs-crop-handle.nw{left:-11px;top:-11px}.czs-crop-handle.ne{right:-11px;top:-11px}.czs-crop-handle.sw{left:-11px;bottom:-11px}.czs-crop-handle.se{right:-11px;bottom:-11px}}



































/* v0.25 - acciones de fotografía */











.czs-photo-actions-panel{display:grid;gap:9px;margin:14px 0}











.czs-photo-actions-panel button{width:100%;border:1px solid #d4e0e2;background:#fff;color:#17363c;border-radius:10px;padding:11px 12px;font-weight:700;cursor:pointer;text-align:left}











.czs-photo-actions-panel button:hover{border-color:#00353f;background:#f5f9f9}











.czs-photo-actions-panel .czs-panel-remove-bg{background:#00353f;color:#fff;border-color:#00353f}











.czs-photo-actions-panel button:disabled,.czs-remove-bg:disabled{opacity:.55;cursor:wait}











.czs-tip-muted{opacity:.72}























/* v0.26.1 · Transparencia real en fotos sin fondo */











.czs-design-photo[data-background-removed="1"] .czs-photo-viewport{background:transparent!important}











.czs-bg-removed-status{margin-top:10px;padding:9px 10px;border:1px solid #cfe6d8;border-radius:9px;background:#f1fbf5;color:#235b3d;font-size:12px;font-weight:700}























/* v0.27 · Refinado manual del fondo */











.czs-photo-actions-panel .czs-panel-refine-bg{background:#f4fafa;border-color:#b9d5d9;color:#00353f}











.czs-bg-refine-open{overflow:hidden!important}











.czs-bg-refine-overlay{position:fixed;inset:0;z-index:2147483642;background:rgba(8,22,25,.76);display:flex;align-items:center;justify-content:center;padding:18px}











.czs-bg-refine-dialog{width:min(1100px,97vw);max-height:96vh;background:#fff;border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto minmax(300px,1fr) auto auto auto;box-shadow:0 28px 90px rgba(0,0,0,.38)}











.czs-bg-refine-head{display:flex;align-items:center;gap:16px;padding:15px 18px;border-bottom:1px solid #dde6e8}.czs-bg-refine-head>div{min-width:0}.czs-bg-refine-head strong{display:block;font-size:16px;color:#17363c}.czs-bg-refine-head span{display:block;margin-top:3px;font-size:11px;color:#6c8085}.czs-bg-refine-x{margin-left:auto;width:36px;height:36px;border:1px solid #d9e3e5;border-radius:9px;background:#fff;color:#17363c;cursor:pointer}











.czs-bg-refine-work{min-height:0;overflow:auto;padding:18px;background:#1d2729;display:flex;align-items:center;justify-content:center}











.czs-bg-refine-stage{position:relative;display:inline-block;max-width:100%;max-height:60vh;background-color:#fff;background-image:linear-gradient(45deg,#e4e9ea 25%,transparent 25%),linear-gradient(-45deg,#e4e9ea 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4e9ea 75%),linear-gradient(-45deg,transparent 75%,#e4e9ea 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;line-height:0;cursor:crosshair;touch-action:none;overflow:hidden}











.czs-bg-refine-stage canvas{display:block;max-width:min(900px,92vw);max-height:60vh;width:auto;height:auto;touch-action:none}











.czs-bg-brush-ring{position:absolute;transform:translate(-50%,-50%);border:1.5px solid #00353f;box-shadow:0 0 0 1px rgba(255,255,255,.9);border-radius:50%;pointer-events:none;z-index:3}











.czs-bg-refine-controls{display:grid;grid-template-columns:auto minmax(180px,1fr) minmax(180px,1fr) auto auto;gap:12px;align-items:end;padding:13px 18px;border-top:1px solid #dde6e8}.czs-bg-refine-controls label{font-size:11px;font-weight:700;color:#526a70}.czs-bg-refine-controls input[type=range]{display:block;width:100%;margin-top:8px;accent-color:#00353f}.czs-bg-refine-controls output{font-size:10px;color:#72868a}.czs-bg-tool-group{display:flex;gap:5px}.czs-bg-tool-group button,.czs-bg-auto-clean,.czs-bg-refine-reset{height:38px;border:1px solid #d3dfe1;border-radius:8px;background:#fff;color:#17363c;font-weight:750;cursor:pointer;padding:0 11px}.czs-bg-tool-group button.is-active{background:#00353f;border-color:#00353f;color:#fff}.czs-bg-auto-clean{background:#f4fafa}.czs-bg-refine-note{padding:8px 18px 0;color:#60767b;font-size:11px}.czs-bg-refine-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px}.czs-bg-refine-actions button{min-height:40px;padding:0 16px;border-radius:9px;font-weight:750;cursor:pointer}.czs-bg-refine-cancel{border:1px solid #d4dfe1;background:#fff;color:#17363c}.czs-bg-refine-apply{border:1px solid #00353f;background:#00353f;color:#fff}











@media(max-width:800px){.czs-bg-refine-overlay{padding:6px}.czs-bg-refine-dialog{width:100%;max-height:98vh;grid-template-rows:auto minmax(240px,1fr) auto auto auto}.czs-bg-refine-work{padding:8px}.czs-bg-refine-stage canvas{max-height:48vh;max-width:94vw}.czs-bg-refine-controls{grid-template-columns:1fr 1fr;gap:8px}.czs-bg-tool-group{grid-column:1/-1}.czs-bg-auto-clean,.czs-bg-refine-reset{width:100%}.czs-bg-refine-actions button{flex:1}}



































/* v0.32 · Ventana de progreso para producción y quitar fondo */











.czs-progress-open{overflow:hidden!important}











.czs-progress-overlay{position:fixed;inset:0;z-index:2147483646;background:rgba(8,22,25,.72);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}











.czs-progress-dialog{width:min(460px,92vw);background:#fff;border-radius:18px;padding:28px 26px 24px;text-align:center;box-shadow:0 28px 90px rgba(0,0,0,.32);color:#17363c}











.czs-progress-spinner{width:44px;height:44px;margin:0 auto 16px;border:4px solid #dbe7e9;border-top-color:#00353f;border-radius:50%;animation:czs-progress-spin .85s linear infinite}











.czs-progress-title{display:block;font-size:20px;line-height:1.25}.czs-progress-message{margin-top:8px;font-size:14px;color:#526b70;min-height:20px}











.czs-progress-track{height:12px;margin-top:20px;background:#e8eff0;border-radius:999px;overflow:hidden}.czs-progress-track span{display:block;width:0;height:100%;background:#00353f;border-radius:inherit;transition:width .18s ease}











.czs-progress-percent{margin-top:8px;font-size:24px;font-weight:800;color:#00353f}.czs-progress-note{margin-top:8px;font-size:11px;color:#809195}











@keyframes czs-progress-spin{to{transform:rotate(360deg)}}











@media(max-width:600px){.czs-progress-overlay{padding:12px}.czs-progress-dialog{padding:24px 18px 20px}.czs-progress-title{font-size:18px}.czs-progress-percent{font-size:22px}}























/* v0.33.0 · huecos de foto de plantillas */











.czs-photo-viewport.is-placeholder{min-height:90px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#f4f8f8,#f4f8f8 10px,#eaf2f2 10px,#eaf2f2 20px);border:2px dashed #00a0a8;box-sizing:border-box}











.czs-photo-placeholder-button{width:100%;height:100%;min-height:90px;border:0;background:transparent;color:#006c73;font-weight:800;font-size:15px;cursor:pointer}











.czs-design-item[data-locked="1"]>.czs-resize-handle{display:none!important}











.czs-design-item[data-locked="1"]{cursor:default}











.czs-template-mini-canvas .is-photo-placeholder{border:1px dashed #9eb2b6;background:#f7fafa;color:#60787d;font-size:7px;font-weight:700;text-align:center;padding:5px 2px;border-radius:3px;box-sizing:border-box}











/* v0.34.2: fidelidad de plantillas Studio en el editor público */











.czs-design-background{min-width:0!important;pointer-events:none;overflow:hidden}











.czs-design-background img{width:100%!important;height:100%!important;max-width:none!important}











.czs-design-photo.is-circle .czs-photo-viewport{border-radius:50%}











.czs-design-photo.is-circle .czs-photo-viewport img{border-radius:0!important}























/* v0.34.3: geometría exacta de marcos de plantilla */











.czs-canvas-empty[hidden]{display:none!important}











.czs-design-photo[style*="height"] .czs-photo-viewport{height:100%;min-height:0}











.czs-design-photo[style*="height"] .czs-photo-placeholder-button{height:100%;min-height:0}























/* v0.34.9: todo el marco vacío de plantilla abre el selector de foto */











.czs-design-photo.czs-photo-upload-target{cursor:pointer}











.czs-design-photo.czs-photo-upload-target .czs-photo-viewport{pointer-events:none}























/* v0.35.2: en marcos rellenados el gesto arrastra solo la foto interior. */











.czs-design-photo[data-locked="1"]:not(.czs-photo-upload-target){cursor:grab}











.czs-design-photo[data-locked="1"].is-panning-photo{cursor:grabbing}











.czs-design-photo[data-locked="1"] .czs-photo-viewport img{object-fit:cover!important}























/* v0.35.4 · edición real de la foto dentro de marcos de plantilla */











.czs-design-photo[data-locked="1"][data-placeholder="0"]{cursor:grab}











.czs-design-photo[data-locked="1"].is-panning-photo{cursor:grabbing}











.czs-frame-photo-controls{margin:14px 0;padding:14px;border:1px solid #d7e2e4;border-radius:12px;background:#f7fafb;display:grid;gap:10px}











.czs-frame-photo-controls>b{font-size:14px}











.czs-frame-photo-controls>span{font-size:13px;line-height:1.4;color:#60747a}











.czs-frame-photo-controls label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:13px;font-weight:700}











.czs-frame-photo-controls input[type="range"]{width:100%}











.czs-frame-photo-controls output{min-width:46px;text-align:right;font-variant-numeric:tabular-nums}











.czs-frame-photo-controls button{border:1px solid #cbdadd;background:#fff;border-radius:9px;padding:9px 10px;font-weight:700;cursor:pointer}























/* v0.35.5: el marco es una mascara fija; la foto interna nunca sale fuera */











.czs-client-object.photo{overflow:hidden!important;position:absolute}.czs-client-object.photo>img{position:absolute!important;left:50%!important;top:50%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;pointer-events:none!important}.czs-client-object.photo.circle{overflow:hidden!important}











/* v0.35.6: el marco es la mascara; la imagen interior conserva siempre su rectangulo original. */











.czs-design-photo .czs-photo-viewport{overflow:hidden!important}











.czs-design-photo.is-circle .czs-photo-viewport{border-radius:50%!important}











.czs-design-photo.is-circle .czs-photo-viewport img{border-radius:0!important;clip-path:none!important}











/* v0.35.7: miniatura fiel + acciones de foto en marco */











.czs-template-mini-canvas .is-bg,.czs-template-mini-canvas .is-photo,.czs-template-mini-canvas .is-art{position:absolute;display:block;overflow:hidden;box-sizing:border-box;transform-origin:center}











.czs-template-mini-canvas .is-bg img,.czs-template-mini-canvas .is-photo img,.czs-template-mini-canvas .is-art img{width:100%;height:100%;display:block;object-fit:cover}











.czs-template-mini-canvas .is-photo-placeholder{display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}











.czs-frame-file-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.czs-frame-file-actions button{min-height:42px;border:1px solid var(--line);border-radius:9px;background:#fff;font-weight:800;cursor:pointer}.czs-frame-file-actions .danger{color:#a52828;border-color:#eccaca}











.czs-template-filters{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;margin-bottom:4px;scrollbar-width:thin}.czs-template-filters button{white-space:nowrap;border:1px solid #d7e1e3;background:#fff;color:#36565c;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:700;cursor:pointer}.czs-template-filters button.active{background:#00353f;color:#fff;border-color:#00353f}























/* v0.41.0 · productos multicara + mockup 2D con zona imprimible real */











.czs-face-tabs{display:flex;gap:7px;align-items:center;padding:10px 18px;border-bottom:1px solid #e2e9ea;background:#fff;overflow-x:auto}











.czs-face-tab{border:1px solid #cfdbdd;background:#fff;color:#284950;border-radius:9px;padding:8px 13px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}











.czs-face-tab.active{background:#00353f;color:#fff;border-color:#00353f}











.czs-face-surface{position:relative;width:min(1040px,100%);display:flex;align-items:center;justify-content:center;min-height:0}











.czs-face-surface.has-mockup{aspect-ratio:1/1;background:#f4f7f7;border:1px solid #d7e1e3;border-radius:12px;overflow:hidden;box-shadow:0 12px 36px rgba(22,54,60,.08)}











.czs-face-mockup{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;z-index:4}











.czs-face-surface.has-mockup .czs-canvas-wrap{z-index:2;display:block!important;max-width:none!important;transform:none!important}











.czs-face-surface.has-mockup .czs-canvas{width:100%;height:100%;box-sizing:border-box;background-color:rgba(255,255,255,.72);box-shadow:0 0 0 2px rgba(0,122,130,.18),0 9px 25px rgba(0,0,0,.12)}











.czs-face-surface:not(.has-mockup) .czs-canvas-wrap{position:relative!important;left:auto!important;top:auto!important;height:auto!important;margin:0!important;width:min(940px,100%)!important}











@media(max-width:900px){.czs-face-tabs{padding:8px 10px}.czs-face-surface.has-mockup{width:100%}}



































/* v0.41.2 · layout estable para editor multicara */











.czs-client-work.has-face-tabs{grid-template-rows:auto 52px minmax(0,1fr) 42px}











.czs-client-work.has-face-tabs .czs-face-tabs{grid-row:1;min-height:58px;padding:9px 18px;flex:0 0 auto}











.czs-client-work.has-face-tabs .czs-work-topbar{grid-row:2;min-height:52px;position:relative;z-index:5}











.czs-client-work.has-face-tabs .czs-canvas-stage{grid-row:3;min-height:0;overflow:auto;align-items:center}











.czs-client-work.has-face-tabs .czs-client-help{grid-row:4}











.czs-client-work.has-face-tabs .czs-face-surface:not(.has-mockup){width:100%;min-height:0}











@media(max-width:900px){











 .czs-client-work.has-face-tabs{grid-template-rows:auto 42px minmax(430px,1fr)}











 .czs-client-work.has-face-tabs .czs-face-tabs{min-height:50px;padding:7px 10px}











 .czs-client-work.has-face-tabs .czs-work-topbar{min-height:42px}











 .czs-client-work.has-face-tabs .czs-canvas-stage{overflow:auto}











}























/* v0.42.0 · textiles: mockup visual + límite físico conjunto */











.czs-design-extent{margin-left:10px;padding:5px 9px;border-radius:999px;background:#eef7f2;color:#285a43;font-size:11px;font-weight:800;white-space:nowrap}











.czs-design-extent.is-over{background:#fff0f0;color:#a52828}











.czs-limit-to-area .czs-canvas{overflow:hidden!important}











.czs-face-surface.has-mockup .czs-canvas{background-color:rgba(255,255,255,.20);border:2px dashed rgba(0,126,136,.75)}























/* v0.43.7 · Vista 3D ampliada: altura robusta para GLB/model-viewer */











.czs-3d-stage.is-expanded{











  display:flex!important;











  flex-direction:column!important;











  height:94vh!important;











  max-height:94vh!important;











}











.czs-3d-stage.is-expanded .czs-3d-head{flex:0 0 54px!important}











.czs-3d-stage.is-expanded .czs-3d-viewport{











  position:relative!important;











  display:block!important;











  flex:1 1 auto!important;











  width:100%!important;











  height:calc(94vh - 92px)!important;











  min-height:300px!important;











  overflow:hidden!important;











}











.czs-3d-stage.is-expanded .czs-parametric-mug-wrap,











.czs-3d-stage.is-expanded .czs-model-viewer{











  position:absolute!important;











  inset:0!important;











  display:block;











  width:100%!important;











  height:100%!important;











  min-height:300px!important;











}











.czs-3d-stage.is-expanded .czs-parametric-mug-wrap[hidden],











.czs-3d-stage.is-expanded .czs-model-viewer[hidden]{display:none!important}











.czs-3d-stage.is-expanded .czs-3d-hint{flex:0 0 auto!important}











@media(max-width:700px){











  .czs-3d-stage.is-expanded{height:98vh!important;max-height:98vh!important}











  .czs-3d-stage.is-expanded .czs-3d-viewport{height:calc(98vh - 92px)!important;min-height:220px!important}











}



































/* v0.43.19 · Cojín universal — escritorio equilibrado 2D + 3D */











@media (min-width: 1100px){











  .czs-editor.czs-is-cushion3d .czs-client-shell{











    min-height:0!important;











  }























  .czs-editor.czs-is-cushion3d .czs-client-side{











    max-height:calc(100vh - 100px);











  }























  .czs-editor.czs-is-cushion3d .czs-client-work{











    grid-template-rows:44px auto 32px!important;











  }























  .czs-editor.czs-is-cushion3d .czs-canvas-stage{











    padding:12px 18px 16px!important;











    gap:18px!important;











    align-items:flex-start!important;











    justify-content:center!important;











  }























  /* Contenedor central: no dejar una columna estrecha perdida en medio */











  .czs-editor.czs-is-cushion3d .czs-workspace,











  .czs-editor.czs-is-cushion3d .czs-stage-inner{











    width:100%!important;











    max-width:1040px!important;











    margin:0 auto!important;











  }























  .czs-editor.czs-is-cushion3d .czs-face-surface{











    flex:0 0 auto!important;











    min-height:0!important;











    margin:0!important;











  }























  .czs-editor.czs-is-cushion3d .czs-face-surface:not(.has-mockup) .czs-canvas-wrap{











    width:100%!important;











    max-width:100%!important;











  }























  /* Vista 3D con presencia real, no una miniatura */











  .czs-editor.czs-is-cushion3d .czs-3d-stage{











    width:min(460px, 42vw)!important;











    max-width:460px!important;











    height:500px!important;











    min-height:500px!important;











    margin:0!important;











    flex:0 0 460px!important;











  }























  .czs-editor.czs-is-cushion3d .czs-3d-viewport,











  .czs-editor.czs-is-cushion3d .czs-model-viewer{











    width:100%!important;











    height:100%!important;











    min-height:0!important;











  }























  /* Si el DOM permite flex directo, mostrar 2D y 3D en la misma fila */











  .czs-editor.czs-is-cushion3d .czs-canvas-stage:has(.czs-3d-stage){











    display:flex!important;











    flex-direction:row!important;











    flex-wrap:nowrap!important;











  }











}























/* En resoluciones intermedias mantenemos el 3D debajo, pero con mejor tamaño */











@media (min-width:901px) and (max-width:1099px){











  .czs-editor.czs-is-cushion3d .czs-canvas-stage{











    padding:12px 16px 18px!important;











    gap:12px!important;











    align-items:center!important;











  }











  .czs-editor.czs-is-cushion3d .czs-face-surface{











    flex:0 0 auto!important;











    min-height:0!important;











  }











  .czs-editor.czs-is-cushion3d .czs-3d-stage{











    width:min(500px,100%)!important;











    max-width:500px!important;











    height:260px!important;











    min-height:260px!important;











  }











  .czs-editor.czs-is-cushion3d .czs-3d-viewport,











  .czs-editor.czs-is-cushion3d .czs-model-viewer{











    height:100%!important;











  }











}



































/* v0.43.20 · Layout general Studio a ancho completo */











@media (min-width: 901px){











  /*











   * El editor puede estar dentro de un contenedor estrecho del tema/WordPress.











   * Esta regla lo saca visualmente de ese límite y utiliza el viewport.











   */











  .czs-editor{











    width:calc(100vw - 24px)!important;











    max-width:none!important;











    margin-top:12px!important;











    margin-bottom:12px!important;











    margin-left:calc(50% - 50vw + 12px)!important;











    margin-right:0!important;











  }























  /* Navegación compacta + panel de herramienta + todo el resto para trabajar. */











  .czs-client-shell{











    grid-template-columns:72px 280px minmax(0,1fr)!important;











    min-height:calc(100vh - 110px)!important;











  }























  .czs-client-tools{











    padding-left:5px!important;











    padding-right:5px!important;











  }























  .czs-client-side{











    max-height:calc(100vh - 110px)!important;











    padding:18px!important;











  }























  .czs-client-work{











    min-width:0!important;











    width:100%!important;











  }























  .czs-canvas-stage{











    width:100%!important;











    min-width:0!important;











  }























  /*











   * Para productos normales dejamos que el workspace aproveche más ancho,











   * manteniendo la proporción que ya calcula Studio.











   */











  .czs-editor:not(.czs-is-cushion3d) .czs-canvas-wrap{











    max-width:min(1100px, 100%)!important;











  }











}























/* Monitores muy anchos: algo más de aire para el panel de herramientas. */











@media (min-width: 1600px){











  .czs-client-shell{











    grid-template-columns:74px 300px minmax(0,1fr)!important;











  }











}























/* Tablet/móvil conserva el flujo responsive existente y no fuerza viewport breakout. */











@media (max-width:900px){











  .czs-editor{











    width:auto!important;











    max-width:100%!important;











    margin-left:auto!important;











    margin-right:auto!important;











  }











}



































/* v0.43.21 · Cojín: 2D y 3D rellenan el workspace disponible */











@media (min-width:1100px){











  .czs-editor.czs-is-cushion3d .czs-canvas-stage{











    width:100%!important;











    max-width:none!important;











    justify-content:center!important;











    gap:18px!important;











  }























  .czs-editor.czs-is-cushion3d .czs-face-surface{











    flex:0 0 auto!important;











  }























  .czs-editor.czs-is-cushion3d .czs-3d-stage{











    max-width:none!important;











    margin:0!important;











  }























  .czs-editor.czs-is-cushion3d .czs-3d-viewport,











  .czs-editor.czs-is-cushion3d .czs-model-viewer{











    width:100%!important;











    height:100%!important;











  }











}























.czs-canvas.czs-hide-safe-zone:before{display:none!important}























/* v0.43.38 · multicara: evita que el track del canvas colapse al añadir pestañas */











@media(min-width:901px){











  .czs-client-work.has-face-tabs{











    grid-template-rows:auto 52px minmax(620px,auto) 42px;











    min-height:772px;











  }











  .czs-client-work.has-face-tabs .czs-canvas-stage{











    min-height:620px;











    overflow:auto;











    align-items:center;











  }











  .czs-client-work.has-face-tabs.czs-cushion-desktop-layout .czs-canvas-stage,











  .czs-cushion-desktop-layout .czs-client-work.has-face-tabs .czs-canvas-stage{











    min-height:620px;











  }











}













/* v0.43.39 · Cojín multicara: layout arriba + 2D/3D estable */











@media (min-width:901px){











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs{











    grid-template-rows:58px 52px minmax(520px,1fr) 42px!important;











    min-height:672px!important;











  }











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs .czs-face-tabs{











    grid-row:1!important;











    align-self:start!important;











  }











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs .czs-work-topbar{











    grid-row:2!important;











  }











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs .czs-canvas-stage{











    grid-row:3!important;











    min-height:520px!important;











    height:auto!important;











    overflow:auto!important;











    align-items:flex-start!important;











    align-content:flex-start!important;











    padding-top:14px!important;











  }











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs .czs-client-help{











    grid-row:4!important;











  }











}











@media (min-width:1100px){











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs .czs-canvas-stage{











    justify-content:center!important;











  }











}



































/* v0.43.42 · Multicara: misma proporción visual que una sola cara */











@media (min-width:901px){











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs .czs-canvas-stage{











    min-height:0!important;











    height:auto!important;











    overflow:visible!important;











    padding-top:14px!important;











    padding-bottom:18px!important;











  }











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs .czs-face-surface:not(.has-mockup){











    min-height:0!important;











    height:auto;











  }











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs .czs-face-surface:not(.has-mockup) .czs-canvas-wrap{











    height:auto!important;











    align-items:flex-start!important;











  }











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs .czs-face-surface:not(.has-mockup) .czs-canvas{











    height:auto!important;











  }











}



































/* v0.43.43 · Cojín multicara: flujo vertical robusto sin filas elásticas */











@media (min-width:901px){











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs{











    display:flex!important;











    flex-direction:column!important;











    grid-template-rows:none!important;











    min-height:0!important;











    height:auto!important;











  }











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs .czs-face-tabs{











    order:1!important;











    flex:0 0 50px!important;











    min-height:50px!important;











    height:50px!important;











    padding:7px 14px!important;











    align-self:stretch!important;











  }











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs .czs-work-topbar{











    order:2!important;











    flex:0 0 52px!important;











    min-height:52px!important;











    height:52px!important;











    align-self:stretch!important;











  }











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs .czs-canvas-stage{











    order:3!important;











    flex:0 0 auto!important;











    min-height:0!important;











    height:auto!important;











    overflow:visible!important;











    align-items:flex-start!important;











    align-content:flex-start!important;











    padding:14px 18px 18px!important;











    margin:0!important;











  }











  .czs-editor.czs-is-cushion3d .czs-client-work.has-face-tabs .czs-client-help{











    order:4!important;











    flex:0 0 32px!important;











    min-height:32px!important;











  }











}























/* v0.43.48: previsualización física para sublimación sin tinta blanca.











   Multiply hace que el blanco del arte deje ver el color del soporte en el editor 2D;











   el PNG/3D siguen usando alfa real desde renderFlatCanvas(). */











.czs-editor.czs-white-is-transparent.czs-is-cushion3d .czs-canvas{background-color:var(--czs-material-color,#eee9df)!important;background-image:none!important}











.czs-editor.czs-white-is-transparent .czs-design-item img{mix-blend-mode:multiply}











.czs-editor.czs-white-is-transparent .czs-text-content{mix-blend-mode:multiply}























/* v0.43.56 · Interfaz móvil: 3D bajo demanda debajo del lienzo + cierre automático de panel */











.czs-mobile-panel-close,.czs-mobile-view3d{display:none}











@media(max-width:768px){











  html:has(.czs-editor.czs-client),body:has(.czs-editor.czs-client){overflow-x:hidden}











  .czs-editor.czs-client{min-height:100dvh;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;padding-bottom:68px}











  .czs-client-head{position:sticky;top:0;z-index:120;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;height:58px!important;padding:7px 10px!important;border-bottom:1px solid var(--line);background:#fff}











  .czs-head-product{min-width:0}.czs-head-product strong{font-size:14px!important;line-height:1.15;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}.czs-head-product span{font-size:9px!important}











  .czs-head-history{display:none!important}.czs-head-actions{display:flex!important;justify-self:end!important}.czs-head-actions .czs-primary-btn{display:block!important;padding:9px 12px!important;font-size:12px!important}























  .czs-client-shell{display:block!important;min-height:calc(100dvh - 126px)!important}











  .czs-client-work{display:flex!important;flex-direction:column!important;min-height:calc(100dvh - 126px)!important;background:#f4f6f6!important}











  .czs-face-tabs{order:1;position:sticky;top:58px;z-index:85;min-height:42px!important;height:42px!important;padding:5px 8px!important;overflow-x:auto;white-space:nowrap;background:#fff}











  .czs-work-topbar{order:2;position:sticky;top:58px;z-index:80;height:38px!important;min-height:38px!important;padding:0 10px!important;background:#fff!important;border-bottom:1px solid var(--line)!important}











  .czs-client-work.has-face-tabs .czs-work-topbar{top:100px}











  .czs-area-label{font-size:9px!important;white-space:nowrap}.czs-design-extent{display:none!important}











  .czs-mobile-view3d{display:none!important}























  .czs-canvas-stage{order:3;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:center!important;gap:10px!important;min-height:calc(100dvh - 164px)!important;padding:12px 8px 84px!important;overflow:visible!important}











  .czs-face-surface{width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;min-height:0!important}











  .czs-canvas-wrap{width:100%!important;max-width:100%!important;height:auto!important;margin:0 auto!important;display:block!important}











  .czs-canvas{width:100%!important;height:auto!important;max-height:none!important;box-shadow:0 4px 18px rgba(22,54,60,.08)!important}











  .czs-canvas-empty b{font-size:16px!important}.czs-canvas-empty span{font-size:11px!important}











  .czs-client-help{display:none!important}























  /* Navegación fija inferior */











  .czs-client-tools{position:fixed!important;left:0;right:0;bottom:0;z-index:220;display:flex!important;flex-direction:row!important;align-items:stretch!important;justify-content:space-around!important;gap:0!important;width:100%!important;height:64px!important;padding:4px 4px env(safe-area-inset-bottom)!important;background:#00353f!important;box-shadow:0 -4px 16px rgba(0,0,0,.14)}











  .czs-client-tools button{flex:1 1 0!important;min-width:0!important;height:56px!important;padding:7px 2px!important;border-radius:9px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}











  .czs-client-tools b{font-size:17px!important}.czs-client-tools small{font-size:8px!important;margin-top:4px!important;white-space:nowrap}























  /* Panel de herramientas como cajón inferior */











  .czs-client-side{position:fixed!important;left:0!important;right:0!important;bottom:64px!important;z-index:210!important;width:100%!important;max-width:none!important;height:auto!important;max-height:min(52dvh,520px)!important;padding:18px 14px 16px!important;border:1px solid #d8e3e5!important;border-width:1px 0 0!important;border-radius:18px 18px 0 0!important;background:#fff!important;box-shadow:0 -12px 30px rgba(0,0,0,.18)!important;overflow:auto!important;transform:translateY(calc(100% + 16px));opacity:0;visibility:hidden;transition:transform .22s ease,opacity .18s ease,visibility 0s linear .22s}











  .czs-client-side.is-mobile-open{transform:translateY(0);opacity:1;visibility:visible;transition:transform .22s ease,opacity .18s ease}











  .czs-mobile-panel-close{display:grid;place-items:center;position:sticky;top:0;z-index:4;margin:-8px 0 2px auto;width:34px;height:34px;border:1px solid #d7e2e4;border-radius:50%;background:#fff;color:#35545a;font-size:14px;box-shadow:0 2px 7px rgba(0,0,0,.06)}











  .czs-panel-head{padding-right:42px;margin-top:-32px;margin-bottom:12px}.czs-panel-head h3{font-size:17px!important}.czs-panel-head p{font-size:10px!important;line-height:1.35!important}











  .czs-tip{padding:9px!important;margin-top:10px!important}.czs-tip span{font-size:9px!important}











  .czs-upload-main,.czs-add-text{min-height:44px!important}























  /* Acciones del elemento seleccionado: barra flotante encima del menú */











  .czs-selection-actions:not([hidden]){position:fixed!important;left:8px!important;right:8px!important;bottom:72px!important;z-index:205!important;display:flex!important;gap:5px!important;padding:6px!important;overflow-x:auto!important;white-space:nowrap!important;background:rgba(255,255,255,.97)!important;border:1px solid #d7e2e4!important;border-radius:12px!important;box-shadow:0 8px 24px rgba(0,0,0,.16)!important}











  .czs-selection-actions button{flex:0 0 auto!important;min-height:34px!important;padding:6px 9px!important;font-size:9px!important}.czs-quality-badge,.czs-clip-color-control{flex:0 0 auto}























  /* Vista 3D bajo demanda: botón debajo del lienzo y visor oculto hasta pulsarlo */











  .czs-canvas-stage>.czs-mobile-view3d{display:flex!important;order:4!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:44px!important;margin:2px 0 0!important;border:1px solid #00353f!important;border-radius:11px!important;background:#fff!important;color:#00353f!important;font-size:12px!important;font-weight:800!important;cursor:pointer!important}











  .czs-canvas-stage>.czs-mobile-view3d.is-open{background:#00353f!important;color:#fff!important}











  .czs-canvas-stage>.czs-3d-stage{display:none!important;position:relative!important;inset:auto!important;order:5!important;width:100%!important;max-width:none!important;min-width:0!important;height:300px!important;min-height:300px!important;margin:0!important;border-radius:14px!important}











  .czs-canvas-stage>.czs-3d-stage.is-mobile-visible{display:flex!important}











  .czs-canvas-stage>.czs-3d-stage[hidden]{display:none!important}











  .czs-canvas-stage>.czs-3d-stage .czs-3d-viewport,.czs-canvas-stage>.czs-3d-stage .czs-parametric-mug-wrap,.czs-canvas-stage>.czs-3d-stage .czs-model-viewer{min-height:235px!important}











  .czs-3d-stage.is-expanded{display:flex!important;position:fixed!important;inset:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;border-radius:0!important;z-index:2147483000!important}











  .czs-3d-stage.is-expanded .czs-3d-head{min-height:52px!important;padding:8px 10px!important}











  .czs-3d-stage.is-expanded .czs-close-3d{display:inline-flex!important}























  .czs-mobile-footer{display:none!important}











}























/* v0.43.61 · mockup 2D por capas + subida directa desde el área */











.czs-face-surface.has-mockup .czs-canvas-wrap{overflow:hidden}











.czs-face-surface.has-mockup .czs-canvas-wrap.czs-zone-circle{border-radius:50%}











.czs-face-surface.has-mockup .czs-canvas{background:transparent!important;box-shadow:none!important;border:2px dashed rgba(0,126,136,.78)}











.czs-face-surface.has-mockup .czs-canvas-wrap.czs-zone-circle .czs-canvas{border-radius:50%}











.czs-face-auto-photo{left:0!important;top:0!important;width:100%!important;height:100%!important;transform:none!important}











.czs-face-auto-photo .czs-resize-handle{display:none!important}











.czs-face-auto-photo .czs-photo-viewport{width:100%;height:100%!important;aspect-ratio:auto!important}











.czs-zone-circle .czs-face-auto-photo,.czs-zone-circle .czs-face-auto-photo .czs-photo-viewport{border-radius:50%;overflow:hidden}











.czs-face-auto-photo.czs-photo-upload-target{cursor:pointer}











.czs-face-auto-photo .czs-photo-placeholder-button{width:100%;height:100%;border:0;background:rgba(255,255,255,.68);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#00353f;cursor:pointer;padding:10px;text-align:center}











.czs-face-auto-photo .czs-photo-placeholder-button .czs-upload-icon{font-size:24px;line-height:1}











.czs-face-auto-photo .czs-photo-placeholder-button strong{font-size:12px;letter-spacing:.02em}











.czs-face-auto-photo .czs-photo-placeholder-button small{font-size:10px;font-weight:600;color:#4c666b}























.czs-face-surface.has-mockup.mockup-below .czs-face-mockup{z-index:1}











.czs-face-surface.has-mockup.mockup-below .czs-canvas-wrap{z-index:2}























/* v0.43.63 · orden 2D inequívoco: mockup y diseño son capas reales */











.czs-face-surface.has-mockup .czs-face-mockup{position:absolute!important;z-index:30!important;}











.czs-face-surface.has-mockup .czs-canvas-wrap{position:absolute!important;z-index:20!important;}











.czs-face-surface.has-mockup.mockup-below .czs-face-mockup{z-index:10!important;}











.czs-face-surface.has-mockup.mockup-below .czs-canvas-wrap{z-index:20!important;}











.czs-face-surface.has-mockup:not(.mockup-below) .czs-face-mockup{z-index:30!important;}











.czs-face-surface.has-mockup:not(.mockup-below) .czs-canvas-wrap{z-index:20!important;}











/* El placeholder no debe parecer una placa opaca: deja ver el mockup al ajustar capas. */











.czs-face-auto-photo .czs-photo-placeholder-button{background:rgba(255,255,255,.42)!important;}























/* v0.43.65 · Fix responsive mockup 2D: conservar geometría física del área en móvil */











@media(max-width:768px){











  .czs-face-surface.has-mockup{position:relative!important;width:100%!important;aspect-ratio:1/1!important;height:auto!important}











  .czs-face-surface.has-mockup .czs-canvas-wrap{position:absolute!important;left:var(--czs-zone-x)!important;top:var(--czs-zone-y)!important;width:var(--czs-zone-w)!important;height:var(--czs-zone-h)!important;max-width:none!important;margin:0!important}











  .czs-face-surface.has-mockup .czs-canvas{width:100%!important;height:100%!important;max-height:none!important}











  .czs-face-surface.has-mockup .czs-canvas-wrap.czs-zone-circle,.czs-face-surface.has-mockup .czs-canvas-wrap.czs-zone-circle .czs-canvas{border-radius:50%!important}











}












/* v0.43.68 - validación moderna de caras obligatorias + fallback servidor */











.czs-required-open{overflow:hidden!important}











.czs-required-overlay{position:fixed;inset:0;z-index:2147483647;background:rgba(8,22,25,.58);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}











.czs-required-dialog{width:min(440px,92vw);background:#fff;border-radius:20px;padding:28px 26px 24px;text-align:center;box-shadow:0 28px 90px rgba(0,0,0,.28);color:#17363c}











.czs-required-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 14px;border-radius:50%;background:#eef6f7;color:#00353f;font-size:26px;font-weight:800}











.czs-required-title{display:block;font-size:20px;line-height:1.25}.czs-required-message{margin:9px auto 0;max-width:350px;font-size:14px;line-height:1.55;color:#526b70}











.czs-required-list{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:14px}.czs-required-list span{padding:6px 10px;border-radius:999px;background:#eef6f7;color:#00353f;font-size:12px;font-weight:700}











.czs-required-actions{display:flex;justify-content:center;gap:10px;margin-top:22px}.czs-required-actions button{min-height:42px;border-radius:10px;padding:9px 17px;font-weight:700;cursor:pointer}











.czs-required-close{border:1px solid #cbdadd;background:#fff;color:#315158}.czs-required-go{border:1px solid #00353f;background:#00353f;color:#fff}











@media(max-width:600px){.czs-required-dialog{padding:24px 18px 20px}.czs-required-title{font-size:18px}.czs-required-actions{flex-direction:column-reverse}.czs-required-actions button{width:100%}}











.czs-allowed-zone-guide{position:absolute;z-index:7;border:2px dashed rgba(0,53,63,.72);box-sizing:border-box;pointer-events:none;border-radius:6px;background:rgba(255,255,255,.06)}











.czs-allowed-zone-guide>span{position:absolute;left:5px;top:5px;background:rgba(0,53,63,.88);color:#fff;font-size:10px;font-weight:700;padding:3px 6px;border-radius:4px;white-space:nowrap}























/* v0.43.91 · zonas de impresión independientes por producto */











.czs-independent-print-zones .czs-face-surface.has-mockup .czs-canvas-wrap{left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0!important;overflow:visible!important}











.czs-independent-print-zones .czs-face-surface.has-mockup .czs-canvas{border:0!important;background:transparent!important;box-shadow:none!important}











.czs-independent-print-zones .czs-allowed-zone-guide{z-index:45;border:2px dashed rgba(0,126,136,.92);background:rgba(0,126,136,.06)}























/* v0.43.92: en modo zonas independientes no existe un área general imprimible. */











.czs-zone-box.is-hidden-independent{display:none!important}



































/* v0.43.93 · selector de zonas para el cliente */











.czs-zone-choice{width:100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid #d9e4e6;border-radius:10px;background:#fff}











.czs-zone-choice[hidden]{display:none!important}.czs-zone-choice>strong{font-size:12px;color:#294a50}.czs-zone-choice-buttons{display:flex;gap:7px;flex-wrap:wrap}











.czs-zone-choice-btn{border:1px solid #b9cdd1;background:#fff;color:#24464d;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:700;cursor:pointer}











.czs-zone-choice-btn.active{background:#00353f;color:#fff;border-color:#00353f}.czs-allowed-zone-guide.inactive{opacity:.22;border-style:dotted}.czs-allowed-zone-guide.inactive>span{background:#819397}











@media(max-width:768px){.czs-zone-choice{align-items:flex-start}.czs-zone-choice-buttons{width:100%}.czs-zone-choice-btn{flex:1 1 auto}}























/* v0.43.94 · fotos nuevas encajadas automáticamente en la zona activa */























/* v0.43.96 · zoom atrás hasta contain en fotos de zonas/marcos */























/* v0.43.96 · mover fotos entre zonas */











.czs-zone-move-handle{display:none;position:absolute;right:4px;top:4px;z-index:30;width:28px;height:28px;border:1px solid rgba(255,255,255,.8);border-radius:7px;background:#00353f;color:#fff;font-weight:800;line-height:1;cursor:grab;box-shadow:0 2px 8px rgba(0,0,0,.18)}











.czs-design-photo.is-selected[data-print-zone-id] .czs-zone-move-handle{display:grid;place-items:center}.czs-zone-move-handle:active{cursor:grabbing}











.czs-design-photo.is-moving-zone-photo{opacity:.72}.czs-allowed-zone-guide.is-drop-target{background:rgba(0,126,136,.2)!important;border-style:solid!important;border-width:3px!important;box-shadow:0 0 0 4px rgba(0,126,136,.12)}











.czs-move-zone-panel{margin:10px 0;padding:12px;border:1px solid #d7e4e6;border-radius:10px;background:#f8fbfb}.czs-move-zone-panel>b{display:block;color:#17363c;font-size:13px}.czs-move-zone-panel>span{display:block;margin-top:3px;color:#60777c;font-size:11px;line-height:1.4}.czs-move-zone-buttons{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.czs-move-zone-btn{border:1px solid #b9cdd1;background:#fff;color:#24464d;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:700;cursor:pointer}.czs-move-zone-btn.active{background:#00353f;color:#fff;border-color:#00353f}























/* v0.43.106: zonas adicionales desactivadas; vuelve el flujo clásico por cara. */











.czs-print-zones,











.czs-zone-selector,











.czs-zone-picker,











.czs-zone-tabs,











.czs-zone-add,











.czs-zone-remove,











.czs-zone-move-handle,











[data-czs-print-zones],











[data-action="add-zone"],











[data-action="remove-zone"]{display:none!important;}























/* v0.43.110 · textiles 2D: encaje en pantalla + contraste automático */











@media(min-width:901px){











  .czs-editor:not(.czs-is-cushion3d) .czs-client-work.has-face-tabs .czs-canvas-stage{overflow:hidden;align-items:center;justify-content:center}











  .czs-editor:not(.czs-is-cushion3d) .czs-face-surface.has-mockup{flex:0 0 auto}











}











.czs-face-surface.has-mockup.czs-light-mockup{background:#dfe3e4}























/* v0.43.114 · marco físico alrededor del área imprimible + canto 2D proporcional en mm. */











.czs-canvas-wrap.czs-product-frame-enabled{position:relative!important;overflow:visible!important;isolation:isolate;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}











/* v0.43.115: el marco frontal NO agranda el producto. Se pinta hacia dentro











   del área imprimible. El canto es una segunda silueta desplazada por detrás. */











.czs-canvas-wrap.czs-product-frame-enabled:before{content:none!important}











.czs-canvas-wrap.czs-product-frame-enabled:after{content:"";position:absolute;inset:0;transform:translate(var(--czs-product-depth-x,0px),var(--czs-product-depth-y,0px));background:var(--czs-product-edge-color,#111);border-radius:var(--czs-product-radius-css,var(--czs-product-radius,0px));z-index:0;pointer-events:none;box-shadow:0 12px 26px rgba(0,0,0,var(--czs-product-shadow-alpha,.24))}











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{position:relative;z-index:1;overflow:hidden!important;border-radius:var(--czs-product-radius-css,var(--czs-product-radius,0px))!important;box-shadow:inset 0 0 0 var(--czs-product-frame-px,0px) var(--czs-product-frame-color,#fff)!important}











.czs-face-surface.has-mockup .czs-canvas-wrap.czs-product-frame-enabled{overflow:visible!important}























/* v0.43.112 · fondo de presentación guardado por cara y visible también en el editor cliente. */











.czs-canvas-stage.czs-stage-bg-light{background:#f3f5f5!important}











.czs-canvas-stage.czs-stage-bg-gray{background:#d9dede!important}











.czs-canvas-stage.czs-stage-bg-dark{background:#343b3d!important}











.czs-canvas-stage.czs-stage-bg-grid{background-color:#edf1f1!important;background-image:linear-gradient(#d6dddd 1px,transparent 1px),linear-gradient(90deg,#d6dddd 1px,transparent 1px)!important;background-size:24px 24px!important}











.czs-canvas-stage.czs-stage-bg-wood-light{background-color:#d8b184!important;background-image:repeating-linear-gradient(7deg,rgba(104,63,25,.08) 0 2px,transparent 2px 18px),linear-gradient(90deg,rgba(255,255,255,.12),rgba(110,68,31,.06),rgba(255,255,255,.10))!important}











.czs-canvas-stage.czs-stage-bg-wood-dark{background-color:#765438!important;background-image:repeating-linear-gradient(6deg,rgba(255,255,255,.045) 0 2px,transparent 2px 17px),linear-gradient(90deg,rgba(35,17,7,.16),rgba(255,255,255,.035),rgba(35,17,7,.15))!important}











.czs-canvas-stage.czs-stage-bg-marble{background-color:#ecebea!important;background-image:linear-gradient(115deg,transparent 0 42%,rgba(112,120,122,.14) 43%,transparent 45%),linear-gradient(25deg,transparent 0 61%,rgba(150,155,156,.10) 62%,transparent 64%)!important}























/* v0.43.116 · escenario independiente del producto.











   El fondo de presentación pertenece al workspace completo; el objeto conserva











   un tamaño de mockup manejable y su frontal no hereda el fondo del escenario. */











.czs-face-surface:not(.has-mockup) .czs-canvas-wrap.czs-product-frame-enabled{











  width:min(620px,72%)!important;











  max-width:620px!important;











  flex:0 0 auto!important;











}











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  /* El color/transparencia del frontal pertenece al diseño del cliente. */











  background-image:none!important;











}











.czs-canvas-stage.czs-stage-bg-wood-light,











.czs-canvas-stage.czs-stage-bg-wood-dark,











.czs-canvas-stage.czs-stage-bg-marble,











.czs-canvas-stage.czs-stage-bg-light,











.czs-canvas-stage.czs-stage-bg-gray,











.czs-canvas-stage.czs-stage-bg-dark,











.czs-canvas-stage.czs-stage-bg-grid{











  background-attachment:local!important;











}











@media(max-width:900px){











  .czs-face-surface:not(.has-mockup) .czs-canvas-wrap.czs-product-frame-enabled{











    width:min(520px,88%)!important;











    max-width:88%!important;











  }











}























/* v0.43.117 · el fondo seleccionado ocupa todo el escenario, no el frontal. */











.czs-canvas-stage[data-czs-presentation-bg]{background-clip:border-box!important;}











.czs-canvas-stage[data-czs-presentation-bg] .czs-face-surface{background:transparent!important;}











.czs-canvas-stage[data-czs-presentation-bg] .czs-face-surface:not(.has-mockup){box-shadow:none!important;}



































/* v0.43.118 · el fondo de presentación es el fondo GENERAL del workspace. */











.czs-client-work[data-czs-presentation-bg]{background-clip:border-box!important;}











.czs-client-work.czs-stage-bg-light{background:#f3f5f5!important}











.czs-client-work.czs-stage-bg-gray{background:#d9dede!important}











.czs-client-work.czs-stage-bg-dark{background:#343b3d!important}











.czs-client-work.czs-stage-bg-grid{background-color:#edf1f1!important;background-image:linear-gradient(#d6dddd 1px,transparent 1px),linear-gradient(90deg,#d6dddd 1px,transparent 1px)!important;background-size:24px 24px!important}











.czs-client-work.czs-stage-bg-wood-light{background-color:#d8b184!important;background-image:repeating-linear-gradient(7deg,rgba(104,63,25,.08) 0 2px,transparent 2px 18px),linear-gradient(90deg,rgba(255,255,255,.12),rgba(110,68,31,.06),rgba(255,255,255,.10))!important}











.czs-client-work.czs-stage-bg-wood-dark{background-color:#765438!important;background-image:repeating-linear-gradient(6deg,rgba(255,255,255,.045) 0 2px,transparent 2px 17px),linear-gradient(90deg,rgba(35,17,7,.16),rgba(255,255,255,.035),rgba(35,17,7,.15))!important}











.czs-client-work.czs-stage-bg-marble{background-color:#ecebea!important;background-image:linear-gradient(115deg,transparent 0 42%,rgba(112,120,122,.14) 43%,transparent 45%),linear-gradient(25deg,transparent 0 61%,rgba(150,155,156,.10) 62%,transparent 64%)!important}











.czs-client-work[data-czs-presentation-bg] .czs-work-topbar{background:rgba(250,252,252,.94)!important;backdrop-filter:blur(3px)}











.czs-client-work[data-czs-presentation-bg] .czs-canvas-stage{background-color:transparent!important;}























/* v0.43.122 · fondo del diseño independiente del escenario */











.czs-bg-image-btn{width:100%;margin-top:10px;min-height:40px;border:1px solid #cfdadd;border-radius:9px;background:#fff;color:#00353f;font-weight:750;cursor:pointer}



































/* v0.43.125 · geometría 2D estable y mockups clásicos contenidos.











   El marco visual no controla la escala. Los productos con mockup se ajustan











   por viewport sin cambiar X/Y/W/H del área imprimible. */











.czs-face-surface:not(.has-mockup) .czs-canvas-wrap{











  width:min(620px,72%)!important;











  max-width:620px!important;











  flex:0 0 auto!important;











}











@media (min-width:901px){











  .czs-editor:not(.czs-is-cushion3d) .czs-canvas-stage .czs-face-surface.has-mockup{











    width:min(620px,78%,calc(100vh - 310px))!important;











    height:auto!important;











    max-width:620px!important;











    max-height:calc(100vh - 310px)!important;











    aspect-ratio:1/1!important;











    flex:0 0 auto!important;











  }











}











@media (max-width:900px){











  .czs-face-surface:not(.has-mockup) .czs-canvas-wrap{











    width:min(520px,88%)!important;











    max-width:88%!important;











  }











  .czs-face-surface.has-mockup{











    width:min(620px,100%)!important;











    height:auto!important;











    aspect-ratio:1/1!important;











  }











}



































/* v0.43.126 · grosor 2D por caras + responsive móvil seguro.











   El grosor ya no es una copia completa desplazada: solo se dibujan el lateral











   derecho y la base, evitando el gran rectángulo visible detrás del producto. */











.czs-canvas-wrap.czs-product-frame-enabled::before{











  content:""!important;











  position:absolute!important;











  top:max(1px,calc(var(--czs-product-radius,0px) * .18))!important;











  right:calc(-1 * var(--czs-product-depth,0px))!important;











  bottom:calc(var(--czs-product-depth,0px) * .45)!important;











  width:var(--czs-product-depth,0px)!important;











  background:var(--czs-product-edge-color,#111)!important;











  border-radius:0 calc(var(--czs-product-radius,0px) * .72) calc(var(--czs-product-radius,0px) * .72) 0!important;











  z-index:0!important;











  pointer-events:none!important;











  box-shadow:none!important;











}











.czs-canvas-wrap.czs-product-frame-enabled::after{











  content:""!important;











  position:absolute!important;











  left:calc(var(--czs-product-radius,0px) * .18)!important;











  right:calc(-1 * var(--czs-product-depth,0px))!important;











  bottom:calc(-1 * var(--czs-product-depth,0px))!important;











  height:var(--czs-product-depth,0px)!important;











  transform:none!important;











  background:var(--czs-product-edge-color,#111)!important;











  border-radius:0 0 calc(var(--czs-product-radius,0px) * .72) calc(var(--czs-product-radius,0px) * .72)!important;











  z-index:0!important;











  pointer-events:none!important;











  box-shadow:0 10px 20px rgba(0,0,0,var(--czs-product-shadow-alpha,.24))!important;











}























@media(max-width:600px){











  /* El objeto debe caber siempre completo entre los bordes del teléfono. */











  .czs-face-surface:not(.has-mockup) .czs-canvas-wrap,











  .czs-face-surface:not(.has-mockup) .czs-canvas-wrap.czs-product-frame-enabled{











    width:min(360px,78vw)!important;











    max-width:78vw!important;











  }











  .czs-canvas-stage{











    padding:18px 10px 34px!important;











    overflow-x:hidden!important;











  }











  .czs-work-topbar{











    min-height:44px!important;











    height:auto!important;











    padding:5px 6px!important;











    gap:5px!important;











  }











  .czs-area-label{flex:1 1 auto;min-width:95px}











  .czs-selection-actions{











    flex:0 1 auto!important;











    flex-wrap:nowrap!important;











    gap:3px!important;











    max-width:62vw!important;











    overflow-x:auto!important;











    scrollbar-width:none;











  }











  .czs-selection-actions::-webkit-scrollbar{display:none}











  .czs-selection-actions button{min-width:38px!important;padding:5px 6px!important}











}























/* v0.43.127 · grosor 2D limpio por silueta.











   El canto se simula con una sombra sólida desplazada detrás del frontal.











   Así solo queda visible en lateral derecho e inferior, respetando el radio











   real de las esquinas y evitando tiras/semicírculos separados. */











.czs-canvas-wrap.czs-product-frame-enabled::before,











.czs-canvas-wrap.czs-product-frame-enabled::after{











  content:none!important;











  display:none!important;











}











.czs-canvas-wrap.czs-product-frame-enabled{











  box-shadow:











    var(--czs-product-depth-x,0px) var(--czs-product-depth-y,0px) 0 0 var(--czs-product-edge-color,#111),











    calc(var(--czs-product-depth-x,0px) + 3px) calc(var(--czs-product-depth-y,0px) + 7px) 16px rgba(0,0,0,var(--czs-product-shadow-alpha,.24))!important;











}











@media(max-width:600px){











  .czs-canvas-wrap.czs-product-frame-enabled{











    box-shadow:











      var(--czs-product-depth-x,0px) var(--czs-product-depth-y,0px) 0 0 var(--czs-product-edge-color,#111),











      calc(var(--czs-product-depth-x,0px) + 2px) calc(var(--czs-product-depth-y,0px) + 4px) 10px rgba(0,0,0,var(--czs-product-shadow-alpha,.22))!important;











  }











}



































/* v0.43.128 · canto físico como segunda silueta, no box-shadow.











   El frontal tapa la silueta desplazada y solo deja visible el canto real. */











.czs-canvas-wrap.czs-product-frame-enabled{











  box-shadow:none!important;











  filter:none!important;











}











.czs-canvas-wrap.czs-product-frame-enabled::before{











  content:none!important;











  display:none!important;











}











.czs-canvas-wrap.czs-product-frame-enabled::after{











  content:""!important;











  display:block!important;











  position:absolute!important;











  inset:0!important;











  width:auto!important;











  height:auto!important;











  transform:translate(var(--czs-product-depth-x,0px),var(--czs-product-depth-y,0px))!important;











  background:var(--czs-product-edge-color,#111)!important;











  border-radius:var(--czs-product-radius,0px)!important;











  z-index:0!important;











  pointer-events:none!important;











  box-shadow:0 8px 14px rgba(0,0,0,var(--czs-product-shadow-alpha,.24))!important;











}











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  position:relative!important;











  z-index:1!important;











}











@media(max-width:600px){











 .czs-canvas-wrap.czs-product-frame-enabled::after{











   box-shadow:0 5px 9px rgba(0,0,0,var(--czs-product-shadow-alpha,.20))!important;











 }











}























/* v0.43.131 · forma circular real también en productos sintéticos sin mockup. */











.czs-canvas-wrap.czs-zone-circle.czs-product-frame-enabled:after{border-radius:50%!important}











.czs-canvas-wrap.czs-zone-circle.czs-product-frame-enabled .czs-canvas{border-radius:50%!important}











.czs-canvas-wrap.czs-zone-circle:not(.czs-product-frame-enabled) .czs-canvas{border-radius:50%!important}



































/* v0.43.132 · guías de impresión coherentes + marco siempre visible sobre fotos.











   1) La zona segura sigue la silueta real del producto (rectángulo redondeado/círculo).











   2) El marco frontal se pinta en una capa superior, para que una foto a sangre











      no lo tape al ocupar el 100 % del área. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  box-shadow:none!important;











}











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::after{











  content:""!important;











  position:absolute!important;











  inset:0!important;











  border-radius:inherit!important;











  box-shadow:inset 0 0 0 var(--czs-product-frame-px,0px) var(--czs-product-frame-color,#fff)!important;











  pointer-events:none!important;











  z-index:40!important;











}











.czs-canvas-wrap.czs-product-frame-enabled .czs-safe-zone{











  border-radius:var(--czs-product-safe-radius,0px)!important;











  z-index:41!important;











}











.czs-canvas-wrap.czs-zone-circle .czs-safe-zone{











  border-radius:50%!important;











}











.czs-canvas-wrap.czs-zone-circle .czs-canvas::after{











  border-radius:50%!important;











}











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::before{











  z-index:42!important;











}























/* v0.43.145 · encuadre libre dentro de marcos */











.czs-design-photo[data-locked="1"][data-placeholder="0"]{cursor:grab;touch-action:none}











.czs-design-photo[data-locked="1"][data-placeholder="0"]:active{cursor:grabbing}











.czs-frame-photo-controls label{grid-template-columns:auto 34px minmax(80px,1fr) 34px 54px}











.czs-frame-photo-controls .czs-frame-zoom-in,.czs-frame-photo-controls .czs-frame-zoom-out{padding:5px 0;min-width:34px;font-size:18px;line-height:1}











@media (max-width:700px){.czs-frame-photo-controls label{grid-template-columns:auto 36px minmax(70px,1fr) 36px 48px}}























/* v0.43.146 · biblioteca temporal de fotos durante la edición */











.czs-session-photos{margin:14px 0;padding:12px;border:1px solid #dce7e9;border-radius:11px;background:#f8fbfb}











.czs-session-photos-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}











.czs-session-photos-head b{font-size:12px;color:#17363c}











.czs-session-photos-head span{font-size:10px;color:#6a7d82;background:#fff;border:1px solid #dce7e9;border-radius:999px;padding:3px 7px}











.czs-session-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}











.czs-session-photo{position:relative;display:block;min-width:0;padding:0;border:1px solid #d6e1e3;border-radius:9px;overflow:hidden;background:#fff;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s,transform .15s}











.czs-session-photo:hover{border-color:#00353f;box-shadow:0 3px 12px rgba(0,53,63,.10);transform:translateY(-1px)}











.czs-session-photo img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#eef3f4}











.czs-session-photo-name{display:block;padding:5px 6px;font-size:9px;color:#50676d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}











.czs-session-photo-delete{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid #d6e1e3;color:#a22;display:grid;place-items:center;font-size:17px;font-weight:700;line-height:1;box-shadow:0 1px 5px rgba(0,0,0,.12)}











.czs-session-photo-delete:hover{background:#fff0f0;border-color:#e2bcbc}











.czs-session-photos>small{display:block;margin-top:9px;font-size:9px;line-height:1.4;color:#718388}











@media (max-width:700px){.czs-session-photo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}



































/* v0.43.147 · biblioteca -> relleno automático y zoom compacto */











.czs-frame-photo-controls{min-width:0;overflow:hidden}











.czs-frame-photo-controls .czs-frame-zoom-control{display:grid;gap:7px;min-width:0}











.czs-frame-photo-controls .czs-frame-zoom-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;font-size:12px}











.czs-frame-photo-controls .czs-frame-zoom-head strong{font-size:12px;color:#17363c}











.czs-frame-photo-controls .czs-frame-zoom-head output{min-width:44px;text-align:right;font-size:12px;font-weight:800;color:#00353f;font-variant-numeric:tabular-nums}











.czs-frame-photo-controls .czs-frame-zoom-row{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:8px;min-width:0;width:100%}











.czs-frame-photo-controls .czs-frame-zoom-row input[type="range"]{display:block;width:100%;min-width:0;margin:0}











.czs-frame-photo-controls .czs-frame-zoom-in,.czs-frame-photo-controls .czs-frame-zoom-out{width:34px;height:34px;min-width:34px;padding:0!important;display:grid;place-items:center;font-size:19px!important;line-height:1!important}











@media (max-width:700px){.czs-frame-photo-controls .czs-frame-zoom-row{grid-template-columns:36px minmax(0,1fr) 36px}.czs-frame-photo-controls .czs-frame-zoom-in,.czs-frame-photo-controls .czs-frame-zoom-out{width:36px;height:36px;min-width:36px}}























/* v0.43.151 · edición sin recorte exterior.











   Durante la edición los objetos pueden verse y manipularse fuera del área.











   El recorte real se conserva en preview/producción (render canvas). */











.czs-editor:not(.is-preview) .czs-face-surface .czs-canvas-wrap,











.czs-editor:not(.is-preview) .czs-face-surface.has-mockup .czs-canvas-wrap{











  overflow:visible!important;











}











.czs-editor:not(.is-preview) .czs-canvas,











.czs-editor:not(.is-preview) .czs-limit-to-area .czs-canvas{











  overflow:visible!important;











}











/* El contorno sigue marcando con claridad el límite imprimible. */











.czs-editor:not(.is-preview) .czs-canvas-wrap.czs-zone-circle .czs-canvas{











  border-radius:50%!important;











}











/* En modo preview volvemos a ocultar estrictamente lo exterior. */











.czs-editor.is-preview .czs-face-surface .czs-canvas-wrap,











.czs-editor.is-preview .czs-face-surface.has-mockup .czs-canvas-wrap,











.czs-editor.is-preview .czs-canvas{











  overflow:hidden!important;











}



































/* v0.43.152 · el producto/marco siempre queda por encima de las fotos durante la edición.











   Las fotos libres pueden sobresalir para poder agarrarlas y redimensionarlas, pero











   visualmente pasan por debajo del mockup/contorno del producto. El recorte de producción











   sigue haciéndose únicamente al exportar. */











.czs-editor:not(.is-preview) .czs-face-surface.has-mockup{











  isolation:isolate!important;











}











.czs-editor:not(.is-preview) .czs-face-surface.has-mockup .czs-canvas-wrap{











  z-index:20!important;











}











.czs-editor:not(.is-preview) .czs-face-surface.has-mockup:not(.mockup-below) .czs-face-mockup{











  z-index:60!important;











}











/* En productos sintéticos circulares (sin imagen de mockup), mantener el borde físico











   por encima de cualquier foto que sobresalga. No recorta: solo conserva la lectura











   visual del producto mientras se edita. */











.czs-editor:not(.is-preview) .czs-face-surface:not(.has-mockup) .czs-canvas-wrap.czs-zone-circle .czs-canvas::after{











  content:""!important;











  position:absolute!important;











  inset:0!important;











  border-radius:50%!important;











  box-shadow:inset 0 0 0 max(2px,var(--czs-product-frame-px,2px)) var(--czs-product-frame-color,rgba(0,53,63,.34))!important;











  pointer-events:none!important;











  z-index:60!important;











}











.czs-editor:not(.is-preview) .czs-face-surface:not(.has-mockup) .czs-canvas-wrap.czs-zone-circle .czs-safe-zone{











  z-index:61!important;











}



































/* v0.43.153 · la foto queda visualmente dentro del área; solo el borde de selección











   y el tirador pueden sobresalir para seguir siendo manipulables. */











.czs-editor:not(.is-preview) .czs-design-photo{overflow:visible!important;}











.czs-editor:not(.is-preview) .czs-design-photo .czs-photo-viewport{overflow:hidden!important;}











/* v0.43.156 · el elemento seleccionado conserva su orden real de capa.











   Antes se forzaba z-index:45 y por eso cualquier foto seleccionada aparecía











   siempre delante aunque se bajase desde Capas. */











/* v0.43.160: seleccionar una foto NO cambia su nivel de apilado.











   Todas las capas de diseño comparten z-index y el orden real lo determina el DOM.











   Forzar z-index:auto al seleccionar hacía que la foto cayese detrás del mockup/overlay:











   recién subida no se veía hasta deseleccionarla y volvía a desaparecer al hacer clic. */











.czs-editor:not(.is-preview) .czs-design-photo.is-selected{z-index:4!important;}











.czs-editor:not(.is-preview) .czs-design-photo .czs-resize-handle{z-index:80!important;}























/* v0.43.154 · gestor de capas cliente */











.czs-layer-client-row{position:relative;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:5px;transition:border-color .15s,box-shadow .15s,opacity .15s}.czs-layer-client-row.is-active{border-color:var(--cz);box-shadow:0 0 0 1px var(--cz)}.czs-layer-client-row.is-dragging{opacity:.42}.czs-layer-client-row.is-drop-before:before,.czs-layer-client-row.is-drop-after:after{content:"";position:absolute;left:4px;right:4px;height:3px;border-radius:3px;background:var(--cz);z-index:3}.czs-layer-client-row.is-drop-before:before{top:-5px}.czs-layer-client-row.is-drop-after:after{bottom:-5px}.czs-layer-client-row .czs-layer-drag{width:22px;min-width:22px;padding:0;border:0;background:transparent;color:#789095;font-weight:900;cursor:grab;font-size:14px;letter-spacing:-3px}.czs-layer-client-row .czs-layer-drag:active{cursor:grabbing}.czs-layer-client-row .czs-layer-select{min-width:0;flex:1;display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:4px;text-align:left;cursor:pointer;color:#405b61}.czs-layer-client-row .czs-layer-select span{width:25px;height:25px;min-width:25px;border-radius:6px;background:#eef3f3;display:grid;place-items:center;color:var(--cz)}.czs-layer-client-row .czs-layer-select b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.czs-layer-order{display:flex;gap:3px}.czs-layer-order button{width:25px;height:25px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;color:#49636a;cursor:pointer;font-weight:800}.czs-layer-order button:hover{border-color:var(--cz);color:var(--cz)}











/* v0.43.155 · controles unificados para fotos libres */











.czs-free-fit-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}











.czs-free-fit-actions .czs-free-fill{grid-column:1/-1;background:#00353f;color:#fff;border-color:#00353f}











.czs-free-fit-actions button{min-height:36px;padding:7px 8px;font-size:12px;font-weight:750;border-radius:8px}











.czs-free-photo-controls .czs-free-reset{width:100%;min-height:36px}























/* v0.43.174 · radios independientes por esquina */











/* Acabados de superficie: SOLO presentación */











.czs-canvas-wrap.czs-surface-glass,











.czs-canvas-wrap.czs-surface-gloss,











.czs-canvas-wrap.czs-surface-matte{isolation:isolate}











.czs-canvas-wrap.czs-surface-glass:after,











.czs-canvas-wrap.czs-surface-gloss:after,











.czs-canvas-wrap.czs-surface-matte:after{content:"";position:absolute;inset:0;z-index:999;pointer-events:none}











.czs-canvas-wrap.czs-surface-glass:after{











 background:











 linear-gradient(118deg,rgba(255,255,255,calc(var(--czs-surface-alpha,.35)*.55)) 0 10%,transparent 17% 45%,rgba(255,255,255,calc(var(--czs-surface-alpha,.35)*.28)) 53% 59%,transparent 67%),











 linear-gradient(180deg,rgba(255,255,255,calc(var(--czs-surface-alpha,.35)*.18)),transparent 38%,rgba(255,255,255,calc(var(--czs-surface-alpha,.35)*.08)));











 box-shadow:inset 0 0 18px rgba(255,255,255,calc(var(--czs-surface-alpha,.35)*.35));











}











.czs-canvas-wrap.czs-surface-gloss:after{background:linear-gradient(125deg,rgba(255,255,255,calc(var(--czs-surface-alpha,.35)*.42)),transparent 34% 70%,rgba(255,255,255,calc(var(--czs-surface-alpha,.35)*.16)))}











.czs-canvas-wrap.czs-surface-matte:after{background:rgba(245,245,240,calc(var(--czs-surface-alpha,.35)*.16));backdrop-filter:saturate(.9) contrast(.96)}























/* v0.43.176 · acabados visuales dedicados, sin conflicto con el canto/marco */











.czs-surface-effect-overlay{position:absolute;inset:0;z-index:950;pointer-events:none;overflow:hidden;mix-blend-mode:screen}











.czs-surface-effect-overlay[hidden]{display:none!important}











.czs-surface-effect-overlay.is-glass{background:linear-gradient(118deg,rgba(255,255,255,.68) 0 9%,rgba(255,255,255,.08) 16%,transparent 24% 48%,rgba(255,255,255,.34) 55% 60%,transparent 69%),linear-gradient(180deg,rgba(255,255,255,.17),transparent 42%)}











.czs-surface-effect-overlay.is-gloss{background:linear-gradient(125deg,rgba(255,255,255,.55),transparent 32% 72%,rgba(255,255,255,.18))}











.czs-surface-effect-overlay.is-matte{background:rgba(238,239,235,.32);mix-blend-mode:normal;backdrop-filter:saturate(.82) contrast(.94)}























/* v0.43.177 · Marco/grosor visual usa una única geometría maestra.











   El marco no amplía ni desplaza el área imprimible. */











.czs-canvas-wrap.czs-product-frame-enabled{











  border-radius:var(--czs-product-radius-css,var(--czs-master-radius,0))!important;











  overflow:visible!important;











}











.czs-canvas-wrap.czs-product-frame-enabled:after{











  border-radius:var(--czs-product-radius-css,var(--czs-master-radius,0))!important;











}











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  border:0!important;











  border-radius:var(--czs-product-radius-css,var(--czs-master-radius,0))!important;











  overflow:hidden!important;











}











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::after{











  border-radius:var(--czs-product-radius-css,var(--czs-master-radius,0))!important;











}











.czs-canvas-wrap.czs-product-frame-enabled .czs-safe-zone{











  left:var(--czs-product-safe-inset-x,4.5%)!important;











  right:var(--czs-product-safe-inset-x,4.5%)!important;











  top:var(--czs-product-safe-inset-y,4.5%)!important;











  bottom:var(--czs-product-safe-inset-y,4.5%)!important;











  inset:auto!important;











  border-radius:var(--czs-product-safe-radius-css,var(--czs-product-safe-radius,0px))!important;











}











.czs-canvas-wrap.czs-product-frame-enabled .czs-surface-effect-overlay{











  border-radius:var(--czs-product-radius-css,var(--czs-master-radius,0))!important;











}























/* v0.43.178 · grosor pseudo-3D para productos sintéticos */











.czs-canvas-wrap.czs-product-frame-enabled{











  isolation:isolate!important;











}











.czs-canvas-wrap.czs-product-frame-enabled:after{











  /* Canto inferior-derecho principal */











  content:""!important;











  position:absolute!important;











  inset:0!important;











  transform:translate(var(--czs-product-depth-x,0px),var(--czs-product-depth-y,0px))!important;











  border-radius:var(--czs-product-radius-css,var(--czs-master-radius,0))!important;











  background:











    linear-gradient(145deg,











      color-mix(in srgb,var(--czs-product-edge-color,#111) 86%,white 14%) 0%,











      var(--czs-product-edge-color,#111) 48%,











      color-mix(in srgb,var(--czs-product-edge-color,#111) 78%,black 22%) 100%)!important;











  z-index:-2!important;











  pointer-events:none!important;











  box-shadow:











    0 10px 20px rgba(0,0,0,var(--czs-product-shadow-alpha,.24)),











    inset 1px 0 0 rgba(255,255,255,.13),











    inset 0 1px 0 rgba(255,255,255,.08)!important;











}























/* Segunda cara lateral: hace que el grosor parezca una pieza y no una copia desplazada */











.czs-canvas-wrap.czs-product-frame-enabled:before{











  content:""!important;











  position:absolute!important;











  z-index:-1!important;











  pointer-events:none!important;











  top:var(--czs-product-depth-y,0px)!important;











  right:calc(-1 * var(--czs-product-depth-x,0px))!important;











  bottom:0!important;











  width:var(--czs-product-depth-x,0px)!important;











  border-radius:0 var(--czs-product-radius-css,var(--czs-master-radius,0)) var(--czs-product-radius-css,var(--czs-master-radius,0)) 0!important;











  background:linear-gradient(180deg,











    color-mix(in srgb,var(--czs-product-edge-color,#111) 82%,white 18%) 0%,











    var(--czs-product-edge-color,#111) 55%,











    color-mix(in srgb,var(--czs-product-edge-color,#111) 75%,black 25%) 100%)!important;











  transform:skewY(28deg)!important;











  transform-origin:top left!important;











  opacity:.98!important;











}























/* Línea inferior para reforzar la sensación de profundidad */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  position:relative!important;











  z-index:2!important;











  filter:drop-shadow(0 1px 0 rgba(255,255,255,.16))!important;











}











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::after{











  z-index:40!important;











}























/* Si no hay grosor, no dibujar las caras pseudo-3D */











.czs-canvas-wrap.czs-product-frame-enabled[style*="--czs-product-depth: 0px"]:before,











.czs-canvas-wrap.czs-product-frame-enabled[style*="--czs-product-depth: 0px"]:after{











  display:none!important;











}























/* v0.43.179 · canto 3D integrado, inspirado en un marco/producto físico real.











   El frontal no cambia de tamaño ni posición. El grosor sólo sobresale por derecha e inferior. */























.czs-canvas-wrap.czs-product-frame-enabled{











  isolation:isolate!important;











  overflow:visible!important;











  transform-style:preserve-3d!important;











}























/* Volumen trasero: queda casi completamente oculto por el frontal.











   Sólo asoma la profundidad en derecha + inferior. */











.czs-canvas-wrap.czs-product-frame-enabled:after{











  content:""!important;











  position:absolute!important;











  inset:0!important;











  transform:translate(var(--czs-product-depth-x,0px),var(--czs-product-depth-y,0px))!important;











  border-radius:var(--czs-product-radius-css,var(--czs-master-radius,0))!important;











  background:











    linear-gradient(105deg,











      color-mix(in srgb,var(--czs-product-edge-color,#8b7355) 88%,white 12%) 0%,











      var(--czs-product-edge-color,#8b7355) 58%,











      color-mix(in srgb,var(--czs-product-edge-color,#8b7355) 80%,black 20%) 100%)!important;











  z-index:-3!important;











  pointer-events:none!important;











  box-shadow:











    5px 9px 12px rgba(0,0,0,.18),











    10px 15px 22px rgba(0,0,0,.08)!important;











}























/* Canto derecho: estrecho, recto y unido al frontal. */











.czs-canvas-wrap.czs-product-frame-enabled:before{











  content:""!important;











  position:absolute!important;











  top:calc(var(--czs-product-depth-y,0px) * .35)!important;











  right:calc(-1 * var(--czs-product-depth-x,0px))!important;











  bottom:calc(-1 * var(--czs-product-depth-y,0px))!important;











  width:var(--czs-product-depth-x,0px)!important;











  transform:none!important;











  transform-origin:center!important;











  border-radius:











    0 var(--czs-product-radius-tr,0px)











    var(--czs-product-radius-br,0px) 0!important;











  background:











    linear-gradient(90deg,











      color-mix(in srgb,var(--czs-product-edge-color,#8b7355) 92%,white 8%) 0%,











      var(--czs-product-edge-color,#8b7355) 46%,











      color-mix(in srgb,var(--czs-product-edge-color,#8b7355) 72%,black 28%) 100%)!important;











  box-shadow:inset 1px 0 rgba(255,255,255,.16)!important;











  opacity:1!important;











  z-index:-2!important;











  pointer-events:none!important;











}























/* El frontal queda limpio y claramente por delante del canto. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  position:relative!important;











  z-index:3!important;











  filter:none!important;











}























/* Marco frontal: leve bisel/luz para que se perciba como cara del producto,











   no como un borde plano pegado encima. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas:before{











  box-shadow:











    inset 1px 1px 0 rgba(255,255,255,.28),











    inset -1px -1px 0 rgba(0,0,0,.10)!important;











}























/* La sombra pertenece al volumen completo, no al área imprimible. */











.czs-canvas-wrap.czs-product-frame-enabled.czs-product-shadow-enabled:after{











  box-shadow:











    4px 7px 10px rgba(0,0,0,.16),











    9px 14px 22px rgba(0,0,0,.12)!important;











}























/* Sin profundidad = sin canto. */











.czs-canvas-wrap.czs-product-frame-enabled[style*="--czs-product-depth: 0px"]:before,











.czs-canvas-wrap.czs-product-frame-enabled[style*="--czs-product-depth: 0px"]:after{











  display:none!important;











}























/* ==========================================================================











   v0.43.180 · Marco 3D continuo con las cuatro esquinas unidas











   - El frontal se construye como un anillo continuo, no como 4 barras separadas.











   - El canto trasero sólo existe en la derecha y abajo, unido exactamente en BR.











   - Se elimina por completo la "segunda placa" rectangular desplazada.











   ========================================================================== */























.czs-canvas-wrap.czs-product-frame-enabled{











  position:relative!important;











  isolation:isolate!important;











  overflow:visible!important;











  transform-style:flat!important;











}























/* CANTO DERECHO.











   Un cuadrilátero entre la arista derecha del frontal y su posición desplazada. */











.czs-canvas-wrap.czs-product-frame-enabled:before{











  content:""!important;











  display:block!important;











  position:absolute!important;











  left:100%!important;











  top:0!important;











  width:var(--czs-product-depth-x,0px)!important;











  height:calc(100% + var(--czs-product-depth-y,0px))!important;











  right:auto!important;











  bottom:auto!important;











  transform:none!important;











  border-radius:0!important;











  clip-path:polygon(











    0 0,











    100% var(--czs-product-depth-y,0px),











    100% 100%,











    0 calc(100% - var(--czs-product-depth-y,0px))











  )!important;











  background:











    linear-gradient(90deg,











      color-mix(in srgb,var(--czs-product-edge-color,#8b7355) 90%,white 10%) 0%,











      var(--czs-product-edge-color,#8b7355) 45%,











      color-mix(in srgb,var(--czs-product-edge-color,#8b7355) 72%,black 28%) 100%)!important;











  box-shadow:none!important;











  opacity:1!important;











  z-index:0!important;











  pointer-events:none!important;











}























/* CANTO INFERIOR.











   Comparte exactamente la esquina inferior derecha con el canto lateral. */











.czs-canvas-wrap.czs-product-frame-enabled:after{











  content:""!important;











  display:block!important;











  position:absolute!important;











  left:0!important;











  top:100%!important;











  width:calc(100% + var(--czs-product-depth-x,0px))!important;











  height:var(--czs-product-depth-y,0px)!important;











  inset:auto!important;











  transform:none!important;











  border-radius:0!important;











  clip-path:polygon(











    0 0,











    calc(100% - var(--czs-product-depth-x,0px)) 0,











    100% 100%,











    var(--czs-product-depth-x,0px) 100%











  )!important;











  background:











    linear-gradient(180deg,











      color-mix(in srgb,var(--czs-product-edge-color,#8b7355) 88%,white 12%) 0%,











      var(--czs-product-edge-color,#8b7355) 48%,











      color-mix(in srgb,var(--czs-product-edge-color,#8b7355) 70%,black 30%) 100%)!important;











  box-shadow:











    5px 8px 11px rgba(0,0,0,.16),











    10px 15px 22px rgba(0,0,0,.08)!important;











  opacity:1!important;











  z-index:0!important;











  pointer-events:none!important;











}























/* FRONTAL.











   Siempre por encima de los dos cantos; no cambia tamaño ni posición. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  position:relative!important;











  z-index:3!important;











  overflow:hidden!important;











  border-radius:var(--czs-product-radius-css,var(--czs-master-radius,0))!important;











  filter:none!important;











  box-shadow:none!important;











}























/* MARCO FRONTAL CONTINUO.











   Se dibuja como UN SOLO ANILLO; por tanto las 4 esquinas están conectadas.











   El gradiente da sensación de bisel sin alterar la zona imprimible. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::after{











  content:""!important;











  position:absolute!important;











  inset:0!important;











  padding:var(--czs-product-frame-px,0px)!important;











  border-radius:inherit!important;











  pointer-events:none!important;











  z-index:40!important;











  box-sizing:border-box!important;























  background:











    conic-gradient(











      from 45deg at 50% 50%,











      color-mix(in srgb,var(--czs-product-frame-color,#fff) 82%,black 18%) 0deg 90deg,











      color-mix(in srgb,var(--czs-product-frame-color,#fff) 90%,white 10%) 90deg 180deg,











      color-mix(in srgb,var(--czs-product-frame-color,#fff) 94%,white 6%) 180deg 270deg,











      color-mix(in srgb,var(--czs-product-frame-color,#fff) 78%,black 22%) 270deg 360deg











    )!important;























  -webkit-mask:











    linear-gradient(#000 0 0) content-box,











    linear-gradient(#000 0 0)!important;











  -webkit-mask-composite:xor!important;











  mask:











    linear-gradient(#000 0 0) content-box,











    linear-gradient(#000 0 0)!important;











  mask-composite:exclude!important;























  box-shadow:











    inset 1px 1px 0 rgba(255,255,255,.30),











    inset -1px -1px 0 rgba(0,0,0,.10)!important;











}























/* Línea interior muy fina: ayuda a leer visualmente dónde termina el marco











   sin invadir el diseño. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::before{











  content:""!important;











  position:absolute!important;











  inset:var(--czs-product-frame-px,0px)!important;











  border:1px solid rgba(0,0,0,.08)!important;











  border-radius:inherit!important;











  pointer-events:none!important;











  z-index:41!important;











  box-shadow:inset 1px 1px 0 rgba(255,255,255,.18)!important;











}























/* Zona segura siempre dentro del frontal. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-safe-zone{











  z-index:42!important;











}























/* Los efectos de superficie quedan encima del diseño, pero debajo de las guías. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-surface-effect-overlay{











  border-radius:inherit!important;











  z-index:35!important;











}























/* Grosor 0 = sin cantos. El marco frontal sigue funcionando. */











.czs-canvas-wrap.czs-product-frame-enabled[style*="--czs-product-depth: 0px"]:before,











.czs-canvas-wrap.czs-product-frame-enabled[style*="--czs-product-depth: 0px"]:after{











  display:none!important;











}























/* v0.43.181 · cerrar/unir la base inferior del canto 3D.











   El problema restante era que el canto inferior terminaba en dos caras separadas











   y dejaba una pequeña apertura visual en las esquinas. Ahora se añade un cierre











   continuo en toda la base y se solapan 1px los cantos para evitar cualquier hueco. */























.czs-canvas-wrap.czs-product-frame-enabled:before{











  /* Solape vertical mínimo con la base para que la esquina inferior derecha cierre. */











  height:calc(100% + var(--czs-product-depth-y,0px) + 1px)!important;











}























.czs-canvas-wrap.czs-product-frame-enabled:after{











  /* La base empieza 1px antes para solaparse con el frontal y el canto derecho. */











  top:calc(100% - 1px)!important;











  height:calc(var(--czs-product-depth-y,0px) + 1px)!important;























  /* Cierre continuo de extremo a extremo:











     la esquina izquierda baja ligeramente y la derecha enlaza con el canto lateral. */











  clip-path:polygon(











    0 0,











    calc(100% - var(--czs-product-depth-x,0px) + 1px) 0,











    100% 100%,











    max(0px, calc(var(--czs-product-depth-x,0px) - 1px)) 100%











  )!important;























  box-shadow:











    5px 8px 11px rgba(0,0,0,.16),











    10px 15px 22px rgba(0,0,0,.08),











    inset 0 1px 0 rgba(255,255,255,.12)!important;











}























/* Pequeña junta de unión en la esquina inferior derecha.











   No cambia el tamaño frontal: sólo rellena el triángulo que visualmente quedaba abierto. */











.czs-canvas-wrap.czs-product-frame-enabled{











  --czs-bottom-joint-w:var(--czs-product-depth-x,0px);











  --czs-bottom-joint-h:var(--czs-product-depth-y,0px);











}























/* v0.43.182 · selector Vertical / Horizontal por producto */











.czs-orientation-switch{











  display:inline-flex;











  gap:4px;











  align-items:center;











  padding:3px;











  margin-right:auto;











  margin-left:8px;











  background:#f3f7f7;











  border:1px solid #d8e3e5;











  border-radius:9px;











}











.czs-orientation-switch[hidden]{display:none!important}











.czs-orientation-switch button{











  appearance:none;











  border:0;











  border-radius:7px;











  background:transparent;











  color:#49636a;











  padding:6px 10px;











  font-size:10px;











  line-height:1;











  font-weight:800;











  cursor:pointer;











  white-space:nowrap;











}











.czs-orientation-switch button:hover{background:#e7efef;color:#00353f}











.czs-orientation-switch button.is-active{











  background:#00353f;











  color:#fff;











  box-shadow:0 1px 4px rgba(0,53,63,.18);











}











@media(max-width:900px){











  .czs-work-topbar{flex-wrap:wrap;height:auto;min-height:52px}











  .czs-orientation-switch{order:3;width:100%;margin:0 0 5px 0;justify-content:center}











}























/* v0.43.184 · eliminar líneas/seams en bordes 3D











   En colores claros o cristal los polígonos del canto podían mostrar uniones











   de 1px por antialiasing. Se solapan ligeramente las piezas y se ocultan las











   aristas internas sin cambiar dimensiones ni producción. */























.czs-canvas-wrap.czs-product-frame-enabled{











  --czs-edge-seam:2px;











}























/* Canto derecho: entra 2px bajo el frontal y 2px sobre la base */











.czs-canvas-wrap.czs-product-frame-enabled:before{











  left:calc(100% - var(--czs-edge-seam,2px))!important;











  width:calc(var(--czs-product-depth-x,0px) + var(--czs-edge-seam,2px))!important;











  height:calc(100% + var(--czs-product-depth-y,0px) + var(--czs-edge-seam,2px))!important;











  background-clip:border-box!important;











  outline:1px solid transparent!important;











  backface-visibility:hidden!important;











}























/* Canto inferior: también entra 2px bajo el frontal */











.czs-canvas-wrap.czs-product-frame-enabled:after{











  top:calc(100% - var(--czs-edge-seam,2px))!important;











  height:calc(var(--czs-product-depth-y,0px) + var(--czs-edge-seam,2px))!important;











  width:calc(100% + var(--czs-product-depth-x,0px) + var(--czs-edge-seam,2px))!important;











  background-clip:border-box!important;











  outline:1px solid transparent!important;











  backface-visibility:hidden!important;











}























/* El anillo frontal cubre las uniones interiores.











   Evitamos líneas diagonales producidas por el conic-gradient en algunos colores. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::after{











  background:var(--czs-product-frame-color,#fff)!important;











  box-shadow:











    inset 1px 1px 0 rgba(255,255,255,.20),











    inset -1px -1px 0 rgba(0,0,0,.08)!important;











}























/* Bisel muy suave mediante overlay continuo, sin segmentos/diagonales */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::before{











  border-color:rgba(0,0,0,.06)!important;











  box-shadow:











    inset 1px 1px 1px rgba(255,255,255,.22),











    inset -1px -1px 1px rgba(0,0,0,.07)!important;











}























/* En efectos cristal/brillo, evitar que el overlay marque la unión del marco */











.czs-canvas-wrap.czs-product-frame-enabled .czs-surface-effect-overlay{











  overflow:hidden!important;











  background-clip:padding-box!important;











}























/* v0.43.185 · cierre final del canto + lectura visual de cristal/blanco */











.czs-canvas-wrap.czs-product-frame-enabled{











  isolation:isolate;











}























/* Los cantos quedan detrás del frontal; nunca deben sobresalir hacia arriba/izquierda. */











.czs-canvas-wrap.czs-product-frame-enabled:before,











.czs-canvas-wrap.czs-product-frame-enabled:after{











  z-index:-1!important;











}























/* Canto derecho continuo, ligeramente sombreado para que cristal/blanco tenga volumen. */











.czs-canvas-wrap.czs-product-frame-enabled:before{











  top:1px!important;











  height:calc(100% + var(--czs-product-depth-y,0px) - 1px)!important;











  border-radius:0 2px 2px 0!important;











  box-shadow:











    inset 1px 0 0 rgba(255,255,255,.35),











    inset -1px 0 0 rgba(0,0,0,.10),











    1px 1px 2px rgba(0,0,0,.08)!important;











  filter:brightness(.94);











}























/* Base continua: empieza bajo el frontal y cierra con el lateral derecho. */











.czs-canvas-wrap.czs-product-frame-enabled:after{











  left:1px!important;











  width:calc(100% + var(--czs-product-depth-x,0px) - 1px)!important;











  border-radius:0 0 2px 2px!important;











  box-shadow:











    inset 0 1px 0 rgba(255,255,255,.30),











    inset 0 -1px 0 rgba(0,0,0,.11),











    1px 1px 2px rgba(0,0,0,.07)!important;











  filter:brightness(.92);











}























/* El frontal tapa exactamente el nacimiento del canto.











   Esto elimina la pequeña barra vertical que podía verse en la esquina superior derecha. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  position:relative;











  z-index:1!important;











}























/* En marcos blancos/cristal añadimos únicamente contraste óptico,











   sin modificar el color configurado ni la producción. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::after{











  outline:1px solid rgba(0,0,0,.035);











  outline-offset:-1px;











}























/* El radio frontal sigue mandando sobre la silueta visible. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas,











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::before,











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::after{











  background-clip:padding-box;











}























/* v0.43.187 · marco frontal restaurado











   Mantiene intacto el render original del marco. Solo ajusta el canto detrás. */























.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  position:relative!important;











  z-index:2!important;











}























/* El marco frontal original debe quedar siempre visible. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::after{











  display:block!important;











  visibility:visible!important;











  opacity:1!important;











  z-index:4!important;











}























/* El relieve/canto queda detrás y nunca puede tapar el marco frontal. */











.czs-canvas-wrap.czs-product-frame-enabled:before,











.czs-canvas-wrap.czs-product-frame-enabled:after{











  z-index:0!important;











  pointer-events:none!important;











}























.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  background-clip:padding-box!important;











}























/* Evita que un canto claro se convierta en una raya dura, sin sustituir











   la geometría de marco que ya funcionaba en madera y otros productos. */











.czs-canvas-wrap.czs-product-frame-enabled:before{











  box-shadow:











    inset 1px 0 0 rgba(255,255,255,.18),











    inset -1px 0 0 rgba(0,0,0,.07),











    2px 3px 5px rgba(0,0,0,.08)!important;











}























.czs-canvas-wrap.czs-product-frame-enabled:after{











  box-shadow:











    inset 0 1px 0 rgba(255,255,255,.15),











    inset 0 -1px 0 rgba(0,0,0,.07),











    2px 3px 5px rgba(0,0,0,.07)!important;











}























/* ==========================================================================











   v0.43.188 · Grosor exterior unificado











   El canto ya NO usa ::before/::after del wrapper. Es una capa DOM propia











   basada en la misma silueta/radios que el frontal.











   ========================================================================== */























.czs-canvas-wrap.czs-product-frame-enabled{











  position:relative!important;











  isolation:isolate!important;











  overflow:visible!important;











}























/* Desactivar todas las implementaciones antiguas del canto.











   El marco frontal sigue en .czs-canvas::after, por lo que no se pierde. */











.czs-canvas-wrap.czs-product-frame-enabled::before,











.czs-canvas-wrap.czs-product-frame-enabled::after{











  content:none!important;











  display:none!important;











}























/* Pieza real de grosor. */











.czs-product-depth-layer{











  position:absolute!important;











  inset:0!important;











  display:block;











  pointer-events:none!important;











  z-index:0!important;











  box-sizing:border-box!important;











  background-clip:border-box!important;











  outline:0!important;











  border:0!important;











  will-change:transform;











}























/* Frontal y marco siempre por encima. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  position:relative!important;











  z-index:2!important;











}























/* Mantener el marco frontal original del Studio, independiente del grosor. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::after{











  display:block!important;











  visibility:visible!important;











  opacity:1!important;











  z-index:40!important;











}























/* La zona segura y efectos permanecen por encima del diseño/frontal. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-safe-zone{











  z-index:41!important;











}











.czs-canvas-wrap.czs-product-frame-enabled .czs-surface-effect-overlay{











  z-index:35!important;











}























/* Sin grosor, ocultar completamente la pieza de profundidad. */











.czs-product-depth-layer[hidden]{











  display:none!important;











}



























































/* v0.43.192 · solo productos con tamaño inline de orientación */











.czs-canvas-wrap.czs-product-frame-enabled[style*="height:"]{











  flex:0 0 auto!important;











}











.czs-canvas-wrap.czs-product-frame-enabled[style*="height:"] > .czs-canvas{











  width:100%!important;











  height:100%!important;











}























/* ==========================================================================











   v0.43.193 · Marco FUERA del área imprimible











   La caja/canvas representa exactamente la producción (p.ej. 10×15 cm).











   El marco es únicamente presentación física y crece hacia fuera.











   ========================================================================== */























.czs-product-frame-layer{











  position:absolute!important;











  display:block;











  z-index:1!important;











  pointer-events:none!important;











  box-sizing:border-box!important;











  background-clip:border-box!important;











}























/* El lienzo/impresión queda por encima del marco exterior. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  position:relative!important;











  z-index:3!important;











}























/* IMPORTANTE: ya no pintar el marco con inset box-shadow dentro del canvas. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas::after{











  content:none!important;











  display:none!important;











  box-shadow:none!important;











}























/* Profundidad debajo del marco y del área imprimible. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-product-depth-layer{











  z-index:0!important;











}























/* La zona segura se calcula exclusivamente desde el borde de impresión. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-safe-zone{











  left:var(--czs-product-safe-inset-x,4.5%)!important;











  right:var(--czs-product-safe-inset-x,4.5%)!important;











  top:var(--czs-product-safe-inset-y,4.5%)!important;











  bottom:var(--czs-product-safe-inset-y,4.5%)!important;











}























/* Marco desactivado / ancho 0. */











.czs-product-frame-layer[hidden]{











  display:none!important;











}























/* ==========================================================================











   v0.43.194 · marco simétrico + canto 3D visualmente separado











   El marco crece la misma cantidad por los 4 lados. El grosor queda detrás











   y se oscurece ligeramente para que no parezca una prolongación del marco.











   ========================================================================== */























.czs-product-frame-layer{











  z-index:2!important;











  box-shadow:











    inset 0 0 0 1px rgba(255,255,255,.08),











    0 0 0 1px rgba(0,0,0,.035)!important;











}























/* El canto físico queda inequívocamente detrás del marco. */











.czs-product-depth-layer{











  z-index:0!important;











  filter:brightness(var(--czs-depth-shade,.74)) saturate(.94)!important;











  opacity:1!important;











}























/* El área imprimible siempre por encima y conserva exactamente su medida. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  z-index:3!important;











}























/* Línea de separación extremadamente sutil entre marco frontal y canto.











   Evita que, si ambos tienen el mismo color configurado, se fusionen visualmente. */











.czs-product-frame-layer::after{











  content:"";











  position:absolute;











  inset:0;











  border-radius:inherit;











  pointer-events:none;











  box-shadow:











    inset -1px -1px 0 rgba(0,0,0,.08),











    inset 1px 1px 0 rgba(255,255,255,.10);











}























/* La sombra pertenece al volumen, no altera el ancho aparente del marco. */











.czs-product-depth-layer{











  box-shadow:none;











}























/* v0.43.195: el marco frontal usa un único ancho físico en los cuatro lados.











   No se permite que el canto 3D modifique ópticamente ese ancho. */











.czs-product-frame-layer{











  box-sizing:border-box!important;











}











.czs-product-depth-layer{











  box-sizing:border-box!important;











}























/* ==========================================================================











   v0.43.196 · separar de verdad marco frontal y grosor











   El marco frontal conserva exactamente el mismo ancho en los 4 lados.











   El canto 3D es una segunda lectura visual, más corta y oscura, y no se suma











   ópticamente al ancho del marco frontal.











   ========================================================================== */











.czs-product-frame-layer{











  z-index:2!important;











  filter:none!important;











  opacity:1!important;











}











.czs-product-depth-layer{











  z-index:0!important;











  opacity:1!important;











}











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  z-index:3!important;











}











/* Evitar cualquier sombra del marco frontal que pueda engordar abajo/derecha. */











.czs-product-frame-layer,











.czs-product-frame-layer::after{











  box-shadow:none!important;











}























/* ==========================================================================











   v0.43.197 · canto 3D solo exterior











   El marco frontal no cambia. El grosor queda recortado para verse únicamente











   en la zona que sobresale por derecha/inferior.











   ========================================================================== */











.czs-product-frame-layer{











  z-index:2!important;











  box-shadow:none!important;











  filter:none!important;











}











.czs-product-frame-layer::after{











  box-shadow:none!important;











}























.czs-product-depth-layer{











  z-index:0!important;











  pointer-events:none!important;











  clip-path:polygon(











    calc(100% - var(--czs-depth-x,0px)) 0,











    100% 0,











    100% 100%,











    0 100%,











    0 calc(100% - var(--czs-depth-y,0px)),











    calc(100% - var(--czs-depth-x,0px)) calc(100% - var(--czs-depth-y,0px))











  )!important;











}























.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  z-index:3!important;











}























/* ==========================================================================











   v0.43.198 · canto 3D continuo y pegado al frontal











   La trasera es una única pieza completa. No se recorta en dos franjas.











   El frontal la cubre y solo queda visible el saliente de derecha e inferior.











   ========================================================================== */























.czs-product-depth-layer{











  clip-path:none!important;











  overflow:visible!important;











  z-index:0!important;











  box-shadow:none!important;











  transform-origin:top left!important;











}























/* Marco frontal encima de la trasera, sin transparencias ni sombras que creen huecos. */











.czs-product-frame-layer{











  z-index:2!important;











  opacity:1!important;











  filter:none!important;











  box-shadow:none!important;











}























.czs-product-frame-layer::after{











  box-shadow:none!important;











}























/* Área imprimible por encima del marco y de la trasera. */











.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  position:relative!important;











  z-index:3!important;











}























/* El canto debe leerse como material lateral, no como una línea suelta. */











.czs-product-depth-layer{











  filter:brightness(.70) saturate(.92)!important;











}























/* v0.43.199 · profundidad visual proporcionada











   El marco frontal conserva su ancho. El grosor físico se representa con un











   saliente corto y continuo, sin convertirse en una segunda franja grande. */











.czs-product-depth-layer{











  box-shadow:none!important;











  opacity:1!important;











}























/* ==========================================================================











   v0.43.200 · corrección estructural del canto











   IMPORTANTE: versiones antiguas dejaban inset:0!important en la profundidad,











   anulando la geometría exterior calculada por JS. La trasera ahora comparte











   exactamente la silueta exterior del marco y solo se desplaza unos píxeles.











   ========================================================================== */











.czs-canvas-wrap.czs-product-frame-enabled .czs-product-depth-layer{











  inset:auto!important;











  right:auto!important;











  bottom:auto!important;











  clip-path:none!important;











  margin:0!important;











  padding:0!important;











  box-sizing:border-box!important;











  transform-origin:top left!important;











  z-index:0!important;











}























.czs-canvas-wrap.czs-product-frame-enabled .czs-product-frame-layer{











  z-index:2!important;











}























.czs-canvas-wrap.czs-product-frame-enabled .czs-canvas{











  z-index:3!important;











}



































/* v0.43.204 · La medida del área de impresión es interna y no se muestra al cliente. */











.czs-client-work .czs-area-label{display:none!important;}



































/* ==========================================================================
   v0.43.205 · Mobile App UI
   Interfaz móvil tipo app: lienzo protagonista, navegación inferior fija,
   paneles en bottom-sheet y acciones siempre accesibles. Todo funciona sin
   recargar la página; los paneles se actualizan dinámicamente con JS.
   ========================================================================== */











.czs-mobile-sheet-backdrop{display:none}











@media(max-width:768px){











  html:has(.czs-editor.czs-client),body:has(.czs-editor.czs-client){height:100%;overflow:hidden!important;background:#f4f6f6!important}











  .czs-editor.czs-client{height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;display:flex!important;flex-direction:column!important;padding:0!important;overflow:hidden!important;background:#f4f6f6!important}























  /* Cabecera compacta de app: producto + deshacer/rehacer + continuar. */











  .czs-client-head{position:relative!important;top:auto!important;flex:0 0 60px!important;height:60px!important;min-height:60px!important;grid-template-columns:minmax(0,1fr) auto auto!important;gap:7px!important;padding:7px 10px!important;z-index:240!important;box-shadow:0 1px 10px rgba(0,0,0,.05)!important}











  .czs-head-product strong{font-size:14px!important}.czs-head-product span{display:none!important}











  .czs-head-history{display:flex!important;align-items:center!important;gap:4px!important}











  .czs-head-history .czs-save-state{display:none!important}











  .czs-head-history .czs-icon-btn{display:grid!important;place-items:center!important;width:35px!important;height:35px!important;min-width:35px!important;padding:0!important;border-radius:10px!important;font-size:16px!important}











  .czs-head-actions{display:flex!important}.czs-head-actions .czs-primary-btn{min-height:40px!important;padding:8px 13px!important;border-radius:11px!important}























  .czs-client-shell{flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow:hidden!important;display:block!important}











  .czs-client-work{height:100%!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;padding-bottom:76px!important;background:#f4f6f6!important}























  /* Las caras, si existen, quedan como pestañas compactas arriba. */











  .czs-face-tabs{position:sticky!important;top:0!important;z-index:90!important;min-height:44px!important;height:44px!important;padding:6px 8px!important}























  /* La barra técnica superior deja de ocupar una fila vacía. Solo aparece si hay acciones. */











  .czs-work-topbar{position:static!important;order:2!important;min-height:0!important;height:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:visible!important}











  .czs-work-topbar>.czs-zone-choice:not([hidden]){position:relative!important;height:auto!important;margin:8px!important;padding:8px!important;background:#fff!important;border-radius:12px!important;box-shadow:0 4px 16px rgba(0,0,0,.08)!important;z-index:95!important}























  /* Lienzo: ocupa el espacio útil real de pantalla, sin grandes huecos. */











  .czs-canvas-stage{order:3!important;min-height:0!important;height:auto!important;padding:12px 10px 92px!important;gap:10px!important;justify-content:flex-start!important;overflow:visible!important}











  .czs-face-surface{width:min(calc(100vw - 20px),620px)!important;max-width:calc(100vw - 20px)!important;margin:0 auto!important}











  .czs-face-surface.has-mockup{width:min(calc(100vw - 20px),calc(100dvh - 190px),620px)!important;max-width:calc(100vw - 20px)!important;aspect-ratio:1/1!important;border-radius:14px!important;box-shadow:0 5px 20px rgba(0,0,0,.08)!important}











  .czs-face-surface:not(.has-mockup) .czs-canvas-wrap,











  .czs-face-surface:not(.has-mockup) .czs-canvas-wrap.czs-product-frame-enabled{width:min(calc(100vw - 34px),calc(100dvh - 210px),560px)!important;max-width:calc(100vw - 34px)!important;margin:0 auto!important}























  /* Barra de acciones del objeto seleccionado, estilo iOS flotante. */











  .czs-selection-actions:not([hidden]){position:fixed!important;left:10px!important;right:10px!important;bottom:76px!important;z-index:235!important;display:flex!important;align-items:center!important;gap:6px!important;max-width:none!important;padding:7px!important;border:1px solid rgba(0,53,63,.12)!important;border-radius:15px!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;box-shadow:0 8px 28px rgba(0,0,0,.18)!important;overflow-x:auto!important;scrollbar-width:none!important}











  .czs-selection-actions::-webkit-scrollbar{display:none!important}











  .czs-selection-actions button{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;min-height:38px!important;padding:7px 10px!important;border-radius:10px!important;font-size:10px!important}











  .czs-selection-actions .czs-center-item,.czs-selection-actions .czs-send-back,.czs-selection-actions .czs-bring-front,.czs-selection-actions .czs-duplicate{display:inline-flex!important}























  /* Dock inferior de la app. */











  .czs-client-tools{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:250!important;height:70px!important;min-height:70px!important;padding:5px 5px calc(5px + env(safe-area-inset-bottom))!important;background:rgba(0,53,63,.98)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;box-shadow:0 -5px 22px rgba(0,0,0,.18)!important}











  .czs-client-tools button{height:58px!important;min-height:58px!important;border-radius:12px!important}











  .czs-client-tools button.is-active{box-shadow:0 2px 10px rgba(0,0,0,.12)!important}











  .czs-client-tools b{font-size:18px!important}.czs-client-tools small{font-size:9px!important}























  /* Fondo oscurecido + hoja inferior, como una app nativa. */











  .czs-mobile-sheet-backdrop{display:block!important;position:fixed!important;inset:0!important;z-index:239!important;background:rgba(4,20,24,.34)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .2s ease,visibility 0s linear .2s!important}











  .czs-editor.czs-mobile-sheet-open .czs-mobile-sheet-backdrop{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition:opacity .2s ease!important}











  .czs-client-side{left:8px!important;right:8px!important;bottom:76px!important;width:auto!important;max-width:none!important;max-height:min(66dvh,620px)!important;padding:12px 14px calc(16px + env(safe-area-inset-bottom))!important;border:0!important;border-radius:20px!important;z-index:245!important;box-shadow:0 18px 55px rgba(0,0,0,.28)!important;transform:translateY(calc(100% + 100px))!important}











  .czs-client-side:before{content:"";display:block;width:38px;height:4px;border-radius:999px;background:#c8d3d5;margin:0 auto 7px}











  .czs-client-side.is-mobile-open{transform:translateY(0)!important;opacity:1!important;visibility:visible!important}











  .czs-mobile-panel-close{position:absolute!important;top:10px!important;right:12px!important;margin:0!important;width:34px!important;height:34px!important;background:#eef3f4!important;box-shadow:none!important}











  .czs-panel-head{margin:0 42px 13px 0!important;padding:0!important}.czs-panel-head h3{font-size:18px!important}























  /* El visor 3D se abre dentro del flujo, sin empujar el dock. */











  .czs-canvas-stage>.czs-mobile-view3d{margin-top:4px!important;width:min(100%,560px)!important}











  .czs-canvas-stage>.czs-3d-stage{width:min(100%,560px)!important;height:min(54dvh,390px)!important;min-height:280px!important}























  .czs-mobile-footer{display:none!important}











}











@media(max-width:390px){











  .czs-client-head{grid-template-columns:minmax(0,1fr) auto auto!important;padding-left:7px!important;padding-right:7px!important}











  .czs-head-history .czs-icon-btn{width:32px!important;height:32px!important;min-width:32px!important}











  .czs-head-actions .czs-primary-btn{padding:7px 10px!important;font-size:11px!important}











  .czs-face-surface.has-mockup{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important}











}



































/* ==========================================================================
   v0.43.206 · Mobile inspector + zoom de fotografía
   Corrige la barra flotante en móvil y añade zoom directo sobre la foto.
   ========================================================================== */











.czs-mobile-photo-zoom{display:none}











@media(max-width:768px){











  .czs-editor.czs-client{position:relative!important}











  .czs-client-work{padding-bottom:74px!important}











  .czs-canvas-stage{padding:12px 12px 94px!important;align-items:flex-start!important}











  .czs-face-surface{width:min(calc(100vw - 28px),560px)!important;max-width:calc(100vw - 28px)!important}











  .czs-face-surface.has-mockup{width:min(calc(100vw - 28px),calc(100dvh - 235px),560px)!important;max-width:calc(100vw - 28px)!important}











  .czs-face-surface:not(.has-mockup) .czs-canvas-wrap,











  .czs-face-surface:not(.has-mockup) .czs-canvas-wrap.czs-product-frame-enabled{width:min(calc(100vw - 40px),calc(100dvh - 245px),520px)!important;max-width:calc(100vw - 40px)!important}























  /* Inspector del elemento: anclado a la app (no al viewport del navegador). */











  .czs-selection-actions:not([hidden]){











    position:absolute!important;left:8px!important;right:8px!important;bottom:74px!important;top:auto!important;











    z-index:238!important;display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;











    gap:5px!important;max-width:none!important;width:auto!important;max-height:118px!important;padding:7px!important;











    border:1px solid rgba(0,53,63,.14)!important;border-radius:16px!important;background:rgba(255,255,255,.97)!important;











    box-shadow:0 8px 26px rgba(0,0,0,.18)!important;overflow-x:hidden!important;overflow-y:auto!important;transform:none!important;











  }











  .czs-selection-actions button{min-height:34px!important;padding:5px 8px!important;font-size:9px!important}











  .czs-selection-actions .czs-quality-badge,.czs-selection-actions .czs-clip-color-control{display:none!important}











  .czs-mobile-photo-zoom:not([hidden]){display:grid!important;grid-template-columns:36px minmax(0,1fr) 36px!important;align-items:center!important;gap:7px!important;flex:1 0 100%!important;width:100%!important;padding:1px 2px 5px!important;border-bottom:1px solid #e5ecee!important}











  .czs-mobile-photo-zoom>button{width:36px!important;height:34px!important;min-height:34px!important;padding:0!important;border-radius:10px!important;font-size:20px!important;line-height:1!important;background:#f3f7f7!important}











  .czs-mobile-photo-zoom label{display:grid!important;grid-template-columns:auto minmax(0,1fr) 42px!important;align-items:center!important;gap:7px!important;margin:0!important;font-size:10px!important;font-weight:800!important;color:#35545a!important}











  .czs-mobile-photo-zoom input[type=range]{width:100%!important;min-width:0!important;accent-color:#00353f!important}











  .czs-mobile-photo-zoom output{font-size:9px!important;text-align:right!important;color:#647b80!important;font-variant-numeric:tabular-nums!important}











  .czs-selection-actions .czs-crop-photo,.czs-selection-actions .czs-remove-bg,.czs-selection-actions .czs-restore-photo{font-size:9px!important}























  /* Cuando no hay foto seleccionada la barra vuelve a una única fila limpia. */











  .czs-selection-actions:has(.czs-mobile-photo-zoom[hidden]){flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start!important;max-height:54px!important}











}











@media(max-width:420px){











  .czs-client-head{flex-basis:58px!important;height:58px!important;min-height:58px!important}











  .czs-head-product strong{font-size:13px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important}











  .czs-selection-actions:not([hidden]){left:6px!important;right:6px!important;bottom:72px!important}











  .czs-face-surface.has-mockup{width:min(calc(100vw - 20px),calc(100dvh - 230px),500px)!important}











}













/* ==========================================================================
   v0.43.207 · Mobile viewport limpio
   - El inspector del elemento vive fuera de la topbar y queda fijo sobre el dock.
   - Los placeholders vacíos no enseñan acciones.
   - El lienzo se dimensiona con el alto útil real del teléfono.
   ========================================================================== */
@media(max-width:768px){
  .czs-work-topbar .czs-selection-actions{display:none!important}

  .czs-selection-actions.czs-mobile-inspector:not([hidden]){
    display:flex!important;position:fixed!important;left:8px!important;right:8px!important;bottom:calc(76px + env(safe-area-inset-bottom))!important;top:auto!important;
    z-index:10020!important;box-sizing:border-box!important;width:auto!important;max-width:none!important;max-height:132px!important;
    flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;padding:7px!important;
    border:1px solid rgba(0,53,63,.14)!important;border-radius:16px!important;background:rgba(255,255,255,.98)!important;
    box-shadow:0 10px 32px rgba(0,0,0,.20)!important;-webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important;
    overflow-x:auto!important;overflow-y:auto!important;overscroll-behavior:contain!important;transform:none!important;
  }
  .czs-selection-actions.czs-mobile-inspector[hidden]{display:none!important}
  .czs-selection-actions.czs-mobile-inspector button{flex:0 0 auto!important;min-height:36px!important;padding:6px 9px!important;font-size:10px!important;border-radius:10px!important}
  .czs-selection-actions.czs-mobile-inspector .czs-mobile-photo-zoom:not([hidden]){
    order:-1!important;display:grid!important;grid-template-columns:38px minmax(0,1fr) 38px!important;flex:1 0 100%!important;width:100%!important;
    padding:0 0 6px!important;margin:0!important;border-bottom:1px solid #e4ecee!important;
  }

  /* Menos alto visual: el cuadrado nunca invade cabecera/dock/inspector. */
  .czs-canvas-stage{padding:10px 10px 92px!important;gap:8px!important}
  .czs-face-surface.has-mockup{
    width:min(calc(100vw - 20px),calc(100dvh - 230px),520px)!important;
    max-width:calc(100vw - 20px)!important;
  }
  .czs-face-surface:not(.has-mockup) .czs-canvas-wrap,
  .czs-face-surface:not(.has-mockup) .czs-canvas-wrap.czs-product-frame-enabled{
    width:min(calc(100vw - 28px),calc(100dvh - 238px),500px)!important;
    max-width:calc(100vw - 28px)!important;
  }
  .czs-canvas-stage>.czs-mobile-view3d{min-height:42px!important;height:42px!important;margin-top:2px!important;border-radius:12px!important;font-size:12px!important}
  .czs-client-work{padding-bottom:calc(72px + env(safe-area-inset-bottom))!important}

  /* Dock con altura real + safe area de iPhone. */
  .czs-client-tools{
    height:calc(70px + env(safe-area-inset-bottom))!important;
    min-height:calc(70px + env(safe-area-inset-bottom))!important;
    padding:5px 5px calc(5px + env(safe-area-inset-bottom))!important;
  }
}
@media(max-width:420px){
  .czs-client-head{padding:6px 8px!important;gap:5px!important}
  .czs-head-product{min-width:0!important}
  .czs-head-product strong{font-size:12px!important;max-width:100%!important}
  .czs-head-history{gap:3px!important}
  .czs-head-history .czs-icon-btn{width:34px!important;height:34px!important;min-width:34px!important}
  .czs-head-actions .czs-primary-btn{min-height:38px!important;padding:7px 11px!important;font-size:11px!important}
  .czs-selection-actions.czs-mobile-inspector:not([hidden]){left:6px!important;right:6px!important}
}












/* v0.43.208 · Inspector móvil por modos, estilo app */











.czs-mobile-action-tabs{display:none}











@media(max-width:768px){











  .czs-selection-actions.czs-mobile-inspector:not([hidden]){











    left:10px!important;right:10px!important;bottom:calc(78px + env(safe-area-inset-bottom))!important;











    max-height:min(230px,42dvh)!important;padding:7px!important;overflow:hidden!important;display:block!important;











  }











  .czs-mobile-action-tabs{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:5px!important;width:100%!important}











  .czs-mobile-action-tabs button{min-width:0!important;width:100%!important;min-height:40px!important;padding:6px 3px!important;border:0!important;background:transparent!important;color:#35545a!important;font-size:11px!important;font-weight:800!important}











  .czs-mobile-action-tabs button.is-active{background:#edf4f5!important;color:#00353f!important}











  .czs-selection-actions.czs-mobile-inspector>button,











  .czs-selection-actions.czs-mobile-inspector>.czs-mobile-photo-zoom,











  .czs-selection-actions.czs-mobile-inspector>.czs-clip-color-control,











  .czs-selection-actions.czs-mobile-inspector>.czs-quality-badge{display:none!important}











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="zoom"]>.czs-mobile-photo-zoom:not([hidden]){display:grid!important;margin-top:7px!important;padding:8px 4px 2px!important;border-top:1px solid #e4ecee!important;border-bottom:0!important}











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="rotate"]>.czs-rotate-left,











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="rotate"]>.czs-rotate-right{display:inline-flex!important;margin-top:7px!important;width:calc(50% - 4px)!important;min-height:42px!important;font-size:12px!important}











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="edit"]>.czs-crop-photo:not([hidden]),











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="edit"]>.czs-remove-bg:not([hidden]),











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="edit"]>.czs-restore-photo:not([hidden]){display:inline-flex!important;margin-top:7px!important}











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="edit"]>.czs-clip-color-control:not([hidden]){display:inline-flex!important;margin-top:7px!important}











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="more"]>.czs-center-item,











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="more"]>.czs-send-back,











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="more"]>.czs-bring-front,











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="more"]>.czs-duplicate,











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="more"]>.czs-delete{display:inline-flex!important;margin-top:7px!important}











  .czs-canvas-stage>.czs-mobile-view3d{position:absolute!important;right:14px!important;bottom:calc(82px + env(safe-area-inset-bottom))!important;width:auto!important;min-width:64px!important;min-height:38px!important;height:38px!important;padding:0 13px!important;border-radius:20px!important;z-index:120!important;box-shadow:0 5px 18px rgba(0,0,0,.14)!important}











  .czs-canvas-stage{position:relative!important;padding-bottom:105px!important}











}























/* ==========================================================================











   v0.43.209 · Mobile Studio simplificado











   - Sólo cabecera + lienzo + dock.











   - Inspector contextual compacto (Editar / Zoom / …).











   - Paneles de herramientas como bottom-sheet.











   - 3D ocupa la pantalla móvil en vez de apilarse bajo el lienzo.











   ========================================================================== */











@media(max-width:768px){











  .czs-editor.czs-client{min-height:100dvh!important;background:#f4f7f7!important;overflow:hidden!important}











  .czs-client-head{position:sticky!important;top:0!important;z-index:10030!important;height:60px!important;min-height:60px!important;padding:6px 8px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;gap:6px!important;background:rgba(255,255,255,.97)!important;-webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important}











  .czs-head-product{min-width:0!important}











  .czs-head-product span{display:none!important}











  .czs-head-product strong{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:13px!important;line-height:1.2!important}











  .czs-head-history{display:flex!important;gap:4px!important}











  .czs-head-history .czs-save-state{display:none!important}











  .czs-head-history .czs-icon-btn{width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;border-radius:10px!important}











  .czs-head-actions{display:block!important}











  .czs-head-actions .czs-primary-btn{min-height:40px!important;padding:0 13px!important;border-radius:12px!important;font-size:12px!important}























  .czs-client-shell{display:block!important;min-height:0!important;height:calc(100dvh - 60px)!important;overflow:hidden!important}











  .czs-client-work{display:block!important;height:calc(100dvh - 60px)!important;min-height:0!important;padding:0 0 calc(68px + env(safe-area-inset-bottom))!important;overflow:hidden!important;background:#f4f7f7!important}











  .czs-work-topbar{display:none!important}











  .czs-canvas-stage{height:100%!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:10px 10px calc(82px + env(safe-area-inset-bottom))!important;overflow:hidden!important;position:relative!important}











  .czs-face-surface,.czs-face-surface.has-mockup{width:min(calc(100vw - 20px),calc(100dvh - 174px),560px)!important;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 174px)!important;margin:0 auto!important}











  .czs-face-surface:not(.has-mockup) .czs-canvas-wrap,.czs-face-surface:not(.has-mockup) .czs-canvas-wrap.czs-product-frame-enabled{width:min(calc(100vw - 24px),calc(100dvh - 174px),540px)!important;max-width:calc(100vw - 24px)!important;margin:0 auto!important}











  .czs-canvas{box-shadow:0 8px 26px rgba(0,0,0,.10)!important}























  /* Dock principal */











  .czs-client-tools{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:10040!important;height:calc(64px + env(safe-area-inset-bottom))!important;min-height:calc(64px + env(safe-area-inset-bottom))!important;padding:4px 4px calc(4px + env(safe-area-inset-bottom))!important;background:#00353f!important;display:grid!important;grid-auto-flow:column!important;grid-auto-columns:1fr!important;border:0!important;box-shadow:0 -5px 20px rgba(0,0,0,.12)!important}











  .czs-client-tools button{min-width:0!important;height:56px!important;border-radius:12px!important;padding:5px 2px!important;font-size:9px!important;gap:2px!important}











  .czs-client-tools button.is-active{background:#fff!important;color:#00353f!important}























  /* Bottom sheet de Plantillas/Diseño/Fotos/Texto/Cliparts */











  .czs-client-side{display:block!important;position:fixed!important;left:0!important;right:0!important;bottom:calc(64px + env(safe-area-inset-bottom))!important;top:auto!important;z-index:10035!important;width:100%!important;max-height:min(56dvh,520px)!important;padding:18px 14px 16px!important;border:0!important;border-radius:20px 20px 0 0!important;background:#fff!important;box-shadow:0 -14px 45px rgba(0,0,0,.22)!important;transform:translateY(calc(100% + 24px))!important;opacity:0!important;visibility:hidden!important;transition:transform .22s ease,opacity .18s ease,visibility .18s!important;overflow:auto!important}











  .czs-client-side:before{content:"";display:block;width:44px;height:5px;border-radius:999px;background:#d4dddf;margin:-8px auto 10px!important}











  .czs-client-side.is-mobile-open{transform:translateY(0)!important;opacity:1!important;visibility:visible!important}











  .czs-mobile-panel-close{display:grid!important;place-items:center!important;position:absolute!important;right:12px!important;top:10px!important;width:34px!important;height:34px!important;border-radius:50%!important;background:#f0f4f4!important;border:0!important}











  .czs-mobile-sheet-backdrop{position:fixed!important;inset:60px 0 calc(64px + env(safe-area-inset-bottom)) 0!important;z-index:10034!important;background:rgba(0,20,24,.20)!important;border:0!important;padding:0!important}























  /* Barra contextual mínima; no ocupa media pantalla. */











  .czs-selection-actions.czs-mobile-inspector:not([hidden]){display:block!important;position:fixed!important;left:50%!important;right:auto!important;bottom:calc(72px + env(safe-area-inset-bottom))!important;top:auto!important;z-index:10045!important;width:min(300px,calc(100vw - 24px))!important;max-height:150px!important;transform:translateX(-50%)!important;padding:5px!important;border:1px solid rgba(0,53,63,.12)!important;border-radius:15px!important;background:rgba(255,255,255,.98)!important;box-shadow:0 8px 25px rgba(0,0,0,.16)!important;overflow:hidden!important}











  .czs-mobile-action-tabs{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:4px!important}











  .czs-mobile-action-tabs button{min-height:36px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#34545a!important;font-size:11px!important;font-weight:800!important}











  .czs-mobile-action-tabs button.is-active{background:#edf4f5!important;color:#00353f!important}











  .czs-selection-actions.czs-mobile-inspector>button,.czs-selection-actions.czs-mobile-inspector>.czs-mobile-photo-zoom,.czs-selection-actions.czs-mobile-inspector>.czs-clip-color-control,.czs-selection-actions.czs-mobile-inspector>.czs-quality-badge{display:none!important}











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="zoom"]>.czs-mobile-photo-zoom:not([hidden]){display:grid!important;grid-template-columns:34px minmax(0,1fr) 34px!important;gap:7px!important;align-items:center!important;margin-top:5px!important;padding:7px 2px 2px!important;border-top:1px solid #e6eded!important}











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="edit"]>.czs-crop-photo:not([hidden]),.czs-selection-actions.czs-mobile-inspector[data-mobile-mode="edit"]>.czs-remove-bg:not([hidden]),.czs-selection-actions.czs-mobile-inspector[data-mobile-mode="edit"]>.czs-restore-photo:not([hidden]),.czs-selection-actions.czs-mobile-inspector[data-mobile-mode="edit"]>.czs-clip-color-control:not([hidden]){display:inline-flex!important;margin-top:5px!important;min-height:34px!important;font-size:10px!important}











  .czs-selection-actions.czs-mobile-inspector[data-mobile-mode="more"]>.czs-rotate-left,.czs-selection-actions.czs-mobile-inspector[data-mobile-mode="more"]>.czs-rotate-right,.czs-selection-actions.czs-mobile-inspector[data-mobile-mode="more"]>.czs-center-item,.czs-selection-actions.czs-mobile-inspector[data-mobile-mode="more"]>.czs-send-back,.czs-selection-actions.czs-mobile-inspector[data-mobile-mode="more"]>.czs-bring-front,.czs-selection-actions.czs-mobile-inspector[data-mobile-mode="more"]>.czs-duplicate,.czs-selection-actions.czs-mobile-inspector[data-mobile-mode="more"]>.czs-delete{display:inline-flex!important;margin-top:5px!important;min-height:34px!important;font-size:10px!important}























  /* Botón 3D pequeño; la vista real es fullscreen. */











  .czs-canvas-stage>.czs-mobile-view3d{display:block!important;position:absolute!important;right:16px!important;bottom:calc(88px + env(safe-area-inset-bottom))!important;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;padding:0!important;border:0!important;border-radius:50%!important;background:#00353f!important;color:#fff!important;font-size:0!important;box-shadow:0 7px 20px rgba(0,0,0,.20)!important;z-index:120!important}











  .czs-canvas-stage>.czs-mobile-view3d:after{content:"3D";font-size:12px;font-weight:900!important}











  .czs-3d-stage{display:none!important}











  .czs-3d-stage.is-mobile-visible{display:flex!important;position:fixed!important;inset:0!important;z-index:10060!important;width:100vw!important;height:100dvh!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;background:#f4f7f7!important;box-shadow:none!important}











  .czs-3d-stage.is-mobile-visible .czs-3d-head{height:58px!important;min-height:58px!important;background:#fff!important;padding:0 10px!important}











  .czs-3d-stage.is-mobile-visible .czs-3d-head strong{display:none!important}











  .czs-3d-stage.is-mobile-visible .czs-toggle-3d{margin-right:auto!important;border:0!important;background:#eef4f5!important;min-height:38px!important;padding:0 13px!important;border-radius:11px!important;font-size:12px!important}











  .czs-3d-stage.is-mobile-visible .czs-expand-3d,.czs-3d-stage.is-mobile-visible .czs-close-3d{display:none!important}











  .czs-3d-stage.is-mobile-visible .czs-3d-viewport{flex:1!important;min-height:0!important;height:auto!important}











  .czs-3d-stage.is-mobile-visible .czs-model-viewer,.czs-3d-stage.is-mobile-visible .czs-parametric-mug-wrap{height:100%!important;min-height:0!important}











  .czs-3d-stage.is-mobile-visible .czs-3d-hint{bottom:18px!important}











}











@media(max-width:768px){html.czs-mobile-3d-open,body.czs-mobile-3d-open{overflow:hidden!important;overscroll-behavior:none!important}}



































/* ==========================================================================











   v0.43.211 · Menús móviles sin inspector superpuesto











   Cuando se abre Plantillas/Diseño/Fotos/Texto/Cliparts ocultamos temporalmente











   la barra contextual (Editar/Zoom/…) para que el panel inferior tenga una sola











   jerarquía visual. Al cerrar el panel, la selección se conserva y el inspector











   vuelve a mostrarse automáticamente.











   ========================================================================== */











@media(max-width:768px){











  .czs-editor.czs-mobile-sheet-open .czs-selection-actions.czs-mobile-inspector{











    display:none!important;











  }











}























/* v0.43.212 · 3D móvil: carga diferida y textura siempre actual */











@media(max-width:768px){











  .czs-3d-stage.is-mobile-visible.is-mobile-loading .czs-3d-viewport{position:relative!important}











  .czs-3d-stage.is-mobile-visible.is-mobile-loading .czs-3d-viewport:after{











    content:"Preparando vista 3D…";position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;











    background:rgba(255,255,255,.88);color:#00353f;font-size:13px;font-weight:800;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)











  }











}



































/* ==========================================================================











   v0.43.214 · Volver al producto junto a Continuar











   Mismo sitio en escritorio y móvil. No sustituye ni modifica Vista 3D.











   ========================================================================== */











.czs-head-actions{display:flex;align-items:center;gap:8px}











.czs-back-product{white-space:nowrap;min-height:40px;padding:0 13px;border-color:#cbd7d9;background:#fff;color:#00353f}











@media(max-width:768px){











  .czs-head-actions{display:flex!important;align-items:center!important;gap:5px!important}











  .czs-back-product{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:38px!important;min-height:38px!important;padding:0 9px!important;border-radius:11px!important;font-size:10px!important;font-weight:800!important}











  .czs-head-actions .czs-continue{height:38px!important;min-height:38px!important;padding:0 10px!important;font-size:10px!important}











}











@media(max-width:390px){











  .czs-back-product{padding:0 7px!important;font-size:9px!important}











  .czs-head-actions .czs-continue{padding:0 8px!important;font-size:9px!important}











}























/* ========================================================================== 











   v0.43.216 · Vertical / Horizontal también visible en móvil











   La topbar de escritorio está oculta en la interfaz app, por eso el selector











   de orientación se ancla al escenario. Solo existe si la cara lo permite.











   ========================================================================== */











@media(max-width:768px){











  .czs-canvas-stage>.czs-orientation-switch{











    display:inline-flex!important;











    position:absolute!important;











    top:10px!important;











    left:50%!important;











    transform:translateX(-50%)!important;











    z-index:125!important;











    width:auto!important;











    max-width:calc(100vw - 24px)!important;











    margin:0!important;











    padding:4px!important;











    gap:4px!important;











    justify-content:center!important;











    background:rgba(255,255,255,.97)!important;











    border:1px solid rgba(0,53,63,.14)!important;











    border-radius:12px!important;











    box-shadow:0 5px 18px rgba(0,0,0,.10)!important;











    -webkit-backdrop-filter:blur(10px)!important;











    backdrop-filter:blur(10px)!important;











  }











  .czs-canvas-stage>.czs-orientation-switch[hidden]{display:none!important}











  .czs-canvas-stage>.czs-orientation-switch button{











    min-height:34px!important;











    padding:0 10px!important;











    border-radius:9px!important;











    font-size:10px!important;











    line-height:1!important;











  }











  /* Dejar hueco visual para el selector sin reducir el área útil de diseño. */











  .czs-canvas-stage:has(>.czs-orientation-switch:not([hidden])){











    padding-top:54px!important;











  }











}



































/* v0.43.226 · mockup 2D responsive unificado.











   La medida del contenedor la decide JS usando ancho+alto útiles; estas reglas











   impiden que los estilos móviles genéricos vuelvan a forzarlo a 100vw. */











.czs-face-surface.has-mockup{











  flex:0 0 auto!important;











  align-self:center!important;











}











.czs-face-surface.has-mockup .czs-canvas-wrap{











  max-width:none!important;











  margin:0!important;











}











@media(max-width:768px){











  .czs-face-surface.has-mockup{











    width:var(--czs-mockup-side,auto);











    max-width:calc(100% - 8px)!important;











    height:auto;











    aspect-ratio:1/1!important;











    margin:0 auto!important;











  }











  .czs-face-surface.has-mockup .czs-canvas-wrap{











    position:absolute!important;











    left:var(--czs-zone-x)!important;











    top:var(--czs-zone-y)!important;











    width:var(--czs-zone-w)!important;











    height:var(--czs-zone-h)!important;











  }











  .czs-face-surface.has-mockup .czs-canvas{











    width:100%!important;











    height:100%!important;











  }











}



































/* v0.43.227 · mockup 2D móvil: tamaño realmente contenido y placeholder limpio.











   Esta regla final neutraliza cualquier bloque responsive histórico que intentara











   volver a expandir el mockup al ancho completo del viewport. */











.czs-face-surface.has-mockup .czs-canvas:before{display:none!important;content:none!important}











@media(max-width:768px){











  .czs-editor:not(.czs-is-cushion3d) .czs-canvas-stage .czs-face-surface.has-mockup,











  .czs-face-surface.has-mockup{











    width:var(--czs-mockup-side,360px)!important;











    height:var(--czs-mockup-side,360px)!important;











    min-width:0!important;











    min-height:0!important;











    max-width:min(calc(100vw - 28px),400px)!important;











    max-height:min(calc(100dvh - 250px),400px)!important;











    flex:0 0 auto!important;











    margin:0 auto!important;











    aspect-ratio:1/1!important;











  }











  .czs-face-surface.has-mockup .czs-canvas-wrap{











    left:var(--czs-zone-x)!important;











    top:var(--czs-zone-y)!important;











    width:var(--czs-zone-w)!important;











    height:var(--czs-zone-h)!important;











  }











}



































/* v0.43.228 · placeholder de subida visible sobre mockups opacos.











   Sólo mientras el hueco automático está vacío elevamos la zona por encima











   del mockup. En cuanto entra una foto, recupera el orden de capas configurado. */











.czs-face-surface.has-mockup.czs-empty-click-upload .czs-canvas-wrap{z-index:40!important;}











.czs-face-surface.has-mockup.czs-empty-click-upload .czs-face-auto-photo{z-index:45!important;}











.czs-face-surface.has-mockup.czs-empty-click-upload .czs-face-auto-photo .czs-photo-placeholder-button{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;}



































/* v0.43.229 · Placeholder independiente para huecos de mockup 2D.











   Se dibuja como hijo directo de la superficie para que ningún PNG/WebP opaco,











   stacking-context o regla responsive pueda ocultarlo. Solo aparece sin foto. */











.czs-mockup-empty-upload-overlay{











  position:absolute!important;z-index:80!important;box-sizing:border-box!important;











  border:2px dashed rgba(0,126,136,.78)!important;











  background:repeating-linear-gradient(45deg,rgba(248,251,251,.94) 0 12px,rgba(241,246,246,.94) 12px 24px)!important;











  color:#00353f!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;











  padding:10px;text-align:center;cursor:pointer;overflow:hidden;pointer-events:auto!important;











  font-family:inherit;box-shadow:none!important;











}











.czs-mockup-empty-upload-overlay[hidden]{display:none!important}











.czs-mockup-empty-upload-overlay.is-circle{border-radius:50%!important}











.czs-mockup-empty-upload-overlay .czs-upload-icon{font-size:22px;line-height:1}











.czs-mockup-empty-upload-overlay strong{font-size:12px;line-height:1.2;letter-spacing:.02em}











.czs-mockup-empty-upload-overlay small{font-size:10px;line-height:1.35;font-weight:600;color:#4c666b}











@media(max-width:768px){











  .czs-mockup-empty-upload-overlay strong{font-size:11px}











  .czs-mockup-empty-upload-overlay small{font-size:9px}











}























/* v0.43.234 · Zoom real de VISTA (mockup + área de impresión). */





.czs-canvas-stage{position:relative}





.czs-view-zoom{position:absolute;right:18px;top:14px;z-index:180;display:flex;align-items:center;gap:5px;padding:5px;border:1px solid rgba(0,53,63,.14);border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 5px 18px rgba(0,0,0,.10);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}





.czs-view-zoom button{height:34px;min-width:34px;padding:0 9px;border:1px solid #d9e4e6;border-radius:8px;background:#fff;color:#00353f;font-size:12px;font-weight:800;cursor:pointer}





.czs-view-zoom button:disabled{opacity:.4;cursor:default}





.czs-view-zoom-value{min-width:54px!important}





.czs-view-zoom-fit{min-width:62px!important}





.czs-canvas-stage.czs-view-is-zoomed{align-items:flex-start!important;justify-content:flex-start!important}





.czs-canvas-stage.czs-view-is-zoomed>.czs-face-surface{flex:0 0 auto;margin:auto!important}





@media(max-width:768px){





  .czs-view-zoom{position:fixed!important;left:50%!important;right:auto!important;top:auto!important;bottom:calc(76px + env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;z-index:10044!important;padding:4px!important;gap:4px!important;border-radius:14px!important}





  .czs-view-zoom button{height:38px!important;min-width:38px!important;padding:0 8px!important;border-radius:10px!important}





  .czs-view-zoom-value{min-width:52px!important}





  .czs-view-zoom-fit{min-width:58px!important;font-size:10px!important}





  .czs-canvas-stage.czs-view-is-zoomed{overflow:auto!important;-webkit-overflow-scrolling:touch!important;align-items:flex-start!important;justify-content:flex-start!important;padding-top:56px!important}





  .czs-canvas-stage.czs-view-is-zoomed>.czs-face-surface{max-width:none!important;max-height:none!important;margin:auto!important}





  .czs-editor.czs-mobile-sheet-open .czs-view-zoom{display:none!important}





}



/* v0.43.254 · Modal moderno para confirmaciones críticas de Studio */

html.czs-confirm-open, html.czs-confirm-open body { overflow:hidden !important; }

.czs-confirm-overlay {

  position:fixed !important; inset:0 !important; z-index:2147483647 !important;

  display:flex !important; align-items:center !important; justify-content:center !important;

  padding:20px !important; margin:0 !important; box-sizing:border-box !important;

  background:rgba(8,22,25,.62) !important;

  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);

}

.czs-confirm-dialog {

  position:relative !important; display:block !important; width:min(520px,94vw) !important;

  max-width:520px !important; margin:0 !important; box-sizing:border-box !important;

  background:#fff !important; border:1px solid rgba(0,53,63,.12) !important; border-radius:20px !important;

  box-shadow:0 30px 100px rgba(0,0,0,.30) !important; padding:28px !important; color:#17363c !important;

  animation:czsConfirmIn .16s ease-out; font-family:inherit !important; text-align:left !important;

}

.czs-confirm-x {

  position:absolute !important; right:14px !important; top:14px !important; width:34px !important; height:34px !important;

  border:0 !important; border-radius:9px !important; background:#f2f6f6 !important; color:#577076 !important;

  font-size:16px !important; font-weight:800 !important; cursor:pointer !important; padding:0 !important; line-height:34px !important;

}

.czs-confirm-x:hover { background:#e8efef !important; color:#00353f !important; }

.czs-confirm-icon {

  width:46px !important; height:46px !important; border-radius:50% !important; display:grid !important; place-items:center !important;

  margin:0 0 16px !important; background:#eef6f6 !important; color:#00353f !important; border:1px solid rgba(0,53,63,.13) !important;

  font-size:24px !important; font-weight:900 !important;

}

.czs-confirm-copy { padding-right:12px !important; }

.czs-confirm-title { display:block !important; font-size:21px !important; line-height:1.2 !important; color:#00353f !important; margin:0 0 12px !important; font-weight:800 !important; }

.czs-confirm-message { font-size:14px !important; line-height:1.65 !important; color:#405b61 !important; margin:0 !important; }

.czs-confirm-warning { margin-top:14px !important; padding:12px 14px !important; border-radius:12px !important; background:#f7f1e8 !important; color:#6a4b24 !important; font-size:13px !important; line-height:1.55 !important; font-weight:700 !important; }

.czs-confirm-actions { display:flex !important; justify-content:flex-end !important; gap:10px !important; margin-top:24px !important; }

.czs-confirm-actions button { min-height:42px !important; padding:0 18px !important; border-radius:10px !important; font:inherit !important; font-size:13px !important; font-weight:800 !important; cursor:pointer !important; width:auto !important; }

.czs-confirm-cancel { border:1px solid #d7e2e4 !important; background:#fff !important; color:#405b61 !important; }

.czs-confirm-accept { border:1px solid #00353f !important; background:#00353f !important; color:#fff !important; }

.czs-confirm-cancel:hover { background:#f6f9f9 !important; }

.czs-confirm-accept:hover { filter:brightness(1.08); }

@keyframes czsConfirmIn { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }

@media(max-width:600px) {

  .czs-confirm-overlay { padding:12px !important; align-items:flex-end !important; }

  .czs-confirm-dialog { width:100% !important; max-width:none !important; border-radius:18px !important; padding:24px 18px 18px !important; }

  .czs-confirm-title { font-size:19px !important; }

  .czs-confirm-actions { flex-direction:column-reverse !important; }

  .czs-confirm-actions button { width:100% !important; }

}





/* v0.43.255 · Plantillas: vista previa moderna al pasar el cursor */
.czstudio .czs-template-thumb, .czs-template-thumb {
  position:relative !important;
  overflow:hidden !important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
  transform-origin:center center !important;
}
.czstudio .czs-template-thumb.is-portrait, .czs-template-thumb.is-portrait { aspect-ratio:3/4 !important; }
.czstudio .czs-template-thumb.is-landscape, .czs-template-thumb.is-landscape { aspect-ratio:4/3 !important; }
.czstudio .czs-template-thumb.is-both, .czs-template-thumb.is-both { aspect-ratio:4/3 !important; }
.czstudio .czs-template-thumb > img, .czs-template-thumb > img,
.czstudio .czs-template-mini-canvas, .czs-template-mini-canvas {
  transition:transform .28s cubic-bezier(.2,.7,.2,1) !important;
}
.czstudio .czs-template:hover .czs-template-thumb, .czs-template:hover .czs-template-thumb {
  border-color:#00353f !important;
  box-shadow:0 8px 22px rgba(0,53,63,.14) !important;
}
.czstudio .czs-template:hover .czs-template-thumb > img, .czs-template:hover .czs-template-thumb > img,
.czstudio .czs-template:hover .czs-template-mini-canvas, .czs-template:hover .czs-template-mini-canvas {
  transform:scale(1.055) !important;
}
.czstudio .czs-template-preview-label, .czs-template-preview-label {
  position:absolute !important;
  z-index:20 !important;
  left:50% !important;
  bottom:10px !important;
  transform:translate(-50%,8px) !important;
  opacity:0 !important;
  pointer-events:none !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  background:rgba(0,53,63,.92) !important;
  color:#fff !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  box-shadow:0 4px 14px rgba(0,0,0,.16) !important;
  transition:opacity .18s ease, transform .18s ease !important;
}
.czstudio .czs-template:hover .czs-template-preview-label, .czs-template:hover .czs-template-preview-label {
  opacity:1 !important;
  transform:translate(-50%,0) !important;
}
@media (hover:none) {
  .czstudio .czs-template-preview-label, .czs-template-preview-label { display:none !important; }
}

/* v0.43.257 · Galería modal de plantillas completas */

/* v0.43.258 · Galería de plantillas: modal viewport, 2 columnas escritorio / 1 móvil */
.czs-editor .czs-open-template-gallery{width:100%;min-height:46px;border:0;border-radius:12px;background:#00353f;color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;padding:11px 14px}
.czs-editor .czs-open-template-gallery:hover{filter:brightness(1.08)}
.czs-editor .czs-template-side-note{margin-top:10px;padding:10px 11px;border:1px solid #dbe6e8;border-radius:10px;background:#f7fafa;color:#647b80;font-size:10px;line-height:1.45}
.czs-template-gallery-modal{position:fixed;inset:0;z-index:100000;background:rgba(8,27,31,.62);display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;backdrop-filter:blur(3px)}
.czs-template-gallery-dialog{width:min(1180px,94vw);max-height:92vh;display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.28);overflow:hidden}
.czs-template-gallery-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 26px 10px;flex:0 0 auto}
.czs-template-gallery-head h3{margin:0;color:#102f35;font-size:22px;line-height:1.2}.czs-template-gallery-head p{margin:6px 0 0;color:#718489;font-size:12px}
.czs-template-gallery-close{width:40px;height:40px;border:0;background:transparent;color:#17363c;font-size:30px;line-height:1;cursor:pointer;border-radius:10px}.czs-template-gallery-close:hover{background:#f0f5f5}
.czs-template-gallery-filters{display:flex;gap:7px;overflow-x:auto;padding:0 26px 14px;flex:0 0 auto}.czs-template-gallery-filters button{white-space:nowrap;border:1px solid #d7e1e3;background:#fff;color:#36565c;border-radius:999px;padding:8px 14px;font-size:11px;font-weight:800;cursor:pointer}.czs-template-gallery-filters button.active{background:#00353f;color:#fff;border-color:#00353f}
.czs-template-gallery-grid{overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:4px 26px 26px;overscroll-behavior:contain}
.czs-template-gallery-card{min-width:0;border:1px solid #d9e4e6;background:#fff;border-radius:13px;padding:10px;cursor:pointer;text-align:left;transition:border-color .15s ease,box-shadow .15s ease}.czs-template-gallery-card:hover{border-color:#00353f;box-shadow:0 7px 20px rgba(0,53,63,.10)}
.czs-template-gallery-preview{position:relative;width:100%;height:270px;background:#f8fafa;border:1px solid #e0e9ea;border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.czs-template-gallery-preview>.czs-template-mini-canvas{position:relative!important;inset:auto!important;overflow:hidden!important;background:#fff!important;flex:none}
.czs-template-gallery-preview.is-landscape>.czs-template-mini-canvas,.czs-template-gallery-preview.is-both>.czs-template-mini-canvas{width:100%;height:auto;aspect-ratio:20/9}
.czs-template-gallery-preview.is-portrait>.czs-template-mini-canvas{height:100%;width:auto;aspect-ratio:3/4}
.czs-template-gallery-preview>img{display:block;max-width:100%;max-height:100%;width:auto!important;height:auto!important;object-fit:contain!important}
.czs-template-gallery-meta{padding:9px 2px 2px}.czs-template-gallery-meta b{display:block;color:#102f35;font-size:12px}.czs-template-gallery-meta small{display:block;margin-top:3px;color:#7a8d91;font-size:9px}
@media(max-width:767px){
 .czs-template-gallery-modal{padding:0;align-items:stretch}
 .czs-template-gallery-dialog{width:100%;max-height:none;height:100%;border-radius:0}
 .czs-template-gallery-head{padding:16px 16px 9px}.czs-template-gallery-head h3{font-size:20px}
 .czs-template-gallery-filters{padding:0 16px 12px}
 .czs-template-gallery-grid{grid-template-columns:1fr;gap:12px;padding:4px 12px 22px}
 .czs-template-gallery-preview{height:250px}
}


/* v0.43.259 · Indicadores de foto siempre visibles + botón de galería moderno */
.czs-template-mini-canvas .czs-preview-photo-marker{
  position:absolute!important;
  z-index:999!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  border:0!important;
  outline:0!important;
  background:rgba(247,250,250,.18)!important;
  pointer-events:none!important;
  transform-origin:center center!important;
  overflow:visible!important;
}
.czs-template-mini-canvas .czs-preview-photo-marker>span{
  position:relative!important;
  inset:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:22px!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(0,53,63,.14)!important;
  box-shadow:0 2px 8px rgba(0,53,63,.08)!important;
  color:#315b62!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.czs-template-mini-canvas-thumb{position:relative!important;width:100%!important;height:100%!important}
.czs-template-mini-canvas-thumb>.czs-template-thumb-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important}

.czs-open-template-gallery{
  width:100%!important;
  min-height:58px!important;
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) 30px!important;
  align-items:center!important;
  gap:10px!important;
  padding:9px 10px!important;
  border:1px solid #00353f!important;
  border-radius:12px!important;
  background:#00353f!important;
  color:#fff!important;
  text-align:left!important;
  cursor:pointer!important;
  box-shadow:0 5px 14px rgba(0,53,63,.14)!important;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease!important;
}
.czs-open-template-gallery:hover{
  background:#064751!important;
  box-shadow:0 8px 20px rgba(0,53,63,.20)!important;
  transform:translateY(-1px)!important;
  filter:none!important;
}
.czs-open-template-gallery:active{transform:translateY(0)!important}
.czs-open-template-gallery:focus-visible{outline:3px solid rgba(0,53,63,.2)!important;outline-offset:3px!important}
.czs-open-template-gallery-icon{
  width:36px!important;height:36px!important;display:grid!important;place-items:center!important;
  border-radius:9px!important;background:rgba(255,255,255,.13)!important;color:#fff!important;
  font-size:18px!important;font-weight:700!important;
}
.czs-open-template-gallery-copy{display:block!important;min-width:0!important;color:#fff!important}
.czs-open-template-gallery-copy strong{display:block!important;color:#fff!important;font-size:12px!important;line-height:1.15!important;font-weight:800!important}
.czs-open-template-gallery-copy small{display:block!important;margin-top:3px!important;color:rgba(255,255,255,.72)!important;font-size:9px!important;line-height:1.2!important;font-weight:600!important}
.czs-open-template-gallery-arrow{
  width:28px!important;height:28px!important;display:grid!important;place-items:center!important;
  border-radius:999px!important;background:#fff!important;color:#00353f!important;font-size:16px!important;font-weight:900!important;
}

/* v0.43.261 · Botón compacto de galería para panel lateral estrecho */
.czs-editor .czs-open-template-gallery,
.czs-open-template-gallery {
  width: 100% !important;
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0,1fr) 22px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 0 0 !important;
  padding: 7px 9px !important;
  border: 1px solid #00353f !important;
  border-radius: 10px !important;
  background: #00353f !important;
  color: #fff !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(0,53,63,.12) !important;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease !important;
  overflow: hidden !important;
}
.czs-editor .czs-open-template-gallery:hover,
.czs-open-template-gallery:hover {
  background: #064751 !important;
  box-shadow: 0 5px 14px rgba(0,53,63,.18) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}
.czs-open-template-gallery-icon {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.13) !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
.czs-open-template-gallery-copy {
  min-width: 0 !important;
  display: block !important;
  color: #fff !important;
}
.czs-open-template-gallery-copy strong {
  display: block !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.czs-open-template-gallery-copy small { display:none !important; }
.czs-open-template-gallery-arrow {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}
.czs-template-side-note { display:none !important; }


/* v0.43.261 · Galería de plantillas: zonas de foto sin borde discontinuo */
.czs-template-gallery-preview .czs-preview-photo-marker{border:0!important;outline:0!important;}