:root{--cpd-primary: #1a1a1a;--cpd-secondary: #f5f5f5;--cpd-accent: #c9a227;--cpd-border: #e0e0e0;--cpd-text: #333;--cpd-text-light: #666;--cpd-success: #28a745;--cpd-danger: #dc3545;--cpd-radius: 12px;--cpd-shadow: 0 4px 20px rgba(0,0,0,.1)}.custom-patch-designer{padding:40px 20px;background:linear-gradient(135deg,#fafafa,#f0f0f0);min-height:100vh}.designer-container{max-width:1400px;margin:0 auto}.designer-header{text-align:center;margin-bottom:40px}.designer-title{font-size:3rem;font-weight:700;color:var(--cpd-primary);margin:0 0 10px}.designer-subtitle{font-size:1.3rem;color:var(--cpd-text-light);margin:0}.designer-content{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:stretch}.designer-panel--left{min-height:600px;display:flex;flex-direction:column}.designer-panel{background:#fff;border-radius:var(--cpd-radius);padding:25px;box-shadow:var(--cpd-shadow)}.section-title{font-size:1.6rem;font-weight:600;color:var(--cpd-primary);margin:0 0 15px;padding-bottom:10px;border-bottom:2px solid var(--cpd-accent)}.upload-zone{border:2px dashed var(--cpd-border);border-radius:var(--cpd-radius);padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--cpd-secondary)}.upload-zone:hover,.upload-zone.dragover{border-color:var(--cpd-accent);background:#c9a2270d}.upload-zone__icon{width:48px;height:48px;color:var(--cpd-text-light);margin-bottom:15px}.upload-zone__text{font-size:1.3rem;font-weight:500;color:var(--cpd-text);margin:0 0 5px}.upload-zone__subtext{font-size:1.1rem;color:var(--cpd-text-light);margin:0 0 10px}.upload-zone__info{font-size:1rem;color:var(--cpd-text-light);margin:0;opacity:.7}.upload-preview{position:relative;margin-top:15px;border-radius:var(--cpd-radius);overflow:hidden}.upload-preview img{width:100%;max-height:200px;object-fit:contain;background:var(--cpd-secondary);border-radius:var(--cpd-radius)}.btn--remove{position:absolute;top:8px;right:8px;width:auto;height:auto;padding:5px;border-radius:0;background:transparent;color:#dc3545;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:none;font-size:32px;line-height:1}.btn--remove:hover{transform:scale(1.2);filter:brightness(1.2)}.design-code{position:relative;background:#1a1a1a;color:#fff;padding:12px 16px;border-radius:8px;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}.design-code__label{color:#999;font-weight:500}.design-code__value{color:#c9a227;font-weight:700;font-family:monospace;font-size:1.15rem;letter-spacing:1px}.hat-section{margin-top:25px}.hat-filters{margin-bottom:15px}.filter-select{width:100%;padding:14px 18px;border:2px solid var(--cpd-border);border-radius:8px;font-size:1.15rem;font-weight:500;background:#fff;cursor:pointer;color:var(--cpd-text)}.filter-select option{font-size:1.1rem;padding:10px}.hat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;max-height:300px;overflow-y:auto;padding:5px}.hat-item{position:relative;width:100%;padding-bottom:100%;border-radius:8px;border:2px solid var(--cpd-border);overflow:hidden;cursor:pointer;transition:all .2s;background:var(--cpd-secondary)}.hat-item:hover{border-color:var(--cpd-accent);transform:scale(1.05)}.hat-item.selected{border-color:var(--cpd-accent);box-shadow:0 0 0 3px #c9a2274d}.hat-item img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.hat-item.out-of-stock{opacity:.4;cursor:not-allowed;position:relative}.hat-item.out-of-stock:hover{border-color:var(--cpd-border);transform:none}.hat-item.out-of-stock:after{content:"Agotado";position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;font-size:.65rem;text-align:center;padding:2px 0;text-transform:uppercase;letter-spacing:.5px}.preview-container{background:linear-gradient(135deg,#f8f8f8,#ececec);border-radius:var(--cpd-radius);padding:20px;min-height:400px;display:flex;align-items:center;justify-content:center;position:relative;overflow:visible!important}.preview-wrapper{position:relative;width:100%;max-width:500px;overflow:visible!important}.preview-hat{width:100%;height:auto;display:block}.patch-overlay{position:absolute;left:30%;top:25%;width:150px;height:150px;pointer-events:auto;box-sizing:border-box;z-index:10;overflow:visible!important}.patch-overlay img{width:100%;height:100%;object-fit:fill;pointer-events:auto;cursor:move}.corner-handle{position:absolute;width:20px;height:20px;background:#c9a227;border:2px solid #fff;border-radius:50%;z-index:100;pointer-events:auto;box-shadow:0 2px 6px #0006;touch-action:none}.corner-handle:hover{transform:scale(1.3);background:#e0b82e}.patch-outline{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.patch-outline svg{width:100%;height:100%;overflow:visible}.patch-outline polygon{fill:none;stroke:#c9a227;stroke-width:2;stroke-dasharray:5,5}.coord-display{position:fixed;bottom:20px;right:20px;background:#1a1a1a;color:#fff;padding:15px 20px;border-radius:10px;font-family:monospace;font-size:13px;z-index:9999;box-shadow:0 4px 20px #0000004d;min-width:220px}.coord-display p{margin:5px 0}.coord-display .highlight{color:#c9a227;font-weight:700}.coord-display label{display:block;margin:10px 0 5px;font-size:12px}.coord-display input[type=range]{width:100%;margin:5px 0}.btn--coords{background:#c9a227!important;color:#1a1a1a!important;margin-top:10px;width:100%;padding:10px;border:none;border-radius:5px;cursor:pointer;font-weight:700}.preview-empty{text-align:center;color:var(--cpd-text-light);font-size:1.15rem;line-height:1.6;padding:20px;width:100%;display:flex;align-items:center;justify-content:center;height:100%;position:absolute;top:0;left:0;right:0;bottom:0}.selected-info{margin-top:15px;padding:18px;background:var(--cpd-secondary);border-radius:8px;font-size:1.2rem}.selected-info p{margin:8px 0;color:var(--cpd-text)}.selected-info strong{color:var(--cpd-primary)}.preview-note{font-size:1.05rem;color:#666;font-style:italic;margin:-5px 0 15px;padding:0;line-height:1.4}.delivery-notice{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(135deg,#fff8e6,#fff3cd);border:1px solid #ffc107;border-radius:8px;margin-top:15px;font-size:.95rem;color:#856404}.delivery-notice svg{flex-shrink:0;color:#c9a227}.delivery-notice strong{color:#6d5302}.add-hat-option{margin:20px 0 15px;padding:15px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:10px;border:2px solid #c9a227}.hat-checkbox-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.hat-checkbox-label input[type=checkbox]{width:22px;height:22px;margin-right:12px;cursor:pointer;accent-color:#c9a227}.hat-checkbox-text{display:flex;align-items:center;gap:8px;font-size:1rem;color:#333;font-weight:500}.hat-checkbox-text svg{color:#c9a227}#hatPrice{font-weight:700;color:#c9a227}.hat-checkbox-label:hover .hat-checkbox-text{color:#000}.copyright-disclaimer{margin:15px 0;padding:15px;background:#fff8e6;border-radius:10px;border:2px solid #e6c200}.disclaimer-checkbox-label{display:flex;align-items:flex-start;cursor:pointer;-webkit-user-select:none;user-select:none;gap:12px}.disclaimer-checkbox-label input[type=checkbox]{width:22px;height:22px;min-width:22px;margin-top:2px;cursor:pointer;accent-color:#c9a227}.disclaimer-text{font-size:.9rem;color:#5c4d00;line-height:1.5}.disclaimer-checkbox-label:hover .disclaimer-text{color:#3d3300}.copyright-disclaimer.error{border-color:#dc3545;background:#fff5f5;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.action-buttons{display:flex;gap:15px;margin-top:20px}.btn{flex:1;padding:15px 20px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .3s ease;border:none}.btn svg{width:20px;height:20px}.btn--primary{background:var(--cpd-primary);color:#fff}.btn--primary:hover:not(:disabled){background:#333;transform:translateY(-2px)}.btn--secondary{background:var(--cpd-accent);color:var(--cpd-primary)}.btn--secondary:hover:not(:disabled){background:#d4ac2b;transform:translateY(-2px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}@media (max-width: 1024px){.designer-content{grid-template-columns:1fr}.designer-panel--right{order:-1}.preview-container{min-height:300px}}@media (max-width: 768px){.custom-patch-designer{padding:20px 15px}.designer-title{font-size:1.8rem}.designer-subtitle{font-size:1rem}.designer-panel{padding:20px 15px}.upload-zone{padding:30px 15px}.hat-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));max-height:200px}.action-buttons{flex-direction:column}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.upload-zone.dragover{animation:pulse .5s ease infinite}.loading{position:relative;pointer-events:none}.loading:after{content:"";position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:3px solid var(--cpd-border);border-top-color:var(--cpd-accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hat-grid-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;gap:15px;background:#ffffffe6;border-radius:var(--cpd-radius);margin-bottom:15px}.hat-grid-loader p{margin:0;color:var(--cpd-text);font-size:.95rem}.loader-spinner{width:40px;height:40px;border:4px solid var(--cpd-border);border-top-color:var(--cpd-accent);border-radius:50%;animation:spin .8s linear infinite}.hat-grid{transition:opacity .3s ease}.image-controls{margin-top:20px;padding:18px;background:var(--cpd-secondary);border-radius:var(--cpd-radius);border:1px solid var(--cpd-border)}.controls-title{font-size:1.1rem;font-weight:600;color:var(--cpd-primary);margin:0 0 15px}.control-group{margin-bottom:15px}.control-group:last-child{margin-bottom:0}.control-label{display:block;font-size:.95rem;font-weight:500;color:var(--cpd-text);margin-bottom:8px}.toggle-buttons{display:flex;gap:0;border-radius:8px;overflow:hidden;border:2px solid var(--cpd-border)}.toggle-btn{flex:1;padding:12px 16px;border:none;background:#fff;color:var(--cpd-text);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.toggle-btn:first-child{border-right:1px solid var(--cpd-border)}.toggle-btn:hover:not(.active){background:#c9a2271a}.toggle-btn.active{background:var(--cpd-accent);color:var(--cpd-primary);font-weight:600}.zoom-slider{width:100%;height:8px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--cpd-accent) 0%,var(--cpd-border) 0%);border-radius:4px;outline:none;margin-top:5px}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;background:var(--cpd-accent);border:3px solid white;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003;transition:transform .2s ease}.zoom-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.zoom-slider::-moz-range-thumb{width:22px;height:22px;background:var(--cpd-accent);border:3px solid white;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}#zoomValue{font-weight:600;color:var(--cpd-accent)}.pan-controls{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;background:#fff;border-radius:8px;border:2px solid var(--cpd-border)}.pan-row{display:flex;justify-content:center;gap:4px}.pan-row--middle{display:flex;gap:4px}.pan-btn{width:44px;height:44px;border:2px solid var(--cpd-border);border-radius:8px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;color:var(--cpd-text)}.pan-btn:hover{border-color:var(--cpd-accent);background:#c9a2271a;color:var(--cpd-accent)}.pan-btn:active{background:var(--cpd-accent);border-color:var(--cpd-accent);color:#fff;transform:scale(.95)}.pan-btn--center{width:44px;height:44px;background:var(--cpd-secondary);border-color:var(--cpd-accent)}.pan-btn--center:hover{background:var(--cpd-accent);color:#fff}.pan-btn svg{width:20px;height:20px;pointer-events:none}@media (max-width: 768px){.image-controls{padding:15px}.toggle-btn{padding:10px 12px;font-size:.85rem}.pan-btn,.pan-btn--center{width:40px;height:40px}}@supports (-webkit-touch-callout: none){.hat-item{position:relative;-webkit-transform:translateZ(0);transform:translateZ(0)}.hat-item img{position:relative;-webkit-backface-visibility:hidden;backface-visibility:hidden}}.hat-grid,.hat-item img{-webkit-transform:translateZ(0);transform:translateZ(0)}.upload-zone.checking{pointer-events:none;opacity:.8}.upload-checking{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:15px}.upload-checking .spinner{width:40px;height:40px;border:3px solid #e0e0e0;border-top-color:#111;border-radius:50%;animation:spin .8s linear infinite}.upload-checking p{color:#666;font-size:14px;margin:0}
/*# sourceMappingURL=/cdn/shop/t/41/assets/custom-patch-designer.css.map */